12 Replies Latest reply on Jun 17, 2012 12:48 PM by EvyatarBH

    Problem with TextArea and XML

    lriera

      Hello,

       

      I am new to Flex. I am sorry if my question sounds obvious, but for me is a great trouble.

       

      I am using this code to extract a picture and a video from a XML file:

       

      <mx:Image id="pantalla" includeIn="Home" x="389" y="108" width="491" height="342" source="{list.selectedItem.@image}"/>

       

      <s:SWFLoader includeIn="Leccion" x="-1" y="1" source="{list.selectedItem.@video}"/>

       

      But when I try to do the same with a text file with this code:

       

      <s:TextArea includeIn="Home" x="389" y="536" width="491" height="154" text="{list.selectedItem.@intro}"/>

       

      I only get the file name, not the file content.

       

      This is the XML file I am calling:

       

      <lecciones>

      <apartado nombre="Leccion 001" video="videos/Leccion001.swf" intro="intros/001.txt" image="images/001.jpg"/>

      <apartado nombre="Leccion 002" video="videos/Leccion002.swf" intro="intros/002.txt" image="images/002.jpg"/>

      <apartado nombre="Leccion 003" video="videos/Leccion003.swf" intro="intros/003.txt" image="images/003.jpg"/>

      <apartado nombre="Leccion 004" video="videos/Leccion004.swf" intro="intros/004.txt" image="images/004.jpg"/>

      </lecciones>

       

      I want access to the content of the text file 001.txt, not the name of the file as I do with the 001.jpg and the Leccion001.swf files.

       

      Can anyone help me, please.

       

      Thank you

        • 1. Re: Problem with TextArea and XML
          drkstr_1 Level 4

          You need to load the contents of the file manually. Add a change handler to your list, then load the file contents using a URLLoader. Once the loader is finished loading the data, you can assign the loaded data to the TextArea.

           

          It should look something like this:

           

           

           

          [Bindable]

          private var _text:String;

           

           

          private list_changeHandler(event:IndexChangeEvent /* I think */)

          {

                    var loader:URLLoader = new URLLoader(new URLRequest(list.selectedItem.@intro));

                    loader.addEventListener(Event.COMPLETE, completeHandler);

                    loader.load();

          }

           

           

          private function completeHandler(event:Event):void {

                    _text = event.target.data;

          }

           

           

           

           

          <s:TextArea includeIn="Home" x="389" y="536" width="491" height="154" text="{_text}"/>

           

           

          Relevant Documentation: http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7cfd.html

          • 2. Re: Problem with TextArea and XML
            lriera Level 1

            Hi drkstr_1,

             

            Thank you for your quick response. I have included the code you show me on your response in my application. I have used an import statement for the IndexChangeEvent to work. But now I get an error: 1136: Incorrect number of arguments.  Expected 1.     AutoCAD.mxml     /AutoCAD/src     line 31     Flex Problem

             

            I can't find a solution, can you point me in the correct direction, please. Thank you a lot.

             

            I am ataching all my code so you can see how it works. The error occurs on line 31 which I have signaled:

             

            <?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"

            width="1024" minWidth="1024" minHeight="768" currentState="Home">

             

            <s:layout>

            <s:BasicLayout/>

            </s:layout>

            <s:states>

            <s:State name="Home"/>

            <s:State name="Leccion"/>

            </s:states>

             

            <fx:Declarations>

            <fx:XML id="leccionesXML" source="xml/Lecciones.xml"/>

            <s:XMLListCollection id="listaLecciones" source="{leccionesXML.apartado}"/>

            </fx:Declarations>

             

            <fx:Script>

            <![CDATA[

             

            import spark.events.IndexChangeEvent

             

            [Bindable]

            private var _text:String;

             

            private function list_changeHandler(event:IndexChangeEvent /* I think */) {

            var loader:URLLoader = new URLLoader(new URLRequest(list.selectedItem.@intro));

            loader.addEventListener(Event.COMPLETE, completeHandler);

            loader.load();                                                   /*this is the line where the error shows*/

            }

             

            private function completeHandler(event:Event):void {

            _text = event.target.data;

            }

            ]]>

            </fx:Script>

             

             

            <mx:TabNavigator includeIn="Home" left="44" top="108" bottom="78" width="331">

             

            <s:NavigatorContent label="Lista de Lecciones" width="100%" height="100%">

            <s:List id="list" x="-1" y="0" width="331" height="100%" dataProvider="{listaLecciones}" labelField="@nombre"/>

            </s:NavigatorContent>

             

            </mx:TabNavigator>

            <s:TextArea includeIn="Home" x="389" y="458" width="491" height="58"

            text="{list.selectedItem.@intro}"/>

            <mx:Image id="pantalla" includeIn="Home" x="389" y="108" width="491" height="342"

            source="{list.selectedItem.@image}"/>

             

            <s:TextArea includeIn="Home" x="389" y="536" width="491" height="154" text="{_text}"/>

             

            <s:SWFLoader includeIn="Leccion" x="-1" y="1" source="{list.selectedItem.@video}"/>

             

            </s:Application>

            • 3. Re: Problem with TextArea and XML
              drkstr_1 Level 4

              My mistake.

               

              var loader:URLLoader = new URLLoader();

              loader.addEventListener(Event.COMPLETE, completeHandler);

              loader.load(new URLRequest(list.selectedItem.@intro));  

              • 4. Re: Problem with TextArea and XML
                lriera Level 1

                Hi drkstr_1,

                 

                Thank you for your continued support. I have make the correction you point me and now the application is working Ok. But... (always there is a but... I am sorry).

                 

                In the textbox where the text must appear, nothing is showing. In debbuging mode I get the following message: "warning: unable to bind to property 'intro' on class 'XML' (class is not an IEventDispatcher)".

                 

                I have googled and it seems to me that I am missing to convert the text to StrongType or to use an ObjectProxy, but as I am very newby I am not sure how I have to implement this in the code you write to me.

                 

                Is because of that, that I am asking you for a little more help in the hope it will be the last in this serie.

                 

                Thank you a lot for your attention and help.

                • 5. Re: Problem with TextArea and XML
                  SHIVANG SANGHI

                  Hello,

                  Whenever you made any variable bindable you should have to use value object(VO's).As the binding is done on object.

                  /* code start*/

                  [Bindable]

                  public class Model()

                  {

                       var intro:String = "";

                       var id:int = 0;

                      

                   

                            and so on.

                   

                           

                   

                   

                  }

                   

                  /* code end*/

                   

                  When your xml is loaded then you should pushed the xml item value in their respective variable of Model class.It will then works..

                  • 6. Re: Problem with TextArea and XML
                    lriera Level 1

                    Hi Shivang Sanghi,

                     

                    I have tried, but I don't understand how I have to fix my code, can you be more explicit. How I have to include your proposed code into my own? Please look at all my code above, can you tell me where and how I have to include your code.

                     

                    Thank you very much

                    • 7. Re: Problem with TextArea and XML
                      EvyatarBH

                      I don't think you need binding at all.

                      1. Listen to the list change event.

                      2. Load file as described above.

                      3. On the load complete event handler set the text property of the text area.

                      (Something like textAreaId.text = event.target.data)

                      • 8. Re: Problem with TextArea and XML
                        drkstr_1 Level 4

                        <s:TextArea includeIn="Home" x="389" y="458" width="491" height="58"

                        text="{list.selectedItem.@intro}"/>

                         

                        It appears you are still binding to the attribute, rather than than the loaded text. Was it intentional to have two text areas displaying the same content?

                         

                        Your text should still appear in the second TextArea though. Have you traced the value to make sure it's actually loading?

                         

                        private function completeHandler(event:Event):void

                        {

                          _text = event.target.data;

                                  trace("_text = "+_text);

                        }

                        • 9. Re: Problem with TextArea and XML
                          lriera Level 1

                          EvyatarBH, thank you for your interest,

                           

                          Please tanke in consideration that I am absolute beginer.

                           

                          Your 3rd point is what drkstr_1 point in his code, am I right?

                           

                          private function completeHandler(event:Event):void {

                                _text = event.target.data;

                          }

                           

                          But what I have seen when debuging is that the String variable _text is not filled with the content of the XML file. Plus the error I point above.

                           

                          Can someone point me in the right direction, please.

                           

                          Thank you

                          • 10. Re: Problem with TextArea and XML
                            drkstr_1 Level 4

                            The other two comments here were related to binding, which I believe is irrelevant to your problem. Let's worry about getting the contents of that file to load, then we can discuss the best way to assign those contents to the text area (which is where binding or not comes into play).

                             

                            Have you confirmed that the file contents is being loaded as expected by tracing the value? Also, can you explain why you are binding one TextArea to the @intro attribute and another to _text? Is one supposed to display the file name and the other the contents?

                            • 11. Re: Problem with TextArea and XML
                              lriera Level 1

                              Hi drkstr_1,

                               

                              I have traced the variable _text and nothing appears in the Console. I think the problem is that both Functions:  list_changeHandler & completeHandler, are not called.Who is the responsible for calling list_changeHandler? I can't see any call in the code.

                               

                              I am using two TextAreas because I want to format the title of the first TextArea differently from the body of the second TextArea.

                               

                              I am attaching the complete code below for you to see exactly how it looks now.

                               

                              Thank you for your help:

                               

                               

                              <?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"

                              width="1024" minWidth="1024" minHeight="768" currentState="Home">

                               

                              <s:layout>

                              <s:BasicLayout/>

                              </s:layout>

                              <s:states>

                              <s:State name="Home"/>

                              <s:State name="Leccion"/>

                              </s:states>

                               

                              <fx:Declarations>

                              <fx:XML id="leccionesXML" source="xml/Lecciones.xml"/>

                              <s:XMLListCollection id="listaLecciones" source="{leccionesXML.apartado}"/>

                              </fx:Declarations>

                               

                              <fx:Script>

                              <![CDATA[

                               

                              import spark.events.IndexChangeEvent

                               

                              [Bindable]

                               

                              private var _text:String;

                               

                              private function list_changeHandler(event:IndexChangeEvent):void

                              {

                              var loader:URLLoader = new URLLoader(new URLRequest(list.selectedItem.@intro));

                               

                              loader.addEventListener(Event.COMPLETE, completeHandler);

                              loader.load(URLRequest(list.selectedItem.@intro));

                              trace(loader.load)

                               

                              }

                               

                              private function completeHandler(event:Event):void {

                              _text = event.target.data;

                              trace("_text = "+_text)

                              }

                              ]]>

                              </fx:Script>

                               

                               

                              <mx:TabNavigator includeIn="Home" left="44" top="108" bottom="78" width="331">

                               

                              <s:NavigatorContent label="Lista de Lecciones" width="100%" height="100%">

                              <s:List id="list" x="-1" y="0" width="331" height="100%" dataProvider="{listaLecciones}" labelField="@nombre"/>

                              </s:NavigatorContent>

                               

                              </mx:TabNavigator>

                               

                              <s:TextArea includeIn="Home" x="389" y="458" width="491" height="58"

                              text="{list.selectedItem.@intro}"/>

                              <mx:Image id="pantalla" includeIn="Home" x="389" y="108" width="491" height="342"

                              source="{list.selectedItem.@image}"/>

                               

                              <s:TextArea includeIn="Home" x="389" y="536" width="610" height="222" text="{_text}"/>

                               

                              <s:SWFLoader includeIn="Leccion" x="-1" y="1" source="{list.selectedItem.@video}"/>

                               

                              </s:Application>

                              • 12. Re: Problem with TextArea and XML
                                EvyatarBH Level 3

                                1. You should attach event listeners to your components by one of two ways:

                                a. Call the method addEventListener via ActionScript

                                b. Populate the event's property in MXML (<s:List id="listId" change="functionName" />)

                                 

                                2. What I meant was that there's no need for a designated bindable variable, as you can simply populate the second TextArea's text property with the value you get from the file.

                                 

                                3. You shouldn't use a TextArea for displaying the filename, since a Label would be sufficient.

                                Always try to use the minimal component that fits your needs for achieving better performance.