31 \

javafx_

Bruno Henrique de Oliveira | bruno.vky@live.comCursando Análise e Desenvolvimento de Sistemas na FATEC São José dos Campos, programa com Java desde 2010, focado em desenvolvimento Android e JavaFX, possui conhecimento em desenvolvimento de jogos em Android com a framework AndEngine.

Conhecendo esta IDE que facilita e dinamiza a criação de telas em JavaFX.

Agilizando a Criação de Telas em JavaFX com JavaFX Scene Builder

Este artigo apresenta o funcionamento e conceito do JavaFX Scene Builder, para facilitar a criação de telas em JavaFX, sem necessidade de template com código Java, e sim utilizando um arquivo XML. O leitor aprenderá a manipular esta IDE e a se comunicar com o código Java, através de MVC e Annotations, tornando o código limpo e extremamente efi caz.

/ 32

O JavaFX está cada vez mais entrando na pauta dos desenvolvedores de software e, mais especifica-

mente, entre os desenvolvedores Java. Os recursos alcançados por esta plataforma demonstram um crescimento contínuo, a cada atualização, os criado-res vêm com novidades relevantes. Porém, criar uma interface adequada no JavaFX pode ser tão complexo quanto às antigas aplicações Swing, devido a gama de componentes habilitados. No artigo “Toques de Requinte em Aplicações Desktop com JavaFX”, na edição 58, vimos a criação de uma simples tela de lo-gin utilizando JavaFX. Porém, criar formulários “na mão”, torna o processo cansativo e demorado, além de não obter recursos de programação capazes de re-duzir linhas de código e aumentar a produtividade.

Para solucionar este problema, é possível criar frames em um arquivo semelhante ao XML (chama-do FXML), onde possui toda a interface de sua tela e todas as propriedades necessárias. Então, o código Java interpreta aquele layout montado neste arquivo e identifica todos os componentes, através de Anno-tation (@FXML). O trabalho do desenvolvedor será apenas criar a lógica de implementação de cada ação e códigos ao abrir a tela, como uma troca de texto em um campo. Este arquivo FXML é feito na IDE JavaFX Scene Builder.

Esta IDE da Oracle pode ser baixada no link a se-guir: http://www.oracle.com/technetwork/java/javafx/downloads/index.html, juntamente com o download do JavaFX. Ela trabalha, além do FXML, com CSS, para recursos gráficos em componentes. Com visual simples e criação de telas com conceito drag-and--drop, o JavaFX Scene Builder é uma ferramenta importante para o desenvolvedor JavaFX. Veremos

na prática seu uso e a implementação dos conceitos MVC, facilitando a vida de desenvolvedores e desig-ners.

Conhecendo a interface da IDEPara demonstrarmos o funcionamento da IDE,

utilizaremos um exemplo clássico: uma tela de lo-gin com campos de texto para login e senha, e dois botões para confirmação da operação e encerrar aplicação. Além disso, terá um link para uma página de cadastro de novo usuário. Estes dois tópicos (lo-gin e novo usuário) serão dois painéis embutidos na mesma tela, onde surgirão conforme necessidade do usuário. Com o JavaFX Scene Builder, esta tarefa se torna muito simples, pois os componentes se tornam fáceis de manusear.

Primeiro, mostraremos a interface da IDE. Ao executá-la, veremos a tela principal (figura 1).

Agora, desvendaremos cada parte desta interfa-ce, para tornar a vida do desenvolvedor iniciante em JavaFX ainda mais fácil.

LibraryNesta parte, veremos todos os componentes

disponíveis no JavaFX. Para utilizá-los, basta que arrastemos o componente para dentro da tela, po-sicionando na coordenada X e Y desejada, podendo ser alterada posteriormente. Os componentes es-tão divididos por tipo: Containers, Controls, Popup Controls, Menu Content, Miscellaneous, Shapes e Charts, além de que cada Node possui um ícone que demonstra bem o resultado do mesmo. Na aba, existe um campo de texto para pesquisa dos componentes, caso precise de rapidez em sua busca. Basta digitar

