JFXST

Machine Translated by Google
JavaFX
Introdução ao JavaFX
Lançamento 8
E50607-02
Agosto de
2014 Comece a usar o JavaFX obtendo uma visão
geral dos recursos disponíveis, aprendendo a arquitetura
e criando aplicativos simples que apresentam layouts,
CSS, FXML, efeitos visuais e animação.
JavaFX Introdução ao JavaFX, versão 8
E50607-02
Copyright © 2008, 2014, Oracle e/ou suas afiliadas. Todos os direitos reservados.
Autor contribuinte: Jasper Potts, Nancy Hildebrandt, Joni Gordon, Cindy Castillo
Este software e a documentação relacionada são fornecidos sob um contrato de licença contendo restrições de uso e
divulgação e são protegidos por leis de propriedade intelectual. Exceto conforme expressamente permitido em seu contrato de
licença ou permitido por lei, você não pode usar, copiar, reproduzir, traduzir, transmitir, modificar, licenciar, transmitir, distribuir,
exibir, executar, publicar ou exibir qualquer parte, de qualquer forma, ou por qualquer meio. A engenharia reversa, desmontagem
ou descompilação deste software, a menos que exigido por lei para interoperabilidade, é proibida.
As informações aqui contidas estão sujeitas a alterações sem aviso prévio e não são garantidas como isentas de erros. Se
você encontrar algum erro, informe-nos por escrito.
Se este for um software ou documentação relacionada entregue ao governo dos EUA ou a qualquer pessoa licenciando-o
em nome do governo dos EUA, o seguinte aviso é aplicável:
USUÁRIOS FINAIS DO GOVERNO DOS EUA: Os programas da Oracle, incluindo qualquer sistema operacional, software
integrado, quaisquer programas instalados no hardware e/ou documentação, entregues aos usuários finais do governo dos
EUA são "software de computador comercial" de acordo com o Regulamento de Aquisição Federal aplicável e agência-
regulamentos complementares específicos. Assim, o uso, duplicação, divulgação, modificação e adaptação dos programas,
incluindo qualquer sistema operacional, software integrado, quaisquer programas instalados no hardware e/ou documentação,
estará sujeito aos termos de licença e restrições de licença aplicáveis aos programas . Nenhum outro direito é concedido ao
governo dos EUA.
Este software ou hardware é desenvolvido para uso geral em uma variedade de aplicativos de gerenciamento de
informações. Ele não foi desenvolvido ou destinado ao uso em quaisquer aplicações inerentemente perigosas, incluindo
aplicações que possam criar risco de ferimentos pessoais. Se você usar este software ou hardware em aplicativos
perigosos, será responsável por tomar todas as medidas apropriadas de proteção contra falhas, backup, redundância e
outras medidas para garantir seu uso seguro. A Oracle Corporation e suas afiliadas se isentam de qualquer responsabilidade
por quaisquer danos causados pelo uso deste software ou hardware em aplicativos perigosos.
Oracle e Java são marcas registradas da Oracle e/ou de suas afiliadas. Outros nomes podem ser marcas registradas de seus
respectivos proprietários.
Intel e Intel Xeon são marcas comerciais ou marcas registradas da Intel Corporation. Todas as marcas comerciais SPARC
são usadas sob licença e são marcas comerciais ou marcas registradas da SPARC International, Inc. AMD, Opteron, o
logotipo AMD e o logotipo AMD Opteron são marcas comerciais ou marcas registradas da Advanced Micro Devices. UNIX é
uma marca registrada do The Open Group.
Este software ou hardware e documentação podem fornecer acesso ou informações sobre conteúdo, produtos e serviços de
terceiros. A Oracle Corporation e suas afiliadas não são responsáveis e se isentam expressamente de todas as garantias de
qualquer tipo com relação a conteúdo, produtos e serviços de terceiros. A Oracle Corporation e suas afiliadas não serão
responsáveis por quaisquer perdas, custos ou danos incorridos devido ao seu acesso ou uso de conteúdo, produtos ou
serviços de terceiros.
Conteúdo
Prefácio................................................. ................................................ ................................................ ........... vii
Sobre este tutorial............................................. ................................................ ...................... vii

Público................................................. ................................................ ................................................ vii
Acessibilidade à Documentação............................................ ................................................ .................. vii Documentos

Relacionados .............................. ................................................ ................................................ ...vii
Convenções ....................................... ................................................ ......................................................... viii
O que há de novo ................................................ ................................................ ................................................ .. ix
Parte I O que é JavaFX?
1 Visão geral do JavaFX
Aplicações JavaFX .............................................. ................................................ ................................ 1-1

Disponibilidade .............. ................................................ ................................................ ................................ 1-2 Principais
recursos ............... ................................................ ................................................ ................................ 1-2 O que posso
construir com JavaFX? ................................................ ................................................ ........... 1-3 Como faço para executar
um aplicativo de amostra?........................... ................................................ .................... 1-4 Como executar uma amostra
em um IDE? ................................................ ................................................ ... 1-5 Como faço para criar um aplicativo
JavaFX? ................................................ ................................................ 1-5
Recursos . ................................................ ................................................ ................................................ 1- 6
2 Compreendendo a arquitetura JavaFX

Gráfico de cena .......................................... ................................................ ......................................... 2-2 Java APIs
públicas para recursos JavaFX ....................................... ................................................ ...... 2-2 Sistema
Gráfico .......................................... ................................................ ................................................ 2- 3 Kit de ferramentas
para janelas de vidro .......................................... ................................................ ......................... 2-3
Tópicos ..................... ................................................ ................................................ ......................2-4
Pulso .................................................. ................................................ ................................................ ..2-4
Mídia e Imagens ....................................... ................................................ ......................................... 2-4 Componente da

Web ........ ................................................ ................................................ ............................. 2-5
CSS .............. ................................................ ................................................ ......................................... 2-5
Controles da interface do usuário ....................................... ................................................ ................................................ 2- 6
Esquema .................................................. ................................................ ................................................ ...... 2-7

Transformações 2-D e 3-D ........................... ................................................ ................................ 2-8
Efeitos Visuais ................................................. ................................................ ................................................ 2-8
iii
Parte II Introdução aos aplicativos de amostra JavaFX
3 Olá, mundo, estilo JavaFX

Construir o aplicativo ....................................... ................................................ ...................... 3-1 Execute o
aplicativo............... ................................................ ................................................ ........... 3-3 Para onde ir em
seguida.................. ................................................ ................................................ ... 3-3
4 Criando um formulário em JavaFX

Crie o Projeto.............................................. ................................................ ......................................... 4-1 Criar
um Layout de GridPane.... ................................................ ................................................ ................ 4-2 Adicionar
texto, rótulos e campos de texto............................ ................................................ ......................................... 4-3
Adicionar um botão e texto...... ................................................ ................................................ ...................... 4-4
Adicionar código para manipular um evento ....................................... ................................................ ................... 4-5
Execute o aplicativo ....................................... ................................................ ................................ 4-5 Para onde

ir a partir daqui........ ................................................ ................................................ ................ 4-6
5 formulários sofisticados com JavaFX CSS

Crie o Projeto.............................................. ................................................ ......................................... 5-1 Crie o
arquivo CSS .... ................................................ ................................................ ............................. 5-2
Adicionar uma imagem de plano de fundo ....................................... ................................................ .........................
5-2 Estilizar os rótulos............... ................................................ ................................................ .........................
5-3 Estilo de texto............................ ................................................ ................................................ .........................
5-4 Estilizar o botão ....................... ................................................ ................................................ .........................
5-5 Para onde ir a partir daqui........................... ................................................ ................................................ .. 5-7
6 Usando FXML para criar uma interface de usuário

Configurar o projeto ....................................... ................................................ ......................................... 6-1
Carregue o arquivo de origem FXML ... ................................................ ................................................ ............. 6-2
Modificar as declarações de importação ....................................... ................................................ ................ 6-2
Criar um Layout de GridPane........................... ................................................ ......................................... 6-3
Adicionar texto e Campos de Senha .............................................. ................................................ ............. 6-3
Adicionar um botão e texto.............................................. ................................................ ................................ 6-5
Adicionar código para manipular um evento ....................................... ................................................ ................... 6-5
Use uma linguagem de script para lidar com eventos ....................................... ......................................... 6-6
Estilo a Aplicação com CSS............................................... ................................................ .............. 6-7 Para
onde ir a partir daqui .............................. ................................................ ................................................ 6- 8
7 Animação e efeitos visuais em JavaFX
Configurar o aplicativo ....................................... ................................................ ............................. 7-2 Configurar

o projeto.............. ................................................ ................................................ ...................... 7-2 Adicionar
gráficos ....................... ................................................ ................................................ ...................... 7-3 Adicionar
um efeito visual........................... ................................................ ................................................ ......... 7-4
Criar um gradiente de plano de fundo ....................................... ................................................ ................ 7-5
Aplicar um Modo de Mesclagem........................... ................................................ ................................................ ...
7-6 Adicionar Animação.......................................... ................................................ ......................................... 7-7
4
Para onde ir a partir daqui ....................................... ................................................ ............................. 7-8
plano de fundo.jpg............................................. ................................................ ......................................... A-2
v
vi
Prefácio
Este prefácio fornece uma visão geral sobre este tutorial e também descreve os recursos e
convenções de acessibilidade de documentos usados neste tutorial - Introdução ao JavaFX
Sobre este tutorial

Este tutorial é uma compilação de três documentos que foram fornecidos anteriormente com o
conjunto de documentação do JavaFX 2.x: Visão geral do JavaFX, Arquitetura do JavaFX e
Introdução ao JavaFX. O conteúdo combinado foi aprimorado com informações atualizadas sobre
os novos recursos JavaFX incluídos na versão Java SE 8. Este documento contém as seguintes
partes: ÿ O que é JavaFX? ÿ Introdução aos aplicativos de amostra JavaFX Cada parte contém
capítulos que apresentam a tecnologia JavaFX e o ajudam a aprender como usá-la para o
desenvolvimento de aplicativos.
Público
Este documento destina-se a desenvolvedores JavaFX.
Acessibilidade da Documentação
Para obter informações sobre o compromisso da Oracle com a acessibilidade, visite o
site do Programa de Acessibilidade da Oracle em http://www.oracle.com/pls/topic/
lookup?ctx=acc&id=docacc.
Acesso ao Suporte Oracle

Os clientes Oracle têm acesso ao suporte eletrônico por meio do My Oracle Support. Para obter
informações, visite http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info ou visite http://
www.oracle.com/pls/topic/lookup?ctx=acc&id=trs se você são deficientes auditivos.
Documentos relacionados
Para obter mais informações, consulte o restante da documentação do JavaFX
definida em http://docs.oracle.com/javase/javase-clienttechnologies.htm.
vii
Convenções
As seguintes convenções de texto são usadas neste documento:
Convenção Significado
negrito O tipo negrito indica elementos gráficos da interface do usuário associados a uma
ação ou termos definidos no texto ou no glossário.
itálico O tipo itálico indica títulos de livro, ênfase ou variáveis de espaço reservado para os
quais você fornece valores específicos.
monoespaço O tipo monoespaçado indica comandos dentro de um parágrafo, URLs, código em

exemplos, texto que aparece na tela ou texto que você insere.
viii
O que há de novo
Este capítulo resume os novos recursos e mudanças significativas no produto feitas no componente
JavaFX da versão Java SE 8. ÿ O novo tema Modena agora é o tema padrão para aplicativos
JavaFX. Consulte a seção do tema Modena em Principais recursos.
ÿ O suporte para recursos HTML5 adicionais foi adicionado. Consulte Adicionando HTML
Conteúdo para aplicativos JavaFX para obter mais informações.
ÿ A nova classe SwingNode melhora o recurso de interoperabilidade Swing. Ver

Incorporando conteúdo Swing em aplicativos JavaFX.
ÿ Novos controles integrados de interface do usuário, DatePicker e TableView, agora estão disponíveis. Consulte o documento
Usando controles de interface do usuário JavaFX para obter mais informações.
ÿ A biblioteca de gráficos 3D foi aprimorada com várias novas classes de API. Consulte a seção
Recursos de gráficos 3D em Principais recursos e Introdução aos gráficos 3D JavaFX para
obter mais informações.
ÿ O pacote javafx.print agora está disponível e fornece o JavaFX público

APIs de impressão.
ÿ O suporte a rich text foi adicionado. ÿ O
suporte para monitores Hi-DPI foi disponibilizado. ÿ Classes com estilo
CSS tornaram-se APIs públicas.

ÿ A classe de serviço agendada foi introduzida.
ix
x
Parte I
Parte IO que é JavaFX?
A Parte I contém os seguintes capítulos:

ÿ Visão geral do JavaFX
ÿ Compreendendo a arquitetura JavaFX

1
Visão geral do JavaFX
1
Este capítulo fornece uma visão geral dos tipos de aplicativos que você pode criar usando APIs
JavaFX, onde baixar as bibliotecas JavaFX e informações de alto nível sobre os principais recursos
JavaFX que estão sendo entregues.
JavaFX é um conjunto de pacotes gráficos e de mídia que permite aos desenvolvedores projetar,
criar, testar, depurar e implantar aplicativos rich client que operam consistentemente em diversas
plataformas. ÿ Aplicativos JavaFX ÿ Disponibilidade ÿ Principais recursos
ÿ O que posso construir com JavaFX?
ÿ Como executo um aplicativo de amostra? ÿ Como
executo uma amostra em um IDE? ÿ Como faço
para criar um aplicativo JavaFX?

