6 Replies Latest reply on Dec 21, 2009 11:57 AM by cyber0897

    need help with navigation within a spark list...

    cyber0897 Level 1

      hey guys, so in my application when you click on a list item, it opens up an image, and along with the image a few buttons are created dynamically...

       

      the image and the url/labels for the dynamic buttons is provided through an xml/xmlListCollection.

       

      what i need help with is the url or more specifically when you click on one of these dynamic buttons it needs to navigate me to another part of an list or display a certain set of images that is not in my spark list...

       


      please let me know if this makes no sence

       

      the code i have is

       

       

      <code>

          [Bindable] private var menuXml:XML;
          [Bindable] private var imgList:XMLListCollection = new XMLListCollection();
          [Bindable] private var navControl:XMLListCollection = new XMLListCollection();
          [Bindable] private var fullList:XMLListCollection = new XMLListCollection();
          private var returnedXml:XMLListCollection = new XMLListCollection();
          private var myXmlSource:XML = new XML();
          //[Bindable] private var xmlReturn:Object;
          private var currImage:int = 0;

       


          //public var userOpProv:XMLListCollection = new XMLListCollection();
          //private var troubleShootProvider:XMLListCollection = new XMLListCollection();

       

          private function myXml_resultHandeler(event:ResultEvent):void{
              userOptionProvider.source = event.result.apx32.userOptions.children();
              troubleShootProvider.source = event.result.apx32.troubleShooting.children();
              fullList.source = event.result.apx32.children();
              returnedXml.source = event.result[0].children();
              myXmlSource = event.result[0];
          }
          private function myXml_faultHandler(event:FaultEvent):void{
              Alert.show("Error loading XML");
              Alert.show(event.fault.message);
          }
          private function app_creationComplete(event:FlexEvent):void{
              userOptions.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
              myXml.send();
              //trouble.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
             
              /*
              myXml = new HTTPService();
              myXml.url = "modules/apx32/apx32TroubleshootingXml.xml";
              myXml.resultFormat = "e4x";
              myXml.addEventListener(ResultEvent.RESULT, myXml_resultHandeler);
              myXml.addEventListener(FaultEvent.FAULT, myXml_faultHandler);
              myXml.send();
              */
             
          }

       

          private function troubleShootChange(event:IndexChangeEvent):void{
              dynamicButtons.removeAllElements();
             
              navControl.source = troubleShootProvider[event.newIndex].children();
              currImage = 0;
              imgList.source = troubleShootProvider[event.newIndex].images.children();
              definition.source = imgList[currImage].@url;
              if(imgList[currImage].@details == "true"){
                  if(imgList[currImage].buttons.@hasButtons == "true"){
                      for each(var item:XML in imgList[currImage].buttons.children()){
                          var newButton:LinkButton = new LinkButton();
                          newButton.label = item.@name;
                          newButton.x = item.@posX;
                          newButton.y = item.@posY;
                          newButton.setStyle("skin", null);
                          newButton.styleName = "dynamicButtonStyle";
                          dynamicButtons.addElement(newButton);
                      }
                  }
              }
             
              //var isMultiPage:String = navControl[2]["multiPages"];
              //trace(isMultiPage);
              //        if(isMultiPage){
              if(currImage >= imgList.length - 1){
                  next.visible = false;
                  back.visible = false;
              }
                  //        }
              else{
                  back.visible = false;
                  next.visible = true;
              }
          }

       

          private function customButtonPressed(event:Event):void{
              if(imgList[currImage].button.@changeTo != ""){

       

              }
          }

       

          private function userOptionsChange(event:IndexChangeEvent):void{
              dynamicButtons.removeAllElements();
             
              navControl.source = userOptionProvider[event.newIndex].children();
              currImage = 0;
              imgList.source = userOptionProvider[event.newIndex].images.children();
              definition.source = imgList[currImage].@url;
              if(imgList[currImage].@details == "true"){
                  if(imgList[currImage].buttons.@hasButtons == "true"){
                      for each(var item:XML in imgList[currImage].buttons.children()){
                          var newButton:LinkButton = new LinkButton();
                          newButton.label = item.@name;
                          newButton.x = item.@posX;
                          newButton.y = item.@posY;
                          newButton.setStyle("skin", null);
                          newButton.styleName = "dynamicButtonStyle";
                          newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
                          dynamicButtons.addElement(newButton);
                      }
                  }
              }
             
              var isMultiPage:String = navControl[2]["multiPages"];
              if(isMultiPage == "true"){
                  if(navControl[2]["next"] == "NEXT STEP"){
                      navContainer.x = 630;
                  }
                  else{
                      navContainer.x = 640;
                  }
                  next.label = navControl[2]["next"];
                  back.label = navControl[2]["back"];
              }
              if(currImage >= imgList.length - 1){
                  next.visible = false;
                  back.visible = false;
              }
              else{
                  back.visible = false;
                  next.visible = true;
              }

       

          }
          private function nextClickHandler(event:MouseEvent):void{
              currImage += 1;
              dynamicButtons.removeAllElements();
              if(currImage >= imgList.length-1){
                  currImage = imgList.length - 1;
                  //next.visible = false;
                  next.label = "YOU'RE DONE";
              }
              else
                  next.label = navControl[2]["next"];
             
              back.visible = true;
             
              if(imgList[currImage].@details == "true"){
                  if(imgList[currImage].buttons.@hasButtons == "true"){
                      for each(var item:XML in imgList[currImage].buttons.children()){
                          var newButton:LinkButton = new LinkButton();
                          newButton.label = item.@name;
                          newButton.x = item.@posX;
                          newButton.y = item.@posY;
                          newButton.setStyle("skin", null);
                          newButton.styleName = "dynamicButtonStyle";
                          dynamicButtons.addElement(newButton);
                      }
                  }
              }
             
              definition.source = imgList[currImage].@url;
          }
          private function backClickHandler(event:MouseEvent):void{
              currImage -= 1;
              dynamicButtons.removeAllElements();
             
              if(currImage == 0){
                  back.visible = false;
              }
              next.visible = true;
              next.label = navControl[2]["next"];
             
              if(imgList[currImage].@details == "true"){
                  if(imgList[currImage].buttons.@hasButtons == "true"){
                      for each(var item:XML in imgList[currImage].buttons.children()){
                          var newButton:LinkButton = new LinkButton();
                          newButton.label = item.@name;
                          newButton.x = item.@posX;
                          newButton.y = item.@posY;
                          newButton.setStyle("skin", null);
                          newButton.styleName = "dynamicButtonStyle";
                          dynamicButtons.addElement(newButton);
                      }
                  }
              }
             
              definition.source = imgList[currImage].@url;
          }

      </code>

       

      i have attached a copy of the xml that i have right now to this post for reference...

       

      any help will be greatly appretiated!!! i've been stuck on this problem for the last week and my project is due soon

       

      again thank you in advance...

        • 2. Re: need help with navigation within a spark list...
          David_F57 Level 5

          Hi,

           

          With your list navigation, I think that you should avoid thinking about your sparklist but more what the actual collection contains, from what has been happening with this project it seems all your information is in a core xml document and the sparklist is used to drill down then filter the nodes needed for the 'sub' menu , that sub menu then drills down to an information menu which should contain the display links. Once you have the 'image' node and control node exposed you have everything you need to control the display of those images. The nav buttons themselves need to control a value/counter (increment-decrement and range 0-to-number of children) that keeps track of the index of the displayed image.

           

          As it stands you have a prev/next navigation buttons with states hide/show/disable. The fact that the labels are dynamic is not making the coding any more complex and my suggestion is (per the private message) is to get all your logic resolved before you consider creating a sub class or a purpose built navigation component.

           

          If you are getting confused (I am at this stage) maybe we can look at this in a live connection which allows a faster communication and avoids some of the issues of not understanding what is actually the problem.

           

          David

          • 3. Re: need help with navigation within a spark list...
            cyber0897 Level 1

            hey david... i guess i am getting a little confused...

            the only aspect left in this project is to be able to click on those dynamic buttons and the buttons being able to take me to a different part of the xml/list...

             


            and what exactly is the live connection?? if its for faster communitation... im all for it how do we go about doing that??

            • 4. Re: need help with navigation within a spark list...
              cyber0897 Level 1

              hey david... just nevermind my previous post... I was able to subclass a link button, so i now have two variables that get assigned to a link button,

               

              one is "tabId" <-- contains the information on which tab to swtich to, and the second is, "changeTo"... this contans the label name which it needs to switch to

               

              I'm just stuck on how to change my selected item in my tabNavigator/list

               

               

              the code i have right now is

               

               

                  private function customButtonPressed(event:Event):void{
                      if(event.currentTarget.tabId == "troubleShooting"){
                          for each(var item:Object in troubleShootProvider){
                              if(item.@label == event.currentTarget.changeTo){
                                 
                              }
                          }
                      }
                  }

                  private function userOptionsChange(event:IndexChangeEvent):void{
                      dynamicButtons.removeAllElements();
                     
                      navControl.source = userOptionProvider[event.newIndex].children();
                      currImage = 0;
                      imgList.source = userOptionProvider[event.newIndex].images.children();
                      definition.source = imgList[currImage].@url;
                      if(imgList[currImage].@details == "true"){
                          if(imgList[currImage].buttons.@hasButtons == "true"){
                              for each(var item:XML in imgList[currImage].buttons.children()){
                                  var newButton:customLinkButton = new customLinkButton();
                                  newButton.label = item.@name;
                                  newButton.tabId = item.@tab;
                                  newButton.changeTo = item.@changeTo;
                                  newButton.x = item.@posX;
                                  newButton.y = item.@posY;
                                  newButton.setStyle("skin", null);
                                  newButton.styleName = "dynamicButtonStyle";
                                  newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
                                  dynamicButtons.addElement(newButton);
                              }
                          }
                      }

                     
                      var isMultiPage:String = navControl[2]["multiPages"];
                      var videoPresent:String = navControl[1]["videoPresent"];
                      if(videoPresent == "true"){
                          if(isMultiPage != "true"){
                              navContainer.x = 825;
                          }
                      }
                      if(isMultiPage == "true"){
                          if(navControl[2]["next"] == "NEXT STEP"){
                              navContainer.x = 630;
                          }
                          else{
                              navContainer.x = 640;
                          }
                          next.label = navControl[2]["next"];
                          back.label = navControl[2]["back"];
                      }
                      if(currImage >= imgList.length - 1){
                          next.visible = false;
                          back.visible = false;
                      }
                      else{
                          back.visible = false;
                          next.visible = true;
                      }

                  }

               

              as you know, my xml gets divided into two saperate xmllistcollections one is the userOptionProvider, and the troubleshootingProvider

              as is in the following xml

               

              <mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0"
                                       tabWidth="137.5" creationPolicy="all" borderVisible="false">
                          <mx:VBox label="USER OPTIONS" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                              <s:List id="userOptions" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                      borderVisible="false" contentBackgroundColor="#e9e9e9"
                                      change="userOptionsChange(event)">
                                  <s:dataProvider>
                                      <s:XMLListCollection id="userOptionProvider" />
                                  </s:dataProvider>
                              </s:List>
                          </mx:VBox>
                          <mx:VBox label="TROUBLESHOOTING">
                              <s:List id="trouble" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                      borderAlpha="0" borderVisible="false" contentBackgroundColor="#e9e9e9"
                                      change="troubleShootChange(event)">
                                  <s:dataProvider>
                                      <s:XMLListCollection id="troubleShootProvider" />
                                  </s:dataProvider>
                              </s:List>
                          </mx:VBox>
                      </mx:TabNavigator>

               

               

              Im having some trouble updating my list... basically change to the troubleshooting tab, and then select the one that i need...

               

              hopefully that makes sence...

              • 5. Re: need help with navigation within a spark list...
                David_F57 Level 5

                Hi,

                 

                With the live connection we can share desktops/chat/file transfer etc between pcs so basically we are able to look at the problem dynamically. This would probably be a bit quicker than the to and fro of forum communication. I'm +10 hours  GMT (or +19 Pacific). I have pm'ed you the web address its just a matter of setting an appropriate time .

                 

                 

                David

                • 6. Re: need help with navigation within a spark list...
                  cyber0897 Level 1

                  hey david... would you be able to log on around 2:30 PM mountain time(us&canada)?