jQWidgets eStore Mobile PhoneGap App for Windows Phone 8

In this tutorial, you will learn how to port the jQWidgets eStore example to the Windows Phone 8 mobile operating system using PhoneGap/Apache Cordova.

You may also be interested in the porting tutorials for Android, BlackBerry 10 or iOS.

1. Getting Started

Before you proceed with reading this tutorial, please make sure you are familiar with the beginner's Windows Phone 8 tutorial, which deals with how to set up your system and mobile device in detail.

2. Create a New Project

Once you have installed the Cordova project template (Step 2 from the beginner's tutorial), open Microsoft Visual Studio and create a new Cordova project (Step 3), named eStore:

3. Add the Application Source Code

The next step is to include the application's source code and other necessary files (including data sources and images) to the Cordova project. All these files should be put in the www folder.

The files which have to be included are:

• index.html - contains the app's HTML structure and references to all needed files. You can find the source code of index.html here;
• functionality.js - contains the app's functionality. You can find the source code of functionality.js here;
• laptops.txt - contains all the eStore product data;
• jquery-1.11.1.min.js - jQuery script file;
• jQWidgets JavaScript files - needed to initialize all jQWidgets controls:
  • jqxcore.js;
  • jqxdata.js;
  • jqxbuttons.js;
  • jqxscrollbar.js;
  • jqxmenu.js;
  • jqxdatatable.js;
  • jqxtabs.js;
  • jqxwindow.js;
  • jqxinput.js;
  • jqxpasswordinput.js;
  • jqxvalidator.js;
  • jqxscrollview.js.
• jQWidgets CSS files:
  • jqx.base.css - main CSS file;
  • jqx.darkblue.css - Dark Blue theme file.
• image files.

Here is the structure of the www folder with all files included:

4. Run the Application

You can now test your app on your Windows Phone 8 device or the emulator. To do so, select Device or any of the emulator options:

Then start debugging the application (press F5). It will be installed on your mobile device and displayed onscreen.

You can download the whole project from here.