Your SlideShare is downloading. ×
0

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

W8/WP8 App Dev for SAP, Part 3B: Developing for Windows Phone 8 and Windows 8

484

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
484
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Welcome to Cross Development for Windows 8 and Windows Phone 8. In the next hour we’re going to go over the best practices, tips and tricks for developing applications that will delight users across devices powered by both Windows 8 and Windows Phone 8.
  • Right off the bat, we can see we have a similar structure. App.xaml handles our resource management, App.xaml.cs handles launching and suspension methods, the MainPage.xaml page contains the UI and has been set to the initial screen on startup.The big difference between these two projects is that the Windows Phone 8 version has been prepared to make localization a little easier.But the bulk of the functionality that we want to look at is in the MainPage.xaml.cs
  • So lets look at implementing common APIs between Windows 8 and Windows Phone 8
  • But no! Because we’re going to add the files as links into our Windows Phone 8 project. We just right click in our project, add an existing item and make sure that we “Add as Link” instead of a simple “Add”. This way when we change the file, all the changes will be implemented in both application and we won’t be stuck going back and forth copying code between our apps.
  • And we can see our linked classes in our Windows Phone 8 application. Perfect. Nice, healthy shared code between both projects.
  • So what kind of common code can we expect to have across our projects? The commonalities include the .NET Base Class Library, as well as Hardware and Storage APIs. This is where we see the common Windows Runtime Kernel running across Windows 8 and Windows Phone paying off. But we’ll need to pause when we’re using launchers, choosers and sharing APIs that push us out to functionality that reaches beyond our application. These have been implemented differently in Windows 8 and in Windows Phone 8 because they are going to have different launcher and chooser applications and native capabilities. And the way we share and launch external functionality has been carefully designed to create the best user experience on each platform.
  • No, of course not. If we have a situation where there are small difference in code compatibilities, we can use compiler conditional statements to separate the incompatible lines. In the case of Windows 8 development we would say #if NETFX_CORE and for Windows Phone we have the slightly more obvious #if WINDOWS_PHONE. We should consider using this implementation when there are small differences, this isn’t a catch-all approach. If we over use it, we can make our code unreadable, unmaintainable and just plain ugly. But it is perfect for situations where you require a specific namespace for your app (for example the Windows.UI.Xaml namespace which exists in Windows 8 but not in Windows Phone) or if there are small method differences.
  • No, of course not. If we have a situation where there are small difference in code compatibilities, we can use compiler conditional statements to separate the incompatible lines. In the case of Windows 8 development we would say #if NETFX_CORE and for Windows Phone we have the slightly more obvious #if WINDOWS_PHONE. We should consider using this implementation when there are small differences, this isn’t a catch-all approach. If we over use it, we can make our code unreadable, unmaintainable and just plain ugly. But it is perfect for situations where you require a specific namespace for your app (for example the Windows.UI.Xaml namespace which exists in Windows 8 but not in Windows Phone) or if there are small method differences.
  • So we can handle this threading dispatcher issue using compiler conditionals and now we have fully functioning accelerometer code that works on both platforms.
  • We have to add a name for our app and, well, this is on a phone and I hate having to do all that typing so I think we should add a simple web service that can go out and get some suggestions for us while we type.
  • In Windows 8, we can hit that web service using the very elegant async-await model. GetResponseAsync and all our async goodness is handled for us. We don’t need a callback, we don’t need to fire any events or construct any listeners, we can just await the response.
  • But in Windows Phone 8, we don’t have that option. This isn’t really a problem that can be solved using compiler conditionals because that would require a very impressive kind of code gymnastics. We need the Windows Phone version of the HttpWebResponse and HttpWebRequest to work in an async manner.
  • So lets look at implementing common APIs between Windows 8 and Windows Phone 8
  • For this we can use Extension methods to encapsulate the functionality of the HttpWebRequest in such a way as to make it async. Using the TaskCompletionSource, we can wrap the HttpWebRequest in such a way that it returns a task. We give it the same name… GetResponseAsync()… that it has in Windows 8.
  • And now our Web Service works exactly the same using exactly the same async-await model across both platforms. This compatibility trickles down through our application so that now, because our HttpWebRequest is awaitable, so is our service and we can use it the same way in our ViewModel when we want to get new data.
  • Using a PCL for your code is always a good starting point. You can always try with PCLs first unless you find out that it is absolutely impossible to go with the PCL for platform reasons.
  • And now our Web Service works exactly the same using exactly the same async-await model across both platforms. This compatibility trickles down through our application so that now, because our HttpWebRequest is awaitable, so is our service and we can use it the same way in our ViewModel when we want to get new data.
  • MVVMAbstraction pattern
  • Model – Not UI relatedView Model – Encapsulates hat to display and flow of interactionView – Defines dow to display information from the View ModelHow does this relate to portable libraries? View – needs to be different per platform. View Model and Model can be the same between platforms.So this pattern is ideally suited for creating cross-platform apps, because it encourages a clean separation between the parts of your code that should be shared and those that are platform specific
  • We can do better! Developers should expect that they can write a library that uses APIs that are available on multiple platforms and use that library unchanged on those platforms.
  • Portable: BCL, XML, LINQ, XLINQ, WCF, Networking, ViewModel types, DataContract/XML/Json serialization, Data annotationsNot Portable: UI, File system or other persisted storage access, interaction with OS (notifications, picture choosers, win8 contracts, app lifecycle, etc)
  • What besides the UI wasn’t portable? File system, interaction with the OS.The View Models and Models will need that functionality. So…
  • We need to keep in mind we’re looking at two very different form factors. Windows Phone runs at 3 resolutions, on phone screens from 3.5 inches to 4.8 inches. Windows 8 runs on screen resolutions to 1024x768 to 2,560 x 1,440 although this is by no means a limit. Windows 8 powers 10 inch tablets and 82 in screens that take up the entire wall.
  • The same goes for orientation. Windows Phone supports portrait and landscape mode, but Windows 8 supports Portrait, landscape and the third-screen snapped mode. Each of these modes requires consideration in design, spacing, an interaction.
  • To aid in these considerations, Windows 8 and Windows Phone 8 have unique controls that have been designed with their particular form factors in mind. Some of the specialized controls for Windows 8 include GridView: (groupable) tile array. Also possible to dynamically size items in the grid. The GridView comes with built in styles for input and selectionSemanticZoom: Allows for quick jump through large lists of grid itemsFlipView: Browsing view optimised for touch to pane left-right through sequential items.
  • To aid in these considerations, Windows 8 and Windows Phone 8 have unique controls that have been designed with their particular form factors in mind. Some of the specialized controls for Windows 8 include GridView: (groupable) tile array. Also possible to dynamically size items in the grid. The GridView comes with built in styles for input and selectionSemanticZoom: Allows for quick jump through large lists of grid itemsFlipView: Browsing view optimised for touch to pane left-right through sequential items.
  • To aid in these considerations, Windows 8 and Windows Phone 8 have unique controls that have been designed with their particular form factors in mind. Some of the specialized controls for Windows 8 include GridView: (groupable) tile array. Also possible to dynamically size items in the grid. The GridView comes with built in styles for input and selectionSemanticZoom: Allows for quick jump through large lists of grid itemsFlipView: Browsing view optimised for touch to pane left-right through sequential items.
  • On the Windows Phone side of things, we have controls customized to a phone experience. The Panorama control is designed to give users a sort of “landing” space where they can get a feel for the content of the application explore that content in an open interactive environment.
  • If the Panorama is the open, casual inviting control for introducing the user to the content, think of the pivot as the no-nonsense control for delivering content. With the Panorama, the user can see what is just around the corner, so to speak, but with the Pivot control, the focus is on the content in front of me right this moment. We still have quick easy access to additional content, but the focus is a little different.
  • New to Windows Phone 8 is the LongListSelector control. This is the recommended control for list-based UI’s, replacing the ListBox. It is optimized for scrolling speed, but also implements a “group selection” interface so that the user can move quickly between grouped items in a very long list. Here we can see that group selection applied to an alphabetical list, but you could define a set of groups and then use the group selection to navigate between them.
  • So what does this mean practically? It means that when we’re thinking about how we’re going to design our two applications, we should consider making use of the customized UI features of either Windows 8 or Windows Phone 8. For example, the semantic zoom control lets us see groups of items at a high level and then drill into them until we select one. That behaviour is similar in many ways to what the pivot control does. We should consider using the Pivot for the Phone and the SemanticZoom for Windows 8.
  • And when we select an item? Windows 8 has a very powerful paradigm of horizontal scrolling, but it’s a paradigm that doesn’t make sense in the context of a phone. So instead of mimicking the horizontal scrolling UI we see in Windows 8, we should translate that into a vertical scrolling UI that fits the phone more appropriately.
  • And if we have a long list of grouped items in Windows Phone 8, we might want to consider implementing them as a GridView in Windows 8. We just need to keep in mind that this is less about mimicking
  • So you can see our ball moves around just fine on both platforms using the same code. But remember how we can save the game and recall it later on another device? Let’s try doing that. We have to add a name for our app and, well, this is on a phone and I hate having to do all that typing so I think we should add a simple web service that can go out and get some suggestions for us while we type.
  • In summary…
  • Transcript

    • 1. Daniel Kreuzhofer UX Consultant Microsoft Consulting Services Germany Cross Development Windows 8 and Windows Phone 8
    • 2. • Linked files • #if conditionals • Using Extension methods to bridge implementation differences • MVVM • Portable Class Libraries • A common user experience bringing high-quality experiences to the user. Best Practices for Windows 8 / Windows Phone 8 7/26/2013MS UX Team Germany2
    • 3. Windows 8 7/26/2013MS UX Team Germany3 Common Structure Windows Phone 8
    • 4. Common APIs in Windows 8 and Windows Phone 8
    • 5. Your apps Your way Windows Phone 8 Developer Platform XAML Apps Direct3D Apps XAML Maps Geolocation Sensors In-App Purchase Direct3D HTML XML Threading Touch Speech XAudio2 Phone Features Push Camera Video Proximity Media Foundation Calendar Wallet Contacts Core Types VoIP STL Multitasking Live Tiles Memory Async Enterprise CRT C# and VB C#, VB, and C++ C++ File system, Networking, Graphics, Media Core Operating System
    • 6. 7/26/2013MS UX Team Germany6 “Add as Link”
    • 7. 7/26/2013MS UX Team Germany7 “Add as Link” Windows 8 Windows Phone 8
    • 8. 7/26/2013MS UX Team Germany8 Common APIs Common Base Class Library Hardware Storage (Files and Folders) Different Launchers and Choosers Sharing APIs
    • 9. 7/26/2013MS UX Team Germany9 #if Conditional Blocks Windows 8 #if NETFX_CORE Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { #endif #if WINDOWS_PHONE Deployment.Current.Dispatcher.BeginInvoke(() => { #endif Windows Phone 8
    • 10. 7/26/2013MS UX Team Germany10 #if Conditional Blocks Windows 8 #if NETFX_CORE new MessageDialog(Content, Title).ShowAsync(); #endif #if WINDOWS_PHONE MessageBox.Show(Content, Title, MessageBoxButton.OK); #endif Windows Phone 8
    • 11. 7/26/2013MS UX Team Germany11 Threading Windows 8 AND Windows Phone 8 #if NETFX_CORE Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { #else Deployment.Current.Dispatcher.BeginInvoke(() => { #endif double _accelX = args.Reading.AccelerationX; double _accelY = args.Reading.AccelerationY;
    • 12. 7/26/2013Microsoft confidential12 Web Service
    • 13. 7/26/2013MS UX Team Germany13 HttpWebResponse and HttpWebRequest Windows 8 var request = (HttpWebRequest)WebRequest.Create(autoCompleteUri); HttpWebResponse response = (HttpWebResponse)await request.GetResponseAsync(); // retrieve data using StreamReader
    • 14. 7/26/2013MS UX Team Germany14 HttpWebResponse and HttpWebRequest Windows Phone 8 var request = (HttpWebRequest)WebRequest.Create(autoCompleteUri); request.BeginGetResponse(new AsyncCallback(AutoCompleteCallback), request); } private void AutoCompleteCallback(IAsyncResult callback) { HttpWebRequest request = (HttpWebRequest)callback.AsyncState; HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(callback); // retrieve data using StreamReader }
    • 15. Convergence through Extension
    • 16. 7/26/2013MS UX Team Germany16 Extension Methods Windows Phone 8 HttpWebRequest Extension public static Task<HttpWebResponse> GetResponseAsync(this HttpWebRequest request) { var taskComplete = new TaskCompletionSource<HttpWebResponse>(); request.BeginGetResponse(asyncResponse => { HttpWebRequest responseRequest = (HttpWebRequest)asyncResponse.AsyncState; HttpWebResponse someResponse = (HttpWebResponse)responseRequest.EndGetResponse(asyncResponse); taskComplete.TrySetResult(someResponse); }, request); return taskComplete.Task; }
    • 17. 7/26/2013MS UX Team Germany17 HttpWebResponse and HttpWebRequest Windows 8 AND Windows Phone 8 var request = (HttpWebRequest)WebRequest.Create(autoCompleteUri); HttpWebResponse response = (HttpWebResponse)await request.GetResponseAsync(); // retrieve data using StreamReader
    • 18. Use PCLs whenever possible
    • 19. 7/26/2013MS UX Team Germany19 HttpClient now available on Windows Phone 8 Available on Nuget as an extension package
    • 20. Convergence through Architecture
    • 21. Model-View-ViewModel (MVVM)
    • 22. Portable Class Libraries
    • 23. 4 5 7 7.5 8 4 4.0.3 4.5 Core BCL ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ Core XML ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ LINQ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ IQueryable ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ "dynamic" keyword ✔ ✔ ✔ ✔ ✔ Core WCF ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ Core networking ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ View models ✔ ✔ ✔ ✔ ✔ ✔ ✔ Data annotations ✔ ✔ ✔ ✔ ✔ ✔ XLINQ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ MEF ✔ ✔ ✔ ✔ ✔ ✔ Data contract serialization ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ XML serialization ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ Json serialization ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ System.Numerics ✔ ✔ ✔ ✔ ✔ ✔ Xbox 360Feature Silverlight Windows Phone Metro style apps .NET Framework
    • 24. Cross-platform app architecture
    • 25. 7/26/2013MS UX Team Germany26 Different Form Factors Require Different UX Windows Phone 8 Windows 8 Screen Size 800x480 1280x720 1280x768 Screen Size 1024x768 2,560x1,440 everything in between
    • 26. 7/26/2013MS UX Team Germany27 Different Form Factors Require Different UX Windows Phone 8 Windows 8 Orientation Portrait Landscape Orientation Portrait Landscape Snapped
    • 27. MS UX Team Germany28 Different Controls GridView Group-able Array of Tiles Dynamic item size
    • 28. MS UX Team Germany29 Different Controls FlipView Browsing View Touch-optimized for left-right navigation
    • 29. MS UX Team Germany30 Different Controls Semantic Zoom Pinch-zoom through grouped list of items
    • 30. MS UX Team Germany31 Different Form Factors Require Different UX Panorama Introduction and exploratory content
    • 31. MS UX Team Germany32 Different Form Factors Require Different UX Pivot Scanning views Grouped information
    • 32. MS UX Team Germany33 Different Form Factors Require Different UX LongListSelector Headers and Footers Group header navigation
    • 33. MS UX Team Germany34 Translating UX Semantic Zoom  Pivot
    • 34. MS UX Team Germany35 Translating UX – Details View Horizontal scroll  Vertical scroll
    • 35. MS UX Team Germany36 Different Form Factors Require Different UX GridView  LongListSelector
    • 36. Summary
    • 37. • Abstracting Models, ViewModels • Binding data to the View • Linked files • Models, Services could be encapsulated in Portable Class Libraries • Shared APIs (hardware, storage, base class libraries) • Using #if conditionals for small code differences • Using Extension methods to bridge implementation differences • Async-await model for HttpWebResponse/Request • Focus on the user experience that works for the form factor Windows 8 / Windows Phone 8 Apps Are a Perfect Match 7/26/2013MS UX Team Germany38
    • 38. The information herein is for informational purposes only an represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

    ×