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

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

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