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

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

11 thoughts on “Using the Spark NavigatorContent container with an MX Accordion container in Flex 4

    1. @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

  1. 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

    1. @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

  2. 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

  3. 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>

  4. 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

  5. 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);

Comments are closed.