Navigation [ViewStack Or Dynamically adding]| Adobe Flex Tutorials #8

Application Navigation

What is navigation actually? How we can move from one page to another one.If our application is having more than one view means more than one page then we need to move from one page to another.So we need some method to switch between pages.

If it is a simple HTML page we can use anchor tag<a> to link between pages when clicking on the link it loads the page from the server specified in the href.

But in the case of flex its actually download all the page at the beginning itself as an entire application and it will switch between different views, if our application is having more than one view.

In flex we most commonly use viewstack for navigating between pages.

Using ViewStack

ViewStack navigator container is actually a set of child containers.And child are aligne like a stack one is in top of another and at a time only one page is visible.

And by default it is not providing any method to swt=itch between pages we should use either one of the method given below

LinkBar
TabBar
ButtonBar
ToggleButtonBar

Viewstack is actually switch between different views in the application. The following is an example for understanding the viewstack .

In the example i have created three different views

Login
Login successful
Registration

From the login page when we are clicking on the register button the view will switch to Register and After the registering the view will switch to

For using Viewstack include the


<mx:ViewStack>

</mx:ViewStack >

tag in your application and specify some id for the ViewStack


<mx:ViewStack id="views">

Now what we will do is we ill create different views inside the viewstack there are different methods are there. We can use one of that, some are

NavigatorContent
Canvas
Views
…

Here i am using NavigatorContent for creating different views.Here i am using three different NavigatorContent with three different id’s

The first with id login will show the login page

the one with id successful will show the login successful view

and last one with id register_nav will load the register page of the application.

Here am giving the entire code.


<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/mx"
 width="1024" height="640">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <mx:ViewStack id="views" width="1024" height="641">
 <s:NavigatorContent id="login">
 <s:Panel width="250" height="200" horizontalCenter="0" verticalCenter="0">
 <s:TextInput id="username" x="41" y="31" width="169" prompt="Username"/>
 <s:TextInput id="password" x="41" y="74" width="169" prompt="Password"/>
 <s:Button id="loginBtn" x="90" y="109" label="Login" click="views.selectedChild=successful"/>
 <s:Label x="105" y="145" text="Register" id="log_Register" buttonMode="true" click="views.selectedChild=register_nav"/>
 </s:Panel>
 </s:NavigatorContent>
 <s:NavigatorContent id="successful">
 <s:Label text="Login Successful" horizontalCenter="0" verticalCenter="0"/>
 </s:NavigatorContent>
 <s:NavigatorContent id="register_nav">
 <s:Panel width="250" height="300" horizontalCenter="0" verticalCenter="0">
 <s:TextInput id="uname" x="41" y="37" width="169" prompt="Username"/>
 <s:TextInput id="pwd" x="41" y="149" width="169" prompt="Password"/>
 <s:TextInput x="41" y="75" width="169" prompt="Mobile Number"/>
 <s:TextInput x="41" y="114" width="169" prompt="Email"/>
 <s:Button id="Register" x="90" y="191" label="register" click="views.selectedChild=login"/>
 </s:Panel>
 </s:NavigatorContent>
 </mx:ViewStack>
 </s:WindowedApplication>

The output will look like this:
Login view:

Navigation

And the login Successful will look like this:

Dynamically adding and removing pages

In the previous method (Using ViewStack) we are actually switching between all the pages.But at every point off time our applications entire pages are active, we are only doing switching between the pages.

If we are working with some sound class or something then there is a chance for overlap and all.So, if we have a method that we can add and remove pages at run time then that is better.

Here i am sharing something like that.Here I am adding and removing the pages at run time.I am showing the same previous example .

We have three different pages, so for that am creating three different mxml components. One page for login, one for registration and one for login Successful.

And one big advantage of this method is we can reuse our code where ever we want in the application.

And from the main mxml application i am creating object for all the pages and just calling when ever i want the page.And i am removing those pages after my usage.I have defined one group with id “Container” I am adding all the pages into the same container and removing after usage.

I am creating one package under src names Components inside that i am adding the mxml components

And creating objects foe the pages

var login:Login=new Login();
var registration:Registration=new Registration();
var success:Successful=new Successful();

Here I am sharing the code.

Navigation.mxml //This is my main application page.


<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/mx"
width="100%" height="100%"
creationComplete="windowedapplication1_creationCompleteHandler(event)">

<fx:Script>
<![CDATA[

import Components.Login;
import Components.Registration;
import Components.Successful;

import mx.events.FlexEvent;

var login:Login=new Login();
var registration:Registration=new Registration();
var success:Successful=new Successful();

protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
showLogin();
this.addEventListener("ShowRegistration",ShowRegistration);
this.addEventListener("ShowSuccessful",ShowSuccessful);
this.addEventListener("ShowLogin",showLogin);
}

protected function showLogin(evt:Event=null):void
{
RemoveAll();
container.addElement(login);
}
protected function ShowRegistration(evt:Event):void
{
RemoveAll();
container.addElement(registration);
}
protected function RemoveAll(evt:Event=null):void
{
container.removeAllElements();

}
protected function ShowSuccessful(evt:Event):void
{
RemoveAll();
container.addElement(success);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group id="container" width="100%" height="100%">// my container
</s:Group>
</s:WindowedApplication>

Here the RemoveAll function will remove all the pages from the container


<s:Group 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%">

<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
dispatchEvent(new Event("ShowSuccessful",true,true));
}

protected function label1_clickHandler(event:MouseEvent):void
{
dispatchEvent(new Event("ShowRegistration",true,true));
}

]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel width="250" height="200" horizontalCenter="0" verticalCenter="-23">
<s:TextInput x="49" y="30" width="154" prompt="UserName"/>
<s:TextInput x="49" y="64" width="154" prompt="Password"/>
<s:Button x="91" y="103" label="Login" click="button1_clickHandler(event)"/>
<s:Label x="103" y="137" text="Register" buttonMode="true" click="label1_clickHandler(event)"/>
</s:Panel>
</s:Group>

Registration.mxml


<s:Group 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%">

<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
dispatchEvent(new Event("ShowLogin",true,true));
}
]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel width="250" height="279" horizontalCenter="0" verticalCenter="-43">
<s:TextInput x="44" y="35" width="164" prompt="UserName"/>
<s:TextInput x="44" y="70" width="164"/>
<s:TextInput x="44" y="105" width="164"/>
<s:TextInput x="44" y="140" width="164"/>
<s:Button x="89" y="187" label="Register" click="button1_clickHandler(event)"/>
</s:Panel>
</s:Group>

And last

Successful.mxml


<s:Group 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%">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label text="Login Successful" horizontalCenter="0" verticalCenter="0"/>
</s:Group>

And the output will be the same

Navigation

Navigation [ViewStack Or Dynamically adding]| Adobe Flex Tutorials #8

Application Navigation

Using ViewStack

Dynamically adding and removing pages

3 Ways to Use Data Binding in Flex | Adobe Flex Tutorial #7

10 Most Useful PostgreSQL Commands with Examples | Postgres Tutorials

Related Posts

Leave a Comment Cancel Reply