Free Download PDF Books, Build Windows 8 Apps With HTML5 And JavaScript

Build Windows 8 Apps With HTML5 And JavaScript

HTML HTML JavaScript JavaScript ReadOnline
Free HTML Books, HTML Book Pdf, HTML Pdf Books, HTML Pdf Books Download, HTML Pdf Books Free Download, Free HTML JavaScript Books, HTML JavaScript Book Pdf, HTML JavaScript Pdf Books, HTML JavaScript Pdf Books Download, HTML JavaScript Pdf Books Free Download, Free JavaScript Books, JavaScript Book Pdf, JavaScript Pdf Books, JavaScript Pdf Books Download, JavaScript Pdf Books Free Download, Free ReadOnline Books, ReadOnline Book Pdf, ReadOnline Pdf Books, ReadOnline Pdf Books Download, ReadOnline Pdf Books Free Download,

Summary of Contents

  • Page 1

    ™Microsoftstarthere!BuildWindows 8Appswith HTML5and'JavaScriptHCDCD©DinoEspositoFrancescoEspositoactionURI(http://www.freepdf-books.com /):http://freepdf-books.com

  • Page 2

    Ready tolearn Windows 8programming?Build Windows 8Apps with HTML5and JavaScriptstartherefAbout YouSKILL LEVEL:SomeexperiencerequiredPREREQUISITES: Beginner-level HTML5and JavaScript skillsLearnthe fundamentalsof Windows 8programming—and begincreating apps fordesktops, laptops, tablets,and other...

  • Page 3

    Build Windows 8 Apps with HTML5 and JavaScriptDino EspositoFrancesco EspositoactionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 4

    Published with the authorization of Microsoft Corporation by:O’Reilly Media, Inc.1005 Gravenstein Highway NorthSebastopol, California 95472Copyright © 2013 by Dino EspositoAll rights reserved. No part of the contents of this book may be reproduced or transmitted in any form or by any means wit...

  • Page 5

    To Michela and Silvia, who are stronger and smarter than they think.—DinoTo Grandma Concetta, for providing free calories through amazing quantities of unbeatable homemade prosciutto.—FrancescoactionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 6

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 7

    Contents at a glance 15,Introduction 15, xiiiCHApTer 1 23,Using Visual Studio 23,2012 express edition for 23,Windows 8 23, 23,1CHApTer 2 45,Making sense of HTML5 45, 45,23CHApTer 3 69,Making sense of CSS 69, 69,47CHApTer 4 95,Making sense 95, of JavaScript 95, 95,73CHApTer 5 119,First...

  • Page 8

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 9

    viiWhat do you think of this book? We want to hear from you! Microsoft is interested in hearing your feedback so we can continually improve our books and learning resources for you. To participate in a brief online survey, please visit: microsoft.com/learning/booksurveyContents 15,Introduction...

  • Page 10

    viii ContentsChapter 3 69,Making sense of CSS 69, 69,47 69,Styling a webpage 69, 69,...............................................47 70,Adding CSS informat 70,ion to pages 70, 70,.............................48 73,Selecting elements to 73,style 73, 73,.....................................

  • Page 11

    Contents ix 129,Components 129, for 129, the 129, presentation 129, layer 129, 129,.......................107 134,Data binding 134, 134,..............................................112 138,Understanding the applicati 138,on’s lifecycle 138, 138,..........................116 138,States ...

  • Page 12

    x Contents 201,Snapping 201, applications 201, 201,......................................179 204,Making the applicati 204,on reactive 204, 204,.............................182 210,Towards an adaptive l 210,ayout 210, 210,......................................188 210,General principles of s ...

  • Page 13

    Contents xiChapter 11 287,Working with remote d 287,ata 287, 287,265 287,Working with RSS data 287, 287,...........................................265 288,Getting remote data 288, 288,.......................................266 294,Parsing and displayin 294,g downloaded da 294,ta 294, 294...

  • Page 14

    xii ContentsChapter 14 357,Publishing 357, an 357, application 357, 357,335 358,Getting a developer a 358,ccount 358, 358,.....................................336 358,Registering as a develope 358,r of free appli 358,cations 358, 358,................336 361,Registering as a develope 361,r o...

  • Page 15

    xiiiIntroductionFor years, programming has been the nearly exclusive domain of people that others typically thought of as super-experts, gurus, or geniuses. The advent of mobile programming, however, changed things a bit because the idea of programming for these devices regained its appeal fo...

  • Page 16

    xiv Introductiontablets. As evidence, consider that Francesco is a teenager—and he wrote most of the examples and a few chapters of this book.After completing the book, you won’t be a super-expert, but you’ll surely know enough to start writing your own apps, at least for fun. Who should r...

  • Page 17

    Introduction xvOrganization of this bookThis book is divided into three sections. Chapters 1-5 cover the basics of acquiring and using Microsoft Visual Studio 2012 Express and also provide a summary of what you need to know about HTML, CSS, and JavaScript. Chapters 6-11 deal with programming Wi...

  • Page 18

    xvi IntroductionSystem requirementsYou will need the following hardware and software to set up yourself on the various mobile platforms and compile the sample code: ■■A PC equipped with Windows 8 and Visual Studio 2012 Express for Windows 8.Code samplesMost of the chapters in this book are b...

  • Page 19

    Introduction xviiErrata and book supportWe’ve made every effort to ensure the accuracy of this book and its companion content. Any errors that have been reported since this book was published are listed on our Microsoft Press site at oreilly.com: http://aka.ms/SH_W8AppsHTML5JS/errataIf you f...

  • Page 20

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 21

    xixAcknowledgementsDino:I’ll be honest: Russell Jones, my editor at O’Reilly Media, convinced me to try this project. If the book is in your hands, both some of the good and some of the bad are on him! When Russell first mentioned this book, when it was still just an idea, I first declined,...

  • Page 22

    xx Acknowledgementsup my sleeves and worked out some examples. And in doing so, I also was able to contribute a list of points for Dad to expand on. I’m not sure this project would have been as pleasant for Dad without my help.Working on the book was mostly fun, but I do recognize that this b...

  • Page 23

    1Chapter 1Using Visual Studio 2012 express edition for Windows 8Differences of habit and language are nothing at all if our aims are identical.— J. K. Rowling, Harry Potter and the Goblet of FireMicrosoft Windows 8 marks the debut of a significantly revised runtime platform—the Windows RunT...

  • Page 24

    2 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIf you already know a bit of JavaScript development, building Windows 8 applications will not be a huge, new type of adventure. If you are not already a JavaScript developer, the JavaScript route probably represents the shortest path f...

  • Page 25

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 3Installing Windows 8Having a machine equipped with Windows 8 is a fundamental prerequisite to working through the information and exercises in this book. Windows 8 comes in a few flavors, as detailed in Table 1-1.TABLE 1-1 Window...

  • Page 26

    4 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 1-1 The home page of the Dev Center for Windows 8 applications. After clicking the link to download the tools and Software Development Kit (SDK), you will be sent to another page where you can finally start the download process, ...

  • Page 27

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 5At various times during the setup, you’ll be prompted to accept or modify options. For the purposes of this book, you can simply accept all the default options. The default setup installs the newest .NET Framework 4.5, the Win...

  • Page 28

    6 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 1-4 Product key required for Visual Studio 2012 Express.Clicking the “Register online” link takes you to a page where you can insert your name, email address, and company details (see Figure 1-5).FIGURE 1-5 Registration requ...

  • Page 29

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 7You then submit the form. You’ll receive an email containing the product key to unlock the current version of Visual Studio (see Figure 1-6).FIGURE 1-6 Product key retrieval for Visual Studio 2012 Express.It usually takes only ...

  • Page 30

    8 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 1-7 Creating your developer account.A developer license successfully installed on a machine enables you to freely create and run Windows 8 applications outside the official Windows Store.Note A Windows 8 machine can install only...

  • Page 31

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 9FIGURE 1-8 Renewing your developer license.You can get as many developer licenses as you need, provided that you have a Windows Live ID account. Windows Store accountGetting a developer license for Windows 8 is only the first man...

  • Page 32

    10 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptby generating some vanilla code appropriate to that template and language that you can customize and extend.For the purposes of this book, your programming language of choice is JavaScript. It’s worth remembering, though, that you c...

  • Page 33

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 11FIGURE 1-10 Choosing a project template.Templates are grouped by programming language. In the Express edition of Visual Studio considered here, you can create just one type of application—a Windows 8 application for the Wind...

  • Page 34

    12 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptCreating the sample projectBefore you give Visual Studio the green light to create files, you might want to spend some time thinking about the location of the project. In Figure 1-10, you see Location; that’s the place where you ente...

  • Page 35

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 13FIGURE 1-12 Creating the HelloWin8 project. Click OK and you’re officially a Windows 8 developer.Note Visual Studio 2012 comes with a dark theme for windows and controls by default. For the sake of print, we changed it to the ...

  • Page 36

    14 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 1-13 The HelloWin8 project. It turns out that a Windows 8 application written using JavaScript looks like a self-contained web application made of HTML pages properly styled using CSS and powered by JavaScript logic. If you are ...

  • Page 37

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 15The body of the sample HTML page is all here:<body> <p>Content goes here</p> </body>Let’s just replace the placeholder text with some custom text. For example:<body> <p> Hello, Windo...

  • Page 38

    16 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe Debug option in Figure 1-15 refers to the way in which the compiler produces the code. In debug mode, the binaries include additional information that allows you to set breakpoints on specific lines of code and proceed step by st...

  • Page 39

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 17<body> <header> Start Here! Build <b>Windows 8</b> Applications with <b>HTML5</b> and <b>JavaScript</b> <hr /> </header> <footer> <hr /...

  • Page 40

    18 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptHere’s a modified style for the page body that changes the background color and adds a bit of space around the content:body { background-color: #1649AD; padding: 10px; }You can also customize the header and footer elements sl...

  • Page 41

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 19First off, add the following markup to the body of the page in default.html. The markup consists of two DIV blocks containing the placeholder for generated number and the button to click to get a new number. You insert the follo...

  • Page 42

    20 Start Here! Build Windows 8 Apps with HTML5 and JavaScript } args.setPromise(WinJS.UI.processAll()); } };In the end, you just add one line to run when the application has been newly launched. The line just registers a handler for any click event raised by the specified button.Yo...

  • Page 43

    CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 21SummaryThis chapter provided a step-by-step guide to getting ready for Windows 8 programming. You started with the operating system and tools necessary for writing code, then installed and configured Visual Studio 2012 Express e...

  • Page 44

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 45

    23Chapter 2Making sense of HTML5Broadly speaking, the short words are the best, and the old words best of all.—Winston ChurchillHTML5 is the latest version of the HTML language—the popular text-based language used to define the content of webpages. HTML appeared on the scene in the early 1...

  • Page 46

    24 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptin particular, is the collection of programmable objects that expose the structure of the current document to coders.In the rest of this chapter, you’ll briefly explore the basics of the HTML5 markup elements, including input forms ...

  • Page 47

    CHAPTER 2 Making sense of HTML5 25FIGURE 2-1 Different HTML page layouts. Developers have been smart enough to build such complex layouts using basic HTML block elements such as DIV.Note In HTML, a block element is an element whose content is rendered between two line breaks—one before and o...

  • Page 48

    26 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptOpen up Visual Studio and create a new blank application. Name it Html5-Demos. When done, add the following code to the body of default.html so that it serves as the main menu for navigating into all of the sample HTML5 pages you’ll ...

  • Page 49

    CHAPTER 2 Making sense of HTML5 27From generic blocks to semantic elementsA large share of websites out there have a common layout that includes header and footer, as well as a navigation bar on the left of the page. More often than not, these results are achieved by using DIV elements styled t...

  • Page 50

    28 Start Here! Build Windows 8 Apps with HTML5 and JavaScript <ul> <li> Home </li> <li> Find us </li> <li> Job opportunities </li> </ul> </div> ...

  • Page 51

    CHAPTER 2 Making sense of HTML5 29FIGURE 2-4 The multi.html page as it is rendered by Internet Explorer 10.The preceding markup alone, however, doesn’t produce the expected results and the page doesn’t really show any multicolumn layout. For that, you need to add ad hoc graphic styles to in...

  • Page 52

    30 Start Here! Build Windows 8 Apps with HTML5 and JavaScript <ul> <li> Article #1 </li> <li> Article #2 </li> <li> Article #3 </li> </ul> </aside> <article> <h1>Article #1</...

  • Page 53

    CHAPTER 2 Making sense of HTML5 31Note Elements such as <section>, <article>, <header>, and <footer> are semantic elements, in the sense that browsers treat them as block elements. If you look at final results, there’s nearly no difference between semantic elements a...

  • Page 54

    32 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptMiscellany of other new elementsSemantic block elements represent the largest family of new elements in HTML5. As mentioned, semantic elements are important not so much for the effect they produce in the page but because they increas...

  • Page 55

    CHAPTER 2 Making sense of HTML5 33The mark elementHTML5 also adds the <mark> element as a way to highlight small portions of text as if you were using a highlighter on a paper sheet. Using the <mark> element is easy; all you do is wrap some text in the <mark> element, as shown...

  • Page 56

    34 Start Here! Build Windows 8 Apps with HTML5 and JavaScript<input> element: the list attribute. The attribute gets the name of a <datalist> element to be used as the source of the input options. When the input field gets the input focus, then the content of the <datalist> ele...

  • Page 57

    CHAPTER 2 Making sense of HTML5 35Adjusting input fields In HTML5, you still create an input form by using the same markup elements you used from earlier versions of the language. In other words, the following markup will still give you the opportunity to upload any typed content to the given s...

  • Page 58

    36 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptWhat you can really expect from browsersWhat you have read in Table 2-1 represents the HTML5 standard that browsers are expected to comply with by the time the standard is officially approved and promulgated. At this time, Opera and Ch...

  • Page 59

    CHAPTER 2 Making sense of HTML5 37FIGURE 2-7 The autofocus attribute in action.Giving hints to usersLooking at Figure 2-7, it is quite hard to figure out which content goes in which field. Probably in a real-world page, one would use labels and a more sophisticated layout to make it easier for ...

  • Page 60

    38 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptForm submissionSometimes developers have no other option besides writing the same boilerplate code over and over again, no matter how annoying it is. A good example of boilerplate code that it would be great to stop writing is validati...

  • Page 61

    CHAPTER 2 Making sense of HTML5 39HTML5 browsers allow you to customize the error message by using the oninvalid attribute, as shown below:<form> <input type="text" placeholder="Your PIN" required oninvalid="this.setCustomValidity('PIN is ma...

  • Page 62

    40 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 2-10 The pattern attribute in action.The value of the pattern attribute has to be a regular expression. Regular expressions can get very complex; in fact, they’re a topic worthy of a complete book, but learning the basics of r...

  • Page 63

    CHAPTER 2 Making sense of HTML5 41Note The formnovalidate attribute overrides the form’s novalidate attribute if both are set.Multimedia elementsHTML5 offers two new markup elements that developers can use to play audio and video files from within webpages without resorting to external plug-i...

  • Page 64

    42 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptSo far, I have referred to audio content in a rather generic way, without mentioning specific audio formats such as MP3 or WAV. This is a major problem with HTML5-compliant browsers: Not all browsers support the same set of audio form...

  • Page 65

    CHAPTER 2 Making sense of HTML5 43<video src="/hello.mp4"> <p>Your browser does not support the video element.</p> </video>Similarly, you can optionally incorporate some markup in the body of the <video> element to be used in case the browser can’t d...

  • Page 66

    44 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 2-11 The video element in action.Supported codecsWhen it comes to codecs, video suffers from the same issues that audio does. Therefore, it requires the same workaround. You should not use the src attribute unless you are well a...

  • Page 67

    CHAPTER 2 Making sense of HTML5 45SummaryHTML has been around for a couple of decades, but it only recently underwent significant syntax changes. The new HTML5 specification clears out some obsolete elements and adds new markup elements for specific (and common) tasks. New elements have strong...

  • Page 68

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 69

    47Chapter 3Making sense of CSSIn matters of style, swim with the current; in matters of principle, stand like a rock.—Thomas JeffersonAs you learned in Chapter 2, “Making sense of HTML5,” an HTML page is made up of a bunch of elements that together define the content and layout of what th...

  • Page 70

    48 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIn addition, browsers were often challenged to interpret unknown attributes and tags. It was not an easy choice for architects to decide whether the appropriate reaction to malformed markup was to throw an error to the user or to just ...

  • Page 71

    CHAPTER 3 Making sense of CSS 49The net effect of the preceding code snippet is that the content of the DIV element is given a black background (color #000000), whereas any text it contains is written in white (color #ffffff). That style information is scoped to the specified DIV element and do...

  • Page 72

    50 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptother hand, style information must be incorporated into each page and contributes to making your pages heavier. The reuse of a style is possible, but only within the boundaries of a single page; to use the same style from within differ...

  • Page 73

    CHAPTER 3 Making sense of CSS 51 <footer> <hr /> Start Here! Build Windows® 8 Applications with HTML5 and JavaScript </footer> </body> </html>You have just given the page a bit of content. You have not yet done anythin...

  • Page 74

    52 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe CSS standard defines a long list of property names for you to use in style commands and related feasible values. In addition, some browsers define their own custom properties to add proprietary features. In this section, you’ll...

  • Page 75

    CHAPTER 3 Making sense of CSS 53referencing elements by nameHTML elements are automatically styled by browsers, and each browser may style these elements differently. For example, a plain button element is styled with round corners on, say, an iPhone and with square corners on a Windows Phone....

  • Page 76

    54 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFor each CSS property, the actual value that determines how the element will render is given by the value possibly assigned directly to the element or to its innermost parent element. At the root of the CSS hierarchy there’s the defa...

  • Page 77

    CHAPTER 3 Making sense of CSS 55Basic style commandsThe CSS syntax includes several properties that you can use to define nearly every aspect of HTML elements: font, colors, measurement, layout, position, shadowing, and more. Here’s a quick summary of the most frequently used properties. If ...

  • Page 78

    56 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptNote Browsers also allow you to add a level of transparency to colors. This is achieved by adding a fourth value to the color definition—the alpha channel. In the hexadecimal format, the alpha value ranges from 0 (completely opaque)...

  • Page 79

    CHAPTER 3 Making sense of CSS 57Changing the background colorThe background color of an HTML element plays an important role in HTML design, since it can be used to achieve compelling effects. Each element can have its background painted with a solid color or a gradient of colors. It can also h...

  • Page 80

    58 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptBitmaps are often used to paint the background of the entire page. If the page is rich in content and scrolls horizontally or vertically, what should the image do? Should it scroll with the rest of the page or should it stick to its or...

  • Page 81

    CHAPTER 3 Making sense of CSS 59 background-image: url(/images/bkgnd.png); background-repeat: no-repeat; background-attachment: fixed; font-family: "trebuchet ms", helvetica, sans-serif; }Font families are listed in order of preference. If the first choice is not avail...

  • Page 82

    60 Start Here! Build Windows 8 Apps with HTML5 and JavaScript#footer { font-size: 80%; font-weight: 700; font-style: italic, underline; }If you just want to render some text in bold, you can simply set the font-weight property to bold. If you need more control over the weight of the...

  • Page 83

    CHAPTER 3 Making sense of CSS 61Common elements rendered inline by default are SPAN, A, INPUT, and IMG.Note By using the display property, you can turn block elements into inline elements and vice versa. What browsers do normally is simply a predefined setting that can be changed by developers....

  • Page 84

    62 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptWhen float is used, the elements that follow move up to fill any available space—similar to what happens in a text editor when you remove a carriage return. The float property breaks the usual meaning of block and inline. At some poi...

  • Page 85

    CHAPTER 3 Making sense of CSS 63FIGURE 3-5 Inline-block elements.It should be noted that inline-block elements, if aligned vertically to the top, also work well in the case of multiple rows of different heights. When not floating, in fact, the browsers always use a single, logical horizontal li...

  • Page 86

    64 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptDefining paddingThe padding property defines how many pixels should be added around the element. Additional pixels inherit the same background settings of the element. You typically use padding to add some spacing around the actual con...

  • Page 87

    CHAPTER 3 Making sense of CSS 65margin-bottom to 10px, then you are extending the height of the element by 10 pixels. These 10 extra pixels of height are rendered with a transparent background though.Defining width and heightBy default, HTML elements take up just the minimum space they need to ...

  • Page 88

    66 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 3-8 Width and height used to create a nice (and common) page template.The BODY element sets its margin to 0 pixels, meaning that empty space will be left between the page content and browser’s edges. The HEADER element takes u...

  • Page 89

    CHAPTER 3 Making sense of CSS 67selector:pseudo-class { ... }Let’s review a few examples of common pseudo-classes.Anchor pseudo-classesIn a nutshell, pseudo-classes are like smart query operators you can use on certain HTML elements to further restrict the application of the style. Some p...

  • Page 90

    68 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe visited pseudo-class defines the look and feel of the anchor once it has been clicked at least once. The hover class refers to the mouse hovering on the anchor. Finally, the active class refers to the look and feel of the anchor wh...

  • Page 91

    CHAPTER 3 Making sense of CSS 69SelectorDescription[attribute != value]Elements that contain an attribute with the specified name whose value is different from the specified value.[attribute ^= value]Elements that contain an attribute with the specified name whose value begins with the specifi...

  • Page 92

    70 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptMedia QueriesWhen you attach a CSS file to an HTML document through the LINK element, you also have the option of selecting the medium where the style will be applied. You indicate the medium through the media attribute. If no media a...

  • Page 93

    CHAPTER 3 Making sense of CSS 71TABLE 3-3 Popular media query propertiesPropertyDescriptionwidthReturns the width of the current browser view. The property supports min/max prefixes.heightReturns the height of the current browser view. The property supports min/max prefixes.orientationReturns ...

  • Page 94

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 95

    73Chapter 4Making sense of JavaScriptactionURI(http://www.quotationspage.com/quote/27616.html):Grasp the subject, the words will follow.—Cato, the ElderJavaScript is probably a language with nine (or even more) lives. JavaScript made its official debut in 1996 as part of the Netscape browser ...

  • Page 96

    74 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptLanguage basicsThe JavaScript language relies on a solid standard, as defined by the ECMA-262 and ISO/IEC 16262:2011 papers. Unlike what happens with other popular programming languages like C#, JavaScript code is not compiled before ...

  • Page 97

    CHAPTER 4 Making sense of JavaScript 75The type number represents floating point numbers with zero or more decimal places. There are no separate types for concepts such as integers, long integers, singles, doubles, or bytes. One special number, NaN, is reserved for numbers that don’t make mat...

  • Page 98

    76 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptTABLE 4-2 JavaScript built-in objectsFunctionDescriptionevalGets code in the form of a string and executes it on the fly.escape / unescapeEncodes and decodes special characters in a plain string.encodeUri / decodeUriEncodes and decodes...

  • Page 99

    CHAPTER 4 Making sense of JavaScript 77Dealing with variablesIn JavaScript, a variable is simply a storage location and is not restricted to always storing values of a fixed type. When assigned a value, variables take on the type of the data being stored. For this reason, a JavaScript variable ...

  • Page 100

    78 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptGlobal variablesVariables declared in the global scope—that is outside any function body—are always global regard-less of whether or not var is used. Consider the following snippet to experience the subtle differences between local...

  • Page 101

    CHAPTER 4 Making sense of JavaScript 79Variables and hoistingHoisting is a JavaScript feature that allows developers to declare variables everywhere in the scope and then use them everywhere. In JavaScript, you are allowed to first use the variable and then declare it (such as, var) later. The...

  • Page 102

    80 Start Here! Build Windows 8 Apps with HTML5 and JavaScript Adding a member to a JavaScript object works only for that particular instance. If you were now to create another instance of the Number object, the property type would not be available for the new Number object. You can work around t...

  • Page 103

    CHAPTER 4 Making sense of JavaScript 81Dealing with functions In JavaScript, a function is a bit of code bundled up into a block and optionally given a name. If a function is not given a name, it is called an anonymous function. Functions represent a scope and are treated like objects; they may...

  • Page 104

    82 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptBoth calls shown below are acceptable for the function doSum.var r1 = doSum(1, 2, 3); var r2 = doSum(4, 5);A function that accepts a variable number of arguments is perhaps more clearly defined with no explicit formal parameters. Howev...

  • Page 105

    CHAPTER 4 Making sense of JavaScript 83So should you use immediate functions or immediate objects? That’s mostly up to you, but it ultimately boils down to how complex your code is (or that you anticipate it’s going to become). For very complex tasks, an immediate object is perhaps prefer...

  • Page 106

    84 Start Here! Build Windows 8 Apps with HTML5 and JavaScript return "bau"; }; };What you have here is a new object named Dog. Early on, when talking about objects, you also created something similar:var dog = { name: "Jerry Lee Esposito", };The big difference here i...

  • Page 107

    CHAPTER 4 Making sense of JavaScript 85Important This is also the most appropriate way to create your own aggregates of data and behavior (objects) by using an explicit constructor without the need to use the new operator. In this way, you get very close to object-oriented components in JavaSc...

  • Page 108

    86 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptBoth functions consist of three main steps. The first step is repeated in both functions; the second step is specific to each function; and the third step does the same thing in each case, but with different data. Having functions de...

  • Page 109

    CHAPTER 4 Making sense of JavaScript 87At this point, the invocation code becomes:handleNumbers(doSum, 1, 2, 3, 4); handleNumbers(doMultiply, 1, 2, 3, 4);With this structure in place, adding yet another operation on the array of numbers is simply a matter of creating a function that performs th...

  • Page 110

    88 Start Here! Build Windows 8 Apps with HTML5 and JavaScript that.name = "SUM"; that.execute = function (numbers) { var result = 0; for (var i = 0; i < numbers.length; i++) { result += numbers[i]; } return result; }; return...

  • Page 111

    CHAPTER 4 Making sense of JavaScript 89Why are anonymous functions becoming so popular? The primary reason is that anonymous functions allow you to define code in place—without the need to define a named function somewhere. The drawback of anonymous functions is that they are not reusable....

  • Page 112

    90 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptevent attributes of an HTML element For years, it has been common to write HTML pages with input fields and buttons explicitly attached to JavaScript event handlers. Here’s a typical example:<input type="button" value=&q...

  • Page 113

    CHAPTER 4 Making sense of JavaScript 91TABLE 4-3 Pros and cons of embedding JavaScript code in HTML pagesProConThe page has no dependencies and is self-contained. As a developer, you don’t have to look in several places to find out things specific to a page.The page is larger and takes more t...

  • Page 114

    92 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIn Windows 8, using jQuery (and other libraries, other than the WinJs library) may sometimes be problematic, depending on how you use the jQuery library.The reason why jQuery can sometimes be problematic is the new security model that ...

  • Page 115

    CHAPTER 4 Making sense of JavaScript 93Next up, you define your global members as members of the newly created Globals object. The difference is that now Globals is a brand new global object, and all the members you want to use as global in your application are actually defined as children of G...

  • Page 116

    94 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptBe ready for localizationHaving the application ready for international markets may be a key to your success (or it might be just for your own enjoyment if you’re approaching Windows 8 development with a light spirit). In general, l...

  • Page 117

    CHAPTER 4 Making sense of JavaScript 95Starting with the next chapter, that all changes. You’ll see that coding Windows 8 with JavaScript is inherently a somewhat different experience than coding JavaScript for the web. A Windows 8 application is primarily an application written against the ...

  • Page 118

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 119

    97Chapter 5First steps with Windows 8 developmentactionURI(http://www.quotationspage.com/quote/27616.html):Success is counted sweetest by those who ne’er succeed.—Emily DickinsonIn Chapter 1, “Using Visual Studio 2012 Express edition,” you had a first short glimpse of the Microsoft Win...

  • Page 120

    98 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptway to display data to the users of your application. You’ll be using the data binding service quite often in the upcoming chapters.The Windows 8 Runtime (WinRT)It’s fairly rare for a new version of an operating system to introduce...

  • Page 121

    CHAPTER 5 First steps with Windows 8 development 99FIGURE 5-1 From Windows 8 back to the classic Windows user interface.Fate of old-fashioned Windows applications Windows applications that previously ran on Windows 7 can only be run in standard Windows mode for Windows 8. To have them available...

  • Page 122

    100 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptAn overview of the WinrT ApIWith Windows 8, Microsoft makes an important move. This move is ultimately the reason for the two souls of Windows 8 and the need to distinguish between Windows Store applications and all other applications...

  • Page 123

    CHAPTER 5 First steps with Windows 8 development 101library. Any Windows 8 application written with JavaScript will include the WinJS library and use its API to access functions such as storage, networking, graphics, and more. Any code you write is compiled by the Windows 8 JavaScript engine an...

  • Page 124

    102 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptWindows development. An asynchronous function is a function that begins execution when invoked but has no well-defined timeline for termination. In other words, an asynchronous function right after launch proceeds in parallel with any...

  • Page 125

    CHAPTER 5 First steps with Windows 8 development 103If you take a second, deeper look at the Windows 8 UI initiative, you can’t help but recognize a bunch of universal design principles that describe concisely and precisely the vision behind software applications of the next years. You can co...

  • Page 126

    104 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 5-5 Examples of Windows 8 Live tiles.FIGURE 5-6 The App bar of a Windows Store application.Device-centric designA Windows Store application presents itself fused to the design of the operating system and fully immersed in the ...

  • Page 127

    CHAPTER 5 First steps with Windows 8 development 105■■Don’t reinvent the wheel.■■Collaborate with other applications via contracts.■■Be aware of the clouds.Extensive application of these principles can really make any applications—and not just upcoming Windows Store applications...

  • Page 128

    106 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptZero redundancyFor many years, redundancy in the user interface of an application has been considered a good thing. You define a user interface as redundant if it allows performing the same task in more than one way. Keyboard and mou...

  • Page 129

    CHAPTER 5 First steps with Windows 8 development 107The sixth principle can then be summarized by saying that applications may rely on public services exposed by other applications in order to implement their functionality. Windows Store applications may import functions from other application...

  • Page 130

    108 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptWidgetDescriptionFlyoutDisplays a simple popup message that disappears only when the user touches (or clicks) anywhere on the screen.ListViewArranges a collection of items in a variety of layouts; for example, as a grid or as a list.H...

  • Page 131

    CHAPTER 5 First steps with Windows 8 development 109Charms provide a common way for users to get to the features of nearly every application; for example, search, share, and access to files. The App bar, instead, contains application-specific commands and is expected to list commands that mak...

  • Page 132

    110 Start Here! Build Windows 8 Apps with HTML5 and JavaScript </div> </body> </html>The body of the previous page includes a plain DIV and a few BUTTON elements. The magic that transforms this markup into an AppBar in pure Windows 8 style is the data-win-control attribute. ...

  • Page 133

    CHAPTER 5 First steps with Windows 8 development 111// Button functions function doClickAdd() { var alertDialog = new Windows.UI.Popups.MessageDialog("Add button clicked!"); alertDialog.showAsync(); } function init() { var page = WinJS.UI.Pages.define("default.html&...

  • Page 134

    112 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptNote In its simplicity, this example is quite illustrative of the patterns you’ll be applying in all of the remaining chapters. Each of the upcoming chapters, in fact, will provide a list of exercises through which you will practice...

  • Page 135

    CHAPTER 5 First steps with Windows 8 development 113Once you have found the element to update, you can change its content by setting the innerHtml property to any string that can optionally contain HTML markup. The code below retrieves an element named header and sets its content to the strin...

  • Page 136

    114 Start Here! Build Windows 8 Apps with HTML5 and JavaScript <div class="center"> <span id="numberContainer" data-win-bind="innerText: generatedValue"></span> </div> <div class="center"> <input...

  • Page 137

    CHAPTER 5 First steps with Windows 8 development 115 var randomNumber = { generatedValue: Math.floor((Math.random()*100)+1) }; // Enable binding on the HTML element of choice var bindableElement = document.getElementById("numberContainer"); WinJS.Binding.processAl...

  • Page 138

    116 Start Here! Build Windows 8 Apps with HTML5 and JavaScript because all you do is manage your variegated data as an object, add an attribute to markup, and adjust a few lines of code to trigger binding.Important Windows 8 data binding is just one of the services you get out of the box with th...

  • Page 139

    CHAPTER 5 First steps with Windows 8 development 117FIGURE 5-8 States of a Windows Store application.Launching an application There are quite a few ways for the user to launch the application. The most common way is that the user launches the application from a tile—the Windows 8 counterpart ...

  • Page 140

    118 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptA short note is worth mentioning about the setPromise method you see in the code snippet. The method informs the application that some asynchronous work is in progress. The method that hosts setPromise can’t then be exited until the...

  • Page 141

    CHAPTER 5 First steps with Windows 8 development 119A suspended application is cached in memory for as long as it is possible, but it is not guaranteed to stay in memory indefinitely. It may happen that, perhaps running short of memory, Windows terminates suspended applications. In this case, t...

  • Page 142

    120 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptSummaryThis chapter ends the first part of the book, where you essentially built the base groundwork for the rest of the book and for your journey toward Windows Store applications. Now you should be familiar with HTML and CSS, and kn...

  • Page 143

    121Chapter 6The user interface of Windows Store applications actionURI(http://www.quotationspage.com/quote/29567.html):Be great in act, as you have been in thought.—William ShakespeareWith this chapter, you enter a section of the book that focuses on concrete examples and exercises of Window...

  • Page 144

    122 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 6-1 Choosing the layout of a new application.Choosing the project type is important, but it is not an essential step. The template basically serves the purpose of giving you (for free) the skeleton of an application with the la...

  • Page 145

    CHAPTER 6 The user interface of Windows Store applications 123FIGURE 6-2 The files that form the TodoList project.The References folder contains the list of libraries required to compile the application. In this case, the only library you need is the by-now-familiar WinJS library. The Css folde...

  • Page 146

    124 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe Js folder contains the JavaScript files that contain any logic required by the application. You usually have one JavaScript file per HTML page in the project, but you may also have additional JavaScript files shared by multiple p...

  • Page 147

    CHAPTER 6 The user interface of Windows Store applications 125<link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script>In this case, /css and /js refer to the physical folders in your current project.Adding fixed use...

  • Page 148

    126 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 6-3 Adding a new HTML Page component.Both newly added HTML files have the same content, as shown below:<!DOCTYPE html> <html> <head> <title></title> </head> <body> ...

  • Page 149

    CHAPTER 6 The user interface of Windows Store applications 127Then edit the content of footer.html, as shown below:<!DOCTYPE html> <html> <head> <title></title> </head> <body> <footer> <hr /> Dino Esposi...

  • Page 150

    128 Start Here! Build Windows 8 Apps with HTML5 and JavaScript font-weight: bold; }The default.css file contains the style information for the default.html page. If you want to reuse the same style settings in another page—for example, mypage.html—then you could copy default.css settings ...

  • Page 151

    CHAPTER 6 The user interface of Windows Store applications 129FIGURE 6-5 The current stage of the TodoList application.Application attributesBefore adding some interaction to the sample application, you need to dedicate a few moments to some configuration steps that are simple but required for ...

  • Page 152

    130 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 6-6 The editor of the manifest file.Adding logo imagesAny Windows Store application needs a set of images that are used in various scenarios to quickly and easily identify the application. At the very minimum, a Windows 8 appli...

  • Page 153

    CHAPTER 6 The user interface of Windows Store applications 131FIGURE 6-7 Adding a transparent background to the logo image.The checkered texture you see in the figure is the Paint.NET way of telling you that your image has a transparent background. Giving logo files a transparent background is ...

  • Page 154

    132 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptdown a bit in the window shown in Figure 6-6, you will find a Background input field. As you learned in Chapter 2, “Making sense of HTML5,” HTML colors are expressed in the format #rrggbb where rr, gg, and bb indicate the hexadeci...

  • Page 155

    CHAPTER 6 The user interface of Windows Store applications 133Building an interactive formThe input form is divided into four sections, each represented with a div element. Open the default.html file in Visual Studio and make sure the body element contains the following markup: <body> ...

  • Page 156

    134 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptDefining the task objectMost of the JavaScript code inserted in HTML pages deals with updating elements. Data binding is a powerful technique to keep this necessary code to a bare minimum, assigning the burden of doing most of the wo...

  • Page 157

    CHAPTER 6 The user interface of Windows Store applications 135// Define the Task object var Task = WinJS.Class.define(function () { var that = {}; that.description = "This is my new task"; that.dueDate = TodoList.firstOfNextMonth(); that.priority = TodoList.Priority.No...

  • Page 158

    136 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptSetting the task priorityThe task priority is expressed as a number that ranges from one (very low) to five (very high). You can have users just type the number in a text box. This would simply require an input field. In Windows 8, ...

  • Page 159

    CHAPTER 6 The user interface of Windows Store applications 137Adding a button and tooltipsThe final section of the form contains a button through which the user collects all the entered data and triggers an operation that physically persists that data somewhere. You won’t do anything to save ...

  • Page 160

    138 Start Here! Build Windows 8 Apps with HTML5 and JavaScript .addEventListener("click", TodoList.addTaskClick); TodoList.performInitialBinding() }Now, when the user clicks the Add Task button, the code defined in the function TodoList.addTask-Click runs. This code need...

  • Page 161

    CHAPTER 6 The user interface of Windows Store applications 139However, if the form is being used to edit existing, previously created tasks, then your code must first retrieve the task to edit, load that data into a fresh instance of the Task object, and then display it through the user interf...

  • Page 162

    140 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptdatePicker.current = task.dueDate; // Select the status on the drop-down list var dropDownList = document.getElementById("taskStatus"); dropDownList.selectedIndex = 1; // Select the second elementYou’re all set now, and ...

  • Page 163

    CHAPTER 6 The user interface of Windows Store applications 141Building and debugging an applicationYou write the source code for an application in the context of a Visual Studio solution. A solution is the repository of all resources required for the application to work: source files, images...

  • Page 164

    142 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 6-12 A syntax error detected.Another common situation you may face during debugging is the occurrence of an exception. An exception is different from a syntax error: in this case, the code is syntactically correct, but the log...

  • Page 165

    CHAPTER 6 The user interface of Windows Store applications 143FIGURE 6-14 The Debug window.As you can see in the figure, the Output window offers a drop-down list for you to pick up the report you need, whether it is about debug or build.Validating input dataThe final step of the TodoList appli...

  • Page 166

    144 Start Here! Build Windows 8 Apps with HTML5 and JavaScript return false; // Check if perc-completed is >0 and task not started // or 100 done but not completed if ((task.percCompleted > 0 && task.status == "Not Started") || (task.percComp...

  • Page 167

    CHAPTER 6 The user interface of Windows Store applications 145 task.percCompleted = taskPercCompleted.value; return task; }When an INPUT element is used, you read its current content—whether text or numbers—using the value property. If you have drop-down list, then you need to retri...

  • Page 168

    146 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFlyOut component by setting the innerHTML property on the flyoutSummary element of the page. Finally, you show the FlyOut component. Note that a FlyOut component needs an anchor element that determines where the fly out will display...

  • Page 169

    147Chapter 7Navigating through multimedia contentactionURI(http://www.quotationspage.com/quote/27616.html):The greatest challenge to any thinker is stating the problem iactionURI(http://www.quotationspage.com/quote/27616.html):n a way that will allow actionURI(http://www.quotationspage.com/quot...

  • Page 170

    148 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptthe user’s navigation history, letting you provide a better user experience as you merge new pages into the existing layout.Jumping to a different pageThe benefit of using the native Windows Store navigation model is well illustrate...

  • Page 171

    CHAPTER 7 Navigating through multimedia content 149In the start fragment, you may have buttons and controls through which you control navigation. You are in no way forced to have hyperlinks. When you navigate away from a page fragment, the system does all the work that is required to display t...

  • Page 172

    150 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 7-4 The Navigation App project.Another difference from the Blank App template is the navigator.js file. The file contains the implementation of the Application.PageControlNavigator object. You can consider this file as an ext...

  • Page 173

    CHAPTER 7 Navigating through multimedia content 151 data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"> </div> <div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri:...

  • Page 174

    152 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptBuilding a gallery of picturesHow would you lay out a gallery of pictures? That mostly depends on your creativity and preferences. In general, a gallery should provide a scrollable list of small images—ideally thumbnails—and give ...

  • Page 175

    CHAPTER 7 Navigating through multimedia content 153 application, you might want to get all pictures from the local disk or perhaps from Flickr. For the exercise to work, you need to have five .png image files ready and add them under the images folder of the project. To keep these images disti...

  • Page 176

    154 Start Here! Build Windows 8 Apps with HTML5 and JavaScript var flipView = document.getElementById("gallery").winControl; flipView.itemDataSource = GalleryApp.Gallery.photos.dataSource; }At this point, the FlipView component is bound to the array of photos. If you run the ap...

  • Page 177

    CHAPTER 7 Navigating through multimedia content 155Adding a template for the itemThe next step is adding a template so that the FlipView can render the bound Photo objects in a nicer way. You go back to gallery.js and add the following line to GalleryApp.init: flipView.itemTemplate = documen...

  • Page 178

    156 Start Here! Build Windows 8 Apps with HTML5 and JavaScript overflow: hidden; }The first step of the exercise is now complete: run the application and you should see what’s in Figure 7-7.FIGURE 7-7 A fully functional FlipView component.Navigating to a detail pageA gallery of images would...

  • Page 179

    CHAPTER 7 Navigating through multimedia content 157In the click handler, you need to do a couple of things. First, you retrieve the index of the selected item and from there the bound photo. Second, you navigate to the detail page. Open the gallery.js file and add the following code:GalleryApp....

  • Page 180

    158 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe BODY element of the details.html page should contain the following markup:<div class="details fragment" type="button" /> <header aria-label="Header content" role="banner"> ...

  • Page 181

    CHAPTER 7 Navigating through multimedia content 159You define a page object and also specify a couple of lifecycle events: ready for when the page is loaded, and unload for when the page is navigated away and then unloaded. In the ready event you complete initialization by retrieving any passed...

  • Page 182

    160 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptNow try hitting the Back button. Quite surprisingly, you are not returned to the photo where you navigated from. You are, instead, returned to the first photo of the flip view. To complete this part of the exercise, therefore, you hav...

  • Page 183

    CHAPTER 7 Navigating through multimedia content 161Note Application suspension hardly applies to applications running on a laptop or PC. It is a scenario that applies to applications running on mobile devices. For example, the application is suspended on a tablet when another application is ru...

  • Page 184

    162 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptNote WinJS provides the GestureRecognizer class to give you information about touch manipulations being performed by the user. You can use this class to know about the distance between start and final position of the fingers during ...

  • Page 185

    CHAPTER 7 Navigating through multimedia content 163Manipulating the imageThe slider features a handler for the onchange event. Such a handler is required to give you a chance to do some work whenever the selection on the slider changes. In particular, you might want to update the text near the...

  • Page 186

    164 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 7-10 Mechanics of image zooming via CSS.Figure 7-11 shows the final result of the exercise. FIGURE 7-11 Zooming the image in and out.actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 187

    CHAPTER 7 Navigating through multimedia content 165Building a video clip galleryAfter having built an image gallery, let’s go ahead and try to build a video gallery while using a different control to organize navigation. To be precise, in this new exercise there will be navigation but it wil...

  • Page 188

    166 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptWhat’s semantic zoom, anyway?In spite of the name, semantic zoom has very little to do with zooming—at least according to the common meaning of the term used so far. What the component does is switch between two different views of...

  • Page 189

    CHAPTER 7 Navigating through multimedia content 167The Clip object represents the information you’ll be working with in the exercise. It represents a YouTube video and it has a category and a title. The videoId property represents the unique YouTube identifier of the clip. The videoUrl proper...

  • Page 190

    168 Start Here! Build Windows 8 Apps with HTML5 and JavaScript function (clip) { return { category: clip.category } } );Both functions are called on each item in the bound list. The first function returns the expression to group items on. In this case, you group video clips on category...

  • Page 191

    CHAPTER 7 Navigating through multimedia content 169 </div> </div> </div> <!-- Template for the zoomed-out master view --> <div id="zoomed-out-template" data-win-control="WinJS.Binding.Template"> <div class="zoomed-out-ite...

  • Page 192

    170 Start Here! Build Windows 8 Apps with HTML5 and JavaScript#listview-in { width: 650px; height: 300px; border: solid 2px #111; } #semantic-zoom-container { width: 600px; height: 350px; border-top: solid 2px #31cfd4; border-bottom: solid 2px #31cfd4; }Everything is ...

  • Page 193

    CHAPTER 7 Navigating through multimedia content 171FIGURE 7-12 A SemanticZoom component showing its master view.Note that the SemanticZoom component defaults to the details, zoomed-in view. To have it display in zoomed-out mode by default, you need an extra attribute in default.html:<div id=...

  • Page 194

    172 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 7-13 A SemanticZoom component showing its details view.To return to the zoomed-out view, the user clicks the minus button in the bottom right corner of the screen.Dealing with videoTo end the exercise, you should make users cap...

  • Page 195

    CHAPTER 7 Navigating through multimedia content 173 var player = document.getElementById("player"); player.src = clip.data.videoUrl; }); }The iteminvoked event passes a detail object to handlers with an itemIndex property that simply returns the 0-based index of t...

  • Page 196

    174 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptpiece of HTML that requires the Flash plug-in to play the video. The Flash plug-in is not available for Windows Store applications.To fix things for Windows Store applications, you must instruct YouTube to return the video in an HTML5...

  • Page 197

    CHAPTER 7 Navigating through multimedia content 175navigation system and know what’s required to jump to a different page and pass information to that page. In this chapter, we also touched on persistence of state through the application’s session state.In doing so, you also completed a cou...

  • Page 198

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 199

    177Chapter 8States of a Windows 8 applicationactionURI(http://www.quotationspage.com/quote/27616.html):A goal without a plan is just a wish.—Antoine de Saint ExuperyA couple of decades ago, the idea of pushing out a window-based operating system where mul-tiple applications could live side by...

  • Page 200

    178 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptSince Windows 8 is an operating system created from the ground up to run on devices of different sizes, the whole theme of adapting the user interface (and subsequently the user experience) to a different screen is topical. Windows ...

  • Page 201

    CHAPTER 8 States of a Windows 8 application 179fullScreenPortrait) { ... }Also in this case, the operating system detects rotation of the device and automatically orders the application to repaint its user interface.Important As it turns out, full-screen rotations may require some adjustmen...

  • Page 202

    180 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 8-2 The Calendar application is now snapped to the left edge. The snapped view stateWhen snapped, an application is resized to a segment of the screen that is only 320 pixels wide and takes the entire height of the screen. As F...

  • Page 203

    CHAPTER 8 States of a Windows 8 application 181FIGURE 8-3 Fundamental aspects of snapped and filled applications.Any application can experience both view states during its lifecycle. It’s up to the user, not the application, to decide about the display mode. From the application’s perspecti...

  • Page 204

    182 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptWhen snapped, an application has only 320 pixels in width to render its user interface. The width is at least three times larger in the majority of cases.A golden rule of Windows Store applications can be quickly summarized as, “Be ...

  • Page 205

    CHAPTER 8 States of a Windows 8 application 183In the SnapMeApp.init function, you initialize the application’s state and register a handler for the click event of the button. You also register the SnapMeApp.init function to be invoked when the application is ready. You need the following co...

  • Page 206

    184 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptDetecting view state changesThe next step is adding more to the SnapMe application to make it capable of detecting view state change and reacting accordingly. For now, you will only record the new view state and display it to the user...

  • Page 207

    CHAPTER 8 States of a Windows 8 application 185SnapMeApp.getViewStateForDisplay = function () { var viewState = Windows.UI.ViewManagement.ApplicationView.value; switch (viewState) { case Windows.UI.ViewManagement.ApplicationViewState.snapped: return "I'm snapped...

  • Page 208

    186 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 8-6 The SnapMe application run within the Visual Studio simulator.Finally, Figure 8-7 shows the user interface of the sample application when snapped to the left edge of the screen.FIGURE 8-7 The SnapMe application just snapped...

  • Page 209

    CHAPTER 8 States of a Windows 8 application 187Whenever the user clicks the button, the total property of the application’s state object is updated and displayed through the user interface. What happens to the state when the application is snapped, unsnapped, or the orientation changes? Ori...

  • Page 210

    188 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe label with the text “I’m snapped now!” is not visible anymore. This is because the window is forced to a fixed width and the text—right-aligned after the last changes—doesn’t fit anymore in the available space.This exa...

  • Page 211

    CHAPTER 8 States of a Windows 8 application 189To comfortably create a new task, you probably want to use a larger section of the screen. At the same time, you can probably comfortably list tasks in the 320 pixels of the snapped view. So when the user pushes some “Add new task” button, you ...

  • Page 212

    190 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIn Windows 8, you find excellent support for an approach that is becoming a ratified standard. This approach is based on the concept of flexible boxes. You can read more about the background of flexible boxes here: http://bit.ly/SUM2...

  • Page 213

    CHAPTER 8 States of a Windows 8 application 191Now go back to default.html and add the following markup that includes the elements to be styled with the preceding style sheet classes:<div id="flexBox" class="flexible-container"> <div id="block1">Eur...

  • Page 214

    192 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 8-9 The SnapMe application in filled mode.As you can see, all blocks within the flexible container are listed horizontally and fit nicely into the available space. If you display the application in full-screen landscape mode, t...

  • Page 215

    CHAPTER 8 States of a Windows 8 application 193FIGURE 8-10 The SnapMe application in snapped mode.Finally, Figure 8-11 provides a glimpse of the flexible container in full-screen portrait mode.FIGURE 8-11 The SnapMe application in full-screen portrait mode.actionURI(http://www.freepdf-books.com...

  • Page 216

    194 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptCSS media queriesA flexible container is quite powerful and it is the core CSS technology that components specific to Windows 8 are based on, such as GridView, ListView, and SemanticZoom. Suppose now you increase the font size for all...

  • Page 217

    CHAPTER 8 States of a Windows 8 application 195} @media screen and (-ms-view-state: snapped) { } @media screen and (-ms-view-state: fullscreen-portrait) { }These are just predefined media queries for the four view states of a Windows Store application. All you need to do is add CSS settings tha...

  • Page 218

    196 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptAdjusting the video applicationIn Chapter 7, “Navigating through multimedia content,” you created a video application. A listview allowed users to select a YouTube video which was then played through an IFRAME element. The applica...

  • Page 219

    CHAPTER 8 States of a Windows 8 application 197/* Template for headers in the zoomed-in ListView */ .header-title { padding: 8px; } /* Template for items in the zoomed-in ListView */ .zoomed-in-item-container { overflow: hidden; display: -ms-grid; } .zoomed-in-item-container i...

  • Page 220

    198 Start Here! Build Windows 8 Apps with HTML5 and JavaScript height: 338px; width: 450px; border: solid 1px #111; background: -ms-linear-gradient(left, #111 0%,#444 50%,#444 51%,#111 100%); }As you can see, the listview is set to 240 pixels of height and items are 320 pixels wid...

  • Page 221

    CHAPTER 8 States of a Windows 8 application 199 case Windows.UI.ViewManagement.ApplicationViewState.snapped: detailView.layout = new WinJS.UI.ListLayout(); masterView.layout = new WinJS.UI.ListLayout(); break; case Windows.UI.ViewManagement.App...

  • Page 222

    200 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe media query selects a smaller size for the player when the application is snapped to a screen edge.Note In this chapter, you practiced only with applications made of a single page. However, it should be noted that considerations o...

  • Page 223

    201Chapter 9Integrating with the Windows 8 environmentactionURI(http://www.quotationspage.com/quote/27616.html): The heart has its reasons which reason knows nothing of.—Blaise PascalOperating systems owe their acceptance and circulation mostly to successful applications. There are many ways ...

  • Page 224

    202 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptContracts and common tasksMicrosoft Windows 8 is an operating system that imposes several constraints on applications. In particular, applications are isolated from each other. How can applications communicate with one another under t...

  • Page 225

    CHAPTER 9 Integrating with the Windows 8 environment 203The Charms bar counts five elements: Search, Share, Settings, Start, and Devices. The first three are the most interesting from the perspective of contracts. In fact, Search, Share and Settings are three of the basic contracts that most W...

  • Page 226

    204 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptConsuming and publishing servicesThere are two ways for a Windows Store application to deal with contracts—to consume a service and to publish a service. In terms of coding, the first scenario is far easier to code since it just ent...

  • Page 227

    CHAPTER 9 Integrating with the Windows 8 environment 205ContractDescriptionSettingsThe application implements this contract to let users access customizable application settings that affect the way in which users interact with the application. Windows 8 requires that applications expose settin...

  • Page 228

    206 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptImplementing contracts and extensions requires writing code following strict rules and making some changes to the application’s manifest file. The purpose of the second requirement is informing Windows about the system-wide changes ...

  • Page 229

    CHAPTER 9 Integrating with the Windows 8 environment 207Choosing a file to save dataYou start the exercise by making a copy of the TodoList project from Chapter 6, “The user interface of Windows Store applications,” in a new folder of your choice. Before you go any further with contracts, i...

  • Page 230

    208 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFinally, you open todolist.js and modify the content of the displaySummary function as shown below:TodoList.displaySummary = function (task) { // Prepare the content for the flyout var bindableElement = document.getElementById...

  • Page 231

    CHAPTER 9 Integrating with the Windows 8 environment 209Figure 9-4 shows the new look and feel of the summary displayed to the user when the task is ready for storing.FIGURE 9-4 The summary flyout as modified in this chapter.Unsnap before you pick Once the user clicks the button in Figure 9-4, ...

  • Page 232

    210 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIf the application is not in a snapped state, then you are ready to invoke the system’s picker for saving a file.Dealing with the default File save picker Windows 8 provides two distinct components whether you need to pick the file ...

  • Page 233

    CHAPTER 9 Integrating with the Windows 8 environment 211Note also that developers are not entitled to suggest programmatically any start folder not listed in the PickerLocationId enumeration. By design, only the predefined system folders can be presented to the user. The PickerLocationId enumer...

  • Page 234

    212 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe method pickSaveFileAsync displays the user interface and returns only once the user has dismissed the dialog or has selected a file. The method runs asynchronously; this means that you need to use the then method to specify any b...

  • Page 235

    CHAPTER 9 Integrating with the Windows 8 environment 213FIGURE 9-6 Getting the name of the selected file.You don’t need to take any special care to get the name of a file or its file type. Three properties are available: name, displayName, and fileType. If you need to read some additional fil...

  • Page 236

    214 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptChoosing a file to load dataOnce you have some files saved to disk, at some point you need to read them back. Before you can read their content, however, you need to pick them up from storage. For this purpose, you need a File open pi...

  • Page 237

    CHAPTER 9 Integrating with the Windows 8 environment 215FIGURE 9-7 The File open picker component in action.Multiple selectionsThe previous example only allows users to select a single file. To enable multiple selections, you just change the function that triggers the user interface. Here’s h...

  • Page 238

    216 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptSelecting a folderAnother common scenario is when your application just needs users to select a folder; not a file. Windows 8 has a handy object for the purpose—the FolderPicker object. You use this object in much the same way you ...

  • Page 239

    CHAPTER 9 Integrating with the Windows 8 environment 217Choosing the data formatTo be a share source provider, your application doesn’t need to be written in a special way. It only needs to use a set of ad hoc components, such as the DataPackage and the DataTransferManager objects. The former...

  • Page 240

    218 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptHandling requests for dataYou open the todolist.js file and add the following code at the bottom of the TodoList.init method:// Initialization of Share source contract var clipboard = Windows.ApplicationModel.DataTransfer.DataTransfer...

  • Page 241

    CHAPTER 9 Integrating with the Windows 8 environment 219FIGURE 9-8 The user interface displayed when the user attempts to share content from an application that doesn’t support the Share source contract.Sharing data as plain textNow you add the following new function to the bottom of the todo...

  • Page 242

    220 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFinally, you prepare the actual string of text to share and copy it to the package using the setText method. Figure 9-9 shows the effect of the change: the TodoList application can now pass data to the Mail application through the Sha...

  • Page 243

    CHAPTER 9 Integrating with the Windows 8 environment 221Sharing data as HTMLSharing data as HTML is only a bit more complicated. The most intriguing part is how you format the HTML. You can create the HTML string programmatically by concatenating text and HTML elements or you can write the HTML...

  • Page 244

    222 Start Here! Build Windows 8 Apps with HTML5 and JavaScript // This extra work is necessary ONLY if the HTML references an image. // This is the URL of the image as in the HTML block. You transform it in a URI object // and store it as an in-memory stream in the DataPackage resou...

  • Page 245

    CHAPTER 9 Integrating with the Windows 8 environment 223Conditional sharing There might be situations in which an application that shares data is unable to do so. A common example is when the user is required to select some data in order for the data to be shared. For example, in the TodoList...

  • Page 246

    224 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptNote In order to be listed as share target (that is, as the Mail application you dealt with in this exercise), an application needs to implement the Share target contract. You implement this contract by adding a special item to the p...

  • Page 247

    CHAPTER 9 Integrating with the Windows 8 environment 225 "settings": { href: "/pages/settings.html", title: "Settings" } } WinJS.UI.SettingsFlyout.populateSettings(e); };The mandatory next s...

  • Page 248

    226 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptYou open the about.html page and assign the following markup to the BODY tag:<div id="aboutContainer" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'about'}"...

  • Page 249

    CHAPTER 9 Integrating with the Windows 8 environment 227FIGURE 9-13 The About page.Creating a functional Settings pageThe layout of the Settings page—namely the page the user displays to change options and configure the application to work differently—is the same as read-only pages. However...

  • Page 250

    228 Start Here! Build Windows 8 Apps with HTML5 and JavaScript function _saveToSettings() { localSettings.values["defaultPriority"] = that.defaultPriority; }; return that; }); TodoList.settings = new TodoListSettings();Important The exact position of this code is n...

  • Page 251

    CHAPTER 9 Integrating with the Windows 8 environment 229Note that this is only a recommended practice; you can name the dictionary entry in any arbitrary way. To save values permanently, you use code as below:localSettings.values["defaultPriority"] = someValue;To complete the initiali...

  • Page 252

    230 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptA call to the new TodoList.displayTask function is placed now at the very bottom of the TodoList.init method. At the same time, you remove any call to TodoList.performInitialBinding you may have in the TodoList.init method. Here’s t...

  • Page 253

    CHAPTER 9 Integrating with the Windows 8 environment 231<div id="settingsContainer" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'settings', width:'narrow'}"> <div class="win-ui-dark win-h...

  • Page 254

    232 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIn the settings.js file, you add the following code:(function () { "use strict"; var page = WinJS.UI.Pages.define("/pages/settings.html", { ready: function (element, options) { document....

  • Page 255

    CHAPTER 9 Integrating with the Windows 8 environment 233Important It is key to note that thanks to the effort made earlier in the exercise—isolating access to the application settings in a single object—you can now read and save settings quickly and easily without knowing many details of th...

  • Page 256

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 257

    235Chapter 10Adding persistent data to applicationsactionURI(http://www.quotationspage.com/quote/27616.html): It matters if you just don’t give up.—Stephen HawkingNo applications that are expected to be more than just a basic exercise can operate without persis-tent data. As users work with...

  • Page 258

    236 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptMaking Task objects persistentYou make a copy of the TodoList project as you left it at the end of Chapter 9, “Integrating with the Windows 8 environment”; name this new project TodoList-Persistence. To avoid confusion, you might ...

  • Page 259

    CHAPTER 10 Adding persistent data to applications 237It is now about time you replace the basic message box with the code that actually creates the file.Saving data to a fileIn Microsoft Windows 8, the File Save Picker component seeks to be more helpful than one might expect. It doesn’t simp...

  • Page 260

    238 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIt reads like you write some content to a given file and when this has been done you take different routes, whether the operation completed successfully or with some errors. You’ll be using this pattern quite often in Windows Store ...

  • Page 261

    CHAPTER 10 Adding persistent data to applications 239This means that the file picker is trying to create a file but it finds out that a file with the same name already exists. The picker then asks advice. Let’s have a look at the API required to create a new file programmatically. The followi...

  • Page 262

    240 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptNote The then method is executed as soon as the previous function has either successfully completed or has reached an error. The done function is the same, except that it is guaran-teed to throw any error that is not handled inside th...

  • Page 263

    CHAPTER 10 Adding persistent data to applications 241Adding a data serialization component Some changes are required to the TodoList.invokeSavePicker method to make it save the current Task object. First, you change the line that calls into writeTextAsync so that instead of writing down a cons...

  • Page 264

    242 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptGenerally, the problem here is that by choosing a custom serialization format you make yourself responsible for writing both the serializer and the deserializer. In addition, every format requires a distinct ad hoc pair of serializer ...

  • Page 265

    CHAPTER 10 Adding persistent data to applications 243FIGURE 10-4 The JSON content of a .todo file created by TodoList.The next challenge is now making TodoList capable of loading and editing existing JSON-formatted tasks.Creating Task objects from files On the way to reading back the content of...

  • Page 266

    244 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe click handler for the New button is fairly straightforward: it just creates a blank new Task object and displays through the helper method displayTask. The click handler for the Open button is a bit more elaborate since it is conn...

  • Page 267

    CHAPTER 10 Adding persistent data to applications 245Reading file contentTo read the content of the selected file you use the readTextAsync method on the Windows.Stor-age.FileIO object. The method returns the entire content of the file as a string of text. The Windows.Storage.FileIO object, how...

  • Page 268

    246 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptexperience any troubles when you deserialize, but only when (and if) you ever happen to work on deserialized data. In other words, the exception you may run into may come from places in your code that are not directly related to the d...

  • Page 269

    CHAPTER 10 Adding persistent data to applications 247FIGURE 10-5 Selecting a task file.FIGURE 10-6 The selected task is now displayed in the user interface of the TodoList application.Using the application’s private storageSo far, you have created and managed files by accessing the local disk...

  • Page 270

    248 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptwith another form of storage that involves a section of the disk that is private to each application and totally invisible to others.Storage options in Windows 8 Windows Store applications have three options as far as storage is conce...

  • Page 271

    CHAPTER 10 Adding persistent data to applications 249Important If you use the roamingSettings dictionary instead of localSettings, then all of your stored data will be automatically synchronized by Windows 8 across all devices and computers running the application under the same Windows account...

  • Page 272

    250 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptWith the few exceptions represented by library folders (Documents, Pictures, Music), using the local disk from within a Windows Store application is restricted to using file pickers to locate files. Once you hold a reference to a file...

  • Page 273

    CHAPTER 10 Adding persistent data to applications 251StorageDescriptionroamingFiles and folders created within the roaming storage are subject to the same rules as the local store, except that they are synchronized between all Windows 8 machines running your application under the same Windows a...

  • Page 274

    252 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptlisted to be picked for further editing. In default.html, you add the following markup right below the H1 element.<div id="list-of-tasks"> <button id="buttonNewTask">New</button> <div i...

  • Page 275

    CHAPTER 10 Adding persistent data to applications 253 margin: 5px; } #task-listview { background-color: #daf5f7; height: 440px; } .listitem { color: #eee; padding: 4px; background-color: #00f; width: 280px; } #task-editor { float: left; margin-top: 48px; } #bu...

  • Page 276

    254 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptWell, not exactly! To really get the outcome of Figure 10-8, you also need to add some script to todolist.js. The idea of the new application is that the user picks a task from the left-side list and edits it in the rightmost panel. I...

  • Page 277

    CHAPTER 10 Adding persistent data to applications 255FIGURE 10-9 The user now clicks the New button to be able to create a new task. The Cancel button will simply close up the editor. You need to register and create a handler for the button. You register the button in the usual way shown here:d...

  • Page 278

    256 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptNext, you give this function at least a fake body:TodoList.populateTaskList = function () { var tasks = [ { description: "Task #1" }, { description: "Task #2" }, { descriptio...

  • Page 279

    CHAPTER 10 Adding persistent data to applications 257The next step is changing the code of populateTaskList to make it create a list of Task objects from the files found in the application’s local folder. You reference the application’s local folder with the following code:var localFolder =...

  • Page 280

    258 Start Here! Build Windows 8 Apps with HTML5 and JavaScript var bindingList = new WinJS.Binding.List(tasks); var listview = document.getElementById("task-listview").winControl; listview.itemDataSource = bindingList.dataSource; ...

  • Page 281

    CHAPTER 10 Adding persistent data to applications 259FIGURE 10-11 Creating a new task and refreshing the task list.Saving tasks to the roaming folderWhen the user clicks to add or update the task, the current version of the code invokes the TodoList.pickFileAndSaveTask method. This method in t...

  • Page 282

    260 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe name of the file is the description of the task; the folder where the file is created or saved is the roaming folder of the application. Note that files will be silently overwritten if the names match. This means that you can’t ...

  • Page 283

    CHAPTER 10 Adding persistent data to applications 261This method takes a few of the lines you already had in TodoList.populateTaskList. In particular, it takes out the configuration work (such as, template and event binding) that only needs be done once. You call TodoList.setupTaskList from wit...

  • Page 284

    262 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptOne extra step you might also want to take consists of removing the selection on the ListView when the current task is closed. Users close a task by clicking the Cancel button. Here’s the new version of the cancelTaskClick method:T...

  • Page 285

    CHAPTER 10 Adding persistent data to applications 263 msg.commands.append (new Windows.UI.Popups.UICommand("Yes, proceed!", TodoList.deleteTask)); msg.commands.append (new Windows.UI.Popups.UICommand("No, I'm not sure...", function() {})); msg.defaultCommandIndex ...

  • Page 286

    264 Start Here! Build Windows 8 Apps with HTML5 and JavaScript }); }); }You first get the object that references the task currently displayed in the editor, and then you get the name of the corresponding file—in this case, the file name matches the description of the task. F...

  • Page 287

    265Chapter 11Working with remote dataactionURI(http://www.quotationspage.com/quote/27616.html):The least of things with a meaning is worth more in life thaactionURI(http://www.quotationspage.com/quote/27616.html):n the greatest of things actionURI(http://www.quotationspage.com/quote/27616.html)...

  • Page 288

    266 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptGetting remote dataYou start by creating a new Windows 8 project using the Blank App template. Next, you create a new Pages folder and add files such as header.html and footer.html from the previous chapters; edit the default.html and...

  • Page 289

    CHAPTER 11 Working with remote data 267FIGURE 11-1 The popular icon that identifies links to URLs that return RSS data.After you have determined the URL to invoke, you pass it along to the WinJS.xhr object. As usual with operations that can be potentially lengthy, you need to write the code in ...

  • Page 290

    268 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptParameterDescriptionheadersYou can set this parameter to a JavaScript object whose property names indicate valid HTTP header names. The property values are then set as header values in the HTTP request.dataThe parameter refers to a Ja...

  • Page 291

    CHAPTER 11 Working with remote data 269 } });So far, you have passed only one function to the then function of the promise. The then function invokes the first passed function when the request completes successfully. The completed function receives the response from the server as its...

  • Page 292

    270 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptGiving requests a timeoutA request to a remote server may take a while to complete. The time-to-response depends on a number of factors, including bandwidth, and traffic on the target site. If completing the operation in a fixed amoun...

  • Page 293

    CHAPTER 11 Working with remote data 271A look at the application’s manifestAll Windows Store application projects include a manifest file. So far, you haven’t needed to deal with the manifest. However, when your app needs special capabilities, such as the ability to make HTTP requests over ...

  • Page 294

    272 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptImportant The lesson you should learn from this is that if at some point you code a feature and it just doesn’t work, without any apparent reason, check to make sure that you have declared the appropriate capability for each Windows...

  • Page 295

    CHAPTER 11 Working with remote data 273 function (error) { rssReaderApp.alert("A download error occurred."); } ); The rssReaderApp.parseFeed function will receive whatever content the remote URL returns and will attempt to transform it into a format usable by the applic...

  • Page 296

    274 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIn your parser, the first thing you want to do is select all the item elements and then loop through them to extract specific information, such as the title, description, a link to the source, and perhaps a category. The following cod...

  • Page 297

    CHAPTER 11 Working with remote data 275News feed, but many other RSS feeds omit the category node. To avoid runtime exceptions, you should check to make sure that the category node exists before attempting to read it programmatically. To stay on the safe side, you might also want to extend suc...

  • Page 298

    276 Start Here! Build Windows 8 Apps with HTML5 and JavaScript data-win-options="{ itemDataSource: RssReader.Items.dataSource, itemTemplate: newsItemTemplate, layout: {type: WinJS.UI.ListLayout} }"> </div>At this point, i...

  • Page 299

    CHAPTER 11 Working with remote data 277Making any displayed news item clickableThe first step in taking control of a user-click of a displayed news item will look familiar if you have completed all the exercises in previous chapters. Edit the options for the ListView to configure direct selecti...

  • Page 300

    278 Start Here! Build Windows 8 Apps with HTML5 and JavaScript document.getElementById("titleDetail").innerHTML = currentArticle.title; document.getElementById("pubDateDetail").innerHTML = currentArticle.pubDate; document.getElementById("categoryDetail")....

  • Page 301

    CHAPTER 11 Working with remote data 279However, when you get your JSON data from a remote source, you can only control the deserialization portion of the full data cycle. Unfortunately, this doesn’t mean that you need to do only half the work. Although commonly used and close to a de facto s...

  • Page 302

    280 Start Here! Build Windows 8 Apps with HTML5 and JavaScript <!-- Flickr Photo Viewer references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> <script src="/js/flickrApp....

  • Page 303

    CHAPTER 11 Working with remote data 281Table 11-2 provides a brief explanation of the URL parameters.TABLE 11-2 Query string parameters for the Flickr public web serviceParameterDescriptiontagmodeThis parameter can take the value all or any; and indicates whether any selected photos must match ...

  • Page 304

    282 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThe code adds the format function to the prototype of the JavaScript’s native String object. By doing this, any string manipulated under the scope of the helpers.js file will expose an additional format method. After you reference...

  • Page 305

    CHAPTER 11 Working with remote data 283The heart of the Flickr application is inside the body of the flickrApp.parseFeed method. Here’s its implementation:flickrApp.parseFeed = function (json) { var pictures = JSON.parse(json); for (var i = 0; i < pictures.items.length; i++) { ...

  • Page 306

    284 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptAdding pictures to the user interface To display the retrieved pictures, you can use a Windows 8 ListView. In default.html you already have a DIV element bound to the ListView component. The next step consists of binding the ListView...

  • Page 307

    CHAPTER 11 Working with remote data 285Figure 11-7 displays the output of the application, if all goes well.FIGURE 11-7 The Flickr Viewer application in action.enhancing the application As mentioned, JSON is not an exact science. So it’s possible to get a JSON string that appears to be invali...

  • Page 308

    286 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptDealing with invalid JSONWhen you detect invalid JSON, it’s not immediately obvious who might be the source of the problem. The only fact you know is that the parser failed—but why? Was it because the parser has a bug? Or is the J...

  • Page 309

    CHAPTER 11 Working with remote data 287FIGURE 11-10 Placing a breakpoint to inspect the content of the json variable.When execution has paused on the breakpoint, you just move your mouse over the json variable. A possibly very wide tooltip appears. If the text is fairly long, inspecting it from...

  • Page 310

    288 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 11-12 The text visualizer to copy the JSON text to the clipboard.With the JSON copied to the clipboard, you can go to the JSONLint website mentioned earlier, paste the text in the editor, and validate it.Fixing invalid JSONIt t...

  • Page 311

    CHAPTER 11 Working with remote data 289It is important to note that simply calling the replace function doesn’t work, because the replace function only replaces the first occurrence of the matching string. You need to wrap the string to replace it in a regular expression (as shown below) and ...

  • Page 312

    290 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptAnd finally, you get to write the code for the handler and to clear up photos.flickrApp.clearClick = function () { flickrApp.clear(); } flickrApp.clear = function () { // Zero the length of the list FlickrFeed.Pictures.spl...

  • Page 313

    291Chapter 12Accessing devices and sensorsactionURI(http://www.quotationspage.com/quote/27616.html):If you are interested, you never have to look for new interactionURI(http://www.quotationspage.com/quote/27616.html):ests. They come to you. When you are genuinely interested in one thing, it wil...

  • Page 314

    292 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptits public API, apply the correct calls, and get the behavior you expect. In the 1990s, working with hardware was often a difficult and challenging task. Thankfully, we now live and code in a different century! As an example, in the ...

  • Page 315

    CHAPTER 12 Accessing devices and sensors 293 <br /> <button id="buttonShoot" class="horizontalBtn">Take a picture</button> <br /> </div>Basically, the webcam application consists of a button that triggers the webcam and an IMG element w...

  • Page 316

    294 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptNote that the single Webcam capability is sufficient for the purposes of writing an instant photo application. However, if you were writing an application that uses the webcam to capture a video stream, you would probably also want to...

  • Page 317

    CHAPTER 12 Accessing devices and sensors 295 dialog.photoSettings.croppedAspectRatio = aspectRatio; dialog.photoSettings.format = Windows.Media.Capture. CameraCaptureUIPhotoFormat.jpeg; dialog.captureFileAsync(Windows.Media.Capture.Ca...

  • Page 318

    296 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptWhen a user runs the application for the first time, they must provide permission to use the webcam. Figure 12-3 demonstrates a security feature of Windows 8: the user must explicitly enable the application to use the webcam. If the u...

  • Page 319

    CHAPTER 12 Accessing devices and sensors 297To actually take a picture, you tap or double-click the screen. Before doing so, users can further tweak the camera options, or even set a timer. The Back button, visible at the top-left corner of the screen, provides a way to return to the applicatio...

  • Page 320

    298 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptDisplaying the captured pictureThe following code shows what you need in order to display the captured picture via an IMG element in the main page of the application.dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.ph...

  • Page 321

    CHAPTER 12 Accessing devices and sensors 299You’ve seen in past chapters that a Windows Store application can save any data in its own reserved space. While this option was more than sufficient for the TodoList application you built, it is arguably not a truly viable option for the Instant P...

  • Page 322

    300 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptYou should save a reference to the newly created folder somewhere so that you can retrieve it later when you actually store the picture. To do that, declare a new global property on the application root object. Edit your instantPhotoA...

  • Page 323

    CHAPTER 12 Accessing devices and sensors 301Figure 12-8 shows a few photos captured and then safely stored in the Instant Photo folder under the Pictures library.FIGURE 12-8 The Instant Photo folder.Working with the printerEven though the world is moving toward an increasingly digital and virtu...

  • Page 324

    302 Start Here! Build Windows 8 Apps with HTML5 and JavaScripttask from the application’s user interface by, for example, clicking a button. When this happens, the charms show up programmatically; the user can then select a printer and print.Setting up the sample applicationBefore you focus on...

  • Page 325

    CHAPTER 12 Accessing devices and sensors 303FIGURE 12-9 The Print-n-Go application.registering the Print contractMost of the magic required to print content in Windows 8 happens during the initial phase of an application. In fact, after registering the Print contract during initialization, you...

  • Page 326

    304 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptA print task has a name that will reference the job in the printer and is associated with some work aimed at grabbing and formatting the content to print. In Windows 8, you always use a single line of code to reference the code to pri...

  • Page 327

    CHAPTER 12 Accessing devices and sensors 305FIGURE 12-11 Preview of the page being printed.Printing context-specific contentPrinting in Windows 8 is purposefully contextual; users expect to be able to print just what’s relevant in the current state of an application at any time. This means th...

  • Page 328

    306 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFinally, in default.html add a sibling DIV element for each print scenario you intend to support. Here’s how:<body> <div id="main"> ... </div> <div id="print-template1">...

  • Page 329

    CHAPTER 12 Accessing devices and sensors 307</style> <style media="screen"> #print-template1 { display: none; } #print-template2 { display: none; } </style>The result is that the two print templates are hidden in screen mode, w...

  • Page 330

    308 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIn general, you need to have code similar to the following in order to handle click events on print buttons in your application.printerApp.print1 = function () { printerApp.preparePrint1(); Windows.Graphics.Printing.PrintManag...

  • Page 331

    CHAPTER 12 Accessing devices and sensors 309Note Since WinJS applications are essentially browser-based applications, you may think that you can print the old JavaScript way: by calling the window.print method. That works, but it is viable only in very simple situations. It is recommended that ...

  • Page 332

    310 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 12-14 Checking the Location capability.The app obtains the location information from the GPS sensor, if one is available on the device. If not, the component infers the user’s location information from the IP address that con...

  • Page 333

    CHAPTER 12 Accessing devices and sensors 311object that receives latitude and longitude information. Here’s the code in the latLongApp.display method that displays the raw information to the user:latLongApp.display = function (location) { document.getElementById("lat").innerHTML...

  • Page 334

    312 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 12-16 The Settings page where the user can enable or revoke location permission to the application.Making use of geolocation dataGeolocation data are quite sensitive, because a user’s location can—potentially—reveal where...

  • Page 335

    CHAPTER 12 Accessing devices and sensors 313helpful for visualizing the user’s location on a map. First, you need to download the Bing SDK from the following URL: http://bit.ly/N9NFQN. Then, to reference the Bing SDK in your project, right-click the References node and select Add Reference. N...

  • Page 336

    314 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 12-18 Getting the key to use the Bing SDK.Make sure you note the key, because you will need it to use the Bing SDK in your applications.latLongApp.BingKey = "...";You need to initialize the Bing library before using i...

  • Page 337

    CHAPTER 12 Accessing devices and sensors 315You might want to explicitly size the DIV by assigning a width and height. Explicit sizing prevents the map from covering the entire screen. You’ll need some new functions in latLongApp.js. Add the following function that prepares the ground for dis...

  • Page 338

    316 Start Here! Build Windows 8 Apps with HTML5 and JavaScript var pushpin = new Microsoft.Maps.Pushpin(location, null); latLongApp.map.entities.push(pushpin); }Call the addPushPin method at the end of the latLongApp.display method.latLongApp.addPushPin(mapCenter);Figure 12-19 shows the r...

  • Page 339

    CHAPTER 12 Accessing devices and sensors 317Add a new function to the latLongApp.js file. This function places a remote call to the Bing service, passing coordinates and getting back detailed civic address information. The URL to call has the following format:http://dev.virtualearth.net/REST/...

  • Page 340

    318 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFigure 12-20 shows the final result.FIGURE 12-20 Showing an info-box with the civic address for the given coordinates.SummaryBoth desktop computers and mobile devices (that is, laptops, tablets, and smartphones) are rich in sensors an...

  • Page 341

    319Chapter 13Adding Live tilesactionURI(http://www.quotationspage.com/quote/34024.html):There are sadistic scientists who hurry to hunt down errors inactionURI(http://www.quotationspage.com/quote/34024.html):stead of establishing actionURI(http://www.quotationspage.com/quote/34024.html):theacti...

  • Page 342

    320 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 13-1 Tiles in the Start screen of a Windows 8 machine.Tiles in actionUsers can operate on tiles in much the same way they can operate on icons in earlier versions of Windows. Specifically, the user can move tiles around, group ...

  • Page 343

    CHAPTER 13 Adding Live tiles 321FIGURE 13-2 The context menu of a tile.Just as with icons in Windows 7 and earlier versions, users can move tiles around and organize them in a horizontally scrolling list. Unlike icons, though, in Windows 8 tiles can’t be grouped into folders. Moving tiles cou...

  • Page 344

    322 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptresizing tilesTiles can be of two sizes: small or large. A small tile is a square box of 130 x 130 pixels; a large tile is about twice that wide. In Figure 13-3, the Microsoft Internet Explorer tile being moved is a small one; the Mai...

  • Page 345

    CHAPTER 13 Adding Live tiles 323Creating Live tiles for a basic application The most interesting aspect of dealing with tiles is making them live, via support for programmatic notifications. To approach the task of turning tiles into Live tiles in a simple way, you’ll first build a new sample...

  • Page 346

    324 Start Here! Build Windows 8 Apps with HTML5 and JavaScript <h1>Simple Tiles Demo (CH13)</h1> <div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri:'/pages/footer.html'}"></div> </body> </html>So far, so g...

  • Page 347

    CHAPTER 13 Adding Live tiles 325The XML content returned to you depends on the selected template. For the template chosen here, the template contains two text elements to be filled up with the text you want to display on the tile. Add the following code to add application-specific content to th...

  • Page 348

    326 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 13-5 The Live tile for the sample application in action.Regardless of the template you choose, the original application’s logo is still displayed at the bottom of the tile. The rest of the tile is at your disposal and can be...

  • Page 349

    CHAPTER 13 Adding Live tiles 327preparing the groundYou make a copy of the project from Chapter 10 and name it TodoList-Local. You might want to rename project files to reflect the number of the current chapter. You might also want to tweak the content of the default.html page for pure graphica...

  • Page 350

    328 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptAs a user, when you right-click a tile you see a context menu with the options available. When Live tiles are not active, no special option is made available. Windows 8 detects if the application supports Live tiles and adds an extra ...

  • Page 351

    CHAPTER 13 Adding Live tiles 329more about the available tile templates, you can pay a visit to the following URL: http://msdn.micro-soft.com/en-us/library/windows/apps/hh761491.aspx.Most of the time, the tile contains a title and a subtitle possibly split over multiple lines. Several templates...

  • Page 352

    330 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptSelecting data to display in tilesThe TodoList application is entirely based on a list of tasks; each task has its own description, due date, and priority. A Live tile for TodoList will likely display the latest task or perhaps the ne...

  • Page 353

    CHAPTER 13 Adding Live tiles 331// Combine together small and large templates var node = xmlLarge.importNode(xmlSmall.getElementsByTagName("binding"). item(0), true); xmlLarge.getElementsByTagName("visual").item(0).appendChild(node);The net effect of this code is ...

  • Page 354

    332 Start Here! Build Windows 8 Apps with HTML5 and JavaScript tasksList = tasksList.createSorted(function (first, second) { return first.dueDate > second.dueDate; }); ...

  • Page 355

    CHAPTER 13 Adding Live tiles 333Figure 13-9, instead, shows the small tile. As you can see in Figure 13-9, now the context menu of the application’s tile also includes buttons to turn on and off live notifications.FIGURE 13-9 The small tile of the application with its context menu.More advanc...

  • Page 356

    334 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptIn the first exercise, you configured a sample application feeding a small tile with canned data. Next, you extended the TodoList application from Chapter 10 and added small and large Live tiles to display the details of the latest ta...

  • Page 357

    335Chapter 14publishing an applicationSuccess is the ability to go from one failure to another with no loss of enthusiasm.— Winston ChurchillFor many years, the process of publishing a Microsoft Windows application was limited to building a setup program—possibly with the aid of an ad hoc f...

  • Page 358

    336 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptGetting a developer accountSo, Windows 8 users can only install new Windows 8 applications from the Windows Store. But who can upload such applications? The answer is that every Windows 8 developer must obtain a developer account fro...

  • Page 359

    CHAPTER 14 Publishing an application 337FIGURE 14-2 Click to start the registration process.If you already have a Windows Phone developer account, you can associate that to Windows 8 instead of completing a new registration. However, if you want to keep distinct accounts for Windows Phone and W...

  • Page 360

    338 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 14-3 Do you want an individual or a company account?Note that you can’t switch from one type of account to another. To create a company account, you need to provide Microsoft with a lot more documentation about the company an...

  • Page 361

    CHAPTER 14 Publishing an application 339payment detailsWhether you want to create a personal or business account, you must be a registered Windows 8 developer. Unfortunately, registration is not free. You must pay to be a Windows Phone or iOS developer, and you must pay a yearly fee to be a W...

  • Page 362

    340 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 14-6 You’re now enabled to publish free applications to the Windows Store.From the Microsoft perspective, the fundamental difference between free and paid user applications is that in the latter case, Microsoft needs to pay ...

  • Page 363

    CHAPTER 14 Publishing an application 341reserving an application nameYou can reserve a name for your future application at any time by clicking the Reserve App Name option in the Store menu of Visual Studio (see Figure 14-7).FIGURE 14-7 Starting the procedure to reserve the application’s nam...

  • Page 364

    342 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptLocalizing an application nameThere are some situations in which the application has a name that is “neutral” to spoken languages. In such cases, you won’t ever want to change the name regardless of how many languages you locali...

  • Page 365

    CHAPTER 14 Publishing an application 343file with extra information used for debugging purposes. After your application is bug-free and feature-complete, there’s no longer any need to keep the debug information. Compiling in Release mode gives you a more compact (and even slightly faster) e...

  • Page 366

    344 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptFIGURE 14-11 Setting the name of the application.In the next step, you choose the destination folder on the local disk where you want to save the package. Keeping track of this folder is important, because you will need it to upload t...

  • Page 367

    CHAPTER 14 Publishing an application 345The target platform refers to the hardware architecture of the machines that may run your application. To ensure the widest possible audience for your application, you should generally choose to compile for all platforms. Important The point here is that...

  • Page 368

    346 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptcan accept. There’s no guarantee that your application, as-is, will be accepted and published to the store. Your application must still be certified before it can appear in the Windows Store.Any application submitted to the Windows ...

  • Page 369

    CHAPTER 14 Publishing an application 347FIGURE 14-15 A sample report of the standard tests for a successful app.Uploading the application The final step in getting the application published is to send the package to Microsoft. You do this by clicking Upload App Packages from the Visual Studio S...

  • Page 370

    348 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptsee, and any keywords that may help them to find your app in the store (see Figure 14-17). This is also the place where you can add screenshots to help sell your application to potential customers.FIGURE 14-17 Entering the descriptio...

  • Page 371

    CHAPTER 14 Publishing an application 349After you submit your application for certification, the related package is queued for the automated tests. Automated tests are related to security and technical compliance of the application. They are analogous to the certification tests you (should) h...

  • Page 372

    350 Start Here! Build Windows 8 Apps with HTML5 and JavaScriptThese applications, though, are usually intended for distribution through the Windows Store in an unrestricted way. This means that after you have made the application available to the Windows Store, any Windows 8 user can get and i...

  • Page 373

    351active pseudo-class, anchors, 89,67– 90,68alpha channel for color transparency, 78,56anchor pseudo-classes, 89,67– 90,68anchors. See <a> element, HTMLAND keyword, media queries, 93,71anonymous functions, JavaScript, 103,81, 110,88– 111,89App bar, 125,103, 130,108 131,, 109...

  • Page 374

    autofocus attribute, <input> element352 Indexformat for, 64,42playing, 63,41autofocus attribute, <input> element, 58,36 59,–37autoplay attribute<audio> element, 63,41<video> element, 65,43AutoPlay event, 227,205AutoPlay provider, 227,205Bbackground-attachment pro...

  • Page 375

    developer account Index 353file name for, 233,211– 235,213folder selections only, 238,216multiple selections for, 237,215open option for, 232,210, 236,214– 238,216, 266,244save option for, 232,210 235,–213, 259,237– 260,238starting location for, 232,210 233,–211suggested file...

  • Page 376

    device-centric design354 Indexcreating, 29,7 31,–9, 358,336 361,–339for free applications, 358,336– 361,339for paid applications, 361,339– 362,340personal or business, 359,337 360,–338renewing, 30,8device-centric design, 126,104deviceschoosing, for playing files, 227,205connect...

  • Page 377

    forms Index 355creating Live tiles, 345,323– 346,324notification object for, 346,324 348,–326TodoList project, 144,122– 168,146about page for, 247,225 249,–227building application, 163,141CSS files for, 149,127– 151,129debugging, 163,141 165,–143deleting tasks, 284,262 286,...

  • Page 378

    <frame> element, HTML356 Index<frame> element, HTML, 56,34full-screen view states, 200,178 201,–179landscape mode, 200,178portrait mode, 200,178– 201,179rotation, detection of, 201,179functions, JavaScript, 103,81– 111,89anonymous functions, 103,81 110,, 88– 111,89call...

  • Page 379

    latitude and longitude, detecting Index 357file formats for, 175,153 316,, 294gallery of. See Gallery project examplelogos for application, 145,123, 152,130– 154,132Paint.NET tool, 152,130 153,–131splash screen, 145,123, 154,132for user account, 227,205zooming, 183,161– 186,164Ima...

  • Page 380

    LatLong project example358 IndexLatLong project example, 331,309– 340,318address information, determining, 338,316– 340,318latitude and longitude, detecting, 331,309 334,–312mapping location data, 334,312– 340,318lifecycle of applications, 138,116– 141,119<link> element, HTM...

  • Page 381

    Print settings provider Index 359novalidate attribute, <form> element, 62,40null values, JavaScript, 98,76numberButtonClick() function example, 41,19Number object, JavaScript, 97,75number type, JavaScript, 97,75Oobject literals, JavaScript, 102,80objectsapplication, persisting, 257...

  • Page 382

    privacy page, for Settings360 Indexprivacy page, for Settings, 247,225product key, Visual Studio 2012, 27,5– 29,7programming languages, 32,10 121,, 99. See also JavaScriptprojects. See also example projectsbuilding applications from, 37,15 38,–16creating, 32,10 38,–16CSS for. See CSS ...

  • Page 383

    TodoList project example Index 361settings event, app object, 246,224Settings panel, 225,203 246,, 224adding items to, 246,224 249,–227dismissing, 248,226running code before and after, 254,232Share contracts, 225,203, 226,204 238,, 216 246,–224application targets for, 246,224conditi...

  • Page 384

    ToggleSwitch widget362 Indexfile picker for, 228,206– 235,213files and folders for, 144,122 146,–124form for, 155,133– 168,146header and footer for, 147,125– 149,127Live tiles for, 348,326– 355,333logos for, 152,130– 154,132manifest file, 151,129– 152,130persisting data, 25...

  • Page 385

    Windows 8 UI Index 363WW3C (World Wide Web Consortium), 70,48WAV files, 64,42web browsers. See browserswebcam, 313,291– 323,301capability for, setting in manifest file, 315,293– 316,294capturing photos from, 316,294 319,–297configuring, 316,294displaying photos from, 320,298saving ...

  • Page 386

    Windows App Certification Kit364 Indextouch-enabled, 125,103 127,, 105visual widgets, 129,107 130,–108Windows App Certification Kit, 368,346– 369,347Windows clipboard, alternative to. See Share contractsWindows Live ID, 29,7Windows Runtime environment. See WinRT environmentWindows Store ...

  • Page 387

    About the authorsDino Esposito, a long-time trainer and top-notch consultant, is the author of many popular books for Microsoft Press that have helped the professional growth of thousands of .NET developers and architects. Dino is the CTO of a fast-growing company that provides software and mob...

  • Page 388

    SurvPage_Corp_02.indd 15/19/2011 4:18:12 PMWhat do you think ofthis book? We want to hear from you! To participate in a brief online survey, please visit: microsoft.com/learning/booksurvey Tell us how well this book meets your needs—what works effectively, and what we can do better. ...