Figura 1. Interface do JavaFX Scene Builder.

33 \

o início do nome do componente e uma filtragem é gerada para localização rápida do mesmo.

Na figura 2, veremos a aba Library, conforme ci-tado:

Figura 2. Aba Library.

HierarchyContém todos os componentes já adicionados à

tela. Ao gerar uma nova tela, um AnchorPane é ge-rado automaticamente para representar seu painel principal, onde conterá os demais itens. Como o pró-prio nome diz, a tela possui um esquema de hierar-quia, onde demonstra exatamente que cada Node se encontra dentro de um Parent, ou seja, de um com-ponente pai.

Na figura 3, veremos a representação de uma tela com um VBox dentro do AnchorPane principal, e três componentes dentro do VBox:

Figura 3. Aba Hierarchy.

ContentAqui ficará o conteúdo da tela, onde o desenvol-

vedor visualiza o resultado da mesma em runtime, conforme for colocando novos componentes nela. Tudo funciona em um sistema drag n’ drop, idêntico

ao WindowBuilder, do Eclipse para Swing, por exem-plo. Seu trabalho será apenas arrastar os componen-tes à tela, como já dito anteriormente. Você pode organizar seu layout após os componentes serem in-seridos na tela. Basta arrastar os componentes até a posição desejada.

Existe também algumas facilidades no menu de contexto deste painel. Por exemplo, se tivéssemos colocado os três componentes que estão dentro do VBox anterior, mas sem o uso do VBox, para criarmos um novo Box com este conteúdo dentro, basta clicar-mos com o botão direito do mouse, após selecionar-mos os três componentes, irmos na opção “Wrap in”, e escolhermos o VBox. Pronto! Os três componentes foram inseridos em um novo VBox. E também se qui-séssemos abrir o VBox para o tamanho completo da tela, basta clicarmos com o botão direito do mouse no VBox e selecionarmos a opção “Fit to Parent”. Ago-ra, o componente encontra-se com o tamanho full do AnchorPane principal.

Na figura 4, veremos um exemplo do Content Pa-nel:

Figura 4. Aba Content.

InspectorEste painel contém todas as propriedades de um

componente selecionado. Esta aba possui três “sub--abas”: Properties, Layout e Code. Aqui também pos-sui um campo de texto para pesquisa de uma proprie-dade específica, para agilizar a busca.

» Properties: possui todas as propriedades ge-rais do componente, como valor do texto, ID, efeitos, fontes, opacidade, visibilidade, entre outros. Além disso, possui opções de criação de CSS para estilizar o componente (veremos esta opção em breve), opções extras e de transfor-mação, como rotação, translação e escala.

/ 34

Figura 5. Aba Properties.

» Layout: nesta “sub-aba”, veremos todas as op-ções de posição do componente, além de largu-ra e altura preferida, mínima e máxima.

Figura 6. Aba layout.

» Code: neste local, podem-se criar os métodos de ação (listeners) do componente referido, como ação de clique, de mouse, de tecla etc. Veremos que o JavaFX com FXML funciona com injeção de dependências para facilitar o código do desenvolvedor. Entenderemos esta facilida-de em breve.

Figura 7. Aba Code.

Implementando o CSSPara utilizar CSS para estilizar sua aplicação,

você pode criar seu arquivo .CSS em qualquer IDE, ou simplesmente em um bloco de notas. Após sua cria-ção, basta irmos às abas superiores do JavaFX Scene Builder, clicar em “Preview” e depois em “Preview a Style Sheet...”, então, selecione o arquivo recém-cria-do. Após isto, volte à aba Properties, na parte de CSS, vá em “Style Class” e clique no botão “+”, então, sele-cione a classe do CSS responsável pelo efeito do seu componente. Você pode também criar o efeito CSS sem a necessidade de criar um arquivo próprio. Basta ir em “Style”, logo acima de “Style Class” e escreva o mesmo código CSS do arquivo, sem a necessidade de identificar um ID. Veja um exemplo na figura 8:

Figura 8. Uso do Style.

35 \

