OpenJFX/JavaFXIntrodução à nova API gráfica do Java

Quem é William

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

Conteúdo

● Parte I: Básico e teoria

● Parte II: Conhecendo a API

● Parte III: Criando aplicações

Parte I - Introdução e Teoria

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

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

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

Demonstrações

Ensemble e outros exemplos do livro

Exemplos do livro Pro JavaFX Platform 2

Parte II - Prática

● JDK 6+, JavaFX e Scene Builder disponíveis em:

http://www.oracle.com/technetwork/pt/java/index.html

● Netbeans 7.3

Pré requisitos

Códigos de Exemplo

+ aprendendo-javafx.blogspot.com docs.oracle.com/javafx

Criando projetos JavaFX no NetbeansFile -> New Project

"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();

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

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();

Uma visão geral da APIScene Graph - Elementos hierárquicos do mesmo tipo: Node

A classe NodeTodos elementos na tela são um javafx.

scene.NodePropriedades 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

A classe Node: Prática1. Crie um projeto JavaFX simples e chame de

classe-node2. Adicione um javafx.scene.layout.Pane à

Scene e um javafx.scene.text.Text3. Text é um __________?4. Mude as propriedades do Text, brinque com

as propriedades, explore a API

A classe Node: Prática

Imagens e formas geométricasTemos 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.ShapeNo JavaFX é também muito fácil mostrar imagens através das classes javafx.scene.image.ImageView e javafx.scene.image.Image

Imagens e formas geométricas: PráticaCrie 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...

Imagens e formas geométricas: Prática

MultimídiaAs 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 AudioClipA classe que representa um nó do vídeo é a MediaView, ou seja, você pode rotacionar, adicionar efeito, mover, entre outros, somente usando essa classe

Multímidia: Prática

Mostrar Páginas WEBJavaFX 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 WebViewVamos 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!

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

O CanvasO 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...

O Canvas: prática1. Crie um projeto chamado desenhando-

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

O Canvas: prática

Controles de interfaceNo 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...

Campos de Texto e o LabelCampos 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.

Campos de Texto e o Label: Prática1. 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

Campos de Texto e o Label: Prática

BotõesPara 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.

Botões: Prática1. 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 HBox4. Usando uma VBox, adicione todos os

componentes anteriores (inclusive a HBox) e em seguido adiciona ela à Scene.

Campos de múltipla escolhaPara 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.

Tratando eventosAs 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 eventoO 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.

Tratando eventos: Prática1. Crie um aplicação chamada tratando-

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

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

Organizando os elementosVBox 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õesFlowPane: 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.

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;

Efeitos e animaçõesCada 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

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

Estilo com CSSAs aplicações JavaFX podem ter toda sua aparência modificada atráves de arquivos CSS.

Ver exemplos do livro Pro JavaFX Platform 2

Parte III: Criando aplicações

MuseuID: mudeid.com

Aplicação mundo real

Uma aplicação simples

Criação de aplicação usando SceneBuilder