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 folded. 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.

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.

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

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")

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": "fr.example.myapplication.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" }