Um mini-curso apresentado no Just Java 2013 apresentando as maiores características do JavaFX e o respectivo projeto Open Source: OpenJFX

1. OpenJFX/JavaFX
Introdução à nova API gráfica do Java

2. Quem é William

3. Objetivo do Mini-Curso
Apresentar o JavaFX, a nova API gráfica da
plataforma Java
● História e conceitos básicos
● Apresentação das principais classes da API
● Ferramentas e projetos Open Source
● Criação de uma aplicação

4. Conteúdo
● Parte I: Básico e teoria
● Parte II: Conhecendo a API
● Parte III: Criando aplicações

5. Parte I - Introdução e Teoria

6. O que é OpenJFX?
O JavaFX é uma API nova para criação de
aplicações gráficas para a plataforma Java;
OpenJFX é o projeto Open Source do JavaFX
que ainda está em processo de abertura de
código...

7. História
● F3 - Chris Oliver
● JavaFX Script 1.0 - 2008
● Oracle compra Sun e anuncia investimentos
pesados no JavaFX - 2010
● JavaFX 2 se torna puro Java - Início 2011
● Projeto OpenJFX - Fim 2011
● JavaFX será parte do Java no Java 8 -
Futuro
● Java 9 não terá mais Java Swing...

8. Visão geral
● A API contém recursos para criar interface gráfica com
o usuário, animações, conteúdo multímidia, mostrar
páginas WEB, conteúdo 3D, estilizar com CSS, usar
XML para a interface...
● É possível também executar JavaFX "embebbed",
como em um Raspberry PI, por exemplo;
● Com a versão 2 é possível fazer aplicações 3D, mas
isso irá se consolidadar na versão 3;
● JavaFX pode ser distribuído como JAR,
empacotamento nativo (exe, rpm, etc), applet ou JNLP

9. Demonstrações
Ensemble e outros exemplos do livro
Exemplos do livro Pro JavaFX Platform 2

10. Parte II - Prática

11. ● JDK 6+, JavaFX e Scene Builder
disponíveis em:
http://www.oracle.com/technetwork/pt/java/index.html
● Netbeans 7.3
Pré requisitos

12. Códigos de Exemplo
+ aprendendo-javafx.blogspot.com
docs.oracle.com/javafx

13. Criando projetos JavaFX
no Netbeans
File -> New Project

14. "Olá Mundo"
● Crie o projeto ola-mundo-javafx
● Dentro da classe start, use o seguinte
código:
Text txt = new Text("Olá Mundo");
StackPane root = new StackPane();
root.getChildren().add(txt);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();

15. Stage e Scene
● Abstração de teatro: usa os conceitos Palco(Stage) e
Cena(Scene)
● A classe principal sempre herda de javafx.
application.Application
● Seu código vai no método start(Stage)
● Todos os atores(componentes da Cena) herdam de
javafx.scene.Node
● As classes do JavaFX ficam no jar jfxrt.jar

16. Java Plano X Builders
● Usando Java Plano:
Text txt = new Text("Olá Mundo");
txt.setTranslateX(10);
txt.setTranslateY(50);
txt.setRotate(30);
● Usando Builders
Text txt = TextBuilder.create()
.text("Hello World")
.translateX(10)
.translateY(50)
.rotate(30).build();

17. Uma visão geral da API
Scene Graph - Elementos hierárquicos do
mesmo tipo: Node

18. A classe Node
Todos elementos na tela são um javafx.
scene.Node
Propriedades importantes do Node:
● Effect: Permitir adicionar um efeito ao node
(veremos mais a frente)
● Rotation: Permitir rotacionar o Node
● visible
● layoutX e layoutY: Posicionamento
● on* e

19. A classe Node: Prática
1. Crie um projeto JavaFX simples e chame de
classe-node
2. Adicione um javafx.scene.layout.Pane à
Scene e um javafx.scene.text.Text
3. Text é um __________?
4. Mude as propriedades do Text, brinque com
as propriedades, explore a API

