13 Replies Latest reply on Jun 14, 2011 10:34 AM by Claudiu Ursica

    URLoader and XML files

    Maxime Chupin

      Hi,

       

      I am trying to load dynamically XML file. So, I made these functions:

       

      var xml:XML;

       

      private function loadXML(file:String):String
      {
              var fichier:String="html/"+file;
              var urlRequest:URLRequest = new URLRequest(fichier);
              var urlLoader:URLLoader = new URLLoader();
              urlLoader.dataFormat = URLLoaderDataFormat.TEXT;
              urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete);
              urlLoader.load(urlRequest);
              return xml.toString();
      }

      private function urlLoader_complete(evt:Event):void {
               xml = new XML(evt.target.data);
      }

       

      But when I try to call loadXML("test.xml") I do not get anything.

      If I return

      return "toto";

      in the function loadXML, I get toto when I call loadXML.

       

      Where am I wrong ?

       

      Thanks

        • 1. Re: URLoader and XML files
          Claudiu Ursica Level 4

          return xml.toString(); - this will obviously not return anything because loading is asynchronous. You should have your XML on the complete handler thoguh.

           

          Not sure I know your exact issue can you be more explicit?

           

          C

          • 2. Re: URLoader and XML files
            Maxime Chupin Level 1

            Claudiu Ursica wrote:

             

            return xml.toString(); - this will obviously not return anything because loading is asynchronous.

            You should have your XML on the complete handler thoguh.

             

             

            Not sure I know your exact issue can you be more explicit?

             

            C

            Can you explain why it is obvious ?

             

            I want to "inject" in a RichEditableText tag the content of external files depending on the choise of a user. This choice is made via a List.

            So I made

             

            <s:RichEditableText id="codeView" editable="false">
                 {loadXML(htmlFile(selectedListItem.data))}
            </s:RichEditableText>

             

            Thanks

            • 3. Re: URLoader and XML files
              Claudiu Ursica Level 4

              That again will not work, your binding will evaluate synchronous and will display the return value which will probably be null. I would go step by step about it e.g.

               

              private var xml:XML;

               

              private function urlLoader_complete(evt:Event):void {

                       xml = new XML(evt.target.data);

              //          assign the data to your control

              codeView.text = paresDataIfNecessaryFromXMLToString(xml);

              or if thext is complex you mignt need to work with textFlow...

               

              }

               

              HTH

              C

              • 4. Re: URLoader and XML files
                Maxime Chupin Level 1

                Sorry but I still do not understand…

                 

                So now, I made something like that:

                 

                private function loadXML(file:String):void
                {
                        var fichier:String="html/"+file;
                        var urlRequest:URLRequest = new URLRequest(fichier);
                        var urlLoader:URLLoader = new URLLoader();
                        urlLoader.dataFormat = URLLoaderDataFormat.TEXT;
                        urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete);
                        urlLoader.load(urlRequest);
                }
                private function urlLoader_complete(evt:Event):void {
                        xml = new XML(evt.target.data);
                        codeView.text = xml.toString();
                }

                And my list is:
                      <mx:List id="source" width="100%" color="blue"
                           dataProvider="{anim.state}"
                           change="selectedListItem = List(event.currentTarget).selectedItem;loadXML(htmlFile(selectedListItem.data));"/>

                with the function htmlFile() gives just the right name of the file.
                And the RichText:
                <s:RichEditableText id="codeView" editable="false"/>

                Thank you for your help.
                • 5. Re: URLoader and XML files
                  Claudiu Ursica Level 4

                  So if I get it right when you click an item in the list you want to load different content?

                  Can you describe the bigger picture here?

                   

                  C

                  • 6. Re: URLoader and XML files
                    Maxime Chupin Level 1

                    Claudiu Ursica wrote:

                     

                    So if I get it right when you click an item in the list you want to load different content?

                    Can you describe the bigger picture here?

                     

                    C

                    Exactly !!

                    So I have a collection of swf files created with METAPOST (a drawing language related to LaTeX) and I want to present them and their corresponding code.

                    So I have a list (see the code below). And another panel with a ViewStack to show the animation or the code.I think the code below would be more understandable that my explanation.

                     

                     

                     

                    <?xml version="1.0" encoding="utf-8" ?>
                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                   xmlns:s="library://ns.adobe.com/flex/spark"
                                   xmlns:mx="library://ns.adobe.com/flex/mx"
                                   >

                     

                      <fx:Style source="style.css"/>
                      <fx:Script>
                        <![CDATA[
                             [Bindable]
                             public var selectedListItem:Object;

                     

                             var xml:XML;

                             private function htmlFile(swf:String):String
                             {
                                var pref:String;
                            var tab=swf.split(".",2);
                            tab=tab[0].split("/",2);
                            pref=tab[1];
                            return pref+".html";
                                 }
                             private function loadXML(file:String):void
                             {
                                var fichier:String="html/"+file;
                                var urlRequest:URLRequest = new URLRequest(fichier);
                            var urlLoader:URLLoader = new URLLoader();
                            urlLoader.dataFormat = URLLoaderDataFormat.TEXT;
                            urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete);
                            urlLoader.load(urlRequest);
                                 }
                             private function urlLoader_complete(evt:Event):void {
                                xml = new XML(evt.target.data);
                            codeView.text = xml.toString();
                                 }
                        ]]>
                      </fx:Script>

                     

                     

                     

                      <fx:Declarations>
                        <fx:Model id="anim">
                          <states>
                        <state label="Anguinéa" data="animations/flex-ang.swf"/>
                        <state label="Mouvement rétrograde" data="animations/flex-astro.swf"/>
                        <state label="Bielle de Bérard" data="animations/flex-ber.swf"/>
                          </states>
                        </fx:Model>
                      </fx:Declarations>

                     


                      <s:Panel id="choosePanel" title="Lot d'animations"
                           width="25%"  x="600" y="50">
                        <s:VGroup left="10" right="10" top="10" bottom="10">
                          <s:Label text="Selectionner une animation"/>
                          <s:Label text="Actuellement '{htmlFile(selectedListItem.data)}'"/>
                          <mx:List id="source" width="100%" color="blue"
                               dataProvider="{anim.state}"
                               change="selectedListItem = List(event.currentTarget).selectedItem;loadXML(htmlFile(selectedListItem.data));"/>
                        </s:VGroup>
                      </s:Panel>

                     

                      <s:Panel id="animPanel"  x="30" y="20" width="530" height="620">
                        <s:VGroup width="100%" height="100%">

                        <!-- Create a LinkBar control to navigate the ViewStack. -->
                          <mx:ButtonBar dataProvider="{vs1}"/>
                         
                          <!-- Define the ViewStack and the three child containers. -->
                          <mx:ViewStack id="vs1" width="100%" height="100%">
                        <mx:Canvas id="animationStack"
                               label="Animation"
                               toolTip="Voir l'animation"
                               width="100%">
                          <mx:ProgressBar x="155" y="260" width="200" source="{animation}"/>
                          <mx:SWFLoader id="animation"
                                source="{selectedListItem.data}"
                                autoLoad="true"
                                width="100%"/>
                            </mx:Canvas>
                            <mx:Canvas id="codeStack"
                               label="Code"
                               toolTip="Voir le code" >
                          <s:Scroller height="100%" width="100%">
                            <s:RichEditableText id="codeView" editable="false"/>
                          </s:Scroller>
                        </mx:Canvas>
                          </mx:ViewStack>
                        </s:VGroup>
                      </s:Panel>

                    </s:Application>

                    • 7. Re: URLoader and XML files
                      Claudiu Ursica Level 4

                      Ok, now what is not working?

                       

                      In theory when you switch it should work e.g. lad the xmml amd the complete code to assign it to your RichText, maybe when you first show the code stack you will need to force a list change handler execution...

                       

                      C

                      • 8. Re: URLoader and XML files
                        Maxime Chupin Level 1

                        Claudiu Ursica wrote:

                         

                        Ok, now what is not working?

                         

                        I don't know… The content of the xml files does not appear.

                        Here you can see the result:

                        http://flex.notezik.com/explorer2.swf

                        the code:

                        http://flex.notezik.com/explorer2.mxml

                        and the xml files:

                        http://flex.notezik.com/xml/

                        • 9. Re: URLoader and XML files
                          Claudiu Ursica Level 4

                          Browser tells me that xml are not well formatted, if you cannot see them in the browser you won't be able to load them. However try to debug on load complete and see the result. If nothing shows add other listeners for errors on url loader. If you get result then the assignation to rich text is the issue.

                           

                          C

                          • 10. Re: URLoader and XML files
                            Maxime Chupin Level 1

                            Claudiu Ursica wrote:

                             

                            Browser tells me that xml are not well formatted, if you cannot see them in the browser you won't be able to load them.

                            Ok. I thought that it just take the file in a String. I will try with a valid XML file.

                             

                            Claudiu Ursica wrote:


                            However try to debug on load complete and see the result.

                            How can I do this? I use Linux and compile in line command.

                             

                            Thanks

                            • 11. Re: URLoader and XML files
                              Claudiu Ursica Level 4

                              You can put a logger or use trace messages but step by step debugging on linux I am not aware if is possible or not. Start by adding some error listeners on your url loader and make sure the path to xml files is correct. Linux uses different slashes as far as I know. Google on how to logging on linux for flash player if is possible or your traces and log messages will be dumped into the log file.

                               

                               

                              C

                              • 12. Re: URLoader and XML files
                                Maxime Chupin Level 1

                                So, when my XML file is a valid one, this work. However, the xml code is not interpreted.

                                Here, one of my XML file:

                                <?xml version="1.0" encoding="utf-8"?>
                                <root xmlns:fx="http://ns.adobe.com/mxml/2009"
                                      xmlns:s="library://ns.adobe.com/flex/spark"
                                      xmlns:mx="library://ns.adobe.com/flex/mx">
                                <s:span>Test for flex-ang.xml</s:span>
                                </root>

                                and in my RichText area, I obtain:


                                <root xmlns:fx="http://ns.adobe.com/mxml/2009"
                                      xmlns:s="library://ns.adobe.com/flex/spark"
                                      xmlns:mx="library://ns.adobe.com/flex/mx">
                                <s:span>Test for flex-ang.xml</s:span>
                                </root>

                                 

                                But I want the code to be interpreted by Flex (in order to format it with color, etc.)

                                 

                                How can I do this?

                                 

                                Thanks

                                • 13. Re: URLoader and XML files
                                  Claudiu Ursica Level 4

                                  You need to interpret it on your own or see if Rich text can handle Html with style, or to which degree...

                                   

                                   

                                  in the first case you will have to parse xml and creat objects to fill the TextFlow of the rich text.

                                  e.g. if you parse a span you wil need to create a new Span object. etc...

                                   

                                  second case your xml will be an xhtml with inline styles inside. However as far as I can see RichText does not have an htmlText propery so you need to handle than on your own also.

                                   

                                  textFlow property  

                                  textFlow:flashx.textLayout.elements:TextFlow

                                  Language Version:  ActionScript 3.0

                                  Product Version:  Flex 4.5

                                  Runtime Versions:  Flash Player 10, AIR 2.5

                                  The TextFlow representing the rich text displayed by this component.

                                  A TextFlow is the most important class in the Text Layout Framework (TLF). It is the root of a tree of FlowElements representing rich text content.

                                  You normally create a TextFlow from TLF markup using the TextFlowUtil.importFromString() or TextFlowUtil.importFromXML() methods. Alternately, you can use TLF's TextConverter class (which can import a subset of HTML) or build a TextFlow using methods like addChild() on TextFlow.

                                  Setting this property affects the text property and vice versa.

                                  If you set the textFlow and get the text, the text in each paragraph will be separated by a single LF (\n).

                                  If you set the text to a String such as "Hello World" and get the textFlow, it will be a TextFlow containing a single ParagraphElement with a single SpanElement.

                                  If the text contains explicit line breaks -- CR (\r), LF (\n), or CR+LF (\r\n) -- then the content will be set to a TextFlow which contains multiple paragraphs, each with one span.

                                  To turn a TextFlow object into TLF markup, use the markup returned from the TextFlowUtil.export() method.

                                   

                                   

                                  C