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)?
<div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
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.
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