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
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.