secondary views

Anatomy of a Cordova application navigation system (part IV): the secondary views

Secondary views, the subject of this fourth part of the article dedicated to a navigation system for a Cordova application, are not actually strictly related to the navigation system. I realized too late that secondary views would have deserved a new specific article for them only. But since in the first part of the article I had promised to tell you about them, well, I want to keep my promise. And after all, users must be able to navigate to secondary views as well, so, even if our top bar is not directly involved, we’ll see that our sidebar menu will be šŸ™‚

The underlying logic

As I said, secondary views will allow us to open a lot of “pages” to perform specific tasks: view a large picture, fill out a form, read product’s details. Usually, we can open any of these secondary views using a menu item or tapping a button in one of the main pages or even tapping a button in anotherĀ secondary view. So, we can definitely have several secondary views already opened at a given time and we can expect that we can go back to the previous opened view just swiping to the left, or tapping a specific back button and obviously using our phone’s back button.

This is not automatically managed by Cordova, so we have to manually write the code to manage secondary views and the navigation between them. In order to do hat we’ll build a simple array where we’re gonig to store the opened secondary views. In addition we’ll create two functions to enter and to leave secondary views: enterSecondaryView() andĀ exitSecondaryView(). The former has several tasks to perform:

  • it will set the animation used to enter the secondary view
  • it will add the id of the secondary view to the array secondaryViews[]
  • finally it will optionally perform some specific action (tipically, load some data from the database)

The exitSecondaryView() will perform the analogue actions to manage the exit process:

  • it will set the animation appropriately
  • it will remove the view’s id from the secondaryViews[] array
  • it will optionally perform any action we need exiting the specific secondary view

That said about the logic, in the markup we’ll create specific divs (as many as we need for our application) giving them the “secondary-view” class. As we’ll see, the related css is very simple. Go on with some code.

The HTML markup

The basic html markup for a secondary view is really simple:

As you can see, nothing special here: we create our div and immediately after we put a second div to host a header where we place a menu with a unique button, the back-button which will allow us to exit the view. Then the page wrapper will host a page title and the content wrapper. Obviously, this is just the basic structure: you can add more buttons in the secondary view header.

So let’s add some other secondary view and some fake content. The secondary view section of our html file will be like this:

Now we have something to play with šŸ™‚

The styles

For the basic layout described above, the styles are quite simple:

In order to minimize our style rules, we have to slightly change what we did to design our top bar. In that part of the article we had put all rules for the top bar menu under the #cfx-topbar-menu id. Now we have to use several of those rules even for our secondary views’ headers, so let’s add to our list #cfx-topbar-menu the new class .cfx-menu. Then in our stylesheet, replace the following rules:

with the following ones

In addition we have to change the rule


Finally, let’s add a rule specific to the back icon:

This way, we can use the cfx-menu class even for the secondary view’s headers without duplicating css rules.

If you want to see the result, just comment out the display property in the .secondary-view rule in order to let it visible, connect your phone and run the app. You should see something like this

The secondary view
The secondary view

The javascript

Finally we can look at something interesting. Javascript code will allow us to enter a secondary view, to exit it, to animate the way we enter and exit and to use the phone hard back button to navigate back through opened secondary views exting them in sequence.

Here the functions to enter secondary views:

Let’s see these functions one by one.

First of all we create the secondaryViews array. Then we create a variable to make visible to all required methods the id of the secondary view we want to enter: activeView.

The enterSecondaryView() method accepts only one parameter, the id of the secondary view we want to enter to.

The first thing this method does is to assign the value of its parameterĀ id to the variableĀ activeView. Then it creates the variable “animation” and sets its value to “slideInLeft”. If you want to change the animation style, this is a good place to do it (to see the available options take a look at he file css/animate.css). We could also prepare a specific function to set different animation accordingly to the specific secondary view we are entering, but I let this to you: here we’ll keep things simple.

Once the animation is set, the method calls the processSecondaryViewsArrayOnEnter() function: okay, the name is really ridicously long, but it is clear what this function does, isn’t it? Jump to the method implementation and you’ll see the code: if the secondary view we want to enter is not already in the array secondaryViews, its id is added to the array. This way, we can keep track of the views the user opens and of their exact sequence.

Then we have the option to perform some “entry action” (tipically to load some data from a database) in order to fill our view with some dynamic content.

Finally, the animation is managed in a way similar to the one we have used for our side menu; we also reset the variable activeView to an empty value.

Below you find the code for the process inverse which will exit the current active view.

To see it in action we just have to add some event handler to our side menu:

Done! This way we are able to open secondary views both from the side menu and from a link we have placed in the view_b. Run the app and enjoy!

Swipe to exit a secondary view

If we want our users be able to exit secondary views just swiping, we just need to add a few line of code to attach swipe event handler to our secondary views:

Easy, isn’t it?

The phone back button

The last touch is to slightly change he code of the method onBackKeyDown() in order to be able to use it even to navigate back through opened secondary views. First, we need to chek if some secondary view is currently opened: if not, the code to manage the carousel views and the exiting app will be executed; otherwise, we just have to get the currently active secondary view and call the method exitSecondaryView() passing the correct parameter.

That’s all folks! If you have some comment, criticism or suggestions, I’ll be happy to hear you.

On to the next šŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *