Web programmeringSilverlight NOEA / PQC 2007 Silverlight From: Gill Cleeren blog.n-technologies.be

Web programmering Silverlight NOEA / PQC 2007

Silverlight

From:

Gill Cleeren

www.snowball.be

blog.n-technologies.be

2Web programming Web parts NOEA / PQC 2007

• Silverlight… What is it?

• XAML

– With a Visual Studio/Blend demo

• Silverlight 2 features

– Controls demo

• Showcasing

• Q&A


Microsoft Silverlight is a cross-browser, cross-platform implementation of .NET

for building and delivering the next generation of media experiences & rich

interactive applications for the Web.


3 Ps of Silverlight

ProductivityProductivity

PerformancePerformance

PortabilityPortability


Designer Developer

Developer Designer Collaboration


A word on the developer experience

• Full CLR• Trimmed-down version of .NET class library• Full support from Visual Studio 2008 using templates


A word on the designer experience

• Expression Blend is the tool for designers (sometimes developers as well!)

• Gradients, blurs, animations… all the stuff designers like!• Automatically creates XAML• Project schema is same from Visual Studio


• Remember: it’s a client-side technology

• Requires plug-in to be installed (Less than 5MB)

• Build for web and desktop (WPF)

• Rich control set

• Supports HD playback

Some other important talking points


Silverlight Roadmap

• Silverlight V1 Shipped Q307• Silverlight V2 Shipped Q308• Silverlight control toolkit Q408

– More being added constantly– Goal is at least 50 controls

• Silverlight for mobile is coming– Same code running on mobile devices


Code-behind

• Name your controls so you can use it in code– Visual Studio automatically declares field for all x:name elements

<Button x:Name=“MyButton”/><Button x:Name=“MyButton”/><Button x:Name=“MyButton”/><Button x:Name=“MyButton”/>

public void Page_Loaded(sender, MouseEventArgs public void Page_Loaded(sender, MouseEventArgs e) e) {{ MyButton.Content = “Push Me!”;MyButton.Content = “Push Me!”;}}

public void Page_Loaded(sender, MouseEventArgs public void Page_Loaded(sender, MouseEventArgs e) e) {{ MyButton.Content = “Push Me!”;MyButton.Content = “Push Me!”;}}


More code-behind

• Event handlers can be wired up declaratively in XAML:

• Or explictly within the code-behind file– VB – using the "Handles" keyword– C# -- programmatically within the Page_Loaded event handler

<Button x:Name=“MyButton” Content=“Push Me” <Button x:Name=“MyButton” Content=“Push Me” Click=“MyButton_Click“/>Click=“MyButton_Click“/><Button x:Name=“MyButton” Content=“Push Me” <Button x:Name=“MyButton” Content=“Push Me” Click=“MyButton_Click“/>Click=“MyButton_Click“/>

public void MyButton_Click(object sender, public void MyButton_Click(object sender, RoutedEventArgs e) {RoutedEventArgs e) { // todo: add code// todo: add code}}

public void MyButton_Click(object sender, public void MyButton_Click(object sender, RoutedEventArgs e) {RoutedEventArgs e) { // todo: add code// todo: add code}}


A final note…

Use XAML where possible!

Otherwise, you’ll get a team of sad designers and developers…


Silverlight 2 Runtime Features

• 2D, Graphics• Audio, Video• Animations• Text, Text Input• Controls• Layout• Styles/Templates• Data Binding• Networking

– HTTP/S and Sockets

• .NET Support– C# and VB.NET

• LINQ• XML APIs• Generics• HTML Integration• Local storage• Crypto APIs (AES)• Threading


• A control: Re-usable UI elements that encapsulate

UI and behavior and enable re-use and

composition

• Vital for building business applications

• Not available in Silverlight 1.0!

• Controls toolkit: Out-of-band release (open-

source) of extra controls via

www.codeplex.com/silverlight

Controls and the controls toolkit


Some Built-in Controls in Silverlight 2

• Form Controls:• TextBox• Button• Toggle/Repeat Button• CheckBox• RadioButton• ListBox

• Layout Controls:• StackPanel• Grid / GridSplitter• Canvas

• Core Controls:• Border• Image• MediaElement• MultiScaleImage• ToolTip• ScrollViewer• Dropdown list

• Navigation Controls:• HyperlinkButton• Popup

• Large Controls:• Calendar• DataGrid• Slider• DateTimePicker

• Shapes:• Ellipse• Rectangle• Line• TextBlock• Path


Sample control usage

<Button x:Name=“MyButton” Content=“Push Me” Width=“150” <Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” />Height=“50” /><Button x:Name=“MyButton” Content=“Push Me” Width=“150” <Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” />Height=“50” />

Button b = new Button();Button b = new Button();b.Width = 150;b.Width = 150;b.Height = 50;b.Height = 50;b.Content = “Push Me";b.Content = “Push Me";

Button b = new Button();Button b = new Button();b.Width = 150;b.Width = 150;b.Height = 50;b.Height = 50;b.Content = “Push Me";b.Content = “Push Me";


Controls toolkit

• Collection of Silverlight controls, components and utilities made available outside the normal Silverlight release cycle

• Community driven: source is available, you can submit bugs and feature requests

• First release contains:– Source– Unit tests– Samples– Documentation– 12 new controls for charting, styling…– Theming


Controls toolkit example

• AutoCompleteBox• NumericUpDown• Viewbox• Expander• ImplicitStyleManager• Charting

• TreeView• DockPanel• WrapPanel• Label• HeaderedContentControl• HeaderedItemsControl


Theming support

Shiny Blue

Rainier Purple

Expression Light

Shiny Red

Rainier Orange

Expression Dark


• Silverlight is a platform for building Rich Interactive

applications

• Strong tooling support, both for developers and designers

with workflow between the 2

• Extended control toolset that will keep on growing

Summary


• Showcases

• Video.Show: http://www.codeplex.com/videoshow

• Hard Rock: http://memorabilia.hardrock.com/

• Sitemap: http://vertigo.com/deepzoom.aspx

• Vertigo, general: http://www.vertigo.com/Lab.aspx

• Cloud: http://www.mojaveexperiment.com/

• Inkubooks: http://inkubook.com/silverlightbooks/

• Renault Laguna: http://www.laguna-coupe.com/

• Line Raider Game: http://linerider.com/play-line-rider-online

• Bird Hunt Game:

http://designwithsilverlight.com/csharp/birdhunt/default.html

Presentation Title | PP | DD Month YYYY


• General

• www.silverlight.net

• www.codeplex.com/silverlight

• weblogs.asp.net/scottgu

• blogs.msdn.com/tims

• silverlight.net/blogs/jesseliberty

• www.snowball.be

Resources

Documents

Web programmeringSilverlight NOEA / PQC 2007 Silverlight From: Gill Cleeren blog.n-technologies.be