Using the Spark NavigatorContent container with an MX Accordion container in Flex 4

By Peter deHaan On October 10, 2009 · 11 Comments

The following example shows how you can display content in a Spark NavigatorContent container in a Halo/MX Accordion container in Flex 4.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/10/using-the-spark-navigatorcontent-container-with-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_NavigatorContent_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:Accordion id="acc"
            left="20" right="20" top="20" bottom="20">
        <s:NavigatorContent id="nav1"
                label="Red"
                backgroundColor="red"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
        <s:NavigatorContent id="nav2"
                label="Orange"
                backgroundColor="haloOrange"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
        <s:NavigatorContent id="nav3"
                label="Yellow"
                backgroundColor="yellow"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
        <s:NavigatorContent id="nav4"
                label="Green"
                backgroundColor="haloGreen"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
        <s:NavigatorContent id="nav5"
                label="Blue"
                backgroundColor="haloBlue"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript-friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/10/using-the-spark-navigatorcontent-container-with-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_NavigatorContent_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.containers.Accordion;
            import spark.components.Label;
            import spark.components.NavigatorContent;
 
            private var acc:Accordion;
            private var nav1:NavigatorContent;
            private var nav2:NavigatorContent;
            private var nav3:NavigatorContent;
            private var nav4:NavigatorContent;
            private var nav5:NavigatorContent;
 
            private function init():void {
                nav1 = new NavigatorContent();
                nav1.label = "Red";
                nav1.setStyle("backgroundColor", "red");
                nav1.percentWidth = nav1.percentHeight = 100;
                nav1.addElement(createLabel());
 
                nav2 = new NavigatorContent();
                nav2.label = "Orange";
                nav2.setStyle("backgroundColor", "haloOrange");
                nav2.percentWidth = nav2.percentHeight = 100;
                nav2.addElement(createLabel());
 
                nav3 = new NavigatorContent();
                nav3.label = "Yellow";
                nav3.setStyle("backgroundColor", "yellow");
                nav3.percentWidth = nav3.percentHeight = 100;
                nav3.addElement(createLabel());
 
                nav4 = new NavigatorContent();
                nav4.label = "Green";
                nav4.setStyle("backgroundColor", "haloGreen");
                nav4.percentWidth = nav4.percentHeight = 100;
                nav4.addElement(createLabel());
 
                nav5 = new NavigatorContent();
                nav5.label = "Blue";
                nav5.setStyle("backgroundColor", "haloBlue");
                nav5.percentWidth = nav5.percentHeight = 100;
                nav5.addElement(createLabel());
 
                acc = new Accordion();
                acc.left = acc.right = acc.top = acc.bottom = 20;
                acc.addElement(nav1);
                acc.addElement(nav2);
                acc.addElement(nav3);
                acc.addElement(nav4);
                acc.addElement(nav5);
                addElement(acc);
            }
 
            private function createLabel(str:String = "The quick brown fox jumps over the lazy dog"):Label {
                var lbl:Label = new Label();
                lbl.text = str;
                return lbl;
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Tagged with: Gumbo

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

11 Responses to Using the Spark NavigatorContent container with an MX Accordion container in Flex 4

DBird says:

October 10, 2009 at 1:41 pm

Would be crazy cool to see an example of your coder here.

Greez,
DBird

Reply
- Peter deHaan says:
  
  October 10, 2009 at 6:44 pm
  
  @DBird,
  
  The example would look exactly the same as a Halo Accordion control. There is no visual difference between the Halo Accordion+Halo VBox container and/or a Halo Accordion+Spark NavigatorContent container.
  
  But feel free to copy this into a copy of Flash Builder 4 beta and experience the crazy cool for yourself.
  
  Peter
  
  Reply
  - Peter deHaan says:
    
    October 12, 2009 at 7:44 am
    
    SWF added.
Anonymous says:

November 5, 2009 at 9:38 am

Hello Peter,

I’m a bit confused.
In the Flex 4 language reference in the Accordion class there is a following note:
“Note: The direct children of a Halo navigator container must be Halo containers, either Halo layout or Halo navigator containers. You cannot directly nest a control or a Spark container within a navigator; they must be children of a child Halo container.”
Your example, DOES nest Spark components as direct children. And it works just fine. Am I missing something?

thanks,
Igor Borodin

Reply
- Peter deHaan says:
  
  November 5, 2009 at 2:44 pm
  
  @Igor Borodin,
  
  The documentation is probably just a little out of sync with the latest API and controls/containers. The Spark NavigatorContent container was added for this very purpose (from what I understand).
  
  I’ll follow up with the documentation team and get some clarification.
  
  Thanks,
  Peter
  
  Reply
  - Peter deHaan says:
    
    November 5, 2009 at 2:49 pm
    
    http://bugs.adobe.com/jira/browse/FLEXDOCS-1102
Jaffer says:

December 4, 2009 at 8:28 am

Hi There,

I am a newby to Flex applications. Here is what I am trying to do. I am using hasseg vertical tab navigator to create a user interface.

My plan is to have the contents of each tab as a separate mxml component.

This bit goes in the main application mxml:

letterwriters: is the mxml component wrapped inside .

This is the error that I am getting: ” Halo Navigators require Halo container based children”

If you could help me how to reference this component properly it would be great.

Cheers,
Jaffer

Reply
Jaffer says:

December 4, 2009 at 8:30 am

Oops! Didnt realize the editor was so bad.

This bit goes in the main application mxml:

<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/halo”
xmlns:hassegContainers=”org.hasseg.containers.*”
xmlns:components=”components.*”
xmlns:flmcg=”services.flmcg.*”
creationComplete=”initApp()”
closing=”endApp()”
showStatusBar=”true”
xmlns:views=”com.views.*”
status=”{gStatusText}”
backgroundColor=”#E5E7F4″
currentState=”PreLogon” viewSourceURL=”srcview/index.html”>

<hassegContainers:VerticalTabNavigator

width=”100%” height=”100%”
tabBarLocation=”left”
verticalAlign=”bottom”
paddingRight=”10″
showEffect=”fade” hideEffect=”fade”
baseColor=”{cPanelColour}” >

<views:letterwriters label=”LetterWriter” width=”100%” height=”100%”>

</hassegContainers:VerticalTabNavigator>

Reply
Jaffer says:

December 4, 2009 at 8:32 am

letterwriters: is the mxml component wrapped inside <s:group> at the moment

Reply
GClavell says:

February 1, 2011 at 7:51 am

I was trying the code below and does not work for me .. any suggestion??
var currentRenderer:ParentFieldRenderer; for each(var field:FieldDescriptor in array) { currentRenderer = new ParentFieldRenderer(); currentRenderer.field = field; accordion.addElement(currentRenderer); } //accordion.invalidateProperties(); //accordion.invalidateDisplayList();
Where ParentFieldRenderer extends NavigatorContent in order to add it a field called ‘field’ which has the data to be rendered.
What I get is an Accordion filled with nothing ..
I tried also accordion.invalidateProperties() and accordion.invalidateDisplayList() … and results were the same.
Any suggestion, example, link , help?? ;)
thx

Reply
HubertHG says:

September 21, 2011 at 4:21 pm

I have a problem adding a Spark DataGrid in a Navigator Content created programmatically. It don’t displayed.
I can see, DataGrid was added ’cause in the elements of the Navigator was incremented.
Code:
var nc:* = myAcc.selectedChild;
var nav:NavigatorContent = nc;
nav.addElement(dg);

Reply