Wednesday, December 07, 2011

WinJS Appbar Notes

There's not much out there yet on Appbar, but this blog is what I found.

@@API documentation
@@Mango Application Bar
@@How to use Application Bar in windows 8


Based on Abhishek Sur's fragment here is my take on a simple minded application bar:

Bring up visual studio
File -New -Project - Blank Application
Name: Appbar - OK

In default.html put this in the body under "contents goes here"

<ApplicationBar VerticalAlignment="Bottom" DismissMode="LightDismiss">

<StackPanel Orientation="Horizontal">

<Button Click="btnOne_Click">OneButton>

<Button Click="btnTwo_Click">Two Button>



and you'll get a list of two buttons side by side :

[one ] [two ]

@@API documentation
<div data-win-control="WinJS.UI.AppBar">div>

var object = new WinJS.UI.AppBar(element, options);


The AppBar object has the following types of members:


The AppBar object has the following events.
afterhideOccurs immediately after the AppBar is hidden.
aftershowOccurs after the AppBar is shown.
beforehideOccurs before the AppBar is hidden
beforeshowOccurs before a hidden AppBar is shown.


The AppBar object has the following methods.
addEventListener MethodRegisters an event handler for the specified event.
AppBarCreates a new AppBar object.
hide MethodHides the AppBar.
hideElements MethodHides the specified elements of the AppBar.
removeEventListener MethodRemoves an event handler that the addEventListener method registered.
show MethodShows the AppBar.
showAndHideElements MethodShows some elements and hides others in the AppBar.
showElements MethodShows the specified elements in the AppBar.


The AppBar object has the following properties.
autoHide PropertyGets or sets the amount of time, in milliseconds, before the AppBar hides.
element PropertyGets the DOM element that hosts the AppBar.
hidden PropertyGets a value that indicates whether the AppBar is hiding or in the process of becoming hidden.
lightDismiss PropertyGets or sets a value that indicates whether the AppBar should hide when the user clicks outside of the element that contains the AppBar.
position PropertyGets or sets a value that specifies whether the AppBar appears at the top or bottom of the main view.
transient PropertyGets or sets a value that indicates whether the AppBar automatically shows when the AppBar command is received.


Minimum supported clientWindows Developer Preview
Minimum supported serverWindows Server Developer Preview

@@Mango Application Bar
This fellow explains what an app bar is on Windows Phone 7 - it's the row of buttons on the bottom and it's also the menus that pop up from there from the pictures he posted:

Application Bar is a set of icon buttons and/or menu items, which provides easy access to application's most common tasks. It resides at the bottom of the phone screen. It can contain a row of 1-4 icon buttons for common tasks, a set of menu items to provide user easy access to the other specific actions. These menu items are displayed in a list just below the row of icon buttons. Generally menu items are not visible at the initial stage. There is a ellipsis at the right ride of the icon panel, clicking on it actually slides up the menu panel from the underneath of the icons panel.


Unfortunately, I can't find as good an explanation for Windows 8 yet....

@@How to use Application Bar in windows 8
Application bar is one of the interesting feature for any Metro style applications.

Application bar allows you to define standard set of options that your application needs to use at certain context. Metro style applications are generally very clean and does not have any visual portion sharing between toolbars or application options.

The app bar is the options that appear dynamically to the user when the user swipe up in the device or use Windows +Z from the keyboard.

Generally we create one application bar for the whole application, but you can also make more than one while developing an application. If you are developing an application with one bar, it is recommended to align it at bottom.

How to add an appbar on your own application
Lets take a look how you can add an appbar into your application. ApplicationBar is inherited from ContentControl, which supports swipe behaviour, also it adds up one control in its child as content. You are allowed to add more than one element as Content using StackPanel or any other panel you want to use.

Here the applictionbar is added at the bottom of the application which will have two buttons.

No comments: