Elements of a Windows Store App
When writing Windows Store apps, you can take advantage of many of the new features of HTML5 and related standards. Here is a list of some of the most important of these new features:
- Form Validation Attributes—You can take advantage of the new validation attributes in the HTML5 standard to perform form validation. I discuss these new validation attributes and how you can use them in a Windows Store app in Chapter 5, “Creating Forms.”
- data-*—The data dash star standard enables you to add custom attributes to existing HTML5 elements. The WinJS library uses data-* for declarative data-binding and declarative control instantiation.
- Indexed Database API (IndexedDB)—The Indexed Database API exposes a database in the browser. If you need to store a list of products in a database within a Windows Store app, then you can take advantage of IndexedDB. I explain how to use IndexedDB in Chapter 9, “Creating Data Sources.”
- File API—The HTML5 File API enables you work with files in the browser. We used the HTML5 API in the previous section when building our first Windows Store app (the URL.createObjectURL() method).
- Web Workers—Enables you to execute background tasks without blocking the user interface thread.
Cascading Style Sheets 3
When you build Windows Store apps, you can take advantage of several new features of the Cascading Style Sheets 3 standard (and related standards) including the following:
- Media Queries—Enables you to apply different styles depending on the characteristics of a device, such as the height, width, or orientation of the device. I discuss Media Queries in Chapter 11.
- CSS3 Grid Layout—Enables you to lay out HTML content in columns and rows without using HTML tables.
- CSS3 Flexible Box Layout (FlexBox)—Enables you to preserve relative element position and size when displaying HTML content in different devices.
For example, when we wrote our first Windows Store app, we took advantage of the WinRT Windows.Media.Capture.CameraCaptureUI class. When we called the CameraCaptureUI.captureFileAsync() method, we were able to take a picture.
var captureUI = new Windows.Media.Capture.CameraCaptureUI ();
- Geolocation—Use the WinRT Windows.Devices.Geolocation.Geolocator class to get your current latitude and longitude.
- File Access—Read and write to the file system by taking advantage of the WinRT classes in the Windows.Storage namespace.
- Compass—Always know the direction of True North with the Windows.Devices.Sensors.Compass class.
- Print—Print from your Windows Store app by using the Windows.Printing.PrintManager class.
- Compress Files—Compress and decompress files using the classes in the WinRT Windows.Storage.Compression namespace.
The WinJS library contains all of the WinJS controls. These are the controls that you use to build the user interface for your Windows Store app. For example, the WinJS library includes a DatePicker control that displays a user interface widget for selecting a date.
What About jQuery?
The answer is yes. You can use jQuery when building Windows Store apps. Let me show you.
The easiest way to add jQuery to a Windows Store app project is to use the Library Package Manager in Visual Studio. Select the menu option Tools, Library Package Manager, Package Manager Console. Enter the command install-package jQuery into the Package Manager Console window (see Figure 1.14).
FIGURE 1.14 Adding jQuery with the Library Package Manager Console
Executing the install-package jQuery command adds a Scripts folder with four files: the full version of jQuery, the minified version of jQuery, an IntelliSense file, and a source map. The IntelliSense file enables Visual Studio to provide jQuery intellisense when you use jQuery methods and the source map provides debugging support.
LISTING 1.3 Using jQuery in a Windows Store App
The page in Listing 1.3 contains a Button and a DIV element. The contents of the DIV element are hidden by default (with display:none). When you click the button, the contents of the DIV fade slowly into view (see Figure 1.15).
FIGURE 1.15 Using jQuery to animate a DIV element
Microsoft worked directly with the jQuery team to ensure that jQuery 2.0 works correctly with Windows Store apps. As long as you are using a version of jQuery more recent than jQuery 2.0 then you should not encounter any issues.