com JavaFX Scene Builder

javafx_ Agilizando a Criação de Telas em JavaFX com JavaFX Scene Builder Conhecendo esta IDE que facilita e dinamiza a criação de telas em JavaFX. 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 eficaz. Bruno Henrique de Oliveira bruno.vky@live.com Cursando 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. 31 \

JavaFX está cada vez mais entrando na pauta dos O desenvolvedores de software e, mais especificamente, entre os desenvolvedores Java. Os recursos alcançados por esta plataforma demonstram um crescimento contínuo, a cada atualização, os criadores 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 login 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 reduzir linhas de código e aumentar a produtividade. Para solucionar este problema, é possível criar frames em um arquivo semelhante ao XML (chamado 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 Annotation (). 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 seguir: 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 designers. Conhecendo a interface da IDE Para demonstrarmos o funcionamento da IDE, utilizaremos um exemplo clássico: uma tela de login 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 (login 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 interface, para tornar a vida do desenvolvedor iniciante em JavaFX ainda mais fácil. Library Nesta parte, veremos todos os componentes disponíveis no JavaFX. Para utilizá-los, basta que arrastemos o componente para dentro da tela, posicionando na coordenada X e Y desejada, podendo ser alterada posteriormente. Os componentes estã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. / 32

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 citado: Figura 2. Aba Library. Hierarchy Contém todos os componentes já adicionados à tela. Ao gerar uma nova tela, um AnchorPane é gerado automaticamente para representar seu painel principal, onde conterá os demais itens. Como o próprio nome diz, a tela possui um esquema de hierarquia, onde demonstra exatamente que cada Node se encontra dentro de um Parent, ou seja, de um componente 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: ao WindowBuilder, do Eclipse para Swing, por exemplo. Seu trabalho será apenas arrastar os componentes à tela, como já dito anteriormente. Você pode organizar seu layout após os componentes serem inseridos 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 clicarmos com o botão direito do mouse, após selecionarmos 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 quisé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. Agora, o componente encontra-se com o tamanho full do AnchorPane principal. Na figura 4, veremos um exemplo do Content Panel: Figura 4. Aba Content. Figura 3. Aba Hierarchy. Content Aqui ficará o conteúdo da tela, onde o desenvolvedor visualiza o resultado da mesma em runtime, conforme for colocando novos componentes nela. Tudo funciona em um sistema drag n drop, idêntico Inspector Este painel contém todas as propriedades de um componente selecionado. Esta aba possui três sub- -abas : Properties, Layout e Code. Aqui também possui um campo de texto para pesquisa de uma propriedade específica, para agilizar a busca.»» Properties: possui todas as propriedades gerais 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 transformação, como rotação, translação e escala. 33 \

»» 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 facilidade em breve. Figura 5. Aba Properties.»» Layout: nesta sub-aba, veremos todas as opções de posição do componente, além de largura e altura preferida, mínima e máxima. Figura 7. Aba Code. Implementando o CSS Para 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-criado. Após isto, volte à aba Properties, na parte de CSS, vá em Style Class e clique no botão +, então, selecione 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 6. Aba layout. Figura 8. Uso do Style. / 34

Criando a Tela de Login e Novo Usuário Agora, 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 Login Esta tela conterá campos de texto para login e senha, dois botões para entrar no sistema e sair da aplicaçã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çados 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 AnchorPane principal. Sem isto, ficará complicado variar a visibilidade dos painéis. Figura 9. Painel de Login. Figura 10. Tela de novo usuário. 35 \

Tela de Cadastro de Novo Usuário Para iniciarmos a criação deste painel, precisamos deixar invisível o painel de login, para facilitar a organização. Para isto, basta selecionarmos o AnchorPane 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, voltando 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 painel 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 panenovousuario. 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á identificado 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ódigo. 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: 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 tradicional é o uso do Parent, sendo relacionado com o arquivo FXML criado (login.fxml). Utilizamos o método FXMLLoader.load(URL url) para este fim, indicando o caminho do arquivo como parâmetro. Caso tenha CSS na tela, necessita indicar na Scene, utilizando o seguinte código: 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 normalmente a Scene e o Stage, assim como a classe Application tradicional. 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 desenvolvedores iniciantes em JavaFX. Aqui conterá todas as funcionalidades da tela indicada, em outras palavras, será o controlador da tela. Ela é implementada 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 / 36

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 { private AnchorPane panelogin, panenovousuario; private TextField txlogin, txnome, txidade, txloginusuario; private PasswordField txsenha, txsenhausuario; @Override public void initialize(url url, ResourceBundle bundle) { protected void btentraraction(actionevent evt) { // Logar no sistema protected void btsairaction(actionevent evt) { System.exit(0); protected void btcadastraraction(actionevent evt) { // Cadastrar novo usuário protected void btcancelaraction(actionevent evt) { // Cancelar operação panelogin.setvisible(true); panenovousuario.setvisible(false); 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 Annotation FXML (). Uma vez o controller identificado, irá buscar os componentes de mesmo nome que o declarado no arquivo FXML. Se o nome for diferente, dará um Exception em tempo de execução. Com isto, não há necessidade de instanciarmos os componentes 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 clique, MouseEvent ações de mouse, KeyEvent ações de tecla, entre outros). Considerações finais Com a união dos artigos Toques de Requinte em Aplicações Desktop com JavaFX (edição 58) e este artigo podemos facilmente iniciar o desenvolvimento 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. > 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 37 \