Académique Documents
Professionnel Documents
Culture Documents
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
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.
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.
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:
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
Novo registro
Salvar
Excluir
Carregar Registro
Acessando as propriedades do projeto. Agora selecione a aba Silverlight caso no estiver selecionada por padro.
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:
Vamos finalmente rodar nossa aplicao, e se tudo deu certo at aqui o browser ser aberto e nossa aplicao ser executada.
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.
Com isso conclumos esse treinamento, onde criamos uma aplicao simples com Silverlight 4, consumindo dados atravs de um servio WCF.