Mini Curso JavaFX/OpenJFX
Upcoming SlideShare
Loading in...5
×
 

Mini Curso JavaFX/OpenJFX

on

  • 8,597 views

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

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

Statistics

Views

Total Views
8,597
Views on SlideShare
3,327
Embed Views
5,270

Actions

Likes
3
Downloads
97
Comments
0

20 Embeds 5,270

http://aprendendo-javafx.blogspot.com.br 5006
http://aprendendo-javafx.blogspot.pt 102
http://aprendendo-javafx.blogspot.com 85
https://twitter.com 19
http://aprendendo-javafx.blogspot.mx 15
http://aprendendo-javafx.blogspot.ru 7
http://aprendendo-javafx.blogspot.com.es 6
http://aprendendo-javafx.blogspot.jp 4
http://aprendendo-javafx.blogspot.com.ar 4
http://aprendendo-javafx.blogspot.it 3
http://www.aprendendo-javafx.blogspot.com.br 3
http://aprendendo-javafx.blogspot.in 3
http://aprendendo-javafx.blogspot.fr 2
http://translate.googleusercontent.com 2
http://cloud.feedly.com 2
http://webcache.googleusercontent.com 2
http://aprendendo-javafx.blogspot.de 2
http://aprendendo-javafx.blogspot.co.uk 1
http://digg.com 1
http://aprendendo-javafx.blogspot.kr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mini Curso JavaFX/OpenJFX Mini Curso JavaFX/OpenJFX Presentation Transcript

  • OpenJFX/JavaFX Introduçã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 View slide
  • Conteúdo ● Parte I: Básico e teoria ● Parte II: Conhecendo a API ● Parte III: Criando aplicações View slide
  • 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 Netbeans File -> 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 API Scene Graph - Elementos hierárquicos do mesmo tipo: Node
  • 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
  • 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
  • A classe Node: Prática
  • 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
  • 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...
  • Imagens e formas geométricas: Prática
  • 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
  • Multímidia: Prática
  • 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!
  • Mostrar páginas: Prática WebView webView = WebViewBuilder.create().prefHeight(450).prefWidth(1000).build(); webView.getEngine().load("http://www.redhat.com");
  • 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...
  • 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
  • O Canvas: prática
  • 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...
  • 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.
  • 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
  • Campos de Texto e o Label: Prática
  • 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.
  • 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.
  • 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.
  • 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.
  • 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
  • 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 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.
  • 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çõ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
  • 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 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
  • Parte III: Criando aplicações
  • MuseuID: mudeid.com Aplicação mundo real
  • Uma aplicação simples Criação de aplicação usando SceneBuilder