Router

Role#

• The router is a singleton,
• The router is provided by Dana,
• The router provides API to move from one screen to another

Expected use#

Declare a route#

The only place where you are allowed to display a screen is in a Route.

import $AbstractAppRoutes from '@AbstractAppRoutes';
import $SplashScreen from "@SplashScreen";

/**
 * Routes exposed by the application

 * @name AppRoutes
 * @class
 * @extends AbstractAppRoutes
 * @implementation
 *
 * @routes splash
 */
export default $AbstractAppRoutes.declare("AppRoutes", {
    methods: /** @lends AppRoutes.prototype */ {
        splash: function(data){
            return $SplashScreen.display(data);
        }
    }
});

Route a screen#

The main feature of this manager is to route via the route() method.

$RouterManager.getInstance().route('home'); // Route to home

Provide parameters to the screen#

When a screen is displayed, we can give it some parameters. These parameters are often used to configure the content of the screens widgets, but they can be whatever.

These parameters are also given to all screen functions: beforeShow, show, afterShow, beforeHide, hide and afterHide.

var params = {
    params1: "value1",
    params2: "value2"
};
$RouterManager.getInstance().route('menu', params);

Route options#

We can define some options to customize displayScreen.

• childToFocus: child (widget) to focus, by default the first children will be focused !
• skipHistory: If set to true, the screen to show will not be pushed in the screen history

Get current route name#

You can get the current displayed screen by calling $RouterManager.getInstance().currentRouteName.

var router = $RouterManager.getInstance();
console.log(router.currentRouteName); // home

Route history#

The manager keeps an history of routes. It allows to go back to previous route.

var router = $RouterManager.getInstance();

console.log(router.currentRouteName); // home

router.route('details')
console.log(router.currentRouteName); // details

router.displayScreen('infos');
console.log(router.currentRouteName); // infos

router.previousScreen();
console.log(router.currentRouteName); // details

Advanced use#

History manipulation#

By default, each screen displayed is added to screen history. An important thing to know is that the screen is not added to history when it is shown, but instead when it is hidden following a new screen display. The route method offers an option to manipulate screen history: skipHistory . If set to true, the screen to show will not be pushed in the screen history when a next screen will be displayed.

Example:

// Application started with 'screen1' as first screen
// screens history is []
var router = $RouterManager.getInstance();

router.route('route1'); // screens history is [route1]

router.route('route2', { skipHistory: true }); // screens history is [route1]

router.route('route3'); // screens history is [route1, route3]

Deep link#

Deep link is supported by the framework. It allows to start an application on a specific screen. To define the id of the screen to show: http://mydomain.com/myapplication/index.html#theDeeplinkRoute. When the application starts:

• It searches for a route fragment identifier,
• If found (and if the corresponding screen exists), it triggers the corresponding route instead of the default first route Other URL parameters are considered as screen parameters:

// the url : http://mydomain.com/myapplication/index.html#myRoute?param1=27&param2=foo&param3=%7B'bar'%3A'ux'%7D will launch
$RouterManager.getInstance().route('myRoute', null, {param1: '27', param2: 'foo', param3: '{"bar":"ux"}', isDeeplink: true});