win8 development lessons learned jayway
DESCRIPTION
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.TRANSCRIPT
![Page 1: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/1.jpg)
Windows Store apps
lessons learned
@andyhammar - [email protected]
@roberthedgate - [email protected]
![Page 2: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/2.jpg)
Windows StoreView states
Store
What we’ve done
Navigation
Blend
Touch
![Page 3: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/3.jpg)
What we’ve done
![Page 4: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/4.jpg)
![Page 5: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/5.jpg)
![Page 6: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/6.jpg)
![Page 7: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/7.jpg)
![Page 8: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/8.jpg)
![Page 9: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/9.jpg)
![Page 10: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/10.jpg)
Blend
![Page 11: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/11.jpg)
Design time data
Design time view model
AppBar binding
![Page 12: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/12.jpg)
Design time view model
Windows.ApplicationModel.DesignMode.DesignModeEnabled
![Page 13: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/13.jpg)
AppBar binding
![Page 14: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/14.jpg)
View states
![Page 15: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/15.jpg)
Windows 8 View States
![Page 16: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/16.jpg)
Full vs Filled vs Snapped
• Full view
• Filled view
• Snapped view
![Page 17: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/17.jpg)
Full view
Nothing strange about this, the normal state
![Page 18: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/18.jpg)
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
![Page 19: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/19.jpg)
Filled view Store
![Page 20: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/20.jpg)
Snapped view
• You HAVE to support this, requirement
from Microsoft
• It is always 320 pixel wide
![Page 21: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/21.jpg)
Then how do we do a snapped view
![Page 22: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/22.jpg)
Use same view, reposition elements
![Page 23: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/23.jpg)
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.
![Page 24: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/24.jpg)
Use same view with visibility
• Could very easy create duplicate data
• Make sure you use usercontrols, bindings etc
![Page 25: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/25.jpg)
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.
![Page 26: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/26.jpg)
Summary
Use separate snapped view, either by
using visibility or navigate.
![Page 27: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/27.jpg)
Touch
![Page 28: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/28.jpg)
Touch
...just works
![Page 29: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/29.jpg)
Pointer events
PointerPressed, PointerReleased, PointerM
ovedPointerCanceled, PointerCaptureLost, PointerEntered, Poin
terExited, PointerWheelChanged
![Page 30: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/30.jpg)
Pointer events
• e.GetCurrentPoint().PointerId
.Properties.IsMiddleButtonPressed
• e.GetIntermediatePoints
![Page 31: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/31.jpg)
Static gestures
• Derived from Pointer-events
Tapped
DoubleTapped
Holding
RightTapped
• One concurrent event per UI Element
![Page 32: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/32.jpg)
Manipulation gesture events
ManipulationStarted, ManipulationCompleted
ManipulationDelta,ManipulationInertiaStarting, ManipulationStarting
![Page 33: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/33.jpg)
Manipulation gesture events
• Inertia
• Often used to set RenderTransform
• Derived from Pointer-events
• One concurrent event per UI Element
![Page 34: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/34.jpg)
Brainstormer
![Page 35: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/35.jpg)
Screen table - "Surface"/FlatFrog
no up or down
difficult with global UI elements
Use popups or duplicates
![Page 36: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/36.jpg)
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)
![Page 37: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/37.jpg)
Manipulation transforms
CompositeTransform
e.Cumulative.Rotation
No concurrent Repeatbuttons
e.handled = true
![Page 38: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/38.jpg)
Navigation
![Page 39: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/39.jpg)
Windows 8 Navigate
![Page 40: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/40.jpg)
Rootframe
• Add a seperate rootframe over the existing one.
• Background
• Animation
• Audio
![Page 41: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/41.jpg)
Rootframe, xaml
![Page 42: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/42.jpg)
Rootframe, code behind
![Page 43: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/43.jpg)
Navigate static class
We have to handle Navigate, Back, CanGoBack etc
![Page 44: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/44.jpg)
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
![Page 45: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/45.jpg)
Parameter serialization & suspend
GetNavigationState doesn't support serialization of a
parameter type which was passed to Frame.Navigate
![Page 46: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/46.jpg)
Parameter serialization & suspend
There 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
![Page 47: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/47.jpg)
page caching
Page caching works both back and forward
• You can not just turn on caching back which is
what we usually want to have
![Page 48: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/48.jpg)
backstack clearing
How to clear cache?
![Page 49: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/49.jpg)
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
![Page 50: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/50.jpg)
Windows Store
![Page 51: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/51.jpg)
Windows Store
Publish WACK
Privacy policy
Live account
Publisher name
Background audio
Manage Change app name
Remove app
![Page 52: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/52.jpg)
WACK
Is step 1 of certification process always run this.
![Page 53: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/53.jpg)
Privacy policy
Blog post av Dag König: http://bit.ly/RWGouo
Must have in metadata and accessible in app.
![Page 54: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/54.jpg)
Live account
Use separate live-ID for win8 apps.
![Page 55: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/55.jpg)
Publisher name
For company accounts, ”must” match registration papers.
![Page 56: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/56.jpg)
Background audio
Background audio prevents suspend, do not autoplay!
![Page 57: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/57.jpg)
Change app name
App name can be changed.
![Page 58: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/58.jpg)
Remove app
Apps cannot be removed, only updated to no markets.
![Page 59: Win8 development lessons learned jayway](https://reader033.vdocuments.mx/reader033/viewer/2022052622/55946eb71a28abef718b46b6/html5/thumbnails/59.jpg)
Thank you for coming!
the end