XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Construindo aplicaes ricas com Silverlight 4

Felipe Pocchini

twitter: felipepocchini e-mail: felipe.pocchini@gmail.com blog: www.felipepocchini.net

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Parte I Ol Silverlight!
Conceitos bsicos

Contedo
1. Instalando as ferramentas 2. Criando uma Aplicao Simples 3. Layout, Controles e Contedo de Vetor 4. Conectado a uma fonte de dados 5. Manipulao de Entrada e Eventos 6. Instalando a aplicao na mquina do cliente

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Instalando ferramentas
Antes de iniciar o desenvolvimento nossa primeira aplicao, devemos configurar o ambiente de desenvolvimento. Para esse laboratrio vamos utilizar Microsoft Visual Web Developer 2010 Express, o download pode ser feito gratuitamente no site www.microsoft.com/express/Web.

Microsoft Express: downloads das ferramentas gratuitas.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Para iniciar a instalao basta clicar em Install, ser feito ento o download do Web Platform Installer. Quando o download estiver concludo vamos iniciar a configurao das ferramentas que vamos utilizar. Selecione a aba Plataforma Web e confirme se as opes Banco de Dados e Ferramentas esto selecionadas.

As opes Banco de Dados e Ferramentas devem estar marcadas com cone Checked.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

No item Ferramentas, vamos selecionar os componentes que vamos instalar. Para isso clique em Customize. Na aba Ferramentas de desenvolvedor vamos marcar as seguintes opes:

Na aba Silverlight Tools vamos marcar as seguintes opes:

Nesse captulo vimos como fcil o download e a instalao das ferramentas de desenvolvimento. Com essas ferramentas possvel a criao de qualquer tipo de aplicao disponvel pela tecnologia Microsoft .NET, no s aplicaes Silverlight.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Criando uma aplicao simples

Nesse captulo vamos conhecer as tcnicas bsicas de programao necessrias em qualquer aplicao Silverlight: construo e depurao, trabalho com objetos de interface de usurio e manipulao de entrada. Com as ferramentas do Silverlight para Visual Studio devidamente instaladas, o Microsoft Visual Web Developer 2010 Express permite que voc construa e depure projetos do Silverlight. Os passos a seguir demonstraro esse processo e ilustraro alguns dos recursos dos projetos do Silverlight 4.

1. Execute o Visual Web Developer 2010 Express. 2. No menu File, selecione New Project...

3. Na rvore Project types esquerda, selecione Visual C# > Silverlight. Depois, na lista Templates direita, selecione Silverlight Application.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Para depurar e testar um projeto Silverlight, vamos precisar de um projeto do tipo Web Application na soluo. Isso ser separado do projeto do Silverlight propriamente dito. Os projetos Silverlight apenas constroem um pacote binrio conhecido como um arquivo XAP, isso significa que vamos trabalhar com pelo menos dois projetos. Para este laboratrio, vamos criar uma agenda de compromissos, ento coloque o nome do projeto de AgendaSilverlight e clique em OK. Um projeto Silverlight no pode ser executado isoladamente, ele deve sempre ser executado no contexto de uma pgina da Web, que onde o controle Silverlight propriamente dito incorporado. O assistente permite que voc escolha como isso deve acontecer.

Vamos manter as configuraes padro, apenas clique em OK. O Visual Studio vai criar os dois projetos, seu projeto Silverlight e um site para hosped-lo.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Estrutura da soluo criada pelo Visual Studio. Dois arquivos foram criados na Web Application para hospedar a aplicao Silveright. O primeiro um arquivo html chamado AgendaSilverlightTestPage.html, a pgina contm exatamente a configuraes da pgina AgendaSilverlightTestPage.aspx, porm essa a pgina padro para depurao. Foi adicionado no incio do arquivo AgendaSilverlightTestPage.aspx a referencia do arquivo Silverlight.js, esse Javascript da suporte ao funcionamento do Silverlight. Foi adicionada tambm uma funo que verifica se algum erro aconteceu durante a depurao.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

No corpo do arquivo AgendaSilverlightTestPage.aspx, foi adicionado o nosso controle Siliverlight atravs da tag object, como mostra a figura abaixo:

