Win8 development lessons learned jayway

755 views

Published on

Seminar with a bunch of tips and tricks and lessons learned regarding windows 8 modern UI app developement.

Topics include: Blend/design time data, view states, touch, navigation and Windows Store.

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

  • Be the first to like this

No Downloads
Views
Total views
755
On SlideShare
0
From Embeds
0
Number of Embeds
329
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • This is what we’ll talk about.
  • First some context on what we’ve done
  • Unlike WP and earlier XAML versions, the Data tab in Blend is missing  cannot use XML data for view models.
  • What we like to do is:Design view model on pageIn code, set view model in ctorviewModel.Init in OnNavigatedTo
  • Appbar inherits binding from ancestors.If a separate DataContext is needed, it cannot be set on the AppBar itself, will not apply.
  • There are thesethree states.
  • Shows the windows store
  • Can check which side by checking Window.Current.Bounds.Left == 0Mightwant to movebuttonsetc to bettersuitefilled
  • Store does not handlesnappedverywell. This is onlyallowedifyourappdoes not haveanything to really show in snapped mode.Can be both on left or right sideCan check which side by checking Window.Current.Bounds.Left == 0Ifyouwant to knowifsnappedchangessideonecanuse a timer whileapp is snapped. Havn´tseenanybetteridea.
  • In blend it is easy to changebetweenstates
  • It willquickly be verymuch data in xaml
  • Easy to havebackground, animation, audio etc in common for all views.
  • In xamlcreate a frame
  • Havecreated a staticclasswhichhandles all navigation.
  • Wehave to handleNavigate, Back,CanGoBacketc
  • If you try to use a different typethiserrorwilloccur:
  • Twotypeof cachemodeRequired and EnabledRequired is the strongerone and reaminsevenif cache size is exceeded.
  • Great tool, checks all kinds of things.Leave machine alone while it runs!Probably runs as step 1 of the certification process  you have to pass. (we’ll get back to that...)
  • Talked about a lot, majority of rejects was this error.Must provide – both in app and in metadata (=on the web)Privacy policy: http://bit.ly/RWGouoPublish an app: http://bit.ly/R28Rtj
  • Everything done via live account.Often you publish as a customer – tell them to create a separate live account and forward the email.Really tedious to have to ask for confirmation codes and have them (not) tell you when an email has arrived.Clicking ’remember me’ saves you a lot of hassle.
  • Company: must be identical to papers.Abbreviations cause delays.E.g. MTG Radio ABWe have always gone for age 12+, to be on the safe side.E.g. radio streams could contain anything...
  • Not agent like windows phone, but an element in the app that prevents suspend = the app continues to run.But... The WACK does not understand this. We had to disable autoplay for MTG Apps
  • Can be done.Reserve new nameChange name everywhere in appPublish updateOld name can now be removed
  • Appscannot be removed!What you can do is to publish an update that is not available in any countries!Will cause the app to disappear from the Store, but get an update on the machines that it has been installed on.You can never force-delete an app on all machines that it’s installed on.
  • Win8 development lessons learned jayway

    1. 1. Windows Store apps lessons learned @andyhammar - andreas.hammar@jayway.com @roberthedgate - robert.hedgate@jayway.com andreas.ekberg@jayway.com
    2. 2. Windows StoreWhat we’ve done Blend View statesTouch Navigation Store
    3. 3. What we’ve done
    4. 4. Blend
    5. 5. Design time data Design time view model AppBar binding
    6. 6. Design time view modelWindows.ApplicationModel.DesignMode.DesignModeEnabled
    7. 7. AppBar binding
    8. 8. View states
    9. 9. Windows 8 View States
    10. 10. Full vs Filled vs Snapped• Full view• Filled view• Snapped view
    11. 11. Full viewNothing strange about this, the normal state
    12. 12. Filled view• Usually nothing strange about this• You have minimum of 1024 pixel of place, might be more• Can perhaps show a little less than in full view• Be aware that user might not reach controls with their thumbs
    13. 13. Filled view Store
    14. 14. Snapped view• You HAVE to support this, requirement from Microsoft• It is always 320 pixel wide
    15. 15. Then how do we do a snapped view
    16. 16. Use same view, reposition elements
    17. 17. Use same view, reposition elements • Difficult to maintain in blend • Easy to accidently alter something in the other when doing a change in one. We have dependencies between states.
    18. 18. Use same view with visibility• Could very easy create duplicate data • Make sure you use usercontrols, bindings etc
    19. 19. Navigate to a different page• Catch OnSizeChanged • ApplicationView.Value will tell you your state. • Do your navigation etc here. • Advantage if you want your app to always show the same snapped content. Tip: Put this in a base class.
    20. 20. Summary Use separate snapped view, either by using visibility or navigate.
    21. 21. Touch
    22. 22. Touch...just works
    23. 23. Pointer eventsPointerPressed, PointerReleased, PointerM ovedPointerCanceled, PointerCaptureLost, PointerEntered, Poin terExited, PointerWheelChanged
    24. 24. Pointer events• e.GetCurrentPoint() .PointerId .Properties.IsMiddleButtonPressed• e.GetIntermediatePoints
    25. 25. Static gestures• Derived from Pointer-events Tapped DoubleTapped Holding RightTapped• One concurrent event per UI Element
    26. 26. Manipulation gesture events ManipulationStarted, ManipulationCompleted ManipulationDelta,ManipulationInertiaStarting, ManipulationStarting
    27. 27. Manipulation gesture events• Inertia• Often used to set RenderTransform• Derived from Pointer-events• One concurrent event per UI Element
    28. 28. Brainstormer
    29. 29. Screen table - "Surface"/FlatFrog no up or down difficult with global UI elements Use popups or duplicates
    30. 30. Concurrent popup One concurrent event per UI Element, e.g. Canvas double-click better than tap-n-hold ugly trick: Put a grid with many elements inside the canvas (Routed events)
    31. 31. Manipulation transforms CompositeTransform e.Cumulative.Rotation No concurrent Repeatbuttons e.handled = true
    32. 32. Navigation
    33. 33. Windows 8 Navigate
    34. 34. Rootframe• Add a seperate rootframe over the existing one. • Background • Animation • Audio
    35. 35. Rootframe, xaml
    36. 36. Rootframe, code behind
    37. 37. Navigate static classWe have to handle Navigate, Back, CanGoBack etc
    38. 38. Parameter serialization & suspend• Now there is a possibility to use object to navigate by. Great? • It was only possible to use strings before. • Now these types can be serialized by Frame.GetNavigationState: • numbers • characters • strings • guids • boolean
    39. 39. Parameter serialization & suspendGetNavigationState doesnt support serialization of a parameter type which was passed to Frame.Navigate
    40. 40. Parameter serialization & suspendThere are a few ways around this example: • Use strings (or other approved types) • In your complexd object serialize and deserialize manually using strings. • Save object globally and reference object by strings when navigate
    41. 41. page cachingPage caching works both back and forward • You can not just turn on caching back which is what we usually want to have
    42. 42. backstack clearingHow to clear cache?
    43. 43. Summary It is nice to use a own rootframe to be able to have the same background image/animation/sound etc in all views It is more convenient to use approved parameters until all serializable object are allowed If you turn on page caching make sure you clear the cache on the correct level
    44. 44. Windows Store
    45. 45. Windows Store Publish  WACK  Privacy policy  Live account  Publisher name  Background audio Manage  Change app name  Remove app
    46. 46. WACKIs step 1 of certification process  always run this.
    47. 47. Privacy policyBlog post av Dag König: http://bit.ly/RWGouoMust have in metadata and accessible in app.
    48. 48. Live accountUse separate live-ID for win8 apps.
    49. 49. Publisher nameFor company accounts, ”must” match registration papers.
    50. 50. Background audioBackground audio prevents suspend, do not autoplay!
    51. 51. Change app nameApp name can be changed.
    52. 52. Remove appApps cannot be removed, only updated to no markets.
    53. 53. the endThank you for coming!

    ×