Create your first windows 8 app

A Really Quick Quickstart: The Blank App Template

We must begin, of course, by paying due homage to the quintessential “Hello World” app, which we can achieve without actually writing any code at all. We simply need to create a new app from a template in Visual Studio: 1. Run Visual Studio Express. If this is your first time, you’ll be prompted to obtain a developer license. Do this, because you can’t go any further without it! 2. Click New Project… in the Visual Studio window, or use the File > New Project menu command. 3. In the dialog Fig.1.1 that appears make sure you select JavaScript under Templates on the left side, and then select Blank Application in the middle. Give it a name (HelloWorld will do), a folder, and click OK.

Fig. 1.1

4. After Visual Studio churns for a bit to create the project, click the Start Debugging button (or press F5, or select the Debug > Start Debugging menu command). Assuming your installation is good, you should see something like Figure 2-2 on your screen.  

                                                                    FIGURE 2-2  

The only vaguely interesting portion of the Hello World app’s display. The message is at least a better invitation to write more code than the standard first-app greeting! 

By default, Visual Studio starts the debugger in local machine mode, which runs the app full screen on your present system. This has the unfortunate result of hiding the debugger unless you’re on a multimonitor system, in which case you can run Visual Studio on one monitor and your Windows Store app on the other. Very handy. See Running apps on the local machine for more on this. 

Visual Studio offers two other debugging modes available from the drop-down list on the toolbar (Figure 3) or the Debug/[Appname] Properties menu command

                                                                       Fig 3

Blank App Project Structure While an app created with the Blank template doesn’t have much in the visual department, it provides much more where project structure is concerned. Here’s what you’ll find coming from the template, which is found in Visual Studio’s Solution Explorer (as shown in Figure 4): In the project root folder: 

• default.html The starting page for the app.

 • <Appname>_TemporaryKey.pfx A temporary signature created on first run.

 • package.appmanifest The manifest. Opening this file will show Visual Studio’s manifest editor (shown later in this chapter). I encourage you to browse around in this UI for a few minutes to familiarize yourself with what’s all here. For example, you’ll see references to the images noted below, a checkmark on the Internet (Client) capability, default.html selected as the start page, and all the places where you control different aspects of your app. We’ll be seeing these throughout this book; for a complete reference, see the App packages and deployment and Using the manifest designer topics. And if you want to explore the manifest XML directly, right-click this file and select View Code. The css folder contains a default.css file where you’ll see media query structures for the four view states that all apps should honor. We’ll see this in action in the next section, and I’ll discuss all the details in Chapter 6, “Layout.” The images folder contains four reference images, and unless you want to look like a real do of us developer, you’ll always want to customize these before sending your app to the Store (and you’ll want to provide scaled versions too, as we’ll see in Chapter 3, “App Anatomy and Page Navigation”): 

• logo.png A default 150x150 (100% scale) image for the Start page. 

• smalllogo.png A 30x30 image for the zoomed-out Start page and other places at run time. 

• splashscreen.png A 620x300 image that will be shown while the app is loading. 

• storelogo.png A 50x50 image that will be shown for the app in the Windows Store. 

This needs to be part of an app package but is not used within Windows at run time. The js folder contains a simple default.js. The References folder points to CSS and JS files for the WinJS library. You can open any of these to see how WinJS itself is implemented. (Note: if you want to search within these files, you must open and search only within the specific file. These are not included in solution-wide or project-wide searches.) 

                                                                         Fig 4

As you would expect, there’s not much app-specific code for this type of project. For example, the HTML has only a single paragraph element in the body, the one you can replace with “Hello World” if you’re really not feeling complete without doing so. What’s more important at present are the references to the WinJS components: a core stylesheet (ui-dark.css or ui-light.css), base.js, and ui.js: 

<!DOCTYPE html> 

<html> 

<head>     

<meta charset="utf-8">    

 <title>Hello World</title>  

    <!-- WinJS references -->   

  <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">  

   <script src="//Microsoft.WinJS.1.0/js/base.js"></script>     <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>  

    <!-- HelloWorld references -->  

   <link href="/css/default.css" rel="stylesheet"> 

    <script src="/js/default.js">

</script> 

</head> 

<body>   

  <p>Content goes here</p> 

</body> 

</html> 

You will generally always have these references (perhaps using ui-light.css instead) in every HTML file of your project. The //’s in the WinJS paths refer to shared libraries rather than files in your app package, whereas a single / refers to the root of your package. Beyond that, everything else is standard HTML5, so feel free to play around with adding some additional HTML of your own and see the effects. 

Continue in our next post.....