Module 15
Developing a Web
Application by Using
Silverlight
Module Overview
• Introduction to Rich Internet Applications
• Overview of Silverlight
• Creating a Silverlight Application
Lesson 1: Introduction to Rich Internet
Applications
• What Is an RIA?
• RIAs vs. Rich Web UIs
• Exploring RIAs and Rich Web UIs
What Is an RIA?
• A Rich Internet Application (RIA) is a web application that looks,
feels, and functions more like a desktop application. RIA’s
typically run in a browser, but offer users a more engaging
experience through a richer User Interface
• Characteristics
Multi-platform and browser Stateful Client
Multimedia support Asynchronous Data Transfer
Enhanced Imaging and Graphics Drag and Drop UI
• Technologies
Microsoft Silverlight
Adobe AdobeFlex
Oracle JavaFx
• Drawbacks
RIAs vs. Rich Web UIs
RIAs Rich Web UIs
Can be as dynamic as a More dynamic than traditional
desktop UI web pages
Typically use a browser plug-in Do not involve a browser
plug-in
Update individual portions of Update individual portions of
the page the page
Advanced multimedia support, Largely utilize AJAX
stateful clients, enhanced
imaging
Code runs in a sandbox No sandbox environment
Vendor-supplied plug-ins target Vary across browsers and
different browsers and operating systems
operating systems
Discussion: Exploring RIAs and Rich Web UIs
Lesson 2: Overview of Silverlight
• What is Silverlight?
• Architecture of Silverlight
• What Is XAML?
• XAML Example
What is Silverlight?
• Silverlight
Free browser plug-in
Powered by .NET
Multiple browser and operating system support
• Features
XAML
WPF Controls
Audio and high-definition video
Vector animation/graphics
Architecture of Silverlight
.NET for Silverlight
• Core Presentation Data WPF WCF
LINQ Controls
Framework XLINQ Data Binding REST POX
RSS/ATOM JSON
XML Layout MS Ajax
Editing SOAP Library
• .NET Framework for
Silverlight DLR
Iron Python
BCL
Generics JavaScript
Iron Ruby Collections Engine
• Supported Tools Jscript Cryptography
Threading
Expression Blend® CLR Execution Engine
Visual Studio®
XAML
UI Core Inputs Media Deep Zoom
Vector Keyboard VC1 Images
Animation Mouse H.264
Text Ink WMA
Images AAC DRM
MP3 Media
Presentation Core
Browser Host
Integrated DOM Application
Installer
Networking Stack Integration Services
What is XAML?
• XML-based language
• Used by WPF, Silverlight, and WF
• Declarative arranging of UI elements
• Runtime objects
<Button Content="Click to Continue" Height="23"
HorizontalAlignment="Left" Margin="41,264,0,0"
Name="btnSubmit" VerticalAlignment="Top" Width="75"
/>
XAML Sample
<Grid x:Name="LayoutRoot" Height="119" Width="317">
<Button Content="Submit" Height="23" HorizontalAlignment="Left"
Margin="12,56,0,0" Name="btnSubmit" VerticalAlignment="Top" Width="75" />
<dataInput:Label Height="23" HorizontalAlignment="Left" Margin="12,12,0,0"
Name="lblName" VerticalAlignment="Top" Width="100" Content="Name" Foreground="White"
/>
<TextBox Height="23" HorizontalAlignment="Left" Margin="110,12,0,0"
Name="txtName" VerticalAlignment="Top" Width="120" />
<Grid.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FF5CA398" Offset="0.529" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
Lesson 3: Creating a Silverlight Application
• Demonstration: Creating the Silverlight Project Structure
• Components of a Silverlight Application UI
• How to Call Web Services in a Silverlight Application
Demonstration:
Creating the Silverlight Project Structure
Silverlight Application
• App.xaml
• Main.xaml
Host Project
• ClientBin
• AppTestPage.aspx
Components of a Silverlight Application UI
• Controls
Common WPF Controls
Toolbox support in Visual Studio
• Design Surface
Rapid prototyping support
WYSIWYG interface
• XAML
Expression Blend and Visual Studio support
• Events
How to Call Web Services in a Silverlight
Application
• Creating a WCF Service for Silverlight
Start with a web application project
• Referencing a WCF service from a Silverlight application
Use Visual Studio to discover the service
Visual Studio generates a proxy class
• Calling a WCF service asynchronously
For each service method, the proxy class contains
• Asynchronous method
• Completed event
Lab: Adding Silverlight to a Web Application
• Exercise 1: Creating a Silverlight Project
• Exercise 2: Creating a Silverlight WCF Service
• Exercise 3: Displaying Data by Using Silverlight Controls
Logon information
Virtual machine 10264A-GEN-DEV
User name Student
Password Pa$$w0rd
Estimated time: 60 minutes
Lab Scenario
Lab Review
Review Questions
• How does a web page specify which version of Silverlight
is necessary to run a Silverlight Application?
• Which namespace did you need to import to use the
IEnumerable type?
Module Review and Takeaways
• Review Questions
• Real-world Issues and Scenarios
• Tools
Course Evaluation