ÿ Recursos
Consulte o capítulo Compreendendo a arquitetura JavaFX para aprender sobre a arquitetura da

plataforma JavaFX e obter uma breve descrição das APIs JavaFX para streaming de mídia,
renderização da Web e estilo da interface do usuário.
Aplicativos JavaFX
Como a biblioteca JavaFX é escrita como uma API Java, o código do aplicativo JavaFX pode fazer
referência a APIs de qualquer biblioteca Java. Por exemplo, aplicativos JavaFX podem usar bibliotecas de
API Java para acessar recursos nativos do sistema e conectar-se a aplicativos de middleware baseados
em servidor.
A aparência dos aplicativos JavaFX pode ser personalizada. Cascading Style Sheets (CSS) separa a
aparência e o estilo da implementação para que os desenvolvedores possam se concentrar na
codificação. Os designers gráficos podem personalizar facilmente a aparência e o estilo do aplicativo
por meio do CSS. Se você tiver experiência em web design ou se quiser separar a interface do usuário
(IU) e a lógica de back-end, poderá desenvolver os aspectos de apresentação da IU na linguagem de
script FXML e usar o código Java para o aplicativo lógica. Se você preferir projetar UIs sem escrever
código, use o JavaFX Scene Builder. À medida que você projeta a interface do usuário, o Scene Builder
cria marcação FXML que pode ser portada para um ambiente de desenvolvimento integrado (IDE) para
que os desenvolvedores possam adicionar a lógica de negócios.
Visão geral do JavaFX 1-1

Disponibilidade
Disponibilidade
As APIs JavaFX estão disponíveis como um recurso totalmente integrado do Java SE Runtime
Environment (JRE) e do Java Development Kit (JDK). Como o JDK está disponível para todas as principais
plataformas de desktop (Windows, Mac OS X e Linux), os aplicativos JavaFX compilados para JDK 7 e
posteriores também são executados em todas as principais plataformas de desktop. O suporte para plataformas
ARM também foi disponibilizado com o JavaFX 8. O JDK para ARM inclui os componentes básicos, gráficos e
de controle do JavaFX.
A compatibilidade entre plataformas permite uma experiência de tempo de execução consistente para
desenvolvedores e usuários de aplicativos JavaFX. A Oracle garante versões e atualizações sincronizadas
em todas as plataformas e oferece um amplo programa de suporte para empresas que executam aplicativos
de missão crítica.
Na página de download do JDK, você pode obter um arquivo zip de aplicativos de exemplo JavaFX. Os
aplicativos de exemplo fornecem muitos exemplos de código e snippets que mostram por exemplo como
escrever aplicativos JavaFX. Consulte "Como executo um aplicativo de amostra?" Para maiores informações.
Principais recursos
Os recursos a seguir estão incluídos no JavaFX 8 e versões posteriores. Os itens que foram introduzidos
na versão JavaFX 8 são indicados de acordo: ÿ APIs Java. JavaFX é uma biblioteca Java que consiste
em classes e interfaces escritas em código Java. As APIs são projetadas para serem uma alternativa
amigável às linguagens Java Virtual Machine (Java VM), como JRuby e Scala.
ÿ FXML e Construtor de cenas. FXML é uma linguagem de marcação declarativa baseada em XML para
construir uma interface de usuário de aplicativo JavaFX. Um designer pode codificar em FXML ou usar o
JavaFX Scene Builder para projetar interativamente a interface gráfica do usuário (GUI). O Scene Builder
gera marcação FXML que pode ser portada para um IDE onde um desenvolvedor pode adicionar a lógica
de negócios.
ÿ WebView. Um componente da Web que usa a tecnologia WebKitHTML para torná-lo

possível incorporar páginas da Web em um aplicativo JavaFX. O JavaScript em execução no WebView
pode chamar APIs Java e as APIs Java podem chamar o JavaScript em execução no WebView.
Suporte para recursos HTML5 adicionais, incluindo Web Sockets, Web Workers e Web Fonts, e
recursos de impressão foram adicionados ao JavaFX 8.
Consulte Adicionando conteúdo HTML a aplicativos JavaFX.
ÿ Interoperabilidade Swing. Os aplicativos Swing existentes podem ser atualizados com recursos JavaFX,
como reprodução de mídia gráfica avançada e conteúdo da Web incorporado. A classe SwingNode ,
que permite incorporar conteúdo Swing em aplicativos JavaFX, foi incluída no JavaFX 8. Consulte o
javadoc da API SwingNode e Incorporando conteúdo Swing em aplicativos JavaFX para obter mais
informações.
ÿ Controles de interface do usuário e CSS integrados. O JavaFX fornece todos os principais controles
de interface do usuário necessários para desenvolver um aplicativo completo. Os componentes podem
ser revestidos com tecnologias padrão da Web, como CSS. Os controles DatePicker e TreeTableView
UI agora estão disponíveis com a versão JavaFX 8. Consulte Usando controles de interface do usuário
JavaFX para obter mais informações. Além disso, as classes CSS Styleable* tornaram-se API pública,
permitindo que objetos sejam estilizados por CSS.
ÿ Tema de Modena. O tema Modena substitui o tema Caspian como padrão para aplicativos JavaFX 8. O
tema Caspian ainda está disponível para seu uso adicionando a linha
setUserAgentStylesheet(STYLESHEET_CASPIAN) no método start() do aplicativo. Para obter mais
informações, consulte o blog Modena em fxexperience.com
1-2 JavaFX Introdução ao JavaFX

O que posso construir com JavaFX?
ÿ Recursos gráficos 3D. As novas classes API para Shape3D ( subclasses Box, Cylinder,
MeshView e Sphere), SubScene, Material, PickResult, LightBase (subclasses
AmbientLight e PointLight ) e SceneAntialiasing foram adicionadas à biblioteca de gráficos 3D
no JavaFX 8. A classe Camera API também foi atualizado nesta versão. Para obter mais
informações, consulte o documento Getting Started with JavaFX 3D Graphics e o javadoc API
correspondente para javafx.scene.shape.Shape3D, javafx.scene.SubScene,
javafx.scene.paint.Material, javafx.scene.input.PickResult e javafx.scene.SceneAntialiasing.
ÿ API de tela. A API Canvas permite desenhar diretamente dentro de uma área da cena JavaFX
que consiste em um elemento gráfico (nó).
ÿ API de impressão. O pacote javafx.print foi adicionado na versão Java SE 8 e

fornece as classes públicas para a API de impressão JavaFX.
ÿ Suporte a Rich Text. JavaFX 8 traz suporte de texto aprimorado para JavaFX, incluindo texto
bidirecional e scripts de texto complexos, como tailandês e hindu em controles, e texto multilinha
e multiestilo em nós de texto.
ÿ Suporte multitoque. O JavaFX fornece suporte para operações multitoque, com base
nas capacidades da plataforma subjacente. ÿ Suporte
Hi-DPI. O JavaFX 8 agora oferece suporte a monitores Hi-DPI. ÿ Pipeline
de gráficos acelerados por hardware. Os gráficos JavaFX são baseados no

pipeline de renderização gráfica (Prism). O JavaFX oferece gráficos suaves que são
renderizados rapidamente por meio do Prism quando usado com uma placa gráfica ou unidade de
processamento gráfico (GPU) compatível. Se um sistema não apresentar uma das GPUs
recomendadas suportadas pelo JavaFX, o Prism assume como padrão a pilha de renderização de software.
ÿ Mecanismo de mídia de alto desempenho. O pipeline de mídia suporta a reprodução de

conteúdo multimídia da web. Ele fornece uma estrutura de mídia estável e de baixa latência
baseada na estrutura de multimídia GStreamer.
ÿ Modelo de implantação de aplicativo independente. Aplicativo independente

os pacotes têm todos os recursos do aplicativo e uma cópia privada dos tempos de execução
Java e JavaFX. Eles são distribuídos como pacotes instaláveis nativos e fornecem a mesma
experiência de instalação e inicialização que os aplicativos nativos para esse sistema operacional.
O que posso construir com JavaFX?

Com o JavaFX, você pode criar muitos tipos de aplicativos. Normalmente, eles são
aplicativos com reconhecimento de rede que são implantados em várias plataformas e exibem
informações em uma interface de usuário moderna de alto desempenho que apresenta áudio, vídeo,
gráficos e animação.
A Tabela 1–1 mostra imagens de alguns dos aplicativos JavaFX de amostra incluídos na versão
JavaFX 8.n.

Como faço para executar um aplicativo de exemplo?
Tabela 1–1 Amostras de aplicativos JavaFX
Aplicativo de amostra Descrição
JavaFX Ensemble8
Ensemble8 é uma galeria de aplicativos de exemplo que demonstram uma

grande variedade de recursos JavaFX, incluindo animação, gráficos e controles.
Você pode visualizar e interagir com cada amostra em execução em TODAS
as plataformas e ler suas descrições. Nas plataformas de desktop, você pode
copiar o código-fonte de cada amostra, ajustar as propriedades dos componentes
de amostra usados em várias amostras e seguir os links para a documentação
relevante da API quando estiver conectado à Internet.
Ensemble8 também roda com JavaFX para ARM.
Modena
Modena é um aplicativo de amostra que demonstra a aparência dos

componentes da interface do usuário usando o tema Modena. Dá a você a
opção de contrastar os temas de Modena e Cáspio e explorar vários aspectos
desses temas.
Visualizador 3D
3DViewer é um aplicativo de exemplo que permite navegar e examinar uma

cena 3D com um mouse ou um trackpad. O 3DViewer possui importadores
para um subconjunto dos recursos em arquivos OBJ e Maya.
A capacidade de importar animação também é fornecida para arquivos Maya.
(Observe que, no caso de arquivos Maya, o histórico de construção deve ser
excluído de todos os objetos ao salvar como um arquivo Maya.)
O 3DViewer também tem a capacidade de exportar o conteúdo da cena como

arquivos Java ou FXML.
Como faço para executar um aplicativo de exemplo?

As etapas nesta seção explicam como baixar e executar os aplicativos de amostra que estão disponíveis
como um download separado com a plataforma Java (JDK 8).
Observação: antes de poder executar um aplicativo JavaFX de amostra, você precisa ter as bibliotecas de tempo de
execução JavaFX em sua máquina. Antes de prosseguir com essas etapas, instale a versão mais recente do JDK 8 ou
a versão mais recente do JRE.
Para fazer download e executar os aplicativos de amostra:

1. Acesse a página de downloads do Java SE em http://
www.oracle.com/technetwork/java/javase/downloads/.
2. Role para baixo para localizar a seção JDK 8 e JavaFX Demos and Samples.
3. Clique no botão Download de Demonstrações e Amostras para ir para a página de downloads.
4. Na página de downloads do Java SE Development Kit 8, role para baixo até a página JavaFX
Seção de Downloads de Demonstrações e Amostras.
5. Baixe o arquivo zip para o sistema operacional correto e extraia os arquivos.

Como faço para criar um aplicativo JavaFX?
O diretório javafx-samples-8.x é criado e contém os arquivos para as amostras disponíveis. Os

projetos NetBeans para as amostras estão no diretório javafx-samples-8.x\src .
6. Clique duas vezes no arquivo executável para obter uma amostra.
Por exemplo, para executar o aplicativo de amostra pré-criado Ensemble8, clique duas vezes no arquivo
Ensemble8.jar .
Como faço para executar uma amostra em um IDE?
Você pode usar vários IDEs de desenvolvimento Java para desenvolver aplicativos JavaFX. As etapas a
seguir explicam como exibir e executar o código-fonte no NetBeans IDE.
Para exibir e executar o código-fonte de exemplo no NetBeans IDE: 1. Baixe os
exemplos, conforme descrito acima, e extraia os arquivos.
2. Em um IDE NetBeans 7.4 ou posterior, carregue o projeto para a amostra que deseja visualizar.
a. No menu Arquivo , selecione Abrir projeto. b. Na caixa
de diálogo Open Project , navegue até o diretório que lista as amostras.

O caminho de navegação é mais ou menos assim:
..\javafx_samples-8.x-<plataforma>\javafx-samples-8.x\src
c. Selecione a amostra que deseja visualizar. d.
Clique no botão Abrir Projeto .
3. Na janela Projetos, clique com o botão direito do mouse no projeto que acabou de abrir e selecione Executar.
Observe que a janela Saída é atualizada e o projeto de amostra é executado e implantado.
Como faço para criar um aplicativo JavaFX?
Como os aplicativos JavaFX são escritos na linguagem Java, você pode usar seu editor favorito ou qualquer
ambiente de desenvolvimento integrado (IDE) que suporte a linguagem Java (como NetBeans, Eclipse ou IntelliJ
IDEA) para criar aplicativos JavaFX.
Para criar aplicativos JavaFX: 1. Acesse a
página de downloads do Java SE em

