Building a Twitter App with Silverlight 3 - Part 1

1

Building a Twitter App with Silverlight 3

Clint EdmonsonDeveloper Evangelistclinted@microsoft.comwww.notsotrivial.net

Part 1

Introduction

• Session Objectives– Learn about the features available in Silverlight– Gain techniques for getting started and using Silverlight in

your site

• Agenda– What is Silverlight?– Navigation Applications– Database access– Web Services

What is RIA and Silverlight?

• Rich Internet Applications (RIA)- Vector graphics and animation- Client side storage- Video and audio playback

• Silverlight- Based on WPF- .NET Framework- Develop using Visual Studio

Silverlight Versions

• Silverlight 1.0– Shipped September 2007– XAML rendering and JavaScript API

• Silverlight 2– Shipped October 2008– XAML enhancements, .NET Framework, C#

• Silverlight 3– Shipped July 2009– Lots of UX enhancements and more

• Silverlight 4– Details are starting to emerge

The Silverlight Plug-in

• Runs on PC and Intel Macs (Linux with Moonlight)• Supports IE, Firefox, Safari• Under 5 MB download• Installs in seconds

CoreCLR and BCL

• CoreCLR– Silverlight’s version of the

Common Language Runtime– Based on the desktop CLR– Runs on Mac– Does not require the

desktop .NET Framework to be installed

• Silverlight Base Class Library (BCL)

– Trimmed down, What’s there works the same

XAML

• Similar to HTML in concept• Language independent• Strong support for data binding• Designer tool friendly

<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="20" Canvas.Top="20" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Yellow" /> <Ellipse Canvas.Left="80" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /> <Ellipse Canvas.Left="140" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /> <Path Data="M 70, 150 A 60, 60 0 0 0 170, 150" Stroke="Black" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" /></Canvas>

Naming XAML Elements

• Uses the x:Name syntax• Helps to access elements from code• Generates code in InitializeComponent() method

<Rectangle Canvas.Left="50" Canvas.Top="50" Fill="Yellow" Width="300" Height="200" Stroke="Black" StrokeThickness="10" x:Name="YellowRect" />

Silverlight Navigation

• New for Silverlight 3• Navigation project

template• Pages and Frames• UriMapper• Deep Linking

Silverlight Navigation Application

DEMO

Data Access

• Web Services(WCF/SOAP/REST)• Raw TCP/IP Sockets• HttpWebRequest/WebClient• JSON and XML parsing• RSS• HTML DOM Bridge

ASP.NET Data Integration

• WCF SOAP Services• ADO.NET Data Services• .NET RIA Services

ADO.NET Data Services

DEMO

Cross Domain Requests

• Http requests require clientaccesspolicy.xml or crossdomain.xml in root of remote site.

• Can work around by calling through Javascript - not recommended

• Create proxy to funnel requests through

Web Services

DEMO

Resources

• Slides & Code: www.notsotrivial.net

• Silverlight Development Center http://www.silverlight.net/

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED

OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.