CENTRO UNIVERSITRIO DE MARING CURSO DE PS-GRADUAO EM DESENVOLVIMENTO ORIENTADO A OBJETOS - JAVA

RICARDO DE ALMEIDA ROCHA

SILVERLIGHT E JAVAFX: COMPARAO DE FRAMEWORKS PARA DESENVOLVIMENTO DE APLICAES RICAS PARA A INTERNET

MARING 2010

RICARDO DE ALMEIDA ROCHA

SILVERLIGHT E JAVAFX: COMPARAO DE FRAMEWORKS PARA DESENVOLVIMENTO DE APLICAES RICAS PARA A INTERNET

Monografia apresentada ao Centro Universitrio de Maring, como requisito parcial obteno do ttulo de Especialista em Desenvolvimento Orientado a Objetos JAVA. Orientao: Prof. Msc. Munif Gebara Junior.

MARING 2010

RICARDO DE ALMEIDA ROCHA

SILVERLIGHT E JAVAFX: COMPARAO DE FRAMEWORKS PARA DESENVOLVIMENTO DE APLICAES RICAS PARA A INTERNET

Monografia apresentada ao Centro Universitrio de Maring, como requisito parcial obteno do ttulo de Especialista em Desenvolvimento Orientado a Objetos JAVA. Orientao: Prof. Msc. Munif Gebara Junior.

BANCA EXAMINADORA

Orientador:

___________________________________ Msc, Munif Gebara Junior CESUMAR

Membro:

___________________________________ Msc, Cesar Fernando Moro CESUMAR

DEDICATRIA

Aos meus pais, Wilmar de Almeida Rocha e Marilei Rosa Almeida Rocha, por todo apoio a mim concedido, por todas as oportunidades e chances, e pelos pais amorosos, carinhosos e incentivadores que sempre foram.

AGRADECIMENTOS

Agradeo primeiramente a DEUS, pela ddiva da vida, famlia, amigos e tudo o que h de bom na vida. Aos meus pais Wilmar de Almeida Rocha e Marilei Rosa Almeida Rocha, que por mais chatos que fossem pegando sempre no p para estudar, me deram a oportunidade, e fizeram tantas coisas boas por mim, mandando sempre aproveitar o tempo. A toda minha famlia (irm, cunhado, avs, avs (mesmo no presente me apoiaram), tias,...), que sempre me apoiou e soube entender os momentos de ausncia, e pelo carinho e incentivo. Ao meu orientador, Munif Gebara Junior, que me instruiu, corrigindo erros, e lendo esse trabalho em fim de semana. Agradeo a ele por toda sua pacincia, dedicao, conselhos e conhecimentos compartilhados. Aos companheiros da Repblica H-Romeu: Rafael Poch (Poch, Z Magrelo, Buneko do Posto), Raphael Giglio (Raphinha, Teto), Rodrigo Giglio (Roy, Popeye, Enorme, Mamute), que proporcionaram timos dias morando junto. A todos os amigos de Maring (Os Bobos): Diego (Diego), Gabriel Silva (Tio Xico), Joo Paulo (Jota P), Luiz Gustavo (Gila), Murilo (Murilo), Paulo Melo (Farofa), Rafael Canali (Tubana), Tiago Oliveira (Tiaguinho, Pekeno), que sempre faziam bobeiras pra gente dar risadas e tomar umas!

RESUMO

Aplicaes Ricas para a Internet (RIA) so sistemas desenvolvidos para funcionar em ambiente Web para substituir as tradicionais aplicaes estticas. Essas aplicaes ricas, conhecidas tambm por Web 2.0, tornam os sistemas mais dinmicos, fornecendo vrios recursos para o usurio. Silverlight, JavaFX, Flex, Adobe AIR, entre outros so frameworks que foram criados para apoiar o desenvolvimento dessas aplicaes ricas, tornando os sistemas para a Web mais difundidos e com caractersticas semelhantes s aplicaes Desktop. Este trabalho apresenta as principais caractersticas dos frameworks Silverlight e JavaFX encontradas na literatura, tendo como exemplo a camada de apresentao de uma aplicao CRUD.

Palavras-chave: Aplicaes ricas para a Internet, Silverlight, JavaFX.

ABSTRACT

Rich Internet Applications are softwares developed for working in Web environment to substitute the traditional static applications. These rich applications, known also by Web 2.0, make the web softwares more dynamic, suplying several resources to the final user. Silverligh, JavaFX, Flex, Adobe AIR and other, are frameworks built to support the development of rich applications, making the application dissaminated and with characteristics similar to Desktop applications.This paper presents the main features of Silverlight and JavaFX frameworks, having a presentation layer of a CRUD application as example.

Keywords: RIA, Rich Internet Applications, Silverlight, JavaFX.

LISTA DE FIGURAS

Figura 2.1 Traduzido de Murugesan - Processo de desenvolvimento Web Figura 2.2 Traduzido de DUHL - Definio da RIA Figura 2.3 Arquitetura tpica de uma aplicao RIA Figura 3.1 Adapatado de MSDN Arquitetura Silverlight Figura 3.2 Boto em XAML (MICROSOFT, 2010) Figura 3.3 Sintaxe de atributos Figura 3.4 Sintaxe de elementos de propriedade Figura 3.5 Elemento raiz e namespaces Figura 3.6 Evento do boto em XAML Figura 3.7 Evento do boto em C# Figura 4.1 Adaptado de ANDERSON - Arquitetura JavaFX Figura 4.2 Diferentes estilos no Stage Figura 4.3 - Hierarquia de objetos da classe Node (ANDERSON, 2009) Figura 4.4 Java API dentro do JavaFX (SUN, 2010) Figura 4.5 Variveis em JavaFX (SUN, 2010) Figura 4.6 Evento de mouse (SUN, 2010) Figura 5.1 MainPage.xaml Figura 5.2 App.xaml com recursos estticos Figura 5.3 Cadastro de Consumidor Figura 5.4 Cadastro Principal XAML Figura 5.5 Cadastro Principal CS Figura 5.6 Formulrio de insero/edio Figura 5.7 Contedo principal do Stage e Scene Figura 5.8 Evento do boto fechar Figura 5.9 Cadastro de Consumidor

19 24 27 33 34 35 35 36 37 38 42 44 45 47 47 48 50 51 52 53 54 55 56 57 58

LISTA DE TABELAS Tabela 1.1 Traduzido de Murugesan - Categorias de aplicaes Web 16 Tabela 2.1 Traduzido de Bozzon - Comparao entre Desktop, aplicaes Web convencionais e Aplicaes Ricas para a Internet 26 Tabela 6.1 Funcionalidades das IDEs 60

Lista de Abreviaturas e Siglas

AAC API BCL CASE CLR CRUD CSS DLR DRM HTML IDE JRE JSON JVM LINQ POX RIA SDK SOAP SVG XAML XML WCF WPF WWW

Advanced Audio Codec Application Programming Interface Base Class Library Computer-Aided Software Engineering Common Language Runtime Create Retrieve Update Delete Cascading Style Sheets Dynamic Language Runtime Digital Rights Management Hyper Text Markup Language Integrated Development Environment Java Runtime Environment JavaScript Object Notation Java Virtual Machine Language-Integrated Query Plain Old XML Rich Internet Application Software Development Kit Simple Object Access Protocol Scalable Vector Graphics eXtensible Application Markup Language eXtensible Markup Language Windows Communication Foundation Windows Presentation Foundation World Wide Web

SUMRIO

INTRODUO ...................................................................................................................................... 12 1.1 1.2 1.3 OBJETIVOS ........................................................................................................................................13 METODOLOGIA ..................................................................................................................................13 ESTRUTURA DO TRABALHO ...............................................................................................................13 DESENVOLVIMENTO WEB .................................................................................................................15 PRTICAS DE DESENVOLVIMENTO WEB ............................................................................................16 CARACTERSTICAS DE DESENVOLVIMENTO WEB ..............................................................................17 ENGENHARIA WEB ............................................................................................................................18 PROCESSO DE DESENVOLVIMENTO WEB ...........................................................................................19 DESAFIOS DO PROJETO DE SISTEMAS WEB ........................................................................................20 APLICAES WEB TRADICIONAIS .....................................................................................................21 APLICAES RICAS DE INTERNET (RIA) ...........................................................................................22

REVISO DA LITERATURA.............................................................................................................. 15 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8

MICROSOFT SILVERLIGHT............................................................................................................. 28 3.1 VISO GERAL ....................................................................................................................................28 3.2 ARQUITETURA ...................................................................................................................................30 3.3 LINGUAGEM ......................................................................................................................................33 3.3.1 XAML........................................................................................................................................33 3.3.2 Propriedades ............................................................................................................................34
3.3.2.1 3.3.2.2 Sintaxe de Atributos ............................................................................................................................ 34 Sintaxe de Elementos de Propriedade.................................................................................................. 35

