5 Replies Latest reply on Feb 25, 2008 10:47 AM by ntsiii

    MX code to AS3 code

    injpix Level 3
      The attached code has a section of its MX code commented-out intentionally from the attempt to replicate it instead with AS3.0 code that resides in the applyDataProvider function. However it doesn’t render any labels and images in the TileList, so the dataProvider property isn’t applying the array instance as intended. How can this be done using ActionScript?

      [code]
      <?xml version="1.0"?>
      <!-- Simple example to demonstrate the TileList Control. -->
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

      <mx:Script>
      <![CDATA[

      [Bindable]
      [Embed(source="media/orion/1.jpg")]
      public var phone1:Class;

      [Bindable]
      [Embed(source="media/orion/2.jpg")]
      public var phone2:Class;

      [Bindable]
      [Embed(source="media/orion/3.jpg")]
      public var phone3:Class;


      private function applyDataProvider():void
      {
      var array:Array = new Array();
      array.push({label:"Nokia 6630", icon:"{phone1}"});
      array.push({label:"Nokia 6680", icon:"{phone2}"});
      array.push({label:"Nokia 7610", icon:"{phone3}"});

      CameraSelection.dataProvider = array;
      }
      ]]>
      </mx:Script>

      <mx:Panel title="TileList Control Example" height="100%" width="100%"
      paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
      <mx:Label width="100%" color="blue"
      text="A TileList control displays items in rows and columns."/>
      <mx:TileList id="CameraSelection" height="250" width="300"
      maxColumns="2" rowHeight="225" columnWidth="125">
      <!--
      <mx:dataProvider>
      <mx:Array>
      <mx:Object label="Nokia 6630" icon="{phone1}"/>
      <mx:Object label="Nokia 6680" icon="{phone2}"/>
      <mx:Object label="Nokia 7610" icon="{phone3}"/>
      </mx:Array>
      </mx:dataProvider>
      -->
      </mx:TileList>
      </mx:Panel>
      </mx:Application>
      [/code]
        • 1. Re: MX code to AS3 code
          peterent Level 2
          The dataProviders in Flex list controls use Collections like ArrayCollection. The Array class is part of the Flash Player intrinsic classes. Flex list controls listen for Flex events dispatched by the Collection classes when they are changed. The list controls also assume the dataProviders implements a few ActionScript interfaces.

          So that's why the Array didn't work. Use ArrayCollection instead; use addItem() instead of push().
          • 2. Re: MX code to AS3 code
            injpix Level 3
            Awesome peterent, thanks!
            However, that does render the 3 items with their label in the TileList component but it doesn’t render the icon. The browser doesn’t render the missing file icon that it does when it can’t find a file even if I intentionally change the embedded source value. So it seems to me Flex is not even trying to embed the icon.
            • 3. Re: MX code to AS3 code
              peterent Level 2
              TileList, as with the other list-based controls in Flex, don't know you want to see something special when you give them a dataProvider. How are they to tell what you want to see? Their default behavior is to show text, usually the field within your data called "label".

              If you want to see something else, you'll need to create an "itemRenderer" - a component which will be used as a template for all of the items in the list. You can find lots of examples of itemRenderers, even ones with images, by searching the Flex documentation for itemRenderer.
              • 4. Re: MX code to AS3 code
                injpix Level 3
                I was under the assumption that an MX tag name (e.g. mx:Array) correlates to an ActionScript class. This assumption seems to be invalid as you pointed out previously. Perhaps a poster size cheat-sheet of the API would clear up a lot of confusion on inheritance of classes for me. 

                Back to your last post, you mentioned that list-based controls in Flex needs an “itemRenderer” to render something other then text, such as an image. However if I uncomment the MX code in my original post, the TileList renders the embedded icon. So that begs the question, is the MX code implicitly importing/inheriting an “itemRenderer”?
                • 5. Re: MX code to AS3 code
                  ntsiii Level 3
                  Yes, all of the list-based components use a default item renderer. Starting with the code for these is often a good way to create your own item renderer. I have used ListItemRenderer.as and looked at DataGridItemRenderer.as. The are pretty easy to understand, and are well commented.

                  However, item renderers are a bit complex, because of their tight integration with the framework.

                  Consider using mx:Repeater inside of a mx:Tile container. You still should create a custom component, and repeat that, but the component does not need to integrate with the List, so can be simpler to code. Pass a ref to the entire dataProvider item, via currentItem, into the component. You can then code it normally, without worring about event timing and scoping and getRepeaterItem and such.

                  Tracy