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 CSS 3 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 like indexOf() and forEach(). You also can use property setters and getters and “use strict”.
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 8, “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.
- Canvas—Enables you to draw graphics using JavaScript. I provide you with an introduction to Canvas in chapter 12, “Graphics and Games.”
- 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:
- Media Queries—Enables you to apply different styles depending on the characteristics of a device such as the height, width, or view state of the device. I discuss Media Queries in Chapter 9.
- 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 which 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:
varcaptureUI =newWindows.Media.Capture.CameraCaptureUI();
The WinRT classes extend JavaScript with all of the functionality that you need when building a Windows application. All of the stuff that you are not allowed to do—or that it does not even make sense to do—when building a website. 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, which 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 whether or not you can use jQuery when building Windows store apps?
The answer is yes. 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 three files: the full version of jQuery, the minified version of jQuery, and an intellisense file. The intellisense file enables Visual Studio to provide jQuery intellisense when you use jQuery methods.
Listing 1.3 contains a combined HTML and JavaScript file which uses jQuery.
Listing 1.3. Using jQuery in a Windows Store App
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>jQueryWindows8</title><!-- WinJS references --><linkhref="//Microsoft.WinJS.1.0/css/ui-dark.css"rel="stylesheet"/><scriptsrc="//Microsoft.WinJS.1.0/js/base.js"></script><scriptsrc="//Microsoft.WinJS.1.0/js/ui.js"></script><!-- jQueryWindows8 references --><scripttype="text/javascript"src="Scripts/jquery-1.7.2.js"></script><styletype="text/css">#divMessage{display:none;padding:10px;border:solid1pxwhite;background-color:#ff6a00; }</style></head><body><buttonid="btnShow">Click Here</button><divid="divMessage">Secret Message</div><scripttype="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).
){kind=link}
Figure 1.15. Using jQuery to animate a DIV element