tablet and slate development with silverlight

35
wintellect.com consulting training design debugging Tablet Development with Silverlight Jeremy Likness Project Manager, Senior Consultant [email protected] Copyright © 2011

Upload: jeremy-likness

Post on 28-Jan-2015

103 views

Category:

Technology


0 download

DESCRIPTION

Learn the key to creating engaging customer experiences

TRANSCRIPT

Page 1: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Tablet Development with Silverlight

Jeremy LiknessProject Manager, Senior [email protected] Copyright © 2011

Page 2: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Page 3: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions.

Consulting & Debugging• Architecture, analysis, and design services• Full lifecycle custom software development• Content creation• Project management• Debugging & performance tuning

Training• On-site instructor-led training• Virtual instructor-led training• Devscovery conferences

Design• User Experience Design• Visual & Content Design• Video & Animation Production

what we do

who we are

how we do it

consulting training debuggingdesign

Page 4: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

• The Rise of the Tablet• Case Study• Why Silverlight? • From GUI to NUI: A Touchy Subject• Tips and Tricks• Going Native• Windows 8• Conclusion

Agenda

Page 5: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

The Rise of the Tablet

Devices purchased by employee and used at

work

Employee purchased and used for businessNot used

Source: IDC (almost 3000 respondants)

Page 6: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Consumerization of IT

• “Although consumer technologies create new risks for the enterprise, eliminating their use is increasingly difficult, and impractical” – Rich Mogull, Research VP, Gartner

• The IT organizations in 26% of enterprises (firms with 1000 employees or more) were planning to implement or had implemented general purpose touchscreen tablets such as the Apple iPad. – Forrsights Hardware Survey Q3 2010, Forrester Research

Page 7: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

The Influence of NUI

• Natural User Interfaces are easier to learn• iPhone, iPad, Windows Phone 7 are examples

of a touch-first interface• Microsoft Kinect, also a NUI, sold 10 million

units in 30 weeks• Users are forcing the enterprise to take NUI

seriously• Tablet is a “here and now” technology for

deploying NUI• Windows 7 supports NUI, Windows 8 will

embrace it

Page 8: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Silverlight is not Dead!

• Version 5 to be released late 2011• The primary development platform for the Windows

Phone• 1 million Silverlight developers (Silverlight team

blog)• 70% penetration (RIAStats.com)• Silverlight Firestarter: DayForce

– “1/4th cost to build Silverlight compared to Java”– “1/30th total cost due to reduced load on

servers”• Major enterprise adoption, including Fortune 500

companies

Page 9: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Case in Point: Rooms to Go

• Sales people tired of losing their customer by having to walk over to a kiosk to get information

• Needed something portable, easy to use, with a friendly touch interface

• Didn’t want “that other device” because of security concerns and inability to integrate with their existing Windows-based software

• Windows tablet would fit in nicely with existing security infrastructure

• Silverlight development allowed them to keep in house expertise for the project

Page 10: Tablet and Slate Development with Silverlight

wintellect.com

demo

consulting training design debugging

point of sale slate application

Page 11: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

• Connects easily to existing web services• Insanely easy to deploy/install OOB• Leverages existing development team and keeps

the technology in house– Familiar languages like C#, VB.NET– Familiar Visual Studio environment

• Great for platforms with enterprise features– Integration with existing

authentication/authorization (Active Directory)– Security policy enforcement

Why Silverlight?

Page 12: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

• Silverlight is not touch-friendly “out of the box”

• Mouse gestures are promoted but “It’s just not the same”

• No multi-touch capability (tracking a “mouse” rather than touch points)

• No touch and hold• Applications built without touch in mind will

suffer

From GUI to NUI

Page 13: Tablet and Slate Development with Silverlight

wintellect.com

demo

consulting training design debugging

untouchable

Page 14: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

• A touch is a point of contact

Touch Primer

(X = 2.7,Y=5.9)

Page 15: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

• A manipulation is a continuous touch. The touch may change position and the manipulation may track inertia.

Touch Primer

Origin = (2,3)Delta = (+2,+3)Duration = 0:0:0.5Velocity = (+3,+3)

Page 16: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

• A gesture is a specific, repeatable combination of manipulations that may involve multiple touches.

Touch Primer

TapDouble TapHoldPinch

Page 17: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

• Provides the missing touch support • Does not require elevated trust • Parity with the Windows Phone 7 APIs• Powered Rooms to Go• Open source • http://lighttouch.codeplex.com/

LightTouch for NUI

Page 18: Tablet and Slate Development with Silverlight

wintellect.com

demo

consulting training design debugging

lighttouch

Page 19: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Manipulate 2D Behavior

<Touch:Manipulate2DBehavior IsInertial="True" ManipulationStarted="TouchShapeBehavior_ManipulationStarted" ManipulationDelta="TouchShapeBehavior_ManipulationDelta“ ManipulationCompleted= "TouchShapeBehavior_ManipulationCompleted"/>

