Mc silverlight2 dia1

75
Silverlight 2.0 para desarrolladores (Día 1) Marino Posadas MVP C#, MCAD, MCSD, MCT Alhambra-Eidos

description

presentacion power point para jimdo

Transcript of Mc silverlight2 dia1

Page 1: Mc silverlight2 dia1

Silverlight 2.0 para desarrolladores(Día 1)

Marino PosadasMVP C#, MCAD, MCSD, MCT

Alhambra-Eidos

Page 2: Mc silverlight2 dia1

Primero publicado en castellanoVersión final (RTW)Gratuito con el número de noviembre de dotNetManiaAccesible desde la Web de la revista (www.dotnetmania.com) Está siendo entregado en los eventos de desarrollo de Microsoft.

Fundamentos: “Programación en Silverlight 2.0” de Netalia Ediciones

Page 3: Mc silverlight2 dia1

Microsoft Silverlight es un componente multiplataforma, y multinavegador que permite la programación en .NET de la siguiente generation de aplicaciones para internet: (rich interactive applications ó R.I.A.)

Page 4: Mc silverlight2 dia1

ÍndiceArquitectura y buenas prácticas

Modelos de arquitectura y escenarios para el desarrollo con Silverlight. Implicaciones del modelo de seguridad en sandbox y el PAL (Platform Adaptation Layer).

Visual Studio 2008 y Expression Blend 2El papel de Visual Studio 2008 en el desarrollo con Silverlight 2.

Arquitecturas de navegación. Clases, Interfaces y soporte arquitectónico. Gestión de estado de la aplicación (Almacenamiento Aislado). Eventos. Manejo de hebras de ejecución y el componente BackgroundWorker. Gestión de recursos.

Page 5: Mc silverlight2 dia1

Indice3. Expression Blend y la interfaz de usuario

Recomendaciones para el diseño. Controles del SDK y aportaciones del Silverlight Toolkit de Marzo 2009. Estilos, Plantillas y recursos de diseño. Visual State Manager. Enlace con objetos de lógica de negocio.

Comunicaciones fuera del sandboxInteracción con HTML /DOM y el navegador. Cajas de Diálogo del sistema y acceso a recursos locales. Acceso a Servicios: ASMX (SOAP), WCF para Silverlight y REst. Acceso a datos con ADO.NET Data Services.

Buenas prácticas e instalación de aplicacionesEl decálogo de las buenas prácticas en aplicaciones Silverlight. El proceso de instalación, desde el punto del cliente y del servidor. Introducción a los modelos de programación complejos: PRISM 2.0.

Page 6: Mc silverlight2 dia1

Modelos de arquitectura y escenarios para el desarrollo con Silverlight

Page 7: Mc silverlight2 dia1

Experiencia Usuario Continua

Ubicuidad Riqueza Próxima Generación

SharePoint ASP.NET+AJAX Gadgets Silverlight Infopath OBA Winforms WPF XNA

Page 8: Mc silverlight2 dia1

Arquitectura Silverlight

Leyenda

V2.0

Leyenda

V1.0

CLR Execution Engine

Framework

HTML DOMIntegration

XAML

Networking

JSON

REST POX

RSS

Data

LIN QXLINQ

DLR

RubyPython

WPFExtensible

Controls

BCLGenerics

Collections

InputsKeyboard

Mouse Ink

Media

VC1 WMA MP3

Browser Host

IntegratedNetworking

Stack

Installer

ApplicationServices

MS AJAXLibrary

UI Core

Vector TextAnimation

Images

DRM

Media

Controls

Layout Editing

Page 9: Mc silverlight2 dia1

Historia Microsoft de Arquitectura N-TierEn Microsoft, las arquitecturas N-Tier comenzaron con Windows NT 4.0 Option Pack, (Epoca1998 aprox.) -Componentes MTS (Microsoft Transaction Server) C++/VB-DCOM (Distributed COM)-Windows DNA(EpocaWindows 2000)-ComponentesCOM+, C++/VB, etc.

¡Este diagrama es valido hoy! (2009)

1998Arquitectura 3-Tier

Page 10: Mc silverlight2 dia1

Arquitectura N-Tier / .NET 2.0/3.x(2005-2009)

Capa de PresentaciónWPF, XBAP, WinFormsASP.NET, AJAX, ASP.NET MVCSilverlight

