Primeiros passos com Silverlight 4.0 - Artigo webMobile 35

O artigo trata de uma pequena introdução ao Silverlight, com pequenos exemplos para quem nunca teve contato direto com a nova tecnologia web da Microsoft. A idéia é a apresentar o visual, mostrar a sintaxe XAML, o databinding no silverlight, além de como trabalhar com tal tecnologia utilizando seus controles e recursos.

Atenção: esse artigo tem um vídeo complementar. Clique e assista!

Do que trata o artigo

O artigo trata de uma pequena introdução ao Silverlight, com pequenos exemplos para quem nunca teve contato direto com a nova tecnologia web da Microsoft. A idéia é a apresentar o visual, mostrar a sintaxe XAML, o databinding no silverlight, além de como trabalhar com tal tecnologia utilizando seus controles e recursos.

Para que serve

Silverlight é uma tecnologia que vem inovando na web, apresentando sites com efeitos visuais incríveis, lembrando até o Flash, da Adobe. Porém, o Silverlight possui os recursos da programação .net em seu background, ajudando em operações como acesso a banco de dados, por exemplo.

Em que situação o tema é útil

A era da internet com aplicações web e sites esta aí. Todos os programadores devem começar a se preocupar em se atualizar conceitualmente. O Silverlight é um grande ponto de partida para quem deseja partir para os lados da web, com inovações tanto programáticas, com o C#, como na parte visual com o Silverlight.

Primeiros passos com Silverlight 4.0

Não se aprende linguagens de programação simplesmente apenas lendo sua sintaxe. Se não existir a parte prática, de nada vale a teoria. Então, o objetivo do artigo é, além de apresentar um breve conteúdo teórico sobre silverlight, mostrar como esta nova tecnologia da Microsoft é de forma prática, mostrando seus controles e recursos. Para contextualizar a maioria dos controles, será criada uma página de perfil uma rede social, com foto, botões, lista de recados e etc.

O mundo da informática vem se modificando a cada dia. E a parte da programação não é diferente: as aplicações deixaram de ser apenas executadas apenas localmente e viraram aplicações web, com o asp.net, java, php, etc.

Grandes sites deixaram de apenas apresentar conteúdo: passaram a interagir com o usuário também. Uma grande ferramenta que faz isso é o Adobe Flash, que permite que o usuário interaja com o mundo da web de forma bem usual, como se fosse uma aplicação no seu próprio computador, além de deixar tudo menos mecânico dando vida aos objetos dentro do site.

Porém, o Flash foi se tornando muito pesado, pois não dá pra se manter um site somente feito em Flash, já que quanto mais conteúdo nessa tecnologia mais pesado o site fica. Existe também a dificuldade de interação com banco de dados.

O Silverlight veio pra resolver este problema: criação de sites profissionais, animados, bem diferente dos padrões, com linguagem em .NET que controla todo o contexto da aplicação ou site e animações feitas de forma simples com o XAML, um tipo de XML que se pode construir layouts. A grande jogada está na utilização de .net no carregamento de objetos de bancos de dados, ou aplicação de regras de negocio, sem contar a utilização do XAML, que é uma tecnologia que vem sendo utilizado no WPF e apresenta muita facilidade na construção de aplicações, lembrando até o velho HTML.

Definição de Silverlight

Não existe melhor definição do que é Silverlight do que a encontrada no site oficial da tecnologia: O Microsoft Silverlight é um plug-in para vários navegadores e várias plataformas, destinado a fornecer a próxima geração de experiências de mídia baseadas em .NET e aplicativos interativos e sofisticados para a Web. O Silverlight proporciona um modelo de programação flexível e consistente, com suporte para AJAX, Python, Ruby e linguagens .NET como Visual Basic e C#, além de integrar-se aos aplicativos Web já existentes. Entre os recursos de mídia do Silverlight, está a oferta rápida e econômica de áudio e vídeo de alta qualidade para todos os principais navegadores, inclusive Firefox, Safari e Internet Explorer, executados em Mac ou Windows. Com o uso do Expression Studio e do Visual Studio, a colaboração entre designers e desenvolvedores torna-se mais eficaz, aproveitando as habilidades que eles já possuem para dar origem à Web do futuro.

Atualmente na versão 4 o Silverlight passou por várias modificações, principalmente no que diz respeito ao seu background, na manipulação dos dados, na maneira de como são acessados esses dados, tornando cada vez mais fácil essa operação. Não é objetivo apresentar estes conceitos tão afundo, apenas a parte do DataBinding, que é essencial para manipulação dos dados.

Com o DataBinding é muito fácil ligar os dados com os objetos que modelam os conceitos. Isso se deve graças ao XAML. Existe DataBinding no Windows Forms, por exemplo, mas não é tão simples como na sintaxe de interface do Silverlight. Basta apenas apontar o nome da propriedade da fonte de dados e a aplicação já está realizando o databinding. Este assunto será tratado posteriormente mais afundo.

Para iniciar o Visual Studio suportar projetos do Silverlight, deve-se baixar o Silverlight Runtime e o Silverlight Tools, ambos os links referenciados no final do artigo.

Linguagem XAML

Os formulários em Silverlight são desenhados a partir de um XAML, abreviação para Extensible Application Markup Language e pronunciado como “zammel”. Embora o XAML seja uma tecnologia que pode ser aplicada a muitos problemas de domínios diferentes, o seu papel principal é construir interfaces de usuário com tecnologias como Silverlight e WPF. A Listagem 1 mostra o documento XAML de um formulário, com um label e um botão.

Listagem 1. Página em Silverlight

<UserControl x:Class="Aplicacao_Artigo.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White"> </Grid> </UserControl>

Em outras palavras, documentos XAML podem definir a disposição dos painéis, botões e controles que compõem as janelas em uma aplicação, como também podem definir estilos para os mesmos.

A sintaxe do XAML é exatamente igual a do XML comum. O que muda são as tags, que são específicas para a tecnologia. Grid, StackPanel, TextBox, TextBlock e Button são tags xaml muito utilizadas na construções de interfaces."

[...] continue lendo...

Artigos relacionados