3.3.3 Elementos Raiz e Namespace ...................................................................................................36 3.3.4 Eventos e Classes Code-Behind................................................................................................37 3.4 VERSES DO SILVERLIGHT ................................................................................................................38 4 JAVAFX .................................................................................................................................................. 40 4.1 VISO GERAL ....................................................................................................................................40 4.2 ARQUITETURA ...................................................................................................................................41 4.3 LINGUAGEM ......................................................................................................................................43 4.3.1 Containers ................................................................................................................................43
4.3.1.1 4.3.1.2 4.3.1.3 Stage .................................................................................................................................................... 43 Scene ................................................................................................................................................... 44 Nodes................................................................................................................................................... 45

4.3.2 4.3.3 4.3.4 5 5.1 5.2 5.3 6 6.1

Invocando Java API..................................................................................................................46 Eventos em JavaFX ..................................................................................................................47 Verses do JavaFX ...................................................................................................................48

ESTUDO DE CASO ............................................................................................................................... 49 VISO GERAL ....................................................................................................................................49 SILVERLIGHT .....................................................................................................................................50 JAVAFX ............................................................................................................................................55 TRABALHO FUTUROS ........................................................................................................................61

CONCLUSO ........................................................................................................................................ 59

REFERNCIAS ............................................................................................................................................. 62

12

1 INTRODUO

Nos meados dos anos 90s houve um grande crescimento na Internet ocasionando uma adoo muito difundida de um novo modelo de aplicaes utilizando computadores pessoais conectados a Internet. Com objetivos de aumentar os tipos de aplicaes e exibir aplicaes tanto para usurios finais como para empresas, esse modelo era baseado em clientes leves, mas com poderosos servidores de aplicao. Esse modelo era baseado em HTML (Hyper Text Markup Language), sendo consumido em navegadores Web, que exibiam as pginas disponibilizadas pelos servidores de aplicao. Mesmo com o sucesso desse modelo, ele era limitado. Sofria com significantes obstculos e limitaes, provendo interfaces no-ricas e com falta de sofisticao. Como o modelo que era utilizado estava sofrendo grandes baixas, e com falta de contedo ricos, foram investidos recursos, tanto financeiros quanto de mo de obra especializada, para um maior desenvolvimento na tecnologia da Internet. Foram criados modelos mais ricos que combinavam o poder de mdias provenientes de desktops com a riqueza de contedo das aplicaes Web. O novo modelo foi chamado de RIA (Rich Internet Application Aplicaes para Internet Ricas), provendo aplicaes mais dinmicas com interfaces amigveis e contedos sofisticados. Esse trabalho mostra as principais funcionalidades de duas tecnologias voltadas para desenvolvimento de aplicaes Web ricas: Microsoft Silverlight e JavaFX.

13

1.1

OBJETIVOS Este trabalho tem como objetivo estudar as principais funcionalidades de

duas tecnologias que esto sendo difundidas pela necessidade de aplicaes Web ricas, que sejam comparveis ao poder das aplicaes desktops.

1.2

METODOLOGIA Para o desenvolvimento de forma satisfatria desse trabalho, necessitou-se

dividi-lo em algumas etapas. Para o estudo da linguagem Microsoft Silverlight utilizaram-se os conceitos contidos em: CODEPLEX, DAYLEY, MSDN, MICROSOFT. O entendimento sobre JavaFX baseou-se em estudos realizados por ANDERSON, JAVAFX, SUN API. Aps estudo das linguagens de programao, realizou-se uma

implementao de um sistema bsico de cadastros para demonstrar a parte visual e componentes existentes em ambas as linguagens utilizadas.

1.3

ESTRUTURA DO TRABALHO O seguinte trabalho organizado em cinco captulos, que so apresentados

a seguir: No primeiro captulo trata-se da Introduo. No segundo captulo apresenta-se o referencial terico sobre as aplicaes Web e seu crescimento at serem apresentadas as aplicaes ricas. No terceiro captulo introduzida a definio com exemplos e requisitos bsicos do Microsoft Silverlight.

14

No quarto captulo introduzida a definio com exemplos e requisitos bsicos do JavaFX.

No quinto captulo constitudo do Estudo de Caso, com as aplicaes construdas utilizando as linguagens Microsoft Silverlight e JavaFX.

No sexto captulo so delineadas algumas concluses a respeito do desenvolvimento de aplicaes com ambas as tecnologias abordadas nesse trabalho.

15

2 REVISO DA LITERATURA

Com estudo nos materiais de referncias, apresenta-se o desenvolvimento de aplicaes para a Web. Na Seo 2.1 tem-se o conceito sobre aplicaes para Web. Nas Sees 2.2 e 2.3 so, respectivamente, apresentados problemas e desafios que esto presentes no desenvolvimento de software. A Seo 2.4 abrange Desenvolvimento Distribudo de Software, e na Seo 2.5 feita uma introduo sobre ambientes de desenvolvimento de software. 2.1 DESENVOLVIMENTO WEB

O crescimento de Intranets, Extranets e da World Wide Web (WWW) teve um significante impacto nos setores financeiros, comerciais, industriais, bancrios, educacionais, governamentais, de entretenimento, e tambm influenciando nossa vida pessoal e profissional. Muitos sistemas de dados e de informaes legadas esto sendo migrados para a Internet e ambiente Web, ocasionando o aparecimento de vrias aplicaes complexas e distribudas por causa suas caractersticas de prover uma representao de informao que apia a ligao de vrios tipos de contedos, acesso fcil para usurios finais e uma criao rpida de contedos utilizando vrias ferramentas disponibilizadas para esse fim (MURUGESAN). Muitos desenvolvedores Web pensam que aplicaes Web apenas criao de paginas utilizando HTML (Hyper Text Markup Language) ou aplicativos, tais como Front Page e DreamWeaver, aplicando algumas imagens e documentos. Existem mais artifcios para uma aplicao Web do que apenas design visual e interfaces usuais. Envolve planejamento, arquitetura e padro de sistemas, testes, garantia de qualidade, medidas de desempenho, e atualizaes e manutenes contnuas com o crescimento e necessidade do sistema (MURUGESAN). O escopo e complexidade das aplicaes Web variam largamente, desde pequena escala at aplicaes empresariais distribudas pela Internet. Essas

16

aplicaes abrangem grande funcionalidade e possuem diferentes caractersticas. A tabela 1 uma forma de categorizao das aplicaes Web, sendo que no existe uma forma especifica para categorizar essas aplicaes.
Tabela 1.1 Traduzido de Murugesan - Categorias de aplicaes Web

Categoria / Funcionalidade Informaes Interativos Transacionais Orientados a Fluxo de Trabalho Comunicao Online

Exemplos Jornais online, catlogos de produtos, classificados, livros Jogos online, formulrios de registros Compras online, bancos, reserva de passagens areas Calendrios e agendas online Grupos de discusso, redes de relacionamento

Em geral, o desenvolvimento de sistemas Web possui uma falta de rigor, abordagem sistemtica, e controle de qualidade e garantia. Com o crescimento de sofisticao e complexidade de aplicaes Web, existe uma maior preocupao sobre a maneira com que esses sistemas esto sendo desenvolvidos, e com sua qualidade e integridade em longo prazo. 2.2 PRTICAS DE DESENVOLVIMENTO WEB O histrico de desenvolvimento Web bem menor quando comparado com desenvolvimento de softwares em geral, mas nos ltimos anos muitas aplicaes Web cresceram e so utilizadas amplamente. A complexidade dessas aplicaes cresceu juntamente com o nmero de aplicaes existentes na Internet. Evoluindo de mecanismos de disseminao da informao para transaes online, sistemas de agendamento, sites multi-idiomas dinmicos, Web Services, e aplicaes para aplicativos mveis (MURUGESAN).

17

