8 Replies Latest reply on Dec 11, 2009 4:13 PM by cyber0897

    can you manually set the selectedItem for the spark list component?

    cyber0897 Level 1

      hey guys... so i have a small problem... i have a spark list which is populated by an xml, and basically when you click one of the list items, it will display the image that goes along with that list item, or a set of images...

       

      now each image also has multiple buttons, and when you click on these buttons it needs to basically switch to another list item...

       

      for example... on page 1 i have a button that says click here to go to page 4... and when you do.. it switches to that page and displays all the associated buttons on that page 4

       

       

      a sample of my xml is as follows:

       

                <item label="Arm/Disarm System">
                      <images>
                          <img url="modules/apx32/images/APX32-armDisarm_01.png" details="true">
                              <buttons hasButtons="true">
                                  <button name="CLICK HERE"  posX="513" posY="253" />
                              </buttons>
                          </img>
                          <img url="modules/apx32/images/APX32-armDisarm_02.png" details="false">
                          </img>
                          <img url="modules/apx32/images/APX32-armDisarm_03.png" details="true">
                              <buttons hasButtons="true">
                                  <button name="CLICK HERE" posX="530" posY="170" />
                              </buttons>
                          </img>
                          <img url="modules/apx32/images/APX32-armDisarm_04.png" details="true">
                              <buttons hasButtons="true">
                                  <button name="CLICK HERE" posX="510" posY="152" />
                              </buttons>
                          </img>
                      </images>
                         <video>
                             <videoPresent>true</videoPresent>
                             <img url="" />
                         </video>
                         <navButtons>
                             <multiPages>true</multiPages>
                             <next>"MORE OPTIONS"</next>
                             <back>"BACK"</back>
                         </navButtons>
                  </item>

       

       

       

      The following is the code that will change the image displayed along with the buttons necessary for that  image

       

       

      definition is the image tag id...

       

       

          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";
                          dynamicButtons.addElement(newButton);
                      }
                  }
              }


               if(currImage >= imgList.length - 1){
                      next.visible = false;
                      back.visible = false;
               }
              else{
                  back.visible = false;
                  next.visible = true;
              }

       

          }

       

       

       

      thanks a lot any help is greatly appretiated!

        • 1. Re: can you manually set the selectedItem for the spark list component?
          Flex harUI Adobe Employee

          I’m not sure I understand.  There is a selectedItem for Spark List

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: can you manually set the selectedItem for the spark list component?
            cyber0897 Level 1

            hey alex, well i was thinking that there would be a way i could just set the selectedItems in the spark list after searching through my xmllistcollection for the correct index to switch to... but unfortunately, i am unable to search through my xmllistcollection or get the index of the listItem i want to switch to..

             

             

            basically my application will populate the list items

            automatically from the xmllistcollection... and i use that xmllistcollection later to display my images on the right of that list...

            now some items have extra buttons and these buttons when clicked need to go to another list item...

             

             

            if you have any ideas on how to do this.. i would really really appretiate it! im at a point where im about to switch my entire approach and have everything made staticly through a view stack lol

            • 3. Re: can you manually set the selectedItem for the spark list component?
              Flex harUI Adobe Employee

              What are you looking for in the XML and what code are you using to do it?

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: can you manually set the selectedItem for the spark list component?
                cyber0897 Level 1

                well.. instead of including the code one by one and have it display very tacky... i'll just e-mail you the project.. hope that is ok.. i just odnt want to attach the project to a public thread...

                 

                 

                but u know how my xml is setup.. since i based it mostly off of the one you showed me earlier..

                 

                im not sure if im doing this the right way.. or if im over thinking it.. but basically in the xml i included the following line

                 

                 

                <item label="Arm/Disarm System">
                                <images>
                                    <img url="modules/apx32/images/APX32-armDisarm_01.png" details="true">
                                        <buttons hasButtons="true">
                //<--------------------------------------
                                            <button name="CLICK HERE" changeTo="Open/Fault"  posX="513" posY="253" />     //<--------------------------------------
                                        </buttons>
                                    </img>

                the line between the arrows...

                 

                what i do is when im displaying the present xml i do the following

                 

                        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);
                                }
                            }
                        }

                 

                here as you can see... if the details attribute is set to true i loop through my buttons tag and create each button dynamically...

                 

                now, i set the eventlistener to that button and basically when i click on that button, i need the list to switch to another item in the xml/list

                 

                the name of this item i include in the xml... where i set the "changeTo" attribute... it needs to change to that attribute...

                 

                the entire project is in your e-mail... hope you dont mind..

                 

                and thank you soo much alex! you have been supremely helpful in helping me understand flex!

                • 5. Re: can you manually set the selectedItem for the spark list component?
                  cyber0897 Level 1

                  crap! ... i dont see a attach file button in the private messages... lol is there any other way to send you that file??

                  • 6. Re: can you manually set the selectedItem for the spark list component?
                    Flex harUI Adobe Employee

                    I don't want a whole project. 

                     

                    If you have an xmllistcollection of items, you can simply scan the list for an item that matches that label.

                     

                    For (i = 0; i < imglist.length; i++)

                         If (imglist[i].@label.toString() == "Open/Fault")

                              sparkList.selectedItem = imglist[i];

                     

                     

                    I would subclass LinkButton so you could add a changeTo property on each button.  It will make it easier to determine what the search string should be when the button is clicked.

                     

                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.

                    Blog: http://blogs.adobe.com/aharui

                    • 7. Re: can you manually set the selectedItem for the spark list component?
                      cyber0897 Level 1

                      lol that is soo easy! haha imona try that right now lol ... my brain is just not working today...

                       

                       

                      how do you subclass a linkbutton?? because that sounds like exactly what i need... im going to have a changeTo attribute associated with every dynamically created button... and sometimes in one image i have multiple dynamic buttons.. so i need a way to differentiate on which button is pressed... lol thats where im stuck...

                      • 8. Re: can you manually set the selectedItem for the spark list component?
                        cyber0897 Level 1

                        actuallly you know what!.. if you go to this link...

                        https://www.apxalarm.com/support/tech/troubleshooting

                         

                        that is exactly what im trying to create... except the useroptions and troubleshooting are in a tabcontainer...

                         


                        any suggestions???