Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introdução ao Silverlight 2.0  Ramon Durães MVP, Especialista em Visual Studio Team System http://www.ramonduraes.net Prep...
O que é o Silverlight ? <ul><li>Microsoft Silverlight é uma implementação cross browser, cross-platform do .NET  destinada...
? New Web()
Demo d= new Demo();  “ Video”, “Negócios”, “Games”,”ZOOM ;”
Rich Interactive Applications (RIA) <ul><li>Video </li></ul><ul><li>Aplicações de negócio </li></ul><ul><li>Publicidade </...
Instalando i= new Instalando() ; “ Plugin”; *Windows Update / Windows Live Tools*
Colaboração  Designer/Developer =
Colaboração Designer-Developer Designers-Interface com Usuário <ul><ul><li>Atravéz do XAML designers e desenvolvedores pod...
XAML (Extensive Application Markup Language) &quot; Z ammel”  <ul><li>Padrão baseado no XML. </li></ul><ul><li>Separação d...
XAML “ Z ammel”   < Canvas  Width=&quot;300&quot; Height=&quot;300&quot; xmlns=&quot;http://schemas.microsoft.com/client/2...
Colocando um ID nos objetos XAML   <ul><li>Atributo x:Name muito similar  ao identificador do ASP.NET </li></ul>< Rectangl...
Demo d= new Demo()  “ XAML” , “Hello World”
Controlando o Layout <ul><li>Definindo o posicionamento dos objetos </li></ul><ul><ul><li>Canvas  - Posicionamento absolut...
Canvas <Canvas Width=&quot;300&quot; Height=&quot;560&quot; xmlns=&quot;... xmlns:x=&quot;...&quot;> <Canvas Canvas.Left=&...
StackPanel <ul><li><StackPanel Orientation=&quot;Horizontal|Vertical&quot;> </li></ul><ul><li><Rectangle Width=&quot;100&q...
Suporte <ul><li>Shapes (Rectangle,Ellipse,Polygon,Line,PolyLine,Path) </li></ul><ul><li>Brush (LinearGradientBrush, Radial...
Silverlight é um “micro” .NET Framework
Silverlight e .NET: Juntos <ul><li>Alta produtividade no desenvolvimento </li></ul><ul><ul><li>Suporte a várias linguagens...
Ferramentas para usar com XAML <ul><li>BLEND </li></ul><ul><li>KAXAML </li></ul><ul><li>ECLIPSE </li></ul>
Core UI Capabilities <ul><li>Vector Based Graphics </li></ul><ul><ul><li>2D graphics </li></ul></ul><ul><ul><li>Primitives...
Access the HTML DOM from Managed Code <ul><li>HTML access available in new namespace  </li></ul>HtmlPage.Navigate(&quot; h...
Access Managed Code from JavaScript <ul><li>Mark a property, method or event as [Scriptable] </li></ul>WebApplication.Curr...
Mouse Events
InkPresenter <ul><li>Usando tinta para escrever </li></ul>
InkPresenter i= new  InkPresenter ()  “ Mouse””
Silverlight Toolkit <ul><li>Conjunto de novos controles disponíveis com código fonte para ampliar mais ainda o poder do Si...
Cartão de visita OBRIGADO!!!! Perguntas? Ramon Durães http://www.ramonduraes.net Aprenda mais em : http://www.desenvolvend...
Upcoming SlideShare
Loading in …5
×

Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009

1,378 views

Published on

Construindo aplicações com interfaces ricas para Web. Confira uma abordagem do Silverlight 2.0 apresentada no Campus Party 2009 por Ramon Durães. MVP e especialista em desenvolvimento de software. Autor de livros, treinamentos e publicações relacionadas.

Published in: Technology
  • Be the first to comment

Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009

  1. 1. Introdução ao Silverlight 2.0 Ramon Durães MVP, Especialista em Visual Studio Team System http://www.ramonduraes.net Preparando o ambiente: http://tinyurl.com/6v3f6b
  2. 2. O que é o Silverlight ? <ul><li>Microsoft Silverlight é uma implementação cross browser, cross-platform do .NET destinada a construção e distribuição da próxima geração de mídia e aplicações ricas para a Web. </li></ul>
  3. 3. ? New Web()
  4. 4. Demo d= new Demo(); “ Video”, “Negócios”, “Games”,”ZOOM ;”
  5. 5. Rich Interactive Applications (RIA) <ul><li>Video </li></ul><ul><li>Aplicações de negócio </li></ul><ul><li>Publicidade </li></ul><ul><li>Aplicações moveis </li></ul><ul><li>Games </li></ul><ul><li>Search engine optimization (SEO) </li></ul>
  6. 6. Instalando i= new Instalando() ; “ Plugin”; *Windows Update / Windows Live Tools*
  7. 7. Colaboração Designer/Developer =
  8. 8. Colaboração Designer-Developer Designers-Interface com Usuário <ul><ul><li>Atravéz do XAML designers e desenvolvedores podem ter extrema colaboração </li></ul></ul>Desenvovedor-Lógica de Negócios
  9. 9. XAML (Extensive Application Markup Language) &quot; Z ammel” <ul><li>Padrão baseado no XML. </li></ul><ul><li>Separação de código e conteúdo. </li></ul><ul><li>UI / DataBind / Event / Objects. </li></ul><ul><li>Storyboard, Rotations / Animations, Effects. </li></ul><Button Width=&quot;100&quot;> OK <Button.Background> LightBlue </Button.Background> </Button> XAML Button b1 = new Button(); b1.Content = &quot;OK&quot;; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; C# Dim b1 As New Button b1.Content = &quot;OK&quot; b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100 VB.NET
  10. 10. XAML “ Z ammel” < Canvas Width=&quot;300&quot; Height=&quot;300&quot; xmlns=&quot;http://schemas.microsoft.com/client/2007&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;> < Ellipse Canvas.Left=&quot;20&quot; Canvas.Top=&quot;20&quot; Height=&quot;200&quot; Width=&quot;200&quot; Stroke=&quot;Black&quot; StrokeThickness=&quot;10&quot; Fill=&quot;Yellow&quot; /> < Ellipse Canvas.Left=&quot;80&quot; Canvas.Top=&quot;80&quot; Height=&quot;35&quot; Width=&quot;25&quot; Stroke=&quot;Black&quot; Fill=&quot;Black&quot; /> < Ellipse Canvas.Left=&quot;140&quot; Canvas.Top=&quot;80&quot; Height=&quot;35&quot; Width=&quot;25&quot; Stroke=&quot;Black&quot; Fill=&quot;Black&quot; /> < Path Data=&quot;M 70, 150 A 60, 60 0 0 0 170, 150&quot; Stroke=&quot;Black&quot; StrokeThickness=&quot;15&quot; StrokeStartLineCap=&quot;Round&quot; StrokeEndLineCap=&quot;Round&quot; /> </ Canvas>
  11. 11. Colocando um ID nos objetos XAML <ul><li>Atributo x:Name muito similar ao identificador do ASP.NET </li></ul>< Rectangle Canvas.Left=&quot;50&quot; Canvas.Top=&quot;50&quot; Fill=&quot;Yellow“ Width=&quot;300&quot; Height=&quot;200&quot; Stroke=&quot;Black&quot; StrokeThickness=&quot;10&quot; x:Name=“ MeuRetangulo &quot; /> Esse objeto agora pode ser referenciando no código fonte (VB.NET / C#).
  12. 12. Demo d= new Demo() “ XAML” , “Hello World”
  13. 13. Controlando o Layout <ul><li>Definindo o posicionamento dos objetos </li></ul><ul><ul><li>Canvas - Posicionamento absoluto em uma linha / coluna(Canvas.Left and Canvas.Top) </li></ul></ul><ul><ul><li>StackPanel - Posicionamento em uma linha ou coluna(StackPanel.Orientation) </li></ul></ul><ul><ul><li>Grid – Posicionamento usando linhas e colunas. </li></ul></ul><ul><ul><li>GridSplitter – Permite o redimensionamento de linhas e colunas. </li></ul></ul>
  14. 14. Canvas <Canvas Width=&quot;300&quot; Height=&quot;560&quot; xmlns=&quot;... xmlns:x=&quot;...&quot;> <Canvas Canvas.Left=&quot;40&quot; Canvas.Top=&quot;40&quot; Width=&quot;220&quot; Height=&quot;220&quot;> <Ellipse Canvas.Left=&quot;40&quot; Canvas.Top=&quot;40&quot; Height=&quot;140&quot; Width=&quot;140&quot; /> </Canvas> <Canvas Canvas.Left=&quot;40&quot; Canvas.Top=&quot;300&quot; Width=&quot;220&quot; Height=&quot;220&quot;> <Ellipse Canvas.Left=&quot;40&quot; Canvas.Top=&quot;40&quot; Height=&quot;140&quot; Width=&quot;140&quot; /> </Canvas> </Canvas> (40,40) (0,0) (40,300) (80,80) (80,340)
  15. 15. StackPanel <ul><li><StackPanel Orientation=&quot;Horizontal|Vertical&quot;> </li></ul><ul><li><Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Red&quot; Margin=&quot;10&quot; /> </li></ul><ul><li><Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Green&quot; Margin=&quot;10&quot; /> </li></ul><ul><li><Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Blue&quot; Margin=&quot;10&quot; /> </li></ul><ul><li><Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Yellow&quot; Margin=&quot;10&quot; /> </li></ul><ul><li></StackPanel> </li></ul>Orientation=&quot;Horizontal&quot; Orientation=&quot;Vertical&quot;
  16. 16. Suporte <ul><li>Shapes (Rectangle,Ellipse,Polygon,Line,PolyLine,Path) </li></ul><ul><li>Brush (LinearGradientBrush, RadialGradientBrush) </li></ul><ul><li>Text </li></ul><ul><li>Fonts (Embarcadas juntos com o XAP) </li></ul><ul><li>Images (Stretch=None|Fill|Uniform|UniformToFill) </li></ul><ul><li>MediaElement (Audio / Video) </li></ul>
  17. 17. Silverlight é um “micro” .NET Framework
  18. 18. Silverlight e .NET: Juntos <ul><li>Alta produtividade no desenvolvimento </li></ul><ul><ul><li>Suporte a várias linguagens (C#; VB.NET …) </li></ul></ul><ul><ul><li>Language integrated Query (LINQ) </li></ul></ul><ul><ul><li>Integração com JavaSCript / HTML / DOM / AJAX / ASP.NET / JSON / WCF / Web Services / Asynchronous Support . </li></ul></ul><ul><li>Otimas ferramentas </li></ul><ul><ul><li>Visual Studio </li></ul></ul><ul><ul><li>Expression Studio </li></ul></ul><ul><li>Cross-platform & cross-browser plugin </li></ul><ul><ul><li>Funciona Chorme ,Safari, Firefox e Internet Explorer </li></ul></ul><ul><ul><li>Mac OS, Windows e Linux </li></ul></ul><ul><ul><li>Funciona em qualquer servidor Web </li></ul></ul><ul><ul><li>Instalação rápida e fácil do plugin </li></ul></ul><ul><li>Básico </li></ul><ul><ul><li>Qualquer editor de texto </li></ul></ul><ul><ul><li>Qualquer servidor Web </li></ul></ul>
  19. 19. Ferramentas para usar com XAML <ul><li>BLEND </li></ul><ul><li>KAXAML </li></ul><ul><li>ECLIPSE </li></ul>
  20. 20. Core UI Capabilities <ul><li>Vector Based Graphics </li></ul><ul><ul><li>2D graphics </li></ul></ul><ul><ul><li>Primitives (ellipse, rectangle, path etc) </li></ul></ul><ul><ul><li>Composition engine </li></ul></ul><ul><ul><li>Transforms </li></ul></ul><ul><ul><li>Brushes </li></ul></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Ink </li></ul></ul><ul><li>Animation system </li></ul><ul><li>Media </li></ul><ul><ul><li>Video </li></ul></ul><ul><ul><li>Audio </li></ul></ul>
  21. 21. Access the HTML DOM from Managed Code <ul><li>HTML access available in new namespace </li></ul>HtmlPage.Navigate(&quot; http://www.microsoft.com &quot;); String server = HtmlPage.DocumentUri.Host; using System.Windows.Browser; HtmlElement myButton = HtmlPage.Document.GetElementByID(&quot; myButtonID &quot;); myButton.AttachEvent(&quot; onclick &quot;, new EventHandler( this .myButtonClicked)); private void myButtonClicked( object sender, EventArgs e) { ... } Static HtmlPage class provides entry point Hookup events, call methods, or access properties
  22. 22. Access Managed Code from JavaScript <ul><li>Mark a property, method or event as [Scriptable] </li></ul>WebApplication.Current.RegisterScriptableObject (&quot; EntryPoint &quot;, this ); [Scriptable] public void Search( string Name) { ... } var control = document.getElementById(&quot; SilverlightControl &quot;); control.Content.EntryPoint.Search(input.value); Register a scriptable object Access the managed object from script
  23. 23. Mouse Events
  24. 24. InkPresenter <ul><li>Usando tinta para escrever </li></ul>
  25. 25. InkPresenter i= new InkPresenter () “ Mouse””
  26. 26. Silverlight Toolkit <ul><li>Conjunto de novos controles disponíveis com código fonte para ampliar mais ainda o poder do Silverlight </li></ul>Preparando o ambiente: http://tinyurl.com/6v3f6b
  27. 27. Cartão de visita OBRIGADO!!!! Perguntas? Ramon Durães http://www.ramonduraes.net Aprenda mais em : http://www.desenvolvendoparaweb.net Preparando o ambiente: http://tinyurl.com/6v3f6b

×