Java Mobile
Construindo interfaces gráficas na prática
Construa GUI arrojadas para potencializar suas aplicações J2ME utilizando o Lightweight UI Toolkit
Para alguns desenvolvedores de aplicações móveis que utilizam a tecnologia Java ME, a criação de interfaces gráficas é considerada a melhor parte do trabalho, para outros, não são tarefas agradáveis de realizar, já que existe certa complexidade quanto a sua construção. A API Lightweight UI Toolkit veio para agradar ambos, proporcionando a construção de GUI de maneira rápida, simples e com um potencial incomparável. Neste artigo iremos mostrar e aplicar o que o LWUIT traz de melhor na criação de interfaces gráficas para aplicações móveis.
Um pouco do LWUIT
A construção da LWUIT foi inspirada na tecnologia Swing obtendo, assim, influências sobre a maneira de criar telas de interação com o usuário. As características mais notáveis são: inicialização de componentes, gerenciamento de layouts, adição de componentes em containers, interface de tratamento de eventos etc. Oferece-nos também um completo conjunto de componentes (Figura 1), bem como a possibilidade de utilizar temas e estilos, transições de telas animadas, internacionalização dentre vários outros recursos.
O seu tamanho é de apenas 272 KB e, mesmo sendo tão pequena, é capaz de proporcionar aos desenvolvedores a criações de interfaces gráficas com baixo custo de espaço de armazenamento, sobretudo com um bom desempenho.
Figura 1. Hierarquia de classes do LWUIT.
O que há de mais atraente
Muitos dos componentes apresentados na Figura 1 não são novidades para a maioria dos desenvolvedores, já que são elementos básicos de qualquer tecnologia para criação de GUI. Contudo, algumas classes presentes na API LWUIT não são encontradas na hierarquia de classes do MIDP. Tais classes são as seguintes:
· ComboBox – classe responsável por criar um componente capaz de combinar muitas informações em um pequeno espaço onde o usuário pode escolher qual informação irá utilizar.
· Dialog – classe semelhante ao Alert do pacote java.microedition.*. Utilizada para prestar informações ou enviar avisos ao usuário.
· TabbedPane – classe responsável por criar vários containers agrupando-os e formando apenas um componente que, ao ser exibido, o usuário poderá navegar entre os containers sem sair da tela no qual estão sendo exibidos.
Mas, sem dúvida alguma, o que realmente chama atenção na API são as transições entre telas e a possível criação e utilização de temas, como pode ser observado na Figura 2. É possível criar inúmeros tipos de transições de telas em sua aplicação. Os tipos são:
· Transições comuns
* Fade – a próxima tela a ser exibida surge de forma transparente sobrepondo à tela anterior;
* Slide – a próxima tela a ser exibida surge através de uma transição em forma de slide. Esta transição pode ser vertical ou horizontal.
· Transições 3D
* Cube – a transição entre as telas se dá na forma de um cubo giratório;
* Rotation – é realizada uma rotação no eixo central da tela exibida, ao finalizar completamente o giro, a nova tela é exibida para o usuário;
* FlyIn – a nova tela surge do centro da tela exibida e cresce até preencher totalmente a tela do dispositivo;
* SwingIn – a próxima tela a ser exibida surge como uma janela balançando até preencher a tela do dispositivo.
Já com a criação e utilização de temas, podemos estilizar as telas de nossas aplicações tornando-as bastante elegantes (Figura 2). É possível adicionar cores ou imagens à barra de título assim como a todos os componentes e aos menus. Também é possível utilizar fontes diversas, adição de bordas aos componentes, efeitos de transparência etc. Ou seja, você pode construir o seu tema da maneira que bem entender proporcionando à sua aplicação uma roupagem única.
Figura 2. Uso de temas e realizando uma transição de telas em forma de cubo.
Tendo visto os recursos que mais chamam atenção da API, vamos construir uma pequena aplicação para mostrar na prática como utilizar estas características.
Na prática
Usaremos como exemplo de aplicação um sistema simples para lanchonete onde o pedido feito por um cliente é inserido no aplicativo. Utilizando o sistema, o garçom informa o número da mesa em que o cliente se encontra (Figura 3), logo após, insere o pedido do cliente (Figura 4) e ao finalizar, envia o pedido para cozinha (Figura 5). Também é possível acrescentar observações em cada item selecionado na tela de cardápio como, por exemplo, retirar alface de um hambúrguer ou acrescentar mais uma cerveja no pedido (Figura 6). É importante lembrar que este artigo está focado na criação de interfaces gráficas, desse modo, não será apresentada nenhuma implementação sobre a lógica da aplicação.
Veja o Quadro “Tecnologias utilizadas” para saber como montar seu ambiente de desenvolvimento para execução do aplicativo.
Tecnologias utilizadas
Utilizaremos a tecnologia Java ME em nossa aplicação, para isso é necessário realizar o download do WirelessToolkit da Sun em http://java.sun.com/products/sjwtoolkit/ e instalá-lo.
Outra tecnologia que vamos utilizar é a API LWUIT. O download da API pode ser realizado em https://lwuit.dev.java.net/.
A IDE de desenvolvimento Java fica a critério do desenvolvedor. Independente da IDE utilizada, siga os seguintes passos:
1. Crie um novo projeto;
2. Adicione ao path do projeto o arquivo lwuit.jar;
3. Importe as classes.
Esta aplicação foi testada em uma máquina com Windows XP Professional SP3, Eclipse 3.3.1, EclipseME, WTK 2.5.2 e LWUIT. Os arquivos estão disponíveis na página de download da revista.
Figura 3. Tela inicial.
Figura 4. Tela de pedidos.
Figura 5. Aviso ao usuário.
...