http://www.oracle.com/technetwork/java/javase/downloads/ para fazer download do Oracle® JDK 8 com suporte
a JavaFX 8.n. Links para as configurações de sistema certificadas e notas de versão também estão disponíveis
nessa página.
2. Use Getting Started with JavaFX Sample Applications para criar aplicativos simples que demonstrem como trabalhar
com layouts, folhas de estilo e efeitos visuais.
3. Use o JavaFX Scene Builder para projetar a interface do usuário para seu aplicativo JavaFX sem codificação.
Você pode arrastar e soltar os componentes da interface do usuário em uma área de trabalho, modificar
suas propriedades, aplicar folhas de estilo e integrar o código resultante à lógica do aplicativo. a. Faça o
download do JavaFX Scene Builder na página de downloads do JavaFX em
http://www.oracle.com/technetwork/java/javase/downloads/.
b. Siga o tutorial Introdução ao JavaFX Scene Builder para saber mais.

Recursos
Recursos
Use os recursos a seguir para aprender mais sobre a tecnologia JavaFX. ÿ
Faça o download da versão mais recente do JDK 8 e dos exemplos do JavaFX na
página de downloads do Java SE em: http://www.oracle.com/technetwork/java/
javase/downloads/.
ÿ Leia Compreendendo a arquitetura JavaFX. ÿ

Navegue pelos tutoriais e artigos do JavaFX para desenvolvedores.

2
2Entendendo a arquitetura JavaFX
O capítulo fornece uma descrição de alto nível da arquitetura e do ecossistema JavaFX.
A Figura 2–1 ilustra os componentes arquitetônicos da plataforma JavaFX. As seções após o diagrama
descrevem cada componente e como as partes se interconectam. Abaixo das APIs públicas do JavaFX
está o mecanismo que executa seu código JavaFX.
É composto por subcomponentes que incluem um motor gráfico JavaFX de alto desempenho, denominado
Prism; um pequeno e eficiente sistema de janelas, chamado Glass; um mecanismo de mídia e um mecanismo
da web. Embora esses componentes não sejam expostos publicamente, suas descrições podem ajudá-lo a
entender melhor o que executa um aplicativo JavaFX. ÿ Gráfico de cena
ÿ APIs públicas Java para recursos JavaFX
ÿ Sistema gráfico ÿ Glass
Windowing Toolkit ÿ Mídia e imagens
ÿ Componente da Web
ÿ CSS
ÿ Controles de IU
ÿ Layout
ÿ Transformações 2-D e 3-D
ÿ Efeitos Visuais
Figura 2–1 Diagrama da arquitetura JavaFX
Compreendendo a arquitetura JavaFX 2-1

Gráfico de cena
Gráfico de cena O
gráfico de cena JavaFX, mostrado como parte da camada superior na Figura 2–1, é o ponto de partida
para construir um aplicativo JavaFX. É uma árvore hierárquica de nós que representa todos os
elementos visuais da interface do usuário do aplicativo. Ele pode manipular a entrada e pode ser
renderizado.
Um único elemento em um grafo de cena é chamado de nó. Cada nó tem um ID, classe de estilo e
volume delimitador. Com exceção do nó raiz de um grafo de cena, cada nó em um grafo de cena tem um
único pai e zero ou mais filhos. Também pode ter o seguinte:
ÿ Efeitos, como desfoques e sombras
ÿ Opacidade
ÿ Transformações
ÿ Manipuladores de eventos (como mouse, tecla e método de entrada)
ÿ Um estado específico do aplicativo Ao contrário do Swing e do Abstract
Window Toolkit (AWT), o grafo de cena JavaFX também inclui as primitivas gráficas, como retângulos
e texto, além de ter controles, contêineres de layout, imagens e mídia.
Para a maioria dos usos, o gráfico de cena simplifica o trabalho com UIs, especialmente quando UIs
ricas são usadas. A animação de vários gráficos no gráfico de cena pode ser realizada rapidamente
usando as APIs javafx.animation e métodos declarativos, como documento XML, também funcionam
bem.
A API javafx.scene permite a criação e especificação de diversos tipos de conteúdo, como:
ÿ Nós: formas (2D e 3D), imagens, mídia, navegador da Web incorporado, texto, interface do usuário
controles, gráficos, grupos e contêineres
ÿ Estado: transformações (posicionamento e orientação dos nós), efeitos visuais e outros

estado visual do conteúdo
ÿ Efeitos: objetos simples que alteram a aparência dos nós do gráfico de cena, como desfoques,
sombras e ajuste de cor
Para obter mais informações, consulte o documento Trabalhando com o JavaFX Scene Graph.
APIs públicas Java para recursos JavaFX

A camada superior da arquitetura JavaFX mostrada na Figura 2–1 fornece um conjunto completo de
APIs públicas Java que suportam o desenvolvimento de aplicativos rich client. Essas APIs fornecem
liberdade e flexibilidade inigualáveis para construir aplicativos rich client. A plataforma JavaFX combina
os melhores recursos da plataforma Java com funcionalidade de mídia abrangente e imersiva em um
ambiente de desenvolvimento completo e intuitivo. Estas APIs Java para recursos JavaFX: ÿ Permitem
o uso de recursos Java poderosos, como genéricos, anotações, multithreading e expressões Lamda
(introduzidos no Java SE 8).
ÿ Tornar mais fácil para os desenvolvedores da Web usar o JavaFX de outros recursos dinâmicos baseados em JVM
linguagens, como Groovy e JavaScript.
ÿ Permitir que desenvolvedores Java usem outras linguagens de sistema, como Groovy, para escrever
aplicativos JavaFX grandes ou complexos.

Kit de ferramentas para janelas de vidro
ÿ Permitir o uso de vinculação, que inclui suporte para vinculação preguiçosa de alto desempenho,
expressões de vinculação, expressões de sequência vinculada e reavaliação de vinculação
parcial. Linguagens alternativas (como Groovy) podem usar essa biblioteca de vinculação para
introduzir uma sintaxe de vinculação semelhante à do JavaFX Script.
ÿ Estenda a biblioteca de coleções Java para incluir listas e mapas observáveis, que
permitem que os aplicativos conectem interfaces de usuário a modelos de dados, observem alterações nesses
modelos de dados e atualizem o controle de interface do usuário correspondente de acordo.
As APIs JavaFX e o modelo de programação são uma continuação da linha de produtos JavaFX 1.x. A
maioria das APIs JavaFX foram portadas diretamente para Java. Algumas APIs, como Layout e Mídia, juntamente
com muitos outros detalhes, foram aprimoradas e simplificadas com base no feedback recebido dos usuários da
versão JavaFX 1.x. JavaFX depende mais de padrões da web, como CSS para controles de estilo e ARIA para
especificações de acessibilidade. O uso de padrões adicionais da web também está sob revisão.
Sistema Gráfico
O JavaFX Graphics System, mostrado em azul na Figura 2–1, é um detalhe de implementação abaixo da camada do
grafo de cena JavaFX. Ele suporta gráficos de cena 2-D e 3-D. Ele fornece renderização de software quando o
hardware gráfico em um sistema é insuficiente para suportar a renderização acelerada por hardware.
Dois pipelines acelerados por gráficos são implementados na plataforma JavaFX: ÿ Os processos Prism
renderizam tarefas. Ele pode ser executado em renderizadores de hardware e software, incluindo 3-D. É responsável
pela rasterização e renderização de cenas JavaFX.
Os vários caminhos de renderização a seguir são possíveis com base no dispositivo que está sendo usado:
– DirectX 9 no Windows XP e Windows Vista
– DirectX 11 no Windows 7
– OpenGL no Mac, Linux, Incorporado
– Renderização de software quando a aceleração de hardware não é possível
O caminho totalmente acelerado por hardware é usado quando possível, mas quando não está disponível,
o caminho de renderização de software é usado porque o caminho de renderização de software já está
distribuído em todos os Java Runtime Environments (JREs). Isso é particularmente importante ao lidar
com cenas 3-D. No entanto, o desempenho é melhor quando os caminhos de renderização de hardware
são usados.
ÿ O Quantum Toolkit une o Prism e o Glass Windowing Toolkit e os torna disponíveis para a camada JavaFX
acima deles na pilha. Ele também gerencia as regras de encadeamento relacionadas à renderização versus
manipulação de eventos.
Kit de ferramentas para janelas de vidro
O Glass Windowing Toolkit, mostrado em bege na parte central da Figura 2–1, é o nível mais baixo na pilha de
gráficos JavaFX. Sua principal responsabilidade é fornecer serviços operacionais nativos, como gerenciamento de
janelas, temporizadores e superfícies. Ele serve como a camada dependente de plataforma que conecta a
plataforma JavaFX ao sistema operacional nativo.
O kit de ferramentas Glass também é responsável por gerenciar a fila de eventos. Ao contrário do Abstract Window
Toolkit (AWT), que gerencia sua própria fila de eventos, o Glass toolkit usa a funcionalidade de fila de eventos do
sistema operacional nativo para agendar o uso do thread. Também diferente do AWT, o kit de ferramentas Glass é
executado no mesmo encadeamento que o aplicativo JavaFX. No AWT, a metade nativa do AWT é executada em um
thread e o nível Java é executado em outro

Mídia e Imagens
fio. Isso apresenta muitos problemas, muitos dos quais são resolvidos no JavaFX usando a abordagem de
encadeamento de aplicativo JavaFX único.
Tópicos
O sistema executa dois ou mais dos seguintes encadeamentos a qualquer momento. ÿ
Encadeamento do aplicativo JavaFX: este é o encadeamento principal usado pelos desenvolvedores de aplicativos
JavaFX. Qualquer cena “ao vivo”, que é uma cena que faz parte de uma janela, deve ser acessada a partir
desta thread. Um gráfico de cena pode ser criado e manipulado em um encadeamento de segundo plano, mas
quando seu nó raiz é anexado a qualquer objeto ativo na cena, esse gráfico de cena deve ser acessado a partir
do encadeamento do aplicativo JavaFX. Isso permite que os desenvolvedores criem gráficos de cena complexos
em um thread de fundo, mantendo as animações em cenas 'ao vivo' suaves e rápidas. O encadeamento do
aplicativo JavaFX é um encadeamento diferente do Swing e do AWT Event Dispatch Thread (EDT), portanto,
deve-se tomar cuidado ao incorporar o código JavaFX nos aplicativos Swing.
ÿ Encadeamento de renderização do prisma: este encadeamento lida com a renderização separadamente do

despachante de eventos. Ele permite que o quadro N seja renderizado enquanto o quadro N+1 está sendo processado.
Essa capacidade de executar processamento simultâneo é uma grande vantagem, especialmente em
sistemas modernos com vários processadores. O thread de renderização do Prism também pode ter vários
threads de rasterização que ajudam a descarregar o trabalho que precisa ser feito na renderização.
ÿ Encadeamento de mídia: este encadeamento é executado em segundo plano e sincroniza os quadros mais
recentes por meio do gráfico de cena usando o encadeamento do aplicativo JavaFX.
Pulso
Um pulso é um evento que indica ao grafo de cena JavaFX que é hora de sincronizar o estado dos
elementos no grafo de cena com o Prism. Um pulso é acelerado a 60 quadros por segundo (fps) no máximo
e é disparado sempre que as animações estão sendo executadas no gráfico de cena. Mesmo quando a animação não
está rodando, um pulso é agendado quando algo no gráfico de cena é alterado. Por exemplo, se a posição de um
botão for alterada, um pulso será agendado.
Quando um pulso é disparado, o estado dos elementos no gráfico de cena é sincronizado com a camada de
renderização. Um pulso permite aos desenvolvedores de aplicativos uma maneira de lidar com eventos de forma
assíncrona. Esse importante recurso permite que o sistema crie lotes e execute eventos no pulso.
Layout e CSS também estão vinculados a eventos de pulso. Várias alterações no gráfico de cena podem levar a
várias atualizações de layout ou CSS, o que pode prejudicar seriamente o desempenho. O sistema executa
automaticamente uma passagem de layout e CSS uma vez por pulso para evitar a degradação do desempenho. Os
desenvolvedores de aplicativos também podem acionar manualmente passes de layout conforme necessário para
fazer medições antes de um pulso.
O Glass Windowing Toolkit é responsável por executar os eventos de pulso. Ele usa os temporizadores nativos de
alta resolução para fazer a execução.
Mídia e Imagens
A funcionalidade de mídia JavaFX está disponível por meio das APIs javafx.scene.media.
O JavaFX suporta mídia visual e de áudio. O suporte é fornecido para arquivos de áudio MP3, AIFF e WAV e arquivos
de vídeo FLV. A funcionalidade de mídia JavaFX é fornecida como três componentes separados: o objeto Media
representa um arquivo de mídia, o MediaPlayer reproduz um arquivo de mídia e um MediaView é um nó que exibe a
mídia.

CSS
O componente Media Engine, mostrado em verde na Figura 2–1, foi projetado tendo em mente o
desempenho e a estabilidade e fornece um comportamento consistente entre as plataformas.
Para obter mais informações, leia o documento Incorporating Media Assets into JavaFX Applications.
Componente da Web O
componente da Web é um controle de interface do usuário JavaFX, baseado no Webkit, que fornece
um visualizador da Web e funcionalidade de navegação completa por meio de sua API. Esse componente
do mecanismo da Web, mostrado em laranja na Figura 2–1, é baseado no WebKit, que é um mecanismo
de navegador da Web de software livre compatível com HTML5, CSS, JavaScript, DOM e SVG. Ele permite
que os desenvolvedores implementem os seguintes recursos em seus aplicativos Java:
ÿ Renderizar conteúdo HTML de URL local ou remoto
ÿ Histórico de suporte e navegação para frente e para trás

