Code Makery Ch Library Javafx 8 Tutorial Pt Part1

7/21/2019 Code Makery Ch Library Javafx 8 Tutorial Pt Part1

1/29

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

code.makeryLearning how to code.

Sub

scribeto

Updates

HOME LIBRARY PATHS BLOG ABOUT

Edit on GitHub

Tutorial JavaFX 8 -Parte 1: SceneBuilderSep 10, 2014 Updated Nov 06, 2014

Artigos nesta serie Download de Cdigos Fonte Linguagens
https://tinyletter.com/codemakeryhttps://tinyletter.com/codemakeryhttps://tinyletter.com/codemakeryhttp://code.makery.ch/http://code.makery.ch/library/http://code.makery.ch/paths/http://code.makery.ch/blog/http://code.makery.ch/about/https://tinyletter.com/codemakeryhttp://code.makery.ch/http://code.makery.ch/http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://code.makery.ch/https://tinyletter.com/codemakeryhttp://code.makery.ch/http://code.makery.ch/library/http://code.makery.ch/paths/http://code.makery.ch/blog/http://code.makery.ch/about/https://github.com/marcojakob/code.makery.ch/edit/master/collections/library/javafx-8-tutorial-pt-part1.md


2/29


Tpicos na Parte 1Conhecendo 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)
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf


3/29


Pr-requisitosUltima 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 sitepara sua insalao do Eclipse.

Scene Builder 2.0ou posterior.

Configuraes do EclipseNs 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 emAdd..., selecione Standard VMe a informe aPastaonde se encontra o JDK 8.

3. Remova os outros JREs ou JDKs ento o JDK 8 torna-se o padro.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://www.oracle.com/technetwork/java/javase/downloads/index.htmlhttp://efxclipse.bestsolution.at/install.html#all-in-onehttp://www.eclipse.org/efxclipse/install.htmlhttp://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-info-2157684.html


4/29


4. Navegue at Java | Compiler. Altere o Compiler compliance level para 1.8.


5/29


5. Naviegue at preferences na aba JavaFX. Especifique o caminho at o executvel do

Scene Builder.


6/29


Links teisVoc 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 ControlsFXpara controles JavaFX adicionais

Oracle's JavaFX Tutorials- Tutoriais Oficiais JavaFX da Oracle

Agora vamos comear!
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://docs.oracle.com/javase/8/docs/api/http://docs.oracle.com/javase/8/javafx/api/http://controlsfx.bitbucket.org/http://fxexperience.com/controlsfx/http://docs.oracle.com/javase/8/javafx/get-started-tutorial/get_start_apps.htm


7/29


Criar um novo Projeto JavaFXNo Eclipse (com o plugin e(fx)clipse instalado) v emFile | New | Other...e escolha JavaFX

Project.

Especifique o nome do projeto (ex.:AddressApp) e clique emFinish.

Remova o pacote o contedo da aplicaose foi gerado automaticamente.

Criar os PacotesBem 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 maioriadas 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.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://en.wikipedia.org/wiki/Model_View_Controller


8/29


Criar o Arquivo de Layout FXMLExistem 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 novoFXML Documentchamado

PersonOverview .


9/29

df d mi b PRO i Are you a developer? Try out the HTML to PDF API


10/29

df di b PRO i Are you a developer? Try out the HTML to PDF API

Design com Scene BuilderNote:Se voc no poder obt-lo para trabalhar, baixe o cdigo fonte desta parte do

tutorial e use o arquivo FXML pronto.


11/29

df di b PRO i A d l ? T t th HTML t PDF API

Clique com o boto direito em PersonOverview.fxml e escolha Open with Scene Builder.

Agora voc deve ver o Scene Builder com apenas umAnchorPane(visvel na Hierarquia

(Hierarchy) a esquerda).

1. Selecione oAnchor Panena sua Hierarchy e ajuste o tamanho em Layout (lado

direito):


12/29df di b PRO i A d l ? T t th HTML t PDF API

2. Adicione um Split Pane (Horizontal Flow)arrastando ele da Biblioteca (Library) at a

rea principal. Clique com o boto direito no Split Panena parteHierarchye selecione

Fi P


13/29df di b PRO i

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

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 umAnchorPanevoc pode sempre definir

ncoras (anchors) para as quatro bordas (mais informao sobre Layouts (em ingls)).
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://docs.oracle.com/javase/8/javafx/layout-tutorial/builtin_layouts.htm


14/29df di b PRO iAre you a developer? Try out the HTML to PDF API

4. V ao menuPreview | Show Preview in Windowpara 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".


15/29df di b PRO iAre you a developer? Try out the HTML to PDF API

6. Selecione a TableView, escolha constrained-resizepara a Column Resize Policy(em

Properties). Isso certifica que a coluna sempre toma todo o espao disponvel.


