Page Navigation without using Navigator.js and passing value between two pages using using Session, using Roaming DataStore and using ApplicationDataCompositeValue in Metro Style Apps-Day 7

Niladri.Biswas
Posted by in Windows Metro category on for Beginner level | Points: 250 | Views : 20664 red flag
Rating: 4 out of 5  
 1 vote(s)

In this article we will learn Page Navigation without using Navigator.js and passing value between two pages using using Session, using Roaming DataStore and using ApplicationDataCompositeValue in Metro Style Apps


 Download source code for Page Navigation without using Navigator.js and passing value between two pages using using Session, using Roaming DataStore and using ApplicationDataCompositeValue in Metro Style Apps-Day 7

Introduction

This is the 7th in the series of article of Windows Metro Style Apps and in this tutorial we will learn Page Navigation without using Navigator.js and passing value between two pages.

We will explore 3 ways for passing data between pages viz. using Session, using Roaming Data-store and using ApplicationDataCompositeValue.

Straight to experiment

Fire up Visual Studio and create a folder by the name "pages" inside which we will create two html files(1.html and 2.html) and two javascript files(1.js and 2.js).The structure will look as below

Write the below piece for code inside the body tag of "default.html"

<body>
     <div id="pageFrame"></div>
</body>

Write the below piece for code in the "default.js" file

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    window.showPage = function (url, options) {
        WinJS.Utilities.empty(pageFrame);
        WinJS.UI.Pages.render(url, pageFrame, options);
    };

    app.onactivated = function (args) {
        showPage("/pages/1.html");
    };

    app.start();
})();

Inside the "onactivated" event, we are invoking the "showPage" method.Inside that method we are calling the "WinJS.UI.Pages.render" method.The purpose of this method is to render the page control via a call to WinJS.UI.Pages.render. This lets us to render a page control by referencing it via a url.

So, once the application is loaded, we will be redirected to "1.html" page.

Now let us look into the html content of "1.html"

<body>
    <table>
        <tr>
            <td>Name:</td>
            <td>
                <input id="txtName" type="text" /></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td>
                <input id="txtPwd" type="password" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <button id="btnLogin">Login</button></td>
        </tr>
    </table>
</body>

If we run we will get the below output screen

Write the below piece for code in the "1.js" file

(function () {
    "use strict";

    function buttonClickHandler(e) {        

        // Store the data in session.
        WinJS.Application.sessionState.Name = document.getElementById("txtName").value;
        WinJS.Application.sessionState.Password = document.getElementById("txtPwd").value;

        // Store the data using Roaming Data store.
        var appData = Windows.Storage.ApplicationData.current;
        var roamingSettings = appData.roamingSettings;
        roamingSettings.values["userName"] = document.getElementById("txtName").value;
        roamingSettings.values["password"] = document.getElementById("txtPwd").value;

        //Store data using ApplicationDataCompositeValue
        var composite = new Windows.Storage.ApplicationDataCompositeValue();
        composite["TheUserName"] = document.getElementById("txtName").value;;
        composite["ThePassword"] = document.getElementById("txtPwd").value;

        roamingSettings.values["compositeSettingLoginStuff"] = composite;


        showPage("/pages/2.html");
    };

    WinJS.UI.Pages.define("/pages/1.html",
    {
        ready: function (element, options)
        {
            document.getElementById("btnLogin").addEventListener("click", buttonClickHandler,false);
        }
    });

    
})();

Lots and lots of new stuffs.But we will understand slowly and gradually.First of all let us concentrate on the below piece of code

WinJS.UI.Pages.define("/pages/1.html",
{
	ready: function (element, options)
	{
		document.getElementById("btnLogin").addEventListener("click", buttonClickHandler,false);
	}
});

The function "WinJS.UI.Pages.define" creates a new page control from the specified URI that contains the specified members.It's general syntax is

WinJS.UI.Pages.define(uri, members);

In the members section of the define funciton, we are creating a click button event handler for the "btnLogin"

In the button click event, we are storing the "UserName" and "Password" values in 3 ways

In the first way, we are storing it in Session State Object

In the second way, we are storing it in Roaming application data store.In this case data that exists on all devices on which the user has installed the app.

In the third way, we are storing it in ApplicationDataCompositeValue that represents related app settings that must be serialized and deserialized atomically

Finally we are invoking the "showPage" method to go to the "2.html".

In "2.html", the content is as under

<body>
        <table>
        <tr>
            <td>You entered User Name as <input id="txtName" type="text" /> and Password as <input id="txtPwd" type="text" /> </td>            
        </tr>
        
        <tr>
            <td> <button id="btnPrevious">Go Back</button></td>
        </tr>
    </table>
</body>

If we run we will get the below output screen

The intension is that, whatever value(UserName and Password) we captured in "1.html" can be retrieved in this page and display it.The "2.js" file code is aas under

(function () {
    "use strict";

    function buttonClickHandler(e) {

        showPage("/pages/1.html");
    };

    WinJS.UI.Pages.define("/pages/2.html",
    {
        ready: function (element, options) {

            //Retrieve the session data
            document.getElementById("txtName").value = WinJS.Application.sessionState.Name;
            document.getElementById("txtPwd").value = WinJS.Application.sessionState.Password;

            //Retrieve the roaming store data
            var userName = Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
            var pwd = Windows.Storage.ApplicationData.current.roamingSettings.values["password"];


            //Retrieve the ApplicationDataCompositeValue
            var composite = Windows.Storage.ApplicationData.current.roamingSettings.values["compositeSettingLoginStuff"];

            if (composite)
            {
                var userName = composite["TheUserName"];
                var pwd = composite["ThePassword"];
            }


            //Go to the previous page
            document.getElementById("btnPrevious").addEventListener("click", buttonClickHandler, false);
        }
    });
})();

In this case we are finding as how to retrieve the values from session,roaming store and ApplicationDataCompositeValue store.Once done, we can click on the "btnPrevious" button to go back to the "1.html" page.

The final output will be as under

Conclusion

So in this tutorial, we have seen as how to talk among pages and data storage. Experiment file is attached herewith.Thanks for reading.

Page copy protected against web site content infringement by Copyscape

About the Author

Niladri.Biswas
Full Name: Niladri Biswas
Member Level: Platinum
Member Status: Member
Member Since: 10/25/2010 11:04:24 AM
Country: India
Best Regards, Niladri Biswas
http://www.dotnetfunda.com
Technical Lead at HCL Technologies

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)