dcsimg
A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: Using Flex controls in AS3? (mx.control.*)

  1. #1
    Senior Member rachil0's Avatar
    Join Date
    Jul 2007
    Location
    Columbus, OH.
    Posts
    465

    Using Flex controls in AS3? (mx.control.*)

    I am working on a modest 3D model editor in AS3 - the content I would like to be able to create is roughly the same complexity as the player models from descent1/mechwarrior2. My vision for it has non-trivial UI requirements (menubar, panels, buttons, geometry picking within a graphics context, nested layout). I would like to use the built-in components of Flex to help knock that out quickly. But I also have robust pre-existing routines for texturing, visibility and clipping. I would like to reuse these and they are written in AS3.

    My initial vision was that it would be fundamentally an AS3 project which uses the Flex controls just like regular displayObjects and catches their UI events. But despite their inheritance from displayObjects, this doesn't really seem possible. It's extremely tedious (if not impossible) to set them up without using .mxml code in the first place. The other direction (using AS3 classes inside an .mxml application) is more feasible but its still very convoluted because AS3 flash.display.displayObjects do not satisfy the correct interfaces to be children of mx.containers.*.

    I am very displeased with the architectural schism here - two different languages (.mxml and .as) are compileable by the same compiler (mxmlc) and have the same binary target (.swf) but are not very compatible for use in a common application. For example, an mx.container is a descent of DisplayObjectContainer, and it has an addChild method whose signature accepts a flash.display.DisplayObject. But if you try to addChild a flash.display.DisplayObject, it throws a runtime error because any child of a mx.container must satisfy all the interfaces of a mx.controls.UIComponent (which is a dizzying list of requirements). To its credit, the AS3LR mentions this, but it seems really stupid to me to allow this error propagate to runtime when it could be detected at compile time if only the inheiritance diagrams of mx.controls and flash.display weren't so tightly coupled.

    I have an implementation that looks like it will work: using an .mxml "main" program, add a Canvas child and then draw all my as3 3D entities into its graphics context. But it was a real frustrating process to get this working and it feels very brittle. I still haven't resolved all the mouse event handling to get AS3 objects to respond to the clicks inside the mx Canvas.

    Am I doing things totally wrong here? If anyone else has good design idioms for using mx.controls inside AS3 I would love to hear suggestions.

  2. #2
    bibuti. nolen's Avatar
    Join Date
    Sep 2002
    Location
    az.
    Posts
    191
    If I understand your problem correctly, the following code might help you.

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init(event);">
    	
    	<mx:Script>
    		<![CDATA[
    			import mx.events.FlexEvent;
    			import mx.core.UIComponent;
    			import flash.display.Shape;
    			
    			private var uiComp:UIComponent;
    			private var shp:Shape;
    			
    			private function init(e:FlexEvent):void
    			{
    				shp = new Shape();
    				shp.graphics.lineStyle(2, 0xFFFFFF, 1);
    				shp.graphics.beginFill(0xFFFFFF, 1);
    				shp.graphics.drawRect(0, 0, 50, 100);
    				shp.graphics.endFill();
    				
    				uiComp = new UIComponent();
    				uiComp.addChild(shp);
    				mainCanvas.addChild(uiComp);
    				//mainCanvas.rawChildren.addChild(shp);
    				
    			}
    		]]>
    	</mx:Script>
    	
    	<mx:Canvas id="mainCanvas" left="10" top="10" right="10" bottom="10">
    		
    	</mx:Canvas>
    </mx:Application>
    Basically, you create a UIComponent instance in actionScript which will then allow you to add a regular DisplayObject to it as a child. After that is complete, you can add the UIComponent as a child to any other Flex component by using their addChild method.

    I also included but commented out the rawChildren property of the canvas Flex component in the example. The rawChildren property lets you use addChildren to add regular DisplayObjects to the screen as well though they will not be automatically arranged/sorted by the Flex Component that contains them. For a Canvas component, you won't see much difference but try it on a title window or something similar and you will see what I mean.

    Remember, you can only access the Flex components via actionScript in Flex projects not actionScript-only projects.

    If you have any questions, let me know. I'll be on my work machine all day.
    i'm obsessed with video games.

  3. #3
    Senior Member rachil0's Avatar
    Join Date
    Jul 2007
    Location
    Columbus, OH.
    Posts
    465
    Quote Originally Posted by nolen
    Basically, you create a UIComponent instance in actionScript which will then allow you to add a regular DisplayObject to it as a child. After that is complete, you can add the UIComponent as a child to any other Flex component by using their addChild method.
    Now this is something I hadn't tried. I was addChild'ing directly into a UIContainer, I didn't think to wrap a UIComponent around everything. I don't think I even read the docs for UIComponent, I assumed it was an abstract base (non-instantiable) like flash.display.DisplayObject. They seem to perform similar jobs, on opposite sides of the as/mxml fence.

    Quote Originally Posted by nolen
    Remember, you can only access the Flex components via actionScript in Flex projects not actionScript-only projects.
    I think this is where I really got tripped up. If I want to use flex components, my entry point / "int main()" will have to be a ".mxml <Application/>" not a ".as Document Class". I still think this is a poor architectural decision on Adobes behalf but understanding it will help greatly.

    Thank you for the helpful reply! I will try your example out as soon as I can.

  4. #4
    bibuti. nolen's Avatar
    Join Date
    Sep 2002
    Location
    az.
    Posts
    191
    Quote Originally Posted by rachil0
    Thank you for the helpful reply! I will try your example out as soon as I can.
    No problem! Let me know if you get it working, and awesome work on all the 3D engines you've made in actionscript. Those examples on your site are impressive.
    i'm obsessed with video games.

  5. #5
    Senior Member rachil0's Avatar
    Join Date
    Jul 2007
    Location
    Columbus, OH.
    Posts
    465
    Thank you for the e-visit

    If you enjoyed those demos I think you'd also really like another project I collaborated on, Pinball Racers. There's a thread about it over here, you can just skip straight to the last post and see the finished product (there's no direct link to it on my homepage - need to fix that).

    http://board.flashkit.com/board/showthread.php?t=756796

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center