Neste artigo veremos
· Como criar uma interface utilizando o Blend;
· Utilizando novos componentes do Silverlight;
· Desenvolver integrando Blend e Visual Studio;
· Recursos Drag & Drop do Silverlight;
· Conversor de imagem no Silverlight;
· Integrando Silverlight com Linq to XML.
Qual a finalidade?
· A finalidade desse artigo é mostrar de forma bastante prática os principais fundamentos para a criação de Web Sites com Silverlight.
Quais situações utilizam esses recursos?
· Criação de interface rica e funcional utilizando o Silverlight.
Resumo do DevMan
A Microsoft tem investido muito em visual, ou seja, em interfaces mais atraentes. A grande prova disso é o próprio Windows Vista. Hoje, temos máquinas cada vez mais velozes e dotadas de hardware mais robusto, então por que não investir nisso e usufruir do melhor que o hardware tem a oferecer? Pois bem, com Silverlight temos condições de criar interfaces mais atraentes para nossos Web Sites.
Neste artigo veremos como criar uma interface rica de uma loja virtual, utilizando o Silverlight, Blend, Visual Studio, Framework 3.5 e Linq to XML.
Caso você ainda não conheça, o Silverlight é a nova tecnologia da Microsoft que permite criar conteúdos dinâmicos e interativos, similar ao Adobe Flash. O Expression Blend é a ferramenta oficial que apóia a criação de conteúdos Silverlight.
Com ele é possível inserir vídeo e criar conteúdo 3D com posição de câmera e luz. É possível também interagir com controles, programar eventos, e muito mais. Este software possui uma integração com o Visual Studio bem interessante. O designer, por exemplo, pode criar todo o layout no Blend, sem a necessidade de escrever códigos. O design é salvo em arquivos .XAML (eXtensible Application Markup Language), um arquivo texto com as marcações. O programador então pode interagir com os controles, sem precisar alterar a estrutura do layout, ou refazê-lo em HTML, por exemplo.
Caso seja necessário, é possível alterar programaticamente o XAML, dando assim uma liberdade para o programador que não gosta de ferramentas gráficas.
O Silverlight está evoluindo, e a Microsoft está lançando novas ferramentas, controles, funcionalidades que permitem desenvolver aplicações cada vez mais ricas. Neste artigo pretendo mostrar como criar uma aplicação em Silverlight com o Linq to XML, utilizando as ferramentas mais novas da Microsoft, como o Blend 2.5 preview e o Silverlight Tools Beta 2 para o Visual Studio 2008.
Como exemplo de desenvolvimento, vamos criar um sistema de carrinho de compras utilizando o Silverlight 2 e Linq to XML.
Nota DevMan
O XAML (pronuncia-se "zemel") é a nova linguagem de marcação usada para criar interfaces de usuário de forma simples e rápida. É equivalente, porém muito mais poderosa que sua "antecessora", o HTML.
O XAML não é uma linguagem em si. Ela é exatamente como o XML, que não contém nenhuma tag específica, mas apenas as regras para crias suas próprias tags. O XAML também é a forma de marcação para acessar o modelo de objetos do novo Windows Presentation Foundation e você pode ainda criar seus próprios objetos e acessá-los através do XAML.
Nota DevMan
O Windows Presentation Foundation (ou WPF), anteriormente sob o nome de código Avalon, é um subsistema gráfico .net Framework 3.0 (anteriormente chamada WinFX), e está diretamente relacionado ao XAML. WPF está incluído com o Windows Vista e Windows Server 2008, e também está disponível para Windows XP Service Pack 2 ou superior, e Windows Server 2003. Ele oferece um modelo de programação coerente para a construção de aplicações e fornece uma clara separação entre a interface do usuário e da lógica comercial (regras de negócios).
A WPF pode ser implantado na área de trabalho ou hospedado em um navegador Web. Por outro lado, permite controlar o desenvolvimento dos aspectos visuais de programas do Windows. Ela visa unificar uma série de serviços de aplicação: interface de usuário, desenho 2D e 3D, documentos, tipografia avançada, gráficos vetoriais, áudio e vídeo. Embora Windows Forms continuará a ser largamente utilizada, e a Microsoft criou apenas algumas aplicações WPF, a empresa promove WPF para a linha de aplicativos corporativos.
Instalando o Blend, Preview e o Tools Beta 2 para o Visual Studio 2008
Para desenvolver a aplicação utilizei o Visual Studio 2008 e o Blend 2.5 June preview. Para instalar o Blend 2.5, é preciso ter instalado o 2.0, e instalar o preview (Figura 1). É preciso também instalar o Silverlight Tools Beta 2 para o Visual Studio 2008 (Figuras 2 e 3). Todos os downloads necessários podem ser baixados pelo site http://silverlight.net/GetStarted/ . Basta efetuar o download, e seguir o processo de instalação de cada software. Note que alguns destes softwares são pagos, mas pode ser baixada a versão demonstração.
Figura 1. Instalando o Blend 2.5 June preview
.jpg)
Figura 2. Instalando o Silverlight Tools Beta 2 para o Visual Studio 2008
Figura 3. Silverlight Tools Beta 2 para o Visual Studio 2008
O Conceito
Na parte prática, quero mostrar como criar uma interface rica e funcional de loja virtual. Nossa loja virtual na verdade será uma banca de revistas. Como produto da loja virtual, vamos utilizar as revistas da DevMedia. Obviamente os produtos podem ser diversos, dependendo da necessidade e escopo da loja virtual. Vamos deixar o cadastro todo em um arquivo separado, para poder ser alterado facilmente caso necessário.
Ao acessar a aplicação, o usuário poderá visualizar todas as revistas que estão à venda, através de um botão de próximo e anterior. As informações destas revistas serão cadastradas em um arquivo XML, com as informações principais. Se quiser comprar a revista, o usuário poderá arrastá-la para o carrinho. Como um dos recursos a serem explorados do Silverlight, temos o de arrastar objetos.
Será feita uma marcação da área do carrinho, para que o sistema saiba se o usuário adicionou ao carrinho, ou apenas largou na tela fora do carrinho. Caso ele não tenha adicionado ao carrinho, a foto do produto volta à posição inicial. Caso ele tenha adicionado ao carrinho, uma instância do objeto revista é adicionada à coleção. Na Figura 4 temos uma visão de como queremos montar a loja virtual.
Figura 4. Loja virtual a ser criada
Visão geral do Blend
Após ter instalado todos os softwares necessários, como Blend + 2.5 Preview, Visual Studio 2008 e o SL tools, conforme explicado anteriormente, abra o Blend e crie um novo Silverlight 2 Application. Selecione o nome do projeto, pode ser, por exemplo, CarrinhoDeCompras. Selecione o local onde o projeto será salvo, e a linguagem de desenvolvimento. Este exemplo foi desenvolvido com VB.NET. Caso queira utilizar outras linguagens, como o C#, fique a vontade (Figura 5).
Figura 5. Crie um Silverlight 2 Application
A versão preview 2.5 do Blend disponibiliza novos controles, bem interessantes. Alguns deles serão utilizados no decorrer do projeto. Apesar deste artigo não ter como foco mostrar o funcionamento do Blend, quero passar alguns conceitos básicos caso ainda não tenha utilizado esta ferramenta.
O Blend vem com uma biblioteca de controles, conforme Figura 6. Para adicionar um controle basta clicar no ícone “>>”, chamado asset library. Após clicar, abrirá uma caixa com a opção de controles. Para adicionar um controle basta selecioná-lo e marcar no design onde ele será adicionado. Cada controle tem propriedades. A caixa de propriedades também está assinalada na Figura 6.
O Conceito é bem análogo ao funcionamento do Visual Studio embora tenha um apelo visual bem maior. Em linhas gerais o processo de criação da interface no Blend é bem simples, bastando adicionar um elemento no design e definir suas propriedades. O elemento pode ser um controle da biblioteca, caixa de texto, forma gráfica como linhas, retângulo, elipse, entre muito outros. Cada elemento possui suas propriedades padrão, que podem variar de acordo com o tipo. Todas as propriedades são apresentadas na caixa de propriedades quando o elemento é selecionado. Conforme eles são adicionados ao design, são apresentados em uma lista, conforme Figura 7. É possível alternar entre o modo design e o modo gráfico, para a edição diretamente no XAML.
Outro recurso bem interessante que deve ser explorado é a facilidade de integração do Blend com o Visual Studio, basta clicar com o botão direito em cima do projeto e selecionar a opção Edit em Visual Studio, conforme Figura 8. Caso haja uma alteração feita no projeto no Visual Studio ou Blend, ela será automaticamente refletida no outro software.
Se preferir, brinque um pouco com o Blend para se familiarizar. prepare-se para colocar a mão na massa!
Figura 6. Overview do Blend 2.5 Preview
Figura 7. Apresentação dos controles adicionados
Figura 8. Editando o mesmo projeto no Blend e no Visual Studio
