Press "Enter" to skip to content

Anatomy of a Cordova application navigation system (part II): the top navigation bar

codingfix 0

In this second part of the tutorial about the navigation system in a Cordova mobile application we’ll se how to create a fixed top bar which will allow our users an alternative way to navigate between main views.

First of all we have to install material icons by Google. They are great icons to use in a mobile app and we’ll use them to build our top bar. Open your CLI in your project directory and type the following command:

You can find some alternative ways to install material icons here.

This command will create a new directory calledĀ material-desiogn-icons in swipingPages/node-modules directory: use your file manager and look for the iconfont folder, then copy it in your project css folder. Finally, put a link to the file material-icons.css in your index.html:

Now that we have material icons in place we can start with the markup of our top navigation.

The navigation top bar

Tha basicĀ  structure

Since we want to make our top bar fixed, we put its markup directly in the body, jus above the Bootstrap carousel. Let’s take a look at the markup:

Now let’s go with the CSS.

tm_en_970x90

We want our navigation top bar be always visible so we set its position property to fixed:

In addition, we set our material icons to a bigger size than the default one of 24px.

Now we have to manage the <ul> element which actually manages our navigation bar:

This way our top bar is ready. We’ve just to slightly change our views’ markup adding a page-wrapper and some content to make our app jst a bit more realistic. For these new elements, we’ll also have to do some more change in our index.css.

Modifying our views

Open your index.html file and look for the markup of the carousel which holds our views: it should look like this:

We have now to add an element which will wrap our views’ content. So change the carousel markup in order to make it look like this:

The page-wrapper will ensure our content will be scrollable. To give some content to our views, just add to them following fake text:

The final carousel element markup should look like this:

In the index.css we replace the carousel rules we had set in the first part of this tutorial:

whit these new rules:

These rules ensure we’ll be able to vertically scroll our views to see all their content.

That’s all: try to run the application to see how the navigation bar looks. Now we’re going to give it life with a bit of javascript.

Bring navigation bar to life!

We can finally write a piece of javascript to bring our top navigation bar to life. It’s quite simple: using jQuery we’ve just to bind the click event for the anchor links in our list items and execute a simple command. Start looking at the code:

You had probably noticed that in our top bar markup I had inserted a data attribute without telling anything about: now it’s time to reveal the goal of the data-index attribute, but you have already guessed it, didn’t you? Since the carousel() method of the carousel object accepts as parameter a numeric index, we have to provide us with an easy and quick way to get the index of the page (view) we want to go to. We have just hard coded this index using the data-index attribute (keep in mind the index starts from 0) and then, from jQuery, we get the index of the view our link points to and we use it to invoke the carousel() method.

I have also added a switch statement because in the real world we could expect any page performs some specific task and loads some specific data: the best place where we can perform these basic actions for each specific view is right here, in the event handler whcih loads the view itself.

If you run the application now, you’ll see that you can navigate through its views both swiping your finger to the left and to the right or just tapping the top bar buttons.

Wait a moment, things aren’t quite adding up…

In our app we have only four views but in navigation top bar we have five buttons where we can tap on! What the fifth button does? Well, you see that button has the classical side-menu icon widely used in so many apps: in fact that button opens a side-menu, but before we can see it in action we have to introduce a new view’s type. This new view is external to the carousel flow: we can’t go to it just swiping our fingers and it doesn’t belong to a set of views like the carousel views do. We could call this view type single-view or secondary-view (in opposition to the main-view held in our carousel) and it’s going to be the argument of the third part of this article.

    Leave a Reply

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

    This site uses Akismet to reduce spam. Learn how your comment data is processed.