Navigation

Cobalt offers a navigation system based on native transitions. This allows fast and furious performances for your web apps :)

It allows the web side to push any web page and to choose in which native controller the page will be shown. A default fullscreen controller is ready with cobalt but you can create your own, and start to mix web and native components on the same view.

Using navigation on the web side

cobalt.navigate(action, page, controller)

This function allows you to do different kinds of navigation actions.

• action : you can choose between "push", "pop", "modal" and "dismiss" for the action parameter.

• page is the html page you want to load from the root web folder. This parameter is required for the "push" and "modal" types.

• controller is the name of the view you want to load. This view should be defined in the cobalt.conf file. This parameter is useful for the "push" and "modal" types but not required.

• animated : Define if the page transition should be animated or not. Used for "replace" action only. Default to True.

push

With this action, cobalt will push the page you want. On Android, a new Activity is started. On iOS, the new view slides-in from the right of the screen.

pop

With this action, the current view is closed and Cobalt comes back to the latest page in the current navigation. On iOS, there is a slide back transition and on Android, the activity is closed.

Optionally, pop can take the same 'page' and 'controller' parameters than a push. In this case, Cobalt will try to pop to the last occurrence of view using this combinaison in the navigation history.

modal

With this action, a new navigation is started from this point. You can choose a page and a controller, and push some other pages in it.

This uses the real "modal" component on iOS and fakes it on Android.

modal and dismiss are only available on iOS and Android

dismiss

When a cobalt.navigate('dismiss') is called in a page that has been opened with a cobalt.navigate('modal',...), the user will be driven back to the page that opens the modal on first time.

On iOS, the modal is closed. On Android, localStorage is used to store the latest controller and page options before the cobalt.navigate('modal',...). This controller is found back when the cobalt.navigate('dismiss') is called or recreated.

There is a discussion on the bug tracker about whether the modal/dismiss feature should be removed or not.

modal and dismiss are only available on iOS and Android

replace

With this action, cobalt will replace the current page with the page you want without changing the app history. The whole Activity or controller is replaced with no animation. You can use this for examples for a multiple steps form, an ad, or a side-menu implementation.

Examples

Some navigate examples :

//push user_list.html in a default controller
cobalt.navigate("push","user_list.html")
//pop the current page
cobalt.navigate("pop")
//push user_list.html in MyCustomControllerName controller (should be defined in cobalt.conf)
cobalt.navigate("push","user_list.html","MyCustomControllerName")
//open user_options.html in a modal in the  XYZController controller (should be defined in cobalt.conf)

cobalt.navigate("modal","user_options.html","XYZController")
//close the current modal
cobalt.navigate("dismiss")

//new in 0.3
//pop to a previous one
cobalt.navigate("pop", "previous.html", "myPreviousController")
//replace current page with another
cobalt.navigate("replace","user_list.html","MyCustomControllerName")

The cobalt.conf file

This file is required to specify the views of a cobalt application. It's a JSON file that contains one key per view.

The shortest version of this file is something like that :

{
    "controllers": {
        "default": {
            "ios": "ViewController",
            "android": ".MyActivity",
        }
    }
}

See the cobalt.conf documentation for further details.

Under the hood

These are the messages sent to the native side for each navigation type:

{ "type":"navigation", "action":"push", data : { page :"index.html", controller: "myController" }
{ "type":"navigation", "action":"pop" }
{ "type":"navigation", "action":"modal", data : { page :"index.html", controller: "myController" }
{ "type":"navigation", "action":"dismiss" }