Archive for November, 2012

Developing Windows 8 – Using AppBarCommand Icons outside the AppBar

November 23, 2012 1 comment

One of the things I really like about developing Windows 8 applications is the ability to use the built in icons provided by the Segoe UI Symbol font.  It is through this font that I can do thing like this in my AppBar:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'find', label:'Find', icon:'find', section:'selection', tooltip:'Find (Ctrl+F)'}"></button>

I am able to use the name of the icon directly, “find”, because of some helpers provided by WinJS but I can still access the icons directly due to the font family being exposed.

Another nice feature is that if you create a brand new JavaScript Windows Store application, you will automatically be exposed this font.  That means that I don’t have to provide a font family directly.  You can simply write the following HTML code:

<div class="pad"><span class="marginRight10">&#xe188 ;</span>Folder</div>

NOTE:  I purposely added a space before the “;” so that the browser wouldn’t try to render representation.

The CSS for the above HTML look like the following:

.pad {

.marginRight10 {

Notice that the CSS was used simply for formatting purposes.  Finally the output for this little experiment looks like the following:

This is all it takes to be able to access all of the available icons provided out of the box in your AppBarCommands.  Granted that the AppBarCommands make your life a lot easier by allowing you to specify the icon by name but it is still great to access the font directly anywhere in your application.

Here is a link to the AppBarIcon enumeration.

If you are curious about finding the code to use, you can use the Character Map application in Windows 8. Simply type, “Character Map” and you can click on the application. Then simply select the “Segoe UI Symbol” font in the dropdown control.

Finally select the symbol you want and you will see the code at the bottom of the app as shown below:

The finally thing you need to do is make sure that you replace “U+” with “&#x” and you will be good to go.

Update (2/26/2013): I wanted to also document how you can do this with Knockout.js as well.

In my view model, I simply expose an observable as such:

this.icon = ko.observable("&#xe188 ;");

Again, note that a space has been intentionally added so that it would render the text and not resolve its value. Next, in my HTML, I use the following binding to get it to render properly:

<button data-bind="html: icon, click: doSomething"></button>

This gives a lot of different ways to render custom fonts in our applications.

Hope this helps…

Introducing Milo the Mosquito

November 22, 2012 3 comments

In this post, I am going to describe the game Milo the Mosquito that I created and show some of the screens.

Here is the description of the game:

Milo is an annoying mosquito that just needs to be caught.
Play through the levels and try to catch Milo as fast as you can.
Once you have Milo trapped, tap on him to squish him for good.

The Home screen is as follows:

If you click on the help button, you are presented the Help screen:

When you click play from the Home screen you are presented with the Levels screen:

Next you can click on each level and play the game:

As you can see it is a fairly simple game in that you are trying to catch Milo and squish him before he escapes.  I will now just go over at a high level the architecture and structure I used to create the game.

If you have noticed already, I have been spending a lot of time building applications for Windows 8 in HTML, CSS, and JavaScript.  I have consciously made this decision because I want to be able to author applications that give me the ability to reach across to other platforms without needing to learn a new language or API.  I have held the MVP status in Client Application Development and I have extensive experience in WPF and Silverlight but I wanted to be sure that I could get a good feel for the development experience in building Windows 8 applications in HTML.

The first conscious decision I made with building this game was to use the new HTML 5 feature of the Canvas.  I also decided to use the JavaScript library, CreateJS.  There is a lot of tremendous documentation on this library.  The creators of  Pirates Love Daisies are behind this awesome library.

Within CreateJS, I used the following:

  • EaselJS – to help with managing the canvas
  • PreloadJS – to help manage my assets in the game
  • SoundJS – to help manage my audio in the game
  • TweenJS – to help with creating animations in the game
  • Zoë – to help create spritesheets from Flash

I also used the EasyStar library as a pathfinding engine for Milo to use for determine his escape route.

When working with the canvas, you are left to managing what you are to the canvas and also removing items.  I tried to be as modular as possible by creating top level managers for each screen and implementation.

Finally also created a level editor so that I could use a simple text file represent a level.  The following is the text representation for the level screen you see above:


As you can see, I used “.” as an exit point for Milo.  I represented the playing board by using “X” and finally I represented Milo as an “M”.

I hope this gives you a simple idea into what it takes to build a simple game.  The great thing about using HTML 5 is that you can develop it and test it with you favorite browser and have almost no changes to get it to work in a native Windows 8 application.

Hope this helps…

Developing Windows 8 – Adding a ListView to your settings charm and overcoming dual vertical scrollbars

November 22, 2012 Leave a comment

Here is another tip that I ran into recently when trying to get a ListView setup properly in a setting page. When I was coding for the ListView I came across the following screenshot:

Here is the sample CSS that I used to configure the ListView:

#listview1 {
    height: 100%;
    width: 100%;

Clearly this isn’t acceptable and we need to find a way to fix this.

It turns out that the solution is quite simple. It is easier to see this problem when developing traditional web applications but the same applies here. The height of the ListView was actually taller than the visual area that we were viewing and this is the reason for the second vertical scrollbar.

If we modified our CSS to use the following markup:

#listview1 {
    height: calc(100vh - 155px);
    width: 100%;

Our screenshot would then look like the following:

We are using a new feature of CSS3, the Calc function. One thing to note is that I am adjusting for the height of my header in the settings pane. You may have a different style or header altogether so be conscious as to how your adjust your height.

Hope this helps…

Developing Windows 8 – Tooltips in your Settings

November 22, 2012 Leave a comment

I ran into a weird situation where I wanted to add tooltips to my Preferences page in the Settings charm.  If you were creating a standard command for your AppBar, you would use the following markup to include a tooltip for your control:

<div id="navBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement: 'top'}">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'find', label:'Find', icon:'find', section:'selection', tooltip:'Find (Ctrl+F)'}"></button>

If you try to use the same format and put the following code in a settings flyout, you will NOT get any tooltip functionality. I had made the assumption that I could use the same format like for my AppBar:

<div class="win-settings-section">
    <div id="toggle" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title: 'Sample Toggle', tooltip:'This sample toggles...' }" />

