Drawing a Rectangle in Flex
In my last post I kind of talked about drawing a line in flex, (not just programmatically) but how to let the user draw the line… for example, in photoshop, you use the line tool to draw a straight line…
Create a simple whiteboard type application with flex and actionscript 3 extending the UIComponent
After making the example files, I realized I’m really not THAT far off of a somewhat white boarding application… granted mine doesn’t share the information, or save it anywhere, but the example just simply shows how to get it started…
Dynamically create classes
I added a DrawingToolManger class in this, I found out how to dynamically create classes… I opened up the code to the PopUpManager to get ideas for doing things, and thats where I started to look at the createPopUp function.
I decided a component like the PopUpManager was fairly complicated for the example I want to show… I don’t really care about the display list and grabbing child components right now (with say… a hand tool)… the example isn’t that far yet…
I need to be able to create any type of class, and add it to the display… my manager returns the new class, and then I can add it to the display…
the coolest part of this was finding out, by typing the class as a type:Class, i can then create a new instance of any class… say i pass a LineTool to my manager it would be something like this:
import com.acj.paperClasses.LineTool;
var myTool:DrawingTool = DrawingToolManager.createTool(LineTool, event);
/*******************in the manager*************/
public static function createTool(className:Class, event:MouseEvent):DrawingTool{
var newClass:DrawingTool = new className(); //this is the awesomeness!!
return newClass;
}
by calling className, i can then invoke the newClass, by ANY class I pass in, by calling the contructor newClass() (technically being resolved to LineTool() in this case! it’s sooo dynamic! it’s great!
You also can’t forget about the function flash.utils.getDefinitionByName(string:String):Object;
you can use that to invoke an object by passing it a string… like this:
var o:Object = flash.utils.getDefinitionByName(’com.acj.paperClasses.LineTool’):Object;
var d:DrawingTool = new o();
that will evaluate into d = (an instance of)com.acj.paperClasses.LineTool
it’s another way of doing things dynamically…
it’s not really ground breaking stuff… but hopefully someone gets something out of it…
(same links that were at the top, just here in case blog entry gets long)








5 users commented in " Drawing in Flex using the UIComponent (part 2) (note: dynamic classes too) "
Follow-up comment rss or Leave a Trackbackplease help me how to integrate pdf’s into white board so whatever we use thru pdf can be seen live,online to other users.Can u give me some examples for kickstart.
Very good example !! I was looking for such a example. Thanks……..
Nice and good example, who is interested in Flex drawings.
Hi Axel,
thanks for this great example. Could you explain to me why the mouse event listeners are attached to the systemManager class and not to the BlankPaperWrapper? The SystemManager’s purpose is not so clear to me!
Thanks in advance,
Theo Lagendijk
Sorry, I think I found the answer to my last question on this page http://livedocs.adobe.com/flex/gumbo/langref/mx/managers/SystemManager.html
“All keyboard and mouse activity that is not expressly trapped is seen by the SystemManager, making it a good place to monitor activity should you need to do so.”
Leave A Reply