Silverlight Silverlight for Businessfor BusinessApplicationsApplications

Billy HollisBilly HollisAuthor / consultant Pre-requisites for this presentation:

1) Minimal understanding of WPF and XAML

Level: Intermediate

Tightly coupled = end-to-end controlTightly coupled = end-to-end control

In traditional n-tier systems, oneorganizational entity controls all tiers

If someone wants to use your data, they alsomust use your user interface…

…even if it sucks

Moving from single UI to multiple UIMoving from single UI to multiple UI

Service Oriented Architecture decouples themain logic of an application from the userinterface

Alternative user interfaces become muchmore feasible

Some are already doing multiple UISome are already doing multiple UI

Promoted by a .NET technology base Forms-based smart client, ASP.NET based web

client, mobile client, all on one system Same server-based infrastructure for all user

interface types Smart client done first, ASP.NET front end only

added 8% more to project cost

Key lessonsKey lessons

Design UI differently for different technologies– Different UI is pointless if no advantage is taken of

increased capabilities

Build a generic façade over data– Sometimes called a “channel adapter”– Provides support for multiple transport protocols

Channel Adapter / Data FacadeChannel Adapter / Data Facade

Forms-basedinterface

Browse-basedinterface

Mobileinterface

Back-end databases

Middle-tier business and data access logic

Multiple transport bindings

New options in the next generationNew options in the next generation

Forms-basedinterface

Browser-basedinterface

MobileinterfaceWPF-based

interface

Silverlightinterface

Require rich, state-based,true OO architectures

State-based architecturesState-based architectures

Use of hidden elements for navigation Management “shell” for complex UI Separation between UI and code More layers on the client

Client layersClient layers

UI – Detailed screens

Customer Order Product Vendor Etc.

Local store forcaching

RRich Internet Applicationsich Internet Applications

Web deployment– Broad client reach– Secure sandboxed environment

Rich UI experiences beyond server generatedHTML– Highly capable UI model

Signifigant client-side application logic– Highly productive development environment

Demonstration – Silverlight Airlines, Tafiti

.NET + Silverlight.NET + Silverlight

Cross-platform & cross-browser plugin– Works with Safari, Firefox and IE on Mac & Windows– Will work with FireFox, Konquerer and Opera on Linux

– Fast, easy install process

Highly productive development Framework– Multi-language support – VB, C#, JavaScript, Python, Ruby

– Rich class library of functionality that can be used

Develop with Visual Studio & Expression Blend

Silverlight Security SandboxSilverlight Security Sandbox

Silverlight applications run in a security sandbox– Similar but not identical to Internet Zone in CAS

Activation model just like HTML pages – just clicka URL

– No user elevation or security prompts within the browser

– Applications prevented from doing malicious things

Silverlight enables some additional browserscenarios:– Safe isolated storage– Client based file upload controls

– Cross domain support (future)

.NET for Silverlight & the Desktop.NET for Silverlight & the Desktop

.NET for Silverlight is a subset of the full .NETFramework– Targetted support for RIA and Media scenarios

Common core .NET development model– Common APIs across both browser and desktop scenarios– Common WPF UI programming model across both– Development and Designer tools are the same

Highly compatible– Minimal changes needed to move from Silverlight to Desktop

What You'll NeedWhat You'll Need to Get Started to Get Started::

Install the following:– Silverlight V1.1 Alpha– Visual Studio 2008 Beta 2– Silverlight Tools Alpha for

Visual Studio 2008 Beta 2

– Expression Blend 2 Preview

Everything you need is at www.silverlight.net– Links to downloads & docs– VS object browser a great way to view APIs

What makes up a .NET Silverlight appWhat makes up a .NET Silverlight app

A .NET silverlight app always incluides:– A html file that hosts a Silverlight control (for example:

Test.htm)– JavaScript load files - CreateSilverlight.js & Silverlight.js– A root XAML file & assembly - YourApp.xaml &

YourApp.dll

A .NET Silverlight app is also likely to include:– Other application libraries (yours, Microsoft's or 3rd

parties)– Application resources (ex. xaml) – optionally embedded

in assembly

Loading a Silverlight ApplicationLoading a Silverlight Application……

Test.htmTest.htm

createSilverlight() method called to load the control