ÿ Recarregue o conteúdo
ÿ Aplicar efeitos ao componente da web

ÿ Editar o conteúdo HTML
ÿ Executar comandos JavaScript

ÿ Lidar com eventos
Esse componente de navegador incorporado é composto pelas seguintes classes: ÿ
WebEngine fornece recursos básicos de navegação em páginas da Web. ÿ WebView
encapsula um objeto WebEngine, incorpora conteúdo HTML na cena de um aplicativo e fornece campos
e métodos para aplicar efeitos e transformações. É uma extensão de uma classe Node.
Além disso, as chamadas Java podem ser controladas por meio de JavaScript e vice-versa para permitir
que os desenvolvedores aproveitem ao máximo ambos os ambientes. Para obter uma visão geral mais
detalhada do navegador incorporado JavaFX, consulte o documento Adicionando conteúdo HTML a
aplicativos JavaFX.
CSS
JavaFX Cascading Style Sheets (CSS) fornece a capacidade de aplicar estilo personalizado à interface do
usuário de um aplicativo JavaFX sem alterar nenhum código-fonte desse aplicativo. O CSS pode ser aplicado
a qualquer nó no grafo de cena JavaFX e é aplicado aos nós de forma assíncrona. Os estilos JavaFX CSS
também podem ser facilmente atribuídos à cena em tempo de execução, permitindo que a aparência de um
aplicativo mude dinamicamente.
A Figura 2–2 demonstra a aplicação de dois estilos CSS diferentes ao mesmo conjunto de controles de IU.

Controles de IU
Figura 2–2 Exemplo de folha de estilo CSS
O JavaFX CSS é baseado nas especificações do W3C CSS versão 2.1, com algumas adições do
trabalho atual na versão 3. O suporte e as extensões do JavaFX CSS foram projetados para permitir
que as folhas de estilo JavaFX CSS sejam analisadas de forma limpa por qualquer analisador CSS
compatível, mesmo um que não suporta extensões JavaFX. Isso permite a mistura de estilos CSS para
JavaFX e para outros propósitos (como para páginas HTML) em uma única folha de estilo. Todos os
nomes de propriedade JavaFX são prefixados com uma extensão de fornecedor de “-fx-“, incluindo
aqueles que podem parecer compatíveis com HTML CSS padrão, porque alguns valores JavaFX têm
uma semântica ligeiramente diferente.
Para obter informações mais detalhadas sobre JavaFX CSS, consulte o documento
Skinning JavaFX Applications with CSS.
Controles de IU
Os controles de interface do usuário JavaFX disponíveis por meio da API JavaFX são construídos
usando nós no grafo de cena. Eles podem aproveitar ao máximo os recursos visualmente avançados
da plataforma JavaFX e são portáteis em diferentes plataformas. O JavaFX CSS permite criar temas e
capas para os controles da interface do usuário.
A Figura 2–3 mostra alguns dos controles de IU atualmente suportados. Esses controles residem no
pacote javafx.scene.control.

Disposição
Figura 2–3 Exemplo de controles de interface do usuário JavaFX
Para obter informações mais detalhadas sobre todos os controles de interface do usuário JavaFX disponíveis,
consulte Usando controles de interface do usuário JavaFX e a documentação da API para o pacote
javafx.scene.control.
Disposição
Contêineres ou painéis de layout podem ser usados para permitir arranjos flexíveis e dinâmicos
dos controles de interface do usuário em um gráfico de cena de um aplicativo JavaFX. A API de layout
JavaFX inclui as seguintes classes de contêiner que automatizam modelos de layout comuns: ÿ A classe
BorderPane apresenta seus nós de conteúdo na parte superior, inferior, direita, esquerda ou
região central.
ÿ A classe HBox organiza seus nós de conteúdo horizontalmente em uma única linha. ÿ A classe
VBox organiza seus nós de conteúdo verticalmente em uma única coluna. ÿ A classe StackPane
coloca seus nós de conteúdo em uma única pilha de trás para a frente. ÿ A classe GridPane permite que
o desenvolvedor crie uma grade flexível de linhas e

colunas nas quais dispor os nós de conteúdo.

Transformações 2-D e 3-D
ÿ A classe FlowPane organiza seus nós de conteúdo em um “fluxo” horizontal ou vertical,

envolvendo os limites especificados de largura (para horizontal) ou altura (para vertical).
ÿ A classe TilePane coloca seus nós de conteúdo em células de layout de tamanho uniforme ou
azulejos
ÿ A classe AnchorPane permite que os desenvolvedores criem nós âncora no topo,

parte inferior, lateral esquerda ou centro do layout.
Para obter uma estrutura de layout desejada, diferentes contêineres podem ser aninhados em um
aplicativo JavaFX.
Para saber mais sobre como trabalhar com layouts, consulte o artigo Trabalhando com layouts no
JavaFX. Para obter mais informações sobre a API de layout JavaFX, consulte a documentação da
API para o pacote javafx.scene.layout.
Transformações 2-D e 3-D

Cada nó no grafo de cena JavaFX pode ser transformado na coordenada xy usando as seguintes classes
javafx.scene.tranform: ÿ translate – Move um nó de um lugar para outro ao longo dos planos x, y, z
em relação à sua posição inicial.
ÿ escala – Redimensione um nó para parecer maior ou menor nos planos x, y, z, dependendo

do fator de escala.
ÿ cisalhamento – Gire um eixo para que os eixos x e y não sejam mais perpendiculares.
As coordenadas do nó são deslocadas pelos multiplicadores especificados.
ÿ girar – Girar um nó em torno de um ponto de pivô especificado da cena. ÿ affine
– Executa um mapeamento linear de coordenadas 2-D/3-D para outras coordenadas 2-D/3-D

enquanto preserva as propriedades 'retas' e 'paralelas' das linhas.
Essa classe deve ser usada com as classes de transformação Translate, Scale, Rotate ou Shear em
vez de ser usada diretamente.
Para saber mais sobre como trabalhar com transformações, consulte o documento Aplicando Transformações
no JavaFX. Para obter mais informações sobre as classes de API javafx.scene.transform, consulte a
documentação da API.
Efeitos visuais
O desenvolvimento de interfaces rich client no gráfico de cena JavaFX envolve o uso de efeitos visuais ou
efeitos para aprimorar a aparência dos aplicativos JavaFX em tempo real. Os Efeitos JavaFX são
principalmente baseados em pixels de imagem e, portanto, pegam o conjunto de nós que estão no gráfico
de cena, renderizam-no como uma imagem e aplicam os efeitos especificados a ele.
Alguns dos efeitos visuais disponíveis no JavaFX incluem o uso das seguintes classes: ÿ Drop Shadow –
Renderiza uma sombra de um determinado conteúdo por trás do conteúdo ao qual

o efeito é aplicado.
ÿ Reflexão – renderiza uma versão refletida do conteúdo abaixo do conteúdo real.
ÿ Iluminação – Simula uma fonte de luz brilhando em um determinado conteúdo e pode dar a um
objeto plano uma aparência tridimensional mais realista.
Para obter exemplos de como usar alguns dos efeitos visuais disponíveis, consulte o documento
Criando efeitos visuais. Para obter mais informações sobre todas as classes de efeitos visuais
disponíveis, consulte a documentação da API para o pacote javafx.scene.effect.

parte II
Parte IIIntrodução ao JavaFX Sample
Formulários
Esta coleção de aplicativos de exemplo foi projetada para que você comece com tarefas
JavaFX comuns, incluindo trabalhar com layouts, controles, folhas de estilo, FXML e efeitos
visuais.
Olá, mundo, estilo JavaFX Design de formulário em JavaFX Design sofisticado com CSS
Design de interface do usuário com Formas Animadas e Visual

FXML efeitos
3
3
Olá, mundo, estilo JavaFX
A melhor maneira de ensinar como é criar e construir um aplicativo JavaFX é com um aplicativo
“Hello World”. Um benefício adicional deste tutorial é que ele permite testar se a tecnologia
JavaFX está instalada corretamente.
A ferramenta usada neste tutorial é o NetBeans IDE 7.4. Antes de começar, verifique se a
versão do NetBeans IDE que você está usando suporta JavaFX 8. Consulte a seção
Configurações de sistema certificadas da página de downloads do Java SE 8 para obter detalhes.
Construir o aplicativo 1. No menu

Arquivo , escolha Novo projeto.
2. Na categoria Aplicativo JavaFX , escolha Aplicativo JavaFX. Clique em Avançar.
3. Nomeie o projeto HelloWorld e clique em Concluir.
O NetBeans abre o arquivo HelloWorld.java e o preenche com o código para um aplicativo

Hello World básico, conforme mostrado no Exemplo 3–1.
Exemplo 3–1 Olá, Mundo

pacote helloworld;
importar javafx.application.Application; importar

javafx.event.ActionEvent; importar javafx.event.EventHandler;
importar javafx.scene.Scene; importar javafx.scene.control.Button;
importar javafx.scene.layout.StackPane; importar
javafx.stage.Stage;
public class HelloWorld extends Application {
@Sobrepor
public void start(Stage primaryStage) { Button btn = new Button();
btn.setText("Diga 'Olá Mundo'"); btn.setOnAction(new
EventHandler<ActionEvent>() {
@Sobrepor
public void handle(ActionEvent event) { System.out.println("Hello
World!");
}
});
StackPane root = new StackPane();
Olá, mundo, estilo JavaFX 3-1

Construir o aplicativo
root.getChildren().add(btn);
Cena cena = new Cena(raiz, 300, 250);
primaryStage.setTitle("Olá Mundo!");
PrimaryStage.setScene(cena); primaryStage.show();
}
public static void main(String[] args) { launch(args);
}
}
Aqui estão as coisas importantes a saber sobre a estrutura básica de um aplicativo JavaFX: ÿ A
classe principal de um aplicativo JavaFX estende a
classe javafx.application.Application . O método start() é o ponto de entrada principal para todos os

aplicativos JavaFX.
ÿ Um aplicativo JavaFX define o contêiner da interface do usuário por meio de um palco e uma cena. A
classe JavaFX Stage é o contêiner JavaFX de nível superior. A classe JavaFX Scene é o contêiner
para todo o conteúdo. O Exemplo 3–1 cria o palco e a cena e torna a cena visível em um determinado
tamanho de pixel.
ÿ No JavaFX, o conteúdo da cena é representado como um gráfico de cena hierárquico de nós. Neste
exemplo, o nó raiz é um objeto StackPane , que é um nó de layout redimensionável. Isso significa que
o tamanho do nó raiz rastreia o tamanho da cena e muda quando o palco é redimensionado por um
usuário.
ÿ O nó raiz contém um nó filho, um controle de botão com texto, além de um evento

handler para imprimir uma mensagem quando o botão é pressionado.
ÿ O método main() não é necessário para aplicativos JavaFX quando o arquivo JAR para
o aplicativo é criado com a ferramenta JavaFX Packager, que incorpora o JavaFX Launcher no arquivo
JAR. No entanto, é útil incluir o método main() para que você possa executar arquivos JAR que foram
criados sem o JavaFX Launcher, como ao usar um IDE no qual as ferramentas JavaFX não estão
totalmente integradas. Além disso, os aplicativos Swing que incorporam o código JavaFX requerem o
método main() .
A Figura 3–1 mostra o gráfico de cena para o aplicativo Hello World. Para obter mais informações
sobre gráficos de cena, consulte Trabalhando com o JavaFX Scene Graph.

Para onde ir em seguida
Figura 3–1 Gráfico de cena Hello World
Execute o aplicativo
1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto HelloWorld e escolha Executar.
2. Clique no botão Diga Olá, Mundo.
3. Verifique se o texto “Hello World!” é impresso na janela de saída do NetBeans.

A Figura 3–2 mostra o aplicativo Hello World, estilo JavaFX.
Figura 3–2 Hello World, estilo JavaFX

Isso conclui o tutorial básico do Hello World, mas continue lendo para obter mais lições sobre o
desenvolvimento de aplicativos JavaFX: ÿ Criando um formulário no JavaFX ensina os fundamentos do
layout da tela, como adicionar controles

a um layout e como criar eventos de entrada.
Olá, mundo, estilo JavaFX 3-3

ÿ Fancy Forms com JavaFX CSS fornece truques de estilo simples para aprimorar seu
aplicativo, incluindo adicionar uma imagem de fundo e estilizar botões e texto.
ÿ Usar FXML para criar uma interface de usuário mostra um método alternativo para criar a interface de usuário de
login. FXML é uma linguagem baseada em XML que fornece a estrutura para construir uma interface de usuário
separada da lógica de aplicação do seu código. ÿ Animação e efeitos visuais em JavaFX mostram como dar vida
a um aplicativo
adicionando animação de linha do tempo e efeitos de mesclagem.

4
4
Criando um formulário no JavaFX
Criar um formulário é uma atividade comum ao desenvolver um aplicativo. Este tutorial ensina os
fundamentos do layout de tela, como adicionar controles a um painel de layout e como criar eventos
de entrada.
Neste tutorial, você usará o JavaFX para criar o formulário de login mostrado na Figura 4–1.
Figura 4–1 Formulário de Login
A ferramenta usada neste tutorial de introdução é o NetBeans IDE. Antes de começar, certifique-se de
que a versão do NetBeans IDE que você está usando suporta JavaFX 8. Consulte a página
Configurações de sistema certificadas da página de downloads do Java SE para obter detalhes.
Criar o Projeto
Sua primeira tarefa é criar um projeto JavaFX no NetBeans IDE e nomeá-lo como Login: 1.
No menu Arquivo , escolha Novo projeto.
3. Nomeie o projeto como Login e clique em Concluir.
Criando um formulário no JavaFX 4-1

Criar um Layout GridPane
Quando você cria um projeto JavaFX, o NetBeans IDE fornece um aplicativo Hello World
como ponto de partida, que você já viu se seguiu o tutorial Hello World.
4. Remova o método start() gerado pelo NetBeans IDE e substitua-o pelo código do Exemplo 4–1.
Exemplo 4–1 Estágio de Aplicação

@Sobrepor
public void start(Stage primaryStage) {
primaryStage.setTitle("JavaFX Welcome");
primaryStage.show();
}
Dica: Depois de adicionar o código de exemplo em um projeto NetBeans, pressione Ctrl (ou Cmd) + Shift +
I para importar os pacotes necessários. Quando houver opções de instruções de importação, escolha
aquela que começa com javafx.

Para o formulário de login, use um layout GridPane porque ele permite que você crie uma grade flexível
de linhas e colunas na qual dispor os controles. Você pode colocar controles em qualquer célula da
grade e pode fazer com que os controles abranjam as células conforme necessário.
O código para criar o layout GridPane está no Exemplo 4–2. Adicione o código antes da linha
Exemplo 4–2 GridPane com propriedades de Gap e Padding

GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER); grid.setHgap(10);
grid.setVgap(10); grid.setPadding(new Insets(25,
25, 25, 25));
Cena cena = new Cena(grade, 300, 275);

