25 Replies Latest reply on Mar 12, 2008 1:41 PM by Tikis_Mikis

    Creating AS3 ITEMRENDERER without using MXML

    Tikis_Mikis Level 1
      Hello I have this sample code that I found

      <mx:List id="list"
      dataProvider="{arrColl}"
      alternatingItemColors="[#EEEEEE, white]"
      width="150"
      rowCount="8">
      <mx:itemRenderer>
      <mx:Component>
      <mx:CheckBox selectedField="isSelected"
      change="onChange(event);">
      <mx:Script>
      <![CDATA[
      private function onChange(evt:Event):void {
      data.isSelected = !data.isSelected;
      }
      ]]>
      </mx:Script>
      </mx:CheckBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:List>

      I need to translate that to dynamic AS3 code but I just don't know how. Here is what I have so far:

      var newList1:List = new List();
      newList1.id = "newList1";
      newList1.dataProvider = phpData;
      newList1.allowMultipleSelection = true;
      newList1.width = 200;
      newList1.height = 400;
      newList1.x = 10;
      newList1.y = 20;
      // newList1.itemRenderer??????????????
      newList1.setStyle("alternatingItemColors", new Array("#EEEEEE", "white"));

      As you can see I'm stuck in the part where I need to create the item rendered with the check box. HELP!

      Thanks in advance!
        • 1. Re: Creating AS3 ITEMRENDERER without using MXML
          Garyl Woolworth Level 1
          Removing because preview created posted entry instead of previewing...
          • 2. Re: Creating AS3 ITEMRENDERER without using MXML
            Garyl Woolworth Level 1
            What your looking to do can be done via ClassFactory. I've written a little example to show you how it can be used.

            <!-- Test.mxml (Application File) -->
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initComplete()">

            <mx:Script>
            <![CDATA[

            import mx.controls.List;
            import mx.collections.ArrayCollection;

            [Bindable] private var phpData:ArrayCollection = new ArrayCollection();

            private function initComplete():void {
            for(var i:Number = 0; i < 10; i++){
            phpData.addItem({label:"item"+i, isSelected:(i%2) ? true : false});
            }

            var newList1:List = new List();
            newList1.id = "newList1";
            newList1.dataProvider = phpData;
            newList1.allowMultipleSelection = true;
            newList1.width = 200;
            newList1.height = 400;
            newList1.x = 10;
            newList1.y = 20;
            newList1.itemRenderer = new ClassFactory(CheckBoxRenderer);
            newList1.setStyle("alternatingItemColors", new Array("#EEEEEE", "white"));
            addChild(newList1);
            }
            ]]>
            </mx:Script>

            </mx:Application>

            <!-- CheckBoxRenderer.mxml (the itemRenderer) -->
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%">
            <mx:Script>
            <![CDATA[
            private function onChange(evt:Event):void {
            data.isSelected = !data.isSelected;
            }
            ]]>
            </mx:Script>

            <mx:CheckBox label="{data.label}" selected="{data.isSelected}" change="onChange(event);"/>
            </mx:Canvas>
            • 3. Re: Creating AS3 ITEMRENDERER without using MXML
              Tikis_Mikis Level 1
              Hello thank you so much for your reply! I am not using MXML whatsoever - all my Flex components are dynamically generated with AS3.

              So I am trying to translate the bottom part of your reply above

              Your code:
              <!-- CheckBoxRenderer.mxml (the itemRenderer) -->
              <?xml version="1.0" encoding="utf-8"?>
              <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%">
              <mx:Script>
              <![CDATA[
              private function onChange(evt:Event):void {
              data.isSelected = !data.isSelected;
              }
              ]]>
              </mx:Script>

              <mx:CheckBox label="{data.label}" selected="{data.isSelected}" change="onChange(event);"/>
              </mx:Canvas>

              And I am trying to rewrite the MXML into AS3:

              var newList1:List = new List();
              newList1.id = "newList1";
              newList1.dataProvider = phpData;
              newList1.allowMultipleSelection = true;
              newList1.width = 200;
              newList1.height = 400;
              newList1.x = 10;
              newList1.y = 20;

              // CHECKBOX CLASS
              var newCheckBox1:CheckBox = new CheckBox();
              newCheckBox1.id = "newCheckBox1";
              // ADD the newCheckBox object to the item renderer
              newList1.itemRenderer = new ClassFactory(newCheckBox1);

              newList1.setStyle("alternatingItemColors", new Array("#EEEEEE", "white"));
              addChild(newList1);

              I just assumed the above code would work BUT I get this error:

              1067: Implicit coercion of a value of type mx.controls:CheckBox to an unrelated type Class.

              Let me add I'm still very new to AS3 and just learning this stuff. Any help you can offer will be greatly appreciated!
              • 4. Re: Creating AS3 ITEMRENDERER without using MXML
                Garyl Woolworth Level 1
                Keep everything the same in my example except for CheckBoxRenderer that file is now going to look like this.

                <!-- CheckBoxRenderer.as -->
                package {

                import flash.events.Event;
                import mx.controls.CheckBox;

                public class CheckBoxRenderer extends CheckBox {

                public function CheckBoxRenderer(){
                super();

                // => Add listener to detect change in selected
                this.addEventListener(Event.CHANGE, onChangeHandler);
                }

                // Override the set method for the data property.
                override public function set data(value:Object):void {
                super.data = value;

                // => Make sure there is data
                if (value != null){
                // => Set the label
                this.label = value.label;

                // => Set the selected property
                this.selected = value.isSelected;
                }

                // => Invalidate display list,
                // => If checkbox is now selected, we need to redraw
                super.invalidateDisplayList();
                }

                // => Handle selection change
                private function onChangeHandler(event:Event):void {
                super.data.isSelected = !super.data.isSelected;
                }

                }
                }
                • 5. Re: Creating AS3 ITEMRENDERER without using MXML
                  Tikis_Mikis Level 1
                  Wow that worked how interesting. I don't know how I wouldve done this without your help.

                  Question: do you know how to make it so that only the checkbox itself becomes clickable? By default when you click on either the checkbox or in the label the checkbox is either checked or unchecked. I want to make it so that the checkbox will become checked or unchecked ONLY IF the checkbox is clicked and NOT the label.

                  Thanks a bunch!
                  • 6. Re: Creating AS3 ITEMRENDERER without using MXML
                    Garyl Woolworth Level 1
                    Yeah it can be done but I would suggest not going with a straight checkbox anymore, I don't know of a way to get the label part of the checkbox to not register mouse events even though I don't doubt it can be done. A pretty easy solution though is extend an HBox and create your separate controls within that. Example would be as follows.

                    <!-- CheckBoxRenderer.as -->
                    package {

                    import flash.events.Event;

                    import mx.containers.HBox;
                    import mx.controls.CheckBox;
                    import mx.controls.Label;

                    public class CheckBoxRenderer extends HBox {

                    private var lbl:Label;
                    private var checkbox:CheckBox;

                    public function CheckBoxRenderer(){
                    super();

                    // => Create checkbox instance
                    checkbox = new CheckBox();
                    // => Add listener to detect change in selected
                    checkbox.addEventListener(Event.CHANGE, onChangeHandler);
                    // => Add checkbox to hbox
                    this.addChild(checkbox);

                    // => Create label instance for label
                    lbl = new Label();
                    // => Add label to hbox
                    this.addChild(lbl);
                    }

                    // Override the set method for the data property.
                    override public function set data(value:Object):void {
                    super.data = value;

                    // => Make sure there is data
                    if (value != null){
                    // => Set the label
                    lbl.text = value.label;

                    // => Set the selected property
                    checkbox.selected = value.isSelected;
                    }

                    // => Invalidate display list,
                    // => If checkbox is now selected, we need to redraw
                    super.invalidateDisplayList();
                    }

                    // => Handle selection change
                    private function onChangeHandler(event:Event):void {
                    super.data.isSelected = !super.data.isSelected;
                    }

                    }
                    }
                    • 7. Re: Creating AS3 ITEMRENDERER without using MXML
                      Tikis_Mikis Level 1
                      OMG wow question where/how did you become so fluent in Flex? I have had a challenging time learning by myself is this is definitely the first time I attempt custom Flex components. I really appreciate your help. I really want to get into special effects and animation in Flash/Flex....any tips?
                      • 8. Re: Creating AS3 ITEMRENDERER without using MXML
                        Tikis_Mikis Level 1
                        You know I'm so sorry to bug you....but I think this will probably be one of the last times I bug you ehehe...well this link exemplifies my problem perfectly:

                        http://www.stfm.org/test/flex/datagridcheckbox/bin/datagridcheckbox.html?confid=141

                        If you click on a few checkboxes then scroll up and down you will see that the checks jump all over the place. Have you seen this before?
                        • 9. Re: Creating AS3 ITEMRENDERER without using MXML
                          Garyl Woolworth Level 1
                          It's no problem. Yes I have seen that problem many times, I had actually forgotten about that since I only had it creating 10 items my list was not scrolling. Luckily enough there is an easy fix to it. On a list you generally only have to set what's called the rendererIsEditor property to true. This makes it so that when the checkbox is changed it changes the underlying dataProvider which also fixes the scrolling issue most times. There are cases where this will still happen and there are two other properties that can be set. I generally have only needed to set them on a datagrid though. Those properties are editorDataField = "selected"; and editable = true; I normally start with rendererIsEditor and see if I can get away with just that. An example of what the new list would look like is as follows.

                          // => List
                          var newList1:List = new List();
                          newList1.id = "newList1";
                          newList1.dataProvider = phpData;
                          newList1.allowMultipleSelection = true;
                          newList1.width = 200;
                          newList1.height = 400;
                          newList1.x = 10;
                          newList1.y = 20;
                          newList1.rendererIsEditor = true;
                          //newList1.editable = true;
                          //newList1.editorDataField = "selected";
                          newList1.itemRenderer = new ClassFactory(CheckBoxRenderer);
                          newList1.setStyle("alternatingItemColors", new Array("#EEEEEE", "white"));
                          addChild(newList1);

                          As far as how I actually came to learning this stuff most of it was by needing to do something for a project and piecing apart other peoples examples to get what I needed, doing this for over a year straight gets ya pretty proficient in finding ways to do stuff. As far as animation goes thats probably my weakest point honestly haven't dealt to much into it, most my applications needed to be static with things. A good resource to start out with would be from this site http://scalenine.com/blog/2007/10/09/%E2%80%9Cstateful%E2%80%9D-flex-skins-with-transition s-using-flash/ hope this helps.

                          • 10. Re: Creating AS3 ITEMRENDERER without using MXML
                            slaingod Level 1
                            You could also just cover up the label part with another transparent control, like a transparent Canvas, so that it wasn't clickable. Might need to do a little calculation from the cb control size to do it dynamically.
                            • 11. Creating AS3 ITEMRENDERER without using MXML
                              Tikis_Mikis Level 1
                              I'm sorry to say but setting those options didn't help. I wonder if it's Flex bug I need to update? You mention "changing the underlying dataprovider". My data provider is an associative array quite large and complex. I am using it in a set of THREE lists that act much like an HTML hierslect. The rows in each consecutive list depend on the row selected in the list before it.

                              And not only that I am also getting this error when scrolling:

                              TypeError: Error #1010: A term is undefined and has no properties.
                              at mx.controls.listClasses::ListBase/scrollVertically()
                              at mx.controls::List/scrollHandler()
                              at flash.events::EventDispatcher/dispatchEventFunction()
                              at flash.events::EventDispatcher/dispatchEvent()
                              at mx.core::UIComponent/dispatchEvent()
                              at mx.controls.scrollClasses::ScrollBar/ http://www.adobe.com/2006/flex/mx/internal::dispatchScrollEvent()
                              at mx.controls.scrollClasses::ScrollThumb/mouseMoveHandler()


                              I'm really frustrated with this but I am trying searching all over the place for a solution.
                              • 12. Re: Creating AS3 ITEMRENDERER without using MXML
                                Garyl Woolworth Level 1
                                Are you using an array or array collection?
                                • 13. Creating AS3 ITEMRENDERER without using MXML
                                  Tikis_Mikis Level 1
                                  I am using an ArrayCollection....??? does it make a difference?

                                  My remoting call returns an Array and I do this with it:

                                  // convert the result array into an array collection
                                  phpData = new ArrayCollection(result);

                                  and I use phpData to set my dataProvider for the lists
                                  • 14. Re: Creating AS3 ITEMRENDERER without using MXML
                                    Tikis_Mikis Level 1
                                    I just tried using Array instead of ArrayCollection but I get the same issues :(
                                    • 15. Re: Creating AS3 ITEMRENDERER without using MXML
                                      Garyl Woolworth Level 1
                                      You should be using ArrayCollection over an Array, an ArrayCollection is essentially a wrapper for an Array but it provides an extra set of methods and uses for bindings when used as a dataProvider. I'm not 100% sure why you are getting those errors, I do not receive them on my test example, if you can create a test example of your code I could try and trouble shoot it more based off that but at this moment I'm not entirely sure.
                                      • 16. Re: Creating AS3 ITEMRENDERER without using MXML
                                        Tikis_Mikis Level 1
                                        I can certainly create a sample. Here is my main app which I called RemotingTest.xml:

                                        <?xml version="1.0" encoding="utf-8"?>
                                        <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
                                        creationComplete="initApplication()"
                                        layout="absolute">

                                        <!-- include the main actionscript file from which all dynamic operations take place -->
                                        <mx:Script source="Main.as" />
                                        <mx:Canvas x="10" y="10" width="711" height="481" id="myCanvas">
                                        </mx:Canvas>

                                        </mx:Application>

                                        • 17. Re: Creating AS3 ITEMRENDERER without using MXML
                                          Tikis_Mikis Level 1
                                          Main.as ==================================


                                          // ##############################################################
                                          // ##############################################################
                                          // Here import all basic/necessary libraries and classes that are used to start up this project

                                          // import the remoting class to create a connection to a server with AMFPHP gateway set up
                                          import Remoting.RemotingConnection;
                                          // import the responder class to create a connection to a server with AMFPHP gateway set up
                                          import flash.net.Responder;
                                          // also import the FaultEvent class to handle the fault return in the gateway call
                                          import mx.rpc.events.FaultEvent;
                                          // import the ArrayCollection container class to store arrays or result sets from AMFPHP
                                          import mx.collections.ArrayCollection;
                                          // import the Alert control class to display and warning or alerts to the main screen
                                          import mx.controls.Alert;

                                          // ##############################################################
                                          // ##############################################################
                                          // Here import all other classes and libraries to be used in the custom Flex app being developed

                                          // start import in this line
                                          import FormComponents.ThreeLevelHierSelect;
                                          import mx.controls.ProgressBar;
                                          import mx.controls.DataGrid;
                                          import mx.controls.List;
                                          import mx.events.ListEvent;
                                          import flash.events.Event;
                                          import mx.controls.Label;
                                          import mx.containers.Canvas;

                                          // ##############################################################
                                          // ##############################################################
                                          // Here declare all BINDABLE variables and objects

                                          // bindabel PHP data variable to store data returned by a PHP service to be processed
                                          [Bindable]
                                          public var phpData:ArrayCollection = new ArrayCollection();

                                          // ##############################################################
                                          // ##############################################################
                                          // Here declare all other variable and objects

                                          private var componentObjectMap:Array = new Array();

                                          // create new gateway Remoting Connection to connect to the PHP service
                                          public var gateway:RemotingConnection;


                                          // ##############################################################
                                          // ##############################################################
                                          /**
                                          * Main application begins. init application function sets all initial connections, data, inforamtion,
                                          * etc for the current app being accessed by the user
                                          *
                                          */
                                          public function initApplication():void
                                          {
                                          // get the gateway url location to process the remote data requests
                                          var gatewayUrl:String = Application.application.parameters.gatewayUrl;

                                          // just in case a gateway parameter was not passed set a default gateway URL here
                                          if (gatewayUrl == '') {
                                          // project name is your current symfony project name ex: ltc_deathstar
                                          // ex. gateway url: http://dev-sandbox/project_name/web/backend_dev.php/gateway/amfphp
                                          gatewayUrl = ' http://dev-sandbox/project_name/web/backend_dev.php/gateway/amfphp';
                                          }

                                          // set up the connection gateway to remotely connect to the AMPFPHP services
                                          gateway = new RemotingConnection(gatewayUrl);

                                          // a gateway call example to some AMFPHP service located at gatewayUrl
                                          var data:String = new String();


                                          var newProgressBar:ProgressBar = new ProgressBar();
                                          newProgressBar.id = "newProgressBar";
                                          newProgressBar.labelPlacement = "center";
                                          newProgressBar.indeterminate = true;
                                          newProgressBar.visible = true;
                                          myCanvas.addChild(newProgressBar);

                                          componentObjectMap['progressBar'] = new Array();
                                          componentObjectMap['progressBar'][newProgressBar.id] = new Array();
                                          componentObjectMap['progressBar'][newProgressBar.id] = newProgressBar;

                                          /*
                                          componentObjectMap[selectedFilterData.data]['hSlider'] = new Array();
                                          componentObjectMap[selectedFilterData.data]['hSlider'] = newHSliderComponent;
                                          */

                                          gateway.call("RemotingTesting.getLocationsValues",
                                          new Responder(onGetRecordsResult, onFault));

                                          }

                                          /**
                                          * example function called from the gateway and how to retrieve the result returned by AMFPHP
                                          *
                                          */
                                          public function onGetRecordsResult(result:Array):void
                                          {
                                          // convert the result array into an array
                                          phpData = new ArrayCollection(result);

                                          var labels:Array = new Array();
                                          labels[0] = "Countries";
                                          labels[1] = "Regions";
                                          labels[2] = "Cities";
                                          var newHierSelect:ThreeLevelHierSelect = new ThreeLevelHierSelect('processData', labels, null, phpData, componentObjectMap);
                                          myCanvas.addChild(newHierSelect.generateHierSelect());

                                          componentObjectMap['progressBar']["newProgressBar"].indeterminate = false;
                                          componentObjectMap['progressBar']["newProgressBar"].visible = false;

                                          }


                                          /**
                                          * function handles the fault result from a AMFPHP service (in case the returned value is 'false')
                                          *
                                          */
                                          public function onFault(fault:Object):void
                                          {
                                          Alert.show("Error with the PHP service - check that you have the correct service name and check PHP script for any syntax errors.");
                                          //Alert.show(fault.fault.faultString + "\n" + fault.fault.faultDetail, fault.fault.faultCode.toString());
                                          }
                                          .
                                          • 18. Re: Creating AS3 ITEMRENDERER without using MXML
                                            Tikis_Mikis Level 1
                                            package FormComponents
                                            {
                                            // ##############################################################
                                            // ##############################################################
                                            // Here import all basic/necessary libraries and classes that are used to start up this project

                                            // import the remoting class to create a connection to a server with AMFPHP gateway set up
                                            import Remoting.RemotingConnection;
                                            // import the responder class to create a connection to a server with AMFPHP gateway set up
                                            import flash.net.Responder;
                                            // also import the FaultEvent class to handle the fault return in the gateway call
                                            import mx.rpc.events.FaultEvent;
                                            // import the ArrayCollection container class to store arrays or result sets from AMFPHP
                                            import mx.collections.ArrayCollection;
                                            // import the Alert control class to display and warning or alerts to the main screen
                                            import mx.controls.Alert;

                                            // ##############################################################
                                            // ##############################################################
                                            // Here import all other classes and libraries to be used in the custom Flex app being developed

                                            // start import in this line
                                            import mx.controls.ProgressBar;
                                            import mx.controls.List;
                                            import mx.events.ListEvent;
                                            import flash.events.Event;
                                            import mx.controls.Label;
                                            import mx.containers.Canvas;
                                            import mx.containers.Panel;
                                            import mx.controls.CheckBox;
                                            import mx.core.ClassFactory;
                                            import mx.containers.HBox;

                                            public class ThreeLevelHierSelect
                                            {
                                            // dataSet will hold the data either passed in directly from the main app or
                                            // manually retrieved with a remoting call
                                            [Bindable]
                                            public var dataSetInstance:ArrayCollection = new ArrayCollection();
                                            //
                                            public var gatewayInstance:RemotingConnection;
                                            public var labelsInstance:Array = new Array();
                                            public var newHierSelectCanvas:Canvas = new Canvas();
                                            private var componentObjectMapInstance:Array = new Array();

                                            /**
                                            * ThreeLevelHierSelect creates a three tier hierselect component that uses a data set ArrayCollection.
                                            *
                                            * The constructor has three arguments the first
                                            *
                                            * action:String = the action to be performed by the class
                                            * 'getData': will retrieve an ArrayCollection through a remoting call
                                            * 'processData': will process an ArrayCollection directly passed to the constructor
                                            * through the second argumen'
                                            * gateway:RemotingConnection = remoting connection passed directly by the main application.
                                            * 'action' must be set to 'getData' AND gateway must be a valid gateway
                                            * connection created in the main application
                                            * dataSet:ArrayCollection = an ArrayCollection either directly passed to the constructor from the main
                                            * application or retrieved directly with a remoting call to an AMFPHP service
                                            * Sample dataSet array:

                                            Array
                                            (
                                            [0] => Array
                                            (
                                            [data] => AF
                                            [label] => Afghanistan
                                            [regions] => Array
                                            (
                                            [0] => Array
                                            (
                                            [data] => 05
                                            [label] => 05
                                            [cities] => Array
                                            (
                                            [0] => Array
                                            (
                                            [data] => 111443
                                            [label] => Bamyan
                                            )

                                            )

                                            )

                                            [1] => Array
                                            (
                                            [data] => 11
                                            [label] => 11
                                            [cities] => Array
                                            (
                                            [0] => Array
                                            (
                                            [data] => 102199
                                            [label] => Herat
                                            )

                                            )
                                            )

                                            )

                                            [1] => Array
                                            (

                                            ... and so on and on ...
                                            *
                                            */
                                            public function ThreeLevelHierSelect(action:String, labels:Array, gateway:RemotingConnection = null, dataSet:ArrayCollection = null, componentObjectMap:Array = null)
                                            {
                                            // ##############################################################
                                            // set the gateway and the dataSet to the member variables to be used throughout this ThreeLevelHierSelect
                                            gatewayInstance = gateway;
                                            dataSetInstance = dataSet;
                                            labelsInstance = labels;

                                            newHierSelectCanvas.id = "newHierSelectCanvas";

                                            // ##############################################################
                                            // if action is 'processData' test that the required parameters are set to proceed with ArrayCollection
                                            // processing
                                            if (action == 'processData') {
                                            if (dataSetInstance == null || dataSetInstance.length == 0) {
                                            Alert.show("Class ThreeLevelHierSelect needs an ArrayCollection with a length greater than zero as a third argument if first argument is set to 'getData' (in other words -> 'new ThreeLevelHierSelect('getData', gateway, myArrayCollection)')");
                                            return;
                                            }

                                            // ##############################################################
                                            // else if actioin is 'getData' ensure that a valid gateway has been passed and that no ArrayCollection
                                            // is passed to constructor
                                            } else if(action == 'getData') {
                                            if (dataSetInstance != null || gatewayInstance == null || !(gatewayInstance is RemotingConnection)) {
                                            Alert.show("Class ThreeLevelHierSelect expects a null third argument (in other words -> 'new ThreeLevelHierSelect('processData', gateway)') when first argument is set to 'processData'. Also ensure that second constructor argument is a gateway of type RemotingConnection");
                                            return;
                                            }

                                            // ##############################################################
                                            }
                                            }
                                            • 19. Re: Creating AS3 ITEMRENDERER without using MXML
                                              Tikis_Mikis Level 1
                                              ThreeLevelHierSelect.as CONTINUED ==========================


                                              public function generateHierSelect():Canvas
                                              {
                                              var newPanel1:Panel = new Panel();
                                              if (labelsInstance[0] != null) {
                                              newPanel1.title = labelsInstance[0];
                                              } else {
                                              newPanel1.title = "List 1";
                                              }
                                              newPanel1.status = dataSetInstance[0]['locationsValues'].length + " total";
                                              newPanel1.styleName = "opaquePanel";


                                              // #################################################
                                              // countries list section
                                              var newLabel1:Label = new Label();
                                              newLabel1.text = labelsInstance[0];
                                              newLabel1.setStyle("fontSize", "12");
                                              newLabel1.setStyle("fontWeight", "bold");
                                              newLabel1.x = 10;
                                              newLabel1.y = 0;
                                              newHierSelectCanvas.addChild(newLabel1);

                                              var newList1:List = new List();
                                              newList1.id = "newList1";
                                              newList1.dataProvider = dataSetInstance[0]['locationsValues'];
                                              newList1.allowMultipleSelection = true;
                                              newList1.width = 200;
                                              newList1.height = 400;
                                              newList1.x = 10;
                                              newList1.y = 20;
                                              newList1.verticalScrollPolicy = "on";
                                              // following three lines used to fix the check boxes jumping all over the place when
                                              // scrolling throught the list
                                              newList1.rendererIsEditor = true;
                                              //newList1.editable = true;
                                              //newList1.editorDataField = "selected";
                                              newList1.itemRenderer = new ClassFactory(CheckBoxRenderer);
                                              //newList1.setStyle("alternatingItemColors", new Array("#EEEEEE", "white"));
                                              newList1.addEventListener(ListEvent.CHANGE, onList1ChangeHandler);
                                              newHierSelectCanvas.addChild(newList1);


                                              componentObjectMapInstance['list'] = new Array();
                                              componentObjectMapInstance['list'][newList1.id] = new Array();
                                              componentObjectMapInstance['list'][newList1.id] = newList1;

                                              // #################################################
                                              // regions list section
                                              var newLabel2:Label = new Label();
                                              newLabel2.text = "Regions";
                                              newLabel2.x = 215;
                                              newLabel2.y = 0;
                                              newLabel2.setStyle("fontSize", "12");
                                              newLabel2.setStyle("fontWeight", "bold");
                                              newHierSelectCanvas.addChild(newLabel2);

                                              var newList2:List = new List();
                                              newList2.id = "newList2";
                                              newList2.allowMultipleSelection = true;
                                              newList2.width = 200;
                                              newList2.height = 400;
                                              newList2.x = 215;
                                              newList2.y = 20;
                                              newList2.verticalScrollPolicy = "on";
                                              // following three lines used to fix the check boxes jumping all over the place when
                                              // scrolling throught the list
                                              newList2.rendererIsEditor = true;
                                              //newList2.editable = true;
                                              //newList2.editorDataField = "selected";
                                              //newList2.setStyle("alternatingItemColors", new Array("#EEEEEE", "white"));
                                              newList2.addEventListener(ListEvent.CHANGE, onList2ChangeHandler);
                                              newHierSelectCanvas.addChild(newList2);

                                              componentObjectMapInstance['list'][newList2.id] = new Array();
                                              componentObjectMapInstance['list'][newList2.id] = newList2;

                                              /*
                                              TypeError: Error #1010: A term is undefined and has no properties.
                                              at mx.controls.listClasses::ListBase/scrollVertically()
                                              */

                                              // #################################################
                                              // cities list section
                                              var newLabel3:Label = new Label();
                                              newLabel3.text = "Cities";
                                              newLabel3.x = 420;
                                              newLabel3.y = 0;
                                              newLabel3.setStyle("fontSize", "12");
                                              newLabel3.setStyle("fontWeight", "bold");
                                              newHierSelectCanvas.addChild(newLabel3);

                                              var newList3:List = new List();
                                              newList3.id = "newList3";
                                              newList3.allowMultipleSelection = true;
                                              newList3.width = 200;
                                              newList3.height = 400;
                                              newList3.x = 420;
                                              newList3.y = 20;
                                              newList3.verticalScrollPolicy = "on";
                                              // following three lines used to fix the check boxes jumping all over the place when
                                              // scrolling throught the list
                                              newList3.rendererIsEditor = true;
                                              //newList3.editable = true;
                                              //newList3.editorDataField = "selected";
                                              //newList3.setStyle("alternatingItemColors", new Array("#EEEEEE", "white"));
                                              newHierSelectCanvas.addChild(newList3);

                                              componentObjectMapInstance['list'][newList3.id] = new Array();
                                              componentObjectMapInstance['list'][newList3.id] = newList3;

                                              return newHierSelectCanvas;
                                              }

                                              public function onList1ChangeHandler(event:Event):void
                                              {
                                              var countryObject:Object = new Object();
                                              countryObject = Object(List(event.currentTarget).selectedItem);

                                              componentObjectMapInstance['list']["newList2"].dataProvider = countryObject['regions'];
                                              componentObjectMapInstance['list']["newList2"].itemRenderer = new ClassFactory(CheckBoxRenderer);
                                              componentObjectMapInstance['list']["newList3"].dataProvider = null;
                                              }

                                              public function onList2ChangeHandler(event:Event):void
                                              {
                                              var regionObject:Object = new Object();
                                              regionObject = Object(List(event.currentTarget).selectedItem);

                                              componentObjectMapInstance['list']["newList3"].dataProvider = regionObject['cities'];
                                              componentObjectMapInstance['list']["newList3"].itemRenderer = new ClassFactory(CheckBoxRenderer);
                                              }
                                              }
                                              }
                                              • 20. Re: Creating AS3 ITEMRENDERER without using MXML
                                                Tikis_Mikis Level 1
                                                finally CheckBoxRenderer.as (with your help) =========================

                                                package FormComponents
                                                {
                                                import flash.events.Event;
                                                import mx.containers.HBox;
                                                import mx.controls.CheckBox;
                                                import mx.controls.Label;

                                                public class CheckBoxRenderer extends HBox
                                                {

                                                private var lbl:Label;
                                                private var checkbox:CheckBox;

                                                public function CheckBoxRenderer()
                                                {
                                                super();

                                                // => Create checkbox instance
                                                checkbox = new CheckBox();
                                                // => Add listener to detect change in selected
                                                checkbox.addEventListener(Event.CHANGE, onChangeHandler);
                                                // => Add checkbox to hbox
                                                this.addChild(checkbox);

                                                // => Create label instance for label
                                                lbl = new Label();
                                                // => Add label to hbox
                                                this.addChild(lbl);

                                                this.horizontalScrollPolicy = "off";

                                                }

                                                // Override the set method for the data property.
                                                override public function set data(value:Object):void
                                                {
                                                super.data = value;

                                                // => Make sure there is data
                                                if (value != null) {
                                                // => Set the label
                                                lbl.text = value.label;

                                                // => Set the selected property
                                                checkbox.selected = value.isSelected;
                                                }

                                                // => Invalidate display list,
                                                // => If checkbox is now selected, we need to redraw
                                                super.invalidateDisplayList();
                                                }

                                                // => Handle selection change
                                                private function onChangeHandler(event:Event):void
                                                {
                                                super.data.isSelected = !super.data.isSelected;
                                                }
                                                }
                                                }


                                                I really could use the help. Thanks a million.
                                                • 22. Re: Creating AS3 ITEMRENDERER without using MXML
                                                  Garyl Woolworth Level 1
                                                  Seems like a decent hack, have you tried it yet with your code?
                                                  • 23. Re: Creating AS3 ITEMRENDERER without using MXML
                                                    Tikis_Mikis Level 1
                                                    Well....the person says to add that to the grid class. I have no idea what that means!
                                                    • 24. Creating AS3 ITEMRENDERER without using MXML
                                                      Tikis_Mikis Level 1
                                                      Ok Kaotic101 I want to THANK you for all your help! I really appreciate it and I cant wait to become as good as you and instead of posting messages needing help I will be able to help newbies aswell.

                                                      I fixed the problem. The problem was Flex 2 SDK......I upgrade to Flex 3 and all those problems are taken care of.

                                                      Again thanks a bunch! And you can bet I will be needing your help in the future!

                                                      Here is an issue I would like to know how you address: How do you completely unset a data provider for a list?

                                                      I am doing this: newList2.dataProvider = null; but I am not so sure that is working.....
                                                      • 25. Re: Creating AS3 ITEMRENDERER without using MXML
                                                        Tikis_Mikis Level 1
                                                        I figured out the problem, its here:

                                                        public function onList1ChangeHandler(event:Event):void
                                                        {
                                                        var countryObject:Object = new Object();
                                                        countryObject = Object(List(event.currentTarget).selectedItem);

                                                        componentObjectMapInstance['list']["newList2"].dataProvider = countryObject['regions'];
                                                        componentObjectMapInstance['list']["newList2"].itemRenderer = new ClassFactory(CheckBoxRenderer);

                                                        // PROBLEM HERE:
                                                        componentObjectMapInstance['list']["newList3"].dataProvider = null;
                                                        }

                                                        My thinking was that when I select a different row in newList1 I wanted newList3 to appear empty since it shouldnt have values until a new row in newList2 has been clicked. I can see one thing I am doing wrong since now each row in my lists is an itemRenderere type CheckBoxRenderer.

                                                        I will try to make it so that when a new row was clicked in newList1 newList3 is set to an inactive state and faded out......hope I can get it to work.