Criando a Tela de Login e Novo UsuárioAgora, iniciaremos a criação da tela de login e

novo usuário. Como citado anteriormente, criaremos dois painéis para isto, que serão visíveis conforme desejado pelo usuário. Começaremos pelo painel de login.

Tela de LoginEsta tela conterá campos de texto para login e se-

nha, dois botões para entrar no sistema e sair da apli-cação, além de um link para cadastro de novo usuário.

Na base, usaremos Labels, TextFields e Buttons, para selecionar cada item, vá na Library Panel e digite no campo de pesquisa o nome do componente desejado, então clique e arraste o mesmo até a tela. Deixaremos livre para o desenvolvedor utilizar recursos avança-dos e efeitos gráficos adequados para esta tela. Na figura 9, veremos o resultado do nosso painel:

Importante: estes componentes estão dentro de um AnchorPane, que por sua vez, está dentro do An-chorPane principal. Sem isto, ficará complicado va-riar a visibilidade dos painéis.

Figura 9. Painel de Login.

Figura 10. Tela de novo usuário.

/ 36

Tela de Cadastro de Novo UsuárioPara iniciarmos a criação deste painel, precisa-

mos deixar invisível o painel de login, para facilitar a organização. Para isto, basta selecionarmos o An-chorPane do login, ir na aba Properties, e clicar no check da opção “Visible”.

Neste outro painel, teremos campos de texto para nome completo, idade, login e senha, além de botões para salvar a ação e cancelar a operação, vol-tando ao painel de login. Novamente, deixaremos a criatividade para o desenvolvedor. O nosso exemplo ficou assim como a figura 10.

Com os dois painéis já criados, devemos deixar invisível este segundo e voltar a tornar visível o pai-nel de login, pois a exibição iniciará por ele.

Mais um fator importante é dar nomes (ID) aos dois AnchorPane’s: chamarei o painel de login de “paneLogin” e o painel de novo usuário de “paneNo-voUsuario”. Para isto, vá na aba Properties, e no item fx:id, digite o nome do componente. Este item é de extrema importância, pois este nome será identifica-do em código, através de injeção de dependência.

E, por fim, precisamos criar os métodos das ações dos botões, que também serão identificados em códi-go. Vamos à aba Code, em cada Button, e dê um valor para o campo “On Action”. Este será o nome do mé-todo que será criado em código, então dê um nome fácil para identificação. Não esqueça de acrescentar o símbolo “#” antes do nome do método. Na figura 11, veremos um exemplo de ação do botão de entrar no sistema:

Figura 11. Método onAction do botão “btEntrar”.

Após estas etapas, podemos colocar a “mão no código”.

Veremos que o código no JavaFX, com o uso de FXML, se torna muito simples, pois trabalhamos com o padrão MVC, dividindo as funções das classes de forma coesa. É necessária a criação de duas classes: Application (View) e Initializable (Controller).

Classe Application (View)Esta classe possui um código simples e enxuto,

justamente focado para a exibição da tela. Para isto, criamos um Parent, baseado no arquivo FXML, criado no JavaFX Scene Builder, e então criaremos normal-mente a Scene e o Stage, assim como a classe Appli-cation tradicional.

Listagem 1. Classe Application.

package application;

import javafx.application.Application;import javafx.fxml.FXMLLoader;import javafx.scene.Parent;import javafx.scene.Scene;import javafx.stage.Stage;

public class LoginApp extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage stage) throws Exception { Parent parent = FXMLLoader.load(getClass().getClassLoader() .getResource(“fxml/login.fxml”)); Scene scene = new Scene(parent); stage.setScene(scene); stage.setTitle(“Login”); stage.show(); } }

A única mudança deste código com a Application tra-dicional é o uso do Parent, sendo relacionado com o arquivo FXML criado (login.fxml). Utilizamos o mé-todo FXMLLoader.load(URL url) para este fim, indi-cando o caminho do arquivo como parâmetro.

Caso tenha CSS na tela, necessita indicar na Sce-ne, utilizando o seguinte código:

