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,273 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,273
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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

    ×