Dentro da tag object foi criado alguns parmetros importantes descritos abaixo: Source: o caminho completo de onde vai fica o cdigo XAP da nossa aplicao. onError: caso acontea algum erro durante a execuo a funo onSilverlightError executada exibindo a mensagem. minRuntimeVersion: verso do Silverlight em que a aplicao foi desenvolvida. autoUpgrade: caso exista uma atualizao para a aplicao, o download feito automaticamente. Nesse momento ainda no foi criado o arquivo XAP da nossa aplicao, ele criado no diretrio ClientBin da nossa Web Application no momento do build. Esse arquivo XAP na realidade um arquivo ZIP que contm apenas dois arquivos: uma DLL que contm todo o cdigo C# compilado de seu projeto Silverlight e um arquivo AppManifest.xaml que lista os contedos do ZIP e indica qual DLL contm o ponto de entrada. O arquivo DLL tambm contm a linguagem XAML que descreve a interface de usurio de sua aplicao. Vamos observar agora o projeto Silverlight, nele foram criados dois arquivos importantes, um deles o App.xaml que responsvel por armazenar informaes importantes da nossa aplicao.

Estrutura do arquivo App.xaml.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

O outro arquivo criado o MainPage.xaml, onde vamos montar nossa aplicao, nele que vamos aplicar os nossos controles.

Estrutura do arquivo MainPage.xaml. Note que no possvel visualizar o arquivo App.xaml em modo Design, j que sua funo apenas armazenar configuraes da aplicao. Com isso conclumos nesse captulo como fcil a criao de uma aplicao Silverlight, entendemos tambm sua arquitetura e como uma aplicao Silverlight hospedada dentro de uma pgina Web.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Layout, Controles e Contedo

At agora aprendemos a criar um projeto no Silverlight, entendemos como ele hospedado em uma pgina web e como ele cria os arquivos responsveis pelo seu funcionamento. Vamos agora comear a montar o layout da nossa aplicao, e para isso vamos conhecer alguns recursos existentes no Silverlight que podem facilitar nossa vida. Painis so elementos que podem conter mltiplos elementos filhos, e que determinam os tamanhos e as posies desses filhos. Canvas A opo mais simples projetar seu contedo no Silverlight com um tamanho fixo, posicionar elementos individuais com coordenadas (x,y) absolutas e organizar sua pgina da web para acomodar esse tamanho fixo. StackPanel O StackPanel organiza seus filhos em uma pilha vertical ou horizontal. Se voc estiver familiarizado com o StackPanel do WPF, o do Silverlight funciona da mesma forma. Os StackPanels podem conter uma ampla variedade de elementos filhos. Grid Grid o container de layout mais sofisticado e flexvel, permitindo que o contedo seja escalado conforme o redimensionamento do container pai. O painel Grid dimensiona e posiciona seus filhos gravando o espao em uma grade. Voc pode especificar o nmero de linhas e colunas de que precisa, usando o dimensionamento fixo, automtico ou proporcional. Por padro o Silverlight utiliza Grid para o layout, voc pode mudar isso se for necessrio, mas vamos utilizar o padro criado. Observando o que iremos criar:

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Esse Laboratrio focar os Controles, em sua maior parte os Controles de Layout, que sero usados para criar o layout principal. Alguns detalhes de implementao no vo ser estudados, dando foco apenas aos recursos disponibilizados pelo Silverlight. Examinando os controles utilizados no desenvolvimento da nossa aplicao: TextBlock: fornece um controle para a exibio de pequenas quantidades de contedo de texto. TextBox: fornece um controle de entrada de texto. DatePicker: usado para criar um visual que deixar o usurio escolher uma data e disparar um evento sobre a seleo da data. Button: so controles que executam alguma ao quando o usurio clica sobre eles. H uma srie de controles de Button: Button, HyperlinkButton, RepeatButton, ToggleButton, CheckBox, RadioButton. ListBox: nos permite criar listas de itens selecionveis. Elementos e Objetos XAML:

Cdigo responsvel por criar o layout da aplicao.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Alguns pontos importantes sobre o cdigo: StaticResource: apenas um recurso que est definido e no pode ser alterado, mas pode ser usada vrias vezes. Voc pode definir um estilo de fonte para utilizar em outros lugares dentro da aplicao. Esse estilo pode ser definido dentro do arquivo App.xaml, como mostra a figura abaixo:

