Hello, Windows 8! Building Your First Windows Store App
This chapter is from the book
This chapter is from the book
This chapter is from the book
Windows 8 brings together a number of ways to develop and think about developing apps. If you want to continue to build Windows desktop apps with WPF/Silverlight, Windows Forms, and/or DirectX, you are free to do so. Likewise, if you’d like to continue to build web sites using ASP.NET, HTML, and JavaScript, you’re free to do that, too. Further, if you want to build touch-centric Windows Phone apps with Silverlight or XNA, that’s OK.
However, in this book, we’re focusing on how to build a new kind of app which is a hybrid of all three of these existing kinds of apps; this hybrid is called a Windows Store app. A Windows Store app is like a desktop app in that it’s installed on your computer, unlike a web site. On the other hand, a Windows Store app is like a web site in that you can build it using HTML5, JavaScript, and CSS. However, instead of generating the UI on the server side, you’ll see that the JavaScript framework for building Windows Store apps and the underlying Windows Runtime (WinRT) allows you to build apps with client-side state, offline storage, controls, templates and binding, along with a whole host of other services. Further, because Windows 8 is a tablet OS as well as a desktop OS, Windows Store apps are meant to be used via touch like Windows Phone apps as well as with the keyboard and mouse like traditional desktop apps. Of course, the big feature of Windows Store apps is that they can be submitted into the new Windows Store that is available front and center on the new Windows 8 Start screen.
In short, Windows Store apps are meant to work across different devices, taking maximum advantage of each and merging the best parts of desktop, web, and mobile apps into a single user and developer experience, all available from the Windows Store. In this chapter, we’re going to dig into both the developer and the user experience, focusing on the former, of course, given that this is a programming book.
And because I like to start my programming books with a bit of programming, let’s get right to it.
Your First Windows Store App
A Windows Store app built using HTML, JavaScript, and CSS starts with an HTML file:
<!DOCTYPE html><html><head><title>Hello, Metro/JS</title></head><body><h1>Hello and welcome to Windows Store apps for JavaScript!</h1></body></html>
This HTML, if it were loaded in the web browser, would result in the world’s most boring web page. Further, a web page (or series of web pages, styles, code, resources, etc.) is not a Windows Store app. A Windows Store app includes these things but also includes the following metadata and resources to define the app for the Windows 8 Start screen:
- A manifest file to describe your app, including the name, description, start page, and so on
- A set of large and small logo images to be displayed on the Start Screen
- A store logo to be displayed by the Windows Store
- A splash screen to show when your app starts
The manifest file is an XML file called appxmanifest.xml, and a minimal one looks like this:
<?xml version="1.0"encoding="utf-8"?><Package xmlns="http://schemas.microsoft.com/appx/2010/manifest"><IdentityName="a8c906d0-f878-4bd4-b727-5363ce0bfb52"Version="1.0.0.0"Publisher="CN=csells"/><Properties><DisplayName>hello</DisplayName><PublisherDisplayName>csells</PublisherDisplayName><Logo>images\storelogo.png</Logo></Properties><Prerequisites><OSMinVersion>6.2.1</OSMinVersion><OSMaxVersionTested>6.2.1</OSMaxVersionTested></Prerequisites><Resources><Resource Language="en-US"/></Resources><Applications><Application Id="App"StartPage="default.html"><VisualElementsDisplayName="hello"Logo="images\logo.png"SmallLogo="images\smalllogo.png"Description="hello"ForegroundText="light"BackgroundColor="#000000"><SplashScreen Image="images\splashscreen.png"/></VisualElements></Application></Applications></Package>
The manifest1 has things in it like the name and description, references to the logo images, and, most importantly, the name of the HTML file that represents the app’s start page (default.html in this case).
With the manifest and supporting files in place, the most basic way to get our super-exciting app registered with the system starts with PowerShell,2 which you can access from the Start screen, and its appx module. The appx module in the Windows 8 PowerShell provides a number of commands that allow you to manage the Windows Store apps installed on your computer.3 The term appx is used by Microsoft to refer to packaged Windows Store apps, all of which have an .appx extension.4
If you’re going to package and sign your app for submission to the Windows Store, you may decide to use the MakeAppx.exe and SignTool.exe command-line tools (which are part of the Windows Store developer tools), but to simply install an app on your own machine, the Add-AppxPackage PowerShell command from the appx module will do the trick, as Figure 1.1 illustrates.
)
Figure 1.1. Adding an appx file and verifying that it’s been added
After a successful execution of Add-AppxPackage, the Get-AppxPackage command will show you that it has been installed correctly, as Figure 1.1 also shows. Even more exciting, your app is now listed on the Start screen,5 as Figure 1.2 shows.
)
Figure 1.2. Our sample app installed into the Start screen
Besides our new hello tile, you’ll notice that the Start screen shows tiles of different sizes with both static and dynamic information (I told Brandon that Portland wasn’t cloudy every day!). For information about tiles, you’ll want to read Chapter 10, “Shell Integration.”
At this point, you’re free to launch the app and see the “Hello and welcome to Windows Store apps for JavaScript!” inspirational message displayed (and which is too boring for a screen shot).
A Windows Store app will always take up the screen space available to it—there are no overlapping Windows Store app windows. However, your app still needs to be able to run at multiple resolutions for different devices and for different “modes,” such as portrait, landscape, snapped, and filled, all of which you can read about in Chapter 3, “Layout.”
After seeing the minimal set of files, tools, and steps needed to build and install a Windows Store app, you’re probably already hoping for a tool to help you create, edit, package, launch, and debug your apps. For that, we’ve got Microsoft Visual Studio 2012.