4 Replies Latest reply on Apr 6, 2007 9:38 AM by Gil1

    Data Binding not able to detect chances to XMLList

    Gil1 Level 1
      I am creating a simple app. that reads an XML file and then populates some lists. When clicking on an item on a list it should display an image or play a video in another container.

      The problem I have is that it does not seem to detect the changes appropriately.

      here is my code:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"
      horizontalAlign="center" verticalAlign="middle" >
      <mx:states>
      <mx:State name="video">
      <mx:AddChild relativeTo="{cItem}" position="after">
      <mx:VideoDisplay width="583" horizontalCenter="0" height="440" verticalCenter="-15.5"
      id="video_stage" playheadUpdate="mover(event)" bufferTime="3" volume="0"/>
      </mx:AddChild>
      <mx:RemoveChild target="{cover_picture}"/>

      <mx:RemoveChild target="{openBtn}"/>
      <mx:AddChild relativeTo="{right_container}" position="lastChild">
      <mx:Button x="10" y="507" label="Play" click="player(event)" />
      </mx:AddChild>
      <mx:AddChild relativeTo="{right_container}" position="lastChild">
      <mx:Button x="66" y="507" label="Pause" click="pauser(event)"/>
      </mx:AddChild>
      <mx:AddChild relativeTo="{right_container}" position="lastChild">
      <mx:Button x="131" y="507" label="Stop" click="stopper(event)"/>
      </mx:AddChild>

      </mx:State>
      </mx:states>
      <mx:HTTPService id="xmlFeed" url="data/content/Spade.xml" result="loaded(event)" resultFormat="e4x"/>
      <mx:Script>
      <![CDATA[
      import mx.controls.listClasses.ListData;
      import mx.containers.Panel;
      import mx.events.VideoEvent;
      import mx.rpc.events.*;
      import mx.collections.*;
      import mx.controls.*;
      import mx.core.*;

      [Bindable]
      private var contentList:XMLList;
      private function init():void
      {
      xmlFeed.send();
      }


      private function loaded(e:ResultEvent):void
      {
      contentList = e.result.categories;
      }

      private function changeTabHandler(evt:Event):void
      {
      //stopper1();
      if(evt.currentTarget == "Movies") {
      currentItem.text = "Movies";
      }
      }


      private function changeHandler(evt:Event):void
      {
      video_stage.stop();
      cover_picture.source = evt.target.selectedItem.imageURL;
      currentItem.text = evt.currentTarget.selectedItem.name;
      }

      private function changeHandler1(evt:Event):void
      {
      video_stage.source = evt.target.selectedItem.imageURL;
      currentItem.text = evt.currentTarget.selectedItem.name;
      }


      private function player(e:MouseEvent):void
      {
      video_stage.play();
      }

      private function pauser(e:MouseEvent):void
      {
      video_stage.pause();
      }

      private function stopper1():void
      {
      video_stage.stop();
      }

      private function stopper(e:MouseEvent):void
      {
      video_stage.stop();
      }


      ]]>
      </mx:Script>

      <mx:VBox x="0" y="0" width="1024" height="768">
      <mx:Image scaleContent="true"
      source="@Embed('assets/banner.swf')" autoLoad="true" width="100%">
      </mx:Image>
      <mx:Canvas width="1016" height="612" backgroundColor="#00009C">
      <mx:HBox x="5" y="5" width="100%" height="567">
      <mx:TabNavigator width="396" height="567" y="10" cornerRadius="0"
      id="tn1" click="changeTabHandler(event)" creationPolicy="all">

      <mx:Panel title="Modules" label="Modules" width="100%" height="100%" layout="absolute"
      fontSize="14" click="currentState=''" >

      <mx:List id="cList1" dataProvider="{contentList..module}" labelField="name" x="0" y="0"
      width="100%" height="100%" change="changeHandler(event)" fontSize="12"></mx:List>
      </mx:Panel>
      <mx:Panel title="Images" label="Images" width="100%" height="100%" layout="absolute"
      fontSize="14" click="currentState=''">
      <mx:List id="cList2" dataProvider="{contentList..image}" labelField="name" x="0" y="0"
      width="100%" height="100%" change="changeHandler(event)" fontSize="12"></mx:List>
      </mx:Panel>
      <mx:Panel title="Movies" label="Movies" width="80%" height="100%" layout="absolute"
      fontSize="14" click="currentState='video'">
      <mx:List id="cList3" dataProvider="{contentList..movie}" labelField="name" x="0" y="0"
      width="100%" height="100%" change="changeHandler1(event)" fontSize="12"></mx:List>
      </mx:Panel>
      </mx:TabNavigator>
      <mx:Canvas width="603" height="567" backgroundColor="#A5AEC6" cornerRadius="8" id="right_container">
      <mx:Canvas x="10" y="5" width="583" height="35" cornerRadius="15" backgroundColor="#333333" id="cItem">
      <mx:Label x="10" y="7" text="Label" fontSize="14" fontWeight="bold" color="#ffffff" id="currentItem"/>
      </mx:Canvas>
      <mx:SWFLoader id="cover_picture" width="583" scaleContent="true" maintainAspectRatio="true"
      height="479" horizontalAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="0"/>
      <mx:Button label="Click to View Module" click="" width="583" fontSize="14" fontWeight="bold" />
      </mx:Canvas>
      </mx:HBox>
      <mx:Canvas y="582">
      <mx:Button label="About SPADE" click="" x="10" width="158" fontSize="14" fontWeight="bold" />
      <mx:Button label="Exit SPADE" click="" fontSize="14" fontWeight="bold" />
      </mx:Canvas>
      </mx:Canvas>
      </mx:VBox>
      </mx:Application>

      The xml file looks like:

      <?xml version="1.0" encoding="iso-8859-1"?>
      <Spade>
      <general>
      </general>
      <categories>
      <category>
      <modules label="Modules">
      <module>
      <name>Module 1: Check-in</name>
      <imageURL>data/content/previews/default.jpg</imageURL>
      <url></url>
      <tag>something</tag>
      </module>
      <module>
      <name>Module 2: The Ropes</name>
      <imageURL>data/content/previews/default.jpg</imageURL>
      <url></url>
      <tagsomething</tag>
      </module>
      <module>
      <name>Module 3: Advance Ropes</name>
      <imageURL>data/content/previews/a.jpg</imageURL>
      <url>data/ADCA.exe</url>
      <tag>something</tag>
      </module>
      <module>
      <name>Module 4: More of the Same</name>
      <imageURL>data/content/previews/default.jpg</imageURL>
      <url>data/Storyboard_POST_10_16_06.ppt</url>
      <tag>something</tag>
      </module>
      </modules>

      </category>
      <category>
      <images label="Images">
      <image>
      <name>First Image</name>
      <imageURL>data/content/1/Images/capability.jpg</imageURL>
      <url></url>
      <tag>Blah</tag>
      </image>
      <image>
      <name>Eye in the sky</name>
      <imageURL>data/content/1/Images/Eye in the sky.jpg</imageURL>
      <url></url>
      <tag>blup</tag>
      </image>
      </images>
      </category>
      <category>
      <movies label="Movies">
      <movie>
      <name>Cool Video 1</name>
      <imageURL>data/content/1/Movies/video1.flv</imageURL>
      <tag>video</tag>
      </movie>
      <movie>
      <name>Cool Video 2</name>
      <imageURL>data/content/1/Movies/video2.flv</imageURL>
      <tag>video</tag>
      </movie>
      </movies>
      </category>
      </categories>
      </Spade>

      Other issues are:

      I am trying to change the type of content on the "right_container" canvas via states and it sort of work. However, it is making the state change when the panel inside TabNavigator is clicked as opposed to when a tab on the TabNavighator is clicked.

      Also, I would like to create the tabs dynamically and not hard coded as I have them currently (since the info to generate them comes already from the xml file). is a repeater a solution for this? or what other approaches can I take?

      Thanks,

      Gilbert
        • 1. Re: Data Binding not able to detect chances to XMLList
          peterent Level 2
          We are happy to help you, but there is too much information here. Can you post 3 separate questions? Otherwise this will get all mixed up with answers and anyone who needs help with states, for example, might find your question and answers on that topic useful. But they won't be able to easily find it if isn't in its own topic.

          You've got contentList and you have a <mx:List> with a dataProvider of {contentList..module} which should yield an XMLList of <module> elements. That should be fine so far. Your change handler for that list is:

          private function changeHandler(evt:Event):void
          {
          video_stage.stop();
          cover_picture.source = evt.target.selectedItem.imageURL;
          currentItem.text = evt.currentTarget.selectedItem.name;
          }

          evt.target.selectedItem should be a <module> element. Is that not happening?
          • 2. Re: Data Binding not able to detect chances to XMLList
            Gil1 Level 1
            Peter,

            Thanks. i will separate this in 3 questions.
            I posted the whole thing, so people could copy the code on Flex and tested to see what I am talking about.

            "evt.target.selectedItem should be a <module> element. Is that not happening?"
            Yes, when loading is a module. Once a click on a list item I get the following error:

            TypeError: Error #1009: Cannot access a property or method of a null object reference.
            at SPADE2/::changeHandler()
            at SPADE2/__cList1_change()
            at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
            at flash.events::EventDispatcher/dispatchEvent()
            at mx.core::UIComponent/dispatchEvent()
            at mx.controls.listClasses::ListBase/mx.controls.listClasses:ListBase::mouseUpHandler()
            at mx.controls::List/mx.controls:List::mouseUpHandler()

            If a click dismiss all, I can click on the tabs and the content on the list changes as expected, but when clicking on the list items, they don't work.

            If a click on the video tab the state changes, but I have to click on the list twice to play a video. After that I the list items for the other tabs work.

            Gilbert
            • 3. Re: Data Binding not able to detect chances to XMLList
              peterent Level 2
              The error means something in your changeHandler is null. It could either be video_stage, cover_picture, evt, evt.target, evt.target.selectedItem, or currentItem.

              I would be best to set a breakpoint in that function and run it in the debugger.
              • 4. Re: Data Binding not able to detect chances to XMLList
                Gil1 Level 1
                Thanks. I will try that.

                Gilbert