Accordion navigation pane for mobile apps

[Guest]

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.

[Gaius_Coffey]

The mx:Accordion control is not supported for mobile as mx: controls have been replaced by Spark for mobile.

You could probably build one quite simply from all the stuff available in Spark, but...

Accordion layout is not great for mobile as a _lot_ of screen area is used up (wasted) by the huge numbers of buttons. If you had four or five categories in an accordion, allowing 40 pixels for each one to make it clickable, then you have wasted 200 pixels of screen height _just_ in the heading buttons. 

I would be inclined to think up a better control and to build that rather than trying to build an Accordion.

G

[Guest]

Thank you Gaius Coffey, well that was what I had said to the project lead, but they seem to like the idea of accordian. I had actually built an accordian in C# for a web app, now they want me have it look exactly like the web app on my android device. I will try to convince them and if not, is there I can use some existing components to get the same accordian look?

Thank you again.

[Gaius_Coffey]

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]

[Guest]

Hi Gaius, thank you for that code. I was travelling so could not try it for my app. But, will try and see if that works.