Flex: Changing components

Question

Hi I want to create a flex web page. Basically I have some menubaritems at the top and when I click at one of the dropdowns from the menubar, the component would change to a page with different content.

How do I go about this?

Thanks.

Answer 1

Sounds to me like the exact component you're after is the TabNavigator (Adobe docs).

It's fairly simple to use. Each child of the the TabNavigator component represents a tab page of content (note that children must be containers such as Canvas or VBox), and the label property of the child is used to represent the label on the tab itself.

A very simple web site using tabs might look something like:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="100%" height="100%" pageTitle="My Website" />
    <mx:TabNavigator width="100%" height="100%">
        <mx:VBox width="100%" height="100%" label="Standard Page">
            <mx:Label text="Standard Page Title" fontWeight="bold"/>
            <mx:Text  width="100%" height="100%"
                text="Here is some page content." />
        </mx:VBox>

        <mx:VBox width="100%" height="100%" label="Image Gallery">
            <mx:Label text="Image Gallery Title" fontWeight="bold" />
            <mx:TileList width="100%" height="100%">
                <mx:Image source="my_image1.png" />
                <mx:Image source="my_image2.png" />
                <mx:Image source="my_image3.png" />
                <mx:Image source="my_image4.png" />
            </mx:TileList>
        </mx:VBox>
    </mx:TabNavigator>
</mx:Application>

You can stack as many child container components within the TabNavigator as you like, and their contents will (by default) only be loaded when you select the relevant tab.

If you can be a little more specific about what you're trying to build, there's probably a few more tricks for you out there too. Hopefully this gives you a start though.

EDIT: Okay, if you're using dropdown menus instead, it's the same concept but a little more manual labour is involved.

The TabNavigator component uses a ViewStack component (Adobe docs), which is basically a stack of content pages where only one is shown at a time (determined by the stack's selectedIndex property), with a TabBar component to control the selected index. What you want to do is still use that same ViewStack to hold all your pages, but you want a dropdown menu item selection to change the selectedIndex for you.

A MenuBar component (Adobe docs) provides the dropdown items, generated from an XMLListCollection data provider. To handle item selections, set an itemClick event handler to the MenuBar, and set the ViewStack's selectedIndex property based on which menu item was selected.

Something like this should give you a start, and hopefully the comments help explain it. From there you can add pages, MenuBar items, etc.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;

            /**
             * Handle the selection of a menu item.
             */
            private function menuItemClickHandler(event:MenuEvent):void
            {
                // Get the submenuitem node that was clicked
                var selection:XML = XML(event.item);
                // Depending on the label of the item that was clicked,
                // modify the selectedIndex property of the content ViewStack
                switch([email protected]())
                {
                case "Page 1":
                    pageStack.selectedIndex = 0;
                    break;

                case "Page 2":
                    pageStack.selectedIndex = 1;
                    break
                }
            }
        ]]>
    </mx:Script>

    <!-- Data provider collection for the menu bar -->
    <mx:XMLListCollection id="menuXLC">
        <mx:source>
            <mx:XMLList>
                <menuitem label="Content">
                    <submenuitem label="Page 1" />
                    <submenuitem label="Page 2" />
                </menuitem>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <!-- MenuBar to provide dropdown items -->
    <mx:MenuBar dataProvider="{menuXLC}" width="100%"
        labelField="@label"
        itemClick="menuItemClickHandler(event)" />

    <!-- ViewStack containing the various content pages -->
    <mx:ViewStack id="pageStack" width="100%" height="100%">
        <!-- Each of these child components represents a separate page of content.
             You should really define them in separate components. -->
        <mx:VBox id="contentPageOne" label="First Page" width="100%" height="100%">
            <mx:Label text="First Page Title" />
            <mx:Text text="First Page content." />
        </mx:VBox>

        <mx:VBox id="contentPageTwo" label="Second Page" width="100%" height="100%">
            <mx:Label text="Second Page Title" />
            <mx:Text text="Second Page content." />
        </mx:VBox>
    </mx:ViewStack>
</mx:Application>