A Guide to Building Your First Windows 10 App

DZone 's Guide to

A Guide to Building Your First Windows 10 App

Check out this quick walk-through/guide demonstrating how to make a simple HTML/JavaScript Windows 10 app.

· Web Dev Zone ·
Free Resource

In case you missed our last blog post, we discussed some of the reasons why mobile developers are starting to deploy more and more apps on Windows. Since the Windows 10 launch, there are over 200 million reasons why it makes sense for developers to get excited about it. Fortunately, the barrier to enter is low, since Microsoft provides excellent support for building your apps in the traditional C#/XAML, but also with Javascript/HTML.

To show you just how easy it is, this tutorial will show you how to build a full Windows 10 app, using the widely-known Javascript/HTML languages. It will leverage WinJS, an open-source framework created by Microsoft that provides Windows UI components with Javascript bindings to help our app fit right in with the rest of the platform.

Other than WinJS, we won’t use any external frameworks (yet) in order to keep things simple, but WinJS provides adapters for frameworks you love, like AngularReact, and Knockout. And of course, you can use other frameworks as you wish just as you would with any Javascript project.

With all that said, let’s dive right in!

Getting Started

This tutorial will build a simple weather app that allows you to search and add locations, and view the current conditions and weather forecast for that area. It’ll use a few Windows UI components like SplitViewListView, and Repeater, show you how to make HTTP requests, and how to do some basic data binding. By the end of the tutorial, you’ll have a fully-functional app! Use this as a jumping-off point for your own app, or take the lessons learned here to create your next app from scratch.


If you’d like to download the source for this tutorial, you can download it as a completed project here. The code is nicely commented (even the parts that we don’t cover in the tutorial) so feel free to poke around and see how things work for yourself.

Set Up the Project

You’ll notice that the project looks like a standard website, and it is! We have it running in Visual Studio, and have already included the sole Javascript library needed for this tutorial–which is WinJS.

There are two custom stylesheets (main.css and demo.css) and a main JavaScript file (main.js), while the rest of the magic happens in the index.html file.


To see the app in action, simply open up the index.html file in your browser! Perform a search for your city and tap on it when it appears (we gather our location and weather data from Yahoo’s API). You’ll then notice a new location pin in the left menu denoting your city, click it to see the current and future weather.


Simple enough, and a great way to see the ease of WinJS.

Of course, to get a better feel for things and move onto deployment, I strongly suggest using Visual Studio to run the app on various devices and screen sizes. And, once you start adding some device components like GPS, this will be a must for proper testing.

Time to Build!

In this demo, we’re going to go over the key components that are unique to WinJS, but will omit the main styling, HTML-building, and JavaScripting for the sake of brevity. If you don’t have an HTML/JS background, this may be a bit confusing–but if you’re a JS guru, you’ll be ready in no time!

First off, let’s create the UI.

Creating WinJS UI Elements

The WinJS UI Elements we’ll use in this demo are SplitViewListView, and Repeater. They’re pretty common design patterns, but not 100% intuitive to existing HTML devs so we’ll go over them here.


Poking around the app, you’ll notice the menu on the left that expands with the hamburger button (sidenote: this phenomenon apparently deserved its own Wikipedia page) to reveal a full menu.


This is the SplitView in action. To create it in HTML, we’ll go to our top-most parent (dom id=app) and create a child that looks like this:

<div class="splitView" data-win-control="WinJS.UI.SplitView"></div>

We’re defining the control as a WinJS.UI.SplitView so the framework knows what this weird element is and how to handle it. Within that tag, we create a few children. You really only need two, but we have an extra and we’ll show you why…

The first is the ‘left-hand split’, or the menu. You’ll find it at

<div id="menu-ui"></div>

This, surprisingly enough, holds the menu! You can find the elements for toggling the menu, adding a location, and finally, a Repeater that holds all the app’s locations (don’t worry about what a Repeater is yet… you’ll find out soon enough!).

Second, we have the main pane, which holds the rest of the app’s content. This is the ‘right-hand split’ and is defined by both our home-ui and location-ui elements. It is up to us to determine which is visible at any given time, and you’ll want to make sure to properly manage the CSS to avoid some funky display errors.


If you’re an Angular fan (like me!), you’re certainly familiar with ng-repeat. This is the same concept. For non-Angular folks, imagine having a number of items that you need to display all with the same ‘template’. Instead of manually building each one in the DOM, you can create a Repeater to loop through a list of items and build and display the proper number of elements. It’s pretty slick!

The best way to understand it is to see it in action. Our app implements it like so:

<div data-win-control="WinJS.UI.Repeater"
data-win-options="{data: locationList}">
<div data-win-bind="winControl.label:locality1.content;winControl.locationID:woeid;"
data-win-options="{icon: 'mappin', oninvoked: mySplitView.locationClicked}">

We’re taking all the elements from the javascript variable locationList and iterating through them, creating a div for each one.


In this case, we’re adding a number of locations that are clickable into the menu, so you’ll see a few other options within.

If you find yourself using (and loving) the Repeater, then read on to learn about ListViews for more powerful iterative DOM creation.


