Pesquisar no Programero

quinta-feira, 26 de novembro de 2009

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:

New Project Dialog Box

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:

New Silverlight Application Dialog Box

É 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:

Silverlight project structure

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:

Running Silverlight application

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:









finished product animation









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 1Parte 2





Fonte



Method ~of ~failed

7 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Oi Du, como vc está?
    Tá sumido!
    Abri outro blog, estou postando devagar, acho que tá ficando bacana.
    Só passei pra dar um OOOOOiiiiiiii
    Valeu Du!
    Fuui

    ResponderExcluir
  4. ola tudo bem sou do blog
    http://explicacaodanet.blogspot.com/
    e queria fazer uma proposta gostaria de postar no meu blog
    seria uma forma de me ajudar e a divulgar mais o seu mande recado se interessar

    ResponderExcluir
  5. Feliz Natal e um ano novo ricamente abençocado por Deus são os votos do Blog Brasil Liberdade e Democracia.

    ResponderExcluir
  6. ola sou do blog
    http://explicacaodanet.blogspot.com/
    queria te convidar para virar autor do meu blog
    é uma forma de divulgar o seu blog tbm se interessa?

    ResponderExcluir
  7. feliz natal atrasado,e feliz ano novo ( já esta perto ne) enfim estou com um novo banner, se poder passar para pegar no meu blog, fico grato desde já)

    ResponderExcluir

Obrigado por Participar do programero, fique a vontade para agradecer, retificar, perguntar ou sugerir.