Introducción al Desarrollo de Aplicaciones RIA con Silverlight 2.0L.C.C. Antonio Orlando Díaz EscalanteComunidad .NET Mérida Yuc. México (Aluxes.NET)http://aluxesdotnet.multiply.comhttp://tonigeek.blogspot.comconsultormid@yahoo.com

Agenda¿Que es una RIA?

¿Porque Silverlight?

¿Que es Silverlight?

Arquitectura Silverlight

XAML

Usando Visual Studio 2008 con Silverlight 2.0

Novedades en Silverligth 3

Referencias

¿ Que es una Rich Internet Application (RIA)? Son aplicaciones Web que tienen funcionalidades y características de una aplicación de escritorio.

Ofrecen una rica experiencia que mejora la satisfacción del usuario y aumenta la productividad, transfiriendo el procesamiento necesario para la interfaz del usuario del lado del cliente

Características de las RIAs

Herramientas tipo RIA:

• Adobe Air

• Google Gears

• Microsoft Silverlight

RIA’s

Características:

• Permiten trabajar con o sin conexión hacia Internet.

• Son multiplataforma.

• Integración de audio y video local

• Manejo de contenido asincrónicamente

¿Por qué Silverlight? Necesidad de interfaces de usuario faciles de usar y de alta

calidad.

Transferencia de experiencias multimedia y aplicaciones interactivas enriquecidas para la web

Experiencias coherentes entre equipos basados en Windows y Otros S.O.

Creación de experiencias web más atractivas y ricas

Mejora de las aplicaciones basadas en AJAX/estándares existentes

¿Qué es Silverlight? Silverlight es un plug-in que funciona sobre los navegadores mas populares (Firefox,IE,Safari) y sobre varias plataformas (Windows, Mac, Linux (Moonlight))

Su meta es traer la misma fidelidad y calidad encontrada en las IU asociadas con aplicaciones escritorio hacia el web.

Con Silverlight diseñadores y desarrolladores pueden trabajar en sintonía bajo un mismo formato (XAML).

