Extends vs.fx.Controller.

The vs.fx.NavigationController class implements a controller for navigating on hierarchical contents.

The controller shows a first view (the initialComponent) and allows to navigate from this first view to a second view and a third ... and back to the previous one til the first view.

The next picture shows a example of hierarchical contents navigation.

                 
               
  ⎡ˉˉˉˉˉˉ⎤    ⎡ˉˉˉˉˉˉ⎤   ⎡ˉˉˉˉˉˉ⎤
  ⎟      ⎢__> ⎢      ⎢__>⎟      ⎢ 
  ⎟  (1) ⎢    ⎢  (2) ⎢   ⎟  (3) ⎢
  ⎟      ⎢<__ ⎢      ⎢<__⎟      ⎢
  ⎣______⎦    ⎣______⎦   ⎣______⎦
       | |   
       | |    ⎡ˉˉˉˉˉˉ⎤   ⎡ˉˉˉˉˉˉ⎤
       | ⎣__>⎢      ⎢-->⎟      ⎢
       | |    ⎢  (4) ⎢   ⎟  (5) ⎢ 
       | |<___⎢      ⎢<__⎟      ⎢
       |      ⎣______⎦   ⎣______
       |            |   
       |            |    ⎡ˉˉˉˉˉˉ⎤
       |            ⎣__>⎢      ⎢
       |            |    ⎢  (6) ⎢
       |            |<___⎢      ⎢
       |                 ⎣______⎦
       |   
       |    ⎡ˉˉˉˉˉˉ⎤
       ⎣__>⎢      ⎢
       |    ⎢  (7) ⎢
       |<___⎢      ⎢
            ⎣______⎦


 (1, ... ,7) : component's views managed by the SliderLayer

 

The controller can manage a navigation bar during the user navigates. For instance it can hides or shows components (button, label, ...) and/or reconfigurate them. (for instance change the text value of a label.

Example:

 this.controller = new vs.fx.NavigationController (this, this.navBar);
 this.controller.init ();
 
 // 1.1 put the first view into the controller
 this.controller.push (this.firstView);
 // 1.2 configure the navigation bar for the first view (nothing)
 this.controller.configureNavigationBarState (this.firstView.id, []);
 // 1.3 finally configure the first view as the initial component
 this.controller.initialComponent = this.firstView.id;
 
 var backId = this.navBar.backButton.id;
 var titleId = this.navBar.title.id;

 // 2.1 set the second view, with parameters
 var id = this.controller.push ('PanelOne', {position: [0, 44]});
 // 2.2 configure the navigation bar to show the back button, the title
 //  and set the text title
 this.controller.configureNavigationBarState
   (id, [{comp: backId}, 
         {comp: titleId, properties: {text: 'Panel One'}}]);    
 // 2.3 configure the transition between the first and second view
 this.controller.configureTransition (this.firstView.id, id, 'goToOne');
 
 // 3 set the third view
 id = this.controller.push ('PanelTwo', {position: [0, 44]});
 this.controller.configureNavigationBarState
   (id, [{comp: backId}, 
         {comp: titleId, properties: {text: 'Panel Two'}}]);    
 this.controller.configureTransition (this.firstView.id, id, 'goToTwo');
 
 // 3 set the last view
 id = this.controller.push ('PanelThree', {position: [0, 44]});
 this.controller.configureNavigationBarState
   (id, [{comp: backId}, 
         {comp: titleId, properties: {text: 'Panel Three'}}]);    
 this.controller.configureTransition (this.firstView.id, id, 'goToThree');

 

Class Summary

Constructor Attributes	Constructor Name and Description
	vs.fx.NavigationController(owner, extension, animationType) The vs.fx.NavigationController class implements a controller for navigating on hierarchical contents.

Field Summary

Field Attributes	Field Name and Description
<static>	vs.fx.NavigationController.CARD_ANIMATION There is card animation during transition between two views.
<static>	vs.fx.NavigationController.DEFAULT_ANIMATION Select the default animation configuration (Slide animations)
	initialComponent Define the initiale component Generate a exception if the component was not already registered
<static>	vs.fx.NavigationController.NO_ANIMATION There is no animation during transition between two views.
<static>	vs.fx.NavigationController.SLIDE_ANIMATION There is slide animation during transition between two views.
	viewSize Getter|Setter for view size.

Fields borrowed from class vs.fx.Controller:

delegate

Fields borrowed from class vs.core.Object:

getOwnPropertyDescriptor, getPropertyDescriptor, id, propagateChange

Method Summary

Method Attributes	Method Name and Description
	configureNavigationBarState(state, configurations)
	configureTransition(from, to, on, output, anim) Add a new transition from the state "from" to the state "to".
	push(comp, config, bindings) Add the a child component to the Navigation Controller The component must be a graphic component (vs.ui.View).
	setNavigationBar(navBar) Defines the Navigation Bar

Methods borrowed from class vs.fx.Controller:

addTransition, clear, componentBind, getCurrentState, isStateExit, remove

Methods borrowed from class vs.core.EventSource:

bind, clone, nodeBind, nodeUnbind, propagate, unbind

Methods borrowed from class vs.core.Object:

configure, getProperties, init, parseJSON, propertyChange, toJSON

---

---

---

---

---

Parameters:

{String} state

The state (component id)

{Array} configurations

configuration parameters Structure have to follow : [{comp: vs.core.Object|String, properties:{prop_name: value}}

---

Parameters:

{string} from

State from

{string} to

State to

{string} on

input lexem which cause the crossing of transition

{string} output

optional ouput lexem that will be produce by the transition

{string} anim

optional animation name

---

 var myComp = new MyComp (conf);
 myComp.controller = new vs.fx.NavigationController (myComp);

 // push a component name (the component will be instanciated when needs)
 myComp.controller.push ('AComponent1', {id: 'comp1'});

 // instanciate a component and push it 
 var comp2 = myComp.createAndAddComponent ('AComponent1', {id: 'comp2'});
 myComp.controller.push (comp2);

 // create a button object and push it
 var comp3 = new vs.ui.Button ({id: 'comp3', text: 'hello'});
 myComp.controller.push (comp3);
 myComp.controller.initComponent = comp2.id;

Parameters:

{String | vs.ui.View} comp

The GUI component name to instanciate or the instance of the component

{Object} config

Configuration structure need to build the component [optional]

{Array} bindings

Bindings configuration [[spec, observer, method], ...]

---

Parameters:

{vs.ui.NavigationBar} navBar

the ab bar

---