Flyout control in Windows 8 HTML JavaScript Metro Application

In this post, I will discuss how to work with Flyout in Windows 8 Metro application. Flyout is a type of UI surface in Windows 8 metro application. It is used to show simple message or popup. If user touches or clicks anywhere on the screen then Flyout disappears. It usually used to collect simple user information or show some message. Flyout should be as simple as possible. It should not have complex UI. A usual flyout can be like below,

image

Flyout can be created deceptively as below.

clip_image002

Inside Flyout we can put any HTML elements. As purpose of this post I am going to put sports as option and user can select out of that options. After putting sports options Flyout div will get modified as below,

clip_image004

User can select sports from above Flyout. As the design of the page, we have put a button and output div. We are going to popup a fly out on click event of a button. On selection of a sports option in Flyout, we will display that in output div and Flyout will disappear.

Default.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WinWebApp1todelete</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/ui.js"></script>
<script src="/winjs/js/binding.js"></script>
<script src="/winjs/js/controls.js"></script>
<script src="/winjs/js/animations.js"></script>
<script src="/winjs/js/uicollections.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
<button id="butonchooseSports" type="button"
style="margin-left:900px;
margin-top:20px;font-size:x-large">
Choose Sports
</button>
<div id="sportsFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Format text flyout}">
<label for="scenario3TextColor">choose sports</label>
<br />
<select id="scenario3TextColor">
<option value="cricket">Cricket</option>
<option value="football">FootBall</option>
<option value="hocky">Hocky</option>
<option value="tenis">Tenis</option>
<option value="rugby">Rugby</option>
<option value="golf">Golf</option>
</select>
</div>
<div style="margin-left:900px;
margin-top:300px;font-size:x-large" id="outputDiv"></div>
</body>
</html>

In code behind on click event of the button Flyout can be shown as below function.

clip_image002[8]

Here we are,

  • Selecting Flyout div as win control.
  • Calling Show function to display Flyout.
  • There are input parameters of Show function. First parameter is id of button. On click event of this input button Flyout will get displayed.
  • Second parameter is position of the Flyout. Other possible value of this parameter could be top.

We are putting all code together as below,

Default.js


(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);
var choosesportsbutton;
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// TODO: startup code here

WinJS.UI.processAll().then(function () {
choosesportsbutton = document.getElementById("butonchooseSports");
choosesportsbutton.addEventListener('click', showflyout);



});
}

function showflyout()
{
var flyOut = document.getElementById("sportsFlyout").winControl;
flyOut.addEventListener('change', ChangedSportsValue);
flyOut.show(choosesportsbutton, "bottom");
}

function ChangedSportsValue(e) {

var res = document.getElementById('scenario3TextColor').value;
document.getElementById('outputDiv').innerText = "You have selected " + res;
}
}

WinJS.Application.start();
})();


In above code we are,

  • Displaying Flyout
  • Attaching change event on sports option list. In this post Id of Sports option in Flyout div is seenario3TextColor
  • Attaching click event to button and on click showing Flyout.
  • Displaying selected sports in output div

If you run, on the click event of button you should get Flyout to choose the sports as below,

image

I hope this post is useful. Thanks for reading

 

Message Dialog Control in Windows 8 HTML JavaScript Metro Application

In this post, I will discuss how to work with Message Dialog in Windows 8 Metro application. I will use WinJS to create message dialog. Message dialog look like below,

image

Message Dialog is part of UI surfaces in Windows 8. There are four types of UI surfaces in Windows 8.

  1. App Bar
  2. Context Menu
  3. Message Dialog
  4. Fly Out

We are going to popup a message dialog box on click event of a button. Let us put a button and output span on default.html as below,

Default.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DataBindingSample</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- DataBindingSample references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
<h2>metro message dialogĀ  demo</h2>
<br />
<button id="btnShowMessage" > Want to Make a call </button>
<br />
<span id="resultDiv" />
</body>
</html>

We are going to display result out of user selection in message dialog box on the span resultDiv.

Message Dialog can be created by making a call to below function.

clip_image002

Windows.UI.Popups.MessageDialog function is overloaded. It either takes content or content and title both as input parameters.

Message dialog can be created with content and title as below,

clip_image004

Once we have created message dialog, we need to add commands to that. Command can be added as below,

clip_image006

We can add as many commands as we want in the same way. After adding all the commands we need to start operation as below,

clip_image008

By putting all codes together code behind will have below codes.

Default.js


(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);

WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

