Silverlight 2.0 para desarrolladores

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

3. Parte 3: Comunicaciones fuera de la SandBox

4. Modelo de acceso al DOM desde Silverlight

5. Accediendo al HTML DOM desde el c�digo manejado Acceso a HTML desde un nuevo namespace:

6. Accediendo al C�digo Manejado desde Scripts Se debe marcar la propiedad, el m�todo � el evento como Scriptable

7. HTML Integration Otros escenarios de interesantes de integraci�n con HTML Links persistentes Integraci�n �Forward/Back� Seriaci�n JSON Interacci�n HTML-Silverlight en los dos sentidos Creaci�n din�mica de elementos HTML

8. Integraci�n con HTML

9. OpenFile Dialog De momento es el �nico recurso de este tipo accesible desde una aplicaci�n Silverlight Permite abrir ficheros mediante una t�cnica que simula el acceso remoto permitido Puede desencadenar procesos de espera indeseables si no se manejan los eventos de la IU con cuidado.

10. OpenFile Dialog (1) Silverlight soporta la posibilidad de abrir un cuadro de di�logo para archivos locales Los desarrolladores pueden trabajar con el contenido de los archivos localmente, sin tener que subir primero todo el archivo al server

11. OpenFile Dialog (2) Recordemos: Silverlight no permite al desarrollador tener el control o acceder al archivo original en la maquina local. Silverlight no puede tener el acceso directo al archivo sin primero obtenerlo por medio del cuando de dialogo �Abrir Archivo� Vamos a ver una demo para demostrar un posible problema y su soluci�n

12. Open File Dialog-Uso est�ndar- Uso mediante el evento CompositionTarget.Rendering

13. Acceso a Datos (mediante Servicios Web)

14. 4 formas de acceso:ASMXWCFREstADO.NET Data Services

15. Servicios Web (ASMX) El generador de proxy de Visual Studio permite un acceso fuertemente tipado Servicios de ASMX (SOAP), WCF, y REst ADO.NET Data Services utiliza estos modelos

16. Servicios Web Siempre suponen una llamada as�ncrona

17. Trucos: carga din�mica de im�genes(aplicable a ficheros locales o a URI�s) Image image = new Image(); Uri uri = new Uri("images/myImage.png", UriKind.Relative); ImageSource img = new System.Windows.Media.Imaging.BitmapImage(uri); image.SetValue(Image.SourceProperty, img) Mostrar la imagen <Grid x:Name="MainGrid"> <Canvas x:Name="Map�/> </Grid> A�adir la imagen a la IU: Map.Children.Add(image); Otra opci�n consiste en declarar un elemento Image en el fichero XAML <Image Source="images/MyImage.png"></Image>

18. Servicios Web ASMX(basados en SOAP)

19. Servicios WCF Visual Studio dispone de una plantilla especial para la generaci�n de este tipo de servicios EL mecanismo similar al anterior, pero los aspectos particulares del �binding� pueden configurarse mejor, caso de ser necesario Una vez reconocida la existencia del servicio (sistema de descubrimiento de servicios de VS 2008), el proceso es casi id�ntico al ASMX Una de las razones para retocar el �binding� puede ser el rendimiento del servicio (cambiar� en cada caso)

20. Servicios WCF

21. Servicios REst No tienen estado ni contrato, por lo que (al menos de momento) no pueden ser descubiertos por el sistema anterior Presupone el conocimiento de su existencia y las API�s que pone a disposici�n del usuario Requiere de un fichero �CrossDomain.xml� en la ra�z del servicio donde se establezca el permiso de acceso Si el modelo es RSS nos valdremos de una clase de ayuda que formatee en lectura la informaci�n XML suministrada La clase es SyndicationFeed

22. Servicios Rest(sin contrato)

23. ADO.NET Data Services Propone un modelo similar a Entity Framework (basado en �l, en realidad) Se genera un modelo de datos en el servidor y �a partir de ah�- un conjunto de clases .NET que ofrecen funcionalidad CRUD sobre ese modelo El modelo es modificable por el usuario Sigue un patr�n de acceso parecido al de las declaraciones REst Sobre ese modelo, se crea un servicio WCF que expone la funcionalidad necesaria En el cliente Silverlight, se crea la referencia al servicio y sus m�todos expuestos para manejar los datos

