Java Magazine 68
Esse artigo faz parte da revista Java Magazine 68. Clique aqui para ler todos os artigos desta edição

JavaFX: Tutorial

Começando a programar em JavaFX

Aprenda a linguagem JavaFX Script e seu poderoso framework de animação

 

De que se trata o artigo:

Neste segundo artigo sobre JavaFX, usamos uma aplicação JavaFX razoavelmente realista como um tutorial, mostrando passo-a-passo sua implementação, como forma de explicar a linguagem JavaFX Script e o framework de GUI e animação. São cobertas as variantes JavaFX Desktop e JavaFX Mobile, mostrando como portar a mesma aplicação do desktop para um dispositivo móvel.

 

Para que serve:

JavaFX é uma nova plataforma da Sun, que estende tanto a JavaSE quanto a JavaME com poderosas capacidades de construção de aplicações RIA. As vantagens desta nova plataforma já foram melhor exploradas no artigo da Edição anterior, que apresentou um histórico, ferramentas, capacidades... e uma rápida prática baseada num demo. Neste segundo artigo, “entramos de cabeça” na exploração prática da plataforma, com um tutorial bem mais amplo.

Um dos objetivos é suavizar a curva de aprendizado da JavaFX, para o leitor interessado no assunto. Outro objetivo, para quem ainda não estiver interessado, é mostrar de forma concreta as novas idéias da JavaFX – suficientemente interessantes para ter atraído o autor, que há vários anos já havia perdido todo o gosto por programação de GUIs... ;-)

 

Em que situação o tema é útil:

As Rich Internet Applications são uma das ondas do momento: aplicações web (com execução ou deployment via browser), porém ricas no visual e interatividade (isto é, diferente do que se pode conseguir mesmo com as melhores técnicas de Web 2.0). Em outras palavras, são aplicações web que competem em capacidades com aplicações desktop tradicionais. Completando a definição, podemos considerar que a alta produtividade de desenvolvimento é também uma característica essencial de uma plataforma RIA, pois aplicações desse tipo são tipicamente criadas no “ritmo da internet”.

Existem várias tecnologias que habilitam a construção de aplicações RIA. Para a plataforma Java, a principal opção é a plataforma JavaFX, recentemente lançada (mais ainda em rápida evolução).

 

 

Na Edição anterior apresentamos a nova plataforma JavaFX, explicando seu histórico e conceitos fundamentais, analisando um pouco de código, e especulamos um pouco sobre a JavaFX Mobile. A partir desta edição, vamos partir para a prática. O leitor que acompanha a série pode querer começar pelo quadro “JavaFX: Últimas evoluções”.

No artigo passado usei um exemplo pronto do SDK; neste artigo, guiarei o leitor por um código mais personalizado – código criado por outros, mas que usei para aprender JavaFX e modifiquei pesadamente. Trata-se do JavaFX Balls, a versão JavaFX do Bubblemark, um popular benchmark de plataformas RIA hospedado em bubblemark.com. O leitor que acessa meu blog terá visto alguns posts sobre o assunto, mas este artigo não repete o mesmo material; ao invés disso, parte para uma abordagem didática, usando o JavaFX Balls como um tutorial. Faremos o “serviço completo”, desde o design até cada etapa da codificação, explicando todas as novidades de linguagem ou frameworks – e são muitas, pois assumo que esta será a primeira experiência do leitor com JavaFX.

Este artigo é o segundo de uma “série informal”, com artigos independentes, mas que oferecem uma cobertura contínua da primeira geração da plataforma JavaFX. Veja as preliminares em “A Guerra do RIA”, Edição 63; e o primeiro artigo da série propriamente dita em “JavaFX: RIA a todo vapor”, Edição 65. Na próxima Edição, planejamos fechar o primeiro round com um terceiro artigo mais focado na linguagem JavaFX Script, e então aguardar o feedback do leitor (e talvez as próximas evoluções, como o lançamento da JavaFX 1.5) para novos artigos sobre o tema.

 

JavaFX: Últimas evoluções

Neste quadro, apresentamos as atualizações da timeline da plataforma JavaFX, começando pelos acontecimentos posteriores ao fechamento do artigo anterior:

·       10 de fevereiro de 2009: Primeiro build beta do JDK 6u14, que se destaca por uma nova versão do HotSpot com várias melhorias inicialmente desenvolvidas no projeto JDK 7, inclusive o coletor G1 (“garbage first”) que vimos na Edição 60. Também introduz algumas correções e otimizações específicas para a JavaFX;

