11 Replies Latest reply on Aug 11, 2007 9:12 AM by ntsiii

    accordion XML

    akosiwong Level 1
      hello all, i just like to know if it's possible that the items in the accordion come from XML, if yes, can you show me a simple code to illustrate it... tnx
        • 1. Re: accordion XML
          Karl_Sigiscar_1971 Level 3

          The child containers in the <mx:Accordion> container can be <mx:Canvas>, <mx:Box>, <mx:VBox>, <mx:HBox> etc...

          The accordion container does not have a dataprovider attribute. So, you cannot feed it with XML data as you would <mx:Tree>.

          http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=about_dataproviders_057_16.html

          • 2. Re: accordion XML
            ntsiii Level 3
            Correct, but you CAN put a Repeater inside the Accordion and thus get dataDriven content. This is the easiest way. When working with Repeater, I advise creating a custom component that you will repeat, and pass it the entire "currentItem", In the component, implement a "setter" function to receive the currentItem data. Now, in the component, you can code normally, binding to the data as you wish, without the hard to read currentItem references. And, you can dispatch events normally, plus in the event handler, yo can reference the component via the event.target property, and thus get a direct reference to the dtaProvider item.

            You can also manually do addChild().

            Tracy
            • 3. Re: accordion XML
              dkerr Level 1
              a sample that works for me in general using repeaters
              ....
              <mycanvas mycanvaslabel="Boo">
              ....

              <mx:HTTPService id="srv" url=" http://pathtoyourxml/myxml.xml" resultFormat="e4x"/>
              <mx:XMLListCollection id="xc" source="{srv.lastResult.mycanvas}"/>

              <mx:Accordion id="ACC">
              <mx:Repeater id="canvasRepeat" dataProvider="{xc}">
              <mx:Canvas label="{String(canvasRepeat.currentItem.@mycanvaslabel)}">
              ...
              </mx:Canvas>
              </mx:Repeater>
              </mx:Accordion>

              Flexcoders folks just helped me with this.:)

              Don Kerr
              • 4. accordion XML
                akosiwong Level 1
                i copied your code and created an XML data.xml containing the simple xml you included and i locate it at the same folder of my project... but nothing happens, i included a send command...

                <?xml version="1.0"?>
                <!-- dpcontrols\XMLListCollectionWithList.mxml -->
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" height="442" creationComplete:srv.send()>
                <mx:HTTPService id="srv" url="data.xml" resultFormat="e4x"/>
                <mx:XMLListCollection id="xc" source="{srv.lastResult.mycanvas}"/>

                <mx:Accordion id="ACC">
                <mx:Repeater id="canvasRepeat" dataProvider="{xc}">
                <mx:Canvas label="{String(canvasRepeat.currentItem.@mycanvaslabel)}">
                </mx:Canvas>
                </mx:Repeater>
                </mx:Accordion>
                </mx:Application>
                • 5. Re: accordion XML
                  dkerr Level 1
                  http://www.fusionpage.com/flex/accrepeater/bin/test.html

                  Here is link to a basic working example of XML feeding an accordion (using nested repeaters) . Right Click to View Source.

                  You asked a general question, so it may not be specifically what you need. I suggest you research <mx:Repeater> in the Adobe docs for more specifics. And do a more advanced solution like Tracy suggested.

                  Don Kerr
                  • 6. Re: accordion XML
                    ntsiii Level 3
                    Further, handling return data like this:
                    <mx:XMLListCollection id="xc" source="{srv.lastResult.mycanvas}"/>

                    Is very hard to debug. You have no way of knowing where the problem is.

                    Instead, use a result handler function, so you can know when and what your return data is. Below are some snippets that show how. (the AsyncToken stuff is not required, but very useful)
                    Tracy

                    Sample code using HTTPService, e4x, handler function to populate a list item.
                    Also shows usage of AsyncToken.

                    The DataGrid tag:
                    <mx:DataGrid id="dg" dataProvider="{_xlcMyListData}" .../>


                    The HTTPService tag:
                    <mx:HTTPService id="service" resultFormat="e4x" result="onResult(event)" fault="..../>

                    Script block declaration:
                    import mx.rpc.Events.ResultEvent;
                    [Bindable]private var _xlcMyListData:XMLListCollection;

                    Invoke send:
                    var oRequest:Object = new Object();
                    oRequest.Arg1 = "value1";
                    var callToken:AsyncToken = service.send(oRequest);
                    token.callId = "myQuery1";

                    Result Handler function:
                    private function onResult(oEvent:ResultEvent):void {
                    var xmlResult:XML = XML(event.result); //converts result Object to XML. can also use "as" operator
                    var xlMyListData:XMLList = xmlResult.myListData; //depends on xml format, is row data
                    _xlcMyListData = new XMLListCollection(xlMyListData); //wrap the XMLList in a collection
                    trace(_xlcMyListData.toXMLString()); //so you can see exactly how to specify dataField or build labelFunction
                    var callToken:AsyncToken = oEvent.token;
                    var sCallId = callToken.callId; //"myQuery1"
                    switch(sCallId) {
                    case "myQuery1":
                    doQuery2();
                    break;
                    ...
                    }
                    }//onResult
                    • 7. Re: accordion XML
                      rickmorris Level 1
                      When I compile and run the code at
                      http://www.fusionpage.com/flex/accrepeater/bin/test.html
                      , it gives lots of warnings like these, but does work. What does this mean, and how do I fix it?


                      warning: unable to bind to property 'mycanvas' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'itemname' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'itemname' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'itemname' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'itemname' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'itemname' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'itemname' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'itemname' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'itemname' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'itemname' on class 'XML' (class is not an I
                      EventDispatcher)
                      warning: unable to bind to property 'canvasname' on class 'XML' (class is not an
                      IEventDispatcher)
                      warning: unable to bind to property 'myitem' on class 'XML' (class is not an IEv
                      entDispatcher)
                      warning: unable to bind to property 'canvasname' on class 'XML' (class is not an
                      IEventDispatcher)
                      warning: unable to bind to property 'myitem' on class 'XML' (class is not an IEv
                      entDispatcher)
                      • 8. Re: accordion XML
                        dkerr Level 1
                        Yes, Tracy. This is how I actually implemented it operationally per your advice on flexcoders.

                        But, I was just trying to show that it could be done with this quick throw down example here.
                        • 9. Re: accordion XML
                          dkerr Level 1
                          http://livedocs.adobe.com/flex/2/langref/flash/events/IEventDispatcher.html

                          on the warning, see comments in the above livedoc.

                          eightlines said on Jul 10, 2007 at 10:27 AM :

                          In regards to the “unable to bind to property ‘XXX’ on class ‘Object’ (class is not an IEventDispatcher)” warning, I was able to eliminate the message by calling the dataProvider via ActionScript instead of through MXML.
                          • 10. Re: accordion XML
                            ntsiii Level 3
                            There is an easier fix to this warning. Actually the warning is very misleading, since it impleis that the XML class does not dispatch the events necessary to support binding. It does.

                            What is really happening is that the Repeater.current Item is an Object, an you cannot bind to Object properties. The fix is to cast or convert the currentItem object to XML, as in this example:

                            <mx:Repeater id="rp" ....>
                            <mx:Text text="{XML(rp.currentItem).@myAttribute}"

                            Tracy
                            • 11. Re: accordion XML
                              ntsiii Level 3
                              If you do as i advised earlier in this thread, you will not have that warning, or need to do the casting. I'll repeat it here for convenience.

                              When working with Repeater, I advise creating a custom component that you will repeat, and pass it the entire "currentItem", In the component, implement a "setter" function to receive the currentItem data.

                              Now, in the component, you can code normally, binding to the data as you wish, without the hard to read currentItem references. You also avoid the binding warnings without the cast/conversion because the binding source is a true XML object.

                              And, you can dispatch events normally. In the event handler, you can reference the component via the event.target property, and thus get a direct reference to the dataProvider item. This is easier to write and read than having to use getRepeaterItem()

                              Here are some code snippets:

                              In the main app or component (note how "clean" and readable this is):
                              <mx:Application
                              <mx:VBox ...>
                              <mx:Repeater id="rp" dataProvider="{_xmlData}" ...>
                              <mycomp:MyRepeatedComponent xmlItem="{rp.currentItem}" .../>
                              </mx:Repeater
                              </mx:VBox>

                              And in the component, MyRepeatedComponent.mxml:
                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:HBox ...
                              <mx:Metadata>
                              [Event(name="itemClick", type="flash.events.Event")]
                              </mx:Metadata>
                              <mx:Script><![CDATA[
                              [Bindable]private var _xmlItem:XML;

                              public function set xmlData(xml:XML):void
                              {
                              _xmlItem = xml;
                              //do any special, non-bound ui stuff you want
                              }//
                              ]]></mx:Script>
                              <!-- Now declare the Item UI -->
                              <mx:Text id="lbDescription" text="{_xmlItem.@description}" width="100%" height="100%" />

                              Tracy