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. RIAs typically run in a browser, but offer users a more engaging experience through a richer User Interface
Multi-platform and browser Stateful Client

Characteristics

Multimedia support
Enhanced Imaging and Graphics

Asynchronous Data Transfer

Drag and Drop UI

Technologies

Microsoft Silverlight Adobe AdobeFlex

Oracle JavaFx

Drawbacks

RIAs vs. Rich Web UIs

RIAs Can be as dynamic as a desktop UI Typically use a browser plug-in Update individual portions of the page Advanced multimedia support, stateful clients, enhanced imaging Code runs in a sandbox Vendor-supplied plug-ins target different browsers and operating systems Rich Web UIs More dynamic than traditional web pages Do not involve a browser plug-in Update individual portions of the page Largely utilize AJAX

No sandbox environment Vary across browsers and 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

Framework Silverlight

Data LINQ XLINQ XML

.NET Framework for Supported Tools

DLR Iron Python Iron Ruby Jscript

WPF Controls Data Binding Layout Editing BCL Generics Collections Cryptography Threading CLR Execution Engine

WCF REST POX RSS/ATOM JSON SOAP

MS Ajax Library

JavaScript Engine

Expression Blend Visual Studio

UI Core Vector Animation Text Images

XAML
Inputs Keyboard Mouse Ink Media VC1 H.264 WMA AAC MP3 Deep Zoom Images

DRM Media

Presentation Core Browser Host

Integrated Networking Stack DOM Integration Application Services

Installer

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 User name Password

10264A-GEN-DEV Student 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?

IEnumerable type?

Which namespace did you need to import to use the

Module Review and Takeaways

Review Questions Real-world Issues and Scenarios

Tools

Course Evaluation