PrimaryStage.setScene(cena);
O exemplo 4–2 cria um objeto GridPane e o atribui à variável chamada grid. A propriedade de alinhamento
altera a posição padrão da grade do canto superior esquerdo da cena para o centro. As propriedades gap
gerenciam o espaçamento entre as linhas e colunas, enquanto a propriedade padding gerencia o espaço
ao redor das bordas do painel de grade. As inserções estão na ordem superior, direita, inferior e esquerda.
Neste exemplo, há 25 pixels de preenchimento em cada lado.
A cena é criada com o painel de grade como o nó raiz, que é uma prática comum ao trabalhar com
contêineres de layout. Assim, conforme a janela é redimensionada, os nós dentro do painel de grade são
redimensionados de acordo com suas restrições de layout. Neste exemplo, o painel de grade permanece
no centro quando você aumenta ou diminui a janela. As propriedades de preenchimento garantem que
haja um preenchimento ao redor do painel de grade quando você diminui a janela.
Esse código define a largura e a altura da cena como 300 por 275. Se você não definir as dimensões
da cena, a cena será padronizada para o tamanho mínimo necessário para exibir seu conteúdo.

Adicionar texto, rótulos e campos de texto
Adicionar texto, rótulos e campos de texto

Observando a Figura 4–1, você pode ver que o formulário requer o título “Bem-vindo” e campos de
texto e senha para coletar informações do usuário. O código para criar esses controles está no
Exemplo 4–3. Adicione este código após a linha que define a propriedade de preenchimento da grade.
Exemplo 4–3 Controles

Título da cena de texto = new Text("Bem-vindo");
Scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20)); grid.add(scenetitle, 0, 0,
2, 1);
Label nomeUsuário = new Label("Nome do usuário:");

grid.add(userName, 0, 1);
TextField userTextField = new TextField();

grid.add(userTextField, 1, 1);
Label pw = new Label("Senha:"); grid.add(pw, 0,

2);
PasswordField pwBox = new PasswordField(); grid.add(pwBox,

1, 2);
A primeira linha cria um objeto Text que não pode ser editado, define o texto como Welcome e o
atribui a uma variável chamada scenetitle. A próxima linha usa o método setFont() para definir a
família da fonte, o peso e o tamanho da variável do título da cena . Usar um estilo embutido é
apropriado quando o estilo está vinculado a uma variável, mas uma técnica melhor para estilizar os
elementos de sua interface de usuário é usar uma folha de estilo. No próximo tutorial, Fancy Forms
with JavaFX CSS, você substituirá o estilo embutido por uma folha de estilo.
O método grid.add() adiciona a variável de título da cena à grade de layout. A numeração

para colunas e linhas na grade começa em zero e o título da cena é adicionado na coluna 0, linha 0.
Os dois últimos argumentos do método grid.add() definem a extensão da coluna como 2 e a extensão
da linha como 1.
As próximas linhas criam um objeto Label com o texto User Name na coluna 0, linha 1 e um objeto
Text Field que pode ser editado. O campo de texto é adicionado ao painel de grade na coluna 1,
linha 1. Um campo de senha e um rótulo são criados e adicionados ao painel de grade de maneira
semelhante.
Ao trabalhar com um painel de grade, você pode exibir as linhas de grade, o que é útil para fins
de depuração. Nesse caso, você pode adicionar grid.setGridLinesVisible(true) após a linha que
adiciona o campo de senha. Em seguida, ao executar o aplicativo, você verá as linhas para as
colunas e linhas da grade, bem como as propriedades do intervalo, conforme mostrado na Figura 4–
2.

Adicionar um botão e texto
Figura 4–2 Formulário de login com linhas de grade

Os dois controles finais necessários para o aplicativo são um controle Button para enviar os dados
e um controle Text para exibir uma mensagem quando o usuário pressiona o botão.
Primeiro, crie o botão e posicione-o no canto inferior direito, que é um posicionamento

comum para botões que executam uma ação que afeta todo o formulário. O código está no Exemplo
4–4. Adicione este código antes do código da cena.
Exemplo 4–4 Botão

Button btn = new Button("Entrar"); HBox hbBtn
= new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn); grid.add(hbBtn, 1,
4);
A primeira linha cria um botão chamado btn com o rótulo Entrar e a segunda linha cria um painel
de layout HBox chamado hbBtn com espaçamento de 10 pixels. O painel HBox define um alinhamento
para o botão que é diferente do alinhamento aplicado aos outros controles no painel de grade. A
propriedade de alinhamento tem um valor de Pos.BOTTOM_RIGHT, que posiciona um nó na parte
inferior do espaço verticalmente e na borda direita do espaço horizontalmente. O botão é adicionado
como filho do painel HBox e o painel HBox é adicionado à grade na coluna 1, linha 4.
Agora, adicione um controle Text para exibir a mensagem, conforme mostrado no Exemplo 4–5.
Adicione este código antes do código da cena.
Exemplo 4–5 Texto

final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);
A Figura 4–3 mostra o formulário agora. Você não verá a mensagem de texto até trabalhar na
próxima seção do tutorial, Adicionar código para manipular um evento.

Figura 4–3 Formulário de login com botão
Adicionar código para lidar com um evento
Por fim, faça com que o botão exiba a mensagem de texto quando o usuário o pressionar. Adicione
o código do Exemplo 4–6 antes do código da cena.
Exemplo 4–6 Evento de botão

