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 kind 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 (see below). 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, if you don't want to use the default one everywhere.

This is a JSON file that contains one key per view. Each value define the view : its controller and options for the different platforms.

Quick example

{
    "controllers": {
        "default": {
            "ios": "ViewController",
            "iosNib": "ViewControllerNib",
            "android": "fr.example.myapplication.MyActivity",
            "pullToRefresh" : true
    },
    "myVideoController": {
            "ios": "MyVideoViewController",
            "android": "fr.haploid.myapplication.MyVideoActivity"
        }
    }
}

options detail

Each option is described below :

• ios (mandatory for iOS apps): The name of the class to use

• iosNib (for iOs, optional): The name of the .xib file to use with the class name defined in ios'. Default is the same name as the ios

• android (mandatory for Android apps): full package name of the controller class to use.

• pullToRefresh (optional): If set to true, a pullToRefresh is added to the webview. Default is false. Read more about pull to refresh here

• infiniteScroll (optional) : If set to true, a pullToRefresh is added to the webview. Default is false. Read more about infinite scroll here

the default key

The default key allows you to specify the controller and options to use if a cobalt.navigate('push/modal') is made without specifying a controller name, or when the specified controller is not found.

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