bs

Su
e
ib
cr
to

d
Up

code.makery

es
at

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

open in browser PRO version

Download de Cdigos Fonte

Are you a developer? Try out the HTML to PDF API

Linguagens

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

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