<html><html><head><head> <script type= <script type=““text/javascripttext/javascript”” src= src=““Silverlight.jsSilverlight.js””></script>></script> <script type= <script type=““text/javascripttext/javascript”” src= src=““CreateSilverlight.jsCreateSilverlight.js””></script>></script></head></head><body><body> <div id="SilverlightControlHost"> <div id="SilverlightControlHost"> <script type="text/javascript"> <script type="text/javascript"> createSilverlight();createSilverlight(); </script> </script> </div> </div></body></body></html></html>

CreateSilverlight.jsCreateSilverlight.js

Source: XAML file referencing app entry point

Silverlight.js takes care of control install if Silverlight isnot already installed on the machine

function createSilverlight()function createSilverlight(){{

Sys.Silverlight.createObjectEx({Sys.Silverlight.createObjectEx({source: "Page.xaml",source: "Page.xaml",parentElement:parentElement:

document.getElementById("SilverlightControlHost"),document.getElementById("SilverlightControlHost"),id: "SilverlightControl",id: "SilverlightControl",properties: { width: "100%", height: "100%", version: "0.95",properties: { width: "100%", height: "100%", version: "0.95",

}, });}, });}}

Page.xamlPage.xaml

Every app has a root XAML file References code assembly & class entry point

<Canvas xmlns="http://schemas.microsoft.com/client/2007"<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class=x:Class=““MyPage;assembly=ClientBin/MyApp.dllMyPage;assembly=ClientBin/MyApp.dll““ Loaded="Page_Loaded" Loaded="Page_Loaded" Width="640" Width="640" Height="480" Height="480" Background="White Background="White““>>

<TextBlock x:Name= <TextBlock x:Name=““MyMessageMyMessage”” /> />

</Canvas</Canvas>

MyPage.xaml.csMyPage.xaml.cs

Code behind file for the parent XAML

public partial class MyPage: Canvaspublic partial class MyPage: Canvas{{ public void Page_Loaded(object o, EventArgs e) public void Page_Loaded(object o, EventArgs e) { { InitializeComponent(); InitializeComponent();

MyMessage.Text = MyMessage.Text = ““Hello World!Hello World!””;; } }}}

Running ApplicationRunning Application…… The easy way to get this up is BlendThe easy way to get this up is Blend

Blend will set up all these files for you Allows drag/drop building of the user

interface too Demonstration

A tour through SilverlightA tour through Silverlight’’s raws rawcapabilitiescapabilities

Samples created by Scott Guthrie All include full source code Download from ScottGu’s blog

Business Scenarios for SilverlightBusiness Scenarios for Silverlight

Software-as-a-Service (SaaS or S+S) Data Visualization eCommerce Commercial services (e.g. supply chain)

Basically anywhere you don’t have a captiveaudience is a potential Silverlight application.

Deciding when/if to jumpDeciding when/if to jump

Do you have captive users? How large is your user base? How rich is the data your users work with? Are you starting a new system that needs a

long shelf life?

Don’t be too ambitious on your first effort.

The challengeThe challenge

Silverlight / WFP UI is hard to learn Need to get designers involved for best effect Investment is higher than alternatives (except

Flash) Current technology state is immature

ApproachesApproaches

Enhance ASP.NET– Can take over just part of a page

– Add to existing pages, or add a few pages to anexisting app

Full Silverlight– Have Silverlight take over the entire browser surface

– Not ready to start developing this yet

An interim development strategyAn interim development strategy

Develop using WPF XBAP pages Respect the eventual limitations of Silverlight

– Minimal controls– Minimal panels

– Security– No 3D– No WPF documents

Move to Silverlight when it’s in late beta orrelease– Transition smoothness depends on how close you are

to the limitations

Time framesTime frames

Silverlight 1.0 in release– Targeted at media-based apps

– Mlb.com, etc.

Silverlight 1.1 in alpha– When released, 1.0 will auto-update– Does not contain the full feature set

Silverlight 1.1 beta – someday– No announced date for either beta or release– I expect some significant beta release around MIX 08,

which is March 5-7, 2008 (this is just speculation onmy part)

Questions?Questions?

Billy HollisQuestions07 --at-- dotnetmasters.comwww.dotnetmasters.com

Billy offers full WPF classes, from two days totwo weeks in length. Contact him for details.

Silverlight classes coming summer 2008