Transcript Document

The Top 10 Things I Learned
About WinRT/HTML as a
Silverlight Developer
Michael Crump | Telerik
Introduction
Michael Crump
Microsoft MVP, MCPD
XAML Evangelist, Telerik
•
•
•
•
@mbcrump
http://michaelcrump.net
http://blogs.telerik.com/michaelcrump
http://linkedin.com/in/mbcrump
SO YOU’RE A SILVERLIGHT
DEVELOPER…NOW WHAT?
#1: Starting with the Fundamentals
•
•
•
•
•
•
Bullet 1
Bullet 2
Bullet 3
Bullet 4
Bullet 5
Bullet 6
Fundamentals
Silverlight
Windows Store
• Hosted inside a web browser
via plug-in.
• SL Apps can run on
Windows/Mac even Linux.
• You can use C#/VB and XAML
to develop applications.
• XNA – (partial support)
Available in SL5.
• Uses .NET Framework 2.0-4.5
• Can use any version of Visual
Studio to develop for it.
• Built primary for
mouse/keyboard input.
• Runs on top of WinRT inside
Windows 8.
• Windows Store Applications
can only run in Windows 8.
• You can use C#/VB/C++/XAML
or HTML5/JS/CSS3.
• XNA removed. Direct3D
available in C++ apps.
• Uses .NET Framework 4.5.
• Can only develop for it using
VS2012 and Windows 8.
• Built primary for touch input.
(No Chrome)
#2: Application Lifecycle
Terminated
App
App
Launched
Running
App
Silverlight
User
Request
Webpage
HTML
Page
<object>
tag loads
plug-in
Plug-in
downloads
XAP file
and reads
manifest
Create
instance of
Application
Class
Fire
Application
Start up
Event
Completed
page
rendering.
Windows 8
User
Launches
App
Splash
screen
Running
App
suspending
resuming
Code gets to run
Suspended
App
No code
runs
Low Memory
Terminated
App
App not running
#3: XML Namespaces
You only declare the namespace (never the
assembly) and you should use "using" instead of
"clr-namespace"
#3: XML Namespaces
Silverlight
<UserControl x:Class="DiggSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Digg="clr-namespace:DiggSample">
Windows Store
<UserControl x:Class="DiggSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Digg="using:DiggSample">
#3: XML Namespaces
Silverlight
xmlns:ad="clrnamespace:Microsoft.Advertising.Mobile.UI;assembly=Mi
crosoft.Advertising.Mobile.UI"
Windows Store
xmlns:ad="using:Microsoft.Advertising.WinRT.UI"
#3: Code Namespaces (cont…)
The majority of changes occur in the UI related
classes.
System.Windows -> Windows.UI.Xaml
#3: Code Namespaces cont.
Silverlight
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
Windows Store
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Documents;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Shapes;
SL5 vs WinRT Comparison by NS
#3: Code Namespaces (cont.)
SL5
WinRT
#4: Making WebRequest
• WebClient has been removed from WinRT. Instead, you
can now use HttpClient or WinJS.xhr.
• Service calls are now handled asynchronously.
• Callbacks such as IAsyncResult will need to be re-written.
Asynchronous Explained
JavaScript is a single-threaded language.
Asynchronous APIs in the Windows Library for JavaScript and
Windows Runtime are represented in JavaScript as promises.
A promise is an object. The most frequently used method on a
promise object is then, which takes three parameters: a function
to call when the promise completes successfully, a function to
call when the promise completes with an error, and a function to
provide progress information.
WinJS.xhr is a wrapper for XMLHttpRequest that provides an
easy way to download web content in your Windows Store app
using JavaScript.
WebClient and WinJS.xhr
DEMO
#5: Storage
File I/O
Silverlight
• IsolatedStorage – Can do
anything.
• Read/Write a file to Documents
Folder, etc via
Open/SaveFileDialog or by using
Elevated Trust (SL4)
• Read/Write a file to the local
HDD possible via
Open/SaveFileDialog or Full Trust
(SL5) will not require user
intervention.
Windows Store
• IsolatedStorage – Can do
anything.
• Read/Write a file to Documents
folder, etc if you indicate it in the
application manifest or use File
and Folder Picker API.
• Read/Write a file to the local
HDD possible via FilePicker only!
Files Reading and Writing in WinJS
DEMO
#6: Navigation
Silverlight
<navigation:Frame x:Name="ContentFrame" Style="{StaticResource
ContentFrameStyle}"
Source="/Home" Navigated="ContentFrame_Navigated"
NavigationFailed="ContentFrame_NavigationFailed">
<navigation:Frame.UriMapper>
<uriMapper:UriMapper>
<uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
<uriMapper:UriMapping Uri="/{pageName}"
MappedUri="/Views/{pageName}.xaml"/>
</uriMapper:UriMapper>
</navigation:Frame.UriMapper>
</navigation:Frame>
this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
Windows 8
WinJS.Navigation.navigate(location, initialState).done( /*
Your success and error handlers */);
The location to navigate to. Generally the location is a
string describing a location, such as "home".
A user-defined object that represents the navigation
state that may be accessed through state.
#7: Controls
Silverlight Controls - MIA
Calendar
ChildWindow
DataGrid
DataPager
DescriptionViewer
MultiScaleImage
OpenFileDialog
RichTextBox
SaveFileDialog
TabControl
TabItem
TreeView
Validation
WebBrowser
WinJS controls
Listview
DatePicker
SettingsFlyout
SemanticZoom
Menu
Flipview
Flyout
Rating
Appbar
Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
WinJS Controls
DEMO
#8: Animations
Silverlight Animations
Animation Easing allows you to apply built in animation
functions to your Silverlight controls. The result is a variety of
animation effects that make your controls move in a more
realistic way.
WinJS Animations
Animation Library – FREE! http://bit.ly/IO3oVR
• Theme Transitions – animate loading,
unloading or changing location on the screen.
• Theme Animations – build to run on user
interaction and you must trigger them.
You can create custom animations as well.
WinJS Animations
DEMO
#9: Freebies
Charms
Charms are a way of preparing Windows 8 for an ultimate
integration with natural user interface (NUI) technology,
which allows you to have everything at your fingertips
without going through a whole lot of effort.
Contracts
• Windows Store apps use contracts and extensions to declare
the interactions that they support with other apps and with
Windows.
• Search contracts opens up your application to intregrate with
Windows search.
• Share contract allows your app to share content with other
apps.
• Many others exist and can be found at http://bit.ly/K7hd2B.
#10: Monetizing
Windows Store
Sell your application in the Windows Store.
• Designed for Discovery.
• Reach – Global (231 markets)
• Enterprise
• Flexible business model
(free, paid or trial)
• Microsoft AD SDK out now.
Windows Store
• Registration Fee is $49 USD ($99 for Companies)
• Share up to 80% of the revenue generated from app sales.
Recap
1. Starting with the Fundamentals – A,B,C’s
2. Application Lifecycle
3. XML/Code Namespaces
4. Making WebRequest - Async
5. Storage – Files
6. Navigation – Easier than URI
7. Controls – New ones Added
8. Animations – Baked into WinRT
9. Freebies – Charms (Searching and Sharing)
10. Monetizing – With the Microsoft Store
Resources
•
Main starting point: http://dev.windows.com/
• Silverlight 5 vs.WinRT comparison by namespace - http://bit.ly/I4eWTt
• See my article in Visual Studio Magazine where I ported a SL2 app to a
Windows Store App. http://bit.ly/x2YEI4
•
Telerik RadControls for Windows Store – HTML http://bit.ly/NUV05U
Thank you!
•
•
•
•
@mbcrump
http://michaelcrump.net
http://blogs.telerik.com/michaelcrump
http://linkedin.com/in/mbcrump
Michael Crump | Telerik