·       12 de fevereiro: Lançamento da JavaFX Mobile 1.0 (4 dias antes do esperado) e da JavaFX 1.1 (“Franca”) para desktop. São os releases nos quais este artigo foi baseado.

 

Eventos futuros atualizados (de forma mais resumida para dados já apresentados no artigo anterior; realçando novas informações):

·       ~15 de Março: JDK 6u13, um SSR (update de segurança), mas será “empurrado” a centenas de milhões de usuários pelo auto-update do JRE, incluindo a JavaFX 1.1;

·       4 de Maio: JDK 6u14 (release final);

·       2 de junho: JavaFX 1.5 (“Marina”) lançada na JavaOne. No evento, a Sun disponibilizará os primeiros dispositivos (provavelmente protótipos de celulares da SonyEricsson e LG) já carregados com a JavaFX Mobile. O NetBeans 6.7 será lançado, incorporando um editor visual de telas para a JavaFX. Finalmente, haverá um release EA da JavaFX 2.0. No campo da especulação, o runtime JavaFX Mobile OTA (instalável em aparelhos já no mercado) também poderá ser disponibilizado, e aposto que a Sun aproveitará a fanfarra da JavaOne para finalizar o release open source da JavaFX;

·       4º. Trimestre: Chegarão ao mercado os primeiros aparelhos com a JavaFX Mobile pré-instalada (talvez já seja um release compatível com a 1.5);

·       Final de 2009: Release da JavaFX 2.0;

·       Início de 2010: JavaFX TV 1.0. Java SE 7 / JDK 7 FCS.

O problema

Vamos começar pelos requisitos, como num projeto de software qualquer. Nossa proposta é construir uma aplicação contendo uma animação gráfica como a da Figura 1.

OK, estou trapaceando com uma tela da aplicação já finalizada – o normal, nesta etapa, seria ter um rascunho esquemático (“wireframe”) da GUI. Mas vamos imaginar que você trabalha numa grande empresa onde os wireframes são produzidos por designers profissionais no Photoshop, de forma que são iguaizinhos à aplicação final. ;-)

  imagem

Figura 1. A aplicação a construir.

Seu funcionamento é simples de explicar:

·       A maior parte da janela é ocupada por algumas bolas, que podem se mover em direções arbitrárias, mas não podem ocupar a mesma posição nem ultrapassar as bordas da janela. Colisões refletem as bolas na direção oposta, de maneira razoavelmente fiel às leis da física;

·       Superposto à animação, temos também um mostrador de FPS (frames por segundo), atualizado a cada 3 segundos;

·       Uma toolbar permite Paralisar/reiniciar a animação e escolher o número de bolas;

·       Finalmente, desejamos criar esta mesma aplicação nas plataformas desktop (aplicação Java convencional ou Applet para browser) e móvel (dispositivos Java ME).

 

O objetivo expresso da aplicação criada é ser a mais parecida possível com outras versões do Bubblemark, criadas inicialmente para plataformas como Flash, Silverlight, Java com Swing, entre outras. Como se trata de um benchmark, queremos ter o melhor “escore” possível em FPS. E como se trata de um showcase da nova plataforma JavaFX, queremos ter um código que exiba boas práticas de programação, explorando bem seus recursos.

Do ponto de vista de sistemas mais convencionais (fora do escopo de multimídia, jogos e afins), esta aplicação pode não parecer muito “útil”. Mas a sua confecção exige o domínio da linguagem JavaFX Script e o uso de diversas APIs. E diferente de muitos outros demos iniciais de JavaFX (tipicamente dedicados somente a exibições de mídia ou animação), teremos um certo número de controles convencionais – uma toolbar contendo um botão e dois grupos de comboboxes – o que permite exercitar um pouco da programação de GUIs tradicionais; afinal, quem programa um botão, também programa um formulário de Ordem de Serviços com cinquenta componentes.

