Thursday, 26 September 2013
App bar means application bar which is used to display commands at the bottom of the app.
If you add the appbar at the top of your app it is known as navigation bar which contains all the content present in appbar but used to navigation from one page to other page.To bring app bar out:
With Mouse: right click
With Touch: swipe from bottom edge of the device
You can create an appbar winjs control by using attribute data-win-control="WinJS.UI.AppBar".We can create appbar button using attribute data-win-control="WinJS.UI.AppBarCommand".
data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}
The above attribute in appbar button describes about appbar button features.
id - used to control the appbar button in the javascript code.
label - this is the text displayed below the appbar button.
icon - the value of this attribute gives the inbuilt icon image for the button so this should be inbuilt keyword.
section - global is used to display this button on the right side of the appbar which is known as global commands displaying location.
tooltip - message displayed when the user cursor is hover the button.
type - seperator is used to divide two appbar command buttons with a line between them.
In the app bar we also added custom content by adding an attribute called
type - content is used to add custom content like paragraph or other controls inside appbar.
Users expect the appbar to be very simple with common commands but we can also use custom content in appbar violation rules if you think it will be very useful for your app to improve user experience.
The code i have given here is created in html5 windows store app using navigation app:
html5 code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0.Preview/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0.Preview/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0.Preview/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<button data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to SudhirHTML5App!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div id="MessageLabel"></div>
<div class="appbarcommand_appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}">
</button>
<hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'global'}" />
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'global',tooltip:'Delete item'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}">
</button>
<div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'textButton',type:'content',section:'selection',firstElementFocus:select('p')}">
<div style="width: 100px; height: 100px; border: solid 1px green;">
<p>hi</p>
</div>
</div>
<div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'inputButton',type:'content',section:'selection',firstElementFocus:select('input')}">
<div style="width: 100px; height: 100px; border: solid 1px green;">
<input style="width: 90px; border: solid 1px gray;" />
</div>
</div>
<div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'inputButton',type:'content',section:'selection',firstElementFocus:select('.boatType')}">
<div style="width: 100px; height: 100px; border: solid 1px green;">
<select class="boatType" style="width: 90px;">
<option>Sudhir</option>
<option>Ram</option>
<option>Gopi</option>
<option>Vishal</option>
</select>
</div>
</div>
<div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'videoButton',type:'content',section:'selection'}">
<video src="/demos/html5video/butterfly.mp4" autoplay loop controls style="width: 100px; height: 100px;"></video>
</div>
</div>
</section>
</div>
</body>
</html>
Javascript code
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
document.getElementById("cmdAdd").addEventListener(
"click", doClickAdd, false);
document.getElementById("cmdRemove").addEventListener(
"click", doClickRemove, false);
document.getElementById("cmdDelete").addEventListener(
"click", doClickDelete, false);
document.getElementById("cmdCamera").addEventListener(
"click", doClickCamera, false);
}
});
// Command button functions
function doClickAdd() {
MessageLabel.innerText= "Add button pressed";
}
function doClickRemove() {
MessageLabel.innerText = "do button pressed";
}
function doClickDelete() {
MessageLabel.innerText = "delete button pressed";
}
function doClickCamera() {
MessageLabel.innerText = "camera button pressed";
}
})();
 |
| Windows Store HTML5 javascript app with appbar control |
