In this article we will learn about Rating Control,Flip View Control,Flyout Control,List View Control,Progress Bar Control,Tooltip object,App Bar Control.
Introduction
This is the second day of the learning series where we will learn about some of the WinJS controls which are listed as under
- Rating Control
- Flip View Control
- Flyout Control
- List View Control
- Progress Bar Control
- Tooltip object
- App Bar Control
1.Rating Control
Purpose:Provides an intuitive rating experience that allows users to select the number of stars that represents their rating.It comes in 3 categories : Average rating, Tentative rating and User's rating
Experiment
In this experiment we will perform a Candidate self rating system for interview process.When a candidate appears for an interview, he/she will be asked to rate themselves on a scale of 5 for a particular technology. Our small application will track that.
The final output will be
The design (default.html) will be as
<body>
<table border="1">
<tr>
<td><b>SlNo.</b></td>
<td><b>Technologies</b></td>
<td><b>Candidate Rating</b></td>
<td><b>Load Rating</b></td>
<td><b>Display Rating</b></td>
</tr>
<tr>
<td>1.</td>
<td>Rate yourself in C#</td>
<td><div id="ratingCSharp" data-win-control="WinJS.UI.Rating" /></td>
<td><button id="btnRatingCSharp">C# Rating</button></td>
<td><label id="lblCSharpRating"></label></td>
</tr>
<tr>
<td>2.</td>
<td>Rate yourself in Metro Style Apps</td>
<td><div id="ratingMetroStyleApps" data-win-control="WinJS.UI.Rating" /></td>
<td><button id="btnRatingMetroStyleApps">Metro Style Rating</button></td>
<td><label id="lblMetroStyleApps"></label></td>
</tr>
</table>
</body>
The data-win-control helps to host the specified Windows Library for JavaScript control in a div control. Here we are hosting a "Rating" control
The default.js file will be as
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
//add event listeners for the controls
document.getElementById("btnRatingCSharp").addEventListener("click", GetRating, false);
document.getElementById("btnRatingMetroStyleApps").addEventListener("click", GetRating, false);
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function GetRating(event) {
//get the operators i.e. button text
var operator = event.srcElement.innerText;
switch (operator) {
case "C# Rating": CSharpRating(); break;//Rating for C#
case "Metro Style Rating": MetroStyleRating(); break;//Rating for Metro Style
}
}
function CSharpRating() {
// Retrieve the div that hosts the C# Rating control.
var ratingControlDiv = document.getElementById("ratingCSharp");
// Retrieve the actual Rating control.
var ratingControl = ratingControlDiv.winControl;
document.getElementById("lblCSharpRating").innerText = ratingControl._userRating;
}
function MetroStyleRating() {
// Retrieve the div that hosts the C# Rating control.
var ratingControlDiv = document.getElementById("ratingMetroStyleApps");
// Retrieve the actual Rating control.
var ratingControl = ratingControlDiv.winControl;
document.getElementById("lblMetroStyleApps").innerText = ratingControl._userRating;
}
app.start();
})();
Here, depending on the technology type we are capturing the rating values being specified by the candidates.
Please visit WinJS.UI.Rating object (Windows) for more information
2.Flip View Control
Purpose:Provides a way to perform a slide show.
Experiment
Let's say that we have 4 images and we want to perform a slide show for them.In that case this kind of control will be the right choice.
Let us first look at the data source that we have created in a seperate file call "DataSource.js"
(function () {
"use strict";
//the data
var listData = [
{ name: 'Flower-1', photo: "images/1.png" },
{ name: 'Flower-2', photo: "images/2.png" },
{ name: 'Flower-3', photo: "images/3.png" },
{ name: 'Flower-4', photo: "images/4.png" }
];
var dataList = new WinJS.Binding.List(listData);
var dataMembers = { itemList: dataList };
//namespace
WinJS.Namespace.define("SourceData", dataMembers);
})();
Here we have created our own data source which is a JSON object.Also we have created "SourceData" as the namespace so as to call this "itemList" property where we have assigned our data source from the View prespective
Now let us look into the View (default.html)
<body>
<div id="template" data-win-control="WinJS.Binding.Template">
<img src="#" data-win-bind="src:photo;" />
</div>
<div id ="divFipViewExample"
data-win-control="WinJS.UI.FlipView"
data-win-options="{itemDataSource :SourceData.itemList.dataSource, itemTemplate:select('#template')}"
style="height: 500px ; width: 800px"/>
</body>
Since it is a FlipView, so the "data-win-control" type is "WinJS.UI.FlipView" . In the "data-win-options", we are specifying the entire JSon collection object as the datasource.From there,
we are picking up the "photo" property and binding that with the "img" control's source property.
Final output
Please visit WinJS.UI.FlipView object (Windows) for more information
3.Flyout Control
Purpose:A popup control that appears when we click on a button.
Experiment
We will perform a simple experiment where we will have a normal screen where user will enter 2 numeric value in two text boxes and a button by the name "Open Popup" will be there.When the user will click on that,then the Popup will appear.The popup will contain three textboxes out of which two will be pre-populated depending on the value user has entered from the parent screen. A button by the name "Summation" be appear upon clicking which the summation will appear on the the "Result" textbox.
Let us first see the Html Code
<body>
<button id="btnOpenPopUp">Open Popup</button>
<table>
<tr>
<td> <span>Enter 1st number</span></td>
<td><input id="Text1" type="text" /></td>
</tr>
<tr>
<td> <span>Enter 2nd number</span></td>
<td><input id="Text2" type="text" /></td>
</tr>
</table>
<div id="viewFly" data-win-control="WinJS.UI.Flyout">
<table>
<tr>
<td> <span>Enter 1st number</span></td>
<td><input id="txtFirstNumber" type="text" /></td>
</tr>
<tr>
<td> <span>Enter 2nd number</span></td>
<td><input id="txtSecondNumber" type="text" /></td>
</tr>
<tr>
<td> <span>Result</span></td>
<td><input id="txtResult" type="text" /></td>
</tr>
</table>
<button id="btnAdd">Summation</button>
</div>
</body>
If we run this at this point, we will receive
Now let us write the function.Let us put the below code in default.js file
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
btnOpenPopUp.addEventListener('click', function () {
//assign the value of the parent control to the Popup controls
document.getElementById('txtFirstNumber').value = document.getElementById('Text1').value;
document.getElementById('txtSecondNumber').value = document.getElementById('Text2').value;
//Add event listener to the "btnAdd"
document.getElementById('btnAdd').addEventListener('click', DoOperation, false);
//show the Flyout div. i.e. popup
document.getElementById('divFlyoutSample').winControl.show(btnOpenPopUp);
});
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function DoOperation(event)
{
//placeholders
var firstInputValue = document.getElementById('txtFirstNumber').value;
var secondInputValue = document.getElementById('txtSecondNumber').value;
//display the result
document.getElementById("txtResult").value = parseInt(firstInputValue) + parseInt(secondInputValue);
}
app.start();
})();
In the parent page we have "Open Popup" button(btnOpenPopUp).First we are attaching an event handler to it.Next we are assigning the value of the Parent textbox controls to the Popup controls.Next we are
attaching the event handler to the "Summation" button(btnAdd) which is present in the popup control i.e. Flyout control.And finally we are making the Flyout control visible. So once the Flyout control load, it's first two textboxes will be pre-populated with the parent textbox values.Upon clicking on the "Summation" button, the addition will happen.
4.ListView Control
Purpose:Use to display data.
Experiment
Here we will have a small data source in JSON format that we will bind to the ListViewControl.
So first the data source i.e. the content of DataSource.js file
(function () {
"use strict";
var sourceData = [
{ Name: 'Joshep Joes', Age:"30", Salary:9000, pic:"images/1.png" },
{ Name: 'Manik Dey', Age: "20", Salary: 6000, pic: "images/2.png" },
{ Name: 'Kiran Reddy', Age: "24", Salary: 19000, pic: "images/3.png" },
{ Name: 'Bhaskar Dey', Age: "40", Salary: 50000, pic: "images/4.png" }
];
var datalist = new WinJS.Binding.List(sourceData);
var dataMembers = { itemList: datalist };
WinJS.Namespace.define("SourceData", dataMembers);
})();
Nothing new to explain.We have a collection of entities that has "Name", "Age" and "Salary" as attributes.This data we will bind to our ListView control.
So, now let us look into the view (i.e. default.html)
<body>
<div id="divDisplayItems" data-win-control="WinJS.Binding.Template">
<div>
<table border="1">
<tr>
<td><b>Name</b></td>
<td><b>Age</b></td>
<td><b>Salary</b></td>
<td><b>Image</b></td>
</tr>
<tr>
<td><h4 data-win-bind="innerText: Name"></h4></td> <!-- Displays the "Name" field. -->
<td><h4 data-win-bind="innerText: Age"></h4></td> <!-- Displays the "Age" field. -->
<td><h4 data-win-bind="innerText: Salary"></h4></td> <!-- Displays the "Salary" field. -->
<td><img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: Name; src: pic" /></td> <!-- Displays the "Image" field. -->
</tr>
</table>
</div>
</div>
<div
id="basicListView"
style="width:250px;height:500px"
data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource :SourceData.itemList.dataSource, itemTemplate: select('#divDisplayItems'),layout : {type: WinJS.UI.ListLayout}}">
</div>
</body>
We are making the DIV(divDisplayItems) as our item template (data-win-control="WinJS.Binding.Template") .The individual items are holding the data using
data-win-bind="innerText: <Attribute Name>"
The output is as under
If we change the layout type to "GridLayout" e.g. layout : {type: WinJS.UI.GridLayout}, then the we will get a horizontal orientation
Please visit Adding a ListView (Windows Store apps using JavaScript and HTML) for more information
5.Progressbar Control
Purpose:Provides a visual impression about the application progress.
Type
It is of 3 types :
- Determinate Progress Bar
- Indeterminate Progress Bar
- Indeterminate Progress Ring
Please visit Adding progress controls (Windows Store apps using JavaScript and HTML) (Windows) for more information
6.ToolTip Element
Purpose:To display tooltip.
Experiment
In this small experiemnt, we will have a label control and whenever the user will being the mouse pointer on that, the tooltip will get display
The html code is as under
<body>
<div data-win-control="WinJS.UI.Tooltip" data-win-options="{contentElement: divContent}">
<label id="lblMyDetail">Find my detail</label>
</div>
<div style="display: none;">
<!--Here is the content element.
It's inside a hidden container so that it's
invisible until the tooltip displays it. -->
<div id="divContent">
<div id="divImage">
<img src="images\1.png" width="200px" height="200px" />
</div>
<div id="divDescription">
<p>I am a software Engineer</p>
</div>
</div>
</div>
</body>
We are using "WinJS.UI.Tooltip" as the data-win-control type and we have a DIV by the name "divContent" that holds the tooltip information.This DIV (divContent) we are invoking
from the main div above the label control.
Here is the output
Please visit Tooltip.contentElement property (Windows) for more information
7.Appbar control
Purpose:Represents the container control that holds app UI components for commanding and experiences.
Experiment
We will add a button (say "Previous") to the application.
The html code is as under
<body>
<div data-win-control="WinJS.UI.AppBar" id="appbar" >
<button id="btnPrevious" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{label:'Back',icon:'\uE112',tooltip:'back'}"></button>
</div>
</body>
and the default.js file is as under
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
btnPrevious.addEventListener('click', NavigateEventHandler);
document.getElementById('appbar').winControl.show();
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function NavigateEventHandler() {
//do something here
}
app.start();
})();
Once run, we will get the below output
References
- data-win-control property (Windows)
Conclusion
In this article we have seen some of the frequently use controls in Windows 8 Metro apps. We will explore more in subsequent articles.Hope Thanks for reading