Windows 8
App Building Bootcamp
Kraig Brockschmidt, kraigb@microsoft.com
Senior Program Manager, Windows Ecosystem Team
Author, Programming Windows 8 Apps with
HTML, CSS, and JavaScript
It’s free: http://aka.ms/BrockschmidtBook or Amazon
Agenda
•
•
•
•
•
Platform overview: the life story of an app
App building quickstart—a complete end to end app
Core app anatomy
Building a UI: controls, layout, input, & animations
Feature topics
–
–
–
–
App settings and state management
Contracts: share, search, and others
Alive with activity: live tiles, notifications, background tasks
Accessibility, Localization, and the Windows Store
• Tour of the Windows 8 Developer Center
Non-Agenda
•
•
•
•
•
Design and design principles—see http://design.windows.com.
Windows Phone
Windows Azure
Marketing
In 3.5 hours we just get started, so:
– Windows Developer Center has docs and samples:
http://dev.windows.com
– Windows 8 Camp-In-a-Box as more presentations, end to end sample:
http://bit.ly/KlpHBp
The Life Story of a
Windows Store App
The App Lifetime
• Conception and gestation: your development process
– Ends with an app package ready to upload
• Birth: submitting to the Windows Store and certification
– The Store is how consumers get your app
• Primary Life: running on user’s devices
– This is where you encounter the characteristics of the platform
– It also reveals much of what you need to know in development
• Rebirth: cycling through again with updates
Windows 8 Platform Languages/APIs
* Includes the WinJS helper library with controls, promises, animations many other utilities; an official but optional API
What’s in an App Package
App Manifest contains all
information needed to deploy
the app
Files and Assets
(.js, .html, .css,
images, resources,
DLLs, etc.)
Blockmap the TOC of 64K blocks
Provides evidence of tampering and defines what changes
between versions
Store-assigned signature validates
package integrity
(Some other stuff)
App Manifest and Capabilities
• Explicitly declares the app integration endpoints
– File capabilities (music/pictures/videos/documents libraries,
removable storage)
– Devices (webcam, microphone, location, sms, proximity);
extensible to new device classes – user consent involved
– Network and identity (internet, private network, credentials)
– File type associations
– App contracts (search, share, etc.)
• Defines app branding and logos
• Contained in appxmanifest.xml; Visual Studio provides editor
This is your Store—and your competition’s!
Pricing (free, paid, trial; inapp purchases) are managed
through Store dashboard.
Onboarded appx
package
Capabilities in the manifest
determine what shows under
app permissions
All other details provides via Store dashboard
App Acquisition
App Installation
Download and install app package
unzip
.exe
or
.dll
resources
appxmanifest.xml
etc.
App folder (hidden)
html
js
css
images
appxmanifest.xml
etc.
Download and install dependencies
(identified in the manifest)
unzip
Create appdata structures
user\appdata\local\packages\<app>
LocalState
TempState
RoamingState
Settings (+ settings.dat)
Create registry
entries based on
manifest (including
Start page tile, etc.)
System folders
Registry
Running an App (HTML/JavaScript)
App folder
html
js
css
images
appxmanifest.xml
etc.
Display
(on the file system)
App Host Process*
JavaScript
Engine
HTML/CSS
Rendering
Engine
App Container
(in memory)
* With modifications/extensions to the DOM API, see
“HTML, CSS, and JavaScript features and differences” at
http://bit.ly/xrofoB and http://bit.ly/SDZmpi
This is important when using third-party libraries.
Local and Web Contexts (HTML/JS only)
Local context
Web context
ms-appx-web:///
ms-appx:///
http://
Trusted content
from local package
postMessage
• WinRT (+ DOM API changes)
• innerHTML validation
• Remote script not permitted
Untrusted content
• Same as browser <iframes>
• No WinRT
W3C API
Process Isolation
Direct Access
Brokered Access
Communication
via Cloud
App [Host] Process
Brokered Access
Direct Access
Contracts
App Container
…
View States: manage with media queries
or:
Building for pixel density: 100%, 140%,
180%
Building for screen size
Process Lifecycle Management
App gets 5s to handle
suspend
User
Launches
App
App is not notified before
termination
suspending
Running
App
resuming
Suspended
App
Low Resources
Terminated
App
Apps are notified when they
have been resumed
Splash screen
Code gets to run
App frozen
App not running
Limited background tasks can run
Automatic State Roaming
Device #1
Device #2
App [Host] Process
App [Host] Process
App Container
App Container
Apps use roaming data as if it were just local appdata
AppData
Roaming folder and
settings
Roaming data (up to
100K) automatically
synced between
devices with same app
and same user
account
AppData
Roaming folder and
settings
Use SkyDrive or other cloud
services to roam larger data
Windows Runtime APIs
Language projections
switchball
Store and Monetization
App Building Quickstart
The App We’ll Build
Features:
• Layouts in all view states
• Camera capture
• Using an iframe for web
content (Bing maps)
• Geolocation
• Share source
• Using async APIs
App Anatomy
Consumer
Originator
“Can you give me…?”
Creation
①
③
Makes a
promise
“Yes, I promise…”
②
“OK, tell me when you
have the goods”
Goes on with Life
⑦
“Here’s where we are…”
“Never mind…”
⑤
④
Fulfillment
Acquires
the goods
Can’t acquire
the goods
“Here you are!”
⑧
“I’m sorry!”
Consumes
⑥
the goods
⑨
Utter
disappointment
//Consumer code
var promise = doAsyncOperation();
①
//Originator code
function doAsyncOperation() {
return new SomePromise(/* ... */);
}
②
③
promise.then(
function (results) {
console.log(JSON.stringify(results));
}
⑥
);
⑤
var SomePromise = function () {
this._value = {};
this.then = function (completedHandler) {
completedHandler(this._value);
}
④
}
Events in JS:
App Host Process
loading app’s start page
•
•
•
•
•
Tile or other
launch method
System Splash Screen
visible for .75s minimum,
with 15s timeout*
* Use “extended splash screen” for a custom experience
JavaScript
Engine
HTML/CSS
Rendering
Engine
DOMContentLoaded
activated: use either
Windows.UI.WebUI.WebUIApplication
WinJS.Application
body.onload
When activated returns,
splash screen removed and app shows;
deferrals accommodate async work
App folder
html
js
css
images
appxmanifest.xml
etc.
WinJS.Application.onready fires
http://kraigbrockschmidt.com/blog/?p=362
UI: Controls, Layout, Input,
& Animations
Button
Hyperlink
ListBox
Checkbox
Ratings (WinJS)
Slider (WinJS)
Combo Box
Progress Bar
Progress Ring
Date Picker (WinJS)
Radio Button
Time Picker (WinJS)
Toggle Switch (WinJS)
Button
Hyperlink
ListBox
Checkbox
Ratings
Slider
Combo Box
Progress Bar
Progress Ring
Date Picker
Radio Button
Time Picker
Toggle Switch
dataSource + itemRenderer + layout
Data
<div data-win-control="WinJS.Binding.Template" id="myTemplate" >
<div style="width: 110px; margin: 10px">
<img data-win-bind="src: picture" style="height: 60px; width: 60px" />
<input type="button" data-win-bind="value: buttonText" />
</div>
</div>
<div height="400"
data-win-control="WinJS.UI.ListView" id="listview1"
data-win-options="{dataSource: myData,
itemRenderer: myTemplate,
layout: {type: WinJS.UI.ListLayout}}">
</div>
App Bar
Context Menu
Flyout
Tooltip
Message Dialog
Settings Pane
Shake
Rotate
Flip
Settings & State
Running
Suspended
Not running
System restart
In memory
(app changes variables)
Includes databases (SQLite, IndexedDB, ESE/Jet) and other facilities built on appdata (HTML
AppCache, local storage, third-party libraries)
Windows.Storage.AccessCache (modified by WinRT API)
Windows.Storage.PasswordVault (modified by WinRT API), sync’d to cloud
Other devices
Contracts
“Alive with Activity”
Logo
Badge
Name
Updates appear
immediately
In Windows.UI.Notifications namespace:
TileNotification
>> TileUpdater, SecondaryTileUpdater
BadgeNotification >> BadgeUpdater
ToastNotification
>> ToastNotifier
System process
In Windows.UI.Notifications namespace:
ScheduledTileNotification >> TileUpdater, SecondaryTileUpdater
ScheduledToastNotification >> ToastNotifier
URI
System process
30m to 24h frequency per service
HTTP Request
In Windows.UI.Notifications namespace:
TileUpdater.StartPeriodicUpdate and StartPeriodicUpdateBatch
BadgeUpdater.StartPeriodicUpdate
Send channel to web service
Send
update
Push updates
to client (tile, badge,
toast, raw)
Running app: PushNotificationChannel.PushNotificationReceived event
(in Windows.Networking.PushNotifications namespace)
Background task: PushNotificationTrigger
WNS
Notification type
Tile
Cycling
✔
Scheduled
✔
Raw
Recurring
Audio
✔
✔
✔
Periodic
✔
✔
✔
Badge
Toast
Expiring
✔
✔
Push
✔
✔
✔
✔
Server
Process
Client App
via Windows
Periodic
Notification
Service
Database
Web
App
Other Services
Mobile
Service
Mobile
Devices
Other
Services
Other
Clients
Apps for Everyone:
Accessibility, Localization,
& the Windows Store
// get current product
var currentProduct = Windows.ApplicationModel.Store.CurrentProduct;
// get the license information
var licenseInformation = currentProduct.licenseInformation;
// check to see if the user has an active non-trial license
if (licenseInformation.isTrial) {
// user has trial version of the application
// prompt them to purchase before so we can enable full functionality
currentProduct.requestProductPurchaseAsync().then(
function () {
// Purchase succeeded
});
}
// can’t do in-app purchase in trial mode, must convert first
if (!appLicensingInformation.isTrial) {
//load the listings with all the products
currentApp.loadListingInformationAsync().then(
function (listing) {
//lookup a specific product
var product1 = listing.productListings.lookup("product1");
if (!product1.isActive) {
// purchase
currentApp.requestProductPurchaseAsync("product1").then(
enableProduct1 );
}
});
void appInit() {
// some app initialization functions
// Initialize the license info for use in the app that is
// uploaded to the Store.
// uncomment for release
licenseInformation = CurrentApp.LicenseInformation;
// Initialize the license info for testing.
// comment the next line for release
// licenseInformation = CurrentAppSimulator.LicenseInformation;
// other app initialization functions
}
http://msdn.microsoft.com/en-US/library/windows/apps/hh694083