SILVERLIGHTDeveloper Introduction

Presented by : Tomy Ismail

Agenda• Overview • 3W – What, Why, When• Getting Started• XAML• Data Driven Programming• Pattern & Practices

Overview• Rich Internet Applications

(RIAs) are web app that have many of the characteristics of desktop app.

• The end result is an application which provides a more intuitive, responsive, and effective user experience.

A Pattern that Scales and Grows

AppLogic

DatabasesADO.NET,ORMs (LTS, EF, …)

CLR Lists/ObjectsRepository(nHibernate, …)

ServicesREST/SOAP(Azure, …)

XML, JSON, Binary

.NET ClientsSilverlight, WPF

Standards ClientsJavaScript

Server RenderingHTML, SEO,Printing, …

ServicesWCF

Unit Test Code

1W - What is Silverlight ?

• Next generation of Microsoft .NET-based media experiences and rich interactive applications (RIAs) for the Web, desktop and mobile devices.

• Silverlight is a free plug-in powered by the .NET framework that is compatible across multiple browsers, devices and operating systems to bring a new level of interactivity wherever the Web works.

• It is a subset of .NET Framework and also Windows Presentation Foundation (a graphical subsystem for rendering user interfaces in Windows-based applications)

Silverlight Architecture

Silverlight .NET Framework

XAML Presentation

ASPX Compatibility

Browser Host

2W - Why Silverlight ?

• Create rich Internet applications that go way beyond HTML, with support for 2D vector graphics, chart, streaming video, animation, HD video, interactivity and more.

• Write code once and enjoy compatibility across many platforms, browsers, and devices.

• Easily enhance existing Web and SharePoint sites by incrementally adding Silverlight components.

2W – Why Silverlight cont.

• Develop applications rapidly using the technology and skills you have today, reducing the need to replace tools, servers or people.

• Support data driven development for creating fully functional line-of-business application.

• Silverlight applications are delivered to a browser in a text-based markup language called XAML. That's no big deal for Web users once they land on a site. But search engines, like Google, can scan XAML.

2W – Why Silverlight cont.

• Silverlight can be almost like desktop – Out of Browser Feature.

• New Pivot feature makes it easier to interact with massive amounts of data on the Web in new and dramatic ways (SL 4).

• 3rd party library is available widely to add new UI controls and features. (Telerik, DevExpress, etc)

3W – When should we use ?

• We want our apps to targeting a wide range of browsers, operating systems and devices with only write code once and optimize across many screens.

• Create fully functional line-of-business apps but with new UI experiences of dynamic, smooth graphics and animation effect, slick controls interactivity without having to worry our code got bloated with AJAX or big JavaScript libraries.

3W – When .. Cont.

• We want to leverage our application by utilizing the features such as multi-touch and gestures support, broadcast streaming, video and audio sharing, webcam display, etc .. With just using the existing tools and skill sets (VB/C#) while keep the deployment process as easy as copy and paste the file.

Getting Started

• Visual Studio 2008 / 2010 or Express Edition• Silverlight (3/4) runtime• Silverlight (3/4) Tools for Visual Studio 2008 /

2010• Silverlight (3/4) SDK• Microsoft Expression Blend (optional)

XAML

• Extensible Application Markup Language (XAML) is a declarative language.

• Language structure that shows hierarchical relationships between multiple objects.

• Supports interchange of sources between different tools (Visual Studio and Blend) / Blendability.

• Support code behind to respond to events and manipulate the objects you declare in XAML.

XAML – Layout System

• Layout is the process of sizing and positioning objects in your Silverlight application.

• To position visual objects, you must put them in a Panel control or other container object.

• Silverlight provides various controls, such as Canvas, Stack Panel and Grid, as containers and enable you to position and arrange the controls.

• Supports both an absolute layout (Canvas) and a dynamic layout (Stack Panel and Grid)

XAML – Basic Controls

• Support general controls like textbox, button, checkbox, combobox, datagrid, label, listbox, radio button, etc.

• The way we use it is almost the same like in ASP.NET or Windows Form only later we will found out a bit different in way of data binding.

XAML - Styling

• Silverlight offers many ways to customize the appearance of your applications.

• Styles enable you to set control properties and reuse those settings for a consistent appearance across multiple controls.

• Styles can also be inherited using BasedOn property.

• Almost like Style and CSS in ASP.NET

XAML – Visual Tree

• In XAML, you have elements (such as <Button> and <Grid>) that can have other elements (nodes) underneath them (children).

• This parent/child relationship specifies things like how objects are positioned on the screen and how they respond to user-initiated events.

• Besides determining how content is presented, the visual tree also can have an effect on how events are processed. Many typical events (called routed events) "bubble" events up the tree.

XAML – Visual Tree cont.<Grid x:Name="LayoutRoot" Background="Red"> <StackPanel Margin="20" Background="Yellow" > <TextBlock Name="firstTextBlock" Width="Auto" >First TextBlock</TextBlock> <TextBlock Name="secondTextBlock" Width="Auto" >Second TextBlock</TextBlock> <TextBlock Name="thirdTextBlock" Width="Auto" >Third TextBlock</TextBlock> </StackPanel> </Grid>

Data Driven Programming

• Data Binding• Data Services• Cross-Domain Policies

Data Driven – Data Binding

• Present and manage data in a Silverlight client application.

• Data binding handles the process of pushing data from a data source into the target, and in some cases pulling the data from the target back to the source.

• We can do it in code behind or directly into the XAML control itself.

Data Driven – Data Binding

• Most Silverlight-based applications display data in controls. In many cases, the data is a business object or a collection of business objects, such as stock quotes, headlines, or images. In addition, you often want to enable the user to select an item from a list and then display details about that item in another control, such as a text box.

Data Binding - Process

• The source object that contains the data that flows between the source and target. The source can be any CLR object.

• The target UI property that displays and possibly allows user changes to the data. The target can be any DependencyProperty of a FrameworkElement.

• The direction of the data flow. The direction is specified by setting the Mode property on the Binding object.

Data Binding - Process

Data Binding - Mode

Data Binding - DataContext

• The DataContext refers to a source of data that can be bound to a target

• It is a concept that allows objects to inherit binding-specifying information from their parents in the object tree

<StackPanel x:Name="RecordingDetails“DataContext="{Binding Source={StaticResource employeeViewModel}}"> <TextBlock FontWeight="Bold" Text="{Binding Artist}" Margin="5,0,0,0"/> <TextBlock FontStyle="Italic" Text="{Binding Name}" Margin="5,0,0,0"/> <TextBlock Text="{Binding ReleaseDate}" Margin="5,0,0,0" /></StackPanel>

Data Binding – Bind To Controls

• Binding a Control to a Single Item• Binding a Control to a Collection of Objects• Displaying Items in a Control by using a Data

Template• Adding a Details View

Cross-Domain Policies• Silverlight enforces a level of

protection so that it cannot be used to invoke web services that are on a different domain or domain-and-port combination than the server that hosts the Silverlight application

• The target site can specify which domains can access its services if it implements the Silverlight policy file (clientaccesspolicy.xml) or the Flash policy file (crossdomain.xml) at the website's root

Cross-Domain Policies

Cross-Domain Policies

Charting

• Microsoft provide chart in the latest Silverlight toolkit

• Or use open source chart control from Visifire• Or proprietary one like Telerik

Pattern & Practices• PRISM - Composite Application Guidance for WPF

and Silverlight site (http://compositewpf.codeplex.com/)

• MEF (Manage Extensibility Framework)• Model-View-ViewModel Framework (

http://msdn.microsoft.com/en-us/magazine/dd458800.aspx)

Thank You