Windows Store App: Working with HTML 5 Menu Flyout

Posted by: Mahesh Sabnis , on 9/15/2012, in Category Windows Store Apps
Views: 29474
Abstract: Windows Store applications target the Windows 8’s new runtime, WinRT. They can be programmed using JavaScript, C#, VB.NET, C++ etc. In this article, we will see how to develop a Windows Store application using JavaScript and HTML 5

Windows Store applications target the Windows 8’s new runtime, WinRT. They can be programmed using JavaScript, C#, VB.NET, C++ etc. In this article, we will see how to develop a Windows Store application using JavaScript and Html 5.

To design the application, we must use WinJS.UI namespace, which is provided in WinRT. This namespace provides UI controls and objects to manipulate data. We have been provided with following control libraries for creating UI:

  • WinJS.UI.AppBar.
  • WinJS.UI.DatePicker.
  • WinJS.UI.Menu.
  • WinJS.UI.Flyout.

and many more.

Let us see how to provide a Menu-Driven application experience to the end-user using WinJS.UI.Menu and WinJS.UI.Flyout.

 

The scenario we will be using is that an application running on Windows 8 is used by the Medical representative who generates Orders, creates master entries for Stockist and Doctors and also view reports regarding Orders etc.

For this article, I am using Visual Studio2012 Express.

Step 1: Open VS2012 Express and create a new JavaScript Windows Store Blank App, name it as Menu_Driven_App as below:

clip_image002

Step 2: In the default.html under <body>, add a new Table tag which will have two buttons as shown below:

<table style="width:500px;height:100px">
<tr>
     <td style="width:250px">
         <button id="btnMaster" aria-haspopup="true">Master</button>
     </td>
     <td style="width:250px">
         <button id="btnReports" aria-haspopup="true">Reports</button>
     </td>
</tr>
</table>

The two buttons will act as Menu Headers.

Step 3: Run the application and the result will be as shown below:

clip_image003

Step 4: In default.js, just beneath the <table>, add a <div> tag. This tag will act as a Menu. In HTML we do not have any <Menu> tags as such. Fortunately, the Windows Library for JavaScript provides a new attribute to Html elements as ‘data-win-control’. Using this property, we can set the behavior for the HTML. For our current scenario, the <div> tag will now be used to display a Menu, so the HTML will be set as shown below:

<!--The Master Menu-->
<div id="mnuMaster" data-win-control="WinJS.UI.Menu">
    <button data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'menuItemNewStockist',label:'New Stockist'}"></button>
    <hr data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'separator1',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'menuItemNewStockist',label:'New Doctor'}"></button>
    <hr data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'separator2',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'menuItemNewStockist',label:'New Order'}"></button>
</div>
<!--Master Menu Ends Here-->
<!--Menu for Reports-->
<div id="mnuReports" data-win-control="WinJS.UI.Menu">
    <button data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'menuItemCitywiseDoctors',label:'City wise Doctors'}"></button>
    <hr data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'separator3',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'menuItemCitywiseStockist',label:'City wise Stockist'}"></button>
    <hr data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'separator4',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'menuItemStockistwiseOrders',label:'Stockist wise Orders'}"></button>
    <hr data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'separator5',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand"
    data-win-options="{id:'menuItemDoctorwiseOrders',label:'Doctor wise Orders'}"></button>
</div>
<!--Reports Menu Ends Here-->

The above HTML code shows the two <div>’s with id as ‘mnuMaster’ and ‘mnuReports’ respectively. Since these will be used as Menu, they have the ‘data-win-control’ attribute set to ‘WinJS.UI.Menu’. These <div> contains <buttons>. These buttons will act as menu items. The menu item is set using ‘data-win-control’ attribute of every button set to ‘WinJS.UI.MenuItem’. The ‘data-win-options’ attribute set for button, shows id of the menu item and its caption using ‘label’ property.

Step 5: To process elements that are currently present on page, the WinJS.UI.processAll() function must be called. This function provides declarative control binding to all elements. This function must be used asynchronously. Add the <script> on default.html and add the below JavaScript function:

//Method to Show Masters menu
function showMastersMenu(mnu,parent,loc)
{
    mnu.winControl.show(parent,loc);
}
function headMastersMenu()
{
    showMastersMenu(mnuMaster, btnMaster, "bottom");
}

//Method to Show Reports Menu
function showReportsMenu(mnu, parent, loc) {
    mnu.winControl.show(parent, loc);
}
function headReportsMenu() {
    showReportsMenu(mnuReports, btnReports, "bottom");
}

The above functions will be used to show menu when button ‘Master’ and ‘Reports’ are clicked.

Step 6: To process elements in the <script>, call the WinJS.UI.processAll function as shown below:

