Code Makery CH Library Javafx 8 Tutorial PT Part1 PDF

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)
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.
4. Navegue at Java | Compiler. Altere o Compiler compliance level para 1.8.
5. Naviegue at preferences na aba JavaFX . Especifique o caminho at o executvel do
Scene Builder.
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!
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.
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 .
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.
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):
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
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)).
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".
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.
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).
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
(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

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
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
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 ).
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:
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).
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();
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.
*/
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);
}
}
}
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
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.
Enter email Get updates
Created by Marco Jakob Licensed under Creative Commons Attribution 4.0

Code Makery CH Library Javafx 8 Tutorial PT Part1 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Code Makery CH Library Javafx 8 Tutorial PT Part1 PDF

Uploaded by

Copyright:

Available Formats

Su

HOME LIBRARY PATHS BLOG ABOUT

Tutorial JavaFX 8 - Parte 1: Scene

Artigos nesta serie Download de Cdigos Fonte Linguagens

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.

Java 8 API - JavaDoc para classes Java padro

Agora vamos comear!

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

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

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

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

Criar a Aplicao Principal

2. Abra o RootLayout.fxml no Scene Builder.

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

A Classe Principal JavaFX

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

public class MainApp extends Application {

private Stage primaryStage;

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

// Define o person overview dentro do root layout.

public static void main(String[] args) {

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

java.lang.IllegalStateException: Location is not set.

O Que Vem Depois?

Alguns outros artigos que voc deve achar interessante (ingls)

Created by Marco Jakob Licensed under Creative Commons Attribution 4.0

You might also like