12 Replies Latest reply on Jul 20, 2010 4:41 AM by djh88ukwb

    Tree and view stack navigation

    djh88ukwb Level 1

      Hello all,

       

      I have the following Tree

       

          <fx:Declarations>
              <fx:XMLList id="navigation">
                  <node label="navigation">
                      <node label="Management 1">
                          <node label="Link one" view="View 1"/>
                          <node label="Link two" view="View 2"/>
                          <node label="Link three" view ="View 3"/>
                      </node>
                      <node label="Management 2">
                          <node label="Link one"/>
                          <node label="Link two"/>
                      </node>
                      <node label="Logout"/>
                  </node>   
              </fx:XMLList>
          </fx:Declarations>

                  <mx:Tree id="navigationTree" width="100%" height="100%" labelField="@label" showRoot="false" dataProvider="{navigation}" contentBackgroundAlpha="0.0" color="#FFFFFF" borderVisible="false" y="10" change="treeChanged(event)"/>

       

      And the following viewstack

       

              <mx:ViewStack x="200" y="10" id="viewstack1" width="770" height="490" backgroundColor="#1c1c1c" cornerRadius="15" >
                  <s:NavigatorContent label="View 1" width="100%" height="100%">
                      <s:Label x="32" y="27" text="View One" color="#FFFFFF"/>
                  </s:NavigatorContent>
                  <s:NavigatorContent label="view 2" width="100%" height="100%">
                      <s:Label x="32" y="27" text="View Two" color="#FFFFFF"/>
                  </s:NavigatorContent>
                  <s:NavigatorContent label="view 3" width="100%" height="100%">
                      <s:Label x="32" y="27" text="View Three" color="#FFFFFF"/>
                  </s:NavigatorContent>
              </mx:ViewStack>

       

      Im struggling to create a function for the tree (change="TreeChanged(event)")  so that the view stack will change depending upon what item has been clicked.

       

      My xml has the view that is supposed to be shown but i cant link it all together, any help would be great !

        • 1. Re: Tree and view stack navigation
          djh88ukwb Level 1

          Nobody ?

          • 2. Re: Tree and view stack navigation
            rootsounds Level 4

            What part of this are you stuck on?


            • 3. Re: Tree and view stack navigation
              djh88ukwb Level 1

              Im struggling to create a function for the tree  (change="TreeChanged(event)")  so that the view stack will change  depending upon what item has been clicked.

               

              I want the viewstack to change views depending upon what is clicked withint he tree . .

              • 4. Re: Tree and view stack navigation
                rootsounds Level 4

                Something along the lines of this:

                 

                private function treeChange(event:ListEvent):void
                {
                     var selectedNode:XML = XML(event.itemRenderer.data);

                     if ( selectedNode.hasOwnProperty("@view") ) //not all nodes have a view property, so check
                     {
                          //Either viewstack1.selectedIndex = selectedNode.@view assuming that you you store only indicies in @view
                          //OR viewstack1.selectedChild = this[@view] assuming that you give your NavigatorContent items ids and @view matches these ids. (don't be thrown by the array syntax)
                     }
                }
                1 person found this helpful
                • 5. Re: Tree and view stack navigation
                  djh88ukwb Level 1

                  Hmm im having problems with this sorry.

                   

                  Could you assume that my XML has teh value i want the viewstack to change to as "view"  so the funciton has to check the "view" label.

                   

                  Also what "Imports" do i need to include? such as the

                              import mx.controls.Alert;
                              import mx.events.FlexEvent;
                              import mx.rpc.events.FaultEvent;

                   

                  THanks for the help !

                  • 6. Re: Tree and view stack navigation
                    djh88ukwb Level 1

                    Nobody able to help me with this function ?

                    • 7. Re: Tree and view stack navigation
                      rootsounds Level 4

                      Go with this approach:

                       

                      private function treeChange(event:ListEvent):void
                      {
                           var selectedNode:XML = XML(event.itemRenderer.data);

                           if ( selectedNode.hasOwnProperty("@view") ) //not all nodes have a view property, so check
                           {
                                viewstack1.selectedChild = this[@view]; // assuming that you give your NavigatorContent items ids and @view matches these ids. (don't be thrown by the array syntax)
                           }
                      }

                      Your compiler will let you know if your are missing any imports.  The IDE (assuming that you are using one) should offer auto-complete to make adding them a breeze.

                      1 person found this helpful
                      • 8. Re: Tree and view stack navigation
                        djh88ukwb Level 1

                        Thanks for your reply, however i get an error, stating

                         

                        1120: Access of undefined property view.

                         

                        Here is my complete code,

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:WindowedApplication 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="756" height="345">
                           
                            <fx:Declarations>
                                <fx:XMLList id="navigation">
                                    <node label="navigation">
                                        <node label="Management 1">
                                            <node label="Link one" view="View1"/>
                                            <node label="Link two" view="View2"/>
                                            <node label="Link three" view ="View3"/>
                                        </node>

                                        <node label="Logout"/>
                                    </node>  
                                </fx:XMLList>
                            </fx:Declarations>
                           
                            <fx:Script>
                                <![CDATA[
                                    import mx.collections.ArrayCollection;
                                    import mx.controls.Alert;
                                    import mx.events.FlexEvent;
                                    import mx.events.ItemClickEvent;
                                    import mx.events.ListEvent;
                                    import mx.managers.PopUpManager;
                                    import mx.rpc.events.FaultEvent;
                                    import mx.rpc.events.ResultEvent;
                                   
                                    import spark.events.IndexChangeEvent;
                                    import spark.events.TextOperationEvent;
                                   
                                    [Bindable]public var selectedNode:XML;
                                   
                                    private function treeChange(event:ListEvent):void
                                    {
                                        var selectedNode:XML = XML(event.itemRenderer.data);
                                       
                                        if ( selectedNode.hasOwnProperty("@view") ) //not all nodes have a view property, so check
                                        {
                                            viewstack1.selectedChild = this[@view]; // assuming that you give your NavigatorContent items ids and @view matches these ids. (don't be thrown by the array syntax)
                                        }
                                    }

                                   
                                ]]>
                            </fx:Script>
                           
                            <mx:Tree id="navigationTree"  labelField="@label" showRoot="false" dataProvider="{navigation}" contentBackgroundAlpha="0.0" borderVisible="false" y="10" height="301" width="192" change="treeChange(event)"/>
                           
                            <mx:ViewStack x="200" y="10" id="viewstack1" width="532" height="320" backgroundColor="#1c1c1c" cornerRadius="15" >
                                <s:NavigatorContent id="View1" width="100%" height="100%">
                                    <s:Label x="32" y="27" text="View One" color="#FFFFFF"/>
                                </s:NavigatorContent>
                                <s:NavigatorContent id="view2" width="100%" height="100%">
                                    <s:Label x="32" y="27" text="View Two" color="#FFFFFF"/>
                                </s:NavigatorContent>
                                <s:NavigatorContent id="view3" width="100%" height="100%">
                                    <s:Label x="32" y="27" text="View Three" color="#FFFFFF"/>
                                </s:NavigatorContent>
                            </mx:ViewStack>
                            <s:Label x="33" y="313" text="{selectedNode.@view}"/>
                           
                        </s:WindowedApplication>

                         

                        I know the selectedNode variable is holding the correct value, its just not changing the viewstack

                         

                        Thanks !

                        • 9. Re: Tree and view stack navigation
                          rootsounds Level 4

                          Helps if I get it right:

                          viewstack1.selectedChild = this[selectedNode.@view];

                          • 10. Re: Tree and view stack navigation
                            djh88ukwb Level 1

                            Again thanks for the help !

                             

                            However now when i run the desktop app, i get the following error when i try to change using the tree

                             

                            ReferenceError: Error #1069: Property View2 not found on MyDesktopApp and there is no default value.
                                at MyDesktopApp/treeChanged()[C:\Users\Catherine Stewart\Adobe Flash Builder 4\Air Tests\src\MyDesktopApp.mxml:39]
                                at MyDesktopApp/__navigationTree_change()[C:\Users\Catherine Stewart\Adobe Flash Builder 4\Air Tests\src\MyDesktopApp.mxml:46]
                                at flash.events::EventDispatcher/dispatchEventFunction()
                                at flash.events::EventDispatcher/dispatchEvent()
                                at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
                                at mx.controls.listClasses::ListBase/mouseUpHandler()[E:\dev\4.0.0\frameworks\projects\frame work\src\mx\controls\listClasses\ListBase.as:10240]
                                at mx.controls::List/mouseUpHandler()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\cont rols\List.as:2469]
                                at mx.controls::Tree/mouseUpHandler()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\cont rols\Tree.as:3150]

                            :S looks nasty, any ideas what it is ?

                             

                            Thanks

                            • 11. Re: Tree and view stack navigation
                              rootsounds Level 4

                              Check the capitalization of your NavigatorContent ids.


                              • 12. Re: Tree and view stack navigation
                                djh88ukwb Level 1

                                Ahh Such a silly mistake,  Thanks !