Windows 8 Apps: Downloading Image from the Server Using WinJS.xhr

Tweet

As we all know the WinJS library helps us build Windows 8 Store Apps in HTML5 and JavaScript. The WinJS.xhr is an important module in WinJS wherein it helps wrap cross-domain calls and provides an easy mechanism to work with external web contents using HTTP operations like GET/POST etc.

In this sample today, we will see how to make use of WinJS.xhr for downloading image file from a remote URL. The WinJS.xhr wraps call to XMLHttpResponse in a promise. The promise is the abstraction provided over the available asynchronous operations. The call made using WinJS.xhr takes several parameters as below:

• type: represent HTTP method e.g. GET,POST etc.
• url: This is the mandatory parameter which represents the URL resource.
• user: User for authentication.
• Password: The Password.
• responseType: The expected response of the call made.

You can get the more information about WinJS.xhr from here.

Note: We will use the following file to test the download. It is an image on a shared public DropBox folder (Image is CC licensed).

Using FlipView Control in Windows Store Apps using JavaScript and HTML

Tweet

For Windows Store Apps, WinJS has provided several controls for displaying data interactively. Some of the examples are SemanticZoom, GridView, ListView, FlipView etc. All these controls accept collection as data source and provides a mechanism so that end-user can easily navigate through it. On the SemanticZoom, I already have some information which you can find from Windows 8: Working with Semantic Zoom using C# and XAML.

FlipView, represents an item control which displays one item at a time and enables user to use the flip behavior which is used for traversing through the collection of items. Typically such a control is used for traversing through Product Catalog, Books information etc. Technically the FlipView is a control provided in Windows Store Apps through Windows Library for JavaScript. The data to FlipView is made available through IListDataSource. (Note: You can get data from an external web sources like, web service, WCF service, WEB API in the JSON format).

We will use the FlipView for iterating through Images that’s passed to it from the WinJS List object.

Step 1: Open VS2012 and create a new Windows Store Apps using JavaScript. Name it as ‘Store_JS_FlipView’. In this project add some images in the ‘images’ folder. (I have some images as Mahesh.png, SachinN.png,SachinS.png, KiranP.jpg).

Windows 8 Apps: Creating Picture Library Viewer using XAML GridView and C#

Tweet

When building Windows Store Apps, WinRT provides an easy mechanism to work with operating system special folders like Pictures, Videos, Music etc. WinRT has built-in APIs to access these special folders and makes it easier for developers to safely access files in here.

APIs to access files and folder groups are defined in the Windows.Storage namespace. This provides various classes to manage files, folders and application settings. One of the classes under this namespace is KnownFolders, which provides access to common locations that acts as a repository for local user content/files. Along with these libraries, it also includes removable devices, media servers etc.

A class to take note of under ‘KnownFolders’ namespace is PicturesLibrary. This class represents the Picture library on the device and can enumerate all the images in them.

Today, we will see how to work with the PicturesLibrary class and display all the Pictures (as Thumbnails) in the GridView. We will be using C# and XAML. In the following code, along with the PicturesLibrary class, we also use the following:

- QueryOptions: This is used to specify parameters for search query to iterate through the storage folder’s contents.

Windows 8 Store Apps: Working with the Contact Picker (C# + XAML)

Tweet

Windows 8 has been out for 3+ months now and is doing rather well according to official Microsoft reports. The new Windows 8 Store Application model makes available a set of useful applications out of the box e.g. Contact, Mail, Photos, Messaging etc.

Windows 8 also comes with various extensibility points, referred to as the ‘Charms’ that can be accessed programmatically in the Windows 8 Store Apps. These extension points, help applications interchange data via OS level interfaces. For example you can share information with another app via the ‘Share Charm’. You can refer to my previous article on Share Charms posted here.

Selecting Contacts using the Contact Picker

When building your own Windows 8 Store apps, you can use some of these applications for your specific needs too. Today we will see one such example where you can pick some of the contacts in your contacts list that can eventually be shared through the mail application.
In this walkthrough, we will see how to use the Contact Picker and select single or multiple contacts.

The Walkthrough

The Contact application on the Windows 8 synchronizes with your contacts on Windows Live, Facebook, and Linkedin etc. To display the ContactPicker, the below class is used:

Windows.ApplicationModel.Contacts.ContactPicker

A Windows Store App using JavaScript for Accessing Camera

Tweet

The WinJS library for WinRT applications allow us to build Windows 8 style apps using HTML5 and JavaScript.

In this article, we will build a sample application, and demonstrate the use of Media APIs exposed for accessing Camera device to capture the image.

As Windows 8 will be available on the Tablet, it may happen that the end-user will take snaps with the device and may want to make use of the application to capture a photo and upload it. A business scenario could be that an accident insurance inspector will take snaps of the incident using his device and will upload the images immediately to the insurance office for further processing. This scenario requires an application which will take the snap and upload it.

In the steps shown below, I have explained the use of JavaScript to call Media API..

Step 1: Open VS 2012 and create a new Windows Store application, name it as ‘Store_JS_Camera’: