Capítulo
1
Silverlight
Arthur Rasera e Bianca Ortega Bertoni
Abstract
Silverlight is a plug-in (component that is added to the browser so that it gains new features) of Microsoft that allows you to create rich applications for the web and provides developers and designers facilities so they can work together. In this chapter will approach the version history and concepts of WPF (Windows Presentation Foundation), RIA (Rich Internet Application), XAML (Extensible Application Markup Language) and animations.
Resumo
Silverlight é um plug-in (componente que é adicionado ao navegador para que este ganhe novas funcionalidades) da Microsoft que permite a criação de aplicações ricas para a web e oferece aos desenvolvedores e designers facilidades para que eles possam trabalhar em conjunto. Neste capítulo será abordado o histórico de versões e os conceitos de WPF (Windows Presentation Fundation), RIA (Rich Internet Application), XAML (Extensible Application Markup Language) e animações.
1.1
- Introdução
O Silverlight (Microsoft), conhecido anteriormente como WPF/E, teve sua primeira versão 1.0 lançada em 2007 e atualmente está na versão 4.0.
O Microsoft Silverlight é um plug-in para diferentes navegadores e plataformas, ele oferece suporte para AJAX, Python, Ruby,Visual Basic e C#, além de integrar-se aos aplicativos Web já existentes. Ele tem por objetivo fornecer uma nova experiência
na web baseada nos conceitos de RIA (Rich Internet Application) e também concorrer com as tecnologias já existentes como Flash (Adobe) e Java (Sun).
Os recursos de áudio e vídeo são de alta qualidade e servem para todos os principais navegadores, como por exemplo, Firefox, Safari e Internet Explorer.
1.1.1 - Histórico entre versões
Versão Silverlight 1.0 foi lançada em setembro de 2007. E a versão 1.1, que era somente para desenvolvedores, foi renomeada pela Microsoft para 2.0.
Em setembro de 2008, a Microsoft lançou a versão 2.0 do Silverlight com várias novas características e correção de erros. Em julho 2009, Microsoft liberou a versão 3.0. Liberada em novembro de 2009, a versão beta do Silverlight 4.0 que está disponível para testes e oferece suporte ao Visual Studio 2010.
Pesquisas mundiais da Microsoft mostram que 400 milhões de consumidores instalaram o Silverlight desde a versão 2.0, em outubro de 2008, e que uma em cada três máquinas já conta com a tecnologia instalada. A Microsoft estima que entre 400 e 500 mil desenvolvedores e designers utilizam o Silverlight e que há quase 625 aplicações desenvolvidas em mais de 62 países. Silverlight 4.0, a mais nova versão encontra-se presente em 45% dos computadores conectados à Internet.
1.1.2 - WPF (Windows Presentation Fundation)
O Windows Presentation Foundation é um componente do Microsoft .NET Framework 3.0 em diante. Ele é dividido em duas partes: a da interface que é criado utilizando uma linguagem de marcação chamada XAML (Extensible Application Markup Language) e a lógica é implementada em linguagem de programação C#.
O WPF suporta interfaces de aplicação, gráficos 2D e 3D, documentos, aceleração de hardware, gráficos vetoriais e multimídia.
1.1.3 - Comparação: Silverlight e WPF
Provavelmente WPF e Silverlight serão uma única tecnologia. Mas enquanto isso não ocorre existem diferenças entre elas que precisam ser consideradas, como por exemplo: Silverlight não suporta desenvolver uma grande aplicação porém é o melhor para aplicações RIA multi-plataforma já o WPF não roda em multi-plataforma mas é a melhor opção para aplicações no Windows 7.
Nas versões mais recentes que são Silverlight 4 e WPF 4 é possível compartilhar as bibliotecas (DLLs) entre as duas tecnologias, tornando muito fácil de compartilhar funcionalidades.
RIA é a sigla em inglês para Rich Internet Applications, ou aplicações ricas para a internet.
Uma definição para RIA seria o fim do processo de clicar, esperar carregar uma página e então continuar, pois todas as soluções RIA envolvem um tempo de execução que executa na máquina do cliente e arquiteturalmente localiza-se entre o usuário e o servidor. Assim, o usuário tem a impressão de que o tempo de baixar um arquivo é menor, porém o tempo é o mesmo, a única diferença é que existe um pré-carregamento obtendo assim resposta imediata.
1.2
- Universo Silverlight
1.2.1
- Microsoft Expression Studio
Microsoft Expression Studio é uma suíte de aplicativos multimídia que possibilita a criação de ótimos projetos tanto para desktop quanto para web. Utilizando o Expression Studio e o Visual Studio, ambos da Microsoft, é possível tornar a colaboração entre designers e desenvolvedores mais eficaz.
Fazem parte da suite: o Expression Web (antigo Frontpage); o Expression Blend, ferramenta para criação e desenvolvimento de sites que se utiliza da tecnologia Silverlight; o Expression Design, programa que desenvolve as interfaces vetoriais e o Expression Encoder 3, aplicativo destinado à preparação de vídeos.
1.2.2
- Ambiente de Desenvolvimento
Ferramentas utilizadas para desenvolvimento de aplicações em Silverlight: • Visual Studio 2008 + Service Pack 1;
• Silverlight SDK (Software Development Kit- documentação); • Expression Blend 3 (designers – UI – user interface);
• Deep Zoom Composer;
• Silverlight Toolkit (biblioteca de rotinas- contém controles, componentes); • Silverlight 3 Tools for Visual Studio 2008 SP1.
1.2.3
- Moonlight
É uma implementação Open Source ( Código Aberto) do Silverlight para Linux – atualmente compatível com Silverlight 2.0 com algumas características do Silverlight 3.0, foi desenvolvido a princípio para Linux e outros sistemas compatíveis com Unix/X11.
O Moonlight é desenvolvido pelo projeto Mono que é patrocinado pela Novell e Microsoft através de um acordo de interoperabilidade entre as duas empresas, o que originou muitas críticas da comunidade Linux.
1.3
- Comparação entre Flash e Silverlight
Na comparação entres as principais tecnologias para Web, foi obtido o seguinte resultado:
Tabela 1.1 - Comparação entre as tecnologias Flash e Silverlight.
Analisando alguns itens da tabela acima temos que, o modelo de animação do Silverlight é considerado melhor e mais robusto que o do Flash e também na categoria Vídeo/Áudio também se mostrou superior. Por outro lado, o Flash possui melhor compatibilidade entre plataformas e maior suporte a formatos de imagens.
Como era de se esperar o Flash é melhor na maioria das categorias acima, mas o Silverlight se apresentou forte em outras e a decisão para optar entre uma ou outra, depende da necessidade do projeto e dos usuários finais.
1.4
- XAML (Extensible Application Markup Language)
XAML é uma linguagem baseada em XML criada pela Microsoft utilizada no desenvolvimento de interfaces com usuário em aplicações WPF e Silverlight e também para criar workflows em aplicações WF (Windows WorkFlow Foundation).
Dependendo de como for utilizada, a XAML poderá ser compilada ou interpretada. Integrar o código C# ou VB no XAML só funciona quando a XAML é
compilada, caso crie um arquivo “.xaml” ele será interpretado em tempo de execução sem envolver compilação.
1.4.1 - Painéis do XAML
Uma página XAML geralmente começa com um elemento de painel. O painel é um “recipiente” que armazena o conteúdo da página, posicionamento de controles e faz a renderização do conteúdo. Ao mostrar algo que utilize XAML, um painel sempre será envolvido, porém às vezes será implícito ou explícito. Um painel pode conter outros painéis, permitindo assim que cada região seja controlada por um painel específico. Existem seis tipos de classes de painéis:
• Canvas: posiciona cada elemento filho utilizando as coordenadas relativas à área de Canvas;
• DockPanel: coloca os filhos no canto superior, inferior, esquerda, direita ou centro do painel. Quando são colocados vários filhos em uma mesma área, um DockPanel organiza-os horizontalmente ou verticalmente dentro dessa mesma área;
• FlowPanel: organiza seus filhos de acordo com a área disponível, ou seja, ao reajustar o tamanho da janela, o FlowPanel reajusta o conteúdo de maneira apropriada;
• TextPanel: utilizado para processar várias linhas de texto em formato de texto múltiplos, quando é necessário um layout de texto complexo;
• GridPanel: é um elemento simples que organiza os elementos filhos em linhas e colunas formando uma grade (em inglês “grid”). É utilizado para criação para tabelas simples, para tabelas complexas deve-se utilizar o controle Table; • FixedPanel: posiciona os elementos filhos em uma página de layout fixo,
independente da resolução do dispositivo ou tamanho da janela os elementos sempre terão o mesmo posicionamento e paginação.
1.4.2 Exemplos de painéis do XAML
• Canvas
Figura 1.1 – Exemplo utilizando Canvas
Figura 1.2 – Exemplo utilizando DockPanel
• FlowPanel
Figura 1.3 – Exemplo de FlowPanel mostra que ao redimensionar a janela ele reorganiza os elementos do painel
• TextPanel
Figura 1.4 - Exemplo de TextPanel com várias fontes, colunas e formatação
Figura 1.5- Exemplo do GridPanel como uma calculadora • FixedPanel
Figura 1.6 – Exemplo do FixedPanel, mostra que ao redimensionar a janela os elementos do painel não são reorganizados
1.4.3 - Controles
XAML tem muitos controles conhecidos do Windows, como: buttons, check boxes, radio buttons, list boxes, combo boxes, menus, sliders, scroll bars e text boxes exemplificados na figura 1.7 abaixo:
1.5
Gráficos e Animações
XAML fornece suporte para desenho de formas, transformação de estado de um objeto e animação de objetos. Utilizam-se elementos de forma para desenhar, elementos de transformação para alterar propriedades de um objeto e elementos de animação para mudar a propriedade de um objeto ao longo do tempo.
1.5.1
Formas
XAML oferece um conjunto de formas que inclui Elipse, Retângulo, Polígono, Linha. É possível também preencher a forma com cor de fundo, aumentar a espessura do contorno e mudar de cor.
Figura 1.8 – Diferentes formas, cores e tamanho de espessura da borda da figura
1.5.2 Transformações
Os tipos de transformação são:
• Translação (Translate Transform): permite mudar a posição do objeto tanto
vertivalmente quanto horizontalmente;
• Rotação (Rotate Transform): permite rotacionar um objeto por um ângulo
especifico ao redor de um ponto central;
• Escala (Scale Transform): permite a transformação do tamanho do objeto. As
escalas X e Y aumentam/diminuem respectivamente, na horizontal e vertical; • Inclinação (Skew Transform): essa transformação permite inclinar o objeto
horizontalmente e verticalmente. É utilizada para criar efeitos 3D para um objeto.
Figura 1.9 – mostra os tipos de transformações
1.5.3 Animações
As pessoas associam animação com desenhos animados, estes são feitos um grande número de imagens que são apresentadas em uma sequência rápida, parecendo que é um movimento continuo. Em Silverlight, a implementação de uma animação é simples, é necessário apenas mudar a propriedade de um objeto gradualmente ao longo do tempo, de modo que temos a aparência de que o objeto está movimentando suavemente de um ponto para outro.
Figura 2.0 – Essa figura mostra que ao clicar no botão ele crescerá gradualmente até atingir um tamanho grande em forma de quadrado
1.6
Conclusões
Apesar de ser recente, apenas três anos de existência, a tecnologia Silverlight já se encontra na versão 4.0 e tem sido muito utilizada pelas pessoas. Ela oferece muitos
recursos para que desenvolvedores e designers possam criar aplicações web com interfaces ricas e atrativas para o usuário final, além de ser gratuito e rodar em diferentes navegadores.
O Silverlight também possui uma versatilidade muito grande na manipulação dos componentes e fácil apresentação de vídeo e som.
Referências
Lair, R., Beginning Silverlight 3, Apress, 2009.
Moroney,L.,Introducing Microsoft Silverlight 3, Microsoft Press,2009.
Machado, C. "Microsoft lança o Silverlight 1.0". Disponível em:
http://info.abril.com.br/aberto/infonews/092007/05092007-15.shl>. Acesso em: 7 Jan. 2010.
Site Microsoft, “Silverlight Developer Center”. Disponível em:
<http://msdn.microsoft.com/pt-br/silverlight/default.aspx >. Acesso em: 8 Jan. 2010.
Macoratti, J. C. "Contrasting Silverlight and WPF". Disponível em: <http://www.macoratti.net/09/10/net_svl1.htm>. Acesso em: 25 Jan. 2010.
Malheiros G. "Futuro e Convergência do WPF e Silverlight". Disponível em: <http://silverlightbrasil.ning.com/profiles/blogs/futuro-e-convergencia-do-wpf-e>. Acesso em: 25 Jan. 2010.
Sonnino B., Sonnino R., "Posicionamento de objetos em WPF". Disponível em:
<http://www.microsoft.com/brasil/msdn/Tecnologias/netframework/objetos.mspx>. Acesso em:
2 Fev. 2010.
“Microsoft Silverlight”. Disponível em: <http://www.silverlight.net/ >. Acesso em: 2 Fev. 2010.
