Windows Store Navigation Application Using JavaScript

Introduction 


Here we present a simple navigation application using JavaScript and design a rating bar in the application. Rating functions has become very popular these days. In this application we select the JavaScript navigation application in Metro Style Application. we have to rating when we have to use this application.

Here, I will present an example to show a navigation application using JavaScript. So we have to follow these steps. 

Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.
  • Open Visual Studio 2011
  • File>New>Project
  • Choose Template>JavaScript> Blank Application
  • Rename this Application
fir.gif

Step 2 : We have to open homepage.html and write this code which is shown as given below.

Code :

<!DOCTYPE html>
 <
html>
 <
head>
 
    <meta charset="utf-8" />
 
    <title>homePage</title>
 
    <!-- WinJS references -->
 
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />    <script type="ms-deferred/javascript" src="/winjs/js/base.js"></script>
 
    <script type="ms-deferred/javascript"src="/winjs/js/ui.js"></script>
 
    <script type="ms-deferred/javascript"src="/winjs/js/binding.js"></script>
 
    <script type="ms-deferred/javascript"src="/winjs/js/controls.js"></script>
 
    <script type="ms-deferred/javascript"src="/winjs/js/animations.js"></script>    <script type="ms-deferred/javascript"src="/winjs/js/uicollections.js"></script>    <script type="ms-deferred/javascript"src="/winjs/js/wwaapp.js"></script>
 
    <link rel="stylesheet" href="/css/default.css" />
 
    <link rel="stylesheet" href="/css/homePage.css" />
 
    <script type="ms-deferred/javascript"src="/js/homePage.js"></script>
 </
head>
 <
body>
    
<!-- The content that will be loaded and displayed. -->
 
    <div class="fragment homePage">
 
        <header role="banner"aria-label="Header content">
 
            <button disabled class="win-backbutton"aria
 
label="Back"></button>
 
            <div class="titleArea">
 
                <h1 class="pageTitle win-title">Welcome to NavigationApplication!</h1>
 
            </div>
 
        </header>
 
        <section role="main"aria-label="Main content">
 
        <button style="background-color: #ffd800">Click Here</button>
 
        <div data-win-control="WinJS.UI.Rating" data-win-options={averageRating:5,maxRating:10}"></div>
 
            <p>Content goes here.</p>
 
        </section>
 
    </div>
 </
body>
 </
html

Step 3 :  The default.html page look like as below. 

Code :

<!DOCTYPE html>
 <
html>
 <
head>
 
    <meta charset="utf-8" />
 
    <title>NavigationApplication</title> 
    
<!-- WinJS references -->
 
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
 
    <script src="/winjs/js/base.js"></script>
 
    <script src="/winjs/js/ui.js"></script>
 
    <script src="/winjs/js/binding.js"></script>
 
    <script src="/winjs/js/controls.js"></script>
 
    <script src="/winjs/js/animations.js"></script>
 
    <script src="/winjs/js/uicollections.js"></script>
 
    <script src="/winjs/js/wwaapp.js"></script>
 
    <!-- NavigationApplication references -->
 
    <link rel="stylesheet" href="/css/default.css" />
 
    <script src="/js/default.js"></script>
 </
head>
 <
body data-homePage="/html/homePage.html">
 
    <div id="contentHost"></div>
 
    <div id="appbar" data-win-control="WinJS.UI.AppBar" arialabel="Command Bar" data-win-options="{position:'bottom', transient:true, autoHide:0, lightDismiss:false}">
 
        <div class="win-left">
 
            <button id="home" class="win-command">
 
                <span class="win-commandicon win-large">&#xE10F;</span><span class="win-label">Home</span>
 
            </button>
 
        </div>
 
    </div>
 </
body>
 </
html> 

Step 4 : After running this code we get the following output.

output1.gif 

Here, we give a three rating.

output2.gif

This is the complete rating view.

output3.gif

Next Recommended Readings