Ofrece un completo modelo de programación que soporta AJAX, .NET además de proveer soporte multilenguaje (C#,VB.Net,Phyton,Ruby,etc)

Facil construcción de aplicaciones a través de Visual Studio 2008 y la suite herramientas Microsoft Expression.

Modelos de Programación y Presentación para el web

Arquitectura Silverlight

Novedades Silverlight 2Deep Zoom

Permite profundizar en el detalle de fotografias escalandolas hasta un giga -píxel

Media Stream Source

API para descarga dinámica de contenido multimedia

Arquitectura de una aplicación con Silverlight

Casos de éxito con Silverlight Transmisiones de los Juegos Olimpicos de Beijing 2008

Asunción de Obama en 2009

XAML

XAML = eXtensible Application Markup Language

Esquema de documento XML FlexibleEjemplos de Uso: WPF, Silverlight, Workflow Foundation

Variedad de HerramientasSe preserva soporte con editores comunes de texto

Ejemplo de XAML

<Grid>

<TextBlock FontSize="32" Text="Hello world" />

</Grid>

<Grid>

<TextBlock FontSize="32" Text="Hello world" />

</Grid>

Hello world

Markup = Object Model

<TextBlock FontSize="32" Text="Hello world" /><TextBlock FontSize="32" Text="Hello world" />

TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";

TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";

=

Cualquier cosa que pueda ser expresado en XAML puede ser programaticamente codificado tambien

<TextBlock />

<TextBlock>Hello</TextBlock><TextBlock>Hello</TextBlock> Hello

<TextBlock FontSize="18">Hello</TextBlock><TextBlock FontSize="18">Hello</TextBlock> Hello

<TextBlock FontFamily="Courier New">Hello</TextBlock><TextBlock FontFamily="Courier New">Hello</TextBlock> Hello

<TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you?</TextBlock>

<TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you?</TextBlock>

Hello there, how are you?

<TextBlock> Hello there,<LineBreak/>how are you?</TextBlock>

<TextBlock> Hello there,<LineBreak/>how are you?</TextBlock>

Hello there, how are you?

Shapes

<Rectangle />

<Ellipse />

<Line />

<Polygon />

<PolyLine />

<Path />

ControlesElementos de IU que encapsulan IU y comportamiento que permiten el re-uso y composición<Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” /><Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” />

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

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

Mas sobre ControlesMicrosoft incluye el conjunto basico de controles

Se incluye el código fuente

Son extensibles

Amplia variedad de controles para dominios

especificos a través de Socios de Negocios

Algunos Controles IncorporadosForm Controls:

TextBox

Button

Toggle/Repeat Button

CheckBox

RadioButton

ListBox

Layout Controls:StackPanel

Grid / GridSplitter

Canvas

Core Controls:Border

Image

MediaElement

MultiScaleImage

ToolTip

ScrollViewer

Navigation Controls:

HyperlinkButton

Popup

High-Level Controls:

Calendar

DataGrid

Slider

DateTimePicker

Shapes:Ellipse

Rectangle

Line

TextBlock

Path

x:NameNombra tus controles de tal forma que puedas usarlos en código

Visual Studio automáticamente declara un campo para todos los elementos x:name

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

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

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

Enlaza los Manejadores de Eventos( Event Handlers)Los manejadores de Eventos pueden ser

enlazados declarativamente en XAML:

O explicitamente dentro del archivo code-behindVB – usando el keyword "Handles" C# -- programmaticamente dentro del manejador de evento de Page_Loaded

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

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

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

Trabajando con Visual Studio 2008

y Silverlight

Requerimientos:Instalar lo siguiente:

Silverlight V2.0Visual Studio 2008 /Visual Studio Express EditionSilverlight Tools for Visual Studio 2008Expression Blend 2 Beta

Encuentra todo lo que necesitas en : www.silverlight.net

Enlaces a descargas y documentos

Estructura de una aplicación SilverlightUna aplicación .NET Silverlight siempre incluye

Un archivo html que hospeda un control Silverlight (por ejemplo: Test.htm)

Un archivo HTML y/o ASP.NET para la instanciación

Un archivo raíz XAML y su archivo de ensamble - YourApp.xaml & YourApp.dll

Tambien puede incluir:Otras librerias de aplicacion (creadas por el usuario, de Microsoft o de terceras partes)

Recursos de la aplicación – opcionalmente incluido en el ensable

Cargando una aplicación Silverlight

Test.htm

Page.xaml

Page.xaml.csArchivo Code behind

public partial class MyPage: Canvas { public void Page_Loaded(object o, EventArgs e) { InitializeComponent();

MyMessage.Text = “Hello World!”; } }

public partial class MyPage: Canvas { public void Page_Loaded(object o, EventArgs e) { InitializeComponent();

MyMessage.Text = “Hello World!”; } }

Ejecutando la Aplicacion…

Ciclo de Vida de una App. Silverlight Comienza cuando el control es instanciado por la pagina que lo aloja.

Termina con cualquier a de los siguientes supuestos: El navegador se desplaza a otra pagina web Se cierra la ventana del navegador o la pestaña que muestra la pagina host Se refresca la página web que lo aloja (comienza un nuevo ciclo de vida) El script de la página utiliza HTML DOM para eliminar el control Silverlight de la página Se cierra la sesión de usuario del sistema operativo o se cierra éste

DEMO

Silverlight Poster

Un vistazo a las características de Silverlight 3 Beta 1 Reducción de tamaño de los archivos XAP

OOB (Out-Of Browser)

Aceleración vía GPU

Enlace entre controles (Databinding)

Save File Dialog

RIA Services

Sumario

Silverlight provee una potente y poderosa plataforma RIA

Facil implementación de aplicacionesFacilidad para crear ricas experiencias de usuarioSoporte Multiplataforma y Multibrowser

Silverlight facilita un modelo de programación común a través de navegadores, dispositvos moviles y aplicaciones de escritorio.Mejora la productividad entre diseñadores y desarrolladores

Links de Interés

http://weblogs.asp.net/scottguhttp://www.silverlight.netCurso Silverlight MSDN EspañaComunidad “Liga Silverlight”

GRACIAS

L.C.C. Antonio Orlando Díaz EscalanteDirector Comunidad .NET Mérida México

(Aluxes.NET)http://aluxesdotnet.multiply.com

http://tonigeek.blogspot.comconsultormid@yahoo.com