Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Windows Universal Apps for Phones and ...

Building Windows Universal Apps for Phones and Tablets

We’ll perform a quick lap around Visual Studio 2013 and the new Windows Universal Apps, build our first app using XAML & C#, and debug it with Windows 8.1 and the Windows Phone Emulator. We'll look at the same tooling for HTML5 & JavaScript apps. We’ll then explore the converged WinRT API services and features, app bars, Live Tiles, etc. The converged Windows Platform is more efficient and far-reaching than ever. Come learn how to build mobile apps for hundreds of millions of Windows device users.

Ryan Joy

June 18, 2014
Tweet

More Decks by Ryan Joy

Other Decks in Technology

Transcript

  1. Who am I? • Web developer / UX developer •

    Developer Evangelist @ Microsoft • Local meetup organizer. Come talk to me about Refresh Austin, Austin Windows App Developers, Austin Geek Lunch, Austin Web Design & Developer Meetup. • Loves JavaScript • Find me on Twitter at @atxryan or ryanjoy.com
  2. Raise your hand if you’ve built either a Windows Store

    or Windows Phone App? …an iOS or Android app? …a web application?
  3. 8 Delivering 1 Windows for developers The ‘blue wave’ of

    platform updates is a monumental expansion of capabilities and reach for Windows devs Windows brings apps to life Windows provides apps with more ways to engage users, both on device and across all of their Windows screens Design once to engage everywhere Developers can use universal Windows apps to design an one app that can target every Windows screen Build faster with Visual Studio New shared projects for Universal Windows apps allow developers to share as much or as little between Windows and Windows Phone projects
  4. Universal apps Universal apps enable building applications on the converged

    Windows 8.1 and Windows Phone 8.1 platforms Supported for C#, C++ and JavaScript Create universal apps using project templates, migrating Windows 8.1 / Windows Phone 8.1 apps
  5. Windows Phone 8.1 App Windows 8.1 App XAML View Phone

    UI XAML View Windows UI Shared Code, Images, Files WinRT ‘Universal’ is still two apps, sharing more
  6. API convergence across the Windows platform The Windows Runtime (WinRT)

    is the shared runtime and API space used by store apps across the Windows platform (phone and client) 11 Common WinRT APIs Phone-specific WinRT APIs Windows-specific WinRT APIs Dramatic convergence in 8.1 • Goal is 100% convergence for dev scenarios • In 8.0, we had ~30% API convergence • With 8.1, we move well past 90%+ convergence
  7. Apps come to life on Windows • Converged background task

    model • Background agent improvements • New trigger-based execution options • Common data format for Toast notifications • One Microsoft push notification service • Common Live Tile template mechanism • Configuration data can roam with the user
  8. Universal Windows apps (linked apps) Apps for Phone, Tablet and

    PC* Free * On Windows Phone and Windows 8.x devices only
  9. More details about shared entitlements • Any two apps can

    be linked (e.g. WP7 <-> Windows 8) • Once linked, they cannot be separated • Both app price and durable IAP are shared (as long as they use same name, same type, same duration, same dev account) • Icon shows in WP 8.1 and in Windows 8 (May update) • Situations where icon will not show: app is exclusive, app not published in the country, app has hardware requirements not available in other device… • Adding roaming application data requires WP8.1, up to 100K stored in roaming folder. Not for real time sync, it is synced by the OS depending on many factors (battery available, Wi-Fi, apps being used..) • Apps built using the new Visual Studio template can be linked or not be linked, depends on the developers, this is independent • App and IAP pricing strongly recommended be the same in both stores, else will drive weird user behavior
  10. Prerequisites Visual Studio 2013 Visual Studio 2013 Update 2 Have

    MSDN? Go to MSDN subscriber downloads or get the express edition of VS 2013 w/ Update 2 @ http://go.microsoft.com/fwlink/p/?Li nkId=389848
  11. Shared projects • Allow sharing source between converged apps •

    Don’t have any binary output • Supports all item types • Code files .cs, .js, .cpp, .h • XAML • Images .png, .jpg… • RESW • XML etc…
  12. Switching startup projects • Quick and easy way to change

    startup projects using debug target dropdown • Supported for all Store platforms • Enabled if you have more than one application project in the solution
  13. Converged controls What does that really mean? 80% exact same

    20% custom Common Signature Optimized DatePicker TimePicker CommandBar AppBar Button CheckBox RadioButton ProgressBar Slider ToggleSwitch Hub Pivot ListView GridView
  14. ‘Primitives’ - same • Layout: Panel, StackPanel, Grid, Border •

    Buttons, Slider, ToggleSwitch, CheckBox, RadioButton, ProgressBar • TextBox/TextBlock • Shapes/Path
  15. ‘Primitives’ – same API, tailored behavior • Hub • AppBar/CommandBar

    • Date/Time Pickers and List Pickers • ListView • Multi-select; containers, swipe selection • Flyouts • Media • Ads SDK*
  16. Device-specific APIs • Windows • SearchBox • SettingsFlyout • Windows

    Phone • Pivot • AutoSuggestBox • ContentDialog • Maps • System Chrome • Progress area, in-call UI
  17. Provides a common layout coordinate system that extends along the

    x and y axis into infinity, allowing you to scale up • Physical screen size determines how much of this canvas is available • Works for all screen sizes across the entire Windows platform Easier to design once & engage across multiple resolutions 10” tablet 7” tablet 6” 5” 4.5” Infinite virtual canvas 166 logical DPI
  18. common, same rendering Button Slider ToggleSwitch ProgressBar etc (many more)

    common, different content Hub ListView GridView etc. common, different rendering DatePicker TimePicker CommandBar AppBar etc. unique SearchBox Pivot ContentDialog AutoSuggestBox etc. Controls on Windows+Phone 8.1
  19. Windows Phone 8.1 App Windows 8.1 App XAML View XAML

    UI XAML View XAML UI Logic Logic Data Data ? Logic Data
  20. Portable Class Libraries I compile just once and know it

    works on all platforms Shared Projects I can easily include platform-specific code under #if or partial classes New! Improved!
  21. C#: WINDOWS_APP and WINDOWS_PHONE_APP #if WINDOWS_PHONE_APP Windows.Phone.UI.Input.HardwareButtons.BackPressed += this.HardwareButtons_BackPressed; #endif

    C++: WINAPI_FAMILY_PC_APP and WINAPI_FAMILY_PHONE_APP #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP _backPressedEventToken = HardwareButtons::BackPressed += ref new EventHandler<BackPressedEventArgs^>(this, &NavigationHelper::HardwareButton_BackPressed); #endif Conditional constants
  22. handy tip (1/3) The Universal project structure is a way

    for you to make sense of your shared and non-shared content. The contents of your Shared project simply get merged in with your platform-specific projects as part of deployment. (If there are name collisions, the platform-specific file always wins!)
  23. handy tip (2/3) Use Blend and have default.html from both

    the Windows Store and Windows Phone projects open. Switch between periodically to make sure everything works as expected.
  24. handy tip (3/3) You are building single page applications where

    default.html is platform specific but all of the content pages (aka fragments) can be loaded in a platform neutral way.
  25. JavaScript: WinJS.Utilities.isPhone() if (WinJS.Utilities.isPhone) { // you are on a

    phone } else { // you are on a Windows PC } JavaScript: Feature Detection if (somePhoneUtil && somePhoneUtil.callPhoneMethod) { // safely call somePhoneUtil.callPhoneMethod(); } Conditionals