Drawing in Flex using the UIComponent (part 2) (note: dynamic classes too)

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:

//in the Wrapper 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)


7 comments on this post.
  1. veerraju:

    please 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.

  2. harshil vyas:

    Very good example !! I was looking for such a example. Thanks……..

  3. Kumaran:

    Nice and good example, who is interested in Flex drawings.

  4. Theo Lagendijk:

    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

  5. 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.”

  6. Abdelilah Nachit:

    I appreciate your effort, and thanks a lot for this example.A forum like this is basically a collective effort to help each other not judging each other.

    Cheers Mate

    Abdelilah Nachit

  7. harinath:

    I need a small help from you how to clearscreen the drawing objects

Leave a comment