private void TouchShapeBehavior_ManipulationDelta(Object sender, Manipulation2DDeltaEventArgs e){ var senderShape = (Shape)sender; var translateTransform = (TranslateTransform)senderShape.RenderTransform; translateTransform.X += e.Delta.TranslationX; translateTransform.Y += e.Delta.TranslationY;}

Page 20: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

List Box Scroll Behavior

<i:Interaction.Behaviors> <Touch:ListBoxTouchScrollBehavior/></i:Interaction.Behaviors>

Page 21: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Touch Combo Box

<Touch:TouchableComboBox ItemsSource="{Binding Collection}" Width="200" HorizontalAlignment="Left" DisplayMemberPath="Title"/>

Page 22: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Element Resizing Behavior

<Image x:Name="ResizeImage" Source="/Wintellect.Touch.Sample;component/Assets/avatar.png"> <i:Interaction.Behaviors> <Touch:ElementResizingBehavior x:Name="ResizeBehavior"/> </i:Interaction.Behaviors></Image>

Page 23: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Gesture Listener

<Touch:GestureService.GestureListener> <Touch:GestureListener Tap="GestureListener_Tap" DragStarted="GestureListener_DragStarted" DragDelta="GestureListener_DragDelta" DragCompleted="GestureListener_DragCompleted" DoubleTap="GestureListener_DoubleTap" Hold="GestureListener_Hold"/></Touch:GestureService.GestureListener>

Page 24: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

• “Fat Fingers” is no longer just cliché• The fewer touches, the better

– Filters instead of searches– Pop-ups instead of combo boxes

• A child’s curiosity, or great UX? – Draw the user’s attention – Make it intuitive

• Don’t forget about the SIP!

Tips and Tricks

Page 25: Tablet and Slate Development with Silverlight

wintellect.com

demo

consulting training design debugging

the software input panel

Page 26: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

• Elevated trust and nothing to share with Windows Phone 7

• Native Extensions for Silverlight (NESL)

• http://archive.msdn.microsoft.com/nesl

• COM Wrapper for Windows 7 Touch• Requires additional steps in your

installation package

Going Native (with Silverlight)

Page 27: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

NESL Touch

Page 28: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Windows 8

Page 29: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Windows 8: What we KNOW

• First-class touch experience• Designed to target multiple platforms and

processors – instead of a runtime like Silverlight, Windows 8 will meet the hardware on its own turf

• HTML5 + JavaScript environment will be available• Fallback to existing shell• Will support existing applications (yes, that means

Silverlight too) • There are still millions of Windows XP machines

and XP will end of life – it is likely Windows 7 will be the stepping stone, not Windows 8

Page 30: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Windows 8: What we SUSPECT• Jupiter is a Xaml runtime• Xaml technology will remain• Something similar to Silverlight will exist, but likely

will be closer to the OS and native to Windows 8 rather than part of a lightweight, portable runtime

• We should be able to use our favorite languages like C# to develop, but there will be a lot more focus on native (C++) experiences as well

• We’ll know a heck of a lot more coming out of BUILD than we will going into it

Page 31: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Your Reality Check (HTML5)

• HTML5 won’t be finalized for years• Technology outpaces standards bodies• Touch is still “new” to HTML5

– Supported only by smart phones and special desktop builds

– Specification still in flux

• Other technologies will continue to fill gaps– Native code (WPF, Surface SDK, Objective-C,

etc.)

Page 32: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

ROI: Today’s Skills Tomorrow

• HTML5 and multi-touch– Manipulations are similar (touch start, touch move, and

touch end)– Touches (fingers), targets (touches on the interesting

element), changes (finger removed)• JavaScript – you still need to know the APIs

– Even on Windows 8 will likely rely on hooks – “Not your mama’s JavaScript” – today’s JavaScript plus

JQuery includes classes, inheritance, even the “namespace” concept

– Good coding practices are good coding practices• Xaml is likely to remain• Why do we love Silverlight? • Xaml + C# (VB/F#/etc.) + Visual Studio + Portability• BUILD, BUILD, BUILD

Page 33: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Example: SVG and XAML

HTML5 Silverlight

SVG Xaml Graphics

SVG Styles Resource Dictionaries

Canvas Canvas/WriteableBitmap

Audio/Video Audio/Video

CSS3 Grid Layout (DataGrid, Panel…)

CSS3 WOFF Typography

CSS3 Transforms Transforms

DOM Visual Tree/Event Model

Timer DispatcherTimer

Web Storage Isolated Storage

Page 34: Tablet and Slate Development with Silverlight

wintellect.comconsulting training design debugging

Remember!

• Jounce for your MVVM framework– http://jounce.codeplex.com/

• LightTouch for your NUI– http://lighttouch.codeplex.com/

• Follow @JeremyLikness for Silverlight updates:– http://csharperimage.jeremylikness.com/

Page 35: Tablet and Slate Development with Silverlight

wintellect.com

Questions?

consulting training design debugging

Jeremy LiknessProject Manager, Senior [email protected]