Capa de NegocioAssemblies(.NET components)WCF Services / WS .asmxSystem.TransactionsArquitecturas personalizadas

Capa de DatosMicrosoft SQL ServerOtros SGBD (Oracle, DB2, etc.)

Page 11: Mc silverlight2 dia1

Arquitectura de Silverlight 2.0

Arquitectura de SilverlightAplicaciones RIAOtras plataformas RIA

Adobe Flash Player, Adobe Flex, Adobe AIRPlataformas AJAXJavaFXGoogle Gears

Silverlight y los lenguajesXAML, .NET, Lenguajes dinámicos: IronRuby, IronPyton

XAML: Expression Blend y Visual Studio 2008Para el resto: Visual Studio 2008 (Blend no dispone de editor .NET)

Page 12: Mc silverlight2 dia1

Implicaciones del modelo de seguridad en sandbox y el PAL

(Platform Adaptation Layer)

Page 13: Mc silverlight2 dia1

La Sandbox (Caja de arena)Toda aplicación Silverlight se ejecuta en una de ellas

Conceptualmente similar a la de HTML DOM

Ejecución similar a las páginas HTML –click en una URLNo hay permisos de ejecución Pero no hay forma de salir de la sandbox

Incluye funcionalidad adicional:Almacenamiento OfflineControles para upload de ficherosSoporte “Cross domain“ (requiere un fichero CrossDomain.xml en el servidor de destino)

Page 14: Mc silverlight2 dia1

El Runtime (CoreCLR)Está basado en el PAL (Platform Adaptation Layer)

Introduce por primera vez en .NET la ejecución “side-by-side”

Mapea las API’s del sistema en llamadas disponibles desde Silverlight

Implementa un sistema de seguridad propio, no basado en el CAS sino en Transparencia de Seguridad (Security Transparency)

El modelo divide el código en 3 clases:

Transparente (Transparent),

Crítico con seguridad (SafeCritical), y

Crítico (CriticalCode).

Page 15: Mc silverlight2 dia1

El Runtime (CoreCLR) y las llamadas

Page 16: Mc silverlight2 dia1

Instalaciones especialesPreviamente, necesitamos las herramientas como dos ficheros separados:

1) Instalador “Silverlight Tools for Visual Studio 2008 SP1”, disponible en la dirección: http://go.microsoft.com/fwlink/?LinkId=129043

2) Silverlight 2.0 Developer Runtime desde la dirección http://go.microsoft.com/fwlink/?linkid=129011

Dos opciones de instalación son:a) Extraer y pegar.

1. Abrir una ventana de comandos (cmd.exe) y navegar a donde esté el fichero Siverlight_tools.exe.2. Ejecutar el comando silverlight_tools.exe /x.3. Una vez descomprimidos los ficheros, volcar en el mismo directorio el Silverlight 2.0 Developer Runtime y ejecutar SPInstaller.exe.

