Tablet and Slate Development with Silverlight
- 1. Tablet Development with Silverlight
Jeremy Likness
Project Manager, Senior Consultant
jlikness@wintellect.com
Copyright © 2011
consulting training design debugging wintellect.com
- 2. consulting training design debugging wintellect.com
- 3. what we do
consulting training design debugging
who we are
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.
how we do it Training
• On-site instructor-led training
Consulting & Debugging • Virtual instructor-led training
• Architecture, analysis, and design services • Devscovery conferences
• Full lifecycle custom software development
• Content creation Design
• Project management • User Experience Design
• Debugging & performance tuning • Visual & Content Design
• Video & Animation Production
consulting training design debugging wintellect.com
- 4. Agenda
• The Rise of the Tablet
• Case Study
• Why Silverlight?
• From GUI to NUI: A Touchy Subject
• Tips and Tricks
• Going Native
• Windows 8
• Conclusion
consulting training design debugging wintellect.com
- 5. The Rise of the Tablet
Devices purchased by employee and
used at work
Employee
purchased and
used for
business
Not used
Source: IDC (almost 3000 respondants)
consulting training design debugging wintellect.com
- 6. 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
consulting training design debugging wintellect.com
- 7. 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
consulting training design debugging wintellect.com
- 8. 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
consulting training design debugging wintellect.com
- 9. 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
consulting training design debugging wintellect.com
- 10. demo
point of sale slate application
consulting training design debugging wintellect.com
- 11. Why Silverlight?
• 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
consulting training design debugging wintellect.com
- 12. From GUI to NUI
• 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
consulting training design debugging wintellect.com
- 13. demo
untouchable
consulting training design debugging wintellect.com
- 14. Touch Primer
• A touch is a point of contact
(X = 2.7,Y=5.9)
consulting training design debugging wintellect.com
- 15. Touch Primer
• A manipulation is a continuous touch.
The touch may change position and the
manipulation may track inertia.
Origin = (2,3)
Delta = (+2,+3)
Duration = 0:0:0.5
Velocity = (+3,+3)
consulting training design debugging wintellect.com
- 16. Touch Primer
• A gesture is a specific, repeatable
combination of manipulations that may
involve multiple touches.
Tap
Double Tap
Hold
Pinch
consulting training design debugging wintellect.com
- 17. LightTouch for NUI
• 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/
consulting training design debugging wintellect.com
- 18. demo
lighttouch
consulting training design debugging wintellect.com
- 19. 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;
}
consulting training design debugging wintellect.com
- 20. List Box Scroll Behavior
<i:Interaction.Behaviors>
<Touch:ListBoxTouchScrollBehavior/>
</i:Interaction.Behaviors>
consulting training design debugging wintellect.com
- 21. Touch Combo Box
<Touch:TouchableComboBox
ItemsSource="{Binding Collection}"
Width="200"
HorizontalAlignment="Left"
DisplayMemberPath="Title"/>
consulting training design debugging wintellect.com
- 22. 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>
consulting training design debugging wintellect.com
- 23. 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>
consulting training design debugging wintellect.com
- 24. Tips and Tricks
• “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!
consulting training design debugging wintellect.com
- 25. demo
the software input panel
consulting training design debugging wintellect.com
- 26. Going Native (with Silverlight)
• 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
consulting training design debugging wintellect.com
- 29. 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
consulting training design debugging wintellect.com
- 30. 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
consulting training design debugging wintellect.com
- 31. 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.)
consulting training design debugging wintellect.com
- 32. 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
consulting training design debugging wintellect.com
- 33. 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
consulting training design debugging wintellect.com
- 34. 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/
consulting training design debugging wintellect.com
- 35. Questions?
Jeremy Likness
Project Manager, Senior Consultant
jlikness@wintellect.com
consulting training design debugging wintellect.com
Editor's Notes
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- DEMO: Show the TextOverflowDemo project.
- So where is Silverlight today?
- So where is Silverlight today?
- DEMO: Show the TextOverflowDemo project.
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- DEMO: Show the TextOverflowDemo project.
- So where is Silverlight today?
- DEMO: Show the TextOverflowDemo project.
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?
- So where is Silverlight today?