Accordion navigation pane for mobile apps

Question

Hey,
       Is there a way to create an accordion pane in a android mobile app using Flash Builder? I know you could do it flash web pages. But, for mobile app, I am not sure. I apologize if this is a stupid or redundant question.
Any direction is greatly appreciated.

Answer 1

I was thinking about this, for no reason other than I was meant to be doing something else.
My initial idea was that you could probably achieve something that would give you reasonable flexibility in an accordion like control by creating a custom item renderer for an s:List. EG: Override public function set selected(b:Boolean):void; in the item renderer to add the display clip when selected and remove it when deselected. You could then supply your item elements as an IList with an Array of IVisualElement as its source. I knocked up a quick test and bar resizing the renderer (which I would need to think about a bit) it worked pretty effectively.
Then, although it is a bit less elegant, it occurred to me you could use a simple s:VGroup swapping the relevant child elements in and out of the display list based on clicks on the label buttons.
[code]
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" xmlns:accordion="accordion.*">
          <fx:Script>
                    <![CDATA[
                              import mx.core.IVisualElement;
                              protected function setClipIndex(selectThis:int):void
                                        for(var i:int=0;i<listOfClips.length;i++) {
                                                  var ive:IVisualElement = listOfClips.getItemAt(i) as IVisualElement;
                                                  if(i==selectThis) {
                                                            if(!accordionVG.containsElement(ive)) {
                                                                      // Add at item position plus one to allow for the button
                                                                      accordionVG.addElementAt(ive,i+1);
                                                  } else {
                                                            if(accordionVG.containsElement(ive)) accordionVG.removeElement(ive);
                    ]]>
          </fx:Script>
          <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                    <s:ArrayCollection id="listOfClips">
                              <fx:Array>
                                        <s:Scroller width="100%" height="100%" toolTip="A group..." id="defaultGroup" >
                                                  <s:VGroup >
                                                            <s:Button /><s:Label text="Some text in some buttons..." /><s:Button />
                                                            <s:Button /><s:Label text="Some text in some buttons..." /><s:Button />
                                                            <s:Button /><s:Label text="Some text in some buttons..." /><s:Button />
                                                            <s:Button /><s:Label text="Some text in some buttons..." /><s:Button />
                                                  </s:VGroup>
                                        </s:Scroller>
                                        <s:Scroller width="100%" height="100%" toolTip="A different group..." >
                                                  <s:VGroup width="{width}">
                                                            <s:Button />
                                                            <s:Label text="Different text in some other buttons..." />
                                                            <s:Button />
                                                  </s:VGroup>
                                        </s:Scroller>
                                        <s:Scroller width="100%" height="100%" toolTip="Yet another group..." >
                                                  <s:VGroup width="{width}">
                                                            <s:Button />
                                                            <s:Label text="Some other stuff..." />
                                                            <s:Button />
                                                  </s:VGroup>
                                        </s:Scroller>
                              </fx:Array>
                    </s:ArrayCollection>
          </fx:Declarations>
          <s:VGroup id="accordionVG" top="0" left="0" right="0" bottom="0" creationComplete="setClipIndex(0)">
                    <s:Button width="100%" label="{listOfClips.getItemAt(0).toolTip}" click="setClipIndex(0)" />
                    <s:Button width="100%" label="{listOfClips.getItemAt(1).toolTip}" click="setClipIndex(1)" />
                    <s:Button width="100%" label="{listOfClips.getItemAt(2).toolTip}" click="setClipIndex(2)" />
          </s:VGroup>
</s:View>
[/code]