b) Colocar el Silverlight 2.0 Developer Runtime en el directorio Temp (no requieredescompresión de ficheros).1. Navegar al directorio Temp (o abrir una ventana de comandos y teclear

la secuencia: CD %Temp%.2. Crear desde ahí un directorio para la instalación.3. Copiar Silverlight.2.0_Developer.exe a ese directorio y ejecutar el instalador Silverlight_tools.exe.

Page 17: Mc silverlight2 dia1

Visual Studio 2008 y Expression Blend 2

Modelos de arquitectura y escenarios para el desarrollo con Silverlight. 3 Modelos básicos:

“Islas” Silverlight (similares a Flash)Componentes individuales que pueden coexistir en la misma página

Aplicaciones de tipo medio con toda la interfaz en Silverlight/XAMLAplicaciones de tamaño superior que requieren una arquitectura más sofisticada: PRISM 2.0

Page 18: Mc silverlight2 dia1

Visual Studio 2008 y Expression Blend 2

“Islas” Silverlight (similares a Flash)El entregable resultante (fichero XAP) debe estar programado de tal forma que su funcionamiento sea “Loosely Coupled”

Aunque no siempre es posible del todoEl tratamiento de errores para estos casos especiales se convierte en exhaustivo.Los problemas pueden venir de dependencias del DOM, de acceso a servicios no disponibles, de accesos “crossdomain”, de insuficiencia de permisos en acceso a información local de la máquina, etc.

En producción, si nuestro servidor no permite la adición del tipo MIME .XAP, la solución es renombrarlo a .ZIP (formato reconocible por todos los servidores)

Page 19: Mc silverlight2 dia1

Visual Studio 2008 y Expression Blend 2Aplicaciones de tipo medio

Toda la interfaz es puro SilverlightLa parte ASP.NET/HTML actúa meramente como contenedor de las páginas SilverlightRequiere la codificación de un sistema de navegación propio

Pueden considerarse técnicas más avanzadas a este propósito, como la IoC (Inversion of Control)De la misma forma en este modelo y el siguiente recomiendan a veces técnicas de inyección de dependencias (Dependency Injection)

Aplicaciones grandesPRISM 2.0 es el modelo “Patterns & Practices” construido a tal efectoComentaremos algo más sobre este modelo al final del master

Page 20: Mc silverlight2 dia1

Estructura de una “isla” Silverlight

Page 21: Mc silverlight2 dia1

Idóneo para todo lo que suponga programación de la funcionalidad del/los controles

Dispone de Intellisense (Expression Blend, no)No dispone de un diseñador visual pero sí de un “intérprete

visual” de la IUProgramación del modelo de eventosCreación de clases personalizadasSistema de depuración (incluyendo hebras individuales en

2008)Extensión de la arquitecturaOpciones de compilación / distribución configurables

El papel de Visual Studio 2008 y Blend 2 en el desarrollo con Silverlight 2.0

Page 22: Mc silverlight2 dia1

Requiere de una instalación cuidadosa VS2008 SP1 Blend 2.0 SP1 Visual Studio Tools for Silverlight

Incluye el runtime de tiempo de ejecución Se actualiza automáticamente a la última versión disponible

Permite la programación sincronizada La parte de C#/VB. NET en VS2008 La parte XAML, en Blend 2.0 Los cambios en uno de ellos, se reflejan en el otro

El papel de Visual Studio 2008 y Blend 2 en el desarrollo con Silverlight 2.0

Page 23: Mc silverlight2 dia1

Arquitecturas de navegación

Page 24: Mc silverlight2 dia1

Lógica o por página En el fichero ASPX/HTML, dentro de un

elemento <div> UserControl ≈ View ó Page Página contenedora + Grid (root), hace las veces de un gestor de navegación que añade/elimina UserControls (páginas) al Grid

Navegación lógica: Gestores de navegación

Visual Studio 2008 y Expression Blend 2Navegación (si es aplicable)

Page 25: Mc silverlight2 dia1

25

Page 26: Mc silverlight2 dia1

Visual Studio 2008 y Expression Blend 2Distribución:

Componentización

Page 27: Mc silverlight2 dia1

private void Application_Startup(object sender, StartupEventArgs e){string startPageParameter = "PaginaInicial"; if (!e.InitParams.ContainsKey(startPageParameter)) { this.RootVisual = new PaginaInicial(); } else { switch (e.InitParams[startPageParameter]) { case "PaginaInicial": this.RootVisual = new PaginaInicial(); break; case "OtraPaginaInicial": this.RootVisual = new OtraPaginaInicial(); break; default: throw new Exception(

“Debe comenzarse por 'PaginaInicial' o ‘OtraPaginaInicial’.");} } }

Ejemplo de Navegación gestionada por parámetros iniciales

Page 28: Mc silverlight2 dia1

28

Page 29: Mc silverlight2 dia1

Sobre clases, interfaces y soporte

Page 30: Mc silverlight2 dia1

Sobre clases, interfaces y soporte

Además de los elementos clásicos de desarrollo hay aspectos especiales a tener en cuenta debido al modelo de alojamiento en host HTML que usa SL.Por un lado: no hay problema en heredar de cualquier clase de la jeraquía disponible en el CoreCLR

Pero debemos de tener en cuenta que no se trata de un modelo clásicoPodemos crear elementos “híbridos”, que dispongan de aspectos de la interfaz de usuario con un comportamiento de lógica de negocio

Heredando directamente de elementos de la IU como UIElement o FrameworkElement.Podemos crear elementos de animación como clases separadas que se apliquen posteriormente a elementos de la IU

Page 31: Mc silverlight2 dia1

Sobre clases, interfaces y soporteSi queremos utilizar propiedades de nuestras clases en XAML, debemos definirlas como DependencyProperties

Se establece así una correspondencia entre elementos propios del CLR y otros de XAMLLa sintaxis de una declaración de este tipo es como sigue:

private static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string),

typeof(CajaTextoDNI), null);

// el parámetro null puede ser un valor predeterminado o un callback public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } }

Page 32: Mc silverlight2 dia1

Sobre clases, interfaces y soporte

Otra alternativa es la implementación del rico conjunto de interfaces disponibleSiempre permite definir una interfaz visual que será totalmente distinta tanto en funcionalidad como en aspecto

Manteniendo los elementos básicos (de donde heredemos). En Windows Forms, era complejo y los resultados, dudosos en calidad de la IU.

Page 33: Mc silverlight2 dia1

Sobre clases, interfaces y soporte

La integración con HTML permite soluciones híbridas que aprovechen lo mejor de ambos mundos y que utilicen tecnologías actuales como ASP.NET AJAX.En ocasiones, la mejor solución a un problema pasa por una acción de este tipo

Como por ejemplo, el control del tamaño del componente en función del tamaño del navegador.Hay que tener en cuenta que aunque el nivel de cumplimiento de los estándares por parte de los navegadores se ha incrementado mucho, todavía hay ciertas formas distintas de dar solución al mismo problema. El soporte de navegadores es múltiple de verdad:

Windows: IE, Firefox, Safari, Opera, ChromeMac: Konqueror, Firefox, SafariLinux: Varios (a través del proyecto MoonLight)

Para estar seguro, no fiarse, probar la misma página en cada uno de ellos.

Page 34: Mc silverlight2 dia1

Sobre clases, interfaces y soporte:Interacción HTML

Ejemplo básico de esta interacción: Capturar el tamaño del navegador cuando cambie.Vincular un manejador del evento resized para el objeto App.Current.Host.Content.

Page.xaml.cs:public Page(){

InitializeComponent(); App.Current.Host.Content.Resized += new

EventHandler(Content_Resized);}

Captura el tamañovoid Content_Resized(object sender, EventArgs e) {

double height = App.Current.Host.Content.ActualHeight; double width = App.Current.Host.Content.ActualWidth;

}

Page 35: Mc silverlight2 dia1

Gestión de estado(Almacenamiento Aislado)

Page 36: Mc silverlight2 dia1

Gestión de estado: Almacenamiento Aislado (Isolated Storage)

Silverlight usa Isolated Storage como sistema virtual de ficheros para almacenar datos en una carpeta oculta en la máquina cliente. Separa los datos en dos secciones:

Sección #1 contiene información administrativa, como la cuota de disco Sección #2 contiene los datos en sí. Cada aplicación Silverlight recibe su parte de almacenamiento correspondiente que, por defecto, es de 1 MB por aplicación.

Page 37: Mc silverlight2 dia1

Gestión de estado: Almacenamiento Aislado

Ventajas:Buena alternativa al uso de cookies especialmente si se trabaja con conjuntos grandes de datos.

Casos típicos incluyen la funcionalidad “undo”, elementos del carrito de la compra, configuración del sistema y/o preferencias de usuario.

Isolated storage se almacena por usuario individualCon permisos suficientes, los clientes pueden solicitar el incremento de la cuota mediante código

Page 38: Mc silverlight2 dia1

Gestión de estado: Almacenamiento Aislado

Posibles inconvenientes:Los administradores tienen control sobre la cuota, por lo que pódría producirse un error de acceso, y se precisa el control de errores. Con algo de esfuerzo se pueden encontrar los datos y borrar su contenido. Para prevenir cambios, podríamos utilizar las clases de criptografía. El codigo debe tener el permiso IsolatedStorageFilePermission para almacenar con Isolated Storage.

Page 39: Mc silverlight2 dia1

Gestión de estado: Almacenamiento AisladoPara usarlo, añadimos una referencia using al namespace System.IO.IsolatedStorage, y otra a System.IO.

using System.IO.IsolatedStorage;using System.IO; …private void SaveData(string data, string fileName) { using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication()) { using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(fileName,

FileMode.Create, isf)) { using (StreamWriter sw = new StreamWriter(isfs)) { sw.Write(data); sw.Close(); } } } }

Page 40: Mc silverlight2 dia1

Gestión de estado (almacenamiento aislado) private string LoadData(string fileName) { string data = String.Empty; using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication()) { using (IsolatedStorageFileStream isfs = new

IsolatedStorageFileStream(fileName, FileMode.Open, isf))

{ using (StreamReader sr = new StreamReader(isfs)) { string lineOfData = String.Empty; while ((lineOfData = sr.ReadLine()) != null) data += lineOfData; } } } return data; }

