Iniciando com o Silverlight: Parte 1 – Ferramentas e o Hello World

 

Essa é a primeira parte de uma série de posts que pretendo publicar, elas foram inicialmente feitas por Tim Heuer do Method of failed. Irei traduzir seus artigos e tentarei simplificar ao máximo esse ótimo trabalho.

O sistema que será construido tem a finalidade de procurar mensagens do twitter por meio de termos digitados pelo usuário, mas antes vamos reforçar o que será necessário para darmos inicio ao desenvolvimento.

Ferramentas

Nem todas as ferramentas sugeridas são necessárias, algumas delas não são gratuitas mas acreditamos que elas sejam as melhores para o desenvolvimento.

Visual Studio 2008

Será necessário ter o Visual Studio atualizado com o spk1, para aqueles que ainda não o tem e que não pretendem comprar uma licenca ou baixar um piratão recomendamos a versão Express que é gratuita e serve perfeitamente bem.

Silverlight Tools for Visual Studio

O Silverlight Tools for Visual Studio é tudo o que precisamos para iniciar nosso desenvolvimento, os objetos, modelos e afins.

Expression Blend

O Expression Blend é uma ferramenta de desenvolvimento interativo. É um designer visual para XAML, a tecnologia subjacente para apresentação do Silverlight e Windows Presentation Foundation (WPF). Permite fácil manipulação de layout, animações, estilos e modelos. Esta ferramenta, entretanto, não está disponível a custo zero, pode ser adquirido como parte do Expression Studio. É possível baixar uma cópia de avaliação do Expression Blend 3 aqui para começar.

Silverlight Toolkit

O Silverlight Toolkit é um conjunto de controles adicionais que estão disponíveis fora do conjunto de controle do núcleo. Estes incluem controles gráficos, controles de tempo, acordeões e muito mais. O melhor de tudo, o código fonte para esses controles (assim como todos os controles centrais) estão incluídos para que você possa aprender e extendelos.

Entendendo o ambiente de desenvolvimento

Depois de instalar o Visual Studio e o Silverlight Tools você notará um novo agrupamento na caixa de diálogo Novo Projecto VS:

Você verá alguns dos novos modelos sob a categoria Silverlight  que inclui, pelo menos, Silverlight Application, Silverlight Class Library e Silverlight Navigation Application. Outros podem aparecer, tudo depende do que você tiver instalado.

Inicialmente iremos escolher o template Silverlight Navigation Application e o chamaremos de TwitterSearchMonitor.
A próxima janela perguntará se desejamos criar um projeto web:

É altamente recomendado criar um projeto web, já que no nosso caso estamos criando um projeto do zero, com isso evitaremos erros comuns de depuração.

A estrutura do projeto

Depois da aplicação criada termos a seguinte estrutura:

Isso mostra nossa aplicação web (que irá hospedar o aplicativo do Silverlight) com páginas de teste pré-criadas para a aplicação, e a aplicação Silverlight em si. Vamos nos concentrar primeiro no projeto do Silverlight.
Existem alguns arquivos-chave que devemos estar cientes, e que vamos explorar nesta série:

• App.xaml – este é o arquivo de recursos da aplicação. Se colocarmos recursos aqui (será explorado nos próximos artigos) ou eventos globais na inicialização, eles acontecerão aqui.  Esse arquivo é o ponto de entrada de nossa aplicação que diz ao Silverlight o que deve ser feito.
• MainPage.xaml – esta página faz parte do modelo que escolhemos.  Não tem que necessariamente possuir esse nome, mas é o default, ela representa a interface inicial de nossa aplicação.
• Assets/Views folders – Diretórios que contém arquivos, imagens, estilos e outras páginas de nossa aplicação.

Os arquivos XAML compões a interface do usuário. São apenas arquivos XML com linguagem de marcação e serão editados em breve.

Quando compilarmos a solução veremos na pasta ClientBin um novo arquivo com uma extensão XAP. Esta é a sua aplicação Silverlight compilado. É realmente um arquivo compactado (como um zip). Se renomearmos ele para . ZIP e abrirmos usando uma ferramenta de descompactação de arquivo poderemos ver o conteúdo.

O arquivo XAP é o que é entregue ao browser, o que é hospedado no servidor até ser entregue aos usuários.  Ele fica em uma página HTML padrão que hospeda a aplicação Silverlight usando a instanciação tag <object>. 

NOTA: O Silverlight é uma tecnologia de cliente e pode ser hospedado em qualquer servidor web. Pode ser qualquer tipo de servidor Web que seja capaz de entregar o arquivo XAP junto com o tipo correto de conteúdo MIME do servidor (application / x-Silverlight-app).

Páginas de teste são criadas no modelo padrão (ASP.NET e HTML), apenas uma delas é necessária, sendo assim podemos excluir a que desejarmos.

Adicionando UI para as páginas XAML

O modelo que escolhemos é uma aplicação de navegação, o que significa que tem algumas características de navegação incorporada. Esse é um recurso relativamente novo para o Silverlight e permite que tenhamos uma página "mestre". Se repararmos na pasta View, veremos About.xaml, ErrorWindow.xaml e Home.xaml. Por enquanto vamos nos concentrar em Home.xaml pois essa é a primeira página, a que é carregada.

Ao abrirmos a página Home veremos o código XAML definido com uma visão em Grid usando outros elementos de layout como o StackPanel e os TextBlocks.  Todos esses elementos fazem parte do que é oferecido pelo Silverlight. Ao executarmos a aplicação(F5 para rodar em modo debug – modificando o web.config para habilitar o debug) teremos apresentado em nosso browser o seguinte resultado:

Em Home.xaml,  depois do segundo TextBlock, adicione um Button ussando o seguinte código XAML:

   1: <Button Content="Click me" x:Name="MyButton" FontSize="18" Width="150" Height="45" />

Observe o atributo x: Name, ele é o identificador exclusivo para esse elemento e nos ajuda a referência-lo no código. Pense nisso como o atributo de identificação do controle. Agora vamos fazê-lo executar uma ação quando clicado. No XAML para o botão em si, podemos acrescentar um atributo Click e veremos o VS IntelliSense perguntando se queremos gerar um novo manipulador de eventos:

Podemos também conectar o manipulador de eventos no código diretamente e mantê-lo fora do nosso XAML usando este código na página Home.xaml.cs:

   1: public Home()

   2:  

   3:  

   4: {

   5:  

   6:  

   7:     InitializeComponent();

   8:  

   9:  

  10:     MyButton.Click += new RoutedEventHandler(MyButton_Click);

  11:  

  12:  

  13: }

Ambas as formas funcionam. Agora vamos finalizar nosso Hello World alterando o TextBlock HeaderText para “Hello World” quando clicarmos no botão criado:

   1: void MyButton_Click(object sender, RoutedEventArgs e)

   2:  

   3:  

   4: {

   5:  

   6:  

   7:     HeaderText.Text = "Hello World!";

   8:  

   9:  

  10: }

O resultado será esse:

Próximos passos

Nossa primeira aplicação nos deu uma idéia do significado de alguns novos elementos e também nos mostrou como pode ser relativamente simples desenvolver aplicações com o Silverlight.

Aguardem o próximos posts e fiquem a vontade para sugerir e comentar.

Só para finalizar vamos prestigiar esse ótimo trabalho de Tim Heuer, autor dessa série de artigos de introdução ao Silverlight.

Parte 1 – Parte 2

Fonte

Method ~of ~failed