0 Replies Latest reply on Oct 25, 2007 8:14 PM by RickyRaccoon

    Question: Tree node to trigger State change

    RickyRaccoon
      A graphic designer with incomplete knowledge of ActionScript asks:

      I want a mouse click of "Item A1" in a standard MXML Tree component, to trigger a prescribed change of state in a neighboring container. The supporting code is attached...and I obviously don't have the trigger statement click="this.currentState='contentA1'" in the right place. This is for rapid prototyping purposes so does not need to rely on external databases or even external MXML modules.

      View a snapshot of the the intended screen: http://homepage.mac.com/designr2/TreeExample.png

      Can anyone provide a quick solution or resource?....Mucho gracias!

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">


      <mx:states>
      <mx:State name="contentA1">
      <mx:AddChild relativeTo="{content}" position="lastChild">
      <mx:Label text="Text for Item A1. Lorem ipsum dolor sit amet" fontWeight="bold" x="10" y="30"/> </mx:AddChild>
      </mx:State>
      <mx:State name="contentA2">
      <mx:AddChild relativeTo="{content}" position="lastChild">
      <mx:Label text="Text for Item A2. Lorem ipsum dolor sit amet" fontWeight="bold" x="10" y="30"/> </mx:AddChild>
      </mx:State>
      <mx:State name="contentA3">
      <mx:AddChild relativeTo="{content}" position="lastChild">
      <mx:Label text="Text for Item A3. Lorem ipsum dolor sit amet" fontWeight="bold" x="10" y="30"/> </mx:AddChild>
      </mx:State>
      </mx:states>

      <mx:XMLList id="treeData">
      <node label="Parent">
      <node label="Item A">
      <node label="Item A1" id="trigA1" click="this.currentState='contentA1'"/>
      <node label="Item A2" id="trigA2" click="this.currentState='contentA2'"/>
      <node label="Item A3" id="trigA3" click="this.currentState='contentA3'"/>
      </node>
      <node label="Item B">
      <node label="Item B1"/>
      <node label="Item B2"/>
      </node>
      </node>
      </mx:XMLList>

      <mx:ApplicationControlBar top="10" left="10" right="10" height="50" fillAlphas="[1.0, 1.0]" fillColors="[#FCCC98, #FCCC98]">
      <mx:Label text="Heading Area" fontFamily="Verdana" fontSize="12" fontWeight="bold"/>
      </mx:ApplicationControlBar>
      <mx:HDividedBox top="70" left="10" right="10" bottom="10">


      <mx:Canvas label="Tree" width="33%" height="100%" backgroundColor="#BDECB3">

      <mx:Label x="10" y="10" text="Tree" fontFamily="Verdana" fontSize="12" fontWeight="bold"/>
      <mx:Tree x="10" y="30" id="myTree" width="100%" height="100%" labelField="@label"
      showRoot="false" dataProvider="{treeData}" alpha="1.0" backgroundColor="#BDECB3" borderStyle="none">
      </mx:Tree>

      </mx:Canvas>

      <mx:Canvas label="Content" id="content" width="67%" height="100%" backgroundColor="#A5CFEF">
      <mx:Label text="Content States" fontWeight="bold" x="10" y="10" fontSize="12" fontFamily="Verdana"/>
      </mx:Canvas>

      </mx:HDividedBox>

      </mx:Application>