Muitos atributos de qualidade de sistemas Web tais como usabilidade, navegao, acessibilidade, escalabilidade, manutenibilidade, compatibilidade e segurana no so freqentemente abordados no desenvolvimento, o que mostra uma falta de prtica de programao, que pode acarretar prejuzos futuros. A maioria dos sistemas tambm tem falta de testes especficos e documentao. A falta de prticas de programao padres, que existem em aplicaes de desktops, acarretam em uma diminuio de desempenho e/ou aumentar os erros, condenando a aplicao. 2.3 CARACTERSTICAS DE DESENVOLVIMENTO WEB importante salientar que o desenvolvimento de aplicaes Web possui caractersticas prprias, que diferem do desenvolvimento de sistemas normais. As principais caractersticas de desenvolvimento Web esto relacionadas abaixo (MURUGESAN): Constante evoluo: Em muitos casos, no incio do projeto praticamente impossvel mensurar o que o site realmente conter, pois sua estrutura e funcionalidade evoluem durante o tempo, principalmente aps estar em uso. No somente as caractersticas de Web iro mudar, mas tambm suas informaes. O gerenciamento de mudanas de uma aplicao Web requer muito mais esforo do que comparvel a um software tradicional. Muitos usurios: As aplicaes Web tm a tendncia a serem utilizadas por uma comunidade de usurios muito maior, e principalmente por usurios annimos, o que faz com que a interface com usurio e usabilidade satisfaa a necessidade desses milhes de usurios desconhecidos, que no passaro por treinamentos para utilizao da aplicao. Interfaces bonitas: Geralmente as aplicaes Web so baseadas em interfaces (look and feel), o que favorece a criatividade visual e incorporao de artifcios multimdia, deixando a aplicao mais rica.

18

Rpidas

mudanas

tecnolgicas:

Constantes

avanos

em

tecnologias e padres Web tm seus desafios, adaptar as aplicaes para as novas tecnologias, contornando os problemas que elas podem oferecer, como erros em verses nova de mark-up languages, ferramentas de desenvolvimento e tecnologia instvel. Essas caractersticas nicas da Web e das aplicaes Web fazem com que ela seja diferente e mais desafiadora que o desenvolvimento tradicional de software. 2.4 ENGENHARIA WEB Com a falta de disciplina e padres de desenvolvimento, problemas no desenvolvimento, distribuio e manuteno podem surgir, aumentando o custo da aplicao. Com sistemas Web com baixa qualidade, segurana e com alto custo, a confiana no modelo Web pode diminuir irreparavelmente. Para evitar que a perda de confiana, podendo gerar uma crise na Web, ocorra, mtodos de desenvolvimento, gerncia de princpios e abordagens sistemticas esto sendo aplicadas pela engenharia Web (Web Engineering). Engenharia Web uma forma de desenvolvimento e organizao de conhecimento sobre desenvolvimento de aplicaes Web, e aplicar esse conhecimento para desenvolver aplicaes Web. tambm uma forma de gerenciar a complexidade e diversidade das aplicaes Web (MURUGESAN). Essa engenharia para sistemas Web abrange os tradicionais e bemsucedidos princpios e praticas de engenharia de software, mas adaptando-os para serem flexveis natureza da Web. A engenharia Web tem crescido e ganhado interesse entre stakeholders de sistemas Web, incluindo desenvolvedores, clientes, agencias governamentais, usurios finais, entre outros, desde a sua ascenso como disciplina em 1998 (MURUGESAN).

19

2.5

PROCESSO DE DESENVOLVIMENTO WEB Um processo de desenvolvimento Web traa os vrios passos e atividades

de desenvolvimento de sistemas Web, definindo claramente o conjunto de atividades que os desenvolvedores podem utilizar, e deve ser mensurvel. As aplicaes Web possuem caractersticas que dificultam seu

desenvolvimento e estimativas de tempo de desenho e desenvolvimento, como sua complexidade e maleabilidade. Murugesan e Ginige recomendam um processo evolucionrio para desenvolvimento Web, mostrado na figura 2.1. Esse processo auxilia os desenvolvedores a entenderem o contexto na qual a aplicao ser utilizada, facilita a comunicao entre vrios membros envolvidos no processo e ajuda a gerenciar a complexidade do processo.

Figura 2.1 Traduzido de Murugesan - Processo de desenvolvimento Web

O processo de desenvolvimento comea com a anlise de contexto, onde os objetivos e requerimentos principais do projeto so entendidos e analisados

20

juntamente com a necessidade dos usurios e da organizao que usar o projeto. Nessa parte sero estudados quais os motivos que a aplicao est sendo construda e as implicaes da introduo de um novo sistema na organizao. Na fase de desenho da arquitetura do sistema so decididos os componentes que estaro no projeto e como sero interligados. Os pontos principais desse desenho so: Como a rede se comportar para sustentar a aplicao e sua comunicao entre os vrios servidores (apresentao, servidores de dados e aplicao); Arquitetura de software identificando os mdulos de softwares e de dados necessrios para realizar a implementao do projeto; O objetivo da gerncia de projetos garantir que todos os passos e atividades chaves que compe o desenvolvimento de um sistema Web sejam executados em harmonia e com sucesso. Uma das maiores causas de projetos mal-sucedidos uma gerncia falha.

2.6

DESAFIOS DO PROJETO DE SISTEMAS WEB Satisfazer as expectativas e as necessidades de diversos tipos de usurios

no uma tarefa fcil. O esperado uma aplicao Web rpida, com uma interface amigvel e bonita, e confivel. Quando os usurios entram em um site bagunado, confuso, ou com muitas informaes de uma forma no organizada, o site no possuir bons comentrios a respeito, deixando vrios usurios frustrados. Os fatores de usabilidade que impactam em um usurio Web com experincia so: layout da pgina, consistncia do design, acessibilidade, contedo, navegao, desempenho, segurana e padres de desenho (formatao, conveno de nomenclaturas, entre outros) (BECKER, 2002).

21

Design e infra-estrutura fracos so pontos que fazem com que a aplicao Web no consiga suportar a demanda de visitas, causando a runa da aplicao. Muitos sites tm sofrido panes, diminuio do desempenho e falhas na segurana, sofrendo pssima repercusso, perda permanente de consumidores e processos judicirios (MURUGESAN). Algumas dos pontos que pesam no momento de construir uma aplicao Web estvel e confivel so: Escalabilidade: referente ao crescimento da aplicao. Com o grande crescimento, a aplicao deve estar apta a receber maior demanda, trfego garantindo a segurana e confiabilidade. Usabilidade: referente ao design de interface, navegao. O sistema deve ter uma interface amigvel, que no confunda o usurio. Desempenho: o sistema deve ter um desempenho considervel, sem demorar a responder as requisies do usurio. Segurana e integridade: um dos pontos mais importantes, pois o sistema deve manter os dados ntegros e seguros, sem permitir o acesso de fontes externas a esses dados.

2.7

APLICAES WEB TRADICIONAIS A Internet como sendo uma plataforma para desenvolvimento emergiu

rapidamente de um lugar obscuro para uma posio dominante que serve como base para muitas aplicaes fortes tanto empresariais como no-empresariais (DUHL, 2003). Durante uma fase de crescimento de tecnologias, mudanas foram adicionadas para torn-la mais poderosa, dinmica e integradas com outras aplicaes.

22

Mesmo com esses avanos tecnolgicos as aplicaes tradicionais enfrentavam o grande desafio de no representar visualmente as complexidades necessrias do dia-a-dia. Algumas dessas complexidades so citadas abaixo: Complexidade de configurao: Sites tradicionais tm a

desvantagem de no ser possvel apresentar aos usurios uma visualizao mais rica de dados alm de somente figuras ou textos pr-definidos. Produtos customizados, como por exemplo, sites de revendedoras de carros, que necessitam de um vasto nmeros de combinaes oferecendo um leque de opes para o usurio customizar o produto. Complexidade de feedback: pginas tradicionais construdas em HTML possuem grande dificuldade de realizar vrios feedbacks, como em jogos, que necessitam de trocas de cenrios e movimentaes de personagens rpidas. So necessrias aplicaes do lado do cliente inteligentes e que possam responder determinados comando do usurio sem realizar atualizao completa da pgina, ou comunicao freqente com o servidor.

2.8

APLICAES RICAS DE INTERNET (RIA) As aplicaes baseadas em cdigos HTML eram bastante utilizadas por

causa de seu baixo custo de desenvolvimento, arquitetura simples, e HTML trivial, sendo fcil de aprender e utilizar. Contudo, mesmo com essa facilidade de desenvolvimento, algumas aplicaes no ficavam bem encaixadas e desenhadas com HTML, sendo que aplicaes complexas necessitavam redesenhar suas pginas vrias vezes para completar o requisito necessrio (OROURKE, 2004). Com a evoluo do desenvolvimento de aplicaes, a Web se tornou uma referncia no desenvolvimento de softwares abrangendo diferentes ramos de negcio. Com esse crescimento, a complexidade das aplicaes aumento, chegando ao limite de interatividade e usabilidade das interfaces at ento.

23

Para suprir esses problemas e necessidades, foi proposta uma abordagem de aplicaes com mais funcionalidades e complexidades, chamada de Aplicaes de Internet Ricas (RIA Rich Internet Application), termo introduzido pela Macromedia em um paper escrito por Jeremy Allaire em 2002, fazendo meno unifcao de aplicaes desktops com aplicaes Web (BOZZON, 2006). Essas aplicaes provm interfaces sofisticadas para representar processos e dados complexos, minimizando a transferncia de dados pesados e transferindo as camadas de apresentao e interao do lado do servidor para o lado do cliente (BOZZON, 2006). Duhl apresenta alguns pontos em que as aplicaes Web ricas devem ser capaz de realizarem para suprimir as complexidades de aplicaes Web tradicionais: Possuir um cliente que pode fazer utilizao da conexo em qualquer momento, e que seja portvel para qualquer aplicao. Tenha um poder de execuo que no comprometa seu

funcionamento em conexes lentas e rpidas. Utilizar componentes de udio, vdeo e texto simultaneamente sem emendas. Acessar diversas camadas de negcio (como .NET e Java) e armazenamento de dados. A figura 2.2 (DUHL, 2003) exemplifica uma RIA, como sendo uma combinao das melhores funcionalidades de um software desktop, de uma aplicao Web e interatividade, como recursos multimdia (comunicaes). O desktop contribuiria com as interfaces grficas interativas com o usurio, respostas mais rpida das interfaces sem recarregamento da pgina e comportamentos como drag-and-drop (arrastar-soltar). A parte originada das aplicaes Web inclui funcionamento sem depender de plataformas, apenas de um nico cliente (navegador), a possvel utilizao de download progressivo para transferncia de dados, e o padro adotado na Internet.

24

Figura 2.2 Traduzido de DUHL - Definio da RIA

No surgimento da RIA, havia poucos frameworks, metodologias e ferramentas CASE. No passar do tempo, as RIAs firmaram-se com metodologias de desenvolvimento e vrios frameworks como JavaFX, Flex, SilverLight, OpenLaszlo, Adobe AIR, entre outros. A tabela 2.1 apresentada por Bozzon mostra uma comparao de funcionalidades entre aplicaes desktop tradicionais, aplicaes Web convencionais (HTML + HTTP), identificada por apenas Web na tabela, e o potencial das aplicaes Web RIA. Nessa tabela observado que as aplicaes ricas possuem uma combinao das melhores funcionalidades entre as aplicaes desktop e Web tradicionais. Por exemplo, as aplicaes ricas possuem cliente universal, caracterstica presente nas aplicaes Web, combinado com funcionalidades offline e possibilidade de visualizao sem recarregar a interface inteira, presente nas aplicaes desktop. Essas funcionalidades apresentadas em uma aplicao ricas so relevantes para uma grande gama de tarefas, como organizao de dados, artifcios visuais mais complexos, entre outros.

25

As aplicaes RIA utilizam mecanismos de renderizao no lado cliente muito robustos, que podem apresentar interfaces densas, responsivas, e graficamente muito ricas. Elas oferecem tambm uma grande variedade de componentes de controle como sliders, date pickers, tabs, spinners, entre outros. Um grande ponto de desempenho da RIA como suas pginas so carregadas no cliente (navegador). Assim como as outras aplicaes, algum dado inicial carregado dentro cliente com alguns dados iniciais, mas os outros dados no relevantes para o momento no so carregados no iniciar da pgina. Esses dados, como processamento de eventos e renderizao de dados, so carregados apenas quando o usurio necessita dessas informaes adicionais, realizando a comunicao com o servidor para requisitar essas informaes. Algumas caractersticas que podem ser consideradas particulares da RIA so (BOZZON, 2006): Reduzir a comunicao com o servidor ao mnimo e suportar processamento no lado do cliente; Vrios nveis de persistncia para os dados que compem a aplicao, tanto no lado do cliente quanto no servidor; O processamento de dados pode ocorrer em ambos os lados (cliente e servidor); A utilizao pode ocorrer em modos on-line e off-line.

26 Tabela 2.1 Traduzido de Bozzon - Comparao entre Desktop, aplicaes Web convencionais e Aplicaes Ricas para a Internet

Funcionalidade Cliente universal (navegador)

Desktop No

Web Sim

RIA Sim

Instalao do cliente

Complexa

Simples

Simples

Capacidade de interao

Rica

Limitada

Rica

Lgica de negcio (lado servidor)

Sim

Sim

Sim

Lgica de negcio (lado cliente) Necessria atualizao da pgina inteira Comunicao servidor-paracliente Funcionalidades off-line Round-trips1 de servidor frequentes

Sim

Limitada

Sim

No

Sim

No

Sim Sim

No No

Sim Sim

No

Sim

No

A arquitetura tpica de para uma RIA mostrada na figura 2.2 (OROURKE, 2004), onde o formato de dados a ser transferido freqentemente o XML (eXtensible Markup Language), e pode ser utilizado para definir layouts de formulrios da interface de apresentao. So realizadas chamadas para
1

Round-trip: o termo utilizado para um sinal ir da origem at o destino, e voltar para a sua origem.

27

WebServices para realizar a comunicao com o servidor de aplicao e conectar com a fonte de dados, atualizando o cliente com os dados requisitados.

Figura 2.3 Arquitetura tpica de uma aplicao RIA

28

3 Microsoft Silverlight

O Silverlight um framework, desenvolvido pela Microsoft, que permite desenvolver aplicaes ricas para a Internet, rodando em mltiplos navegadores. O framework do Silverlight uma combinao de trs diferentes arquiteturas: o plug-in para o navegador, o framework de apresentao e o framework .NET, que contm as APIs (Interface de Programao de Aplicativos) de desenvolvimento. O plug-in, de pequeno tamanho, provm as interaes necessrias para o navegador suportar e executar aplicaes Silverlight. Esse plug-in deve ser instalado para que as aplicaes sejam visualizadas corretamente no navegador. As aplicaes Silverlight so implementadas como se fossem objetos incorporados pginas Web. Quando a pgina carregada e nela est contida uma aplicao Silverlight, o plug-in instalado no navegador realiza o download de um pacote XAP (extenso dos pacotes de aplicaes Silverlight), que contm arquivos binrios e recursos da aplicao. Aps o download desse pacote, a aplicao executada internamente na pgina Web (DAYLEY, 2008).

3.1

VISO GERAL Aplicaes Silverlight so executadas como aplicaes de lado client (client-

side applications) sem ser necessrio realizar a atualizao da pgina no navegador para obter as funcionalidades e atualizar a interface grfica. Como so implementadas com o incluso framework .NET, as aplicaes so facilmente comunicveis com servios e controle existentes no lado do servidor. A utilizao desse framework .NET tambm possibilita a integrao tanto com bibliotecas existentes no framework quanto com bibliotecas escritas por terceiros.

29

O framework de apresentao do Silverlight um subconjunto do WPF, que utiliza o XAML como linguagem de programao2. O WPF um conjunto do .NET Framework que possui como ncleo uma engine de renderizao baseada em vetores e independente de resoluo construda para ter vantagens como grficos modernos e inovadores. O desenvolvimento de aplicaes com WPF abrange recursos como linguagem XAML, grficos 2-D e 3-D, controles, data binding3, animaes, componentes multimdia, entre outros (MSDN, 2009). O Silverlight, como qualquer outra plataforma de desenvolvimento rico para Internet, possui vrios pontos fortes, contudo tambm possui algumas limitaes. Um dos pontos mais importantes do Silverlight que ele integra, praticamente sem emendas, a linguagem declarativa XAML com as funcionalidades extremamente teis do .NET Framework. Alguns pontos fortes do Silverlight so listados abaixo (DAYLEY, 2008): Instalao rpida e leve do plug-in sem deixar marcas; Tecnologia independente de navegador provendo consistncia em qualquer lugar que esteja rodando; Necessria a instalao apenas do plug-in. Depois de instalado, o usurio no necessita instalar mais nenhum componente em sua estao de trabalho para rodar aplicaes Silverlight em qualquer navegador presente na mquina; uma aplicao que roda no lado do cliente, atualizando os dados e a interface com usurio sem ser necessrio atualizar a pgina inteira para novos dados; Executa comunicaes assncronas com o servidor, permitindo que a interface com usurio funcione normalmente enquanto espera pela resposta do servidor.

XAML como XML no so linguagens de programao, mas sim de marcao (markup). Data binding a ligao com dados de diversas fontes apenas por componentes, sem ser necessria a utilizao de cdigo.
3

30

Contudo, o Silverlight possui algumas limitaes. Uma das mais importantes limitaes exige que seja instalado um plug-in especfico, diferentemente de outras plataformas ricas como o Flex, que utiliza o plug-in do Flash Player, que j mais difundido. Outras limitaes so exibidas abaixo (DAYLEY, 2008): Acesso limitado ao sistema de arquivos. Aplicaes baseadas em navegadores possuem essa desvantagem, porm pode ser circulado pedindo ao usurio permisso para acessar e salvar arquivos em um determinado local para persistir dados; Configuraes do navegador podem limitar aplicaes Silverlight. Os usurios podem desabilitar recursos como scripts e controladores no seu navegador, podendo limitar ou fazer com que as aplicaes no sejam executadas; Dados que so construdos dinamicamente no so vistos por mecanismos de buscas. Caso seja necessrio aumentar a visualizao da sua aplicao por mecanismos de busca, necessrio contornar a forma de exibir os dados.

