Today, I’m kicking off a new blog series, which I’m calling Windows 8: What I’ve Learned, or W8WIL for short. I’ve had the good fortune of spending some quality time with the Windows 8 Consumer Preview release, and there are plenty of little things that can make your life easier as a developer, and I’ll share those in this series.
In this first installment, I want to share some coolness in working with AppBars in your JavaScript Windows Metro style apps. For those of you who haven’t yet started playing with the new app types (if you haven’t, you can grab both the Consumer Preview release, and the Visual Studio 11 beta bits here), the AppBar is a common location for commands for users to interact with content in your app. Below is an example of one of the neat apps that’s currently available in the beta Windows Store, called Physamajig:
Another example is PuzzleTouch, which allows you to select puzzles (both built-in and custom puzzles based on your photos), and then use the AppBar commands to interact with them:
In the second example, when you have selected an item, the AppBar appears with the available commands enabled. By default, the AppBar will auto-hide when not in use.
The cool thing I learned is that there’s a large library of built-in icons for you to use with your AppBar commands, and in a JavaScript Windows Metro style app, they are super-easy to use. If you want to look at the various icons, you can open up the Character Map utility on a Windows 8 Consumer Preview machine (just tap the Start key and type “Cha” to locate it), and select the Segoe UI Symbol font…you’ll see the icons towards the end of the list:
The screen grab above shows the home icon, but from here there’s not an obvious way to add this to your AppBar. The cool thing is that there’s a full list of the available icons, including friendly names, tucked away in the ui.js file that’s part of the WinJS library (you can find this file in the References folder in a JavaScript Windows Metro style application). There are around 150 icons listed, and they include all of the commonly-needed icons, from home and back, to media transport controls (play, pause, etc.) and much more. The list also includes the code point for each icon (which is the U+E10F in the above screen grab for the home icon). You can use the code point to locate the named icon in the Character Map utility to preview what it looks like. Of course, you can also just use the friendly name to try the icon out on your AppBar, like so:
1: <div id="appbar" data-win-control="WinJS.UI.AppBar">
2: <button data-win-control="WinJS.UI.AppBarCommand"
3: data-win-options="{id:'home', label:'Home', icon:'home', section: 'global'}"></button>
4: </div>
In the markup snippet above, the icon property in the data-win-options attribute specifies that I want to use the “home” icon, which gives me an AppBar that looks like this (you can test and verify this using the blank JavaScript application template, and adding the above markup after the
section in the
of default.html…I’ve cropped the screenshot for clarity):
What’s especially nice about using the built-in icons and friendly names is that if you choose to switch from the default dark theme (ui-dark.css) to the light theme (ui-light.css), everything just works, and your icon will be dark on a light background.
Want to try it yourself? Check out this QuickStart on MSDN:
Quickstart: adding an appbar with commands
You can find lots more information on building Metro style apps at:
http://msdn.microsoft.com/windows/apps
So that’s a quick look at using built-in AppBar icons in a JavaScript Windows Metro style app. Hope you found it useful, and if you did, why not tell your friends?
You can also follow me on Twitter to get short bursts of info, and subscribe to my feed to get all of my blog info as soon as it’s published.