6.2 Implementações da aplicação de referência
6.2.1 Implementação utilizando Adobe FLEX
A implementação da aplicação de referência na tecnologia Flex se deu sobre a IDE (Integrated Development Environment) Flash Builder. A versão utilizada foi a 4.6 e a versão do framework Flex foi a 4.6.0. Outras informações estão disponíveis no site44 do fabricante. Uma vantagem desta IDE é a representação gráfica da linguagem de marcação FXML. Com isso é possível “arrastar” controles a fim de estruturar e organizar o layout das aplicações.
Mesmo sem possuir conhecimento prévio da linguagem ActionScript e do FXML, Não foram encontradas grandes dificuldades em utilizar as características da tecnologia. Na internet é possível encontrar diversos exemplos de suas funcionalidades básicas. Alguns sites que podem ser citados são o fórum de Flex da Adobe45, a documentação on-line do Flex46 e o Centro de Desenvolvimento do Flex47. Neste último é possível realizar o download de uma aplicação onde estão disponíveis diversas implementações pontuais das funcionalidades do Flex juntamente com seu código fonte. Esta aplicação chamada “Tour De Flex” foi importante para o desenvolvimento da aplicação de referência proposta.
A implementação da característica de informações gerais (C1) não possuiu grandes dificuldades. Foram utilizados controles prontos do Flex como Label, ComboBox, TextArea e
DateField. Sua organização visual é vetorial, ou seja, a partir da definição das posições X e Y
o que se assemelha com tecnologias desktop.
44http://www.adobe.com/products/flex.html Disponível em 04/06/2012. 45http://forums.adobe.com/community/flex Disponível em 04/06/2012.
46http://www.adobe.com/devnet/flex/documentation.html Disponível em 04/06/2012. 47http://www.adobe.com/devnet/flex.html Disponível em 04/06/2012.
Na listagem dos produtos na tela de itens do pedido (C2) foi utilizado outro controle do Flex chamado TileGroup. Este organizou facilmente os produtos conforme a característica especificada. O itens foram criados dinamicamente via código ActionScript como pode ser visto na Figura 34. Nesta é possível observar a criação de dois Labels, um Image e um
BorderContainer. Ao final, estes são adicionados de forma hierárquica no TileGroup chamado
“tgpProdutos”.
Figura 34 - Controles dinâmicos na listagem de produtos do Flex
O Flex possui um controle chamado de DataGrid para a representação de grids como nos itens do pedido. Neste, ao invés de criar por código ActionScript, cada coluna foi estruturada por uma espécie de Template. Este serve para organizar os controles dentro de
cada linha da grid.
A navegação entre as telas (C3) utilizou um controle chamado LinkBar. Este realiza automaticamente a troca entre as telas de “Informações gerais”, “Itens do pedido” e “Finalizar pedido”. A Busca dos itens (C4) foi implementada através do evento change de um controle e os itens filtrados por ActionScript sem grandes problemas.
O drag-and-drop da adição e exclusão de itens no pedido (C5) bastou definir a propriedade chamada dragEnabled para true. Com isso o controle desejado estava habilitado para ser arrastado. Para soltar os um item, o destino deveria implementar os eventos
drqgEnter e dragDrop. Estes eventos servem, respectivamente, para que ao arrastar um item
apareça a possibilidade de soltar e ao soltar possa ser identificado o produto adicionado, por exemplo.
O template do DataGrid possibilita a inclusão de um controle do tipo NumericStepper, que possibilita a alteração da quantidade solicitada conforme descrito na característica C6. Para a validação das informações gerais conforme especificado na característica C7, não há uma propriedade pronta nos controles de entrada de dados. Para desenvolver esta especificação, foram criados controles do tipo ToolTip e aplicados estilos para que os mesmos sejam semelhantes aos propostos na aplicação de referência.
A característica C8 consiste na implementação de um mapa, baseado nas APIs do
Google. Segundo o site da própria Google, atualmente a API nativa para o Flash está
depreciada. Somente há suporte para a versão V3 desta API. A versão para Flash está ativa por tempo indeterminado. Para que está API funcione, é necessária uma chave que somente é obtida através de registro junto a Google o qual não existe mais. Esta característica só foi implementada, pois utilizou-se uma chave obtida em um exemplo da internet.
Os gráficos estatísticos (C9), foram desenvolvidos com os controles PieChart, para o gráfico de pizza e o ColumnChart, para o gráfico de barras. Os efeitos de interação dos gráficos foram implementados com base nas animações já existentes pelos controles. Os controles dispunham de todas as funcionalidades propostas, inclusive o Tooltip exibido ao passar o cursor por um item do gráfico de pizza.
A transição das telas, proposta na característica C10, não foi implementada completamente, pois utilizou-se um controle chamado ViewStack. Este controle não possibilitou a transição exatamente como especificada. Isto ocorreu pelo motivo que as telas (Dados gerais, itens e finalizar pedido) não estavam dispostas uma ao lado da outra. Porém,
foi possível aplicar animações na navegação entre as telas. Com isso será possível realizar as medições do critério de performance do método de avaliação ao analisar o custo computacional da renderização gráfica.
O Flex possui acesso à webcam através dos controles Video e Camera. Ao ativar a câmera o plug-in do Flash realiza a questionamento se o usuário deseja realmente utilizar a
webcam. Isto evita o uso indiscriminado dos recursos locais do usuário. Esta implementação
supre com sucesso a característica C12.
As implementações em Flex, em geral foram fáceis. A curva de aprendizagem é bem curta e fácil de encontrar documentações e exemplos das mais diversas funcionalidades. Isto a torna uma linguagem interessante mesmo em um caso onde não haja profissionais com experiência na tecnologia.