Mas também é importante começarmos a estudar as capacidades de animação da JavaFX, não só por ser um destaque da plataforma, mas por ser também uma necessidade de aplicações RIA. Não quero dizer com isso que toda aplicação RIA precise de alguma animação exuberante, com “cara de joguinho”. Mas é importante, em interfaces gráficas que se pretendem ricas, o uso de efeitos mais discretos: uma transição fade-in ao abrir um menu ou visão de detalhe; um frame interno com uma drop shadow para dar ilusão 3D; uma pequena animação de mandar voando para a lixeira um registro deletado, e assim por diante. Acontece que para implementar estes efeitos, você usa as mesmas técnicas do toolkit gráfico avançado e do engine de animação da JavaFX, que serão mostradas aqui. Futuramente, prometemos artigos mais focados num cenário “RIA Corporativo”.

No momento em que escrevo seria difícil oferecer isso ao leitor, pois a JavaFX 1.1 ainda é pobre no suporte a GUIs baseadas em formulário. A versão 1.5 já terá melhorias na integração com a Swing, além de um pacote completo de componentes nativos (baseados no Scene Graph). A JavaFX 1.1 já poderia ser usada para criar formulários complexos, mas isso exigiria alguma “impureza”, misturando código JavaFX com código Java/Swing.

Projeto e Alô, Mundo

Se você ainda não tem seu ambiente de desenvolvimento JavaFX instalado, este é o primeiro passo. Minha dica é começar pelo NetBeans 6.5 (ou superior) e, através do seu gerenciador de plugins, instalar todos os plugins da categoria JavaFX.

Crie um projeto do tipo JavaFX>JavaFX Script Application, selecionando Project Name = “JavaFX Balls”. O NetBeans lhe fará o favor de criar um arquivo Main.fx padrão, com o código estilo “Alô Mundo” da Listagem 1. Para ensinar a linguagem JavaFX Script, que é uma variante de Java, vou adotar a tática de assumir que o leitor conhece Java e ir explicando as diferenças.

 

Listagem 1. Main.fx gerado pelo NetBeans.

package jmballs;

 

import javafx.stage.Stage;

import javafx.scene.Scene;

import javafx.scene.text.Text;

import javafx.scene.text.Font;

 

Stage {

  title: "Application title"

  width: 250 height: 80

  scene: Scene {

    content: Text {

      font: Font { size : 24 }

      x: 10, y: 30

      content: "Application content"

    }

  }

}

 

A primeira esquisitice que o leitor perceberá é a ausência de uma classe, ou qualquer declaração reconhecível. Isso revela a característica “scripting” da linguagem, que permite definir funções, variáveis, e mesmo statements arbitrários no escopo global de um script.

Outra característica comum de linguagens de scripting é tornar o comando return implícito: uma função que deveria retornar determinado valor pode simplesmente terminar pela sua definição. Por exemplo, o bloco { 2 + 2 } é o mesmo que { return 2 + 2 }. Podemos deduzir, então, que o código da Listagem 1 possui um statement único que retorna um objeto Stage.

A criação deste objeto também é novidade. JavaFX Script suporta o new do Java, com invocação a construtor; mas a sintaxe preferida é aquela mostrada pela listagem, que podemos formalizar como:

<NomeDaClasse> { (<NomeDaPropriedade> : <Valor>)* }

Nem todas as propriedades podem ser inicializadas desta forma, só as de visibilidade correta (ver o quadro “Propriedades e Visibilidade em JavaFX Script”). A separação dos inicializadores por vírgula é opcional, mesmo se estiverem na mesma linha como “x: 10 y: 30; JavaFX é bem relaxada na pontuação, dispensando a maioria das vírgulas e ponto-e-vírgulas que são obrigatórias em Java.

Dentro do Stage existe uma propriedade content, cujo tipo é uma seqüência (especificamente, Node[]). Mas como a inicializamos com um único elemento, a JavaFX permite omitir os [], o que é muito conveniente pois também poupa um nível extra de endentação.

 

imagem

Figura 2. Nosso primeiro passo: Alô, JavaFX!

Uma vez vencida a sintaxe e executado o programa (Figura 2), o funcionamento do código é intuitivo. Podemos deduzir que o objeto-raiz Stage é equivalente a uma janela. As propriedades são quase todas óbvias – dimensões da janela, títulos, coordenadas. A propriedade content é a seqüência de componentes-filhos; o único que criamos, um Text, é o componente de label, capaz de exibir uma string de texto com customizações como tipo de fonte. O último “segredinho” é que, se a classe principal do programa retornar um Stage, este objeto será automaticamente exibido (tornado visível), sendo iniciado o processamento de eventos e outras atividades do toolkit gráfico. ...

Quer ler esse conteúdo completo? Tenha acesso completo