Feathers Extension Tabbed Application 1.4.004 : ViewNavigatorApplication
The ViewNavigatorApplication class is an application class meant to provide a simple framework for applications that employ a view-based navigation model.
A view-based navigation model is characterized by a user interface where the end user navigates between a series of full screen views in response to user interaction. This is a paradigm commonly used by mobile applications and is accomplished through the use of a built in ViewNavigator container.
It adds persitence manager and swipe views (or screens to navigate in the history of views) to feathers.controls.StackScreenNavigator.
Download project, swc, and samples on GitHub
- Home
- TabbedViewNavigatorApplication
Documentation
To compile this sample download the Feathers SDK (Manager)
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<components:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:f="library://ns.feathersui.com/mxml"
creationComplete="creationCompleteHandler()"
theme="feathers.themes.MetalWorksDesktopTheme"
xmlns:components="feathers.extensions.tabbedApplication.*"
swipeView="true"
persistNavigatorState="true"><!-- swipeNavigator="true" keyCode="left" -->
<fx:Script>
<![CDATA[
import feathers.motion.Slide;
import starling.animation.Transitions;
private function creationCompleteHandler():void
{
var data:Object = { volume: 0.8, difficulty: "hard" };
pushView(ViewA, data);
this.pushTransition = Slide.createSlideLeftTransition();
this.popTransition = Slide.createSlideRightTransition();
this.pushTransition = Slide.createSlideLeftTransition( 0.75, Transitions.EASE_IN_OUT );
}
]]>
</fx:Script>
</components:ViewNavigatorApplication>
ViewA.mxml
<?xml version="1.0" encoding="utf-8"?>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:f="library://ns.feathersui.com/mxml"
creationComplete="creationCompleteHandler()"
xmlns:components="feathers.extensions.tabbedApplication.*">
<fx:Script>
<![CDATA[
private function creationCompleteHandler():void
{
if(this.data) trace("difficulty : "+this.data.difficulty);
trace(owner.activeScreenID);
if(this.data) trace("test : "+this.data.test);
}
private function button_triggeredHandler( event:Event ):void
{
owner.pushView( ViewB );
}
private function button2_triggeredHandler( event:Event ):void
{
owner.popView();
}
private function button3_triggeredHandler( event:Event ):void
{
if(!this.data) this.data = {};
this.data.test = "test";
trace("add test : "+this.data.test);
}
]]>
</fx:Script>
<f:LayoutGroup>
<f:layout>
<f:HorizontalLayout gap="10"/>
</f:layout>
<f:Button label="Go to View B" triggered="button_triggeredHandler(event)"/>
<f:Button label="Pop view" triggered="button2_triggeredHandler(event)"/>
<f:Button label="Add "test" data" triggered="button3_triggeredHandler(event)"/>
</f:LayoutGroup>
</components:View>
ViewB.mxml
<?xml version="1.0" encoding="utf-8"?>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:f="library://ns.feathersui.com/mxml"
creationComplete="creationCompleteHandler()"
xmlns:components="feathers.extensions.tabbedApplication.*">
<fx:Script>
<![CDATA[
private function creationCompleteHandler():void
{
//
}
private function button_triggeredHandler( event:Event ):void
{
owner.pushView( ViewC );
}
private function button2_triggeredHandler( event:Event ):void
{
owner.popView();
}
]]>
</fx:Script>
<f:LayoutGroup>
<f:layout>
<f:HorizontalLayout gap="10"/>
</f:layout>
<f:Button label="Go to View C" triggered="button_triggeredHandler(event)"/>
<f:Button label="Pop view" triggered="button2_triggeredHandler(event)"/>
</f:LayoutGroup>
</components:View>
ViewC.mxml
<?xml version="1.0" encoding="utf-8"?>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:f="library://ns.feathersui.com/mxml"
creationComplete="creationCompleteHandler()"
xmlns:components="feathers.extensions.tabbedApplication.*">
<fx:Script>
<![CDATA[
private function creationCompleteHandler():void
{
//
}
private function button_triggeredHandler( event:Event ):void
{
owner.pushView( ViewA );
}
private function button2_triggeredHandler( event:Event ):void
{
owner.popView();
}
]]>
</fx:Script>
<f:LayoutGroup>
<f:layout>
<f:HorizontalLayout gap="10"/>
</f:layout>
<f:Button label="Go to View A" triggered="button_triggeredHandler(event)"/>
<f:Button label="Pop view" triggered="button2_triggeredHandler(event)"/>
</f:LayoutGroup>
</components:View>
0 comment