btn.setOnAction(new EventHandler<ActionEvent>() {
@Sobrepor
public void handle(ActionEvent e) {
actiontarget.setFill(Color.FIREBRICK); actiontarget.setText("Botão
de login pressionado");
}
});
O método setOnAction() é usado para registrar um manipulador de eventos que define o

objeto actiontarget como o botão Entrar pressionado quando o usuário pressiona o botão.
A cor do objeto actiontarget é definida como vermelho tijolo refratário.
Clique com o botão direito do mouse no nó do projeto Login na janela Projetos, escolha Executar e
clique no botão Entrar. A Figura 4–4 mostra os resultados. Se você tiver problemas, dê uma olhada
no código no arquivo Login.java que está incluído no arquivo Login.zip para download.

Para onde ir a partir daqui
Figura 4–4 Formulário de login final

Isso conclui o tutorial de formulário básico, mas você pode continuar lendo os tutoriais a
seguir sobre o desenvolvimento de aplicativos JavaFX. ÿ Fancy Forms com JavaFX CSS
fornece dicas sobre como adicionar uma imagem de plano de fundo e alterar radicalmente o
estilo do texto, rótulo e botão no formulário de login.
ÿ Usar FXML para criar uma interface de usuário mostra um método alternativo para criar a
interface de usuário de login. FXML é uma linguagem baseada em XML que fornece a
estrutura para construir uma interface de usuário separada da lógica de aplicação do seu código.
ÿ Trabalhar com layouts no JavaFX explica os painéis de layout integrados do JavaFX e

dicas e truques para usá-los.
Experimente também as amostras JavaFX, que você pode baixar na seção JDK Demos and
Samples da página Java SE Downloads em http://www.oracle.com/technetwork/java/javase/
downloads/. A amostra do Ensemble contém exemplos de layouts e seu código-fonte.

5
5
Formulários sofisticados com JavaFX CSS
Este tutorial é sobre como tornar seu aplicativo JavaFX atraente adicionando uma folha de estilo
em cascata (CSS). Você desenvolve um design, cria um arquivo .css e aplica os novos estilos.
Neste tutorial, você usará um formulário de Login que usa estilos padrão para rótulos, botões e cor
de fundo e, com algumas modificações CSS simples, o transformará em um aplicativo estilizado,
conforme mostrado na Figura 5–1 .
Figura 5–1 Formulário de login com e sem CSS
A ferramenta usada neste tutorial de introdução é o NetBeans IDE. Antes de começar, certifique-se de
que a versão do NetBeans IDE que você está usando suporta JavaFX 8. Consulte a página
Criar o Projeto
Se você seguiu o guia de Introdução desde o início, já criou o projeto de Login necessário para este
tutorial. Caso contrário, baixe o projeto Login clicando com o botão direito do mouse em Login.zip e
salvando-o em seu sistema de arquivos. Extraia os arquivos do arquivo zip e abra o projeto no
NetBeans IDE.
Formulários sofisticados com JavaFX CSS 5-1

Crie o arquivo CSS
Crie o arquivo CSS

Sua primeira tarefa é criar um novo arquivo CSS e salvá-lo no mesmo diretório da classe principal de seu aplicativo.
Depois disso, você deve tornar o aplicativo JavaFX ciente da folha de estilo em cascata recém-adicionada.
1. Na janela Projetos do NetBeans IDE, expanda o nó do projeto Login e, em seguida, o nó do diretório Pacotes de
código-fonte .
2. Clique com o botão direito do mouse na pasta de login no diretório Source Packages e escolha New,
depois Outro.
3. Na caixa de diálogo Novo arquivo, escolha Outro, Folha de estilo em cascata e clique em
Próximo.
4. Digite Login para o campo de texto Nome do arquivo e certifique-se de que o valor do campo de texto Pasta seja
src\login.
5. Clique em Concluir.
6. No arquivo Login.java , inicialize a variável de folhas de estilo da classe Scene para apontar para a folha de
estilo em cascata incluindo a linha de código mostrada em negrito abaixo para que apareça conforme
mostrado no Exemplo 5–1.
Exemplo 5–1 Inicializar as folhas de estilo Variável

Cena cena = new Cena(grade, 300, 275);
PrimaryStage.setScene(cena); cena.getStylesheets().add
(Login.class.getResource("Login.css").toExternalForm()); primaryStage.show();
Este código procura a folha de estilo no diretório src\login no projeto NetBeans.
Adicionar uma imagem de plano de
fundo Uma imagem de plano de fundo ajuda a tornar seu formulário mais atraente. Para este tutorial,
você adiciona um plano de fundo cinza com uma textura de linho.
Primeiro, baixe a imagem de plano de fundo clicando com o botão direito do mouse na imagem background.jpg e
salvando-a na pasta src\login no projeto Login NetBeans.
Agora, adicione o código da propriedade background-image ao arquivo CSS. Lembre-se de que o caminho é relativo
à folha de estilo. Portanto, no código do Exemplo 5–2, a imagem background.jpg está no mesmo diretório que o
arquivo Login.css .
Exemplo 5–2 Imagem de fundo

.raiz {
-fx-background-image: url("background.jpg");
}
A imagem de plano de fundo é aplicada ao estilo .root , o que significa que é aplicada ao nó raiz da ocorrência de
Scene . A definição de estilo consiste no nome da propriedade (-fx-background-image) e no valor da propriedade
(url(“background.jpg”)).
A Figura 5–2 mostra o formulário de login com o novo plano de fundo cinza.

Estilizar as etiquetas
Figura 5–2 Fundo de linho cinza
Estilizar as etiquetas
Os próximos controles a serem aprimorados são os rótulos. Você usará a classe de estilo .label , o que
significa que os estilos afetarão todos os rótulos do formulário. O código está no Exemplo 5–3.
Exemplo 5–3 Tamanho da fonte, preenchimento, peso e efeito em rótulos
.label { -fx-
font-size: 12px; -fx-font-
weight: negrito; -fx-
preenchimento de texto:
#333333; -fx-efeito: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
Este exemplo aumenta o tamanho e o peso da fonte e aplica uma sombra de cor cinza (#333333). O
objetivo da sombra projetada é adicionar contraste entre o texto cinza escuro e o fundo cinza claro.
Consulte a seção sobre efeitos no JavaFX CSS Reference Guide para obter detalhes sobre os
parâmetros da propriedade de sombreamento.
Os rótulos aprimorados de nome de usuário e senha são mostrados na Figura 5–3.

Texto de estilo
Figura 5–3 Rótulos maiores e mais ousados com sombra projetada
Texto de estilo
Agora, crie alguns efeitos especiais nos dois objetos Text no formulário: scenetitle, que inclui o texto
Welcome, e actiontarget, que é o texto retornado quando o usuário pressiona o botão Sign in. Você pode
aplicar estilos diferentes a objetos de texto usados de diversas maneiras.
1. No arquivo Login.java , remova as seguintes linhas de código que definem os estilos embutidos
atualmente definidos para os objetos de texto:
Scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20));
actiontarget.setFill(Color.FIREBRICK);
Ao mudar para CSS em vez de estilos inline, você separa o design do conteúdo.
Essa abordagem torna mais fácil para um designer ter controle sobre o estilo sem precisar modificar
o conteúdo.
2. Crie um ID para cada nó de texto usando o método setID() da classe Node: Adicione as seguintes
linhas em negrito para que apareçam conforme mostrado no Exemplo 5–4.
Exemplo 5–4 Criar ID para nós de texto

...
Título da cena de texto = new Text("Bem-vindo");
scenetitle.setId("texto de boas vindas");
...
...
grid.add(actiontarget, 1, 6);
actiontarget.setId("actiontarget");
..
3. No arquivo Login.css , defina as propriedades de estilo para o texto de boas-vindas e
IDs de destino de ação . Para o nome do estilo, use o ID precedido por um sinal numérico (#),
conforme mostrado no Exemplo 5–5.

Estilizar o botão
Exemplo 5–5 Efeito de texto

#texto de boas vindas {
-fx-tamanho da fonte: 32px;
-fx-font-family: "Arial Black"; -fx-fill: #818181;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2);

}
#actiontarget { -fx-fill:
FIREBRICK;
-fx-font-weight: negrito; -fx-
efeito: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
O tamanho do texto de boas-vindas é aumentado para 32 pontos e a fonte é alterada para Arial Black.
A cor de preenchimento do texto é definida como cinza escuro (#818181) e um efeito de sombra interna
é aplicado, criando um efeito de relevo. Você pode aplicar uma sombra interna a qualquer cor alterando
a cor de preenchimento do texto para uma versão mais escura do plano de fundo. Consulte a seção
sobre efeitos no JavaFX CSS Reference Guide para obter detalhes sobre os parâmetros da propriedade
de sombra interna.
A definição de estilo para actiontarget é semelhante ao que você viu antes.
A Figura 5–4 mostra as alterações de fonte e os efeitos de sombra nos dois objetos Text .
Figura 5–4 Texto com efeitos de sombra
Estilizar o botão
O próximo passo é estilizar o botão, fazendo com que ele mude de estilo quando o usuário passar o
mouse sobre ele. Essa alteração dará aos usuários uma indicação de que o botão é interativo, uma
prática de design padrão.
Primeiro, crie o estilo para o estado inicial do botão adicionando o código do Exemplo 5–
6. Esse código usa o seletor de classe de estilo .button , de modo que, se você adicionar um botão
ao formulário posteriormente, o novo botão também usará esse estilo.

Estilizar o botão
Exemplo 5–6 Sombra projetada para botão

.botão {
-fx-text-fill: branco;
-fx-font-family: "Arial Narrow"; -fx-font-weight:
negrito; -fx-background-color: linear-
gradient(#61a2b1, #2A5058); -fx-effect: dropshadow( three-pass-box ,
rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1);
}
Agora, crie uma aparência ligeiramente diferente para quando o usuário passar o mouse
sobre o botão. Você faz isso com a pseudo-classe hover. Uma pseudoclasse inclui o seletor da
classe e o nome do estado separados por dois pontos (:), conforme mostrado no Exemplo 5–7.
Exemplo 5–7 Estilo de foco do botão

.botão: passe o mouse {
-fx-background-color: linear-gradient(#2A5058, #61a2b1);
}
A Figura 5–5 mostra os estados inicial e flutuante do botão com seu novo plano de fundo
cinza-azulado e texto branco em negrito.
Figura 5–5 Estados iniciais e dos botões de foco
A Figura 5–6 mostra a aplicação final.

Figura 5–6 Aplicação estilizada final

Aqui estão algumas coisas para você tentar a
seguir: ÿ Veja o que você pode criar usando CSS. Alguns documentos que podem te ajudar são
Skinning JavaFX Applications with CSS, Styling Charts with CSS, and the JavaFX CSS Reference
Guide. A seção Skinning with CSS and the CSS Analyzer do JavaFX Scene Builder User Guide
também fornece informações sobre como você pode usar a ferramenta JavaFX Scene Builder
para aplicar skin ao seu layout JavaFX FXML.
ÿ Consulte Estilizando botões FX com CSS para obter exemplos de como criar estilos de botões
comuns usando CSS.


6
6
Usando FXML para criar uma interface de usuário
Este tutorial mostra os benefícios do uso de JavaFX FXML, que é uma linguagem baseada
em XML que fornece a estrutura para construir uma interface de usuário separada da lógica de
aplicativo de seu código.
Se você iniciou este documento desde o início, viu como criar um aplicativo de login usando apenas
JavaFX. Aqui, você usa FXML para criar a mesma interface de usuário de login, separando o design
do aplicativo da lógica do aplicativo, facilitando assim a manutenção do código. A interface de usuário
de login criada neste tutorial é mostrada na Figura 6–1.
Figura 6–1 Interface do usuário de login
Este tutorial usa o NetBeans IDE. Certifique-se de que a versão do NetBeans IDE que você está
usando suporta JavaFX 8. Consulte a seção Configurações de sistema certificadas da página de
downloads do Java SE para obter detalhes.
Configurar o projeto
Sua primeira tarefa é configurar um projeto JavaFX FXML no NetBeans IDE:
1. No menu Arquivo , escolha Novo projeto.
2. Na categoria Aplicativo JavaFX , escolha Aplicativo JavaFX FXML. Clique em Avançar.
Usando FXML para criar uma interface de usuário 6-1

Carregue o arquivo de origem FXML
3. Nomeie o projeto como FXMLExample e clique em Concluir.
O NetBeans IDE abre um projeto FXML que inclui o código para um aplicativo Hello World
básico. O aplicativo inclui três arquivos: ÿ FXMLExample.java. Este arquivo cuida do código
Java padrão necessário para um aplicativo FXML.
ÿ FXMLDocument.fxml. Este é o arquivo de origem FXML no qual você define o usuário

interface.
ÿ FXMLDocumentController.java. Este é o arquivo do controlador para lidar com o

entrada de mouse e teclado.
4. Renomeie FXMLDocumentController.java para FXMLExampleController.java para que

o nome é mais significativo para este aplicativo. a. Na janela
Projetos, clique com o botão direito do mouse em FXMLDocumentController.java e escolha

Refatorar e Renomear.
b. Insira FXMLExampleController e clique em Refatorar.
5. Renomeie FXMLDocument.fxml para fxml_example.fxml.
a. Clique com o botão direito em FXMLDocument.fxml e escolha
Renomear. b. Digite fxml_example e clique em OK.
Carregue o arquivo de origem FXML
O primeiro arquivo editado é o arquivo FXMLExample.java . Este arquivo inclui o código para
configurar a classe principal do aplicativo e para definir o palco e a cena. Mais específico para
FXML, o arquivo usa a classe FXMLLoader , que é responsável por carregar o arquivo de origem FXML
e retornar o grafo do objeto resultante.
Faça as alterações mostradas em negrito no Exemplo 6–1.
Exemplo 6–1 FXMLExample.java

@Sobrepor
public void start(Stage stage) throws Exception {
Raiz pai = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));
Cena cena = new Cena(raiz, 300, 275);
stage.setTitle("FXML Welcome");
palco.setScene(cena); palco.show();
Uma boa prática é definir a altura e a largura da cena ao criá-la, neste caso 300 por 275; caso contrário,
a cena padroniza para o tamanho mínimo necessário para exibir seu conteúdo.
Modifique as declarações de importação

Em seguida, edite o arquivo fxml_example.fxml . Este arquivo especifica a interface com o usuário
que é exibida quando o aplicativo é iniciado. A primeira tarefa é modificar as instruções de importação para
que seu código se pareça com o Exemplo 6–2.

Adicionar campos de texto e senha
Exemplo 6–2 Declaração XML e instruções de importação
<?xml versão="1.0" codificação="UTF-8"?>
<?import java.net.*?> <?

import javafx.geometry.*?> <?
import javafx.scene.control.*?> <?import
javafx.scene.layout.*?> <?import
javafx.scene .texto.*?>
Assim como em Java, os nomes de classe podem ser totalmente qualificados (incluindo o nome do pacote)
ou podem ser importados usando a instrução import, conforme mostrado no Exemplo 6–2. Se preferir, você
pode usar instruções de importação específicas que se referem a classes.

O aplicativo Hello World gerado pelo NetBeans usa um layout AnchorPane . Para o formulário de login,
você usará um layout GridPane porque ele permite criar uma grade flexível de linhas e colunas na qual
colocar os controles.
Remova o layout AnchorPane e seus filhos e substitua-o pelo layout GridPane no Exemplo 6–3.
Exemplo 6–3 Layout do GridPane
<GridPane fx:controller="fxmlexample.FXMLExampleController" xmlns:fx="http://

javafx.com/fxml" align="center" hgap="10" vgap="10">
<padding><Insets top="25" right="25" bottom="10" left="25"/></padding>
</GridPane>
Neste aplicativo, o layout GridPane é o elemento raiz do documento FXML e, como tal, possui dois atributos.
O atributo fx:controller é necessário quando você especifica manipuladores de eventos baseados em
controlador em sua marcação. O atributo xmlns:fx é sempre necessário e especifica o namespace fx .
O restante do código controla o alinhamento e o espaçamento do painel de grade. A propriedade de

alinhamento altera a posição padrão da grade do canto superior esquerdo da cena para o centro. As
propriedades gap gerenciam o espaçamento entre as linhas e colunas, enquanto a propriedade padding
gerencia o espaço ao redor das bordas do painel de grade.
À medida que a janela é redimensionada, os nós no painel de grade são redimensionados de acordo com suas
restrições de layout. Neste exemplo, a grade permanece no centro quando você aumenta ou diminui a janela.
As propriedades de preenchimento garantem que haja um preenchimento ao redor da grade quando você
torna a janela menor.

Olhando novamente para a Figura 6–1, você pode ver que o formulário de login requer o título
“Bem-vindo” e campos de texto e senha para coletar informações do usuário. O código no Exemplo 6–4 faz
parte do layout GridPane e deve ser colocado acima da instrução </GridPane> .
Exemplo 6–4 Controles de campo de texto, rótulo, campo de texto e senha
<Text text="Bem-vindo"
GridPane.columnIndex="0" GridPane.rowIndex="0"

GridPane.columnSpan="2"/>
<Label text="Nome de usuário:"

GridPane.columnIndex="0" GridPane.rowIndex="1"/>
<TextField
<Label text="Senha:"
<PasswordField fx:id="passwordField"
A primeira linha cria um objeto Text e define seu valor de texto como Welcome.
Os atributos GridPane.columnIndex e GridPane.rowIndex correspondem ao
posicionamento do controle Text na grade. A numeração de linhas e colunas na grade começa em
zero e a localização do controle Text é definida como (0,0), o que significa que está na primeira
coluna da primeira linha. O atributo GridPane.columnSpan é definido como 2, fazendo com que o
título de boas-vindas ocupe duas colunas na grade. Você precisará dessa largura extra
posteriormente no tutorial quando adicionar uma folha de estilo para aumentar o tamanho da fonte do texto para 32 pontos.
As próximas linhas criam um objeto Label com o texto User Name na coluna 0, linha 1 e um
objeto TextField à direita dele na coluna 1, linha 1. Outro objeto Label e PasswordField são
criados e adicionados à grade de maneira semelhante.
Ao trabalhar com um layout de grade, você pode exibir as linhas de grade, o que é útil para fins
de depuração. Nesse caso, defina a propriedade gridLinesVisible como true adicionando a
instrução <gridLinesVisible>true</gridLinesVisible> logo após a instrução <padding></padding> .
Em seguida, ao executar o aplicativo, você verá as linhas para as colunas e linhas da grade,
bem como as propriedades do intervalo, conforme mostrado na Figura 6–2.
Figura 6–2 Formulário de login com linhas de grade


Os dois controles finais necessários para o aplicativo são um controle Button para enviar os dados e
um controle Text para exibir uma mensagem quando o usuário pressiona o botão.
O código está no Exemplo 6–5. Adicione este código antes de </GridPane>.
Exemplo 6–5 HBox, botão e texto

<HBox espaçamento="10" alinhamento="bottom_right"
GridPane.columnIndex="1" GridPane.rowIndex="4">
<Button text="Entrar"
onAction="#handleSubmitButtonAction"/>
</HBox>
<Text fx:id="actiontarget"
GridPane.columnIndex="0" GridPane.columnSpan="2"
GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>
Um painel HBox é necessário para definir um alinhamento para o botão diferente do alinhamento
padrão aplicado aos outros controles no layout GridPane . A propriedade de alinhamento é definida
como bottom_right, que posiciona um nó na parte inferior do espaço verticalmente e na borda direita do
espaço horizontalmente. O painel HBox é adicionado à grade na coluna 1, linha 4.
O painel HBox tem um filho, um Button com a propriedade text definida como Sign in e uma
propriedade onAction definida como handleSubmitButtonAction(). Embora o FXML seja uma maneira
conveniente de definir a estrutura da interface do usuário de um aplicativo, ele não fornece uma maneira
de implementar o comportamento de um aplicativo. Você implementa o comportamento para o método
handleSubmitButtonAction() no código Java na próxima seção deste tutorial, Adicionar código para
manipular um evento.
A atribuição de um valor fx:id a um elemento, conforme mostrado no código do controle Text , cria
uma variável no namespace do documento, à qual você pode fazer referência em qualquer outro local
do código. Embora não seja obrigatório, definir um campo do controlador ajuda a esclarecer como o
controlador e a marcação estão associados.

Agora faça o controle de Texto exibir uma mensagem quando o usuário pressionar o botão. Você faz
isso no arquivo FXMLExampleController.java . Exclua o código gerado pelo NetBeans IDE e substitua-
o pelo código do Exemplo 6–6.
Exemplo 6–6 FXMLExampleController.java

pacote fxmlexemplo;
importar javafx.event.ActionEvent; importar

javafx.fxml.FXML; importar javafx.scene.text.Text;
public class FXMLExampleController {

@FXML private Text actiontarget;
@FXML protegido void handleSubmitButtonAction(ActionEvent event) {

actiontarget.setText("Botão de login pressionado");
}

Use uma linguagem de script para lidar com eventos
A anotação @FXML é usada para marcar campos de membro do controlador não público e métodos de
manipulador para uso pela marcação FXML. O método handleSubmtButtonAction define a variável
actiontarget como botão Entrar pressionado quando o usuário pressiona o botão.
Você pode executar o aplicativo agora para ver a interface de usuário completa. A Figura 6–3 mostra os
resultados quando você digita texto nos dois campos e clica no botão Entrar. Se você tiver algum problema,
poderá comparar seu código com o exemplo FXMLLogin.
Figura 6–3 Janela de login do FXML
Use uma linguagem de script para lidar com eventos

Como alternativa ao uso do código Java para criar um manipulador de eventos, você pode criar o
manipulador com qualquer linguagem que forneça um mecanismo de script compatível com JSR 223. Essas
linguagens incluem JavaScript, Groovy, Jython e Clojure.
Opcionalmente, você pode tentar usar JavaScript agora.
1. No arquivo fxml_example.fxml, adicione a declaração JavaScript após a declaração XML doctype.
<?linguagem javascript?>
2. Na marcação Button , altere o nome da função para que a chamada fique da seguinte forma:
onAction="handleSubmitButtonAction(evento);"
3. Remova o atributo fx:controller da marcação GridPane e adicione o

Função JavaScript em uma tag <script> diretamente abaixo dela, conforme mostrado no Exemplo 6–7.
Exemplo 6–7 JavaScript em FXML

<GridPane xmlns:fx="http://javafx.com/fxml" alinhamento="center"
hgap="10" vgap="10"> <fx:script>
function handleSubmitButtonAction()
{ actiontarget.setText("Chamando o JavaScript");
}
</fx:script>

Estilize o aplicativo com CSS
Como alternativa, você pode colocar as funções JavaScript em um arquivo externo (como
fxml_example.js) e incluir o script assim:
<fx:script source="fxml_example.js"/>
O resultado está na Figura 6–4.
Figura 6–4 Aplicativo de login usando JavaScript
Se você estiver pensando em usar uma linguagem de script com FXML, observe que um IDE pode não
suportar a passagem pelo código do script durante a depuração.
Estilize o aplicativo com CSS

A tarefa final é fazer com que o aplicativo de login pareça atraente adicionando uma Cascading Style Sheet
(CSS).
1. Crie uma folha de estilo.
a. Na janela Project, clique com o botão direito do mouse na pasta fxmlexample em Source
Pacotes e escolha Novo e, em seguida , Outro.
b. Na caixa de diálogo Novo arquivo, escolha Outro, Folha de estilo em cascata e

clique em Avançar.
c. Digite Login e clique em Concluir. d.
Copie o conteúdo do arquivo Login.css em seu arquivo CSS. O arquivo Login.css está incluído no arquivo
LoginCSS.zip para download. Para obter uma descrição das classes no arquivo CSS, consulte
Fancy Forms with JavaFX CSS.
2. Faça o download da imagem cinza semelhante a linho para o plano de fundo clicando com o botão
direito do mouse no arquivo background.jpg e salvando-o na pasta fxmlexample .
3. Abra o arquivo fxml_example.fxml e adicione um elemento de folha de estilo antes do final de

a marcação para o layout GridPane conforme mostrado no Exemplo 6–8.
Exemplo 6–8 Folha de estilo
<folhas de estilo>

<URL value="@Login.css" />

</stylesheets>
</GridPane>
O símbolo @ antes do nome da folha de estilo na URL indica que a folha de estilo está no mesmo
diretório que o arquivo FXML.
4. Para usar o estilo raiz para o painel de grade, adicione uma classe de estilo à marcação para o
Layout GridPane conforme mostrado no Exemplo 6–9.
Exemplo 6–9 Estilize o GridPane

<GridPane fx:controller="fxmlexample.FXMLExampleController"
xmlns:fx="http://javafx.com/fxml" alinhamento="center" hgap="10" vgap="10" styleClass="root">
5. Crie um ID de texto de boas-vindas para o objeto Welcome Text para que ele use o estilo
#welcome-text definido no arquivo CSS, conforme mostrado no Exemplo 6–10.
Exemplo 6–10 ID de texto

<Text id="welcome-text" text="Bem-vindo"
GridPane.columnIndex="0" GridPane.rowIndex="0"
GridPane.columnSpan="2"/>
6. Execute o aplicativo. A Figura 6–5 mostra o aplicativo estilizado. Se você tiver problemas, dê uma
olhada no código que está incluído no arquivo FXMLExample.zip para download
Figura 6–5 Aplicativo de login estilizado

Agora que você está familiarizado com FXML, consulte Introdução ao FXML, que fornece mais informações
sobre os elementos que compõem a linguagem FXML. O documento está incluído no pacote javafx.fxml na
documentação da API.
Você também pode experimentar a ferramenta JavaFX Scene Builder abrindo o arquivo fxml_example.fxml
no Scene Builder e fazendo modificações. Esta ferramenta fornece um layout visual

ambiente para projetar a interface do usuário para aplicativos JavaFX e gera automaticamente o
código FXML para o layout. Observe que o arquivo FXML pode ser reformatado quando salvo.
Consulte Getting Started with JavaFX Scene Builder para obter mais informações sobre esta
ferramenta. A seção Skinning with CSS and the CSS Analyzer do JavaFX Scene Builder User
Guide também fornece informações sobre como você pode aplicar skin ao seu layout FXML.


7
7Animação e efeitos visuais em JavaFX
Você pode usar o JavaFX para desenvolver rapidamente aplicativos com experiências de usuário
avançadas. Neste tutorial de introdução, você aprenderá a criar objetos animados e obter efeitos
complexos com muito pouca codificação.
A Figura 7–1 mostra o aplicativo a ser criado.
Figura 7–1 Aplicação de Círculos Coloridos
A Figura 7–2 mostra o gráfico de cena para o aplicativo ColorfulCircles. Os nós que ramificam são
instanciações da classe Group, e os nós sem ramificação, também conhecidos como nós folha, são
instanciações das classes Rectangle e Circle.
Animação e efeitos visuais em JavaFX 7-1

Configurar o aplicativo
Figura 7–2 Gráfico de cena de círculos coloridos
A ferramenta usada neste tutorial de introdução é o NetBeans IDE. Antes de começar, certifique-se
de que a versão do NetBeans IDE que você está usando suporta JavaFX 8. Consulte a seção
Configurar o aplicativo Configure

seu projeto JavaFX no NetBeans IDE da seguinte maneira: 1.
No menu Arquivo , escolha Novo projeto.
3. Nomeie o projeto ColorfulCircles e clique em Finish.
4. Exclua as instruções de importação geradas pelo NetBeans IDE.
Você pode gerar as instruções de importação à medida que avança no tutorial usando
o recurso de autocompletar código ou o comando Corrigir importações no menu Código-fonte
no NetBeans IDE. Quando houver opções de instruções de importação, escolha aquela que
começa com javafx.
Configurar o projeto Exclua

a classe ColorfulCircles do arquivo de origem gerado pelo NetBeans IDE e substitua-o pelo código
do Exemplo 7–1.
Exemplo 7–1 Aplicação Básica

public class ColorfulCircles estende o aplicativo {
@Sobrepor
public void start(Stage primaryStage) {
Raiz do grupo = new Group();

Adicionar gráficos
Scene cena = new Scene(root, 800, 600, Color.BLACK);

PrimaryStage.setScene(cena);
}
public static void main(String[] args) { launch(args);
}
}
Para o aplicativo ColorfulCircles, é apropriado usar um nó de grupo como nó raiz para a cena. O tamanho
do grupo é determinado pelo tamanho dos nós dentro dele.
Para a maioria dos aplicativos, no entanto, você deseja que os nós rastreiem o tamanho da cena e mudem
quando o palco for redimensionado. Nesse caso, você usa um nó de layout redimensionável como raiz,
conforme descrito em Criando um formulário no JavaFX.
Você pode compilar e executar o aplicativo ColorfulCircles agora e em cada etapa do tutorial para ver os
resultados intermediários. Se você tiver problemas, dê uma olhada no código no arquivo ColorfulCircles.java,
que está incluído no arquivo ColorfulCircles.zip para download. Neste ponto, o aplicativo é uma simples janela
preta.
Adicionar gráficos
Em seguida, crie 30 círculos adicionando o código do Exemplo 7–2 antes da linha
primaryStage.show().
Exemplo 7–2 30 Círculos
Círculos do grupo = new Group(); for (int

i = 0; i < 30; i++) {
Circle circle = new Circle(150, Color.web("white", 0.05));
circle.setStrokeType(StrokeType.OUTSIDE); circle.setStroke(Color.web("branco",
0,16));
circle.setStrokeWidth(4);
circles.getChildren().add(circle);
}
root.getChildren().add(círculos);
Esse código cria um grupo chamado circles e usa um loop for para adicionar 30 círculos ao grupo. Cada
círculo tem um raio de 150, cor de preenchimento branca e nível de opacidade de 5%, o que significa que é
quase transparente.
Para criar uma borda ao redor dos círculos, o código inclui a classe StrokeType. Um tipo de traçado
FORA significa que o limite do círculo é estendido para fora do interior pelo valor StrokeWidth, que é 4.
A cor do traçado é branca e o nível de opacidade é de 16 por cento, tornando-o mais claro que a cor dos
círculos .
A linha final adiciona o grupo de círculos ao nó raiz. Esta é uma estrutura temporária.
Posteriormente, você modificará esse gráfico de cena para corresponder ao mostrado na Figura 7–2.
A Figura 7–3 mostra o aplicativo. Como o código ainda não especifica um local exclusivo para cada
círculo, os círculos são desenhados uns sobre os outros, com o canto superior esquerdo da janela como
ponto central dos círculos. A opacidade dos círculos sobrepostos interage com o fundo preto, produzindo a
cor cinza dos círculos.

Adicionar um efeito visual
Figura 7–3 Círculos
Adicionar um efeito visual

Continue aplicando um efeito de desfoque de caixa aos círculos para que pareçam ligeiramente fora
de foco. O código está no Exemplo 7–3. Adicione este código antes da linha primaryStage.show().
Exemplo 7–3 Efeito de desfoque de caixa
circles.setEffect(new BoxBlur(10, 10, 3));
Esse código define o raio do desfoque para 10 pixels de largura por 10 pixels de altura e a
iteração do desfoque para 3, aproximando-o de um desfoque gaussiano. Essa técnica de
desfoque produz um efeito de suavização na borda dos círculos, conforme mostrado na Figura 7–4.
Figura 7–4 Desfoque de caixa em círculos

Criar um Gradiente de Fundo
Criar um Gradiente de Fundo

Agora, crie um retângulo e preencha-o com um gradiente linear, conforme mostrado no Exemplo 7–4.
Adicione o código antes da linha root.getChildren().add(circles) para que o retângulo de gradiente

apareça atrás dos círculos.
Exemplo 7–4 Gradiente linear
Cores do retângulo = new Rectangle(scene.getWidth(), scene.getHeight(),

novo LinearGradient(0f, 1f, 1f, 0f, verdadeiro, CycleMethod.NO_CYCLE, novo
Stop[]
{ new Stop(0, Color.web("#f8bd55")), new
Stop(0.14, Color.web("#c0fe56")), new Stop(0.28,
Color.web("#5dfbc1") ), new Stop(0.43,
Color.web("#64c2f8")), new Stop(0.57,
Color.web("#be4af7")), new Stop(0.71,
Color.web("#ed5fc2")), new Stop(0.85,
Color.web("#ef504c")), new Stop(1,
Color.web("#f2660f")),}));
colors.widthProperty().bind(scene.widthProperty());
colors.heightProperty().bind(scene.heightProperty());
root.getChildren().add(cores);
Este código cria um retângulo chamado colors. O retângulo tem a mesma largura e altura da cena e
é preenchido com um gradiente linear que começa no canto inferior esquerdo (0, 1) e termina no canto
superior direito (1, 0). O valor true significa que o gradiente é proporcional ao retângulo e NO_CYCLE
indica que o ciclo de cores não será repetido. A sequência Stop[] indica qual deve ser a cor do gradiente
em um ponto específico.
As próximas duas linhas de código fazem com que o gradiente linear se ajuste à medida que o
tamanho da cena muda, vinculando a largura e a altura do retângulo à largura e altura da cena. Consulte
Usando Propriedades e Vinculações do JavaFX para obter mais informações sobre vinculação.
A linha final do código adiciona o retângulo de cores ao nó raiz.
Os círculos cinzas com bordas borradas agora aparecem no topo de um arco-íris de cores, conforme
mostrado na Figura 7–5.

Aplicar um modo de mesclagem
Figura 7–5 Gradiente linear
A Figura 7–6 mostra o gráfico de cena intermediário. Neste ponto, o grupo de círculos e o retângulo de cores
são filhos do nó raiz.
Figura 7–6 Gráfico de cena intermediária
Aplicar um modo de mesclagem
Em seguida, adicione cor aos círculos e escureça a cena adicionando um efeito de mistura de sobreposição.
Você removerá o grupo de círculos e o retângulo de gradiente linear do gráfico de cena e os adicionará ao
novo grupo de mesclagem de sobreposição.
1. Localize as duas linhas de código a seguir:

root.getChildren().add(cores);
root.getChildren().add(círculos);
2. Substitua as duas linhas de código da Etapa 1 pelo código do Exemplo 7–5.
Exemplo 7–5 Modo de mesclagem
Grupo blendModeGroup = new

Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(),
Color.BLACK), círculos), cores);