3.2

ARQUITETURA A arquitetura do Silverlight consistida de duas partes principais, que sero

estudadas neste tpico e um componente de instalao e atualizao que realiza a instalao do Silverlight para usurios de alto nvel, e a atualizao automtica diminuindo o esforo necessrio para realizar essas tarefas. A figura 3.1 mostra um diagrama com a arquitetura do Silverlight com as duas partes principais: .NET Framework para Silverlight e o Ncleo de Apresentao. O Ncleo de Apresentao possui componentes e servios com focos nas interfaces de usurio e interao com o usurio. O .NET Framework para Silverlight um subconjunto do .NET Framework que contm componentes

31

e bibliotecas como integrao de dados, garbage collector, classes bases, funcionalidades de rede e a CLR. O Ncleo de Apresentao composto dos seguintes componentes (MICROSOFT, 2010): Entradas: Monitora os dispositivos de hardware de entrada como teclado, mouse, e outros dispositivos. Ncleo IU de renderizao: Renderiza vetores e grficos bitmaps, animaes e texto. Mdia: Componentes de reproduo de udio e gerenciamento de vrios formatos de udio e vdeo, como arquivos .WMP a .MP3. Deep Zoom: Permite a funo de zoom ser utilizada em imagens de alta resoluo. Controladores: Contm os diversos controladores que so

customizveis atravs de estilos e modelos. Layout: Permite o posicionamento dinmico dos elementos de interface com o usurio. Ligao de dados: Conhecida como data binding, a ligao de dados tem o papel de ligar dados provenientes de banco de dados, arquivos XML, entre outros com os elementos da interface grfica. DRM: Digital Rights Management, permite o gerenciamento digital de componentes de mdia. XAML: Parser para a marcao XAML.

Esses componentes do ncleo de apresentao so acessados pelos desenvolvedores atravs do XAML para especificar detalhes de apresentao. O XAML o ponto principal de interao da camada de apresentao com o .NET Framework. Para construir as interfaces grficas pode ser utilizado o aplicativo

32

Microsoft Expression Blend, que uma que auxilia no desenvolvimento da camada de apresentao, sem a necessidade de codific-la em XAML. O .NET Framework para Silverlight um subconjunto das funcionalidades completas do .NET Framework. O cdigo para a regra de negcio pode ser escrito em C# ou Visual Basic nas classes de code-behind, que sero discutidas na seo 3.4. Abaixo esto listados algumas das funcionalidades do .NET Framework para o Silverlight: Dados: Suporta o LINQ (Language-Integrated Query) e LINQ-to-XML, os quais facilitam o processo de integrao e manuseamento dos dados de fontes diferentes. Existe tambm o suporte para o uso de XML e serializao de classes. BCL: Base Class Library a biblioteca base do .NET provendo funo de programao como propriedades de strings, expresses regulares, mecanismos de entrada e sada, reflexo, collections e globalizao. WCF: Windows Communication Foundation que simplifica o acesso para servios e dados remotos. O WCF inclui objetos HTTP request e response, suporte para JSON, POX e servios SOAP, entre outros. CLR: Common Language Runtime, que permite o gerenciamento de memria, coletor de lixo (garbage collector), checagem de tipos e manuseamento de excees. DLR: Dynamic Language Runtime, que oferece suporte compilao e execuo dinmicas de linguagens de script como JavaSctipt e IronPython.

33

Figura 3.1 Adapatado de MSDN Arquitetura Silverlight

3.3

LINGUAGEM

3.3.1 XAML O XAML responsvel pela interface com o usurio do .NET Framework, onde baseado no XML, mas com elementos de aplicao para mapear objetos e propriedades presentes no .NET framework. Como o XAML tem como base o XML, facilmente interpretada pelos navegadores e em diversas tecnologias. Com as marcaes do XAML possvel criar diversos elementos visuais deixando a definio da interface de usurio separada da lgica de tempo de execuo utilizando os arquivos de code-behind, que so classes parciais que complementam os arquivos com as marcaes XAML. O recurso de integrar cdigos com marcaes em um arquivo XAML importante, pois as marcaes XML so declarativas e, no possuem um modelo para controle de fluxos (MSDN, 2009).

34

Os arquivos XAML so arquivo XML possuindo a extenso .xaml. A figura 3.2 mostra um exemplo da marcao necessria para criar um boto com nome (identificador) btClique, que possui o escrito Clique Aqui, em uma interface grfica:

Figura 3.2 Boto em XAML (MICROSOFT, 2010)

Os objetos que foram declarados (<StackPanel> e <Button/>) cada fazem referncia a sua classe, que definida na biblioteca do WPF. Quando um elemento especificado pela sua tag, criada uma instruo para o processador de XAML que cria uma nova instncia da classe definida no momento em que a pgina XAML carregada (MSDN, 2009). Para esse objeto ser utilizado corretamente no XAML, ele deve conter um construtor pblico sem parmetros. 3.3.2 Propriedades As propriedades do XAML so atribudas atravs de sintaxes declaradas no momento de definio do objeto. As sintaxes a serem utilizadas podem variar dependendo da caracterstica da propriedade a ser definida. Atribuindo valores a essas propriedades so adicionadas caractersticas aos objetos. As caractersticas iniciais so as definidas como padro no construtor do objeto. 3.3.2.1 Sintaxe de Atributos As propriedades podem ser definidas atravs de atributos, semelhante aos atributos de uma tag em um arquivo XML. A sintaxe de atributo a mais intuitiva para desenvolvedores que utilizaram linguagens de marcao. A figura 3.3 mostra a declarao de um boto com as propriedades com os atributos: cor de fundo

35

(background) como preto, cor da fonte (foreground) como branca e com o texto (content) Esse um boto.

Figura 3.3 Sintaxe de atributos

3.3.2.2 Sintaxe de Elementos de Propriedade Em alguns objetos no possvel utilizar a sintaxe de atributos, pois o valor da propriedade, em algumas ocasies, no pode ser expressado como um simples texto. Nesses casos adotada uma sintaxe diferente, chamada de elementos de propriedade, onde so declaradas tags filhas da tag do objeto que ter as propriedades definidas. Como qualquer tag em linguagens de marcao, existe uma tag de abertura <Objeto.Propriedade> e uma tag de fechamento
</Objeto.Propriedade>

onde ambas circundam o valor da propriedade, como

mostrado na figura 3.4, que define as mesmas propriedades da figura 3.3, mas com o texto do boto (content) definido como atributo, pois ocorre erro no parser do XAML caso seja definido como elemento.

Figura 3.4 Sintaxe de elementos de propriedade

Ao contrrio do XML, onde um elemento do tipo <Objeto.Propriedade> interpretado como um novo elemento, sem vnculo algum de herana com o objeto-pai, no XAML esse elemento interpretado diretamente como uma propriedade do objeto. Caso o objeto permita definir suas propriedades tanto com a sintaxe de atributos como a de elementos de propriedade, normalmente adotada como

36

padro a sintaxe de atributos, pois alm do cdigo ficar mais compactado algumas propriedades podem apresentar problemas, como mostrado na figura 3.4. 3.3.3 Elementos Raiz e Namespace Como todo arquivo XML bem-formado, o XAML deve conter apenas um elemento raiz. Normalmente esses elementos razes so escolhidos como um elemento que parte do modelo da aplicao, por exemplo, para uma pgina podem ser escolhidos um Window ou Page, um Application para a raiz de definio de aplicao, entre outros.

Figura 3.5 Elemento raiz e namespaces

