Tablet and Slate Development with Silverlight
-
Upload
jeremy-likness -
Category
Technology
-
view
102 -
download
0
description
Transcript of Tablet and Slate Development with Silverlight
wintellect.comconsulting training design debugging
Tablet Development with Silverlight
Jeremy LiknessProject Manager, Senior [email protected] Copyright © 2011
wintellect.comconsulting training design debugging
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
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
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)
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
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
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
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
wintellect.com
demo
consulting training design debugging
point of sale slate application
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?
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
wintellect.com
demo
consulting training design debugging
untouchable
wintellect.comconsulting training design debugging
• A touch is a point of contact
Touch Primer
(X = 2.7,Y=5.9)
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)
wintellect.comconsulting training design debugging
• A gesture is a specific, repeatable combination of manipulations that may involve multiple touches.
Touch Primer
TapDouble TapHoldPinch
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
wintellect.com
demo
consulting training design debugging
lighttouch
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;}
wintellect.comconsulting training design debugging
List Box Scroll Behavior
<i:Interaction.Behaviors> <Touch:ListBoxTouchScrollBehavior/></i:Interaction.Behaviors>
wintellect.comconsulting training design debugging
Touch Combo Box
<Touch:TouchableComboBox ItemsSource="{Binding Collection}" Width="200" HorizontalAlignment="Left" DisplayMemberPath="Title"/>
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>
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>
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
wintellect.com
demo
consulting training design debugging
the software input panel
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)
wintellect.comconsulting training design debugging
NESL Touch
wintellect.comconsulting training design debugging
Windows 8
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
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
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.)
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
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
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/
wintellect.com
Questions?
consulting training design debugging
Jeremy LiknessProject Manager, Senior [email protected]