Your SlideShare is downloading. ×
  • Like
  • Save
Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,119 views
Published

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. …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,119
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. O que é o Silverlight ?
    • 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.
  • 3. ? New Web()
  • 4. Demo d= new Demo(); “ Video”, “Negócios”, “Games”,”ZOOM ;”
  • 5. Rich Interactive Applications (RIA)
    • Video
    • Aplicações de negócio
    • Publicidade
    • Aplicações moveis
    • Games
    • Search engine optimization (SEO)
  • 6. Instalando i= new Instalando() ; “ Plugin”; *Windows Update / Windows Live Tools*
  • 7. Colaboração Designer/Developer =
  • 8. Colaboração Designer-Developer Designers-Interface com Usuário
      • Atravéz do XAML designers e desenvolvedores podem ter extrema colaboração
    Desenvovedor-Lógica de Negócios
  • 9. XAML (Extensive Application Markup Language) " Z ammel”
    • Padrão baseado no XML.
    • Separação de código e conteúdo.
    • UI / DataBind / Event / Objects.
    • Storyboard, Rotations / Animations, Effects.
    <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. 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. Colocando um ID nos objetos XAML
    • Atributo x:Name muito similar ao identificador do ASP.NET
    < 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. Demo d= new Demo() “ XAML” , “Hello World”
  • 13. Controlando o Layout
    • Definindo o posicionamento dos objetos
      • Canvas - Posicionamento absoluto em uma linha / coluna(Canvas.Left and Canvas.Top)
      • StackPanel - Posicionamento em uma linha ou coluna(StackPanel.Orientation)
      • Grid – Posicionamento usando linhas e colunas.
      • GridSplitter – Permite o redimensionamento de linhas e colunas.
  • 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. StackPanel
    • <StackPanel Orientation=&quot;Horizontal|Vertical&quot;>
    • <Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Red&quot; Margin=&quot;10&quot; />
    • <Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Green&quot; Margin=&quot;10&quot; />
    • <Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Blue&quot; Margin=&quot;10&quot; />
    • <Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Yellow&quot; Margin=&quot;10&quot; />
    • </StackPanel>
    Orientation=&quot;Horizontal&quot; Orientation=&quot;Vertical&quot;
  • 16. Suporte
    • Shapes (Rectangle,Ellipse,Polygon,Line,PolyLine,Path)
    • Brush (LinearGradientBrush, RadialGradientBrush)
    • Text
    • Fonts (Embarcadas juntos com o XAP)
    • Images (Stretch=None|Fill|Uniform|UniformToFill)
    • MediaElement (Audio / Video)
  • 17. Silverlight é um “micro” .NET Framework
  • 18. Silverlight e .NET: Juntos
    • Alta produtividade no desenvolvimento
      • Suporte a várias linguagens (C#; VB.NET …)
      • Language integrated Query (LINQ)
      • Integração com JavaSCript / HTML / DOM / AJAX / ASP.NET / JSON / WCF / Web Services / Asynchronous Support .
    • Otimas ferramentas
      • Visual Studio
      • Expression Studio
    • Cross-platform & cross-browser plugin
      • Funciona Chorme ,Safari, Firefox e Internet Explorer
      • Mac OS, Windows e Linux
      • Funciona em qualquer servidor Web
      • Instalação rápida e fácil do plugin
    • Básico
      • Qualquer editor de texto
      • Qualquer servidor Web
  • 19. Ferramentas para usar com XAML
    • BLEND
    • KAXAML
    • ECLIPSE
  • 20. Core UI Capabilities
    • Vector Based Graphics
      • 2D graphics
      • Primitives (ellipse, rectangle, path etc)
      • Composition engine
      • Transforms
      • Brushes
      • Text
      • Ink
    • Animation system
    • Media
      • Video
      • Audio
  • 21. Access the HTML DOM from Managed Code
    • HTML access available in new namespace
    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. Access Managed Code from JavaScript
    • Mark a property, method or event as [Scriptable]
    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. Mouse Events
  • 24. InkPresenter
    • Usando tinta para escrever
  • 25. InkPresenter i= new InkPresenter () “ Mouse””
  • 26. Silverlight Toolkit
    • Conjunto de novos controles disponíveis com código fonte para ampliar mais ainda o poder do Silverlight
    Preparando o ambiente: http://tinyurl.com/6v3f6b
  • 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