Definindo o estilo para as fontes da aplicao. Binding: uma propriedade de vinculao de objetos .NET e outros componentes de interface do usurio via XAML. Conforme vimos nesse captulo, as interfaces de usurio no Silverlight so normalmente construdas com o uso do XAML. Cada elemento da interface de usurio criado com XAML tem um objeto .NET correspondente no Silverlight.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Conectando a uma fonte de dados

At agora nos preocupamos apenas com layout, vamos agora conectar nossa aplicao a um servio WCF que ser responsvel pela comunicao da aplicao com as camadas que se conectam com o banco de dados. Para adicionar a referencia do servio, clique com o boto direito na pasta References e logo depois clique em Add Service Reference...

Adicionando a referencia de um servio a nossa aplicao.

Uma janela ser aberta, nesse ponto que vamos informar o Address do servio que vamos utilizar. Depois de informar o Address clique em Go, se tudo deu certo at aqui, o servio ser carregado no painel Services, agora s definir um Namespace para referenciar o servio dentro da aplicao e clicar em OK.

Configurando o servio.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Dois arquivos foram adicionados ao projeto, eles so responsveis por guardar as configuraes do servio.

Arquivos responsveis pela configurao do servio. Com isso conclumos aqui, como simples a conexo de uma aplicao Silverlight a fontes de dados utilizando WCF Service.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Manipulao de Entrada e Eventos

Este captulo se concentra em alguns aspectos da manipulao de entrada. Comeamos analisando a manipulao bsica de eventos que iro ser disparados quando o usurio executar as funcionalidades em nossa aplicao. Vamos agora criar um evento novo para o controle Button, esse evento deve executar uma funo no momento que o usurio clicar no mesmo. Ento para criar um novo evento, vamos utilizar o IntelliSense do Visual Studio 2010. Tudo o que precisamos fazer adicionar um cdigo aplicao para cuidar do Click do Button. Posicione o cursor de texto aps o atributo de Valor Content, mas antes do elemento de fechamento do Button, digite Click=. Uma dica de ferramenta do IntelliSense vai aparecer, oferecendo a voc a oportunidade de criar um novo manipulador de eventos:

Criando um novo manipulador de evento. Agora abra o MainPage.xaml.cs no Solution Explorer (um filho do MainPage.xaml), e ver que um mtodo do manipulador de eventos foi adicionado ao cdigo.

Manipulador do evento Click do controle btnNovo. Repita o mesmo procedimento nos controles btnCadastrar, btnExcluir e btnCarregar.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Segue abaixo a implementao dos mtodos da nossa aplicao: Construtor do controle

Novo registro

Carregar lista de registros

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Salvar

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Excluir

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Carregar Registro

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Instalando a aplicao na mquina do cliente

Para conclumos nossa aplicao, vamos torna-la agora em uma aplicao desktop. Para isso, clique com o boto direito no projeto AgendaSilverlight > Properties localizado no SolutionExplorer.

Acessando as propriedades do projeto. Agora selecione a aba Silverlight caso no estiver selecionada por padro.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Localize o checkbox Enable running application out of browser e marque essa opo.

Observer que quando o checkbox for checkado, o boto abaixo ser habilitado. Clique em Out-of-Browser Settings... e configure a aplicao como mostra a figura abaixo:

Configuraes da aplicao para rodar fora do browser.

Vamos finalmente rodar nossa aplicao, e se tudo deu certo at aqui o browser ser aberto e nossa aplicao ser executada.

XXI JOIN 2010 - Construindo aplicaes ricas com Silverlight 4

Para instalar a aplicao na mquina, basta clicar com o boto direito em qualquer lugar da tela e selecionar a opo Instalar Agenda Silverlight neste computador...

Instalando aplicao na mquina do usurio. Agora s escolher onde sero criados os atalhos para acessar a aplicao.

Se tudo deu certo, a aplicao ser executada imediatamente.

Aplicao rodando fora do browser.

Com isso conclumos esse treinamento, onde criamos uma aplicao simples com Silverlight 4, consumindo dados atravs de um servio WCF.