Você está na página 1de 29

Su

bs
cr
ib
e
to

code.makery

Up
d
at
es
Learning how to code.

HOME LIBRARY PATHS BLOG ABOUT

Edit on GitHub

Tutorial JavaFX 8 - Parte 1: Scene


Builder
Sep 10, 2014 Updated Nov 06, 2014

Artigos nesta serie Download de Cdigos Fonte Linguagens

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Tpicos na Parte 1
Conhecendo o JavaFX
Criando e inicializando um projeto JavaFX
Utilizando o Scene Builder para modelar a interce com o usurio
Estrutura bsica da aplicao utilizando o padro Model-View-Controller (MVC)

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Pr-requisitos
Ultima verso Java JDK 8 (Que inclua o JavaFX 8).
Eclipse 4.3ou posterior com o plugin e(fx)clipse . A modo mais fcil efetuar o
download da distro pr-configurada da fonte: e(fx)clipse website. Como alternativa
voc pode usar o: update site para sua insalao do Eclipse.
Scene Builder 2.0 ou posterior.

Configuraes do Eclipse
Ns precisamos configurar o Eclipse para usar o JDK 8, bem como onde ele ira encontrar o
Scene Builder:

1. Abra a aba Preferences do Eclipse e navegue at Java | Installed JREs.

2. Clique em Add..., selecione Standard VM e a informe a Pasta onde se encontra o JDK 8.

3. Remova os outros JREs ou JDKs ento o JDK 8 torna-se o padro.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
4. Navegue at Java | Compiler. Altere o Compiler compliance level para 1.8.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
5. Naviegue at preferences na aba JavaFX . Especifique o caminho at o executvel do
Scene Builder.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Links teis
Voc pode querer colocar os links seguintes nos favoritos (em ingls):

Java 8 API - JavaDoc para classes Java padro


JavaFX 8 API - JavaDoc para classes JavaFX
ControlsFX API - JavaDoc para o Projeto ControlsFX para controles JavaFX adicionais
Oracle's JavaFX Tutorials - Tutoriais Oficiais JavaFX da Oracle

Agora vamos comear!

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Criar um novo Projeto JavaFX
No Eclipse (com o plugin e(fx)clipse instalado) v em File | New | Other... e escolha JavaFX
Project.
Especifique o nome do projeto (ex.: AddressApp) e clique em Finish.

Remova o pacote o contedo da aplicao se foi gerado automaticamente.

Criar os Pacotes
Bem no comeo, ns seguiremos os Design Patterns (Padres de Design) para
desenvolvermos um bom software. Uma boa prtica muito importante usar o Design
Pattern Model-View-Controller (MVC). De acordo com este Pattern (Padro) ns dividimos
nosso cdigo em 3 unidades e criamos um pacote para cada (Clique com boto direito na
pasta src, New... | Package):

ch.makery.address - contm a maioria das classes controller(regras de negcio)


ch.makery.address.model - contm classes de modelo
ch.makery.address.view - contm views

Nota: Nosso pacote view tambm ter alguns controladores que esto diretamente ligados
a uma nica view. Vamos cham-los de view-controllers.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Criar o Arquivo de Layout FXML
Existem duas maneiras de criar a interface de usurio. Usando um arquivo XML ou
programando tudo em Java. Pesquisando na internet voc encontrar ambas formas. Ns
usaremos XML (terminando em .fxml) para a maioria das partes. Eu acho que esta uma
maneira mais clara de manter o controller e a view separados entre si. Alm disso, ns
podemos usar o editor grfico Scene Builder para editar nosso XML. Isso significa que ns
notemos que trabalhar diretamente com XML.

Clique com o boto direito no pacote view e crie um novo FXML Document chamado
PersonOverview .

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Design com Scene Builder
Note: Se voc no poder obt-lo para trabalhar, baixe o cdigo fonte desta parte do
tutorial e use o arquivo FXML pronto.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Clique com o boto direito em PersonOverview.fxml e escolha Open with Scene Builder.
Agora voc deve ver o Scene Builder com apenas um AnchorPane (visvel na Hierarquia
(Hierarchy) a esquerda).

1. Selecione o Anchor Pane na sua Hierarchy e ajuste o tamanho em Layout (lado


direito):

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
2. Adicione um Split Pane (Horizontal Flow) arrastando ele da Biblioteca (Library) at a
rea principal. Clique com o boto direito no Split Pane na parte Hierarchy e selecione
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Fit to Parent.

3. Arraste uma TableView (em Controls) para dentro do lado esquerdo do SplitPane.
Selecione a TableView (no uma Column) e defina a seguinte restrio de layout
(layout constraints) TableView. Dentro de um AnchorPane voc pode sempre definir
ncoras (anchors) para as quatro bordas (mais informao sobre Layouts (em ingls)).

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
4. V ao menu Preview | Show Preview in Window para ver, se ele se comporta
coretamente. Tente redimensionar a janela. A TableView deve redimensionar junto
com a jaanela como ela foi ancorada s bordas.

5. Mude o texto da coluna (em Properties) para "First Name" e "Last Name".

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
6. Selecione a TableView, escolha constrained-resize para a Column Resize Policy (em
Properties). Isso certifica que a coluna sempre toma todo o espao disponvel.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
7. Adicione uma Label no lado direito com o texto "Person Details" (dica: use a pesquisa
para encontrar a Label). Ajuste seu layout usando anchors.

8. Adicione um GridPane no lado direito, selecione-o e ajuste seu layout usando


