Atenção: esse artigo tem uma palestra complementar. Clique e assista!

Neste artigo, damos continuidade à cobertura da nova plataforma RIA da Sun, a JavaFX. Após vários artigos focados nos seus conceitos, primeiros passos de programação, e na linguagem JavaFX Script, vamos finalmente botar as mãos na massa e aprender a construir uma aplicação.

Já mostramos alguns programas JavaFX nos artigos anteriores. Mas agora vamos dar um foco alternativo, criando uma aplicação “comum”: nada de benchmarks, animações, mídia e outras coisas muito específicas ao ‘R’ da sigla RIA. Ao invés disso, vamos nos focar no ‘A’ – Aplicações – funcionalidades mais próximas da atividade da maioria dos desenvolvedores: uma GUI convencional com um formulário composto por controles; um modelo de dados, persistência, regras de negócio. Especificamente, vamos fazer um sistema de cadastro de Produtos, que poderia ser parte de uma loja virtual ou sistema de estoques. O programa terá uma GUI criada em JavaFX com o clássico conjunto de operações CRUD; as entidades cadastradas serão persistentes. Para caprichar, teremos um mini-relatório com um gráfico de barras, também feito apenas com recursos da JavaFX. Finalmente, o programa será 100% portável, rodando no desktop como applet ou aplicação, ou dispositivos móveis, sem mudar uma só linha de código.

Esperamos, com isso, convencer os leitores que ainda vejam a JavaFX como um “brinquedinho” que só serve para extravagâncias de mídia, games e animação. Se o leitor pensa assim, não o culpo, pois as primeiras versões da JavaFX (1.0 e 1.1) realmente tinham limitações que dificultavam seu uso fora deste nicho. Com a JavaFX 1.2, veremos que já é possível construir aplicações “sérias”.

Um protótipo de GUI

Confesso ao leitor – e meu histórico de artigos na Java Magazine não deixa mentir – que GUI não é minha especialidade. No entanto, trabalho junto com desenvolvedores experientes com GUIs, inclusive designers profissionais, e acho que aprendi alguma coisa. Um bom projeto de GUI começa com um protótipo de telas esquemático – que alguns chamam de wireframes – muitas vezes “rascunhado” com ferramentas de ilustração. Então, realizei esta etapa do projeto lançando mão de um editor gráfico e do meu talento de designer.

O leitor pode conferir o resultado na Figura 1. A aplicação terá os seguintes elementos, já com seus requisitos funcionais:

1. Tela Principal. Exibe uma listagem de todos os Produtos cadastrados. Um botão no canto superior esquerdo chama o Relatório, e um botão no canto superior direito cria um novo Produto. Na listagem, basta clicar em qualquer item para exibi-lo na tela de Edição de Produto. Se houver mais produtos do que cabe na tela, uma scrollbar será apresentada;

2. Tela de Edição. Exibe um formulário que permite editar todos os campos desta entidade, que são: Nome (string), Preço (decimal), e Unidades em estoque (inteiro). Na parte inferior da tela, teremos botões para Criar/Atualizar, Cancelar as alterações, e Remover. No canto superior esquerdo, um botão de navegação retorna à tela principal;

3. Tela de Relatório. Exibe um gráfico de barras, plotando a quantidade de Unidades em estoque de cada Produto. No canto superior esquerdo, um botão de navegação retorna à tela principal. (Note o capricho do designer do wireframe, mostrando que o gráfico é colorido.)

As proporções das telas são de 3/4 (horizontal/vertical), o que corresponde ao formato da tela da maioria dos dispositivos Java ME.

Começando a Implementação

Agora que o pessoal de vendas, análise e gerência de projetos já fizeram a parte fácil do trabalho, culminando no wireframe e na especificação de requisitos, cabe aos verdadeiros artistas, ou seja, nós programadores, fazer o que realmente importa: o código da aplicação. ;-) Começaremos pela camada de Visão, seguindo o design pattern MVC.

Antes de mais nada, precisamos de um projeto. No NetBeans (com os plugins para JavaFX já instalados), acione Arquivo>Novo projeto>JavaFX>JavaFX Script application. Escolha um nome e diretório, mantendo os defaults para as demais opções. Você terá um projeto vazio, com um script Main.fx que se executado, exibe uma pequena janela com uma mensagem."