I’ve been doing a lot of Windows 8 HTML5 development lately and wanted to share some key learning's for what I would consider to be one of the most integral parts of every GREAT windows 8 application – The App Bar. To that end, this is the first of a multi-part series on the topic of programming the Windows 8 App Bar – specifically via WinJS (HTML, JS, and CSS).
In Windows 8, t he App Bar is really the new “Toolbar” and provides a consistent commanding surface for both local contextual commands and global app functionality across screens – all nicely tucked at the bottom (or top) of the screen to keep the surface area of your App Free & Clear.
Some examples uses of the App Bar may include operations such as:
- Pinning a Secondary Live Tile
- Invoking a Camera interaction or working with other system elements
- Providing Actions on a Data Entry Screen such as (File/Save/New…)
I recently completed a 3-part “How Do I” short video series on programming the WinJS App Bar for Channel 9 – here’s the line-up:
#1 - How Do I: Implement App Bars in a Windows 8 Metro Style Application (Part1)?
#2 - How Do I: Implement App Bars in a Windows 8 Metro Style Application (Part2)?
#3 - How Do I: Implement App Bars in a Windows 8 Metro Style Application (Part3)?
The first part of the series is a basic introduction on how to get up and running quickly with HTML and JavaScript. As you can see below in the following HTML snippet, the key is assigning the “data-win-control” attribute values for WinJS.UI.AppBar and WinJS.UI.AppBarCommand values:
| <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options=""> <button </div> |
In the example above, note that the data-win-options values for the WinJS.UI.AppBarCommand allow us to define things like the icon value (in this case using a “stock” App Bar icon value from UI.JS reference library), whether the App Bar command resides on the left or right (via the “section” value), and a descriptive tooltip value.
From there, you can easily wire-up event handlers in JavaScript for the App Bar command buttons – in this case, we will just display a message box when the user invokes the App Bar command by swiping-up from the bottom of the screen or using the Windows Key + Z and then selecting the AppBar command
| document.getElementById("cmd1").addEventListener("click", doAppBarCmd, false); |
And that’s all you need to quickly get started with an App Bar in your Windows 8 application. The next video segments build on this basic example and show you how to add custom icons for your App Bar via the WinJS reference files, the Segue UI Character set, and using a custom .PNG template. Additionally, we will take a look at styling the app bar using CSS, specifying the location of App Bar elements (Top/Bottom or left/right), localization, and implementing custom Fly-outs.
Take a look at part 1 below – @ 8 minutes: How Do I: Implement App Bars in a Windows 8 Metro Style Application (Part1)?
Here’s a link to the full code samples.And be sure to check-out the entire series of “How-Do-I” Windows 8 videos on Channel 9