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.
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 .
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.
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.
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.
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.
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.
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.
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.
In this way you can work with Navigation App template. I hope you find this post useful. Thanks for reading.
I was busy working with other stuff and after long time today I resumed my working with Windows 8 development. I opened an old project and directly press F5 to run the application on local machine.
While I tried to run the application, I encountered with following run time error. Error message was as following,
“In the app manifest, the value of element OSMinVersion(6.2.0) must have a value of ‘6.2.1’ or higher “
Although I found solution of this bug very easy, I got puzzled with this exception. You can solve this problem
“By making sure you have REBUILD the project before running it “
Make sure you are cleaning and rebuilding the project to avoid this run time error. I hope you find this post useful. Thanks for reading.
Let us first try to understand, why we need Namespace? I will try to explain you with an example, let us suppose you have a function named GreetingMessage in JS file named Library.js
Now you need to use this function on default.js. When you try to call that function from other js file , you get following exception.
Essentially, you cannot access a function or variable outside its scope. Namespace in WinJS library allows you to access a function outside its scope.
Namespace allows you to access a function outside its scope.
Namespace allows you to use a function in different files along with file it is defined.
Namespace helps you to organize your code
Any type created in Namespace can be referenced outside the scope of Namespace
Now let us see that how can we define a Namespace in WinJs . You can define Namespace by calling the define function
There are two parameters need to be passed to create Namespace.
Namespace name is a string
Members of the Namespace as object
You can create a Namespace in Library.js as following,
(function () {
function GreetingMessage() {
return "Hello from WinJS";
}
WinJS.Namespace.define("MyLibrary.Function", {
GreetingMessage: GreetingMessage
});
})();
There are few points you need to take care here
Enclosed all the Namespace definition in self executed function
Make sure you are not forgetting the braces at the end.
We have defined a function named GreetingMessage
We have defined a namespace and function inside that can be accessed as following
We have defined a Namespace and now we want to access the function GreetingMessage() on the default.js file. To do this first step you need to do is to refer MyLibrary.js on default.html file. You can refer that as following,
Now you can access GreetingMessage() function on default.js as following ,
var res = MyLibrary.Function.GreetingMessage();
var output = document.getElementById("output");
output.innerHTML = res;
In this way by using Namespace, you can access functions and objects in different files and beyond scope of the declaration. I hope you find this post useful. Thanks for reading.
In this post we will follow step by step procedure to create app package for Windows Store. Let us suppose you have created a “Hello World “application for Windows Store and want to create an App Package for the same. To create that from menu select PROJECT
From the POROJECT menu, select Store->Create App Package
Next you will get Create App Package wizard. At the point, we do not want to upload package to Windows Store so select the option No and click on Next
In next screen you need to choose Platform for the package. You can create package for
64 bit platform
32 bit platform
ARM
Neutral platform
Subsequently you need to choose whether you want to create package for Release Mode or Debug Mode. Here, I am creating a package for Neutral platform. Select that option and click on Create to create package.
After clicking on create in bottom of Visual Studio you can notice Build Succeeded message. And in next window you will get Success Message with path of the created package.
When you browse to path you will find package has been created to upload.
In this way you can create application package for Windows Store. I hope you find this post useful. Thanks for reading.
When one start creating Applications for Windows Store, the first question come to mind is what technology should be used to create applications. In this post, I am trying to ease that decision to some extent. If you creating application form scratch then as of me you should rely on your existing skills. However for migrating application, you may want to take decision on basis of type of application need to be migrated. Below is the flowchart I would follow while taking decision for technology path
Some of the points you need to keep in mind while deciding are as follows
Know your existing skills and decide on that. If you are good at JavaScript and have worked with patterns then you may find WinJS very similar. Whereas if you have created Windows Phone App or WPF applications before then combination of C Sharp and XAML will make more sense to you .
You need to be more cognizant when deciding for the migration of application. In this scenario rather than relying on your existing skills, you should decide on the factor of what type of application you are going to migrate. For example if you are migrating Windows Phone application then you must choose combination of C Sharp and XAML such that you may reuse codes and functionalities. Imagine if your Windows Phone application is created using patterns like MVVM then you may able to use View and Model View.
So far what I have experienced that majority of the WinJS controls are created as Metro Controls. So you do not need to write any extra code to make WinJS controls as metro a control. So it may be wise to use HTML and WinJS combination if you skill set contains both web and CSharp XAML.
If you are creating high end Gaming applications then you may want to consider combination of C++ and XAML
>If you are a .NET developer and your skill set contains HTML and JavaScript as well. In that case I would recommend C Sharp and XAML. You will find development process very familiar as of .NET development. For example you may create application adhering same patterns like MVVM etc.
In this way you can decide on the combinations of technology for the development of applications for Windows Store.
<I hope you find these quick points useful. Thanks for reading.
Two Metro applications can shared the content between them using Share Charm. Content can be as simple as text or may be image or a file. In content sharing, the application that shares content is called as Source Application and the application that receives content is called as Target Application. Source Application and Target Application need to declare the type of content; they are intent to share in a Declaration.
Declaration can be configured in the package.appmanifest file. Click on package.appmanifest file and then select Declaration tab. From the Available Declarations drop down select Share target and check SupportedAnyFile Type in Supported File Types. See the image below.
Source Application
After configuring the declaration we need to write the code to share relevant text. Let us put a button and click event of that button we will share the text.
In code behind attach click event to button and call bellow function
Function to share text is as following. User can share the text from the Share Charm. Note that in the code below, we have explicitly displayed the Share charm by calling function showShareUI.
function ShowandShareContract() {
Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", function (e) {
var request = e.request;
request.data.properties.title = "Debugmode";
request.data.properties.description = "Debugmode Share App";
request.data.setText("Hello from DebugMode App");
});
}
The actual data sharing happens in the datarequested event handler. We are sharing the text “Hello from DebugMode App “
Target Application
Now let us create an application, which can consume the shared text. An application can be launched in multiple ways; we need to first check whether the application was launched as Share Target or not before accepting any data.
We also need to check whether shared operation is containing text or not. That can be check as following
Below is the code required to read the text shared and display in an output div.
if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
var shareOperation = args.detail.shareOperation;
if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.text)) {
var SharedText = " Title : " + shareOperation.data.properties.title;
SharedText = SharedText + " Description : " + shareOperation.data.properties.description;
document.getElementById("outputDiv").innerText = SharedText;
}
}
In this way text can be shared between source application and target application using shared contracts. When you run the source application, you will get a ShareContent button. On clicking of the button Share Charm will get displayed. You will get list of all applications can act as Target Application. For example Mail application can also act as Target Application.
Let us choose target application we created. Click on ShareContreactTarget application. You can see two applications can run side by side and text from source application is displayed in output div of target application.
In this way we can share Text between two metro applications. I hope you find this post useful. Thanks for reading.
In this article we will follow step by step approach to create Netflix Movie Explorer Metro Application. We will use HTML and WinJS to create this application. See the video to understand expected behavior of the application.
Some of the features of application are as following
Browse movies from Netflix
Rate the Movies
Browse movies in Semantic views
Share the Rating of a particular movie with social media or via mail
To get it started, launch Visual Studio and create a new project by choosing Blank App Project template from Windows Metro Style tab. You need VS12 to create this application.
After creating project in default.html change “content goes here “with following
After that follow the steps as below,
Step 1: Create Data Source
Very first we need to create data source by reading JSON data from OData feed of Netflix movie database. That can be done using WinJS.xhr function
In above code snippet, we are performing following tasks
Making a call to Netflix OData using WinJS .xhr function
As input parameter to xhr function, we are passing exact url of OData Endpoint.
We are applying projection and providing JSON format information in URL itself.
Once JSON data is fetched form Netflix server data is being parsed and pushed as individual items in the WinJS list.
After fetching, data is being parsed using JSON Parser and individual items are pushed to movieArray. movieArray is defined as following
Step 2: Create ListView
After creating data source we need put WinJS ListView control on the page.
A HTML div can be converted to WinJS ListView by setting data-win-control attribute to WinJS.UI.ListView. Other options can be set like layout of the ListView. In this case we have set it to GridLayout, so data will be displayed horizontally. ListView needs data source to display data. Data source can be set either in HTML or in code behind. Let us set data source of movieListView to the movieArray.
Make sure that you are setting data source of ListView after the WinJS.xhr function call. At this point of time if you go ahead and run the application, you should be getting following output.
Step 3: Create ListView Template
In above output, data is in raw form. To make data more immersive and to show the way we want, we need to create template out of data. After creating template, it needs to be set as attribute of ListView. Template can be created as following
Template can be created by setting data-win-control attribute of HTML div as WinJS.Binding.Template . Inside div element
Binding image to Picture property of WinJS List or Array
Binding inner text of h4 element to Title property of WinJS List or Array
Once Template is created, it needs to be attached to the ListView. After attaching Template, ListView will be as following
No go ahead and run the application, you should be getting following shape of the application
Before we move ahead, let us put some CSS on ListView to make it more immersive
After applying styles on List View, your application should be in following shape.
Step 4: Grouping of DataSource
Next we want to group the movies as per first character of their title. For that create group functions as following.
After creating grouped functions, we need to create grouped item list and set it as itemDataSource of List View. Modify setting of ListView data source as following
Let us go ahead and run the application. At this point shape of the application should be as following
Step 5: Creating Header Template
Above we can see the header data is in raw form. So to make header information more immersive, you need to create template for header and then attach that to ListView
A header template can be created in same way as of item template. Header template is created as following
After creating Header Template, we need to attach this to ListView. So ListView will be modified as following
Let us go ahead and run the application. At this point shape of the application should be as following
Step 6: Adding Semantic Zoom
Next we need to add sematic zoom to the ListView. For that very first let us create a Semantic Zoom Template. We want to display movies with first letter of title in semantic zoom view.
After creating Semantic Zoom View template, we need to add a SemanticZoom WinJS control. Inside the Semantic Zoom control we need to put ListView (created in previous steps) and a Semantic Zoom View. We can put that as following.
After adding Semantic Zoom view we need to set data source of it. This can be set as following.
Last work we need to do in Semantiz Zoom is to apply styles.
Let us go ahead and run the application. At this point shape of the application should be as following
Step 7: Adding Output DIV
Now we need to add code to add output div. When user will select a particular movie detail of that movie will be displayed in the output div for rating.
And in code behind on the touch of a particular ListView item, we need to display that information in output div. For that add the following code in code behind
In above code snippet
Iteminvoked event is attached to the ListView
When item is invoked then itemPromise function is being called with parameter invokedItem
On the invokeditem data we can fetch attributes of ListView items
In last set the vales of HTML elements from selected items data.
Let us go ahead and run the application. At this point shape of the application should be as following
Step 8: Adding Rating control
To allow user for Rating, let us go ahead and add a WinJS Rating control. Rating control can be added as following
We can create a Rating control by setting data-win-control attribute of a div as WinJS.UI.Rating. Other data options like maxRating and averageRating can be set in data-win-options attribute.
After adding Rating control, we need to write code to allow users to perform rating.
Let us go ahead and run the application. At this point shape of the application should be as following
Step 9: Adding Code to Share Contract
We want our user should able to share the rating of movie on other applications like Mail, Twitter, Facebook. For that we will have to use ShareContract.
In above code we are getting the request and setting the title and description in data property. After that creating text to share and setting it in the data request. Above is the code to simple text sharing via ShareContract feature of Windows 8. Once we have share function is ready, we need to get the current view of application using DataTransferManager.getForCurrentView () and attach and event handler datarequested on same. When datarequested event will be fired ShowandShareContract function (created above) will be called and user will able to share using Share Charm.
Put above code just before ProcessAll() function and do not forget to declare following variable globally
Let us go ahead and run the application. At this point shape of the application should be as following. This is our final application.
In this application user can browse the movies, rate a particular movie and then share the rating with the friends on social media or mail.
Conclusion
In this post we learnt to create a Metro Application from scratch. Even though you can download source code of this article from here , I am sharing the codes below . Feel free to use them as you required.
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
var movieArray = new WinJS.Binding.List();
var dataTransferManager;
var movieName;
var selectRating;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
dataTransferManager = Windows.ApplicationModel.
DataTransfer.
DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", ShowandShareContract);
args.setPromise(WinJS.UI.processAll());
WinJS.xhr({
url: "http://odata.netflix.com/Catalog/Titles" +
"?$format=json&$select=ShortName,BoxArt&$top=300"
}).then(function (xhr) {
var movies = JSON.parse(xhr.response).d;
movies.forEach(function (i) {
movieArray.push({
title: i.ShortName,
picture: i.BoxArt.MediumUrl
});
});
});
var lstMovies = document.getElementById("movieListView").winControl;
var groupedItemsList = movieArray.createGrouped(getGroupKey, getGroupData, compareGroups);
lstMovies.itemDataSource = groupedItemsList.dataSource;
lstMovies.groupDataSource = groupedItemsList.groups.dataSource;
var lstMoviesZoom = document.getElementById("zoomedOutListView").winControl;
lstMoviesZoom.itemDataSource = groupedItemsList.groups.dataSource;
lstMovies.addEventListener("iteminvoked", function (eventObject) {
eventObject.detail.itemPromise.then(function (invokedItem) {
var selecteplayer = document.getElementById('selectedPlayer');
selecteplayer.innerHTML = "<h2>" + invokedItem.data.title + "</h2>";
movieName = invokedItem.data.title;
var selecteplayerImg = document.getElementById('selectedPlayerImg');
selecteplayerImg.src = invokedItem.data.picture;
var ratingcontrolc = document.getElementById("ratingcontrol").winControl;
ratingcontrolc.addEventListener("change", function () {
selectRating = ratingcontrolc.userRating;
document.getElementById('ratingPlayer').innerHTML = "<h3> as "
+ selectRating +
" on scale of 10 <h3>";
});
});
}, false);
}
};
function compareGroups(left, right) {
return left.charCodeAt(0) - right.charCodeAt(0);
}
function getGroupKey(dataItem) {
return dataItem.title.toUpperCase().charAt(0);
}
function getGroupData(dataItem) {
return {
title1: dataItem.title.toUpperCase().charAt(0)
};
}
function ShowandShareContract(e) {
var request = e.request;
request.data.properties.title = "Netflix Movie Explorer Application";
request.data.properties.description = "Sharing from Netflix Movie Explorer Application";
var textToShare = movieName + " has been rated " + selectRating + " out of 10 ";
request.data.setText(textToShare);
}
app.oncheckpoint = function (args) {
};
app.start();
})();
In this post we will see how to consume Netflix OData feed in HTML based Metro Application. Movies information will be displayed as following. At the end of this post, we should have output as below,
Netflix exposed all movies information as OData and that is publicly available to use. Netflix OData feed of movies are available at following location
Essentially we will pull movies information from Netflix and bind it to ListView Control of WinJS. We will start with creating a blank application.
In the code behind (default.js) define a variable of type WinJS List.
Now we need to fetch the movies detail from Netflix. For this we will use xhr function of WinJS. As the parameter of function, we will have to provide URL of the OData feed.
In above code snippet, we are performing following tasks
Making a call to Netflix OData using WinJS .xhr function
As input parameter to xhr function, we are passing exact url of OData endpoint.
We are applying projection and providing JSON format information in URL itself.
Once JSON data is fetched form Netflix server data is being parsed and pushed as individual items in the WinJS list.
As of now we do have data with us. Now let us go ahead and create a ListView control. You can create WinJS ListView as following. Put below code on the default.html
In above code we are simply creating a WinJS ListView and setting up some basic attributes like layout and itemTemplate. Now we need to create Item Template. Template is used to format data and controls how data will be displayed. Template can be created as following
In above code, we are binding data from the data source to different HTML element controls. At last in code behind we need to set the data source of ListView
Before you go ahead and run the application just put some CSS to make ListView more immersive. Put below CSS in default.css
Now go ahead and run the application. You should be getting the expected output as following
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
var movieArray = new WinJS.Binding.List();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
WinJS.xhr({
url: "http://odata.netflix.com/Catalog/Titles" +
"?$format=json&$select=ShortName,BoxArt&$top=300"
}).then(function (xhr) {
var movies = JSON.parse(xhr.response).d;
movies.forEach(function (i) {
movieArray.push({
title: i.ShortName,
picture: i.BoxArt.MediumUrl
});
});
});
var lstMovies = document.getElementById("movieListView").winControl;
lstMovies.itemDataSource = movieArray.dataSource;
}
};
app.oncheckpoint = function (args) {
};
app.start();
})();
In this post we will consume WCF SOAP Service in C#/XAML based Metro Application. This is level 100 post showing basic steps to create simple WCF Service and consume that in Metro Application.
Very first let us create a WCF Service using VS2012. Form File menu create a new project by choosing WCF Service Application project template from WCF tab.
Remove all the default code from IService1.cs and replace it with following code. In below service contract we are going to return a simple greeting message. From client a name as string will be input to the service and service will return a greeting message as string.
IService1.cs
using System.ServiceModel;
namespace ServiceToConsumeinMetro
{
[ServiceContract]
public interface IService1
{
[OperationContract]
string GreetingMessage(string name);
}
}
Service is implemented as following. It is concatenating two string and returning it .
Service1.svc.cs
namespace ServiceToConsumeinMetro
{
public class Service1 : IService1
{
public string GreetingMessage(string name)
{
return "Welcome to Metro Word " + name;
}
}
}
We will go with the default binding and will not configure anything in Web.Config. Leave Web.config as it is and press F5 to run and host created WCF service in local server. On successful running in your browser you should have below output.
Now let us create a Metro Application to consume this service. From File menu in VS 2012 choose Blank App project template from Windows Metro Style tab.
Next let us design the page. On the page we are going to put one TextBox, One Button and one TextBlock. User will enter Name in textbox and on the click event of the button service will be called. Returned output from service will be displayed in the textblock. Xaml is as following
Next we need to add Service Reference in the Metro project. For that right click on Metro Application project Reference tab and select Add Service Reference
Add the reference as following. My metro application name is App1. If your Metro application name is XYZ then you will be adding XYZ.ServiceReference1 provided you have not changed reference name while adding it.
In Metro word everything is asynchronous. So we need to make async call to service. When you add reference automatically visual studio creates async function for you.
We can call this function from service as following
If you notice we have put await keyword before making a call to service. Since service is called in await manner so the function inside which we are calling service must be async. On click event of the button service can be called as following
Combining all discussion together code behind will look like as following
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using App1.ServiceReference1;
namespace App1
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private async void btnCallService_Click_1(object sender, RoutedEventArgs e)
{
Service1Client proxy = new Service1Client();
string result = await proxy.GreetingMessageAsync(txtName.Text);
textResult.Text = result;
}
}
}
On running you should be getting output as following
I am sorry for poor UI experience but any way making UI immersive was not purpose of this post. I hope now you know basic steps to consume WCF SOAP service in metro application.
In this post we will migrate a Metro Project created in HTML5 and WinJS from VS11 to VS2012 RC.
Recently I upgraded my system to Windows 8 Release Preview. After upgrading Windows, I migrated VS to VS2012 RC. After successful installation of VS2012, I tried opening a HTML5 + WinJS project created in VS11. When I tried to build that project, I got below exception.
Exception was in file C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets
To remove this error what all you need to do is go to solution and remove old reference of Microsoft.WinJS
And then again try to rebuild the solution. You should not be getting any build error. Though after than if you run the project you will be getting errors like
This error implies that reference has been missing. To solve this we need to add new reference in the project. Add Windows Library for JavaScript 1.0 RC reference in the project.
After adding reference you need to change the references on HTML. Currently your reference may look like as following
You need to change Microsoft.WinJS.0.6 to Microsoft.WinJS.1.0.RC. After changing references should look like as following
No go ahead and run the project. You should be not getting any error. In this way you can migrate HTML5 WinJS Metro project to VS2012.
