flex 4 viewStack page navigation – part one

This is how to organize flex 4 application with multiple pages, linking between them and some other stuff! Demo, right click to view source.

1. Create flex application.
2. Create ViewStack Component in the main mxml file with some id – mine is “mainViewstack”.

<mx:ViewStack id="mainViewstack" left="220" right="10" top="10" bottom="10">
    <s:NavigatorContent width="100%" height="100%"
            label="NavigatorContent: internal page" backgroundColor="#FF0000">
        <s:Label left="10" top="10" fontWeight="bold"
            text="NavigatorContent: internal page"/>
    </s:NavigatorContent>
</mx:ViewStack>

3. Create LinkBar Component in the main mxml file and link it to the ViewStack (this is just to easy navigate with the ViewStack).

<mx:LinkBar left="10" top="10" bottom="10" width="200" dataProvider="{mainViewstack}"
            direction="vertical">
</mx:LinkBar>


4. Create sub folder in the main folder called “subpages” or whatever you like.
5. Create subpages in the sub folder - the trick is what kind?
- Create new MXML Component.
View Stack Pages Navigation Craete MXML Component

- Based on “spark.components.NavigatorContent” - mine is named NavigatorContentTest.mxml.
View Stack Pages Navigation Craete spark.components.NavigatorContent

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    width="100%" height="100%" label="NavigatorContent: external page"
                    backgroundColor="#336600" creationComplete="testCreation()" show="testShow()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function testCreation():void {
                Alert.show("Cretion completed for NavigatorContent: external page!","Alert window");
            }
            private function testShow():void {
                Alert.show("Show done for NavigatorContent: external page!","Alert window");
            }
        ]]>
    </fx:Script>
    <s:Label left="10" top="10" color="#FFFFFF" fontWeight="bold"
             text="NavigatorContent: external page"/>
</s:NavigatorContent>

- Create one more MXML Component, this one based on “spark.components.BorderContainer” - mine is named BorderContainerTest.mxml.
ViewStackPagesNavigation Create BorderContainer

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   width="100%" height="100%" backgroundColor="#CCCCCC"
                   creationComplete="testCreation()" show="testShow()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function testCreation():void {
                Alert.show("Cretion completed for BorderContainer: external page!","Alert window");
            }
            private function testShow():void {
                Alert.show("Show done for BorderContainer: external page!","Alert window");
            }
        ]]>
    </fx:Script>
    <s:Label left="10" top="10" fontWeight="bold" text="BorderContainer: external page"/>
</s:BorderContainer>

7. Now add the newly created pages to the ViewStack Component in the main mxml file, it will become like this:

<mx:ViewStack id="mainViewstack" left="220" right="10" top="10" bottom="10">
    <s:NavigatorContent width="100%" height="100%"
            label="NavigatorContent: internal page" backgroundColor="#FF0000">
        <s:Label left="10" top="10" fontWeight="bold"
            text="NavigatorContent: internal page"/>
    </s:NavigatorContent>
    <s:NavigatorContent width="100%" height="100%" label="BorderContainer: external page">
        <subpages:BorderContainerTest/>
    </s:NavigatorContent>
    <subpages:NavigatorContentTest/>
</mx:ViewStack>

Pay attention, that flex adds xmlns:subpages=”subpages.*”, to the application tag in order to be able to “see” the “external” files.
8. The “NavigatorContentTest.mxml” page is directly inserted in the ViewStack Component in the main mxml file. The “BorderContainerTest.mxml” page is wrapped in <s:NavigatorContent></s:NavigatorContent> Component in order to be visible in the ViewStack Component in the main mxml file. So far so good, but both “external” pages behave differently on load/focus in the ViewStack Component. I have added two function with alert boxes, both are called for the “creationComplete” & “show” events on every “Content” in the ViewStack Component. Unfortunately “show” event is not executed for the “BorderContainerTest.mxml” page, wrapped in <s:NavigatorContent></s:NavigatorContent> Component and also “creationComplete” event is executed on first load/focus. Demo, right click to view source.