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