How to work with Navigation App Template in Windows Store App with JavaScript

Recently I was attending a user group event and one young developer came to me with question, could you help me in finding out how to work with Navigation App Template in Windows Store App? So in this post I am trying to explain step by step working with Navigation App Template.

Very first start with creating a new project and select Navigation App from project template.

image

If you navigate to solution explorer you will find that there is one folder pages. Ideally all pages of the application should be (not must be) in this folder. By default there is one page called home page is there .

image

Let us stop at this point to explore default.html. In default.html you will find there is a PageControlNavigator. This control will host all the pages. Essentially Navigation Application Template follows singe page navigation mechanism. You will notice in data-win-option that there is home parameter and it is set to a page.

image

In this case home page or first page to be loaded in PageControlNavigator is home.html. Let us go ahead and design home.html. We will change title of the page and put a button. On touch of the button user will be navigated to another page.

image

Let us go ahead and run the application. You will get home.html loaded as home page with the title and button. You will notice that template has taken care of margin.

image

Let us say you want to navigate to Page2.html on click or touch of button. For that very first task you need to do is to add Page2.html in the project. For that right click on the pages folder and add a new subfolder called page2. Then right click on the newly added subfolder page2 and add a new item. Choose Page Control to add as new item.

image

After adding new page control solution explorer should look like following image. In the pages folder you can see that there is one more subfolder page2 with page2 page control.

image

Now we need to write code to navigate to page2.html on the click event of the button. Open home.js and type this code to navigate. You can navigate from one page to another page using WinJS.Navigation.navigate function. This function takes two parameters. First parameter is address of the page to navigate and second parameter is data to be passed while navigating.


element.querySelector("#btnnavigate").onclick = function (args) {
 WinJS.Navigation.navigate("/pages/page2/page2.html",
 { data: "data to other page" }
 );
 };

At this point you should able to navigate to page2 from home page. You can find that template has taken care of back button and margin in page2.

image

Above we are passing “data” while navigating. Now we need to write some code on page2.js to consume data being passed. Let us replace the title of the page2 with the data being passed. We will write this code in ready function of page2.js.


ready: function (element, options) {
 // TODO: Initialize the page here.
 var datapassedhere = options.data;
 element.querySelector(".pagetitle").innerText = datapassedhere;

Now on running application you will see page2 title has been replaced with the data being passed from home page.

image

In this way you can work with Navigation App template. I hope you find this post useful. Thanks for reading.

About these ads

2 thoughts on “How to work with Navigation App Template in Windows Store App with JavaScript

  1. Pingback: Dew Drop – January 17, 2013 (#1,481) | Alvin Ashcraft's Morning Dew

  2. Pingback: Blog Posts of the Week (13th - 19th January 2013) - The South Asia MVP Blog - Site Home - TechNet Blogs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s