6 Replies Latest reply on Jul 18, 2006 8:46 AM by KYAHN

    Manipulating Data

      Hi all,
      I'm an experienced Flash (design oriented) developer and am a newb to the Flex scene. I have done the quick starts "Hello World" stuff and have interaction between components. Then the documentation seems to jump in advanced territory. It would be nice to see some intermediate examples. The cell phone store seems to jump quite a bit further than the easier examples.

      I'm trying to import a simple XML file and sort/filter the data to display based on user chosen parameters. Is there a simpler way to do this as I'm not too strong in building classes and am just trying to understand how this works.
      If I pull the data using a HTTPSERVICE it's missing some of the fields, if I use <mx:Model> it works just fine. I'm filling a Tilelist with the data. What do I need to do to the data to be able to manipulate it. The documentation doesn't fully explain it in layman's terms. I understand the code, processes. I just need it broken down into simpler terms. Help a brother out!


      Here is my experiment code, please feel free to suggest better methodology (in language I can understand) :

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
      <mx:CurrencyFormatter currencySymbol="$" id="cf" precision="2"/>
      <mx:Model id="cat" source="store.xml" />
      <mx:Panel layout="absolute" top="10" bottom="30" left="10" right="358">
      id="tile" dragEnabled="true" dropEnabled="false" dragMoveEnabled="false" alpha="1.0" backgroundAlpha="1.0" textAlign="center" allowMultipleSelection="false" left="-10" top="51" right="10" bottom="0" themeColor="#c0c0c0" columnCount="3" direction="horizontal" borderColor="#ffffff" borderStyle="none"/>
      <mx:Panel layout="absolute" top="10" right="50" width="300" id="panel1" bottom="338">
      <mx:DataGrid dragEnabled="false" dropEnabled="true" dragMoveEnabled="false" right="0" bottom="41" left="0" top="0" id="list">
      <mx:DataGridColumn headerText="category" dataField="category"/>
      <mx:DataGridColumn headerText="Item #" dataField="productId"/>
      <mx:DataGridColumn headerText="Product" dataField="name" />
      <mx:DataGridColumn headerText="Price" dataField="price" />
      <mx:Button label="Delete" right="10" bottom="10" />
      <mx:NumericStepper bottom="10" left="10" value="1" minimum="1" maximum="10" stepSize="1"/>
      <mx:Panel width="300" height="300" layout="absolute" bottom="30" right="50">
      <mx:Image y="15" width="120" height="120" horizontalCenter="0" source="{tile.selectedItem.image}"/>
      <mx:TextArea x="0" width="280" height="46" htmlText="{tile.selectedItem.description}" borderStyle="none" bottom="20"/>
      <mx:TextArea x="0" width="280" height="46" htmlText="${tile.selectedItem.price}" borderStyle="none" bottom="74" textAlign="center" fontWeight="bold" fontSize="13"/>
      <mx:TextArea x="0" width="280" height="23" htmlText="{tile.selectedItem.category}" borderStyle="none" y="237"/>

        • 1. Re: Manipulating Data
          Hi Richard,

          Can you give an example of the HTTPService tag you wrote that doesn't work?


          Flex Builder team
          • 2. Re: Manipulating Data
            ntsiii Level 3
            "...HTTPSERVICE it's missing some of the fields..." I bet that is not really what is happening. i suspect you are having a problem referencing the data within the result.

            As nj asks, post the httpService code.
            Also, binding is hard to debug. I advise using a result handler function, so you can inspect the actual structure of the result object.

            • 3. Re: Manipulating Data
              Richard_Hughes Level 1
              Here is the flex code:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns="*" creationComplete="feed.send()">
              <mx:HTTPService id="feed" url="store.xml" useProxy="false"/>
              <mx:DataGrid dataProvider="{feed.lastResult.catalog.product}" x="33" y="10" width="1075" id="dgcat" height="438">
              <mx:DataGridColumn headerText="Product ID" dataField="productId"/>
              <mx:DataGridColumn headerText="Product" dataField="name" />
              <mx:DataGridColumn headerText="Description" dataField="description"/>
              <mx:DataGridColumn headerText="Price" dataField="price" />
              <mx:DataGridColumn headerText="Category" dataField="category" />
              <mx:Image x="33" y="456" width="120" height="120" source="{dgcat.selectedItem.image}"/>


              And the XML

              <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
              <product productId="P0000431">
              <name>View Master</name>
              <description>3D - With 1 Atomic Test Reel</description>

              <product productId="P0000458">
              <name>Silk Tie</name>
              <description>Navy Blue/White/Yellow Atomic Design.</description>

              <product productId="P0000434">
              <name>Mouse Pad - Sedan Crater</name>
              <description>This mousepad features an image of the Sedan Crater with an inset of the Test that caused the Nevada Test Site's largest indentation.</description>

              <product productId="P0000435">
              <name>Mouse Pad - Badger</name>
              <description>This mousepad features an image of the Badger test</description>

              <product productId="P0000441">
              <name>Building The Bombs - History of the Nuclear Weapons Complex</name>
              <description>Book - Author: Charles R. Loeber</description>

              <product productId="P0000437">
              <name>Bombs in The Back Yard</name>
              <description>Book - Author: A. Constandina (Dina) Titus</description>

              <product productId="P0000432">
              <name>Albert Einstein Action Figure</name>
              <description>Hard Vinyl 5.25" Tall</description>


              It won't display the category or instock fields, I can't see any anomolies in the XML


              • 4. Re: Manipulating Data
                I've just copied that application & XML file locally, and it does successfully display the category for me. And if I add a column for instock...

                <mx:DataGridColumn headerText="InStock" dataField="instock" />

                it displays that as well. The code all seems correct.

                Just to sanity check... you don't have something wacky like multiple versions of the XML file lying around, do you? Maybe when you run the application, you're actually pointed at one that's out of date?

                Rebecca Hyatt
                • 5. Re: Manipulating Data
                  Richard_Hughes Level 1
                  Hmmm, I don't know if it was caching up or what, but I duped the file pointed to a new one and it works. Now the big question, how do I sort and filter the data once it's pulled in????
                  • 6. Re: Manipulating Data
                    You can try:
                    Fex 2 charting explorer:

                    (but it's not working on my computer at least, page has errors)


                    flex 1.5 charting explorer:


                    Go to Misc Techniques / series selection : You have an example there of how they display selected data on a graph based on a source XML by using some actionscript to add series to the chart. Though I dont't fully understand the code, it seems to be what you are looking for.
                    By the way, I'm tryiing to pull out something exactly like yours, and I'm also in trouble.