BUILD 2012 Notes – Developing a Windows Store App – Sheehan / Mockford

Build 2012, 30 Oct 2012, 11:45AM – 12:45PM

 

John Sheehan, Kieran Mockford

Building sample app in JavaScript/HTML

 

Windows 8 platform & changes made for Windows Store apps

  • Kernel – security, etc.
  • WinRT APIs
  • MVC layers
    • Can now do XAML with C++
    • For super high perf with C++, using DirectX
    • For JavaScript, use HTML for presentation layer
  • This new stack is for Windows Store apps

 

Image

Desktop apps still possible

  • HTML in IE
  • C++ on Win32
  • C#/VB on .NET

 

Upgrade Win 7 box to Win 8

  • Better performance
  • All desktop apps will continue to run

 

Win RT

  • Old dev experience was kind of dated (programming to Win32 API)
  • Needed to rethink how devs built apps
  • New modern API surface, used for building Windows Store apps
  • LOTS of APIs in Win RT
  • Supports all sorts of languages (C++, C#, VB, JavaScript)

 

(5:36)

Developing Windows Store app

  • Code and markup – All starts with your code
  • Make it an app – Your app has unique value and identity
    • Publish to store
    • Needs tile
    • Splash screen
  • User expectations
    • Live tile – show latest info on the tile
    • Search – search within your app
    • Capabilities
      • Apps need to be trustworthy
    • PLM

     

Demo – From code to app

(Kieran)

 

Weather app

  • Service up in Azure – returns blob of JSON with weather info
  • App will be JavaScript / HTML
  • Concept of “promise” in WinJS
    • Being standardized
    • xhr – change results into a promise, asynchronous
  • He gets object back with his data, can drill down into the data in debugger
  • Can take data, bind to HTML template
    • data-win-control=”WinJS.Binding.Template” (on <div>)
    • Assigning data to HTML elements, e.g. data-win-bind attribute to assign data to text element
    • template.render
  • Drop in CSS to format the page

 

Displaying additional weather data, in list

  • Will display it in a tile-based UI
  • Adding new elements to the namespace that we bind to
  • Now create template to render the list
  • Open app in Blend
  • App actually running within designer
  • Live DOM shown as you move around in designer
  • Assets panel, get ListView
  • Drag into Live DOM view
  • Set itemDataSource on ListView

 

Video in background

  • <video> element
  • Add video and play

 

Character

  • No tile, no splash screen
  • In Visual Studio, you have logo.png, smalllogo.png, splashscreen.png, etc.
  • Replace these with your own logos and images
  • Two images for tile–logo and wide logo
  • In .appxmanifest, can specify that you have wide logo
  • Can turn off showing name on tile
  • Also set background color for app

 

Need to make tile live

  • Several different ways to do live tiles
  • createTileUpdaterForApplication
  • Call startperiodicUpdate method
  • Periodic service, returns XML document with some basic data
  • Can pass in argument to your service (e.g. for location)
  • E.g. Ping service each hour to update tile
  • Can make tile re-poll by turning tile off and then on again

 

Location

  • Windows has Geo-Location API that lets you ask where user is located
    • If device has GPS, it’s accurate
    • Otherwise, it can use IP address to estimate location
    • Fairly close, e.g. town but not building
  • You need to specific that your app will use geo-location
    • Check Location on Capabilities tab
  • System then asks user if it’s okay for the app to use location
  • Strange error–where they are (Redmond), geo-location says they are in Texas

 

Search contract, so user can use Search charm

  • Declarations tab in manifest, you declare to Windows that you support Search
  • Write code to respond to Search request
  • Search is a “contract”

 

(34:30)

 

App Execution Environment

  • App Container – container where your app runs
    • You do everything by calling WinRT APIs
    • Most calls are direct API calls
    • Some calls, e.g. user location, are sensitive
      • Brokered API calls
      • Runtime Broker – makes sure you have access to what you’re calling
      • Uses your AppXManifest
      • So app needs capability in manifest AND user having granted permission

 

Process State transitions

  • Running
  • Suspended
    • When user is not using app, app is suspended
  • Terminated

 

Image

As developer, you need to

  • Save things at suspension time, so you can remember where you were

 

Demo – Giving your app a memory

 

oncheckpoint event

  • WinJS.Application.sessionSate[“lastQuery”] = lastQuery
  • E.g. store last query done by user
  • Debugger has mechanism for triggering suspend/shutdown
  • Add code when app is reactivated after suspension

 

Be Better Together (work well w/other apps)

  • Pickers
  • Sharing
  • Protocols

 

Demo

 

FileOpenPicker

  • Allows picking from places other than just a file system
  • Add to filters (FileTypeFilter.Add)
  • async on Button Click handler
  • await on call to PickSingleFileAsync within handler method
  • async/await – allows you to write code that behaves asynchronously, but looks synchronous
  • Can have multiple await decorated calls within the same method
  • Can pick data from files on SkyDrive

 

Demo – manipulate image and re-save to SkyDrive

  • Browsing samples
  • New Project – Online – Samples – Language
  • Can search for stuff within samples
  • E.g. WIC Image editor
  • Creates new WicImage object
    • Wic = technology for reading/writing different image formats
  • ImageEditor object, instantiated with WicImage
    • BeginDraw/EndDraw pair
    • DrawText, etc.
  • Their library contains these classes–WicImage, ImageEditor
  • Using Direct2D to do image stuff
  • C++/CLI => Cx
    • Still native code, but Cx controls object lifetime, memory
    • ComPtr<> – smart pointer
    • Need this for classic COM code
  • E.g. Use ComPtr for Wic interface APIs
  • In memory representation of Wic image doesn’t map exactly to Direct2D image
    • ID2D1Bitmap.CreateBitmapFromWicBitmap

 

To share something from your app

  • DataTransferManager.GetForCurrentView().DataRequested += (yourmethodhere)
  • Data packet that you send via data transfer manager
  • App can say–yes, I support sharing, but no data available yet
  • E.g.
    • Request.Data.SetBitmap(RandomAccessStreamReference.CreateFromStream(shareStream))

 

Review

  • Starts with your code
  • Add character
  • Support user expectations
  • Sharing with other apps
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s