One of the most common elements across all mobile platforms is the ListView (or UITableView if you’re an iDev). WinJS is no different, and it’s easy to bind data to – but we’ll get to that in a bit.

First, let’s create the HTML for the ListView. In our app, we’re going to populate a set of search results based on the user input in the main view. If you open index.html and go to the #home-ui area, you’ll find an input and button for the user to make their search.

Beyond that, you’ll see the following HTML:

<div id="searchResults" 
data-win-options="{itemDataSource: locationResultList.dataSource,itemTemplate: select('#searchResultTemplate'), oniteminvoked:saveLocation, layout : {type: WinJS.UI.ListLayout}}">

Looks a little messy, right?

If you’re familiar with other JavaScript frameworks, maybe it’s a bit familiar. You can see some data attributes that give the regular-looking div some more functionality. In this case, we are defining the control to be of typeWinJS.UI.ListView and providing a few options. All it takes is a few developer-defined definitions and WinJS takes care of the rest!

Breaking down the options, we have:

– itemTemplate: This is the HTML element that will be reproduced as a list item, or table row. You can find the element with ID searchResultTemplate just above it in index.html.

– oniteminvoked: Similar to onclickontap, etc. The saveLocation method is defined in main.js, and will make this a preferred location, creating a menu item on the left hand side of the screen

– layout: This defaults to WinJS.UI.GridLayout, but we’ve overridden it to WinJS.UI.ListLayout to have the full-width results you see in the app. GridLayout provides more of a…you guessed it…grid view 

– itemDataSource (we’ll cover this in the next section)

For the layout, that’s all we need to do–but without binding any data to these elements, they won’t do a whole lot. So, let’s dig into the JavaScript to get these elements populated and the app wrapped up!

Populating the App’s data

Now that we have our elements created, we need to feed some data into the app. There are two main components we’ll look at – first, the location search followed by the individual location display.

Javascript developers will be familiar with pulling data from APIs using XHR, so we won’t get into that – but it’s how we’re populating our data sources. When a user searches for a location, a query is run using Yahoo’s Geo API. Similarly, when a location is tapped within the menu, its weather is pulled via Yahoo’s Weather API.

Simply use WinJS.xhr to make these API calls, which is structured just like what you’re used to!

Binding With the Data Source

We have the layout created in HTML, and the data being pulled in via XHR – now we just need to connect the two. I wish we could use another acronym, but instead, we’ll make the connection using WinJS.Binding.

These bindings allow you to build a data model in your Javascript, update it and have the DOM change automatically–displaying the latest and greatest information.

In this app, we use a few WinJS.Binding.List objects, which are all defined at the window-level so they’re accessible from within the HTML.

Once initialized,

window.locationResultList = new WinJS.Binding.List([]);

you can add items to the binding list as shown:

// where 'loc' is a JS object

and they’ll be automatically reflected in the DOM. Remember in the HTML section where we defined theitemDataSource as locationList? That’s the connection between the HTML and JS, so now you’re good to go!


There are scenarios where you may not necessarily be binding with a list, but want to have your data layer auto-update the DOM. You can see that in action in the #location-ui view, where the forecast is displayed. By setting the HTML attributes like this:

<div data-win-bind="innerHTML:item.condition.text"></div>

you can reference a JavaScript object, so when the object changes, as does the HTML. To complete this loop, you also need to add the binding to your JavaScript file as shown:

WinJS.Binding.processAll(document.getElementById("location-ui"), data);

This will update the elements within #location-ui whenever the data variable is changed. (Perfect for updating a wide range of UI elements with almost no code!)


Some Notes on Styling

CSS is pretty well-known, so I won’t go in too deep here. It is worth pointing out the demo.css file, which contains all the custom styles for the demo.

In the #searchResults elements, you’ll find win-container and win-item. If you notice, we never insert any of those elements into the DOM explicitly–but rather, they’re implicitly created within WinJS.UI.ListView. Long story short: to override the ListView design, check out those elements and a full list here.

We also used the dark theme provided by WinJS, but you can also make use of the light theme by changing the linked stylesheet to the following:

<link href="node_modules/winjs/css/ui-light.css" rel="stylesheet" />

Finally, you may have noticed the little icons on the left menu of the SplitView. Those are provided within WinJS as an icon set, which you can learn more about here. These make it quick and easy for us non-designers to make our app look sharp, and conform with Windows design guidelines.

Wrapping up

In this tutorial, we covered a few of the Windows UI components provided by WinJS and showed how to bind data to the UI using JavaScript. We styled the app using Windows 10 elements and guidelines, and also showed how to use XHR to make HTTP requests. With all that in just a short time, you’re well on your way to building your next Windows 10 app!

You can dig deeper in the documentation and even a playground for WinJS here, or head over to the Developer Center to learn more and find out how to publish your next app to the Windows Store.

Stay tuned for future tutorials, where we’ll expand on what we’ve learned today. Until then, happy coding! 

html, javascript, visual studio, windows 10 apps, winjs

Published at DZone with permission of Chris Beauchamp . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}