3 Replies Latest reply on Oct 25, 2009 4:08 AM by Shivik

    Passing data to TabBar control from XML

    Shivik Level 1

      Hello all

       

      I am trying to pass xml data to a TabBar control. The data is being loaded from an external file using the URLLoader class. I tried using the dataProvider property but couldn't get the TabBar control to display. However, I tried doing the same on ComboBox control and it displayed the data correctly.

       

      Can somebody please help me out. Here's my XML structure.

      <items>
           <item position="1" label="Data 1" />
           <item position="2" label="Data 2" />
           <item position="3" label="Data 3" />
           <item position="4" label="Data 4" />
      </items>
      

       

      Here's the code I am trying to work out...

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initializeHandler(event)">
           <mx:Script>
                <![CDATA[
                     private var _dataLoader:URLLoader;
                     private function initializeHandler(event:Event):void {
                          _dataLoader = new URLLoader();
                          _dataLoader.addEventListener(Event.COMPLETE, dataLoadingCompleteHandler);
                          _dataLoader.load(new URLRequest("data.xml"));
                          XML.ignoreWhitespace = true;
                     }
                     private function dataLoadingCompleteHandler(event:Event):void {
                          var xml:XML = new XML(_dataLoader.data);
                          dataComboBox.dataProvider = xml.item;
                          dataTabs.dataProvider = xml.item;
                     }
                ]]>
           </mx:Script>
           <mx:VBox>
                <mx:ComboBox id="dataComboBox" labelField="@label" />
                <mx:TabBar id="dataTabs" labelField="@label" />
           </mx:VBox>
      </mx:Application>
      

       

      Thanks and Regards

      Shivik

        • 1. Re: Passing data to TabBar control from XML
          Shivik Level 1

          I tried checking for some errors and its having the following problem...

           

          ERROR: The dataProvider of 'dataTabs' must not contain objects of type flash.display.DisplayObject.

           

          What is the correct way of sending the XML data to TabBar in this case?

           

          Thanks and Regards

          Shivik

          • 2. Re: Passing data to TabBar control from XML
            Subeesh Arakkan Level 4

            Tabbar's dataprovider can be either String, ViewStack, Array or IList . You can convert the xml to array and set it as tabbar dataprovider or use HTTPService to read the data from xml as objects. Check the code below which is using Httpservice

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initializeHandler(event)">
                 <mx:Script>
                      <![CDATA[
                          import mx.collections.ArrayCollection;
                          import mx.rpc.events.FaultEvent;
                          import mx.rpc.events.ResultEvent;
                         
                          private function initializeHandler(event:Event):void
                          {
                              dataService.send();
                       }
                       private function resultHandler(event:ResultEvent):void
                       {
                               var dp:ArrayCollection = event.result.items.item as ArrayCollection;
                               dataComboBox.dataProvider = dp;
                               dataTabs.dataProvider = dp;
                       }
                      
                       private function faultHandler(event:FaultEvent):void
                       {
                               //handle fault here
                       }
                      ]]>
                 </mx:Script>
                
                 <mx:HTTPService id="dataService" url="data.xml" resultFormat="object"
                     result="resultHandler(event)" fault="faultHandler(event)"/>
                    
                 <mx:VBox>
                      <mx:ComboBox id="dataComboBox" labelField="label" />
                      <mx:TabBar id="dataTabs" labelField="label" dataProvider="" />
                 </mx:VBox>
            </mx:Application>

            1 person found this helpful
            • 3. Re: Passing data to TabBar control from XML
              Shivik Level 1

              Hello Subeesh

               

              Your advice was very helpful. I successfully displayed the xml using the code you gave. However using URLLoader, I am still having problems.

               

              Here is the code I used this time...

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" initialize="initializeHandler(event)">
                   <mx:Script>
                   <![CDATA[
                        import mx.collections.ArrayCollection;
                        import mx.collections.XMLListCollection;
                        private var _filterLoader:URLLoader;
              
                        private function initializeHandler(event:Event):void {
                             _dataLoader = new URLLoader();
                             _dataLoader.addEventListener(Event.COMPLETE, dataLoadingCompleteHandler);
                             _dataLoader.load(new URLRequest("data.xml"));
                             XML.ignoreWhitespace = true;
                        }
              
                        private function dataLoadingCompleteHandler(event:Event):void {
                             var xml:XML = new XML(_dataLoader.data);
                             var xmlColl:XMLListCollection = new XMLListCollection(xml.items.item);
                             var resultArray:Array = xmlColl.toArray();
                             var dp:ArrayCollection = new ArrayCollection(resultArray);
                             dataTabs.dataProvider = dp;
                   ]]>
                   </mx:Script>
                   <mx:VBox>
                        <mx:TabBar id="filterTabs" labelField="label" />
                   </mx:VBox>
              </mx:Application>
              

               

              It displays nothing. Debugging mode shows this error....

               

              TypeError: Error #1034: Type Coercion failed: cannot convert XMLList@17947f91 to Class.
                   at mx.controls::NavBar/createNavChildren()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\NavBar.as:904]
                   at mx.controls::NavBar/commitProperties()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\NavBar.as:688]
                   at mx.controls::ButtonBar/commitProperties()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\ButtonBar.as:481]
                   at mx.controls::ToggleButtonBar/commitProperties()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\ToggleButtonBar.as:329]
                   at mx.core::UIComponent/validateProperties()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\UIComponent.as:5807]
                   at mx.managers::LayoutManager/validateProperties()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\LayoutManager.as:539]
                   at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\LayoutManager.as:659]
                   at Function/http://adobe.com/AS3/2006/builtin::apply()
                   at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\UIComponent.as:8733]
                   at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\UIComponent.as:8673]
              

               

              What's going wrong in this code?

               

              Thanks and Regards

              Shivik