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:
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)
i'll add a tidbit in case you haven't learned this as well... i wanted my users to be able to hit the esc key to stop drawing if they were making a mistake... i learned that you have to do this:
/* ----------------------------------------------------------------------
add event to listen for keyboard press this will signal a "cancel"
The only requirement for listening and responding to keyboard events is that the object that receives the events must have focus.
You do this for the main application by adding the line:
----------------------------------------- */
stage.focus = this;
this.addEventListener( KeyboardEvent.KEY_DOWN, onKeyboardPressWhileDrawing );
BTW, in this particular sample why do we have to initiate a new intance of the drawing class every time we change a current Tool?
To accomplish the similar task, we create all tool instances only once during the app's lifetime and store them as static variables of the class:
public static const SELECTION_TOOL : SelectionTool = new SelectionTool();
public static const TEXT_TOOL : TextTool = new TextTool();
public static const ZOOM_TOOL : ZoomTool = new ZoomTool();
...
private function onToolButtonClick(event : MouseEvent) : void {
switch (event.currentTarget) {
case selectionToolButton :
currentTool = SELECTION_TOOL;
break;
case textToolButton :
currentTool = TEXT_TOOL;
break;
case zoomToolButton :
currentTool = ZOOM_TOOL;
break;
}
}