Page 41: Mc silverlight2 dia1

Gestión de estado: Almacenamiento Aislado

Solicitud de incremento de cuotaDebe de usarse IsolatedStorageFile.TryIncreaseQuotaTo()

void OnMouseLeftButtonDown(…) { using (IsolatedStorageFile store =

IsolatedStorageFile.GetUserStoreForApplication()) {

if (store.TryIncreaseQuotaTo(2 * 1024 * 1024)) { // El usuario acepta.

} else {

// El usuario rechaza -> hay que manejarlo. } }

}

Page 42: Mc silverlight2 dia1

Eventos

Page 43: Mc silverlight2 dia1

x:Name Se debe dar nombre a los elementos XAML que se

quieran usar en el códigoPara el acceso a estilos se utiliza el identificador x:KeyVisual Studio declara automáticamente campos para todos los elementos con atributos x:Name

XAML: <TextBlock x:Name=“Mensaje”/>

public void Page_Loaded(sender, MouseEventArgs e) { Mensaje.Text = “¡Hola Mundo!”;}

Page 44: Mc silverlight2 dia1

Evento Page_Loaded

Primera oportunidad para ejecutar código tras la descarga del plug-in de Silverlight y la carga en el navegadorSe dispara después de que todos los elementos XAML han sido descargados y se ha creado el árbol de elementos

Si busca ejecutar código inmediatamente, considere cargar el contenido programáticamente en segundo plano

Page 45: Mc silverlight2 dia1

Eventos de UIElement (Base)

MouseMoveMouseEnterMouseLeaveMouseLeftButtonDownMouseLeftButtonUp

KeyUpKeyUp KeyDownKeyDown GotFocusGotFocus LostFocusLostFocus LoadedLoaded

Todas las formas y controles heredan de UIElement, lo que significa que todos los elementos tienen al menos 10 eventos.

Page 46: Mc silverlight2 dia1

Conectándose a los Eventos

Los manejadores de eventos pueden especificarse en forma declarativa en el XAML:

O explícitamente en el archivo de code-behindProgramáticamente por medio del manejador de evento Page_Loaded

<Rectangle x:Name=“MyRect” MouseEnter=“MyRect_MouseEnter"> </Rectangle>

<Rectangle x:Name=“MyRect” MouseEnter=“MyRect_MouseEnter"> </Rectangle>public void MyRect_MouseEnter(object sender, MouseEventArgs e) { // TODO: añadir código}

public void MyRect_MouseEnter(object sender, MouseEventArgs e) { // TODO: añadir código}

Page 47: Mc silverlight2 dia1

Eventos (Trucos)

Capturar el evento Mouse Wheel Silverlight no lo soporta , pero podemos capturar el evento mediante el objeto HtmlPage. Veamos cómo funciona par a IE, Opera, Mozilla y Safari.Declaramos 3 eventos para capturar todas las posibilidades del los navegadores

Por ejemplo, el evento DOMMouseScroll lo usa Mozilla.public Page() {

InitializeComponent(); HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel);

HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel); HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel);}Nuestro evento controla el “delta change” en la rueda del ratón. La forma de hacerlo en Mozilla y Safari es diferente a IE u Opera.