ncoras (top, right and left).

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
9. Adicione as seguintes Labels s celulas.
Nota: Para adicionar uma linha ao GridPane selecione um nmero de linha
existente(ficar amarelo), clique com o boto direito em um nmero de linha e
escolha "Add Row".

10. Adicione trs botes na parte de baixo. Dica: Selecione todos eles, clique com o boto
direito e clique em Wrap In > HBox. Este agrupa os botes juntos. Voc pode precisar
de especificar a spacing (espaamento) dentro do HBox. Ento, definir as ncoras

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
(direita e em baixo) ento eles ficam no lugar certo.

11. Agora voc deve ver algo como o seguinte. Use o menu Preview para testar o
comportamento do redimensionamento.

Criar a Aplicao Principal


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Ns precisamos de outro FXML para nosso layout base que conter uma barra de menu e
envolve a PersonOverview.fxml criada.

1. Crie outro FXML Document dentro do pacote view chamado RootLayout.fxml . Desta
vez, escolha BorderPane como o elemento base (root element).

2. Abra o RootLayout.fxml no Scene Builder.

3. Redimensione o BorderPane com Pref Width definida em 600 e Pref Height definida

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
em 400.

4. Adicione uma MenuBar no slot TOP. Ns no implementaremos a funcionalidade do


menu agora.

A Classe Principal JavaFX


Agora, ns precisamos criar a main java class (classe principal java) que inicia nossa
aplicao com o RootLayout.fxml e adiciona o PersonOverview.fxml no centro.

1. Clique com o boto direito em nosso projeto e escola New | Other... e escolha JavaFX

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Main Class.

2. Ns chamaremos a classe de MainApp e colocaremos no pacote de controller


ch.makery.address (nota: este o pacote pai dos subpacotes view e model ).

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
A classe MainApp.java gerada estende de Application e contm dois mtodos. Esta a
estrutura bsica que ns precisamos para iniciar uma aplicao JavaFX. A parte mais
importante para ns o mtodo start(Stage primaryStage) . Ele chamado
automaticamente quando a aplicao quando a aplicao launched (lanada) do mtodo
main .

Como voc v, o mtodo start(...) recebe um Stage como parmetro. O grfico seguinte
ilustra a estrutura de cada aplicao JavaFX:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Image Source: http://www.oracle.com

como uma pea de teatro: O Stage (palco) o container principal que geralmente uma
Window (janela) com uma borda e os botes tpicos minimizar, maximizar e fechar. Dentro
do Stage (palco) voc adiciona uma Scene (cena) que pode, claro, ser trocada por outra
Scene (cena). Dentro da Scene (cena) os nodos do JavaFX como AnchorPane , TextBox , etc.
so adicionados.

Para mais informaes sobre como Trabalhando com JavaFX Scene Graph (ingls).

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Abra MainApp.java e troque o cdigo com o seguinte:

package ch.makery.address;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class MainApp extends Application {

private Stage primaryStage;


private BorderPane rootLayout;

@Override
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
this.primaryStage.setTitle("AddressApp");

initRootLayout();

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
showPersonOverview();
}

/**
* Inicializa o root layout (layout base).
*/
public void initRootLayout() {
try {
// Carrega o root layout do arquivo fxml.
FXMLLoader loader = new FXMLLoader();
loader.setLocation(MainApp.class.getResource("view/RootLayout.fxml"));
rootLayout = (BorderPane) loader.load();

// Mostra a scene (cena) contendo oroot layout.


Scene scene = new Scene(rootLayout);
primaryStage.setScene(scene);
primaryStage.show();
} catch (IOException e) {
e.printStackTrace();
}
}

/**
* Mostra o person overview dentro do root layout.
*/
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
public void showPersonOverview() {
try {
// Carrega o person overview.
FXMLLoader loader = new FXMLLoader();
loader.setLocation(MainApp.class.getResource("view/PersonOverview.fxml"));
AnchorPane personOverview = (AnchorPane) loader.load();

// Define o person overview dentro do root layout.


rootLayout.setCenter(personOverview);
} catch (IOException e) {
e.printStackTrace();
}
}

/**
* Retorna o palco principal.
* @return
*/
public Stage getPrimaryStage() {
return primaryStage;
}

public static void main(String[] args) {


launch(args);
}
}
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
}

Os vrios comentrios devem te dar uma idia do que est acontecendo.

Se voc rodar a sua aplicao agora, voc deve ver algo como o screenshot no comeo
deste post.

Problemas Frequentes
Se o JavaFX no puder encontrar o arquivo fxml que voc especificou, voc deve ver a
seguinte mensagem de erro:

java.lang.IllegalStateException: Location is not set.

Para resolver isso, verifique novamente se voc escreveu o nome dos seus arquivos fxml
corretamente!

Se isso ainda no funcionar, baixe o cdigo fonte desta parte do tutorial e tente com o
arquivo fxml incluso.

O Que Vem Depois?


No Tutorial Parte 2 ns adicionaremos algumas funcionalidades de dados nossa
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
AddressApp.

Alguns outros artigos que voc deve achar interessante (ingls)


JavaFX Dialogs
JavaFX Date Picker
JavaFX Exemplo de Manipulao de Eventos
JavaFX Ordenamento e Filtragem de TableView
JavaFX Renderizador de Clulas da TableView

Intro 1 2 3 4 5 6 7


Subscribe to receive updates by Email.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Enter email Get updates

Created by Marco Jakob Licensed under Creative Commons Attribution 4.0

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com