WinJS.UI.processAll().then(function () {
    //Register Events
    document.getElementById('btnMaster')
    .addEventListener("click", headMastersMenu, false);
    document.getElementById('btnReports')
    .addEventListener("click", headReportsMenu, false);
});

The above scripts shows that the WinJS.UI.processAll() is called asynchronously and after the execution of the processAll() method, the elements ‘btnMaster’ and ‘btnReports’ are associated with the ‘click’ event using ‘addEventListener’ method. This method accepts the reference of the JavaScript method, which gets executed when the button is clicked.

Step 7: Run the application and click on ‘Master’ button, the result will be as shown below:

clip_image004

This creates a Menu.

Step 8: Now a major requirement is that we need to provide Menu-Driven experience to the end-user. This means that when any Menu Item is selected, the concerned window must be shown. This is just like a dialog box. In Windows Store applications, this is possible using WinJS.UI.Flyout object. This object displays a lightweight UI. To implement this, add a new <div> tag in the default.html as below:

<!--The Flyout for New Stockiest-->
<div id="newStockiestFlyout"  data-win-control="WinJS.UI.Flyout">
    <p>
        <label>Stockist Name</label>
        <br />
        <span id="StockistNameError"></span>
        <input type="text" id="StockistName"  required="required"/>
    </p>
     <p>
        <label>Address</label>
        <br />
        <span id="addressError"></span>
        <textarea id="StockistAddress" required="required"></textarea>
    </p>
     <p>
        <label>Owner</label>
        <br />
        <span id="ownerError"></span>
        <input type="text" id="stockietsOwner"  required="required"/>
    </p>
    <p>
        <label>Phone No.</label>
        <br />
        <span id="phoneError"></span>
        <input type="number" id="StockistPhone"  required="required"/>
    </p>
    <p>
        <label>Mobile</label>
        <br />
        <span id="mobileError"></span>
        <input type="number" id="StockistMobile"  required="required"/>
    </p>
    <p>
        <label>Email</label>
        <br />
        <span id="emailError"></span>
        <input type="email" id="StockistEmail"/>
    </p>
    <p>
        <button id="btnSaveStockist">Save</button>
    </p>
</div>
<!--Ends Here-->

The above code shows the <div> tag with id ’newStockistFlyout’ has the ‘data-win-control’ attribute set to ‘WinJS.UI.Flyout’. This <div> has additional UI elements for Stockist information entry.

Step 8: Initially we want this <div> to be hidden, so inside the WinJS.UI.processAll() asynchronous method, add the following lines:

document.getElementById('menuItemNewStockist').addEventListener("click", newStockist, false)

var divNewStockist = document.getElementById('newStockistFlyout');
divNewStockist.style.display = "none"; //block is the other Value

The above code associates a ’newStockist’ method to the ‘menuItemNewStockist’ menu item’s click event. The <div> tag ‘newStockistFlyout’ has its display style set to “none”, which means hidden.

Step 9: Add the following two JavaScript methods under <script> in default.html. These methods are used to display the Flyout which provides lightweight UI for new Stockist entry.

//Method for showing NewStockist
function shownewstockist(mnu,parent,loc)
{
    mnu.winControl.show(parent,loc);
}

function newstockist()
{
     var mnu = document.getElementById('menuItemNewStockist');
     newStockistFlyout = document.getElementById('newStockistFlyout');
     newStockistFlyout.style.display = "block";
     shownewStockist(newStockistFlyout, mnu, "bottom");
}

The method ‘newStockist’ will be executed when ‘New Stockist’ menu item is selected by the end-user. This method reads the ‘newStockistFlyout’ <div> tag and sets its display style to ‘block’ meaning visible. The method makes call to the ‘shownewstockist’ method which shows the Flyout.

Step 10: Run the application, click on the Masterbutton and you will get a result as shown in ‘Step 7’. Click on ‘New Stockist’ and the result will be as shown below:

clip_image006

Note: The Save button functionality is not within the scope of this article. This can be implemented using WInJS object to make a call to WCF JSON service or WEB API.

Conclusion

Its easy to build a Windows Store application using the WinJs JavaScript library. WinJs has a robust set of user components to get you started.

Download the entire source code here

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by artbonn on Tuesday, September 18, 2012 3:09 AM
Can you suggest a HTML5/CSS authoring tool on Windows 8?
Comment posted by Sunil Pradhan on Wednesday, September 19, 2012 11:29 PM
Check out Expression Blend as an HTML5 authoring tool
Comment posted by Mahesh Sabnis on Thursday, September 20, 2012 12:48 AM
Hi,

Blend is a good option.

Thanks, Regards
Mahesh Sabnis
Comment posted by Anon on Thursday, November 29, 2012 12:30 AM
Thanks for such a detailed explanation

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

FREE .NET MAGAZINES

Free DNC .NET Magazine

Tags

JQUERY COOKBOOK

jQuery CookBook