This chapter is from the book
This chapter is from the book
This chapter is from the book
Elements of a Windows Store App
As we saw in the previous section, a Windows Store app is built using several technologies. A Windows Store app is built out of a combination of open and familiar web technologies, such as HTML5, JavaScript, and CSS3 and Microsoft technologies such as the Windows Library for JavaScript and the Windows Runtime. Let me say a little more about each of these elements of a Windows Store app.
JavaScript
This book is all about writing Windows Store apps using JavaScript. As an alternative to JavaScript, you also could write Windows Store apps using C#, Visual Basic, or even C++.
When writing Windows Store apps, you can take advantage of the features of ECMAScript 5 which is the latest version of JavaScript. This means that you can use the new JavaScript Array methods such as indexOf() and forEach(). You also can use property setters and getters and the use strict statement.
HTML5
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).
- Canvas—Enables you to draw graphics using JavaScript. I provide you with an introduction to Canvas in Chapter 15, “Graphics and Games.”
- Web Workers—Enables you to execute background tasks without blocking the user interface thread.
- WebGL—This is new with Windows 8.1. WebGL enables you to build 3D games with JavaScript.
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.
Windows Runtime
The Windows Runtime (WinRT) contains a class library that you can use in your Windows Store apps. These classes are projected directly into JavaScript, so they appear to be built-in JavaScript objects.
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.
All of the WinRT classes are exposed in JavaScript from the root Windows namespace. For example, you create an instance of the CameraCaptureUI class with the following code:
var captureUI = new Windows.Media.Capture.CameraCaptureUI ();
The WinRT classes extend JavaScript with all of the functionality that you need when building a Windows application. These classes enable you to do fun and amazing things such as:
- 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.
Windows Library for JavaScript
The Windows Library for JavaScript (WinJS) is a pure JavaScript library created by Microsoft specifically for building Windows Store apps. Understanding how to use this library is the primary focus of this book.
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?
jQuery is the most popular JavaScript library in the universe. An obvious question, therefore, is can you use jQuery when building Windows store apps?
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 contains a combined HTML and JavaScript file that uses jQuery.
LISTING 1.3 Using jQuery in a Windows Store App
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQueryWindows8</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- jQueryWindows8 references -->
<script type="text/javascript" src="Scripts/jquery-2.0.2.js"></script>
<style type="text/css">
#divMessage {
display:none;
padding:10px;
border: solid 1px white;
background-color: #ff6a00;
}
</style>
</head>
<body>
<button id="btnShow">Click Here</button>
<div id="divMessage">
Secret Message
</div>
<script type="text/javascript">
$("#btnShow").click(function () {
$("#divMessage").fadeToggle("slow");
});
</script>
</body>
</html>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.