20. A classe Node: Prática

21. Imagens e formas
geométricas
Temos diversas formas geométricas no pacote
javafx.scene.shape.
Há diversas formas geométricas que podem
ser usadas e todas herdam de javafx.scene.
shape.Shape
No JavaFX é também muito fácil mostrar
imagens através das classes javafx.scene.
image.ImageView e javafx.scene.image.
Image

22. Imagens e formas
geométricas: Prática
Crie um novo projeto JavaFX chamado
formas-geometricas
Crie diversas figuras geométricas explorando o
pacote javafx.scene.shape e adicione
imagens javafx.scene.image
Exemplos de classes de figuras geométricas:
Rectangle, Circle...

23. Imagens e formas
geométricas: Prática

24. Multimídia
As classes para lidar com vídeo e áudio estão
no pacote javafx.scene.media e você precisar
só conhecer Media, MediaView e
MediaPlayer para tocar um vídeo. O áudio é
ainda mais fácil, pois você só precisa de duas
linhas de código usando a classe AudioClip
A classe que representa um nó do vídeo é a
MediaView, ou seja, você pode rotacionar,
adicionar efeito, mover, entre outros, somente
usando essa classe

25. Multímidia: Prática

26. Mostrar Páginas WEB
JavaFX traz o navegado WebKit e as possibilidades de
trabalhar com páginas nessa plataforma são muitas!
A API para web, no entanto, é muito simples. Precisamos
das classes que estão no pacote javafx.scene.web,
principalmente a classe WebView
Vamos nos limitar a mostrar uma página simples, pois esse
assunto é bastante extenso. Os tópicos vão além de
simplesmente mostrar uma página, mas também cobrem
manipulação da DOM da página, execução de scripts
JavaScript, eventos da páginas, entre muitos outros...
Explorem a API após o curso!

27. Mostrar páginas: Prática
WebView webView = WebViewBuilder.create().prefHeight(450).prefWidth(1000).build();
webView.getEngine().load("http://www.redhat.com");

28. O Canvas
O Canvas do JavaFX é bastante semelhante
ao Canvas do HTML 5.
Basicamente é um nó com uma área para
desenharmos dentro. As classes do Canvas
estão no pacote javafx.scene.canvas e as
principais classes são o próprio Canvas, que é
o nó a ser adicionado, e o GraphicsContext,
onde você vai poder desenhar e manipular o
canvas...

29. O Canvas: prática
1. Crie um projeto chamado desenhando-
canvas
2. Na classe principal, crie um Canvas e
adicione ele a um elemento da Scene, assim
podemos ver ele na aplicação
3. Pegue o GraphicContext e faça coisas
randômicas no canvas, como desenhar
retângulos, círculos, etc

30. O Canvas: prática

31. Controles de interface
No pacote javafx.scene.control há diversos
controles de interface para serem usados na
criação de GUI: Graphical User Interface.
Todo controle de interface herda de javafx.
scene.control.Control, mas há uma variedade
gigantes de controles: campos de texto,
botões, lista, tabelas, entre muitos outros...

32. Campos de Texto e o Label
Campos de texto permitem que o usuário entre
com texto para serem lidos por sua aplicação.
Há dois principais campos de texto: TextArea,
para entrada de textos longos e TextField,
para entrada de textos simples.
Textos informativos, estáticos, podem ser
adicionado à aplicação atráves do Label.

33. Campos de Texto e o
Label: Prática
1. Em uma aplicação JavaFX chamada
campos-texto-e-labels, crie um TextField,
uma TextArea e Labels para informar do que
se trata o campo.
2. Adicione tudo a uma scene organizando os
componentes verticalmente. Para isso
explore a classe VBox

34. Campos de Texto e o
Label: Prática

35. Botões
Para que o usuário possa exercer uma ação
sobre uma aplicação JavaFX, a API
disponibiliza vários botões.
Alguns permitem um simples clique, como o
Button, outros são para escolha de valores
boleanos, como o CheckBox e o
ToggleButton.
RadioButtons permite que se escolha uma
opção entre várias. Eles devem pertencer a um
grupo chamado ToggleGroup.

36. Botões: Prática
1. Crie um projeto javafx chamado button-e-
checkbox;
2. Crie botões do tipo Button, CheckBox e
ToggleButton;
3. Crie um grupo para ComboButton e adiciona
alguns à uma HBox
4. Usando uma VBox, adicione todos os
componentes anteriores (inclusive a HBox) e
em seguido adiciona ela à Scene.

37. Campos de múltipla
escolha
Para uma faixa maior de escolhas,
costumamos usar controles como o ChoiceBox
ou o ComboBox.
Eles nos permitem adicionar diversos valores e
o usuário escolher somente um dentre vários.

38. Tratando eventos
As ações dos usuários devem ser tratadas no código
JavaFX. Isso pode ser feito através de handlers:
EventHandler. A classe Event representa o evento
O que temos que fazer é chamar um método do controle, o
qual queremos tratar os eventos, e informar uma inner
class que implementa uma interface específica.Nela,
iremos implementar um método que será invocado de
acordo com o hadndler que você adicionou, exemplos: no
click, quando o usuário passa o cursor em cima, quando há
uma ação no componente.
As ações estão no nó, ou seja, todos os elementos de uma
aplicação JavaFX podem ter as ações do usuário tratadas.

39. Tratando eventos: Prática
1. Crie um aplicação chamada tratando-
eventos
2. Adicione um elemento de interface, um Text,
e adicione vários handlers do tipo
EventHandler usando os métodos
correspondentes: text.setOn*
3. Na implementação do método, escreva algo
na tela

40. Para organizar os elementos na tela, podemos utilizar
diversas classes que o JavaFX oferece de acordo com o
seu objetivo.
Todos os elementos que são utilizados para organizar
elementos recebem outros elementos, suas "Children".
Adicionamentos os elementos pelo método getChildren().
add.
Esse método getChildren retorna a lista de elementos e
podemos manipular a mesma que as mudanças refletem
na interface.
Os organizadores de layout estão no pacote javafx.scene.
layout e eles também são um Node.
Organizando os elementos

41. Organizando os elementos
VBox e HBox: Alinha os componentes verticalmente e
horizontamente;
StackPane: Empilha um componente sobre o outro;
BorderPane: Divide os elementos em regiões e coloca um
componente em cada uma desses regiões
FlowPane: Ajeita os componentes de acordo com uma
orientação e com o fluxo da aplicação;
GridPane: Cria uma grade com os componentes. É
possível informar qual a posição do componente na grade.
Veja eles em ação nos projetos correspontes do blog
aprendendo-javafx.

42. Componentes de interface
complexos
● TabbedPane: Organiza os elementos em
abas;
● ListView: Apresenta uma lista de
componentes;
● TreeView: Para organizar elementos
hierarquicos como árvore;
● TableView: apresenta uma lista em uma
tabela;

43. Efeitos e animações
Cada Node pode receber um efeito através do
método setEffect. Os diversos efeitos estão no
pacote javafx.scene.control.
Para mover elementos na tela, temos diversas
classes no pacote javafx.animation.
A Timeline permite animar elementos e as
classes que herdam de Transition permitem
que alteremos uma propriedade de acordo com
o tempo

44. Usando FXML
É possível criar toda a interface em XML e
carregar no nosso código JavaFX e carregar
ela usando um XML.
Para gerar o XML usamos a ferramenta
SceneBuilder.
Os elements do XML podem ser injetados em
uma classe Java usando anotações.
Demonstração e código

45. Estilo com CSS
As aplicações JavaFX podem ter toda sua
aparência modificada atráves de arquivos CSS.
Ver exemplos do livro Pro JavaFX Platform 2

46. Parte III: Criando aplicações

47. MuseuID: mudeid.com
Aplicação mundo real

48. Uma aplicação simples
Criação de aplicação usando SceneBuilder