An introduction for Developer about Silverlight

1. Silverlight Developer Introduction Presented by : Tomy Ismail

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

3. 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.

4. A Pattern that Scales and Grows Databases ADO.NET, ORMs (LTS, EF, …) .NET Clients Silverlight, WPF Standards Clients JavaScript App Logic CLR Lists/Objects Repository (nHibernate, …) Server Rendering HTML, SEO, Printing, … XML, JSON, Binary Services REST/SOAP (Azure, …) Services WCF Unit Test Code

5. 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)

6. Silverlight Architecture ASPX Compatibility Silverlight .NET Framework XAML Presentation Browser Host

7. 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.

8. 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.

9. 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)

10. 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.

11. 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.

12. 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)

13. 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.

14. 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)

15. 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.

16. XAML - Styling Silverlight offers many ways to customize the appearance of your applications. Stylesenable 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

17. 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.

18. 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>

19. Data Driven Programming Data Binding Data Services Cross-Domain Policies

20. 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.

21. 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.

22. 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.

23. Data Binding - Process

24. Data Binding - Mode

25. 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={StaticResourceemployeeViewModel}}"> <TextBlockFontWeight="Bold" Text="{Binding Artist}" Margin="5,0,0,0"/> <TextBlockFontStyle="Italic" Text="{Binding Name}" Margin="5,0,0,0"/> <TextBlock Text="{Binding ReleaseDate}" Margin="5,0,0,0" /> </StackPanel>

26. 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

28. Cross-Domain Policies

29. Charting Microsoft provide chart in the latest Silverlight toolkit Or use open source chart control from Visifire Or proprietary one like Telerik

30. Pattern & Practices PRISM - Composite Application Guidance for WPF and Silverlight site (http://compositewpf.codeplex.com/) MEF (Manage Extensibility Framework) Model-View-ViewModelFramework (http://msdn.microsoft.com/en-us/magazine/dd458800.aspx)

31. Thank You