24. ADO.NET Data Services

25. Parte 4: Buenas Pr�cticas, instalaci�n de aplicaciones, y trucos �tiles

26. Gesti�n de Estados Estados en aplicaciones RIA Cliente vs. Servidor Estados en Cliente: Usa el �isolated storage� para conseguir persistencia de estados durante las sesiones. Guarda en el cliente y sincroniza con el servidor en intervalos o al final de la sesi�n Guarda estados en el servidor solo cuando sea necesario y mejor en un �nico punto B.D.

27. Validaci�n Datos de entrada ActualmenteSilverlightno tieneun modelo�built-in? de validaci�n La validaci�n se debe de hacer en el c�digo cliente Silverlight o bi�n via servicios web en el servidor Gu�as: Identifica fronteras de seguridad en las diferentes capas, valida los datos que cruzan dichas fronteras En las validaciones del �lado cliente?, pon el c�digo de validaci�n de datos en rutinas separadas de la presentaci�n y de la l�gica de negocio Si es mucho c�digo -> carga as�ncronamente No hagas �eco? de datos de entrada en los que no se conf�a Valida en el servidor(Servicios-Web) los datos cr�ticos. Validaci�n cliente -> Para experiencia de usuario Validaci�n servidor -> Aspectos reales de seguridad

28. Cache Cache por defecto del Browser para componentes SL, im�genes y datos que no cambian durante la sesi�n Usa el �almac�n aislado? para guardar estados de aplicaci�n e informaci�n de configuraci�n que quieras persistir entre sesiones Comprueba la cuota del �almac�n aislado? antes de escribir informaci�n. Evitar errores Cuota == 1Mb inicial y 50Mb m�ximo. No guardes tipos de datos BLOB en el �almac�n aislado?

29. �Accesibilidad? Silverlight 2.0 ha mejorado mucho la accesibilidad Soporte completo al teclado Decorar elementos XAML de IU con info de Accesibilidad Soporte de accesibilidad a controles �custom? Soporte de accesibilidad a lectores(AT) Accesibilidad �exposici�n arbol? para UIA Nota �UIA solo Windows, MacOX no soporta plug-ins accesibles Cr�tico en UE: Portales Administraci�n P�blica (por Ley en Espa�a)

30. Comunicaciones en RIA (Capa Servicios) 2 � 3 tipos Servicios Web: ASMX, WCF-Basic y REST Binding SOAP WCF soportado: basicHttpBinding (SOAP 1.1 compatible) Recuerda aspectos de autorizaci�n cross-domain. Consumo de Servicios-Web desde SL 2.0 As�ncrono Evita consumir Servicios-Web s�ncronamente ->bloquea Si necesitas consumirWS s�ncronamente -> En otro Thread en background para no bloquear el browser Opciones para comunicaciones �Push Data� con el servidor: WCF FullDuplexService basado en basicHttpBinding Sockets (Mucho mas escalable que HTTP simulando FullDuplex) Para escalabilidad: Usar sockets en lugar de polling para hacer push de datos desde el servidor al cliente

31. Autenticaci�n y Autorizaci�n �Los clientes RIA pueden utilizar mecanismos de autenticaci�n y autorizaci�n similares a los clientes web est�ndar. �Tener en cuenta aspectos de autorizaci�n cross-domain con los ficheros crossdomain.xml � clientaccesspolicy.xml (pol�ticas de Silverlight) en el servidor web de servicios �Internet: Usar �Forms authentication? con el sistema ASP.NET Membership, y roles para Autorizaci�n. �Intranet: Usar autenticaci�nWindows y roles Windows para autorizaci�n. La autenticaci�n Windows no funciona autom�ticamente para usuarios no Windows (Apple MacOX, etc.) �Si se autentica contra servicios web (WCF p.e.), recuerda que Silverlight soporta solo basicHttpBinding(SOAP 1.1) �Para cifrado de la comunicaci�n -> SSL (HTTPS)