Page 48: Mc silverlight2 dia1

Eventos (Trucos)Mozilla/Safari: Comprobar la propiedad llamada “detail” IE/Opera: Comprobar la propiedad llamada “wheeldelta” Código completo:

private void OnMouseWheel (object sender, HtmlEventArgs args) { double mouseDelta = 0; ScriptObject e = args.EventObject; // Mozilla and Safari if (e.GetProperty("detail") != null) { mouseDelta = ((double)e.GetProperty("detail")); } // IE and Opera else if (e.GetProperty("wheelDelta") != null) mouseDelta = ((double)e.GetProperty("wheelDelta")); mouseDelta = Math.Sign(mouseDelta);

}

Page 49: Mc silverlight2 dia1

Manejo de hebras de ejecución y el componente BackgroundWorker

Page 50: Mc silverlight2 dia1

Manejo de hebras de ejecución y la primitiva BackgroundWorker

CaracterísticasUna aplicación Silverlight actualiza la interfaz de usuario desde la hebra principal de ejecución (Dispatcher)

Puede provocar situaciones intolerables cuando se están procesando grupos de ficheros localesP.E.: creando bitmaps a partir de ficheros gráficos del equipo del usuario que van a ser presentados en pantallaEn estos casos, debiéramos dejar la responsabilidad de la creación del Bitmap a un método que sea llamado cada vez que se produzca el evento CompositionTarget.Rendering:

