mini curso javafx/openjfx
DESCRIPTION
Um mini-curso apresentado no Just Java 2013 apresentando as maiores características do JavaFX e o respectivo projeto Open Source: OpenJFXTRANSCRIPT
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