scene.getstylesheets().add(getClass().getClassLoader().getResource(“css/login.css”).toExternalForm());

Agora, precisamos criar a classe Initializable (Controller), sem ela, esta tela ainda não rodará.

Classe Initializable (Controller)Esta classe com certeza é novidade entre os de-

senvolvedores iniciantes em JavaFX. Aqui conterá todas as funcionalidades da tela indicada, em ou-tras palavras, será o controlador da tela. Ela é im-plementada da interface Initializable e necessita da utilização do método initialize (URL url, Resource-Bundle bundle). Veremos que, nesta classe, usam-se conceitos de injeção de dependência e Annotations, para enxugar ainda mais o código. No próprio Java-FX Scene Builder, podemos ver o esqueleto da classe Controller. Vá na aba View e clique em “Show Sample

37 \

> Toques de Requinte em Aplicações Desktop com JavaFX,

de Bruno Henrique de Oliveira, Revista MundoJ Ed. 58.

> JavaFX Scene Builder User Guide - http://docs.oracle.

com/javafx/scenebuilder/1/user_guide/jsbpub-user_guide.

htm

/referências

Controller Skeleton”, então verá um campo de texto mostrando o esqueleto da classe.

Mostraremos o código e depois explicaremos:

Listagem 2. Classe Login Controller.

package controller;

import java.net.URL;import java.util.ResourceBundle;import javafx.event.ActionEvent;import javafx.fxml.FXML;import javafx.fxml.Initializable;import javafx.scene.control.PasswordField;import javafx.scene.control.TextField;import javafx.scene.layout.AnchorPane;

public class LoginController implements Initializable { @FXML private AnchorPane paneLogin, paneNovoUsuario; @FXML private TextField txLogin, txNome, txIdade, txLoginUsuario; @FXML private PasswordField txSenha, txSenhaUsuario;

@Override public void initialize(URL url, ResourceBundle bundle) { } @FXML protected void btEntrarAction(ActionEvent evt) { // Logar no sistema } @FXML protected void btSairAction(ActionEvent evt) { System.exit(0); } @FXML protected void btCadastrarAction(ActionEvent evt) { // Cadastrar novo usuário } @FXML protected void btCancelarAction(ActionEvent evt) {

// Cancelar operação paneLogin.setVisible(true); paneNovoUsuario.setVisible(false); } @FXML protected void linkCliqueAquiAction(ActionEvent evt) { paneLogin.setVisible(false); paneNovoUsuario.setVisible(true); } }

Primeiro, para criarmos os componentes, basta que declaremos os objetos e anotemos com a Anno-tation FXML (@FXML). Uma vez o controller identifi-cado, irá buscar os componentes de mesmo nome que o declarado no arquivo FXML. Se o nome for diferen-te, dará um Exception em tempo de execução. Com isto, não há necessidade de instanciarmos os compo-nentes e identificarmos na tela. O JavaFX fará isto por “debaixo dos panos”.

Dentro do método initialize, ficarão os códigos de implementação inicial dos componentes, como uma troca de texto ao abrir a tela, por exemplo. No nosso exemplo, não necessitaremos de códigos ali dentro.

E, por fim, temos a criação das ações (listeners) dos botões e do Hyperlink. Primeiro, devemos criar na aba Code, do JavaFX Scene Builder, os métodos adequados, então, indicamos a construção destes métodos (por padrão, é adequado indicá-los como protegidos – protected), passando como parâmetro o tipo do evento (pode ser ActionEvent – ações de cli-que, MouseEvent – ações de mouse, KeyEvent – ações de tecla, entre outros).

Considerações finaisCom a união dos artigos “Toques de Requinte em

Aplicações Desktop com JavaFX” (edição 58) e este artigo podemos facilmente iniciar o desenvolvimen-to de aplicações Desktop de alta qualidade gráfica e organização de estrutura de códigos eficaz. Vimos que o JavaFX possui recursos não apenas visuais, mas estruturados, utilizando conceitos MVC e injeções de dependência, que reduz imensamente a ponte entre o desenvolvedor e a criação de aplicações avançadas.