Invoking Camera Using WinJS

Introduction

Couple of days back, I got a task to capture image of an user. The image area is very limited in size. The user has to crop the image as per the required size and area to display. Before start worrying about the same, I was glad to see the features provided by WinJS.

We can use Windows.Media.Capture.CameraCaptureUI to invoke the camera and capture image. This not only shows the camera UI on screen but also displays the cropping options along with pixel adjustment and timer options.

Below is just a simple example of how it works.

HTML PART:-

<body>
    <input type="button" id="btnOpenCamera" value="Open Camera" />
    <br />
    <img src="#" id="imgCapture" alt="Caputured Image" style="display:none" />
</body>

We have added a button to open the camera and an image control to display the captured image on screen.

Continue reading

One Way Data Binding In WinJS

Introduction
Data binding is one of the key feature in the application development. One way data binding is the way to reflect the data in the control from a model. Any up-gradation made to the data in the model it will reflect in the control to which it is bound.

One way data binding
Below is a one way binding application example to see how it is really working. Let’s add a page item to the project. This will add 3 files in general. One JS file, Html file and a CSS file with the same name specified for the page item.

Continue reading

Displaying popups Using Flyouts WinJS Control

Introduction

Flyouts are also a kind of popup. They appear on the screen on request. Unlike the dialogs, flyouts are usually non-modal. It is a WinJS control which can be customized basing upon the requirement.

Unlike the dialogs, Flyouts can be closed by clicking somewhere in the screen area out side the flyout itself. We can customize the look feel along with the display position of the flyout.

Continue reading

Displaying Dialogs in WinJS

Introduction
Dialogs are the one of the most basic part of an application. Usually we need dialogs to inform the user about some kind of notifications or to take the quick user input on screen without navigating to a separate page of the application. We can display also dialogs in widows store application.

Informative Dialogs
This kind of dialogs are the one which usually used to notify the user about any information. It has an information in the body with a button to close the dialog.

Continue reading

Choosing a Project Template While Creating a Windows Store Application in WinJS

Introduction:
As a WinJS application programmer, we need to choose a right project template to begin with the application. Templates are the pre-built frames to support the programmers with some pre-written code architectures. So we need to choose the correct template among them.

Visual studio offers 6 types of templates for WinJS as follows.

Continue reading

Binding Data to the Controls using WinJS

While working with projects, data binding is one of the most important factor for any application. We need to bind the data to the controls in order to display the same to the user. After any successful data insertion data viewing plays a great role. So the user can verify their data on screen. WinJS provides an extensive support for the same as well.

Continue reading