Adicionar Animação
cores.setBlendMode(BlendMode.OVERLAY);
root.getChildren().add(blendModeGroup);
O grupo blendModeGroup configura a estrutura para a mistura de sobreposição. O grupo

contém duas crianças. O primeiro filho é um novo Grupo (sem nome) contendo um novo
retângulo preto (sem nome) e o grupo de círculos criado anteriormente. O segundo filho é o
retângulo de cores criado anteriormente.
O método setBlendMode() aplica a mistura de sobreposição ao retângulo de cores.

A linha final do código adiciona o blendModeGroup ao gráfico de cena como filho do nó raiz,
conforme ilustrado na Figura 7–2.
Uma mistura de sobreposição é um efeito comum em aplicativos de design gráfico. Essa mistura
pode escurecer uma imagem ou adicionar destaques ou ambos, dependendo das cores da
mistura. Nesse caso, o retângulo de gradiente linear é usado como sobreposição. O retângulo
preto serve para manter o fundo escuro, enquanto os círculos quase transparentes pegam as
cores do degradê, mas também escurecem.
A Figura 7–7 mostra os resultados. Você verá o efeito completo da mistura de sobreposição ao
animar os círculos na próxima etapa.
Figura 7–7 Mistura de sobreposição
Adicionar Animação
A etapa final é usar animações JavaFX para mover os círculos: 1.
Se ainda não o fez, adicione import static