16/29

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

7. Adicione umaLabelno lado direito com o texto "Person Details" (dica: use a pesquisa

para encontrar aLabel). Ajuste seu layout usando anchors.

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

ncoras (top, right and left).

9 Adicione as seguintes Labels s celulas


17/29

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

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


18/29


(direita e em baixo) ento eles ficam no lugar certo.

11. Agora voc deve ver algo como o seguinte. Use o menuPreviewpara 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


19/29


Ns precisamos de outro FXML para nosso layout base que conter uma barra de menu e

envolve a PersonOverview.fxml criada.

1. Crie outroFXML Documentdentro do pacote view chamado RootLayout.fxml . Desta

vez, escolhaBorderPanecomo o elemento base (root element).

2. Abra o RootLayout.fxml no Scene Builder.

3. Redimensione oBorderPanecomPref Widthdefinida em 600 ePref Heightdefinida

em 400.


20/29


em 400.

4. Adicione umaMenuBarno slot TOP. Ns no implementaremos a funcionalidade do

menu agora.

A Classe Principal JavaFXAgora, 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 escolaNew | Other...e escolha JavaFX

Main Class.


21/29


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 ).


22/29


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 mtodomain .

Como voc v, o mtodo start(...) recebe um Stage como parmetro. O grfico seguinte

ilustra a estrutura de cada aplicao JavaFX:


23/29


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 outraScene (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).
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://www.oracle.com/http://docs.oracle.com/javase/8/javafx/scene-graph-tutorial/scenegraph.htm


24/29


Abra MainApp.java e troque o cdigo com o seguinte:

packagech.makery.address;

importjava.io.IOException;

importjavafx.application.Application;

importjavafx.fxml.FXMLLoader;

importjavafx.scene.Scene;

importjavafx.scene.layout.AnchorPane;

importjavafx.scene.layout.BorderPane;

importjavafx.stage.Stage;

publicclassMainAppextendsApplication{

privateStageprimaryStage;

privateBorderPanerootLayout;

@Override

publicvoidstart(StageprimaryStage){

this.primaryStage =primaryStage;

this.primaryStage.setTitle("AddressApp");

initRootLayout();


25/29

publicvoidshowPersonOverview(){


26/29


try{

// Carrega o person overview.

FXMLLoaderloader =newFXMLLoader();

loader.setLocation(MainApp.class.getResource("view/PersonOverview.fxml"));

AnchorPanepersonOverview =(AnchorPane)loader.load();

// Define o person overview dentro do root layout.

rootLayout.setCenter(personOverview);

}catch(IOExceptione){

e.printStackTrace();

}

}

/**

* Retorna o palco principal.

* @return

*/

publicStagegetPrimaryStage(){

returnprimaryStage;

}

publicstaticvoidmain(String[]args){

launch(args);

}

}


27/29


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 FrequentesSe 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 2ns adicionaremos algumas funcionalidades de dados nossa

AddressApp.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://code.makery.ch/library/javafx-8-tutorial/pt/part2/


28/29


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 2 3 4 5 6 7

Subscribe to receive updates by Email.

1

Enter email Get updates
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://code.makery.ch/blog/javafx-8-dialogs/http://code.makery.ch/blog/javafx-8-date-picker/http://code.makery.ch/blog/javafx-8-event-handling-examples/http://code.makery.ch/blog/javafx-8-tableview-sorting-filtering/http://code.makery.ch/blog/javafx-8-tableview-cell-renderer/http://code.makery.ch/library/javafx-8-tutorial/pt/http://code.makery.ch/library/javafx-8-tutorial/pt/part2/http://code.makery.ch/library/javafx-8-tutorial/pt/part3/http://code.makery.ch/library/javafx-8-tutorial/pt/part4/http://code.makery.ch/library/javafx-8-tutorial/pt/part5/http://code.makery.ch/library/javafx-8-tutorial/pt/part6/http://code.makery.ch/library/javafx-8-tutorial/pt/part7/https://tinyletter.com/codemakeryhttps://twitter.com/codemakeryhttps://plus.google.com/+MarcoJakob7http://code.makery.ch/rsshttps://tinyletter.com/codemakeryhttp://code.makery.ch/library/javafx-8-tutorial/pt/part1/


29/29


p

Created by Marco Jakob Licensed under Creative Commons Attribution 4.0
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=http%3a%2f%2fcode.makery.ch%2flibrary%2fjavafx-8-tutorial%2fpt%2fpart1%2f&id=ma-150325121829-3e3705fahttp://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://code.makery.ch/abouthttp://creativecommons.org/licenses/by/4.0/

Code Makery Ch Library Javafx 8 Tutorial Pt Part1

Documents

Transcript of Code Makery Ch Library Javafx 8 Tutorial Pt Part1