3 Replies Latest reply on Dec 16, 2009 8:50 AM by maheekp

    XML data via components in flex application

    maheekp
      Hi Everyone,

       

      I have a flex application. There are few components which I created and used in the main application. The main application consists of several tab views. few tab views are made as a component and used in the main application.The design part is working fine with no data.

       

      I have an XML file and I need to populate the fields of the components in the main application from the xml file. Help me how I can do this.

       

      I have an idea to directly use an xml file in the main application. But no idea to how to use the xml file via the components.

       

      Regards,
      Mahee
        • 1. Re: XML data via components in flex application
          Claudino Bur

          Hello,

           

          You need to learn how to provide to your components, data from xml and a very good tutorial can be found here :

          http://www.adobe.com/devnet/flex/quickstart/accessing_xml_data/

           

          Claude Bur.

          1 person found this helpful
          • 2. Re: XML data via components in flex application
            Gregory Lafrance Level 6

            Here is an end-to-end example of data and components:

             

            -------------------- mainapp.mxml --------------------

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              xmlns:comp="components.*">
              <mx:TabNavigator>
                <comp:Comp1 label="Foods"/>
                <comp:Comp2 label="Drinks"/>
              </mx:TabNavigator>
            </mx:Application>
            

             

            ------------------- components/Comp1.mxml -----------------------

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="dataSvc.send();">
              <mx:Script>
                <![CDATA[
                  import mx.rpc.events.ResultEvent;
                  import mx.collections.XMLListCollection;
                  
                  [Bindable] private var dataXLC:XMLListCollection = new XMLListCollection();
                  
                  private function handleData(evt:ResultEvent):void{
                    dataXLC = new XMLListCollection(evt.result..item);
                  }
                ]]>
              </mx:Script>
              <mx:HTTPService id="dataSvc" url="components/comp1.xml" useProxy="false" 
                result="handleData(event);" resultFormat="e4x"/>
              <mx:DataGrid dataProvider="{dataXLC}">
                <mx:columns>
                  <mx:DataGridColumn dataField="id" width="50"/>
                  <mx:DataGridColumn dataField="food" width="100"/>
                </mx:columns>
              </mx:DataGrid>  
            </mx:VBox>
            


            ------------------- components/Comp2.mxml -----------------------

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="dataSvc.send();">
              <mx:Script>
                <![CDATA[
                  import mx.rpc.events.ResultEvent;
                  import mx.collections.XMLListCollection;
                  
                  [Bindable] private var dataXLC:XMLListCollection;
                  
                  private function handleData(evt:ResultEvent):void{
                    dataXLC = new XMLListCollection(evt.result..item);
                  }
                ]]>
              </mx:Script>
              <mx:HTTPService id="dataSvc" url="components/comp2.xml" useProxy="false" 
                result="handleData(event);" resultFormat="e4x"/>
              <mx:DataGrid dataProvider="{dataXLC}">
                <mx:columns>
                  <mx:DataGridColumn dataField="id" width="50"/>
                  <mx:DataGridColumn dataField="drink" width="100"/>
                </mx:columns>
              </mx:DataGrid>  
            </mx:VBox>
            

             

            ------------------- components/comp1.xml -----------------------

             

            <?xml version="1.0" encoding="utf-8"?>
            <data>
              <foods>
                <item>
                  <id>001</id>
                  <food>meat</food>
                </item>
                <item>
                  <id>002</id>
                  <food>fish</food>
                </item>
                <item>
                  <id>003</id>
                  <food>chicken</food>
                </item>
              </foods>
            </data>
            

            ------------------- components/comp2.xml -----------------------

             

            <?xml version="1.0" encoding="utf-8"?>
            <data>
              <drinks>
                <item>
                  <id>001</id>
                  <drink>soda</drink>
                </item>
                <item>
                  <id>002</id>
                  <drink>juice</drink>
                </item>
                <item>
                  <id>003</id>
                  <drink>wine</drink>
                </item>
              </drinks>
            </data>
            


            If this post answers your question or helps, please mark it as such.


            Greg Lafrance
            www.ChikaraDev.com

            Flex Development and Support Services

            1 person found this helpful
            • 3. Re: XML data via components in flex application
              maheekp Level 1

              Hi Greg,

               

              Thanks for your reply. I will use the same components again and again for each tab view. And for each view it should extract different data (different nodes) from the xml file. So instead of specifying the input of the xml file in the components, can we do it in the main application when the component is used. Please guide me.

               

              Points assigned.

               

              Regards,

              Mahee.