32. Cookies y Cross-Site Las Cookies en un mismo nivel de dominio miorg.com no puede acceder a las cookies foo.com� Mismo Dominio-> http://miorg.com es diferente de http://bar. miorg.com � http://www. miorg.com Mismo Protocolo -> http:// miorg.com es diferente de https:// miorg.com MismoPuerto-> http:// miorg.com es diferente de https://miorg.com:8080 foo.com tiene que estar �seguro? de los datos que guarda en sus cookies Prevenci�n contra Falsificaci�n �cross-site�

33. ClientAccessPolicy.xml <?xmlversion="1.0" encoding="utf-8"?> <access-policy> <cross-domain-access> <policy> <allow-from http-request-headers="*"> <domain uri="*"/> </allow-from> <grant-to> <resourcepath="/" includesubpaths="true"/> </grant-to> </policy> </cross-domain-access> </access-policy>

34. Trucos : Activar las �cookies� del navegador Se hace a trav�s del objeto HtmlPage.Document Utiliza el namespace System.Windows.Browser. Para establecer la �cookie� se llama a SetProperty() con una cadena en la forma �Key=Valor;expires=FechaExpiraci�n.� Ejemplo: private void SetCookie(string clave, string valor) { // Expira en 7 Dias DateTime expireDate = DateTime.Now + TimeSpan.FromDays(7);� string newCookie = clave+ "=" + valor + ";expires=" + expireDate.ToString("R"); HtmlPage.Document.SetProperty("cookie", newCookie); }

35. Trucos : Activar las �cookies� del navegador Para leer la cookie recorremos la propiedad HtmlPage.Document.Cookies. private string GetCookie(string key){ string[] cookies = HtmlPage.Document.Cookies.Split(';');� foreach (string cookie in cookies) { string [] keyValue = cookie.Split('='); if (keyValue.Length == 2) { if(keyValue[0].ToString() == key) return keyValue[1]; } } return null; }

36. Trucos: Centrar el control Silverlight en el navegador El control Silverlight va a una tabla con un sola celda o a un div. A�adimos un estilo a la tabla estableciendo los valores de margin-left y margin-right en auto. La altura y anchura del elemento <td> debe concordar con la del control Silverlight o el control no se mostrar�. Ejemplo: <body> <form id="form1" runat="server" style="height: 100%;">  <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table style="margin-left: auto; margin-right: auto;">  <tr>  <td style="width: 600px; height: 300px;">  <asp:Silverlight ID="Xaml1" PluginBackground="Transparent" runat="server" Source="~/ClientBin/SilverlightDev.xap" �������������������� MinimumVersion="2.0.30523" Width="100%" Height="100%" /> �������� </td> ������� </tr> �</table> </form> </body>

37. Trucos: Centrar el control Silverlight en el navegador Tambi�n podemos usar: <div style="width: 100%; margin: 0"> <div style="margin: auto; width: 600px; height: 300px"> <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightDev.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" /> </div> </div>

38. Trucos: escalado de elementos Demo On-line: http://silverlight.services.live.com/invoke/66033/Page%20Scaling/iframe.html A�adir un RenderTransform del tipo ScaleTransform al Grid o Canvas del control Silverlight <Canvas> <Canvas.RenderTransform> <ScaleTransform x:Name="CanvasScale" ScaleX=�1� ScaleY=�1� /> </Canvas.RenderTransform> </Canvas> Asignar ScaleX y ScaleY a �1� equivale a 100%. Establecer el valor de CanvasScale ScaleX y ScaleY a un porcentaje del navegador:

39. Trucos: escalado de elementos namespace ScaleTransform { public partial class Page : UserControl { private int _startingWidth = 800; private int _startingHeight = 600;� public Page() { InitializeComponent();� App.Current.Host.Content.Resized += new EventHandler(Content_Resized); } void Content_Resized(object sender, EventArgs e) { double height = App.Current.Host.Content.ActualHeight; double width = App.Current.Host.Content.ActualWidth;� CanvasScale.ScaleX = width / _startingWidth; CanvasScale.ScaleY = height / _startingHeight; } } } �

40. Trucos: lanzar una ventana �popup� Se soporta el m�todo HtmlPage.PopupWindow(). Por seguridad, solo funciona como respuesta a una entrada de usuario. Referencia a System.Windows.Browser; La llamada a HtmlPage.PopupWindow() admite 3 par�metros: Uri (http://www.silverlight.net). String � Nombre de la ventana HtmlPopupWindowOptions � Varias opciones como Posicion, Tama�o, menubar, etc private void Button_Click(object sender, RoutedEventArgs e) { HtmlPopupWindowOptions options = new HtmlPopupWindowOptions();� options.Left = 0; options.Top = 0; options.Width = 800; options.Height = 600;� if (true == HtmlPage.IsPopupWindowAllowed) HtmlPage.PopupWindow(new Uri("http://www.silverlight.net"), "new", options); } *Note: Safari no lo sporta por que no implementa correctamente el contrato NPAPI .

41. Mientras la URI sea la misma, el sistema usar� la imagen de la cach� Se pude soslayar este problema asignando la propiedad IgnoreImageCache a true. Ejemplo: Image img = new Image(); Uri uri = new Uri("http://YourServer.com/MyImage.png", UriKind.Absolute); BitmapImage bi = new System.Windows.Media.Imaging.BitmapImage(uri); bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache; img.Source = bi; LayoutRoot.Children.Add(img);

45. Como todos los modelos de Enterprise Services propuestos por �Patterns & Practices� no resulta trivial al inicio Requiere una curva de aprendizaje, pero minimiza los errores y facilita la depuraci�n y el mantenimiento de la aplicaci�n Implementa (o permite hacerlo), t�cnicas de IoC y Depedency Injection (D.I.) Algunas caracter�sticas recuerdan el modelo de �Programaci�n orientada a aspectos� (AOP), sobre todo en el tema de D.I. Disponible en www.codeplex.com

46. Empaquetado & Arquitectura Componente del navegador Descarga peque�a. Incluye video & audio Se instala a peticion.

47. Silverlight .NET Framework

48. Plataformas y fechas de disponibilidad Calendario de versiones (Roadmap) Silverlight 1 - September 2007 Silverlight 2 � Noviembre 2008 Moonlight (Linux/Unix) � Enero 2009 Silverlight Mobile � Mediados de 2009 Silverlight 3 � Finales de 2009

51. Usage Restrictions: PR Ready San Diego Zoo Usage Restrictions: PR Ready San Diego Zoo

52. Second largest travel company in Europe Fast Facts This leading international leisure travel group needed to create a community oriented travel experience VINGtm Results Travelers discuss travel plans with other passengers, and visualize vacation destinations on a world map. VINGtm is powered by Windows Live Messenger control, Spaces Photo, Microsoft Virtual Earth and Silverlight by Windows Live �The key benefit of using Live Services is a great reduction in development time, we can program with a modular approach, saving time and resources�. Johan H�gglund, Team Manager for web development Second largest travel company in Europe Fast Facts This leading international leisure travel group needed to create a community oriented travel experience VINGtm Results Travelers discuss travel plans with other passengers, and visualize vacation destinations on a world map. VINGtm is powered by Windows Live Messenger control, Spaces Photo, Microsoft Virtual Earth and Silverlight by Windows Live �The key benefit of using Live Services is a great reduction in development time, we can program with a modular approach, saving time and resources�. Johan H�gglund, Team Manager for web development

53. Usage Restrictions: PR Ready Usage Restrictions: PR Ready

56. Recursos en la Web Generales Principal: http://silverlight.net/GetStarted/� Primer vistazo: http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx Tutoriales: http://silverlight.net/learn/tutorials.aspx MSDN: http://msdn.microsoft.com/en-us/library/bb404700(VS.95).aspx� Arquitectura: http://msdn.microsoft.com/en-us/library/bb404700(VS.95).aspx Blogs sobre Silverlight (en ingl�s) Alvin Ashcraft: http://www.alvinashcraft.com/ Bill Reiss: http://www.bluerosegames.com/SilverlightBrassTacks/ Brad Adams: http://blogs.gotdotnet.com/BradA/ Dan Wahlin: http://weblogs.asp.net/dwahlin/default.aspx Dave Relyea - http://blogs.msdn.com/DevDave Delay: http://blogs.msdn.com/delay/ Einar Ingebrigtsen: http://www.ingebrigtsen.info Jeff Paries: http://designwithsilverlight.com/ Jessie Liberty: http://silverlight.net/blogs/jesseliberty/ Joe Stegman: http://blogs.msdn.com/jstegman/default.aspx

57. Recursos en la Web Blogs sobre Silverlight (en ingl�s. Continuaci�n) Karen Corby: http://scorbs.com/ Laurence Moroney: http://blogs.msdn.com/webnext/default.aspx Michael Palermo: http://weblogs.asp.net/palermo4/default.aspx Michael Sync: http://michaelsync.net/ Neo: http://www.silverlightexamples.net/ Nikhil Kothari: http://www.nikhilk.net Nikola: http://blogs.msdn.com/nikola/default.aspx� and http://www.nokola.com/ Peter Blois: http://www.blois.us/blog/ Pete Brown: http://community.irritatedvowel.com/blogs/pete_browns_blog/default.aspx Seema Ramchandani: http://blogs.msdn.com/seema� Scott Guthrie: http://weblogs.asp.net/scottgu/archive/tags/Silverlight/default.aspx Synergist: http://blogs.msdn.com/synergist/ SDK Team: http://blogs.msdn.com/silverlight_sdk/ The MossyBlog Times: http://blogs.msdn.com/msmossyblog/ Tim Sneath: http://blogs.msdn.com/tims/ Tim Heuer: http://timheuer.com/blog/ VectorForm: http://www.vectorform.com/silverlight/blog/ Web Services Team: http://blogs.msdn.com/silverlightws Wilco Bauwer: http://www.wilcob.com/Wilco/Silverlight.aspx

58. Recursos en la Web Otros sitios Silverlight (Enlaces diarios Silverlight, etc.) http://www.silverlightshow.net/ http://www.silverlightcream.com/ http://mgalinks.wordpress.com/ http://www.shinedraw.com/ http://flexria.wordpress.com/category/silverlight/ Otros aspectos de inter�s para Silverlight Motores 3D: Kit3d: http://www.codeplex.com/Kit3D Balder 3D Engine: http://www.codeplex.com/Balder (Blog: http://www.dolittle.com/blogs/einar)

59. Recursos en la Web Programaci�n de juegos:��������������������� Silverlight Games 101 by Bill Reiss Refactor by Joel Neubeck. Silverlight Game Programming Tutorial by Matthew Casperson 2D Game Development by Mike Gold. Andy Beaulieu Silverlight Games by Roger Guess Developer Fusion Env�o de contrase�as seguras http://dnnsilverlight.adefwebserver.com/Samples/SilverlightXAML/tabid/56/Default.aspx  Silverlight Nuggets: http://silverlightnuggets.com/ Sockets: http://www.flawlesscode.com/ Web Services: http://dnnsilverlight.adefwebserver.com/Silverlight20/SilverlightWebservice/tabid/66/Default.aspx

60. Recursos en la Web Tutoriales sobre Silverlight (en orden alfab�tico): Andy Beauliue http://www.andybeaulieu.com/Home/tabid/67/Default.aspx Brad Adams http://blogs.msdn.com/brada/default.aspx Chris Hay http://www.screencast.com/users/chrishayuk DotNet Curry http://www.dotnetcurry.com/ Jesse Liberty http://silverlight.net/blogs/jesseliberty/ Joe Stegman http://blogs.msdn.com/jstegman/default.aspx Nikola Mihaylov http://blogs.msdn.com/nikola/default.aspx Page Brooks http://pagebrooks.com/ Pete Brown http://community.irritatedvowel.com/blogs/pete_browns_blog/default.aspx Shawn Wildermuth http://wildermuth.com/ Silverlight Learning Resources http://silverlight.net/learn/ SilverlightShow http://www.silverlightshow.net/ Terence Tsang http://www.shinedraw.com/ Tim Heuer http://timheuer.com/blog/ Timmy Kokke http://geekswithblogs.net/tkokke/Default.aspx Y una p�gina sumario sobre blogs en Silverlight : http://www.netvibes.com/rboarman#Silverlight

61. Recursos http://msdn.microsoft.com http://www.silverlight.net http://www.elavefenix.net Demo �on-line� de tipo general: http://www.elavefenix.net/AESS/aessTestPage.html �Programaci�n en Silverlight 2.0�: primera obra sobre el tema publicada en castellano.