CompositionTarget.Rendering += new EventHandler(CrearBitmap)

Page 51: Mc silverlight2 dia1

Manejo de hebras de ejecución y la primitiva BackgroundWorker

Hebras de ejecuciónAsí, cada vez que un nuevo elemento (Bitmap, u otro), este construido y listo para ser mostrado, el motor de interpretación visual (rendering) actualizará la IU evitando esos lapsus por falta de respuestaPara actualizar la IU se debiera usar la hebra de IU principal.Por ejemplo, el siguiente código no funciona:... Timer t = new Timer( GetData, null, TimeSpan.Zero, new TimeSpan( 0, 1, 0 ) ); ... public void GetData( object stateInfo ) { SampleWebServiceSoapClient client = new SampleWebServiceSoapClient(); client.HelloWorldCompleted += new EventHandler<HelloWorldCompletedEventArgs>(

client_HelloWorldCompleted ); client.HelloWorldAsync(); }

private void client_HelloWorldCompleted( object sender, HelloWorldCompletedEventArgs e ) { // actualizar la IU}

Page 52: Mc silverlight2 dia1

Manejo de hebras de ejecución y la primitiva BackgroundWorker

Hebras de ejecuciónEl código anterior devolverá un error “Invalid cross-thread access“La razón es que se intenta acceder a la IU principal desde otra hebra, lo que podría tener problemas de seguridadLa solución es utilizar un objeto DispatcherTimer, en lugar de System.Threading.Timer que utiliza el ejemploEl problema es que la hebra principal (Dispatcher) no puede ser invocada desde un System.Threading.Timer

DispatcherTimer está precisamente pensado para eso

También es conveniente en ocasiones el uso del evento CompositionTarget.Rendering: veremos un ejemplo claro en el apartado de Cajas de Diálogo del sistema (FileOpen dialog)El código resultante de utilizar esta segunda aproximación sería el siguiente:

Page 53: Mc silverlight2 dia1

Manejo de hebras de ejecución y la primitiva BackgroundWorker

DispatcherTimerDispatcherTimer t = new DispatcherTimer();t.Interval = new TimeSpan( 0, 0, 1 ); t.Tick += new EventHandler( RefreshData ); t.Start();... private void RefreshData( object sender, EventArgs e) { SampleWebServiceSoapClient client = new SampleWebServiceSoapClient(); client.HelloWorldCompleted += new EventHandler

<HelloWorldCompletedEventArgs>(client_HelloWorldCompleted); client.HelloWorldAsync(); } private void client_HelloWorldCompleted( object sender,

HelloWorldCompletedEventArgs e ) { lastUpdated.Text = DateTime.Now.ToLongTimeString();

}

Page 54: Mc silverlight2 dia1

Recursos (externos e internos al control)

Page 55: Mc silverlight2 dia1

Recursos (externos e internos al control)

Page 56: Mc silverlight2 dia1

Recursos (externos e internos al control)

Resource (continuación)Problemas posibles: Uri’s no accesibles al ser generadas por código, etc.Solución: Uri’s relativas al ensamblado:

<Image Source=”/{assemblyShortName};component/Foto.jpg”/>

Podemos extraer un recurso programáticamente mediante:

Application.GetResourceStream(uri).StreamContent

Se añade al .XAP (no a la DLL), en el directorio raíz conceptual de la aplicaciónAccesible utilizando Uri’s relativas a la raíz de la aplicación, y por tanto, incluyendo la barra inicial:

<Image Source=”/Foto.jpg” />Es lo que tiene más sentido cuando un recurso es utilizado por más de un ensamblado de la aplicación

Page 57: Mc silverlight2 dia1

Recursos (externos e internos al control)

NoneNo se copia en el XAP, pero el valor de metadato CopyToOutputDirectory , garantizará que es copiado junto al XAP en el destino de la instalación.Accesibles mediante Uri’s relativas respecto a la raíz de la aplicación (con barra inicial, por tanto)

<Image Source=”/Foo.jpg” />Preferible si el recurso ocupa mucho espacioSi se trata de vídeo, podemos utilizar la técnica del “streaming adaptativo”, que es un complemento que se instala sobre el servidor IIS y permite realizar una descarga inteligente del recurso de vídeo, en función del ancho de banda y otros factores.

No marcados (externos al proyecto)Se recuperan mediante URI’s absolutas

Page 58: Mc silverlight2 dia1

58

Page 59: Mc silverlight2 dia1

Streaming Adaptativo

Streaming AdaptativoExtensión de IIS Media ServicesPermite streaming hacia clientes Silverlight sobre HTTPDetecta las condiciones del escenario de transferenciaRequiere la instalación de la extensión sobre IIS 7.0“Trocea” el contenido multimedia en función de los parámetros evaluadosExpression Encoder 2 Service Pack 1, permite definir distintos niveles de calidad personalizados para el contenido multimedia

Page 60: Mc silverlight2 dia1

Streaming Adaptativo

Streaming Adaptativo (S.A.)Más información en http://www.iis.net/extensions/SmoothStreamingSe puede ver una demo de esta característica en http://www.iis.net/media/experiencesmoothstreamingLa explicación detallada del funcionamiento del SDK está disponible en http://msdn.microsoft.com/es-es/library/bb851621(en-us).aspx En el sitio https://silverlight.live.com/ pueden alojarse gratuitamente hasta 10 Gb de contenido multimedia que ya se configura para su uso mediante S.A.

Page 61: Mc silverlight2 dia1

Expression Blend 2.0(hay que verlo)

Page 62: Mc silverlight2 dia1

Recomendaciones para el diseñoSencillo no significa elegante (o estético), pero casi…

Uniformidad en la selección del tema principal del sitio/aplicaciónPensar siempre si una metáfora visual puede explicar más fácilmente un proceso que una interfaz de usuario clásica

Si no, usar la versión clásica (actualizada, siempre mejora)Si la respuesta es positiva, adelante desde 0

Reutilizar lo existente es un viejo principio de la OOP También es aplicable aquí

No caer en la excesiva demostración de las capacidades de la herramienta aunque no venga a cuentoAprender a trabajar con diseñadores (comprender sus motivaciones y carencias… como ellos comprenden las nuestras)Además de Blend, el resto de productos de la Suite Expression ofrece grandes posibilidades

Page 63: Mc silverlight2 dia1

63

Page 64: Mc silverlight2 dia1

Controles del SDK y aportaciones del Silverlight Toolkit de Marzo 2009

Page 65: Mc silverlight2 dia1

65

Page 66: Mc silverlight2 dia1

Estilos, plantillas y recursos de diseño

Page 67: Mc silverlight2 dia1

Estilos, plantillas y recursos de diseño

En Blend, disponemos del concepto de “Sesión de dibujo”, vinculada a los elementos Geometry principalmenteCualquier elemento visual (predeterminado o creado por nosotros), puede ser modelado mediante el uso de estilos

Blend genera el código XAML automáticamente por nosotrosPodemos ejecutar el proyecto desde Blend, para lo cual se crea una página de pruebas automáticamente (F5).

Muchos elementos pueden convertirse en recursos generales de toda la aplicación o en controles

Brushes a partir de imágenes o vídeos

Page 68: Mc silverlight2 dia1

68

Page 69: Mc silverlight2 dia1

Visual State Manager

Page 70: Mc silverlight2 dia1

Visual State Manager.

Gestiona estados y grupos de estadoManeja adecuadamente el modelo “Parts-and-States”Permite crear estados visuales que se correspondan con distintos estados de la lógica de negocioSe accede a el programáticamente mediante el objeto VisualStateManagerPodemos pasar de un estado a otro mediante una simple llamada por código al método GoToState(“estado”)

Page 71: Mc silverlight2 dia1

71

Page 72: Mc silverlight2 dia1

Enlace con objetos de lógica de negocio

Page 73: Mc silverlight2 dia1

Vinculación de datos (Lógica de negocio)

Permite acceder a los componentes compilados (DLL’s) que representan los objetos de lógica de negocioPermite vincularnos directamente con ellosCapacita para una rápida creación de la interfaz de usuario de los elementos que esos objetos representan

Page 74: Mc silverlight2 dia1

74

Page 75: Mc silverlight2 dia1

Silverlight 2.0 para desarrolladores(Fin del Día 1º)