silverlight developer introduction
TRANSCRIPT
![Page 1: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/1.jpg)
SILVERLIGHTDeveloper Introduction
Presented by : Tomy Ismail
![Page 2: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/2.jpg)
Agenda• Overview • 3W – What, Why, When• Getting Started• XAML• Data Driven Programming• Pattern & Practices
![Page 3: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/3.jpg)
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.
![Page 4: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/4.jpg)
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
![Page 5: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/5.jpg)
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)
![Page 6: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/6.jpg)
Silverlight Architecture
Silverlight .NET Framework
XAML Presentation
ASPX Compatibility
Browser Host
![Page 7: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/7.jpg)
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.
![Page 8: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/8.jpg)
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.
![Page 9: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/9.jpg)
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)
![Page 10: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/10.jpg)
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.
![Page 11: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/11.jpg)
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.
![Page 12: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/12.jpg)
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)
![Page 13: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/13.jpg)
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.
![Page 14: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/14.jpg)
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)
![Page 15: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/15.jpg)
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.
![Page 16: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/16.jpg)
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
![Page 17: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/17.jpg)
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.
![Page 18: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/18.jpg)
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>
![Page 19: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/19.jpg)
Data Driven Programming
• Data Binding• Data Services• Cross-Domain Policies
![Page 20: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/20.jpg)
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.
![Page 21: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/21.jpg)
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.
![Page 22: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/22.jpg)
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.
![Page 23: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/23.jpg)
Data Binding - Process
![Page 24: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/24.jpg)
Data Binding - Mode
![Page 25: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/25.jpg)
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>
![Page 26: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/26.jpg)
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
![Page 27: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/27.jpg)
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
![Page 28: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/28.jpg)
Cross-Domain Policies
![Page 29: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/29.jpg)
Cross-Domain Policies
![Page 30: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/30.jpg)
Charting
• Microsoft provide chart in the latest Silverlight toolkit
• Or use open source chart control from Visifire• Or proprietary one like Telerik
![Page 31: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/31.jpg)
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)
![Page 32: Silverlight Developer Introduction](https://reader035.vdocument.in/reader035/viewer/2022062406/55b6c592bb61ebd8768b4568/html5/thumbnails/32.jpg)
Thank You