A figura 3.5 mostra um exemplo de um UserControl adotado como elemento raiz. Esse elemento raiz possui como atributos xmlns e xmlns:x que indicam ao processador de XAML quais namespaces possuem as definies para os elementos utilizados nas marcaes dessa aplicao. O atributo xmlns indica o namespace padro do XML. Os objetos que esto na marcao do namespace padro podero ser escritos sem um prefixo. O atributo xmlns:x indica um namespace adicional no XML, o qual mapeia as definies da linguagem XAML (http://schemas.microsoft.com/winfx/xaml). Para utilizao dos elementos definidos nesse namespace necessrio utilizar o prefixo x:. O prefixo x: contm os modelos (templates) necessrios para os projetos Silverlight. Os modelos que so mais comumente utilizados so:

37

x:Key: Atribui uma chave nica para cada recurso utilizado em um ResourceDictionary, que uma implementao de uma hashtable contendo os recursos de uma aplicao WPF. x:Class: Especifica o nome da classe que conter o code-behind, da pgina XAML. x:Name: Especifica o nome do objeto para a instncia que est sendo executada. x:Type: Especifica uma referncia de tipo, baseada no nome do tipo (TypeName). utilizado para especificar atributos que necessitam de um tipo (Type) como Style.TargetType. Em muitos casos a propriedade possui uma converso string-to-Type nativa, onde faz com que a utilizao do x:Type seja opcional.

3.3.4 Eventos e Classes Code-Behind A maioria das aplicaes WPF possuem classes de marcao e de cdigo (code-behind). Os arquivos de cdigo so escritos em Visual Basic ou C# (nesse trabalho ser abordado apenas C#). As classes de cdigo so definidas no arquivo de marcao (XAML) atravs do atributo de namespace da raiz x:Class. Na figura 3.4 a classe de cdigo a classe MainPage localizada no namespace CalendarioUniversitario. Na figura 3.6 mostrado um boto com um evento de clique (btClique_Click). Esse evento ser disparado quando o boto for clicado. Na figura est sendo mostrado o cdigo do arquivo XAML (.xaml), onde feita a marcao do boto que ser exibido na interface visual.

Figura 3.6 Evento do boto em XAML

38

Esse evento possui um mtodo correspondente no arquivo de cdigo (codebehind) com o mesmo nome definido no atributo Click do XAML, esse nome deve ser o mesmo em ambos os arquivos, caso contrrio no ser localizado mtodo para o evento definido no XAML. A figura 3.7 mostra esse evento definido no cdigo em C#.

Figura 3.7 Evento do boto em C#

Esse mtodo est localizado na classe definida no atributo x:Class do elemento raiz do XAML.

3.4

VERSES DO SILVERLIGHT Atualmente o Silverlight encontra-se na verso 3.0. Essa verso contempla

todas as caractersticas existentes nas antigas verses e adiciona vrias novas funcionalidades. Algumas funcionalidades interessantes complementadas na verso mais recente so: Perspectiva 3D API de Bitmap Deteco de mudanas no status da rede (Offline) Suporte nativo para codecs de udio (H.264/AAC) Exibio de vdeos em alta definio (720p+);

Um grande avano entre as verses do Silverlight foi entre a verso 1.0 e a verso 2.0, onde foi inserida a funcionalidade de code-behind, exibida na seo 3.3. Na primeira verso as funcionalidades da aplicao eram implementadas em

39

JavaScript, ao contrrio da verso 2.0 onde pode ser utilizadas funcionalidades da API do .NET Framework em C#, Visual Basic, Python, e Ruby (DAYLEY, 2008). Alm da parte de programao, outra grande mudana da verso 1.0 para a 2.0 foi a incluso dos pacotes XAP (DAYLEY, 2008). Antes de existncia dos pacotes XAP, o cdigo de marcao XAML era referenciado diretamente atravs de um objeto do Silverlight incorporado no navegador. Na verso 2.0, os objetos incorporados referenciam o pacote XAP que contm o arquivo XAP, assemblies (cdigos da aplicao) e os recursos necessrios para executar a aplicao. Uma tabela de comparao entre as verses pode ser encontrada na referncia MICROSOFT, contendo uma relao de todas as funcionalidades existentes em cada verso do Silverlight.

40

4 JavaFX

JavaFX uma tecnologia desenvolvida pela Sun Microsystems que permite a criao de aplicaes ricas para a Internet (RIAs), com contedo multimdia em uma grande variedade de plataformas e dispositivos. O JavaFX foi anteriormente chamado de F3 (Form Follows Function) e foi desenvolvida primeiramente por Chris Oliver. O F3 foi re-batizado para JavaFX em 2007 (ANDERSON, 2009). JavaFX uma linguagem compilada, estaticamente tipada4 e uma linguagem declarativa de script. Ela oferece ligao de dados (data binding) automtico, triggers, animaes. O JavaFX oferece funcionalidade de orientao a objetos para simplificar a complexidade e manusear facilmente erros com excees utilizadas em Java. Alm do tratamento de excees, JavaFX possibilita o acesso completo API Java, e tambm bibliotecas Java desenvolvidas por terceiros.

4.1

VISO GERAL A plataforma JavaFX composta por trs componentes principais: JavaFX

SDK, NetBeans IDE, JavaFX Production Suite (ANDERSON, 2009). O JavaFX SDK (Software Development Kit) inclui o compilador JavaFX, ferramentas de tempo de execuo, grficos, mdias e webservices. O SDK tambm possui ferramentas para criao de RIAs para desktop, navegadores e plataformas mveis. O NetBeans IDE um ambiente integrado de desenvolvimento que permite o desenvolvimento de aplicaes na linguagem Java e suas ramificaes (JME, JavaFX, entre outros). Neste trabalho ser utilizada o NetBeans IDE, mas

Linguagens estaticamente tipadas so as linguagem em que as variveis necessitam de declarao explcita antes de serem utilizadas.

41

aplicaes JavaFX podem ser desenvolvidas em outras IDEs, como o Eclipse. Atualmente o JavaFX um plug-in para o NetBeans, porm existe um plug-in disponvel desenvolvido por terceiros para ser adaptado no Eclipse. O NetBeans fornece editor com suporte de sintaxe para a linguagem JavaFX, code completion5, ferramentas de depurao, funcionalidade de arrastar e soltar componentes para interfaces grficas e outras funcionalidades existentes em IDEs para diminuir o tempo de desenvolvimento. O JavaFX Production Suite um conjunto de ferramentas e plug-ins para auxiliar na importao de interfaces grficas de outros aplicativos (Adobe Illustrator e Photoshop). O JavaFX Production Suite possui tambm uma ferramenta de visualizao de grficos, JavaFX Graphics Viewer, que mostra como ficar a interface quando for realizado o deploy para o desktop e dispositivos mveis. Outra ferramente que compe esse pacote uma ferramenta de converso de arquivos SVG, que permite a converso de arquivos grficos do formato SVG para formato do JavaFX podendo utilizar esses grficos na aplicao.

4.2

ARQUITETURA A arquitetura do JavaFX mostrada na figura 4.1. Como todas as aplicaes

Java, as aplicaes JavaFX rodam em cima da JVM (Java Virtual Machine), que o responsvel pelo funcionamento multi-plataformas do Java. A JVM faz a leitura dos arquivos .class que contm instrues para a mquina virtual. JavaFX Runtime a ferramenta de execuo do JavaFX. Essa ferramenta totalmente integrada com o JRE (Java Runtime Environment), portanto no necessrio instalar nenhum plug-in separado para o JavaFX. Nos desktops e navegadores que suportam Java 1.5 ou mais recente, o plug-in automaticamente instalado quando alguma aplicao JavaFX carregada pela primeira vez (JAVA).
Code completion a caracterstica da IDE de completar a sintaxe com mtodos e operaes existente nos objetos que esto sendo utilizados.
5

42

Os elementos comuns (Common Elements) so os elementos comuns entre Java e JavaFX. Esses elementos comuns so as funcionalidades, componentes e elementos da API Java, que funciona normalmente em uma aplicao JavaFX. Essa integrao total API Java traz um ganho muito grande no desenvolvimento das aplicaes, pois alm de utilizar vrios componentes existentes pode acessar bibliotecas desenvolvidas por terceiros, agregando funcionalidades que no so contempladas, ou so implementadas de maneira diferente na API Java. O JavaFX possui compatibilidade com aplicaes de desktop, dispositivos mveis e TV. Essas ramificaes possuem suas particularidades para executar, por isso existe um plug-in especfico para cada ambiente de execuo. O ambiente de execuo do JavaFX para TV no existe no momento, mas possui um conceito e ser lanado futuramente (ANDERSON, 2009).

Figura 4.1 Adaptado de ANDERSON - Arquitetura JavaFX

O Framework de aplicao o framework de desenvolvimento das aplicaes, que executado em uma IDE de desenvolvimento, que neste trabalho foi utilizado o NetBeans IDE.

43

4.3

LINGUAGEM JavaFX uma linguagem de scripts. Apesar do nome Java, no como o

Java, mas executada em cima do Java runtime. Como citado por Anderson, a sintaxe declarativa de fcil entendimento faz com que no seja pensar como um programador para desenvoler em JavaFX, mas sim pensar como um designer. Pensar como um designer significa visualizar a estrutura da sua aplicao e compor a interface com um Scene (Scene um dos containers do JavaFX que sero explicados na seo 4.3.1) declarando objetos. 4.3.1 Containers O JavaFX composto por containers que abrigam hierarquicamente os objetos da interface. 4.3.1.1 Stage O primeiro container chamado de Stage. o container de nvel mais alto, abrigando todos o s objetos de uma aplicao JavaFX. Esse o local para um applet ou um frame para um componente. Comparando com a linguagem de marcao do Silverlight, o XAML, o Stage similar ao n raiz que abriga todas as outras tags do XAML. O Stage possui propriedades que podem ser definidas atravs da linguagem de scripting do JavaFX. As propriedades mais utilizadas so: Title: Define o ttulo da interface da aplicao; Width e Height: Define, respectivamente, a largura e altura da interface; Style: Define o estilo que ser exibido. Caso o style utilizado seja StageStyle.UNDECORATED ser removida a decorao da janela, caso seja utilizado StageStyle.DECORATED, ela assumir a

44

decorao do ambiente (Windows Vista, Windows XP, Mac OS). O padro do JavaFX o estilo DECORATED. Scene: Define o Scene que conter os objetos da aplicao;

A figura 4.2 mostra um exemplo de utilizao da propriedade style do Stage, onde a figura da esquerda mostra o estilo do ambiente, onde utilizado o Windows 7, e a figura da esquerda mostra o estilo sem decorao alguma.

Figura 4.2 Diferentes estilos no Stage

4.3.1.2 Scene O container Scene a raiz para qualquer objeto que for aparecer na aplicao. O Scene abriga os objetos, chamados de Nodes. As propriedades pertencentes ao Scene so: Fill: a propriedade que define o preenchimento do background. A cor padro Color.WHITE. Cursor: Define o cursor do mouse para o Scene. Content: Define os Nodes que faro parte do Scene;

45

4.3.1.3 Nodes A classe Node (n) a classe base para todos os objetos que compe a interface grfica do JavaFX. Os objetos Node, que so sub-classes de Node, podem ser adicionados no scene, especificar as propriedades e aplicar transformaes (ANDERSON, 2009). Esses Nodes possuem vrias propriedades que customizam a aparncia e comportamento, como event handlers (propriedades que manipulam eventos), efeitos, opacidade, rotao, visibilidade, entre outras propriedades que podem ser visualizadas em (SUN API, 2010). A figura 4.3 mostra a hierarquia dos objetos grficos que compem a classe Node.

Figura 4.3 - Hierarquia de objetos da classe Node (ANDERSON, 2009)

Esses

nodes

possuem

sub-tipos

diferentes,

conseqentemente

especializaes diferentes. Componentes de layout especializam Group ou Container que combinam objetos no scene. Esses objetos so organizados na interface dependendo do componente de layout em que ele est inserido. Podem ser organizados na horizontal em uma nica linha (HBox), verticalmente em uma coluna (VBox), entre outros.

46

Shape um tipo de sub-n que pode ser renderizado com propriedades como fill e stroke. Os sub-ns que especializam Shape possuem propriedades para customizar as renderizaes dos objetos na interface grfica. O JavaFX permite o desenvolvedor customizar esses objetos atravs de CSS (Cascading Style Sheets), que uma forma muito conhecida e prtica de customizao, utilizado nas pginas HTML. A classe CustomNode uma classe abstrata que herda de Node, permitindo criar objetos prprios para a interface grfica. Quando herdado, necessrio fornecer um mtodo Create, que retorna um Group com vrios nodes que o compem. 4.3.2 Invocando Java API Como citado anteriormente, o JavaFX, apesar de ser uma linguagem script, pode invocar classes e funes da API Java. Para esses objetos da API Java serem utilizados no JavaFX necessrio que eles estejam dentro de uma funo, j que o programa escrito em scripting. A figura 4.4 mostra a utilizao da classe Float (java.lang.Float) da API Java dentro da funo performMathsOperation(). Essa funo est dentro do exemplo Calculator, retirado dos exemplos fornecidos pela Sun (SUN, 2010).

47

Figura 4.4 Java API dentro do JavaFX (SUN, 2010)

Na figura 4.4, alm da classe Float utilizado tambm um tratamento de excees com a classe Exception (java.lang.Exception). A varivel opNum2 que est recebendo o valor criado pela classe Float definida como mostra a figura 4.5.

Figura 4.5 Variveis em JavaFX (SUN, 2010)

4.3.3 Eventos em JavaFX Ao contrrio do Silverlight, onde os eventos so definidos no arquivo de apresentao (XAML) e codificados no arquivo de code-behind, no JavaFX os eventos so tratados normalmente no arquivo da aplicao JavaFX (arquivos com extenso .fx). Seguindo o exemplo da Calculator (SUN, 2010), a figura 4.6 mostra um evento que acionado quando o mouse pressionado.

48

Figura 4.6 Evento de mouse (SUN, 2010)

Quando o boto do mouse pressionado, disparado o evento onMousePressed, que como mostrado na figura 4.6, invoca um mtodo, nesse caso onMousePressed(e:MouseEvent) que realiza as aes referente esse evento. A declarao de mtodos no JavaFX vm juntamente com sua implementao, ao contrrio do Silverlight onde definido o mtodo que ser invocado quando for disparado o evento. 4.3.4 Verses do JavaFX O JavaFX encontra-se disponibilizado na verso 1.2, que a verso utilizada nesse trabalho. A verso 1.2 no contempla todas as caractersticas que existiam na verso 1.1. Algumas caractersticas foram alteradas e outras removidas. Como toda nova verso, foram adicionadas caractersticas interessantes como novos efeitos (no pacote javafx.scene.effect), classes grficas, eventos e outras funcionalidades que podem ser encontrados na referncia JAVAFX. Na atual verso do JavaFX, alm de funcionalidades alteradas e adicionadas, outras foram removidas ou tornadas obsoletas. A grande maioria dessas funcionalidades so propriedades de classes ou mtodos. A lista completa pode ser encontrada na seo de Novas Funcionalidades da referncia JAVAFX.

49

5 Estudo de Caso

Nesse captulo so apresentadas as anlises dos frameworks de desenvolvimento de Aplicaes Ricas para a Internet. Os exemplos que sero desenvolvidos mostram apenas a camada de apresentao de uma aplicao CRUD simples. Como o exemplo ser desenvolvido em ambas as tecnologias (Silverlight e JavaFX), foi escolhida somente a camada de apresentao, e no a aplicao completa, pois essa camada a parte diferencial das tecnologias e o foco do trabalho. Como a regra de negcio em Silverlight e em JavaFX so desenvolvidos em C# e Java puros, respectivamente, no necessrio implement-la. A Seo 5.1 mostra a viso geral do exemplo que ser montado em ambas tecnologias. A Seo 5.1.1 mostra a camada de apresentao da aplicao CRUD desenvolvido com Silverlight, enquanto a Seo 5.1.2 mostra o exemplo desenvolvido em JavaFX. Na Seo 5.2 descrita a anlise crtica dos exemplos.

5.1

VISO GERAL Para anlise das tecnologias abordadas nesse trabalho, Silverlight e

JavaFX, foi construda a camada de apresentao de uma aplicao CRUD. Como foi implementada apenas a camada de apresentao, os mtodos que realizariam a regra de negcio (insero, visualizao, atualizao e remoo) no possuem nenhuma implementao. A camada de apresentao construda faz referncia a uma interface de cadastro de consumidores. A interface um cadastro simples, possuindo apenas campos como Nome, CPF/CNPJ, Telefone Residencial e Telefone Celular. Os consumidores cadastrados sero exibidos em um grid, podendo selecionar o consumidor desejado para edio ou remoo.

50

5.2

SILVERLIGHT A camada de apresentao construda utilizando o Silverlight composta de

uma tela principal que contm os botes de ao, Inserir, Atualizar e Remover, e um DataGrid que exibe os consumidores cadastrados. O arquivo XAML principal (MainPage.xaml) possui apenas uma chamada para a pgina criada. A figura 5.1 mostra o arquivo principal do exemplo construdo.

Figura 5.1 MainPage.xaml

Na linha 5 da figura 5.1 realizada a utilizao da pgina construda, utilizando o prefixo cad:, que faz referncia ao namespace CadastroConsumidor.GUI. Nas tags onde definido o grid que abrange a pgina, e a borda (Border), h a utilizao de recursos estticos (StaticResource), que so recursos definidos para a aplicao como um todo. A figura 5.2 mostra o arquivo XAML da aplicao (App.xaml) com os recursos estticos definidos. Esses recursos podem ser utilizados em qualquer pgina ou elemento criado dentro da aplicao. Os estilos utilizados nos recursos estticos foram retirados da aplicao AzureLight (CODEPLEX, 2010), que utiliza Silverlight em combinao com webservices e Windows Azure, que a plataforma de cloud computing fornecida pela Microsoft.

51

Figura 5.2 App.xaml com recursos estticos

A figura 5.3 mostra a pgina principal da camada de apresentao construda. Essa pgina foi construda utilizando o componente Page presente no Framework do Silverlight. Como mostrado na figura 5.1, ela exibida atravs da tag <cad:Principal></cad:Principal>. Ao clicarmos nos botes Inserir, ou Atualizar, exibida a popup para realizar a insero ou edio do consumidor. Para ser realizada a edio necessrio selecionar um consumidor do grid, caso contrrio ser exibida uma mensagem de erro. A figura 5.4 mostra o cdigo de marcao da pgina principal de cadastro.

52

Nas linhas 15, 17 e 19 esto definidos os eventos para os botes Inserir, Atualizar e Remover, respectivamente.

Figura 5.3 Cadastro de Consumidor

53

Figura 5.4 Cadastro Principal XAML

A figura 5.5 mostra a camada de cdigo, implementado em C#, que exibe o formulrio de insero e atualizao. Nos mtodos btInserir_Click e btEditar_Click instanciado o mesmo componente (InserirPopup), sendo alterada apenas a propriedade de ttulo, Title, que altera o ttulo do formulrio e a propriedade Inserindo, que define em qual estado est sendo executado (insero ou edio). A figura 5.6 mostra como exibido o formulrio de insero/atualizao em cada situao. O formulrio exibido na parte de cima exibido ao clicar no boto Inserir, e o formulrio da parte inferior da figura 5.6 exibido ao acionar o evento do boto Atualizar.

54

Figura 5.5 Cadastro Principal CS

55

Figura 5.6 Formulrio de insero/edio

5.3

JAVAFX Ao contrrio do Silverlight, onde foi criado uma pgina principal separada do

arquivo de aplicao principal, no JavaFX foi implementado diretamente no arquivo principal de apresentao, o Main.fx. Como o JavaFX uma linguagem de script, composto por dois elementos principais, o Stage e o Scene. O Stage como se fosse um container principal, e o Scene contm os elementos da interface a ser desenvolvida. A figura 5.7 mostra como est estruturado o Scene na interface construda.

56

Figura 5.7 Contedo principal do Stage e Scene

Dentro do Scene definido um Group que contm o elemente conteudoStage. Esse elemento definido na linha 94. Como uma linguagem script, ele apenas um vetor com outros dois elementos, o boto de fechar (btClose) e o boxConteudo, que definido como um VBox possuindo como contedo o buttonBar e o gridBox. Todo elemento definido em JavaFX possui a propriedade content onde so definidos os elementos que iro compor esse elemento. Sucessivamente so

57

definidos elementos at que um elemento seja o elemento pai, que ir ser o contedo do Scene. Diferentemente do Silverlight, onde os eventos so programados em um arquivo a parte, no JavaFX a programao no prprio evento. A figura 5.8 mostra como definido o evento, e sua implementao, que realizada no mesmo arquivo (Main.fx).

Figura 5.8 Evento do boto fechar

Para construir a interface principal do cadastro foram utilizados os elementos HBox e VBox, os quais distribuem os elementos horizontalmente e verticalmente respectivamente. A dificuldade encontrada na utilizao desses componentes foi definir o alinhamento dos elementos-filhos. A figura 5.9 mostra como ficou a distribuio dos botes, que esto dentro de uma HBox, como ao contrrio da interface construda em Silverlight, no esto alinhados no centro da interface.

58

Figura 5.9 Cadastro de Consumidor

59

6 Concluso

Este trabalho teve como objetivo estudar duas novas tecnologias de desenvolvimento de aplicaes ricas para a Internet. Como uma aplicao Web pode crescer muito rapidamente, o trabalho teve o foco na camada de apresentao, ou seja, na interface com o usurio. Uma discusso terica sobre o desenvolvimento de sistemas para a Web foi apresentada, abordando seus principais pontos que incentivaram a mudana de aplicaes Web estticas para aplicaes dinmicas, ou ricas. Foram apresentadas as caractersticas principais de cada tecnologia abordada (Silverlight e JavaFX), citando o requerimento para rodar aplicaes desenvolvidas nessas tecnologias, suas arquiteturas e as verses liberadas at a concluso deste trabalho. A implementao realizada para estudar ambas tecnologias foi apenas a interface grfica de uma aplicao simples de CRUD (Create Retrive Update Delete) de consumidores. Com base na implementao realizada possvel verificar que Silverlight possui uma facilidade maior para quem no est acostumado a trabalhar com linguagens scripts, como foi o caso deste trabalho. Como a linguagem utilizada para a interface grfica (XAML) semelhante HTML e XML, que so linguagens tradicionais e bastante divulgadas e conhecidas, torna-se mais fcil escrever uma interface em Silverlight do que em JavaFX. Para desenvolvedores que esto acostumados com linguagens tipadas, utilizar linguagens scripts pode tornar-se um desafio. Outra vantagem do Silverlight em relao ao JavaFX sua API nativa, que possui mais componentes, e esses componentes possuem mais propriedades, e/ou propriedades mais fcil de atribuir, principalmente para um iniciante em linguagens scripts e JavaFX. A dificuldade de setar algumas propriedades do JavaFX fez com que a complexidade da interface aumentasse, fazendo com que

60

a interface desenvolvida no possusse todas funcionalidades e caractersticas encontradas na interface desenvolvida em Silverlight. A principal vantagem do JavaFX sua licena de uso, que open-source, sendo possvel encontrar vrios componentes, e at novas APIs, inovadores que podem facilitar de grande forma o trabalho do desenvolvedor. Neste trabalho, foram utilizadas apenas as APIs nativas de ambas as tecnologias. As IDEs utilizadas foram Visual Studio 2008 e NetBeans 6.8 para os exemplos desenvolvidos em Silverlight e JavaFX, respectivamente. A tabela 6.1 mostra a comparao de algumas funcionalidades de cada IDE.
Tabela 6.1 Funcionalidades das IDEs

Funcionalidades Tamanho da instalao

Visual Studio 2008 Muito grande. Por padro instala todas funcionalidades disponveis.

NetBeans 6.8 O tamanho varia com as funcionalidades escolhidas (servidores, linguagens). Mais lento, mas com mais opes, como mtodos que possuem sobrecarga.

Complementao de cdigo (code completion)

Chamado de Intellisense, possui uma complementao mais rpida, mas com opes limitadas.

Edio de cdigo

tima organizao de cdigo utilizando as sees chamadas de regions.

Possui a funcionalidade de realar a varivel em todos locais em que ela utilizada no mesmo arquivo.

Foi apresentada uma discusso terica sobre Desenvolvimento de Software, abordando seus principais problemas e os desafios que esto presentes. Uma

61

discusso sobre Desenvolvimento Distribudo de Software tambm foi realizada, mostrando os motivos que levam utilizao de DDS. Um estudo de caso mais especfico poderia ser realizado, utilizando API de terceiros, e construir uma aplicao completa, desde a camada de apresentao at a camada de controle.

6.1

TRABALHO FUTUROS A partir deste trabalho, podem-se realizar outros trabalhos como: Estudo de caso especfico construindo uma aplicao completa usufruindo de todos os recursos presentes em cada tecnologia. Comparao de desempenho, em termos de velocidade de carregamento e execuo da aplicao, das tecnologias abordadas.

62

REFERNCIAS

ANDERSON, Gail; ANDERSON Paul; Essential JavaFX. EUA: Prentice Hall, 2009. BECKER, S.; Berkemeyer, A; Rapid Application design and testing for usability. IEEE Multimedia. p. 38-46. October December 2002. BOZZON, A., et al.; Conceptual Modeling and Code Generation for Rich Internet Applications. ICWE. Palo Alto, EUA, Jul. 2006. CODEPLEX. Comunidade de cdigo aberto de projetos. Disponvel em: <http://www.codeproject.com/KB/silverlight/Azurelight.aspx>. Acesso em 01 jan. 2010. DAYLEY, Brad; DAYLEY Lisa DaNae; Silverlight 2 Bible. EUA: Wiley Publishing. 2008. DUHL, Joshua; Rich Internet Applications. IDC White Paper. Nov. 2003. MICROSOFT. Site oficial do Silverlight. Disponvel em: <http://silverlight.net>. Acesso em 05 jan. 2010. MSDN. Site oficial do Microsoft Development Network. Disponvel em: <http://msdn.microsoft.com>. Acesso em 23 dez. 2009. MURUGESAN, Sam; GINIGE, Athula; Web Engineering: Introduction and Perspectives. In: SUH, Woojong. Web Engineering: Principles and Techniques. EUA: Idea Group, 2005. p.1-23. OROURKE, Cameron; A Look at Rich Internet Applications. Oracle Magazine. July August 2004. SUN. Site oficial do JavaFX. Disponvel em: <http://www.javafx.com>. Acesso em 22 jav. 2010. SUN API. Site oficial da Sun API. Disponvel <http://java.sun.com/javafx/1/docs/api>. Acesso em 19 jan. 2010. em: