1 99

Table of Contents Introduction ....

WinJS Tools for Pages and Page Navi

Chapter 6: Layout .................

Design Guidelines for Settings ....

Manipulating Audio and Video ......

Managing Secondary Tiles ..........

The User Profile (and the Lock Scre

The Windows Store APIs ............

Introduction Welcome, my friends, t

I'm also assuming that your interes

Acknowledgements In many ways, this

Support for developers, however, ca

technologies, including DirectX, XA

The upload process will walk you th

FIGURE 1-2 A typical app page in th

do this, I’m sure!). In a hotel,

The app host is more or less Intern

Sidebar: Mixed Language Apps Window

When snapped, on the other hand, ap

Capability Description Prompts for

Taking a Break, Getting Some Rest:

So you might say, “Well, I should

that the user has to configure the

Fortunately, the Windows Store dash

graphics called for in the design s

4. After Visual Studio churns for a

Add-AppxDevPackage. That batch file

package, whereas a single / refers

QuickStart #1: Here My Am! and an I

FIGURE 2-8 Snapped wireframe (left;

which we’ll instantiate a Bing ma

orientation, screen resolution, and

FIGURE 2-12 Full-screen landscape v

What this means is that, for the mo

Create the map (though the namespac

Next, in the second parameter to po

FIGURE 2-17 Setting the Location ca

Here we’re providing capturePhoto

the contract is an abstraction that

Extra Credit: Receiving Messages fr

Note that such apps might not be ab

Chapter 3 App Anatomy and Page Navi

content and controls from web servi

Such capabilities are blocked becau

Can you do any kind of dynamic page

appdata. This happens via Windows.S

I don’t know about you, but I rea

telling you to not use it! After al

App Activation First, let me congra

In the table, note that 80% scale t

Activation Code Paths As we saw in

splashScreen SplashScreen Contains

In truth, so long as the user keeps

Of course, setPromise ultimately do

previousExecutionState values are d

object to which you can add whateve

Because we stored lastPosition in s

FIGURE 3-9 The output of the Simple

What about launching from the previ

For all other details on this funct

The Navigation App Template, PageCo

(function () { "use strict"; WinJS.

}, ); if (that.pageElement.winContr

Sidebar: Helping Out IntelliSense I

thousands of items, where tapping a

Completing the Promises Story Whew!

mechanism on top of singular XHR op

The story of controls in Windows 8

Creating or instantiating HTML cont

Hyperlink href, target Link text L

defined as part of the WinJS.UI nam

Clearly, then, the bulk of the work

var element = document.getElementBy

This example is taken directly from

FIGURE 4-7 Expanding a WinJS contro

Flexbox -ms-[inline-]flexbox (value

Note Though not shown here, you can

For the ToggleSwitch, win-* classes

• If a WinJS.UI.Tooltip is gettin

Custom Control Examples To see thes

Between calendar.js and calendar.cs

]]> Whe

This would be appropriate if you cr

Two-way: essentially one-way bindin

The code for this can be found in T

Sidebar: Data-Binding Properties of

Implementing Two-Way Binding To imp

• oneTime A function that just lo

• Windows 8 apps have rich stylin

Collection Control Basics To seek t

indingList: bindingList, array: arr

Now while the ListView control in S

The header template in html/scenari

In the modified sample I changed na

} return groupCompareGlobalized(lef

a function instead of a declarative

var list = new WinJS.Binding.List()

data-win-options="{ itemDataSource:

e used anywhere it’s appropriate,

If you were to provide your own nav

sample code in this chapter’s com

Because of data binding, changes to

What is does have, however, is this

What you then do inside the element

• The groups themselves are all s

and the current viewable area. Thou

Styling Following the precedent of

Technically speaking, the layout pr

or you can set layout.groupInfo fro

Using the first item’s dimension

You can set a breakpoint in this fu

Incremental Loading Apart from pote

The yellow bars indicate execution

If it’s not provided (as when the

During initialization (outside the

Chapter 6 Layout Compared to other

that appear when needed through app

Within the body of content, then, W

} -ms-grid-columns: 120px 2fr 80px

-ms-scroll-snap-x Shorthand to comb

WinRT: filled -ms-view-state: fille

Handling View States As I just ment

var mql = window.matchMedia("(-ms-v

individual items in snapped view. B

FIGURE 6-5 Options for display size

If your developer sensibilities obj

Content goes here This is really

Such a layout is most easily achiev

Because the specs themselves are st

/* In CSS */ #divMain { width: 100%

CSS styles that are supported for W

Within the activated handler docume

Multicolumn Elements and Regions Tr

FIGURE 6-9 CSS region chains to flo

Chapter 7 Commanding UI For consume

• Commands that can’t be placed

which provide many specifics on pla

Tip To prevent the app bar from app

This example doesn’t provide any

var appbar = document.getElementByI

• afterhide occurs immediately af

This button’s click handler uses

In the extraClass properties we’v

To provide graphics of your own, do

It should come as no surprise by

Flyouts and Menus Going back to our

are optional with show. (Note also

function confirmOrder() { bought =

The point of this last example is t

Also, go into css/header-menu.c

In the contextmenu handler menu.sho

Scenario 3 is identical to Scenario

The app bar now appears as follows,

This message will appear if the use

Chapter 8 State, Settings, Files, a

while our permanent home was being

• Account and profile configurati

By the way, you might have some rea

var localSettings = Windows.Storage

It is also possible to migrate app

Tip There are some file extensions

Sidebar: Closing Streams vs. Closin

Using App Data APIs for State Manag

efore setting up new defaults. As m

Roaming State The automatic roaming

good idea to not be too aggressive

Each app-supplied command can do on

There are two ways to implement thi

function helpCommandInvoked(e) { va

Programmatically Invoking Settings

Sidebar: Changes to Permissions A c

Think about this for a moment (as I

eturns an appropriate StorageFile o

function pickSinglePhoto() { // Ver

When picking multiple files, the re

indicate a new filename in which to

scenario oriented on the music libr

A QueryOptions is generally created

The setPropertyPrefetch method goes

What We’ve Just Learned • State

Chapter 9 Input and Sensors Touch i

• Second, when you need to handle

One or more fingers touch the scree

You might notice a conspicuous abse

Note that this method has no effect

• TouchCapabilities Properties ar

Tip Pointer events won’t fire if

Properties Description currentPoint

The first step to receiving gesture

• MSGestureHold occurs when MSPoi

FIGURE 9-3 A conceptual representat

FIGURE 9-4 The Input Instantiable G

obviously a specific deceleration m

• Process keydown, keyup, and key

For passwords you get a key to hide

keyboard sample. 50 Adding listener

Standard Keystrokes The last piece

FIGURE 9-9 The Input Ink sample wit

(string), and timestamp (Date) prop

Like all other WinRT APIs, however,

Here’s an example of such code fr

Chapter 10 Media To say that media

movie.controls = true; document.get

declared inline, created dynamicall

} document.getElementById("r").styl

function onImageError(source) { sou

• By copying pixel data from a vi

It’s also helpful to understand t

Video Element Extension APIs Beyond

vid.msInsertVideoEffect("GrayscaleT

elements with the same source. The

in the background. As a developer,

function soundLevelChanged() { //Ca

Playing Sequential Audio An app tha

need to bypass the audio element an

To guarantee the ordering we use Pr

Thumbnails First, StorageFile.getTh

or combination of System.GPS.Longit

} return degrees + "°" + minutes +

Most of the displayImageUI function

provides a specific BitmapEncoder i

method can be called only once and

Transcoding and Custom Image Format

Transcoding happens either from one

In Scenario 2, the sample always us

Media Capture There are times when

ecordLimitationExceeded Fired when

} captureInitSettings.videoDeviceId

} // Add the devices to deviceList

Streaming from a Server and Digital

Here’s how such apps generally wo

Next you’ll want to wire up handl

• WinRT provides a rich API for m

necessary. In this way, excessive a

The Control Panel setting can be ob

screen; the Panel animations are fo

want to chain or synchronize animat

Create addToList animation. var add

CSS Animations and Transitions As n

Animations work in an opposite mann

Keyframes, while typically defined

FIGURE 11-2 Output of Scenario 3 of

What’s more, requestAnimationFram

Still, 20% is a lot of CPU power to

Chapter 12 Contracts Recently I dis

File activation (file type associat

more specific. For instance, when a

var dataPackageTitle = document.get

The other interesting part of Scena

When sharing an image, don't forget

FIGURE 12-3 The Share content targe

• Acknowledge user actions when y

The key here is the args.detail.sha

target app. If you’re using image

FIGURE 12-7 Controls to create a qu

The question is how to wire up comm

The Search contract that makes this

FIGURE 12-11 The Search declaration

} } })); In the search activation p

} }); Windows.ApplicationModel.Sear

The request object also has a getDe

Type to Search The final feature of

egistered for that type, rather tha

At the very bottom of this UI you c

ecord a new sound. In such cases, h

Activation of a File Picker Provide

Windows.ApplicationModel.Activation

A final note is that a file picker

}; // Create a file to provide back

The next step for the provider is t

FIGURE 12-18 The provider sample’

FIGURE 12-21 The provider sample’

• If the UI status is visible, sw

Just as the file picker contract al

Using the Contact Picker Contacts a

} } }); Contact Picker Providers On

As you can see, the homeEmail field

Chapter 13 Tiles, Notifications, th

FIGURE 13-1 The typical default Sta

Selecting an item on the Start scre

In many ways, live tiles might redu

toss up lots of superfluous toast,

Yet Windows doesn’t want to force

The third way an app can issue upda

Providing both square and wide stat

• arguments A string that’s pas

function activated(eventObject) { i

16 or fewer characters that is used

Third, if you supply an image that

arrive on a Windows 8 machine will

The Notifications Extensions Librar

The other bits of the manifest that

In such cases it would be better to

Windows.UI.Notifications.BadgeUpdat

you’d use start time), or the pha

Tip The tile and badge updaters are

eturned from page requests, as we

through the Web platform installer.

Toast Notifications So far in this

FIGURE 13-16 Issuing text toasts th

supports addImageQuery for scale, l

A scheduled toast is created using

To update a tile, set a badge, or i

Your app should go through this sho

matter of sending an XmlHttpRequest

In the running app, the pushnotific

Background Tasks and Lock Screen Ap

FIGURE 13-18 The manifest editor fo

In this code, the BackgroundTaskBui

var internetCondition = new backgro

The Background task sample provides

Note Working with the lock screen i

Debugging Background Tasks By this

• Periodic updates for tiles and

Network Information and Connectivit

networkstatuschanged event that we

Note Windows Store apps written in

Programmatically, as noted before,

Although this option will not set u

hundred kilobytes—if you know fro

Finally, avoid using XHR for large

Starting a download transfer happen

There is also a variation of create

operations—it is possible to crea

); "form-data", "------------------

Basically, you would change the pol

Authentication, Credentials, and th

FIGURE 17-1 Creating an app package

desktop applications and distribute

means is that if you want to promot

You should also strongly consider m

• In-app purchases through the Wi

That said, WinRT provides for the f

When your app accesses CurrentAppSi

} }); currentApp.licenseInformation

You won’t hit your breakpoint imm

If you’re using a custom commerce

You might have noticed that a Produ

Id=\"e2a62d42-dbca-43d2-b779-66eb91

The latter two we’ve already cove

• aria-label Directly provides te

Apart from the small bits of code i

control sample, and switch between

Scenario 2 shows similar effects wi

Canvas a better choice? To this poi

one resource. For a few examples of

addition of new string and image re

FIGURE 17-9 Control panel dialogs f

Formatting Culture-Specific Data an

Sorting and Grouping Just as a worl

With images, you can reverse them w

Note CSS files can contain string l

Manifest: Let’s turn now to the m

Other affected files in this app in

Sidebar: String Resources in Settin

the folder name itself doesn’t us

If you like, you can just send your

FIGURE 17-11 The Multilingual App T

Second, the Toolkit will detect if

Localization Wrap-Up Well, we’re

Let me say that again: all of this

Onboarding and Working through Reje

Connecting Your Website If you have

What We’ve Just Learned • An ap

What do you think of this book? We