// TODO: startup code here
//adding click event to button
var buttonToPopup = document.getElementById('btnShowMessage');
buttonToPopup.addEventListener('click', function()
{
ShowPopUp();
});
}
}

function ShowPopUp() {

var resultDiv = document.getElementById('resultDiv');

//Creating message dialog box
var messagedialogpopup = new Windows.UI.Popups.MessageDialog
('Allow to use your location ',
'Location Application');


// adding command to message dialog box

messagedialogpopup.commands.append(new Windows.UI.Popups.UICommand('yes', function () {
//calling callback function for Yes command
resultDiv.innerHTML = "<h2>Yes</h2>";
}));

messagedialogpopup.commands.append(new Windows.UI.Popups.UICommand('no', function () {
//calling callback function for No command

resultDiv.innerHTML = "<h2>no</h2>";
}));


messagedialogpopup.commands.append(new Windows.UI.Popups.UICommand('Yes but with limitd data', function () {
//calling callback function for Yes but with limited data command

resultDiv.innerHTML = "<h2>Yes but with limited data</h2>";
}));

messagedialogpopup.showAsync().operation.start();



}

WinJS.Application.start();
})();


On running you should be getting below message dialog on click event of the button.

clip_image002[6]

I hope this post is useful. Thanks for reading

Consuming JSON in Windows 8 Metro style Application using WinJS

In this post I will discuss way of consuming JSON service in Windows 8 metro style application. In this post,

  • Metro app is created using HTML 5 and Service is being consumed using WinJS
  • Service is created service using WCF and REST is on service using webHttpBinding.

Since creating simple REST Service returning JSON is not main focus of this post, so I will show creation WCF REST Service returning JSON in later part of this post.

Consuming JSON using WinJS

We need to consume service in HTML 5 Metro application. Very first let us design HTML page

default.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorldJavaScript</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- HelloWorldJavaScript references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
<label >First Number</label>
<input id="TextboxFirstNumber" type="text" />
<br/>
<label >Second Number</label>
<input id="TextboxSecondNumber" type="text" />
<br />
<button id="ButtonAdd">+</button>
<br />
<span id="SpanResult" />
</body>
</html>

I have put a button and two text boxes. User will input number to be added in textboxes and on click event of the button service would get called.

In JS file to make call to REST Service returning JSON, we need to make call using WinJS.xhr.

image

In above snippet

  1. url is URL of REST Service
  2. Using JSON.parse we are parsing returned text
  3. ResultSpan is span in which result is being displayed.

Putting all code together as below,

default.js


(function () {
'use strict';


WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {



Calculator();

}
function Calculator() {
var Number1 = document.getElementById('TextboxFirstNumber');
var Number2 = document.getElementById('TextboxSecondNumber');
var ResultSpan = document.getElementById('SpanResult');
var ButtonToAdd = document.getElementById('ButtonAdd');
ButtonToAdd.addEventListener('click', function () {
var baseURl = "http://test2dj8.cloudapp.net/Service1.svc/rest/add/";
var url = baseURl+Number1.value+"/"+Number2.value;
WinJS.xhr({ url: url }).then(function (r) {
var result = JSON.parse(r.responseText);
ResultSpan.innerHTML = result;
});


});

}




Creating simple Add Service

To start with let us create a WCF REST Service returning JSON as below. There is one operation contact named Add in the service and that is taking two strings as input parameters and returning integer.


[ServiceContract]
public interface IService2
{

[OperationContract]
[WebGet(UriTemplate="/Add/{Number1}/{Number2}",RequestFormat=WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json
)]
int Add(stringĀ  Number1, string Number2);


}


Service is implemented as below,


using System;

namespace MultipleBindingWCF
{

public class Service1 : IService2
{


public int Add(string Number1, string Number2)
{
int num1 = Convert.ToInt32(Number1);
int num2 = Convert.ToInt32(Number2);
return num1 + num2;
}


}
}


Next in this section we need to configure service. We need to configure service webHttpBinding to eanble it as REST Service. So in Web.Config we need to do the below changes.


<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name ="servicebehavior">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="false"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="restbehavior">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<endpoint name ="RESTEndPoint"
contract ="MultipleBindingWCF.IService2"
binding ="webHttpBinding"
address ="rest"
behaviorConfiguration ="restbehavior"/>
</service>
</services>
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>


After configuring, Service is ready for hosting. After hosting consume service in Windows 8 Metro application.

I hope this post is useful. Thanks for reading.