java.lang.Math.random; à lista de declarações de importação.
2. Adicione o código de animação no Exemplo 7–6 antes da linha primaryStage.show().
Exemplo 7–6 Animação
Linha do tempo linha do tempo = new Linha do

tempo(); for (Círculo do nó: circles.getChildren()) {
timeline.getKeyFrames().addAll( new
KeyFrame(Duration.ZERO, // define a posição inicial em 0
novo KeyValue(circle.translateXProperty(), random() * 800),

new KeyValue(circle.translateYProperty(), random() * 600)

),
new KeyFrame(new Duration(40000), // define a posição final em 40s
new KeyValue(circle.translateXProperty(), random() * 800), new
KeyValue(circle.translateYProperty(), random() * 600)
)
);
}
// reproduz 40s de animação
timeline.play();
A animação é orientada por uma linha do tempo, portanto, esse código cria uma linha do tempo e usa
um loop for para adicionar dois quadros-chave a cada um dos 30 círculos. O primeiro quadro-chave
em 0 segundos usa as propriedades translateXProperty e translateYProperty para definir uma posição
aleatória dos círculos dentro da janela. O segundo quadro-chave em 40 segundos faz o mesmo.
Assim, quando a linha do tempo é reproduzida, ela anima todos os círculos de uma posição aleatória
para outra durante um período de 40 segundos.
A Figura 7–8 mostra os 30 círculos coloridos em movimento, que completam o aplicativo.

Para obter o código-fonte completo, consulte o arquivo ColorfulCircles.java, incluído no
arquivo ColorfulCircles.zip para download.
Figura 7–8 Círculos Animados

Aqui estão várias sugestões sobre o que fazer a seguir: ÿ
Experimente os exemplos do JavaFX, que podem ser baixados da seção JDK Demos and
Samples da página de downloads do Java SE em http://www.oracle.com/technetwork/
java/javase/ Transferências/.
Dê uma olhada especialmente no aplicativo Ensemble, que fornece código de exemplo para
animações e efeitos.
ÿ Leia Criando transições e animação de linha de tempo em JavaFX. Você encontrará mais detalhes
sobre a animação da linha do tempo, bem como informações sobre fade, caminho, paralelo e
transições sequenciais.

ÿ Consulte Criando efeitos visuais em JavaFX para obter formas adicionais de aprimorar a aparência e o
design de seu aplicativo, incluindo reflexos, iluminação e efeitos de sombra.
ÿ Experimente a ferramenta JavaFX Scene Builder para criar aplicativos visualmente interessantes. Essa
ferramenta fornece um ambiente de layout visual para projetar a interface do usuário para aplicativos
JavaFX e gera código FXML. Você pode usar o painel Propriedades ou a opção Modificar da barra
de menus para adicionar efeitos aos elementos da interface do usuário. Consulte as seções Painel de
propriedades e Barra de menus do Guia do usuário JavaFX Scene Builder para obter informações.


A
Abackground.jpg
Este apêndice fornece uma imagem gráfica usada em Usando FXML para criar uma interface de
usuário.
Termos legais e aviso de direitos autorais

/*
* Copyright (c) 2008, 2014, Oracle e/ou suas afiliadas.
* Todos os direitos reservados. O uso está sujeito aos termos de licença.
*
* Este arquivo está disponível e licenciado sob a seguinte licença:

*
* A redistribuição e uso em fontes e formas binárias, com ou sem * modificação, são permitidos
desde que as seguintes condições
* são atendidas:
*
*
- As redistribuições do código-fonte devem manter o aviso de direitos autorais acima, esta
*
lista de condições e a seguinte isenção de responsabilidade.
*
- As redistribuições em formato binário devem reproduzir o aviso de direitos autorais acima,
*
esta lista de condições e a seguinte isenção de responsabilidade na documentação e/ou
*
outros materiais fornecidos com a distribuição.
* - Nem o nome do Oráculo nem os nomes de seus
*
colaboradores podem ser usados para endossar ou promover produtos derivados deste
*
software sem permissão prévia específica por escrito.
*
* ESTE SOFTWARE É FORNECIDO PELOS DETENTORES DOS DIREITOS AUTORAIS E COLABORADORES
* "COMO ESTÁ" E QUAISQUER GARANTIAS EXPRESSAS OU IMPLÍCITAS, INCLUINDO, MAS NÃO
* LIMITADO ÀS GARANTIAS IMPLÍCITAS DE COMERCIABILIDADE E ADEQUAÇÃO PARA
* UM PROPÓSITO ESPECÍFICO SÃO REJEITADOS. EM NENHUM CASO OS DIREITOS AUTORAIS
* O PROPRIETÁRIO OU OS COLABORADORES SERÃO RESPONSÁVEIS POR QUALQUER COISA DIRETA, INDIRETA, INCIDENTAL,
* DANOS ESPECIAIS, EXEMPLARES OU CONSEQUENTES (INCLUINDO, MAS NÃO
* LIMITADO À AQUISIÇÃO DE BENS OU SERVIÇOS SUBSTITUTOS; PERDA DE USO,
* DADOS OU LUCROS; OU INTERRUPÇÃO DE NEGÓCIOS) DE QUALQUER CAUSA E DE QUALQUER
* TEORIA DA RESPONSABILIDADE, SEJA EM CONTRATO, RESPONSABILIDADE ESTRITA OU ILÍCITO
* (INCLUINDO NEGLIGÊNCIA OU OUTROS) DECORRENTES DE QUALQUER FORMA DO USO
* DESTE SOFTWARE, MESMO SE AVISADO DA POSSIBILIDADE DE TAIS DANOS. */
background.jpg A-1
plano de fundo.jpg
plano de fundo.jpg
A-2 JavaFX Introdução ao JavaFX

JFXST

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

JFXST

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

JavaFX Introdução ao JavaFX, versão 8

Sobre este tutorial............................................. ................................................ ...................... vii

Acessibilidade à Documentação............................................ ................................................ .................. vii Documentos

O que há de novo ................................................ ................................................ ................................................ .. ix

Parte I O que é JavaFX?

1 Visão geral do JavaFX

Aplicações JavaFX .............................................. ................................................ ................................ 1-1

2 Compreendendo a arquitetura JavaFX

Mídia e Imagens ....................................... ................................................ ......................................... 2-4 Componente da

Esquema .................................................. ................................................ ................................................ ...... 2-7

Parte II Introdução aos aplicativos de amostra JavaFX

3 Olá, mundo, estilo JavaFX

4 Criando um formulário em JavaFX

Execute o aplicativo ....................................... ................................................ ................................ 4-5 Para onde

5 formulários sofisticados com JavaFX CSS

6 Usando FXML para criar uma interface de usuário

7 Animação e efeitos visuais em JavaFX

Configurar o aplicativo ....................................... ................................................ ............................. 7-2 Configurar

Para onde ir a partir daqui ....................................... ................................................ ............................. 7-8

plano de fundo.jpg............................................. ................................................ ......................................... A-2

Sobre este tutorial

Acesso ao Suporte Oracle

monoespaço O tipo monoespaçado indica comandos dentro de um parágrafo, URLs, código em

JavaFX. Consulte a seção do tema Modena em Principais recursos.

ÿ A nova classe SwingNode melhora o recurso de interoperabilidade Swing. Ver

ÿ O pacote javafx.print agora está disponível e fornece o JavaFX público

ÿ O suporte a rich text foi adicionado. ÿ O

suporte para monitores Hi-DPI foi disponibilizado. ÿ Classes com estilo

CSS tornaram-se APIs públicas.

A Parte I contém os seguintes capítulos:

ÿ Compreendendo a arquitetura JavaFX

ÿ O que posso construir com JavaFX?

ÿ Como executo um aplicativo de amostra? ÿ Como

executo uma amostra em um IDE? ÿ Como faço

para criar um aplicativo JavaFX?

Consulte o capítulo Compreendendo a arquitetura JavaFX para aprender sobre a arquitetura da

Visão geral do JavaFX 1-1

ÿ WebView. Um componente da Web que usa a tecnologia WebKitHTML para torná-lo

1-2 JavaFX Introdução ao JavaFX

ÿ API de impressão. O pacote javafx.print foi adicionado na versão Java SE 8 e

Hi-DPI. O JavaFX 8 agora oferece suporte a monitores Hi-DPI. ÿ Pipeline

de gráficos acelerados por hardware. Os gráficos JavaFX são baseados no

ÿ Mecanismo de mídia de alto desempenho. O pipeline de mídia suporta a reprodução de

ÿ Modelo de implantação de aplicativo independente. Aplicativo independente

O que posso construir com JavaFX?

Visão geral do JavaFX 1-3

Como faço para executar um aplicativo de exemplo?

Tabela 1–1 Amostras de aplicativos JavaFX

Aplicativo de amostra Descrição

Ensemble8 é uma galeria de aplicativos de exemplo que demonstram uma

Ensemble8 também roda com JavaFX para ARM.

Modena é um aplicativo de amostra que demonstra a aparência dos

3DViewer é um aplicativo de exemplo que permite navegar e examinar uma

O 3DViewer também tem a capacidade de exportar o conteúdo da cena como

Como faço para executar um aplicativo de exemplo?

a versão mais recente do JRE.

Para fazer download e executar os aplicativos de amostra:

3. Clique no botão Download de Demonstrações e Amostras para ir para a página de downloads.

5. Baixe o arquivo zip para o sistema operacional correto e extraia os arquivos.

1-4 JavaFX Introdução ao JavaFX

Como faço para criar um aplicativo JavaFX?

O diretório javafx-samples-8.x é criado e contém os arquivos para as amostras disponíveis. Os

6. Clique duas vezes no arquivo executável para obter uma amostra.