In order to get tooltips to work in my settings charm pages, I had to use the following format:

<div class="win-settings-section">
    <div data-win-control="WinJS.UI.Tooltip" data-win-options="{ innerHTML: 'This sample toggles...' }">
        <div id="toggle" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title: 'Sample Toggle' }" />

This is all that you have to do in order to get your tooltips to work in your settings pages. One thing to note, is that you are given a lot more flexibility with this wrapper approach as you can inject any HTML to provide a nice look and feel for your tooltips.

Here is a link to the MSDN page on tooltips for Windows 8 HTML.

Although this may seem trivial for anyone who reads this, it stumped me at first in that I was trying to just copy the same pattern I used for the AppBar.

Hope this helps…

Categories: English Tags: , , , , ,

Installing Windows Identity Foundation on Windows 8 – The Certificate for the signer of the message is invalid or not found

November 13, 2012 Leave a comment

I was trying to perform an installation of Windows Identity Foundation (WIF) on my Windows 8 machine and I ran into the following error:

I double-checked that I had used the correct installer from Microsoft’s website but it turns out that Windows 8 already has WIF built in and that you just need to turn it on.

If you hit your Windows key and then type in “Windows Features” and also make sure your search is displaying results for “Settings“, you will then see the following screen:

The following is a description that you will see if you let your mouse hover over:

Windows Identity Foundation (WIF) 3.5 is a set of .NET Framework classes that can be used for implementing claims-based identity in your .NET 3.5 and 4.0 applications.  WIF 3.5 has been superceded by WIF classes that are provided as part of .NET 4.5.  It is recommended that you use .NET 4.5 for supporting claims-based identity in your applications.

If you click OK, Windows will install the feature you selected and you will be in business.

Hope this helps…


7 tips to Make building Win 8 apps in HTML/Javascript a Breeze

November 10, 2012 Leave a comment

Looking forward to speaking today at the RDU CodeCamp!

Here are the slides for my presentation.

See you there…