9 Replies Latest reply on Mar 16, 2007 9:11 AM by holmes_z06

    Mixing MXML and AS3

    holmes_z06
      Well I'm just starting with Flex2 and AS3. I have some Flash Experience as I created this Flash app entirely in AS2. All I did was put the different components on the stage, and then initialized them in Actionscript. So now it's time to re-write it, add a whole bunch of new features, and generally just make it cooler.

      But I'm not understanding a few things here. I'd prefer to layout the basic structure of my app in a mxml file, but then wire everything together using class files written in ActionScript.

      How do you use anything in the mx.controls package inside of a ActionScript file? How do you access elements from the mxml file in an AS3 class file?

      Can you create mx.controls in an AS3 file?

      I'm currently using FlashDevelop 2.0.2 which has limited AS3 support while I'm waiting for a staggeringly slow FlexBuilder download to get to me. So maybe it's lacking in some things, but i'm using the Flex SDK to compile, so I'm sure the errors will exist in both places.

      Any insight? Or something I can read?
        • 1. Re: Mixing MXML and AS3
          ctzn99
          Flexbuilder has quite a few tutorials and how to's that I think will meet your requirements. You'll have to be patient while your file downloads though...
          • 2. Re: Mixing MXML and AS3
            sean_hess
            You can easily create mx.controls in an AS3 file. The trouble is getting to the as3 file in the first place.

            My way of doing it is below. Just create classes and instantiate them directly. You'll see I also add a couple components. I'm adding them to a canvas so I can position them absolutely, but you can add anything that extends UIComponent directly to the main application. (So you could remove the mainCanvas before addChild).

            In this example, TreeControl extends mx.controls.Tree, and if you used a mx.control.Tree instead, it would work fine.

            The class main extends UIComponent, so I can add flash stuff to it directly. This is something I commonly want to do.

            Anyway, let me know if you have questions.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:ff="flex.*"
            paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"
            width="1015" height="690"
            horizontalScrollPolicy="off" verticalScrollPolicy="off"
            applicationComplete="onCreationComplete(event);"
            layout="absolute"
            horizontalAlign="left"
            verticalAlign="top"
            >


            <mx:Script>
            <![CDATA[

            import mx.events.FlexEvent;
            import mx.controls.ComboBox;
            import flex.TreeControl;
            import mx.containers.Canvas;
            import flash.events.Event;
            import mx.controls.Label;
            import Main;
            import mx.core.Application;
            import flash.display.Stage;

            private var mainCanvas:Canvas;

            private function onCreationComplete(event:FlexEvent):void
            {
            mainCanvas = new Canvas();
            addChild(mainCanvas);

            var main:Main = new Main();
            mainCanvas.addChild(main);

            var pageTypes:ComboBox = new ComboBox();
            pageTypes.x = 750;
            pageTypes.y = 636;
            mainCanvas.addChild(pageTypes);

            var tree:TreeControl = new TreeControl();
            mainCanvas.addChild(tree);


            }



            ]]>

            </mx:Script>

            </mx:Application>


            • 3. Re: Mixing MXML and AS3
              holmes_z06 Level 1
              Sean -
              Thanks for the help. That seems to work perfectly.

              One question - should I be adding things to the mainCanvas or to Main itself?

              -Jason
              • 4. Re: Mixing MXML and AS3
                Gil1 Level 1
                Sean,

                I was looking for something like this.

                However, how would you combine this with some other stuff in mxml?
                Or you can call components always from AS3 for the whole app.?

                Gilbert
                • 5. Re: Mixing MXML and AS3
                  holmes_z06 Level 1
                  One more question - how do I access components that may have been placed on the stage within my AS3 code? I realize I can probably pass them in at a later time, but I was wondering if I could directly access them from the stage?

                  My current code gives what appears to be a NullPointerException (yeah I'm a Java programmer). Any hints? or is it even possible?


                  Let's say my main.mxml looks like this...
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:ff="flex.*"
                  paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"
                  width="500" height="500"
                  horizontalScrollPolicy="off" verticalScrollPolicy="off"
                  applicationComplete="onCreationComplete(event);"
                  layout="absolute"
                  horizontalAlign="left"
                  verticalAlign="top"
                  >
                  <mx:DataGrid id="datagrid" name="datagrid" x="99" y="129">
                  <mx:columns>
                  <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                  <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                  <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                  </mx:columns>
                  </mx:DataGrid>

                  <mx:Script>
                  <![CDATA[
                  import mx.events.FlexEvent;
                  import mx.containers.Canvas;
                  import mx.core.Application;

                  import com.garmin.mb.player.PlayerCanvas;

                  /**
                  * the canvas where everything is drawn.
                  */
                  private var mainCanvas:Canvas;

                  private function onCreationComplete(event:FlexEvent):void {
                  var main:PlayerCanvas = new PlayerCanvas();
                  addChild(main);
                  }
                  ]]>
                  </mx:Script>
                  </mx:Application>

                  And my PlayerCanvas looks like this...
                  package com.mb.player {
                  import flash.events.MouseEvent;

                  import mx.containers.Canvas;
                  import mx.controls.Alert;
                  import mx.controls.DataGrid;
                  import mx.controls.HSlider;
                  import mx.controls.TextInput;

                  public class PlayerCanvas extends Canvas {
                  /**
                  * TextInput for nothing of any value;
                  */
                  private var input:TextInput;

                  /**
                  * Slider that controls the position of the user on the track
                  */
                  private var slider:HSlider;

                  /**
                  * the data table
                  */
                  private var datagrid:DataGrid;

                  public function PlayerCanvas():void {
                  this.buildTextInput();
                  this.buildSlider();
                  this.datagrid = (DataGrid)(parent.getChildByName("datagrid"));
                  this.datagrid.x = 20;
                  }
                  ...
                  }
                  }
                  • 6. Re: Mixing MXML and AS3
                    ntsiii Level 3
                    I think you are over complicating this.

                    In AS3 code you can access any component declared in mxml by its id property:
                    <mx:DataGrid id="myDG" .../>

                    and in AS:
                    myDG.x = 20;

                    Tracy
                    • 7. Re: Mixing MXML and AS3
                      ntsiii Level 3
                      If you instantiate components using mxml, the compiler automatically creates an instance variable with the name= to the id you assign, and places a reference to the component in that variable.

                      If you instantiate components using AS, yo will have to create the references yourself, typically in an associative array.

                      mxml is much easier.
                      Tracy
                      • 8. Re: Mixing MXML and AS3
                        ntsiii Level 3
                        Avoid using getChildByName() Adobe does not promise that the "name" property will be equal to the "id" you assign.

                        Tracy
                        • 9. Re: Mixing MXML and AS3
                          holmes_z06 Level 1
                          The thing is I have all my components being created and laid out in my mxml file. Then in my <mx:Script> onCompletion I create a class that controls those components.

                          I figured out Application.application.componentId exists and can be used to access the components laid out in my main.mxml file.

                          Thanks,
                          Jason