Silverlight no MIC Summer 2011


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • RIA (pronounced Ree-a or R.I.A.) stands for Rich Internet Applications. RIA is more of a classification of applications and the definition of what constitutes a Rich Internet Application varies but typically includes an advanced graphics rendering engine for displaying high quality vector graphics and text, some sort of client side storage over and above standard browser cookies, and the ability to serve up high quality audio and video. Silverlight is Microsoft’s implementation of a RIA framework, some other well known entries in this space are Flash/Flex and JavaFX. The code name for Silverlight in development was WPF/e which stood for Windows Presentation Foundation everywhere and Silverlight is considered a subset of the capabilities available in WPF. Silverlight runs client side in the browser but lets you develop your application using your favorite .NET language like C# or VB.NET as well as dynamic languages like IronPython. You can develop Silverlight applications using Visual Studio or Visual Web Developer Express. Visual Web Developer Express is the free version of Visual Studio for building web applications. Another useful tool for Silverlight and WPF development is Microsoft Expression Blend. Expression Blend is targeted at graphics designers and provides them with the type of visual interface that they are used to. Visual Studio and Expression Blend can be used in conjunction easily since they use the same solution and project files allowing for tighter collaboration between developers and designers.For links to downloads of all of the prerequisites for doing Silverlight development you can visit the Get Started page at
  • In previous client side technologies like Windows Forms, you would lay out your visuals in the designer and then Visual Studio would generate the code to create these controls and position them properly. You were then told to leave those files alone. This model causes issues every time you want to add support for a new language or create other tools that can work against the same files. To get around these problems and more, Silverlight and WPF have borrowed from the Web style of development and have implemented XAML. XAML stands for eXtensible Application Markup Language and is XML based. One major benefit of XAML is that it lends itself very well to tools and Expression Blend as well as third party tools like Kaxaml by Robby Ingebretsen can work against the same files. You can also edit them by hand in a text editor, something you probably wouldn’t want to do with Windows Forms generated code.We have a sample of some XAML here, there is a Canvas panel with some Ellipses and a Path element and this will render the following visual:(Click to show resulting image)XAML also lends itself well to data binding by providing a simple syntax for describing what data is to be bound. Data binding is an essential concept to Silverlight and WPF and if you take nothing else away from this session I recommend that you get to know and understand how it works.One important key to maintainability of code is to write less code. Less code written means less code to maintain. XAML and data binding when used properly can tremendously reduce the amount of code you need to write and enforce the separation of responsibility between the different layers of your application.
  • If we have all of these visual elements declared in XAML, how can we access them from code to set properties and do other interaction? This is done through the x:Name attribute. For any element that has an x:Name attribute, a field is added to the class and code is added to the InitializeComponent method to associate the element with this field. This InitializeComponent method is called from the control’s constructor.So we still have a little generated code but it’s much less and it doesn’t prevent the XAML from being edited in Blend or by hand. If you rename or add a name to an element, the generated code will be updated at compile time.Another use for named elements is when using Storyboard animations. Storyboard animations allow you to modify a property value or values over a given period of time. Storyboards require elements to be named so that you can specify which element to perform the Storyboard on.
  • Silverlight no MIC Summer 2011

    1. 1. Silverlight <br />
    2. 2. Meus contatos<br />Email:<br />Msn:<br />Twitter:<br />Blog:<br />
    3. 3. Material de estudo<br />
    4. 4. Material de estudo<br /><br /><br /><br />
    5. 5. Introdução Silverlight<br />
    6. 6.
    7. 7.
    8. 8. O que é?<br />Microsoft Silverlight is a free, cross-browser, cross-platform plug-in that enables rich internet applications and rich media experiences on the Web and Desktop.<br />
    9. 9. O que é RIA?<br />São aplicações web que tem a maioria das características de uma aplicação desktop, mas que é entregue via browser, plug-in<br />
    10. 10. De um modo mais técnico…<br /><ul><li>Rich Internet Applications (RIA)
    11. 11. Vector graphics and animation
    12. 12. Client side storage
    13. 13. Video and audio playback</li></li></ul><li>O que faz?<br />Silverlight enables the rapid delivery of a new class of high-quality, safer and more scalable experiences, developed and designed using familiar tools.<br />
    14. 14. Microsoft .NET Application PlatformDeliver applications across the UX Continuum<br />Consistent Tools & Application Model<br />Design<br />Develop<br />Deploy<br />Browser<br />Client<br />User Experience Continuum<br />
    15. 15. Timeline do SilverlightEm números no Brasil<br />Lançamento do Silverlight em Set 2007<br />Silverlight 2 - Out 2008 <br />Silverlight 3 - Jul 2009<br />Silverlight 4 - Mar 2010<br />Em 3 anos!<br />54,30% da internet no BRA possuidispositivos com o Silverlight 4 instalado!<br />11,39% ainda no Silverlight 3<br />56,31% no Flash 10.1<br />fonte:, 14.09.2010<br />
    16. 16. O que preciso ter para começar a desenvolver com Silverlight 4?<br />Visual Studio 2010 <br />ouVisual Web Developer Express 2010<br />Silverlight 4 Tools for Visual Studio 2010<br />Expression Blend 4<br />Silverlight 4 toolkit<br />Todosestespassosestãoem<br /><br />
    17. 17. SilverlightDesenvolvimento e colaboração<br />Fonte: Rogério Cordeiro e Fernando Figuera<br />
    18. 18. SilverlightDesenvolvimento e colaboração<br />Fonte: Rogério Cordeiro e Fernando Figuera<br />
    19. 19. SilverlightDesenvolvimento e colaboração<br />Fonte: Rogério Cordeiro e Fernando Figuera<br />
    20. 20. SilverlightDesenvolvimento e colaboração<br />
    21. 21. SilverlightDesenvolvimento e colaboração<br />Fonte: Rogério Cordeiro e Fernando Figuera<br />
    22. 22. SilverlightDesenvolvimento e colaboração<br />Fonte: Rogério Cordeiro e Fernando Figuera<br />
    23. 23. SilverlightDesenvolvimento e colaboração<br />designers design<br />developers add business logic<br />Fonte: Rogério Cordeiro e Fernando Figuera<br />
    24. 24. SilverlightDesenvolvimento e colaboração<br />designers design<br />developers add business logic<br />Fonte: Rogério Cordeiro e Fernando Figuera<br />
    25. 25. A próxima grande onda<br />7<br /><ul><li>Silverlight nativo no Windows Phone 7
    26. 26. Criaçãorápida de aplicaçõesvisuaisfantásticas
    27. 27. Metro-themed UI controls
    28. 28. HTML/JavaScript
    29. 29. 500.000 developers Windows e Web
    30. 30. Desenvolvimentopara o MarketPlace</li></ul>Windows PhoneHardware<br />Elementos de Hardware<br />PlataformaConsistente<br />Focona<br />Qualidade<br />
    31. 31. Criando nosso primeiro projeto Silverlight<br />Olá Mundo, Apenas!<br />
    32. 32. Templates<br />
    33. 33. Configurações do Projeto<br />
    34. 34. Estrutura inicial<br />
    35. 35. Abrindo o projeto no Blend<br />
    36. 36. Conhecendo o Blend<br />Templates<br />StoryBoard<br />
    37. 37. XAML<br />
    38. 38. XAML (ExtensiveApplicationMarkupLanguage)<br />Linguagem de marcação para criação de interfaces introduzidas com o Windows Vista<br />
    39. 39. XAML<br />Similar to HTML in concept<br />Language independent<br />Strong support for data binding<br />Designer tool friendly<br /><Canvas Width="300" Height="300"<br />xmlns=""<br />xmlns:x=""><br /><Ellipse Canvas.Left="20" Canvas.Top="20"<br /> Height="200" Width="200"<br /> Stroke="Black" StrokeThickness="10" Fill="Yellow" /><br /> <Ellipse Canvas.Left="80" Canvas.Top="80"<br /> Height="35" Width="25" Stroke="Black" Fill="Black" /><br /> <Ellipse Canvas.Left="140" Canvas.Top="80"<br /> Height="35" Width="25" Stroke="Black" Fill="Black" /><br /> <Path Data="M 70, 150 A 60, 60 0 0 0 170, 150"<br /> Stroke="Black" StrokeThickness="15" <br />StrokeStartLineCap="Round" StrokeEndLineCap="Round" /><br /></Canvas><br />
    40. 40.
    41. 41. CodeBehind<br />
    42. 42. C# vs XAML<br />C# <br />Mais extenso<br />Mais complexo de ser entendido<br />Necessita de um desenvolvedor<br />Ambos<br />Precisam ser compilados<br />Case sensitive<br />
    43. 43. Criando elementos no XAML<br />
    44. 44. Naming XAML Elements<br />Uses the x:Name (or Name) syntax<br />Helps to access elements from code<br />Generates code in InitializeComponent() method<br /><Rectangle Canvas.Left="50" Canvas.Top="50" Fill="Yellow"<br /> Width="300" Height="200" Stroke="Black" StrokeThickness="10"<br /> x:Name="YellowRect" /><br />
    45. 45. Mão na massa<br />Conhecendo os controles na prática<br />Composição no XAML<br />Exemplo: Vídeo dentro de CheckBox<br />Integração com VS2010<br />
    46. 46. WCF RIA SERVICE<br />
    47. 47. WCF RIA Services<br />
    48. 48. WCF RIA Services Application<br />Silverlight Application<br />ASP.NET Application<br />Auto Generated<br />Proxies Classes<br /><ul><li>DomainContext
    49. 49. Model Classes</li></ul>Partial Classes <br />& Methods<br />LINQ Support<br />Views<br /><ul><li>User Controls</li></ul>Data<br />Access Layer<br /><ul><li>Entity Framework
    50. 50. Linq2Sql
    51. 51. ADO.NET
    52. 52. POCO</li></ul>Domain<br />Service<br /><ul><li>Get…
    53. 53. Insert…
    54. 54. Update…
    55. 55. Delete…</li></ul>Database<br />Metadata<br /><ul><li>Attributes</li></ul>Shared Code<br /><ul><li>Validators</li></ul>Shared Code<br /><ul><li>Validators</li></ul>ViewModel<br /><ul><li>State
    56. 56. Operations</li></li></ul><li>De um modo mais macro...<br />
    57. 57. Criando um projeto com WCF RIA Service<br />
    58. 58. Criação de um domínio do Serviço<br />
    59. 59. DomainService<br />Ele nada mais é do que um serviço WCF encapsulado, eliminando o contrato (que era exposto no WCF por meio de uma interface, e agora é gerado pelo DomainService, ficando invisível para o desenvolvedor)<br />Gera métodos CRUD básicos a partir das entidades, mas permite a customização completa destes métodos<br />Traz todo o poder do WCF, mas elimina as dificuldades<br />Elimina também a necessidade de criar um Service Host, pois já faz isso por default<br />A transmissão de mensagens do cliente para o servidor é feita por BinaryEncoding, o que aumenta a segurança e melhora a performance<br />
    60. 60. CRUD no Domain Service<br />
    61. 61. XXX.Medata.cs<br />
    62. 62. XXX.Medata.cs<br />Utilizar os Data Annotations para validar dados<br />[Required]<br />[RegularExpression("[A-Z][A-Za-z0-9]*")]<br />[StringLength(32)]<br />
    63. 63. Listar com paginação<br />
    64. 64. Detalhes do item escolhido<br />
    65. 65. Atualizar valores no banco<br />
    66. 66. Utilizando validadores e resumos<br />
    67. 67. Validator<br />
    68. 68. Attributes<br />Validation<br />CustomValidation<br />DataType<br />EnumDataType<br />Range<br />RegularExpression<br />Required<br />StringLength<br />Other <br />Exclude<br />Include<br />Composition<br />EnableClientAccess<br />POCO: Key, Association<br />Service<br />EnableClientAccess<br />Query <br />IsDefault<br />IsComposable<br />RequestLimit<br />OutputCache<br />Insert<br />Update<br />Delete<br />Invoke<br />RequiresAuthentication<br />RequiresRole<br />
    69. 69. Negator<br />
    70. 70. Filtrar informações<br />
    71. 71. Filtrar informações<br />
    72. 72. Filtrar informações<br />
    73. 73. Filtrar informações<br />
    74. 74. Executando Querys<br />O que é feito no Domain Service é replicado em um arquivo de saída do lado do cliente<br />
    75. 75. DomainContext context = new DomainContext();            var query = context.GetParadasQuery();            var operation = context.Load<Parada>(query);            operation.Completed += new EventHandler(operation_Completed);<br />void operation_Completed(object sender, EventArgs e)        {            var list = ((LoadOperation<Parada>)sender).<br />Entities.ToList<Parada>();              }<br />
    76. 76. Out of Browser<br />
    77. 77. Criando uma aplicação fora do browser<br />Rodando a aplicação fora do browser<br />Arquivo de configuração OutOfBrowserSettings.xml<br />
    78. 78. Controlando a experiência<br />App possui a propriedade InstallState<br />Installed<br />InstallFailed<br />Installing<br />NotInstalled<br />
    79. 79. Está rodando fora do browser<br />IsRunningOutOfBrowser<br />
    80. 80. Instalar aplicação no cliente <br />Método: Install();<br />
    81. 81. Permissão elevada para que?<br />Com com integração windows nativa<br />Chamar webservice sem restrições ou necessidade de arquivo de accesspolicy<br />Clipboard, WebCam e Microfone sem perguntar<br />Lendo e escrevendo em pastas do usuário<br />FullScreenmode, sem restrições de teclado e sem pressionar esc para sair<br />
    82. 82. Acessando Folders Especiais<br />var music = Directory.EnumerateFiles( Environment.GetFolderPath(Environment.SpecialFolder.MyMusic));<br />
    83. 83. Rodando em fullscreen<br />if (Application.Current.HasElevatedPermissions)<br />{<br />Application.Current.Host.Content.IsFullScreen= true;<br />}<br />
    84. 84. Utilizando IsolatedStorage<br />Sessão Cross Browser<br />Assim como Cookie, suporte até 4KB<br />Não é removido quando limpa histórico do browser<br />
    85. 85. Trabalhando com IsolatedStorage<br />IsolatedStorageFileisoFile= IsolatedStorageFile.GetUserStoreForApplication();<br />