Post
Ask Question

Navigation in Windows Store Apps Using JavaScript

Introduction

In this article I describe how to navigate from one page to another page in Windows Store apps using JavaScript. You can make an app for Windows 8 containing more than one page and that allows navigation from one page to anther page in the app. I declare here that you can navigate from one page to anther page in the Windows Store apps but not from one app to another app. I assume that you are able to create the simple Windows Store app using JavaScript. For help please visit Simple Windows Store apps using JavaScript.

We can also navigate from one page to another page with the help of a Hyperlink button but it is very useful for a web page. You shouldn't perform top-level navigation in an app for several reasons, including these:

  1. The app screen goes blank while it loads the next page.
  2. The script context is destroyed and must be initialized again. The app might receive system events but not handle them because the script context is being destroyed and reinitialized.

Creation of a Navigation app

  1. Start Visual Studio 2012
  2. Click on "File"
  3. Select "New "
  4. Select "Project..."
  5. Select other language at the left hand side
  6. Select JavaScript
  7. Select the Navigation app
  8. Save appropriate name and location to your Project
  9. Click OK.

Navigate-Sample-in-Windows8-Apps.png

Your project will include the following files:

  1. default.html: It is the start page.
  2. home.html: It is the home page and displays the welcome title.
  3. default.js: Provides behavior of the app when started.
  4. home.js: Provides the behavior of the home page.
  5. navigator.js: It implements the PageControlNavigator object that supports the navigation model for the app.
  6. default.css: It specifies CSS styles for the content host page and for the app as a whole.
  7. home.css: It specifies the CSS style for the home page.

Creation of a new page control:

  1. In the Solution Explorer right-click on the folder page and select new folder
  2. Give the name "page2" to this folder
  3. Right-click on the page2 folder and select add and than select New item.
  4. Now select page control and give it the name "page2.html"
  5. Click Add

Visual Studio creates three the files:

  1. page2.html
  2. page2.js
  3. page2.css

Modify your page2.html as in the following:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>page2</title>

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />

    <script src="page2.js"></script>

</head>

<body>

    <div class="page2 fragment">

        <header aria-label="Header content" role="banner">

            <button class="win-backbutton" aria-label="Back" disabled type="button">
            </button>

            <h1 class="titlearea win-type-ellipsis">

            <center><span class="pagetitle">Welcome to Second page</span></center>

            </h1>

        </header>

        <section aria-label="Main content" role="main">

        </section>

    </div>

</body>

</html>

Write the following code to create the button on your home.html:

<section aria-label="Main content" role="main">

        <center><p>click on the button if you want to go to next page</p>

         <button id="btn">Next Page</button></center>

</section>

Code for home.js page.

Creation of event handler:

<section aria-label="Main content" role="main">

     <center><p>click on the button if you want to go to next page</p>          

     <button id="btn">Next Page</button></center>

 </section>

Registration of event handler for app start.

To register the event handler we call addEventListener for the click event as in the following:

var btnn = document.getElementById("btn");

    btnn.addEventListener("click", buttonClickHandler, false);

Your home.js page looks like the following:

(function () {

    "use strict"; 

    WinJS.UI.Pages.define("/pages/home/home.html", {

        // This function is called whenever a user navigates to this page. It

        // populates the page elements with the app's data.

        ready: function (element, options) {

            // TODO: Initialize the page here.

            //    WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);

            //}

            var btnn = document.getElementById("btn");

            btnn.addEventListener("click", buttonClickHandler, false);

          }

        });   

    function buttonClickHandler(eventInfo)

    {

        WinJS.Navigation.navigate("/pages/page2/page2.html");

    }

})();

Now run your apps.

Your first page looks like the following:


first-page-of-windows-8-apps.png


Click on the button Next page for going to page 2.

Your 2nd page looks like the following:

second-page-windows8-app.png

Summary

In this article I described how to navigate from one page to another page in the Windows Store app using JavaScript. I hope you understand well.
 


Similar Articles