JavaFX: Um Guia Tutorial Detalhado para Desenvolvimento

de Interfaces Gráficas
Capítulo 1: Introdução ao JavaFX
JavaFX é uma biblioteca Java e um kit de ferramentas de interface gráfica do usuário
(GUI) projetado para desenvolver e facilitar Rich Internet Applications (RIAs),
aplicações web e aplicações desktop.1 Introduzido para suceder o framework Swing, o
JavaFX oferece funcionalidades e recursos mais aprimorados, com componentes
próprios que são independentes do sistema operacional.1 Antes do JavaFX, o
desenvolvimento de aplicações cliente era uma tarefa complexa, exigindo múltiplas
bibliotecas para adicionar funcionalidades como mídia, controles de UI, animações,
efeitos e formas 2D/3D.1

1.1. Propósito e Principais Características

O JavaFX foi concebido como um substituto moderno para o Swing, com foco em
aplicações ricas para a internet e desktop.2 Suas capacidades vão além das
aplicações desktop tradicionais, permitindo aos desenvolvedores construir aplicações
que podem rodar em uma multiplicidade de plataformas.2

As principais características do JavaFX incluem 1:

●​ Biblioteca Java: Sendo uma biblioteca Java, permite o uso de todas as
características da linguagem, como multithreading, generics e expressões
lambda.1
●​ Independência de Plataforma: Aplicações ricas para internet desenvolvidas
com JavaFX são independentes de plataforma.1
●​ Suporte a Linguagens de Scripting: A biblioteca JavaFX está aberta a todas as
linguagens de scripting que podem ser administradas em uma JVM, incluindo
Java, Groovy, Scala e JRuby.1
●​ FXML: JavaFX utiliza uma linguagem de marcação declarativa semelhante ao
HTML, chamada FXML, baseada em XML, para definir a interface do usuário.1 Isso
facilita a separação entre o design da interface e a lógica da aplicação.3
●​ Controles de UI Embutidos: JavaFX possui todos os principais controles de UI
embutidos, que não dependem do sistema operacional, garantindo uma
aparência consistente em diferentes plataformas.1
●​ Conjunto Rico de APIs: A biblioteca JavaFX oferece uma valiosa coleção de APIs
para o desenvolvimento de aplicações GUI, gráficos 2D e 3D, e muito mais,
incluindo todas as características da plataforma Java.1
●​ Gráficos Acelerados por Hardware: JavaFX utiliza gráficos acelerados por
 hardware, o que pode melhorar significativamente o desempenho, especialmente
para aplicações com muitas animações.2
●​ Integração com Conteúdo Web: Possui a capacidade de renderizar conteúdo
web e integrar bibliotecas web.2
●​ Scene Graph: Todas as aplicações GUI em JavaFX são construídas usando um
Scene Graph, uma estrutura em árvore hierárquica de nós que representa todos
os componentes visuais da UI.1

1.2. Vantagens sobre o Swing

JavaFX apresenta diversas vantagens em relação ao seu predecessor, o Swing 2:
●​ Desempenho Aprimorado: JavaFX utiliza gráficos acelerados por hardware,
resultando em melhor desempenho, especialmente para animações e gráficos
complexos, quando comparado ao motor de renderização puramente Java do
Swing.2
●​ Design de UI Moderno: Permite a criação de interfaces visualmente atraentes
através do uso de FXML e estilização via CSS, oferecendo uma abordagem mais
moderna e flexível que o sistema de Look and Feel customizado do Swing.2
●​ API Amigável: A API do JavaFX é considerada mais moderna e fácil de usar, com
uma sintaxe declarativa (FXML) que separa o design da lógica. Ferramentas como
o Scene Builder auxiliam na criação visual de arquivos FXML, agilizando o
desenvolvimento.3 A API do Swing, embora madura, é mais complexa e possui
uma curva de aprendizado mais íngreme.3
●​ Recursos Multimídia: JavaFX possui um motor de mídia embutido para
reprodução de áudio e vídeo, enquanto o Swing requer bibliotecas de terceiros
para funcionalidades multimídia.3
●​ Suporte a Gráficos 2D e 3D: JavaFX oferece suporte robusto para gráficos 2D e
3D, enquanto o Swing se concentra primariamente em gráficos 2D.3
●​ Modelo de Threading: JavaFX possui um modelo de threading mais bem
gerenciado, permitindo que tarefas em segundo plano rodem sem bloquear a UI,
um problema comum no modelo single-threaded do Swing.2
●​ Desenvolvimento Ativo: JavaFX é ativamente desenvolvido e recebe suporte
oficial da Oracle, incluindo atualizações regulares e correções de bugs, enquanto
o Swing não é mais ativamente desenvolvido pela Oracle.3

A escolha entre JavaFX e Swing depende dos requisitos do projeto. Para novas
aplicações com interfaces gráficas ricas e modernas, JavaFX é geralmente a escolha
preferida devido ao seu desempenho e estética aprimorados.2 Para sistemas legados
ou aplicações que exigem a estabilidade de uma biblioteca madura, o Swing ainda
pode ser uma opção viável.2

1.3. Configuração do Ambiente de Desenvolvimento

Para começar a desenvolver com JavaFX, é necessário configurar o ambiente de
desenvolvimento. Isso geralmente envolve:
1.​ JDK (Java Development Kit): Certifique-se de ter uma versão do JDK
compatível com a versão do JavaFX que você pretende usar. Desde o Java 11, o
JavaFX não faz mais parte do JDK padrão e precisa ser adicionado como uma
dependência separada.1
2.​ IDE (Ambiente de Desenvolvimento Integrado): IDEs populares como IntelliJ
IDEA, Eclipse e NetBeans oferecem suporte para o desenvolvimento JavaFX. A
configuração pode variar ligeiramente entre elas.6
○​ IntelliJ IDEA: Requer a configuração do SDK do JavaFX e, para projetos não
modulares, a adição das bibliotecas JavaFX ao projeto. Para projetos
modulares, a configuração do [Link] é necessária.7
○​ Eclipse: Similarmente, envolve a configuração do JavaFX como uma
biblioteca de usuário e a adição de argumentos VM para projetos não
modulares, ou a configuração do [Link] para projetos modulares.6
○​ NetBeans: Também suporta projetos JavaFX, com configurações para
bibliotecas e módulos.6
3.​ JavaFX SDK ou Módulos:
○​ Download: O SDK do JavaFX pode ser baixado do site oficial do OpenJFX
(gerenciado pela Gluon).6
○​ Configuração como Biblioteca: Nas IDEs, você geralmente define o JavaFX
SDK como uma biblioteca e aponta para a pasta lib do SDK baixado.6
○​ Argumentos VM (para projetos não modulares): É necessário adicionar
argumentos à VM para especificar o caminho dos módulos JavaFX e os
módulos a serem adicionados. Um exemplo comum é: --module-path
/path/to/javafx/lib --add-modules [Link],[Link] Onde
/path/to/javafx/lib deve ser substituído pelo caminho real para a pasta lib do
seu SDK JavaFX.7
○​ [Link] (para projetos modulares): Se estiver usando o sistema
de módulos do Java (Java 9+), você precisará declarar as dependências do
JavaFX no arquivo [Link]. Por exemplo:​
Java​
module MyApp {​
requires [Link];​
requires [Link];​
​
 opens [Link] to [Link]; // Se estiver usando FXML com
controllers​
exports [Link];​
}​
7

4.​ Ferramentas de Build (Maven/Gradle):

○​ Maven: Pode-se criar um projeto JavaFX simples usando arquétipos Maven
do OpenJFX. O [Link] precisará das dependências do JavaFX (e.g.,
javafx-controls, javafx-fxml) e do plugin javafx-maven-plugin para compilar e
executar a aplicação.1
○​ Gradle: Similarmente, projetos Gradle podem ser configurados para JavaFX
adicionando as dependências necessárias e o plugin JavaFX Gradle
([Link]) ao arquivo [Link].7
5.​ Scene Builder (Opcional, mas recomendado para FXML):
○​ Scene Builder é uma ferramenta visual para projetar interfaces de usuário
FXML. Ele pode ser baixado separadamente (também da Gluon) e integrado
com as principais IDEs.3

A documentação oficial do OpenJFX ([Link]) fornece guias detalhados para

configurar o ambiente com diferentes IDEs e ferramentas de build.7

1.4. Estrutura Básica de uma Aplicação JavaFX

Uma aplicação JavaFX tem uma estrutura fundamental que gira em torno dos
conceitos de Stage, Scene e Node.4
●​ Application Class: A classe principal de qualquer aplicação JavaFX deve
estender [Link].5 Esta classe gerencia o ciclo de vida da
aplicação.
●​ Método start(Stage primaryStage): Este é o ponto de entrada principal para
todas as aplicações JavaFX.5 É aqui que a UI primária da aplicação é construída.
A plataforma JavaFX cria o primaryStage (a janela principal) e o passa para este
método.
●​ Stage (Palco): Representa a janela principal da aplicação JavaFX.4 É o contêiner
de nível superior. Uma aplicação pode ter múltiplos Stages (janelas secundárias),
mas sempre haverá um primaryStage.
●​ Scene (Cena): Representa o conteúdo físico dentro de um Stage.4 Cada Stage
contém uma Scene. A Scene contém o grafo de cena (SceneGraph) de todos os
elementos visuais. Para criar uma Scene, você precisa de um nó raiz (geralmente
um painel de layout) e, opcionalmente, dimensões (largura e altura).
●​ Node (Nó) e SceneGraph (Grafo de Cena):
 ○​ Um SceneGraph é uma estrutura de dados em árvore hierárquica que
representa todo o conteúdo de uma Scene.1
○​ Cada elemento visual individual na Scene é um Node.1 Node é a classe base
para todos os elementos visuais, como controles (botões, rótulos), painéis de
layout, formas e mídia.
○​ Tipos de Nós 1:
■​ Root Node (Nó Raiz): O primeiro nó no SceneGraph, sem pai.
■​ Branch Node / Parent Node (Nó de Ramificação / Nó Pai): Um nó que
tem filhos (e.g., painéis de layout como VBox, HBox, GridPane). A classe
Parent é a base para esses nós.
■​ Leaf Node (Nó Folha): Um nó sem filhos (e.g., Button, Label, Rectangle).
●​ Método launch(String... args): Este método estático da classe Application é
chamado (geralmente do método main) para iniciar a aplicação JavaFX.13

Exemplo "Olá, Mundo!" em JavaFX 12:

Java

package helloworld;​
​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link]; // Um tipo de painel de layout​
import [Link];​
​
public class HelloWorld extends Application {​
​
public static void main(String args) {​
launch(args); // Lança a aplicação JavaFX​
}​
​
@Override​
public void start(Stage primaryStage) {​
[Link]("Olá Mundo JavaFX!"); // Define o título da janela (Stage)​
​
Button btn = new Button(); // Cria um nó do tipo Button (Leaf Node)​
[Link]("Diga 'Olá Mundo'");​
[Link](new EventHandler<ActionEvent>() { // Define a ação do botão​
@Override​
public void handle(ActionEvent event) {​
[Link]("Olá Mundo!");​
}​
});​
​
StackPane root = new StackPane(); // Cria um nó raiz (Branch Node / Parent Node)​
[Link]().add(btn); // Adiciona o botão ao nó raiz​
​
// Cria a Scene, definindo o nó raiz e as dimensões​
[Link](new Scene(root, 300, 250));​
[Link](); // Torna o Stage visível​
}​
}​

Neste exemplo 12:

1.​ A classe HelloWorld estende Application.
2.​ O método main chama launch(args).
3.​ O método start recebe o primaryStage.
4.​ Um Button é criado e uma ação é definida para ele.
5.​ Um StackPane (um painel de layout que empilha seus filhos) é usado como o nó
raiz (root).
6.​ O Button é adicionado como filho do StackPane.
7.​ Uma Scene é criada com o root como seu conteúdo e dimensões de 300x250
pixels.
8.​ A Scene é definida para o primaryStage.
9.​ O primaryStage é exibido com show().

1.5. Ciclo de Vida de uma Aplicação JavaFX

O ciclo de vida de uma aplicação JavaFX é gerenciado pela classe Application e seus
métodos.13 Quando uma aplicação JavaFX é lançada, o runtime do JavaFX executa as
seguintes ações na ordem especificada:
1.​ Construção da Instância da Classe Application: Uma instância da classe
Application especificada (a classe que estende [Link]) é
 criada.13
2.​ Chamada do Método init(): O método init() é chamado.13
○​ Este é um método vazio que pode ser sobrescrito pelo desenvolvedor para
realizar inicializações antes que a aplicação realmente comece.
○​ Importante: O método init() não é chamado na JavaFX Application Thread.
Portanto, não se deve criar objetos Scene ou Stage dentro do init(). No
entanto, a criação de outros objetos JavaFX é permitida.5
○​ Parâmetros da aplicação, passados via linha de comando ou JNLP, estão
disponíveis através de getParameters() a partir do método init() ou após sua
chamada.13
3.​ Chamada do Método start(Stage primaryStage): O método start(Stage
primaryStage) é chamado.5
○​ Este é o ponto de entrada principal para toda a lógica gráfica da aplicação
JavaFX.
○​ Ele é chamado após o retorno do método init() e quando o sistema está
pronto para a aplicação começar a ser executada.
○​ Este método é chamado na JavaFX Application Thread. A criação de objetos
Scene e Stage, bem como modificações no grafo de cena de objetos já
"vivos" (anexados a uma cena), devem ser feitas nesta thread.13
○​ O primaryStage é fornecido pelo runtime. Aplicações podem criar outros
Stages, se necessário, mas eles não serão os palcos primários.13
4.​ Espera pelo Término da Aplicação: O lançador (launcher) espera que a
aplicação termine.13 O término ocorre quando uma das seguintes condições é
satisfeita:
○​ A aplicação chama [Link]().13
○​ A última janela foi fechada e o atributo implicitExit em Platform é true (que é o
comportamento padrão).13 O comportamento de saída implícita pode ser
desativado chamando [Link](false).14
○​ A aplicação também pode ser terminada explicitamente usando
[Link](int).14
5.​ Chamada do Método stop(): O método stop() é chamado.5
○​ Este método é invocado quando a aplicação deve parar.
○​ É um local conveniente para preparar a saída da aplicação e destruir
recursos.
○​ É um método vazio que pode ser sobrescrito.
○​ Este método também é chamado na JavaFX Application Thread.

Threading em JavaFX 13:

●​ O JavaFX cria uma thread dedicada, a JavaFX Application Thread, para
 executar o método start(), processar eventos de entrada (como cliques de mouse
e pressionamentos de tecla) e executar cronogramas de animação.
●​ Qualquer operação que modifique o grafo de cena de objetos que já estão
"vivos" (ou seja, já anexados a uma Scene e exibidos) deve ocorrer na JavaFX
Application Thread. Isso inclui a criação de novos Stages e Scenes, e a adição ou
remoção de nós do grafo de cena.
●​ O construtor da classe Application e o método init() são chamados na launcher
thread, não na JavaFX Application Thread.

Entender esse ciclo de vida e as restrições de threading é crucial para desenvolver

aplicações JavaFX estáveis e responsivas.

Capítulo 2: Controles Fundamentais da Interface do Usuário

Os controles de interface do usuário (UI) são os blocos de construção interativos de
qualquer aplicação gráfica. JavaFX fornece um rico conjunto de controles embutidos,
localizados principalmente no pacote [Link].15 Cada controle é
projetado para uma finalidade específica, desde a exibição de informações estáticas
até a captura de entrada do usuário e o disparo de ações.

Neste capítulo, exploraremos alguns dos controles mais fundamentais e como

personalizá-los. A personalização pode ser feita programaticamente via métodos
Java ou de forma mais declarativa e abrangente usando CSS (Cascading Style
Sheets).

2.1. Label (Rótulo)

2.1.1. Propósito e Casos de Uso Comuns
O Label é um controle de texto não editável usado para exibir informações estáticas,
como títulos, descrições ou identificadores para outros controles.16 Casos de uso
comuns incluem:
●​ Exibir texto simples.
●​ Apresentar um ícone ao lado do texto.16
●​ Mostrar texto que pode precisar de quebra de linha (wrapText) para se ajustar a
um espaço limitado.16
●​ Rotular outros campos de entrada, utilizando a propriedade labelFor para
associar o Label a outro Node, melhorando a acessibilidade (por exemplo,
permitindo que mnemônicos no texto do Label foquem o controle associado).18

2.1.2. Criação e Configuração Básica em Java

Um Label pode ser instanciado de algumas maneiras 16:
●​ Label(): Cria um rótulo vazio.
●​ Label(String text): Cria um rótulo com o texto especificado.
●​ Label(String text, Node graphic): Cria um rótulo com texto e um nó gráfico (por
exemplo, um ImageView).

Exemplo de Criação:

Java

import [Link];​
import [Link];​
import [Link];​
​
// Rótulo simples​
Label nameLabel = new Label("Nome:");​
​
// Rótulo com um ícone​
Image userIconImage = new Image(getClass().getResourceAsStream("user_icon.png"));​
ImageView userIconView = new ImageView(userIconImage);​
Label userLabel = new Label("Usuário", userIconView);​
​
// Configurando texto e gráfico após a criação​
Label statusLabel = new Label();​
[Link]("Status:");​
[Link](new ImageView(new
Image(getClass().getResourceAsStream("status_ok.png"))));​

2.1.3. Customização Programática da Aparência via Java

A aparência de um Label pode ser customizada programaticamente usando vários
métodos herdados, principalmente da classe Labeled e Region.
●​ Cor do Texto: O método setTextFill(Paint value) define a cor do texto.16​
Java​
[Link]([Link]);​

●​ Fonte: O método setFont(Font value) permite especificar a família, tamanho,

 peso e estilo da fonte.16​
Java​
[Link]([Link]("Arial", [Link], 14));​

●​ Alinhamento do Texto e Posição do Gráfico:

○​ setTextAlignment(TextAlignment value): Controla o alinhamento do texto
dentro da área do Label (por exemplo, [Link]).16
○​ setContentDisplay(ContentDisplay value): Define a posição do gráfico em
relação ao texto (por exemplo, [Link], [Link],
[Link], [Link]).16
○​ setGraphicTextGap(double value): Define o espaçamento entre o texto e o
gráfico.16
Java​
[Link]([Link]); // Ícone à esquerda do texto​
[Link](10); // 10 pixels de espaço​

●​ Quebra de Linha (Wrapping):

○​ setWrapText(boolean value): Se true, o texto será quebrado em várias linhas
para caber na largura disponível do Label.16
○​ setTextOverrun(OverrunStyle value): Define como o texto deve ser tratado se
não couber mesmo com a quebra de linha (por exemplo,
[Link] para adicionar "...").16
Java​
Label descriptionLabel = new Label("Este é um texto de descrição longo que pode precisar
de quebra de linha.");​
[Link](true);​
[Link](200); // Necessário para que a quebra de linha funcione​

●​ Efeitos Visuais e Transformações: Como Label é um Node, pode-se aplicar

efeitos e transformações.16
○​ setRotate(double value): Rotaciona o Label.
○​ setScaleX(double value), setScaleY(double value): Altera a escala do Label.
○​ setEffect(Effect value): Aplica efeitos como DropShadow, GaussianBlur.
Java​
Label rotatedLabel = new Label("Rotacionado");​
[Link](45); // Rotaciona em 45 graus​
​
DropShadow shadow = new DropShadow();​
[Link]([Link](50, 50, 50, 0.5));​
[Link](2);​
[Link](2);​
 [Link](shadow);​

●​ Background e Bordas: Sendo um Region, Label pode ter seu fundo e bordas
customizados programaticamente.19​
Java​
// Fundo Amarelo Claro​
[Link](new Background(new
BackgroundFill([Link], new CornerRadii(5), [Link])));​
// Borda Tracejada Cinza​
[Link](new Border(new BorderStroke([Link],​
[Link],​
new CornerRadii(5),​
new BorderWidths(1))));​
[Link](new Insets(5)); // Adiciona preenchimento interno​

2.1.4. Customização Programática do Comportamento via Java

Embora os Labels sejam primariamente para exibição, eles podem responder a
eventos do mouse.
●​ Manipulação de Eventos do Mouse: Pode-se adicionar EventHandlers para
eventos como MOUSE_ENTERED, MOUSE_EXITED, MOUSE_CLICKED.16​
Java​
Label interactiveLabel = new Label("Passe o mouse aqui!");​
[Link](event -> {​
[Link](1.1);​
[Link](1.1);​
[Link]([Link]);​
});​
[Link](event -> {​
[Link](1.0);​
[Link](1.0);​
[Link]([Link]);​
});​
[Link](event -> {​
[Link]("Label clicado: " + [Link]());​
});​

2.1.5. Customização Avançada com CSS

CSS oferece uma maneira poderosa e flexível de estilizar Labels, separando a
apresentação da lógica do código.
●​ Seletor Principal: O seletor de classe CSS para Label é .label.22 Para estilizar um
Label específico, pode-se usar um seletor de ID (por exemplo, #myLabel) após
definir o ID no código Java ([Link]("myLabel")).23
●​ Propriedades CSS Comuns:
○​ -fx-text-fill: Cor do texto.22
○​ -fx-font-family, -fx-font-size, -fx-font-weight, -fx-font-style: Propriedades da
fonte.22
○​ -fx-background-color: Cor de fundo do Label.18
○​ -fx-border-color, -fx-border-width, -fx-border-radius, -fx-border-style:
Propriedades da borda.23
○​ -fx-padding: Preenchimento interno do Label.23
○​ -fx-alignment: Alinhamento do conteúdo dentro do Label (por exemplo,
center, center-left).23
○​ -fx-content-display: Posição do gráfico em relação ao texto (por exemplo,
left, right, top, bottom).
○​ -fx-graphic-text-gap: Espaço entre o gráfico e o texto.
○​ -fx-wrap-text: true ou false para quebra de linha.
○​ -fx-text-overrun: Estilo para estouro de texto (por exemplo, ellipsis).
○​ -fx-effect: Para aplicar efeitos como dropshadow (ex: -fx-effect:
dropshadow(gaussian, rgba(0,0,0,0.3), 5, 0, 1, 1);).22
●​ Estilizando Estados com Pseudo-classes:
○​ :hover: Aplica estilos quando o cursor do mouse está sobre o Label.

.label:hover {-fx-background-color: #e0e0e0; /* Fundo cinza claro no hover

*/-fx-text-fill: darkblue;}```18
○​ :focused: Labels, por padrão, não são focáveis (focusTraversable é false).18
Para que :focused tenha efeito, setFocusTraversable(true) precisaria ser
chamado no Label em Java, e o Label precisaria receber foco.
○​ :pressed: Similarmente, Labels não são "pressionáveis" como botões. A
pseudo-classe :pressed provavelmente não terá um efeito visual padrão ou
utilidade comum para Labels.25
●​ Aplicando um Stylesheet Externo:
1.​ Crie um arquivo CSS (por exemplo, [Link]) no seu projeto (geralmente na
pasta src ou resources).
2.​ Defina suas classes de estilo no arquivo CSS:​
CSS​
/* [Link] */​
 .info-label {-fx-font-family: "Segoe UI", Arial, sans-serif;-fx-font-size:
13px;-fx-text-fill: #555555;-fx-background-color: #f4f4f4;-fx-border-color:
#cccccc;-fx-border-width: 1px;-fx-border-radius: 3px;-fx-padding:
8px;}#error-message {​
-fx-text-fill: red;​
-fx-font-weight: bold;​
}​
```​

3.​ No seu código Java, adicione a classe de estilo ao Label e carregue o

stylesheet na Scene 23:​
Java​
Label infoLabel = new Label("Informação importante aqui.");​
[Link]().add("info-label"); // Aplica a classe de estilo​
​
Label errorMessage = new Label("Ocorreu um erro!");​
[Link]("error-message"); // Aplica um ID para estilo específico​
​
//... (criação da scene)​
[Link]().add(getClass().getResource("[Link]").toExternalFor
m());​

O Label é um Control que utiliza internamente um nó Text para exibir seu conteúdo
textual. Ao estilizar um Label com CSS, propriedades como -fx-text-fill e -fx-font
afetam diretamente o texto. Propriedades como -fx-background-color e
-fx-border-color afetam o Label como um contêiner. Essa distinção é importante para
aplicar os estilos desejados corretamente.

2.2. Button (Botão)

2.2.1. Propósito e Casos de Uso Comuns
O Button é um controle fundamental que permite ao usuário disparar uma ação
através de um clique.27 Ele pode exibir texto, um ícone gráfico, ou uma combinação de
ambos.27 Os botões são amplamente utilizados para:
●​ Submeter formulários.
●​ Iniciar ou cancelar operações.
●​ Navegar entre diferentes partes de uma aplicação.
●​ Confirmar ações (OK, Sim, Não).
2.2.2. Criação e Configuração Básica em Java
A classe [Link] oferece construtores para diferentes
necessidades 27:
●​ Button(): Cria um botão sem texto ou gráfico.
●​ Button(String text): Cria um botão com o texto especificado.
●​ Button(String text, Node graphic): Cria um botão com texto e um nó gráfico
(como um ImageView).

Exemplo de Criação:

Java

import [Link];​
import [Link];​
import [Link];​
​
// Botão com texto​
Button loginButton = new Button("Login");​
​
// Botão com texto e ícone​
Image saveIcon = new Image(getClass().getResourceAsStream("save_icon.png"));​
ImageView saveIconView = new ImageView(saveIcon);​
[Link](16); // Ajustar tamanho do ícone​
[Link](16);​
Button saveButton = new Button("Salvar", saveIconView);​
​
// Configurando após a criação​
Button cancelButton = new Button();​
[Link]("Cancelar");​

Propriedades herdadas da classe Labeled permitem configurar o texto e o gráfico 27:

●​ setText(String text)
●​ setGraphic(Node graphic)
●​ setGraphicTextGap(double value): Define o espaçamento entre o texto e o
gráfico.
Existem também tipos especiais de botões 28:
●​ Default Button: Um botão que é acionado quando a tecla ENTER é pressionada
no contexto. Pode ser definido com setDefaultButton(boolean value).
●​ Cancel Button: Um botão que é acionado quando a tecla ESCAPE é pressionada.
Pode ser definido com setCancelButton(boolean value).

2.2.3. Customização Programática da Aparência via Java

A aparência de um Button pode ser extensivamente customizada programaticamente.
●​ Fonte: Utiliza-se setFont(Font value).27​
Java​
[Link]([Link]("Verdana", [Link], 12));​

●​ Cor do Texto: Utiliza-se setTextFill(Paint value).27​

Java​
[Link]([Link]);​

●​ Cor de Fundo: Pode-se usar setBackground(Background value) 20 ou, mais

comumente para botões, definir o estilo via setStyle() com a propriedade
-fx-base ou -fx-background-color.27 A propriedade -fx-base afeta várias cores
derivadas do botão, proporcionando uma mudança de tema mais coesa.​
Java​
// Usando setBackground​
BackgroundFill backgroundFill = new BackgroundFill([Link], new
CornerRadii(5), [Link]);​
Background background = new Background(backgroundFill);​
[Link](background);​
​
// Usando setStyle para -fx-base (afeta a cor base do tema do botão)​
[Link]("-fx-base: lightgreen;");​
​
// Usando setStyle para -fx-background-color (sobrescreve diretamente o fundo)​
[Link]("-fx-background-color: #FF6347; -fx-text-fill: white;");​

●​ Borda: Utiliza-se setBorder(Border value).21​

Java​
BorderStroke borderStroke = new BorderStroke([Link],
[Link], new CornerRadii(5), new BorderWidths(2));​
Border border = new Border(borderStroke);​
[Link](border);​
●​ Efeitos Visuais: O método setEffect(Effect value) permite adicionar efeitos como
sombras (DropShadow), brilhos (Glow), etc..27​
Java​
DropShadow shadow = new DropShadow();​
[Link](5.0);​
[Link](3.0);​
[Link](3.0);​
[Link]([Link](0.4, 0.5, 0.5, 0.5));​
[Link](shadow);​

2.2.4. Customização Programática do Comportamento via Java

O comportamento principal de um Button é sua ação ao ser clicado.
●​ Manipulador de Ação: O método setOnAction(EventHandler<ActionEvent> value)
é usado para definir a lógica a ser executada quando o botão é clicado.27​
Java​
[Link](event -> {​
[Link]("Tentativa de login...");​
// Lógica de autenticação aqui​
});​

●​ Manipuladores de Eventos do Mouse: Para comportamentos mais específicos,

como efeitos visuais ao passar o mouse, pode-se usar addEventHandler().27​
Java​
DropShadow hoverShadow = new DropShadow(10, [Link]); // Sombra
mais pronunciada para hover​
[Link](MouseEvent.MOUSE_ENTERED, e ->
[Link](hoverShadow));​
[Link](MouseEvent.MOUSE_EXITED, e ->
[Link](shadow)); // Retorna à sombra normal​

●​ Simular Clique: Os métodos arm() e disarm() podem ser usados para simular
visualmente um clique, e fire() dispara programaticamente o ActionEvent do
botão.30 Isso é útil para acionar a ação do botão a partir de outros eventos ou
lógica.

2.2.5. Customização Avançada com CSS

CSS é a forma recomendada para estilização complexa e consistente de botões.
●​ Seletor Principal: O seletor de classe CSS para Button é .button.22
●​ Propriedades CSS Comuns 22:
○​ -fx-text-fill: Cor do texto.
○​ -fx-font-family, -fx-font-size, -fx-font-weight, -fx-font-style: Propriedades da
fonte.
○​ -fx-background-color: Cor de fundo. Pode aceitar cores sólidas, gradientes
lineares (e.g., linear-gradient(#61a2b1, #2A5058)), ou gradientes radiais.
○​ -fx-background-radius: Raio dos cantos do fundo, para botões arredondados.
○​ -fx-border-color, -fx-border-width, -fx-border-radius, -fx-border-style:
Propriedades da borda.
○​ -fx-padding: Preenchimento interno do botão.
○​ -fx-effect: Efeitos como dropshadow.
○​ -fx-base: Cor base do tema do botão. Alterar esta propriedade pode afetar
várias cores derivadas do botão de forma coesa, sendo uma forma eficiente
de aplicar um esquema de cores básico.27
●​ Estilizando Estados com Pseudo-classes 22:
○​ :hover: Aplica estilos quando o cursor do mouse está sobre o botão.

.button:hover {-fx-background-color: #4CAF50; /* Um verde mais escuro no

hover */-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.4), 8, 0, 0, 2);}```
○​ :focused: Aplica estilos quando o botão tem foco (geralmente via navegação
por teclado).
.button:focused {-fx-border-color: orange;-fx-border-width: 2px;}```
○​ :pressed (ou :armed): Aplica estilos quando o botão está sendo pressionado.
:armed é frequentemente recomendado para botões, pois cobre mais
cenários de ativação do que apenas o clique do mouse.37
.button:pressed { /* [Link]:armed /-fx-background-color: #367c39; / Um
verde ainda mais escuro ao pressionar */-fx-effect: innershadow(gaussian,
rgba(0,0,0,0.4), 8, 0, 0, 1);}```
○​ :disabled: Aplica estilos quando o botão está desabilitado
([Link](true)).
.button:disabled {-fx-opacity: 0.5; /* Torna o botão semi-transparente
*/-fx-background-color: lightgray;}```
●​ Aplicando um Stylesheet Externo 26:
1.​ Crie um arquivo [Link].
2.​ Defina os estilos:​
CSS​
/* [Link] */​

.action-button {-fx-background-color: #007bff;-fx-text-fill: white;-fx-font-size:

14px;-fx-padding: 8px 15px;-fx-background-radius: 4px;-fx-border-radius:
4px;}.action-button:hover {-fx-background-color: #0056b3;}.action-button:pressed
{-fx-background-color: #004085;}3. No código Java, aplique a classe de estilo e
carregue o stylesheet:javaButton myActionButton = new Button("Executar
Ação");[Link]().add("action-button");// Na inicialização da
Scene​
[Link]().add(getClass().getResource("[Link]").toExternalForm());​
```​

A propriedade -fx-base é particularmente útil para uma customização de cor rápida e

de alto nível, pois influencia muitas das cores derivadas de um controle no tema
padrão do JavaFX (Modena). Para ajustes mais finos, propriedades específicas como
-fx-background-color e -fx-border-color oferecem controle granular.

2.3. TextField e PasswordField (Campo de Texto e Campo de Senha)

2.3.1. Propósito e Casos de Uso Comuns
TextField é um controle de UI que permite ao usuário inserir e exibir uma única linha
de texto.39 É fundamental em formulários para coletar dados como nomes, endereços
de e-mail, termos de busca, etc..39

PasswordField é uma subclasse especializada de TextField que mascara os caracteres

inseridos (geralmente exibindo asteriscos ou pontos), tornando-o ideal para a entrada
de senhas e outras informações sensíveis.15

2.3.2. Criação e Configuração Básica em Java

Ambos os controles são instanciados de forma similar.
●​ Construtores TextField 39:
○​ TextField(): Cria um campo de texto vazio.
○​ TextField(String initialText): Cria um campo de texto com um texto inicial.
●​ Construtor PasswordField:
○​ PasswordField(): Cria um campo de senha vazio.
●​ Texto de Prompt: setPromptText(String text) exibe um texto de dica dentro do
campo quando ele está vazio e sem foco, desaparecendo quando o usuário
começa a digitar.39
●​ Número Preferido de Colunas: setPrefColumnCount(int value) sugere uma
largura preferida para o campo, baseada no número de colunas de texto de
largura média.39
Exemplo de Criação:

Java

import [Link];​
import [Link];​
​
// TextField para nome de usuário​
TextField usernameField = new TextField();​
[Link]("Digite seu nome de usuário");​
[Link](15);​
​
// PasswordField para senha​
PasswordField passwordField = new PasswordField();​
[Link]("Digite sua senha");​

2.3.3. Customização Programática da Aparência via Java

A aparência de TextField e PasswordField pode ser customizada através de métodos
herdados e da propriedade style.
●​ Fonte: setFont(Font value) (herdado de TextInputControl).40​
Java​
[Link]([Link]("Arial", 13));​

●​ Cor do Texto: Não há um método setTextFill direto para TextField. A cor do texto
é geralmente definida via CSS ou setStyle.40​
Java​
[Link]("-fx-text-fill: darkgreen;");​

●​ Cor de Fundo: setBackground(Background value) (herdado de Region).40​

Java​
// Fundo cinza claro com cantos arredondados​
BackgroundFill bgFill = new BackgroundFill([Link], new CornerRadii(3),
[Link]);​
[Link](new Background(bgFill));​
// Ou via setStyle​
// [Link]("-fx-background-color: #f0f0f0;");​
●​ Borda: setBorder(Border value) (herdado de Region).40​
Java​
// Borda sólida cinza​
BorderStroke borderStroke = new BorderStroke([Link],
[Link], new CornerRadii(3), [Link]);​
[Link](new Border(borderStroke));​
// Ou via setStyle​
// [Link]("-fx-border-color: blue; -fx-border-width: 1px; -fx-border-radius: 3;");​

●​ Alinhamento do Texto: setAlignment(Pos value) (herdado de TextField).40​

Java​
[Link](Pos.CENTER_LEFT);​

2.3.4. Customização Programática do Comportamento via Java

O comportamento é customizado principalmente através de manipuladores de
eventos e listeners de propriedades.
●​ Manipulador de Ação (setOnAction): Disparado quando o usuário pressiona a
tecla Enter enquanto o campo tem foco.39​
Java​
[Link](event -> {​
[Link]("Usuário digitado: " + [Link]());​
// Normalmente, move o foco para o próximo campo ou submete o formulário​
[Link]();​
});​

●​ Listeners de Propriedade de Texto (textProperty()): Para reagir a cada

mudança no texto em tempo real.39​
Java​
[Link]().addListener((observable, oldValue, newValue) -> {​
[Link]("Texto do username mudou de '" + oldValue + "' para '" + newValue
+ "'");​
// Pode ser usado para validação em tempo real, contagem de caracteres, etc.​
});​

●​ Recuperando e Definindo Texto 39:

○​ String getText(): Retorna o texto atual no campo.
○​ void setText(String value): Define o texto do campo.
○​ void clear(): Limpa o conteúdo do campo.
●​ Outros Métodos Úteis (herdados de TextInputControl) 39:
 ○​ copy(): Copia o texto selecionado para a área de transferência.
○​ cut(): Recorta o texto selecionado para a área de transferência.
○​ paste(): Cola o conteúdo da área de transferência no campo.
○​ selectRange(int anchor, int caretPosition): Seleciona um intervalo de texto.

2.3.5. Customização Avançada com CSS

CSS oferece controle granular sobre a aparência de TextField e PasswordField.
●​ Seletores Principais:
○​ .text-field para TextField.44
○​ .password-field para PasswordField.
○​ Ambos também podem ser afetados por estilos aplicados a .text-input (uma
classe CSS para a superclasse TextInputControl).
●​ Propriedades CSS Comuns 44:
○​ -fx-text-fill: Cor do texto digitado.
○​ -fx-prompt-text-fill: Cor do texto de prompt (dica).45
○​ -fx-font-family, -fx-font-size, -fx-font-style, -fx-font-weight: Propriedades da
fonte.
○​ -fx-background-color: Cor de fundo do campo.
○​ -fx-background-radius: Arredondamento dos cantos do fundo.
○​ -fx-border-color, -fx-border-width, -fx-border-radius, -fx-border-style:
Propriedades da borda.
○​ -fx-padding: Preenchimento interno do campo.
○​ -fx-alignment: Alinhamento do texto dentro do campo (e.g., center-left).
●​ Estilizando Estados com Pseudo-classes 31:
○​ :hover: Aplica estilos quando o mouse está sobre o campo.

.text-field:hover {-fx-border-color: #90caf9; /* Borda azul clara no hover */}```

○​ :focused: Aplica estilos quando o campo tem foco. É comum destacar o
campo focado.
.text-field:focused {-fx-border-color: #2196f3; /* Borda azul mais forte
/-fx-background-color: #e3f2fd; / Fundo levemente azulado /-fx-effect:
dropshadow(gaussian, rgba(33,150,243,0.4), 5, 0, 0, 1); / Sombra suave azul /}/
Para customizar o brilho de foco padrão (Modena) //.text-field:focused
{-fx-focus-color: darkblue;-fx-faint-focus-color: lightblue;} */```36
○​ :pressed: Menos relevante para TextField, mas pode ser usado para um
feedback visual sutil ao clicar no campo.
.text-field:pressed {-fx-background-color: #e0e0e0;}```
○​ :disabled: Para estilizar o campo quando ele está desabilitado
([Link](true)).
 .text-field:disabled {-fx-opacity: 0.6;-fx-background-color: #eeeeee;}```
●​ Exemplo CSS para TextField e PasswordField:​
CSS​
/* [Link] */​

.text-field,.password-field {
-fx-font-size: 13px;
-fx-border-color: #cccccc;
-fx-border-radius: 4px;
-fx-background-radius: 4px;
-fx-padding: 5px 8px;
}
.text-field:focused,.password-field:focused {
-fx-border-color: #0078D7;
-fx-background-color: white;
-fx-effect: dropshadow(three-pass-box, rgba(0,120,215,0.3), 6, 0, 0, 0);
}
.text-field -fx-prompt-text-fill,
.password-field -fx-prompt-text-fill {
-fx-fill: #aaaaaa; /* Cor do texto de prompt */
}
No código Java:java
[Link]().add("custom-text-field"); // Se quiser uma classe específica
[Link]().add(getClass().getResource("[Link]").toExternalForm());
```
Muitas das técnicas de customização para TextField são diretamente aplicáveis a
PasswordField, pois PasswordField herda de TextField. A principal diferença visual é o
mascaramento dos caracteres, que é gerenciado internamente pela Skin do
PasswordField e geralmente não é customizável via CSS padrão, exceto talvez por
propriedades de fonte que afetam o caractere de eco (geralmente um ponto ou
asterisco). O seletor .password-field pode ser usado para aplicar estilos que são
exclusivos para campos de senha e não devem afetar TextFields comuns.

2.4. CheckBox (Caixa de Seleção)

2.4.1. Propósito e Casos de Uso Comuns
O CheckBox é um controle que permite ao usuário selecionar ou desmarcar uma
opção.46 Diferentemente dos RadioButtons, os CheckBoxes são independentes e
podem ser usados para múltiplas seleções dentro de um conjunto de opções.46 Casos
de uso típicos incluem:
●​ Ativar ou desativar configurações (por exemplo, "Lembrar-me", "Ativar
 notificações").
●​ Selecionar múltiplos itens de uma lista de preferências (por exemplo, "Interesses:
Esportes, Música, Tecnologia").
●​ Indicar a conclusão de uma tarefa.
●​ Representar um estado que pode ser "sim", "não" ou "não aplicável" (usando o
estado indeterminado).46

2.4.2. Criação e Configuração Básica em Java

A classe [Link] é usada para criar caixas de seleção.
●​ Construtores 46:
○​ CheckBox(): Cria uma CheckBox sem texto.
○​ CheckBox(String text): Cria uma CheckBox com o texto especificado como
rótulo.
●​ Definindo Texto: setText(String text) define ou altera o rótulo da CheckBox.46
●​ Estado Selecionado:
○​ setSelected(boolean value): Define se a CheckBox está marcada (true) ou
desmarcada (false).46
○​ isSelected(): Retorna o estado de seleção atual.
●​ Estado Indeterminado: Uma CheckBox pode ter um terceiro estado,
"indeterminado", que é visualmente diferente de selecionado ou não selecionado
(geralmente um traço ou quadrado preenchido na caixa).
○​ setAllowIndeterminate(boolean value): Se true, permite que a CheckBox
alterne entre os três estados (selecionado, não selecionado, indeterminado)
ao ser clicada.46 Se false (padrão), ela alterna apenas entre selecionado e não
selecionado.
○​ setIndeterminate(boolean value): Define explicitamente o estado
indeterminado.46 Se true, a CheckBox aparecerá como indeterminada.
○​ isIndeterminate(): Retorna se a CheckBox está no estado indeterminado.

Exemplo de Criação:

Java

import [Link];​
​
// CheckBox simples​
CheckBox subscribeCheckBox = new CheckBox("Inscrever-se na newsletter");​
[Link](true); // Marcada por padrão​
​
// CheckBox com estado indeterminado​
CheckBox permissionsCheckBox = new CheckBox("Todas as permissões");​
[Link](true); // Permite o terceiro estado​
[Link](true); // Começa como indeterminada​

2.4.3. Customização Programática da Aparência via Java

A aparência de um CheckBox pode ser customizada usando métodos herdados.
●​ Fonte e Cor do Texto: Como CheckBox herda de Labeled, os métodos
setFont(Font value) e setTextFill(Paint value) podem ser usados para o texto do
rótulo.46​
Java​
[Link]([Link]("Arial", 12));​
[Link]([Link]);​

●​ Cor de Fundo e Borda (do controle como um todo): Herdado de Region,

setBackground(Background value) e setBorder(Border value) podem ser
usados.46
●​ Estilo Inline com setStyle(): Permite aplicar CSS diretamente no código Java
para customizações rápidas.46​
Java​
[Link]("-fx-font-size: 14px; -fx-text-fill: #333333;");​
// Para a caixa e a marca, a customização programática direta é limitada.​
// CSS é mais poderoso aqui.​
[Link]("-fx-border-color: lightblue; -fx-font-size: 12;
-fx-border-insets: -2; -fx-border-radius: 3;");​

●​ Cor da Marca (Mark) e da Caixa (Box): Não existem métodos Java dedicados
como setMarkColor() ou setBoxColor(). A customização detalhada da aparência
da caixa e da marca de seleção é predominantemente realizada através de CSS.48
Embora seja teoricamente possível usar lookup() para encontrar os nós internos
(.box, .mark) e aplicar setStyle() a eles, essa abordagem é complexa e menos
robusta do que CSS.48

2.4.4. Customização Programática do Comportamento via Java

O comportamento principal é a mudança de estado ao ser clicada.
●​ Manipulador de Ação (setOnAction): Disparado quando o estado da CheckBox
 muda devido a um clique do usuário.47​
Java​
[Link](event -> {​
if ([Link]()) {​
[Link]("Usuário se inscreveu na newsletter.");​
} else {​
[Link]("Usuário cancelou a inscrição na newsletter.");​
}​
});​

●​ Listeners de Propriedade: É mais comum ouvir as propriedades

selectedProperty() e indeterminateProperty() para reagir a mudanças de
estado.46​
Java​
[Link]().addListener((observable, oldValue,
newValue) -> {​
if (![Link]()) {​
[Link]("Permissões selecionadas: " + newValue);​
}​
});​
​
[Link]().addListener((observable,
oldValue, newValue) -> {​
[Link]("Estado indeterminado das permissões: " + newValue);​
});​

2.4.5. Customização Avançada com CSS

CSS oferece controle detalhado sobre a aparência dos subcomponentes da
CheckBox.
●​ Seletores Principais e Subestrutura 46:
○​ .check-box: O controle CheckBox como um todo.
○​ .[Link]: O componente da caixa visual. É um StackPane.
○​ .[Link]: O componente da marca de seleção (✓) ou o traço (para
estado indeterminado). Também é um StackPane.
○​ .[Link]: O texto do rótulo associado à CheckBox.
●​ Propriedades CSS Comuns:
○​ Texto do Rótulo (.[Link] ou aplicando a .check-box e deixando
herdar):
 ■​ -fx-text-fill: Cor do texto.
■​ -fx-font-size, -fx-font-family, etc.
○​ Caixa (.[Link]):
■​ -fx-background-color: Cor de fundo da caixa.
■​ -fx-border-color, -fx-border-width, -fx-border-radius: Estilo da borda da
caixa.
■​ -fx-padding: Espaçamento interno da caixa, afetando o tamanho da área
para a marca.
○​ Marca (.[Link]):
■​ -fx-background-color: Cor da marca de seleção/traço.
■​ -fx-shape: Define a forma da marca usando um string SVG path (por
exemplo, para criar um '✓' customizado ou um traço).
■​ -fx-padding: Pode ser usado para ajustar o tamanho da marca dentro da
caixa.
●​ Estilizando Estados com Pseudo-classes 46:
○​ :selected: Aplica-se quando a CheckBox está marcada (selected é true e
indeterminate é false).
.check-box:[Link] {-fx-background-color: #4CAF50; /* Cor verde para
a marca selecionada /-fx-shape: "M1,5 L4,8 L9,2"; / Exemplo de forma de
'check' */}.check-box:[Link] {-fx-border-color: #4CAF50;}```
○​ :indeterminate: Aplica-se quando a CheckBox está no estado indeterminado.

.check-box:[Link] {-fx-background-color: #757575; /* Cor cinza

para a marca indeterminada /-fx-shape: "M1,5 H8 V6 H1 Z"; / Forma de traço
horizontal para indeterminado /}.check-box:[Link]
{-fx-background-color: #e0e0e0; / Fundo da caixa levemente diferente */}```
○​ :hover: Aplica estilos quando o mouse está sobre a CheckBox.

.check-box:[Link] {-fx-border-color: #2196F3; /* Borda azul no hover */}```

○​ :focused: Aplica estilos quando a CheckBox tem foco.

.check-box:[Link] {-fx-border-color: orange;-fx-effect:

dropshadow(gaussian, orange, 3, 0, 0, 0);}```
○​ :disabled: Aplica estilos quando a CheckBox está desabilitada.

.check-box:disabled {-fx-opacity: 0.5;}.check-box:[Link] {-fx-text-fill:

gray;}```
●​ Cor da Marca com -fx-mark-color (principalmente para CheckMenuItem,
mas pode influenciar):
○​ -fx-mark-color: Usado para a cor da marca no estado :checked
(principalmente em CheckMenuItem, mas pode haver herança ou
comportamento similar no CheckBox dependendo do tema).50
○​ -fx-focused-mark-color: Usado para a cor da marca no estado :focused
 (também mais proeminente em CheckMenuItem).50
○​ Para CheckBox, é mais comum e direto usar -fx-background-color no seletor
.mark.
●​ Exemplo CSS Completo:​
CSS​
/* [Link] */​

.[Link] {
-fx-text-fill: #333;
-fx-padding: 0 0 0 5px; /* Espaço entre a caixa e o texto */
}
.[Link] {
-fx-background-color: white;
-fx-border-color: #ababab;
-fx-border-width: 2px;
-fx-border-radius: 3px;
-fx-background-radius: 3px;
-fx-pref-width: 18px; /* Tamanho da caixa /
-fx-pref-height: 18px; / Tamanho da caixa */
}
.check-box:[Link] {
-fx-background-color: #0078D7; /* Cor da marca (e.g., azul) /
-fx-shape: "M1.5,6.5 L4.5,9.5 L9.5,2.5"; / Forma de 'V' para o check /
-fx-scale-shape: true; / Permite que a forma escale com o padding /
-fx-padding: 3px; / Ajusta o tamanho da marca dentro da caixa */
}
.check-box:[Link] {
-fx-background-color: #555555; /* Cor do traço para indeterminado /
-fx-shape: "M1,6 H10 V7 H1 Z"; / Traço horizontal /
-fx-scale-shape: true;
-fx-padding: 6px 3px 6px 3px; / Ajusta para um traço mais fino */
}
.check-box:[Link] {
-fx-border-color: #0078D7;
}
.check-box:[Link] {
-fx-border-color: #005a9e;
-fx-effect: dropshadow(gaussian, #0078D7, 4, 0, 0, 0);
}
```
A customização do CheckBox é um bom exemplo de como os subcomponentes de um
controle JavaFX podem ser estilizados individualmente usando CSS, oferecendo um alto grau
de personalização visual. Uma tabela resumindo os seletores e propriedades para os
diferentes estados e partes da CheckBox pode ser muito útil para os usuários.
Parte/Estado Seletor CSS Comum Propriedades CSS Chave

Caixa (Padrão) .[Link] -fx-background-color,

-fx-border-color, -fx-padding

Marca (Selecionado) .check-box:[Link] -fx-background-color,

-fx-shape

Marca (Indeterminado) .check-box:[Link] -fx-background-color,

k -fx-shape

Caixa (Hover) .check-box:[Link] -fx-border-color, -fx-effect

Caixa (Foco) .check-box:[Link] -fx-border-color, -fx-effect

Rótulo .[Link] -fx-text-fill, -fx-font-size

2.5. RadioButton e ToggleGroup (Botão de Rádio e Grupo de Alternância)

2.5.1. Propósito e Casos de Uso Comuns
RadioButtons são usados para permitir que o usuário selecione uma única opção de
um conjunto de escolhas mutuamente exclusivas.51 Para garantir essa exclusividade,
RadioButtons são agrupados usando um ToggleGroup.51 Exemplos de uso incluem:
●​ Seleção de gênero (Masculino, Feminino, Outro).
●​ Escolha de um método de pagamento.
●​ Definição de uma preferência única em configurações.

2.5.2. Criação e Configuração Básica em Java

●​ Construtores RadioButton 51:
○​ RadioButton(): Cria um RadioButton sem texto.
○​ RadioButton(String text): Cria um RadioButton com o texto especificado.
●​ Definindo Texto: setText(String text).51
●​ Estado Selecionado: setSelected(boolean value) para marcar um RadioButton
por padrão; isSelected() para verificar o estado.51
●​ Criando e Usando ToggleGroup 51:
1.​ Instancie ToggleGroup.
 2.​ Para cada RadioButton, chame setToggleGroup(ToggleGroup group).

Exemplo de Criação:

Java

import [Link];​
import [Link];​
import [Link]; // Para organizar os RadioButtons​
​
ToggleGroup deliveryMethodGroup = new ToggleGroup();​
​
RadioButton standardDelivery = new RadioButton("Entrega Padrão (3-5 dias úteis)");​
[Link](deliveryMethodGroup);​
[Link](true); // Opção padrão​
​
RadioButton expressDelivery = new RadioButton("Entrega Expressa (1-2 dias úteis)");​
[Link](deliveryMethodGroup);​
​
RadioButton pickupStore = new RadioButton("Retirar na Loja");​
[Link](deliveryMethodGroup);​
​
VBox deliveryOptionsBox = new VBox(10, standardDelivery, expressDelivery,
pickupStore);​

2.5.3. Customização Programática da Aparência via Java

A customização programática da aparência de RadioButtons é similar à de outros
controles Labeled.
●​ Fonte e Cor do Texto: setFont(Font value) e setTextFill(Paint value).52​
Java​
[Link]([Link]("Arial", 12));​
[Link]([Link]);​

●​ Cor de Fundo e Borda (do controle como um todo):

setBackground(Background value) e setBorder(Border value).52
●​ Cor do Ponto (Dot Color): Não há um método Java direto para definir a cor do
 ponto interno. Essa customização é feita principalmente via CSS.53
●​ Estilo Inline com setStyle() 54:​
Java​
[Link]("-fx-font-style: italic; -fx-text-fill: #555;");​
// Estilizar o ponto ou círculo via setStyle é complexo e melhor feito com CSS externo.​

2.5.4. Customização Programática do Comportamento via Java

O comportamento principal é a mudança de seleção dentro do ToggleGroup.
●​ Manipulador de Ação (setOnAction): Pode ser adicionado a cada RadioButton
individualmente, mas é mais comum observar o ToggleGroup.51
●​ Listener de Propriedade do ToggleGroup: A maneira mais eficaz de detectar
mudanças é adicionar um listener à propriedade selectedToggleProperty() do
ToggleGroup.51​
Java​
[Link]().addListener((observable,
oldToggle, newToggle) -> {​
if ([Link]()!= null) {​
RadioButton selectedRadio = (RadioButton)
[Link]();​
[Link]("Método de entrega selecionado: " + [Link]());​
// Atualizar custos de envio, etc.​
}​
});​

2.5.5. Customização Avançada com CSS

CSS permite um controle fino sobre a aparência do círculo externo e do ponto interno
do RadioButton.
●​ Seletores Principais e Subestrutura 52:
○​ .radio-button: O controle RadioButton completo.
○​ .[Link]: O componente do círculo externo (uma Region).
○​ .[Link]: O componente do ponto interno (uma Region), visível
quando selecionado.
○​ .[Link]: O texto do rótulo.
●​ Propriedades CSS Comuns:
○​ Texto do Rótulo (.[Link]): -fx-text-fill, -fx-font-size, etc.
○​ Círculo Externo (.[Link]): -fx-background-color,
 -fx-border-color, -fx-border-width, -fx-border-radius (para torná-lo circular),
-fx-padding (espaço entre a borda do círculo e o ponto).
○​ Ponto Interno (.[Link]): -fx-background-color (cor do ponto),
-fx-shape (para definir a forma, geralmente um círculo), -fx-padding ou
-fx-background-insets para ajustar tamanho e centralização.
●​ Estilizando Estados com Pseudo-classes 52:
○​ :selected: Crucial para estilizar o estado selecionado, especialmente para
mostrar e colorir o .dot.
.radio-button:[Link] {-fx-background-color: #0078D7; /* Cor do ponto
quando selecionado /-fx-background-insets: 0; / Essencial para centralização
e forma correta /}.radio-button:[Link] {-fx-border-color: #0078D7; /
Borda do círculo também muda de cor */}```A propriedade
-fx-background-insets: 0; é particularmente importante para o .dot para
garantir que ele seja renderizado corretamente como um círculo preenchido e
centralizado.53
○​ :hover: Para efeitos ao passar o mouse sobre o RadioButton.

.radio-button:[Link] {-fx-border-color: #005a9e; /* Tom mais escuro da

cor de seleção */}```
○​ :focused: Para quando o RadioButton tem foco.

.radio-button:[Link] {-fx-border-color: orange;-fx-effect:

dropshadow(gaussian, orange, 2, 0, 0, 0);}```
○​ :disabled: Para estilizar o RadioButton quando desabilitado.

.radio-button:disabled {-fx-opacity: 0.4;}.radio-button:[Link] {-fx-text-fill:

dimgray;}```
●​ Exemplo CSS Completo:​
CSS​
/* [Link] */​

.[Link] {
-fx-text-fill: #222;
-fx-padding: 0 0 0 4px; /* Espaçamento entre o círculo e o texto */
}
.[Link] {
-fx-border-width: 2px;
-fx-border-color: #666;
-fx-background-color: white;
-fx-border-radius: 100px; /* Para um círculo perfeito /
-fx-padding: 3px; / Espaço interno para o ponto */
-fx-pref-width: 18px;
-fx-pref-height: 18px;
}
.radio-button:[Link] {
-fx-background-color: #007bff; /* Cor do ponto /
-fx-background-insets: 0; / Importante para centralização /
-fx-shape: "M 0 -3.5 A 3.5 3.5 0 1 1 0 3.5 A 3.5 3.5 0 1 1 0 -3.5 Z"; / Círculo SVG /
-fx-padding: 3.5px; / Metade do tamanho desejado do ponto */
}
.radio-button:[Link] {
-fx-border-color: #007bff;
}
.radio-button:[Link] {
-fx-border-color: #0056b3;
-fx-effect: dropshadow(gaussian, #007bff, 5, 0, 0, 0.5);
}
.radio-button:[Link] {
-fx-font-weight: bold;
-fx-text-fill: #007bff;
}
```
A customização do ponto interno (.dot) frequentemente envolve a propriedade -fx-shape com
um caminho SVG para garantir uma forma circular perfeita, e -fx-background-insets: 0; é
crucial para que o -fx-background-color preencha essa forma corretamente, evitando que o
ponto pareça menor ou descentralizado.
Capítulo 3: Controles de Seleção e Listagem
Este capítulo aborda controles que permitem ao usuário selecionar um ou mais itens
de um conjunto de dados, ou visualizar coleções de dados de forma estruturada.

3.1. ComboBox<T> (Caixa de Combinação)

3.1.1. Propósito e Casos de Uso Comuns
O ComboBox é um controle de UI que apresenta uma lista suspensa (dropdown) de
itens, da qual o usuário pode selecionar uma única opção.55 Se configurado como
editável, o ComboBox também permite que o usuário digite um valor personalizado
diretamente no campo de texto.55 É ideal para situações onde há um número
moderado de opções e o espaço na tela é limitado, tornando uma ListView completa
impraticável. Casos de uso comuns incluem:
●​ Seleção de um país, estado ou cidade.
●​ Escolha de uma categoria ou tipo.
●​ Seleção de uma fonte ou tamanho de fonte em um editor.
3.1.2. Criação e Configuração Básica em Java
A classe [Link]<T> é usada para criar caixas de combinação.
●​ Construtores 55:
○​ ComboBox(): Cria um ComboBox vazio.
○​ ComboBox(ObservableList<T> items): Cria um ComboBox e o popula com os
itens da ObservableList fornecida.
●​ Populando Itens: Os itens são geralmente fornecidos como uma
ObservableList<T>.
○​ setItems(ObservableList<T> value): Define a lista de itens.55
○​ getItems(): Retorna a ObservableList para adicionar ou remover itens (e.g.,
[Link]().addAll("Item A", "Item B");).
●​ Valor Selecionado:
○​ valueProperty(): Retorna a propriedade do valor selecionado, permitindo
adicionar listeners ou fazer bindings.55
○​ getValue(): Retorna o item atualmente selecionado.
○​ setValue(T value): Define o item selecionado programaticamente.
●​ Texto de Prompt: setPromptText(String text) exibe um texto de dica quando
nenhum item está selecionado.
●​ Editável: setEditable(boolean value) torna o ComboBox editável, permitindo que
o usuário digite texto.55
●​ Conversor (StringConverter): Quando o ComboBox é editável e o tipo de dados
T não é String, um StringConverter<T> é necessário para converter o texto
digitado pelo usuário para um objeto do tipo T e vice-versa.55
○​ setConverter(StringConverter<T> value)

Exemplo de Criação:

Java

import [Link];​
import [Link];​
import [Link];​
import [Link];​
​
// ComboBox com Strings​
ObservableList<String> categories = [Link](​
 "Eletrônicos", "Livros", "Vestuário", "Casa e Cozinha"​
);​
ComboBox<String> categoryComboBox = new ComboBox<>(categories);​
[Link]("Selecione uma categoria");​
[Link]("Livros"); // Define um valor inicial selecionado​
​
// ComboBox editável com objetos customizados​
class Product {​
private int id;​
private String name;​
// Construtor, getters, setters, toString​
public Product(int id, String name) { [Link] = id; [Link] = name; }​
public String getName() { return name; }​
@Override public String toString() { return name; } // Importante para exibição padrão​
}​
​
ObservableList<Product> products = [Link](​
new Product(1, "Laptop"), new Product(2, "Smartphone"), new Product(3, "Tablet")​
);​
ComboBox<Product> productComboBox = new ComboBox<>(products);​
[Link](true);​
​
// StringConverter para o ComboBox de Product (se editável e T não for String)​
[Link](new StringConverter<Product>() {​
@Override​
public String toString(Product product) {​
return product == null? null : [Link]();​
}​
​
@Override​
public Product fromString(String string) {​
// Lógica para encontrar um Product pelo nome ou criar um novo​
// Para este exemplo, retornaremos null se não encontrado, ou um novo se digitado.​
return [Link]()​
.filter(p -> [Link]().equalsIgnoreCase(string))​
.findFirst()​
.orElse(new Product(0, string)); // Ou trate de forma diferente​
}​
});​
3.1.3. Customização Programática da Aparência via Java
A aparência do ComboBox e de seus itens pode ser customizada usando CellFactory
e ButtonCell.
●​ Estilizando Células da Lista Suspensa (setCellFactory) 55: O método
setCellFactory(Callback<ListView<T>, ListCell<T>> value) permite definir como
cada item na lista suspensa é renderizado. Você fornece um Callback que retorna
uma instância de ListCell<T>. Dentro da implementação da ListCell (geralmente
sobrescrevendo o método updateItem), você pode definir o texto, gráfico, cor da
fonte, cor de fundo, etc.​
Java​
[Link](listView -> new ListCell<String>() {​
@Override​
protected void updateItem(String item, boolean empty) {​
[Link](item, empty);​
if (empty |​

| item == null) {
setText(null);
setGraphic(null);
// Limpar estilos se necessário
setTextFill([Link]);
setBackground([Link]);
} else {
setText(item);
if ([Link]("Eletrônicos")) {
setTextFill([Link]);
setFont([Link]("System", [Link], 12));
} else {
setTextFill([Link]);
setFont([Link]());
}
}
}
});
```
●​ Estilizando a Área do Botão (setButtonCell) 55: O método
setButtonCell(ListCell<T> value) customiza a aparência do item selecionado
exibido na parte principal (botão) do ComboBox.​
 Java​
[Link](new ListCell<String>() {​
@Override​
protected void updateItem(String item, boolean empty) {​
[Link](item, empty);​
if (empty |​

| item == null) {
setText([Link]()); // Mostrar prompt text
setTextFill([Link]);
} else {
setText(item);
setTextFill([Link]); // Cor diferente para o item selecionado no botão
}
}
});
```
●​ Fonte, Cor de Fundo, Borda (Geral): Como ComboBox herda de Control e
Region, propriedades gerais de estilo podem ser aplicadas via setStyle() ou
métodos como setFont(), setBackground(), setBorder().

3.1.4. Customização Programática do Comportamento via Java

●​ Manipulador de Ação (setOnAction): É disparado quando um item é
selecionado na lista suspensa ou, se o ComboBox for editável, quando a tecla
Enter é pressionada no campo de texto.60​
Java​
[Link](event -> {​
String selectedCategory = [Link]();​
[Link]("Categoria selecionada: " + selectedCategory);​
// Lógica baseada na seleção​
});​

●​ Listener de Valor (valueProperty()): Para reagir a mudanças no valor

selecionado de forma mais granular.55​
Java​
[Link]().addListener((observable, oldValue, newValue)
-> {​
if (newValue!= null) {​
[Link]("Produto alterado de " + (oldValue!= null? [Link]() :
 "null") +​
" para " + [Link]());​
}​
});​

3.1.5. Customização Avançada com CSS

CSS oferece um controle abrangente sobre a aparência do ComboBox e seus
componentes internos.
●​ Seletores Principais e Subestrutura 55:
○​ .combo-box: O controle ComboBox principal.
○​ .combo-box-base: Uma classe base CSS para ComboBox, DatePicker, etc.
Estilos aplicados aqui podem afetar outros controles semelhantes.61
○​ .[Link]-input: O campo de texto interno (quando o ComboBox é
editável).
○​ .[Link]-button: O botão que contém a seta para abrir a lista
suspensa.
○​ .[Link]: O nó gráfico da seta.
○​ .[Link]-view: A ListView usada para exibir os itens na lista
suspensa.
○​ .[Link]-cell: As células individuais dentro da ListView da lista
suspensa.
●​ Propriedades CSS Comuns 59:
○​ Para o ComboBox Geral (.combo-box): -fx-background-color,
-fx-border-color, -fx-border-radius, -fx-font-size (para o texto no botão).
○​ Para o Botão da Seta (.[Link]-button): -fx-background-color,
-fx-padding.
○​ Para a Seta (.[Link]): -fx-background-color (para a cor da seta),
-fx-shape (para uma forma customizada da seta).
○​ Para as Células da Lista Suspensa (.[Link]-cell):
-fx-text-fill, -fx-background-color, -fx-padding, -fx-font-size.
●​ Estilizando Estados com Pseudo-classes 63:
○​ .combo-box:[Link]-input:focused: Estilo para o campo de texto focado
quando o ComboBox é editável.
○​ .[Link]-button:hover: Estilo para o botão da seta ao passar o
mouse.
○​ .[Link]-cell:hover: Estilo para uma célula na lista suspensa ao
passar o mouse.
 ○​ .[Link]-cell:filled:selected: Estilo para uma célula selecionada
na lista suspensa.
●​ Exemplo CSS 59:​
CSS​
/* [Link] */​

.combo-box {
-fx-font-size: 13px;
-fx-border-color: #cccccc;
-fx-border-radius: 4px;
}

/* Estilo do botão que exibe o item selecionado */​

.[Link]-cell {
-fx-text-fill: #333333;
-fx-padding: 5px 8px;
}
.[Link]-button {
-fx-background-color: #f0f0f0;
-fx-padding: 5px;
}
.[Link] {
-fx-background-color: #555555; /* Cor da seta */
}
.combo-box:[Link]-button {
-fx-background-color: #e0e0e0;
}

/* Estilo da lista suspensa */​

.[Link]-view {
-fx-background-color: white;
-fx-border-color: #cccccc;
}
.[Link]-cell {
-fx-padding: 8px 12px;
-fx-text-fill: #333333;
-fx-background-color: transparent; /* Fundo transparente por padrão */
}
.[Link]-cell:hover {
-fx-background-color: #e6f7ff; /* Azul claro no hover */
-fx-text-fill: #005a9e;
}
.[Link]-cell:filled:selected {
-fx-background-color: #0078D7; /* Azul para item selecionado */
-fx-text-fill: white;
}
```
A customização do ComboBox frequentemente envolve estilizar duas partes distintas: a área
do botão visível e a lista suspensa. O uso de setButtonCell e setCellFactory em Java, ou
seletores CSS como .[Link]-cell (para o botão) e .[Link]-cell (para os
itens da lista), permite esse controle diferenciado. Isso é importante porque o item
selecionado no botão pode precisar de um destaque ou formatação diferente dos itens na
lista.
3.2. ListView<T>
3.2.1. Propósito e Casos de Uso Comuns
O ListView é um controle que exibe uma lista rolável de itens, permitindo que o
usuário visualize e, opcionalmente, selecione um ou múltiplos itens.64 É ideal para:
●​ Exibir coleções de dados, como uma lista de emails, arquivos, contatos ou
qualquer conjunto de objetos.
●​ Permitir que o usuário faça seleções para processamento posterior.
●​ Apresentar dados com representações visuais customizadas para cada item.

3.2.2. Criação e Configuração Básica em Java

A classe [Link]<T> é usada para criar listas.
●​ Construtores 65:
○​ ListView(): Cria uma ListView vazia.
○​ ListView(ObservableList<T> items): Cria uma ListView populada com os itens
da ObservableList fornecida.
●​ Populando Itens: Os itens são gerenciados por uma ObservableList<T>.64
○​ setItems(ObservableList<T> value): Define a lista de itens.
○​ getItems(): Retorna a ObservableList para manipulação (adição, remoção de
itens).
●​ Modelo de Seleção (SelectionModel) 64:
 ○​ getSelectionModel(): Retorna o modelo de seleção.
○​ getSelectionModel().setSelectionMode(SelectionMode mode): Define o modo
de seleção.
■​ [Link] (padrão): Apenas um item pode ser selecionado.
■​ [Link]: Múltiplos itens podem ser selecionados
(usando Ctrl/Shift + clique).
○​ Para obter o item/itens selecionados:
■​ getSelectionModel().getSelectedItem(): Retorna o item selecionado (para
SINGLE).
■​ getSelectionModel().getSelectedItems(): Retorna uma ObservableList dos
itens selecionados (para MULTIPLE).
■​ getSelectionModel().getSelectedIndex(),
getSelectionModel().getSelectedIndices().
●​ Orientação (Orientation) 64:
○​ setOrientation(Orientation value): Define se a lista é [Link]
(padrão) ou [Link].
●​ Placeholder (Node) 65:
○​ setPlaceholder(Node value): Define um nó (por exemplo, um Label) a ser
exibido quando a ListView está vazia.

Exemplo de Criação:

Java

import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link]; // Para o exemplo​
​
ObservableList<String> taskList = [Link](​
"Comprar leite", "Pagar contas", "Estudar JavaFX", "Fazer exercícios"​
);​
ListView<String> tasksListView = new ListView<>(taskList);​
[Link]().setSelectionMode([Link]);​
[Link](new Label("Nenhuma tarefa pendente!"));​
​
// Adicionar um novo item​
[Link]().add("Ler documentação");​

3.2.3. Customização Programática da Aparência via Java

A customização mais significativa da aparência dos itens em uma ListView é feita
através de uma CellFactory.
●​ Estilizando Células (setCellFactory) 64:​
O método setCellFactory(Callback<ListView<T>, ListCell<T>> value) permite que
você forneça sua própria implementação de ListCell<T> para renderizar cada item
na lista. No método updateItem(T item, boolean empty) da sua ListCell
customizada, você pode:
○​ Definir o texto com setText(String text).
○​ Definir um gráfico com setGraphic(Node graphic).
○​ Alterar a cor do texto com setTextFill(Paint value).
○​ Alterar a fonte com setFont(Font value).
○​ Alterar o fundo com setBackground(Background value).
○​ Alterar a borda com setBorder(Border value).
○​ Aplicar estilos inline com setStyle(String css).

Exemplo de CellFactory Customizada:Java​

import [Link];​
import [Link];​
import [Link];​
import [Link];​
​
[Link](listView -> new ListCell<String>() {​
private Rectangle priorityIndicator = new Rectangle(10, 10);​
​
@Override​
protected void updateItem(String item, boolean empty) {​
[Link](item, empty); // Essencial chamar o super​
​
if (empty |​

| item == null) {
setText(null);
setGraphic(null);
// Limpar estilos para reutilização da célula
setTextFill([Link]);
setFont([Link]());
setBackground([Link]);
} else {
setText(item);
// Customização baseada no conteúdo do item
if ([Link]().contains("urgente")) {
[Link]([Link]);
setGraphic(priorityIndicator);
setTextFill([Link]);
setFont([Link](null, [Link], -1)); // Fonte padrão em negrito
} else if ([Link]().contains("importante")) {
[Link]([Link]);
setGraphic(priorityIndicator);
setTextFill([Link]);
} else {
setGraphic(null); // Sem indicador para itens normais
setTextFill([Link]);
setFont([Link]());
}

// Customização baseada no estado da célula (ex: selecionada)​

if (isSelected()) {​
setBackground(new Background(new BackgroundFill([Link],
[Link], [Link])));​
setTextFill([Link]);​
} else {​
setBackground([Link]);​
// A cor do texto já foi definida acima com base no conteúdo​
}​
}​
}​
});​
```​
A chamada `[Link](item, empty)` é crucial, assim como tratar a condição
`empty |​

| item == null` para limpar a célula, pois as células são reutilizadas durante a rolagem
(virtualização).66
3.2.4. Customização Programática do Comportamento via Java
●​ Listeners de Seleção 64:
○​ Para um único item selecionado:​
Java​
[Link]().selectedItemProperty().addListener(​
(observable, oldValue, newValue) -> {​
if (newValue!= null) {​
[Link]("Tarefa selecionada: " + newValue);​
}​
}​
);​

○​ Para múltiplos itens selecionados (usando ListChangeListener):​

Java​
[Link]().getSelectedItems().addListener(​
([Link]<? extends String> change) -> {​
[Link]("Seleção alterada: ");​
while ([Link]()) {​
if ([Link]()) {​
[Link]("Adicionados: " + [Link]());​
}​
if ([Link]()) {​
[Link]("Removidos: " + [Link]());​
}​
}​
}​
);​

●​ Edição de Células 64:

○​ Torne a ListView editável: [Link](true);
○​ Use CellFactorys pré-construídas como [Link]() ou
implemente a lógica de edição na sua ListCell customizada (geralmente
mostrando um TextField no método startEdit() e chamando commitEdit() ou
cancelEdit()).
○​ Manipule o evento de commit:
[Link](EventHandler<[Link]<String>>
eventHandler).
Java​
import [Link];​
​
[Link](true);​
[Link]([Link]()); // Permite edição inline​
​
[Link](event -> {​
String oldValue = [Link]().getItems().get([Link]());​
String newValue = [Link]();​
[Link]().set([Link](), newValue);​
[Link]("Tarefa editada de '" + oldValue + "' para '" + newValue + "'");​
});​

3.2.5. Customização Avançada com CSS

CSS é usado para estilizar a ListView e suas células.
●​ Seletores Principais 66:
○​ .list-view: O controle ListView como um todo.
○​ .list-cell: As células individuais da lista.
○​ .[Link]-bar: As barras de rolagem, se presentes.
○​ .[Link]-flow: O contêiner interno que gerencia a virtualização das
células.
●​ Propriedades CSS Comuns para Células (.list-cell) 66:
○​ -fx-background-color: Cor de fundo da célula.
○​ -fx-text-fill: Cor do texto na célula.
○​ -fx-padding: Preenchimento interno da célula.
○​ -fx-font-size, -fx-font-family, -fx-font-weight, -fx-font-style: Propriedades da
fonte.
○​ -fx-border-color, -fx-border-width: Para bordas das células.
●​ Estilizando Estados de Células com Pseudo-classes 67:
○​ :odd e :even: Para criar um efeito de listras (linhas com cores alternadas).

.list-cell:odd {-fx-background-color: #f4f4f4; /* Cinza claro para linhas

ímpares /}.list-cell:even {-fx-background-color: white; / Branco para linhas
pares */}```
○​ :selected: Para estilizar células selecionadas. A pseudo-classe :filled é
frequentemente usada em conjunto para garantir que o estilo se aplique
apenas a células que contêm dados.
.list-cell:filled:selected {-fx-background-color: #0078D7; /* Azul para seleção
/-fx-text-fill: white; / Texto branco na seleção */}```
○​ :hover: Para aplicar estilos quando o cursor do mouse está sobre uma célula.

.list-cell:filled:hover {-fx-background-color: #e0e0e0; /* Cinza claro suave no

hover */-fx-text-fill: black;}```
 ○​ :focused: Para a célula que tem foco. Frequentemente combinado com
:selected para diferenciar uma seleção que também tem foco. Para estilizar
uma célula selecionada quando a ListView inteira está focada, usa-se um
seletor mais específico:
.list-view:[Link]-cell:filled:selected {-fx-background-color: #005a9e; /* Um
azul mais escuro para seleção focada */-fx-text-fill: white;}```68
●​ Exemplo CSS Completo:​
CSS​
/* [Link] */​

.list-view {
-fx-border-color: #cccccc;
-fx-border-width: 1px;
}
.[Link]-cell {
-fx-padding: 7px 10px;
-fx-font-size: 13px;
-fx-text-fill: #333333;
}
.[Link]-cell:odd {
-fx-background-color: #f9f9f9;
}
.[Link]-cell:even {
-fx-background-color: #ffffff;
}
.[Link]-cell:filled:hover {
-fx-background-color: #dcedff; /* Azul muito claro no hover */
}
.[Link]-cell:filled:selected {
-fx-background-color: #0078d7;
-fx-text-fill: white;
}
.list-view:[Link]-cell:filled:selected {
-fx-background-color: #0056b3; /* Tom mais escuro quando a lista tem foco */
-fx-text-fill: white;
}

/* Estilo para o placeholder quando a lista está vazia */​

.[Link] {
-fx-text-fill: grey;
-fx-font-style: italic;
}
```
A customização via CellFactory é essencial para lógica baseada em dados e para otimizar o
desempenho com listas grandes, devido ao mecanismo de virtualização do JavaFX que
reutiliza células. O método updateItem deve ser implementado cuidadosamente para lidar
com a reutilização e os diferentes estados da célula.
3.3. TableView<S>
3.3.1. Propósito e Casos de Uso Comuns
O TableView<S> é um controle poderoso para exibir dados em formato tabular,
organizados em linhas e colunas.69 Cada linha normalmente representa um objeto do
tipo S. É amplamente utilizado para:
●​ Apresentar grandes conjuntos de dados de forma estruturada.
●​ Permitir a ordenação de dados clicando nos cabeçalhos das colunas.
●​ Permitir o redimensionamento de colunas pelo usuário.
●​ Facilitar a edição de dados diretamente nas células da tabela.
●​ Exibir dados de bancos de dados, arquivos CSV, ou coleções de objetos.

3.3.2. Criação e Configuração Básica em Java

A criação de um TableView envolve a definição da tabela em si e de suas colunas
(TableColumn).
●​ TableView<S>: Onde S é o tipo do objeto que representa cada linha de dados.
○​ TableView(): Construtor padrão.
○​ setItems(ObservableList<S> items): Define a lista de objetos que popularão as
linhas da tabela.70
●​ TableColumn<S, T>: Representa uma coluna na tabela.
○​ S: O tipo do item da linha da tabela.
○​ T: O tipo do dado exibido nas células desta coluna.
○​ TableColumn(String columnTitle): Construtor que define o texto do cabeçalho
da coluna.
○​ setCellValueFactory(Callback<CellDataFeatures<S,T>, ObservableValue<T>>
value): Este é um passo crucial. Ele define como extrair o valor para as células
desta coluna a partir do objeto S da linha correspondente. Comumente,
usa-se PropertyValueFactory<S,T>("propertyName"), onde "propertyName" é
o nome de uma propriedade JavaFX (com métodos getter e property) no
 objeto S.69
○​ getColumns().add(TableColumn<S,?> column) ou getColumns().addAll(...):
Adiciona colunas à tabela.69

Exemplo de Criação (Modelo de Dados Person):

Java

import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
​
// Modelo de dados para a tabela​
public class Person {​
private final StringProperty firstName;​
private final StringProperty lastName;​
private final StringProperty email;​
​
{​
public Person(String firstName, String lastName, String email)
[Link] = new SimpleStringProperty(firstName);​
[Link] = new SimpleStringProperty(lastName);​
[Link] = new SimpleStringProperty(email);​
}​
​
public String getFirstName() { return
[Link](); }​
public void setFirstName(String fName) { [Link](fName); }​
public StringProperty firstNameProperty() { return firstName; }​
​
public String getLastName() { return [Link](); }​
 public void setLastName(String lName) { [Link](lName); }​
public StringProperty lastNameProperty() { return lastName; }​
​
public String getEmail() { [Link](); }​
public void setEmail(String mail) { [Link](mail); }​
public StringProperty emailProperty() { return email; }​
}​
​
public class TableViewExample extends Application {​
@Override​
{​
public void start(Stage stage)
TableView<Person> tableView = new TableView<>();​
​
ObservableList<Person> data = [Link](​
new Person("Maria", "Silva", "[Link]@[Link]"),​
new Person("João", "Santos", "[Link]@[Link]"),​
new Person("Ana", "Pereira", "[Link]@[Link]")​
);​
[Link](data);​
​
TableColumn<Person, String> firstNameCol = new TableColumn<>("Nome");​
[Link](new PropertyValueFactory<>("firstName")); //
Mapeia para [Link]()​
​
TableColumn<Person, String> lastNameCol = new TableColumn<>("Sobrenome");​
[Link](new PropertyValueFactory<>("lastName"));​
​
TableColumn<Person, String> emailCol = new TableColumn<>("Email");​
[Link](new PropertyValueFactory<>("email"));​
[Link](200); // Definir largura preferencial para a coluna de email​
​
[Link]().addAll(firstNameCol, lastNameCol, emailCol);​
​
VBox vbox = new VBox(tableView);​
Scene scene = new Scene(vbox, 450, 300);​
[Link]("Exemplo de TableView");​
[Link](scene);​
[Link]();​
}​
​
public static void main(String args) {​
launch(args);​
}​
}​

69

3.3.3. Customização Programática da Aparência via Java

A aparência das células, linhas e cabeçalhos pode ser customizada
programaticamente.
●​ Estilizando Células ([Link]): Similar à ListView, permite
fornecer uma implementação customizada de TableCell<S,T> para controlar a
renderização de cada célula na coluna.72​
Java​
import [Link];​
import [Link];​
import [Link];​
​
[Link](column -> new TableCell<Person, String>() {​
@Override​
protected void updateItem(String item, boolean empty) {​
[Link](item, empty);​
if (empty |​

| item == null) {
setText(null);
setStyle(""); // Limpar estilos
} else {
setText(item);
if ([Link]("@[Link]")) {
setTextFill([Link]);
setFont([Link](null, [Link], -1));
} else {
setTextFill([Link]);
setFont([Link](null, [Link], -1));
}
}
}
});
```
●​ Estilizando Linhas ([Link]): Permite fornecer uma
implementação customizada de TableRow<S> para controlar a renderização de
cada linha. Útil para aplicar estilos a linhas inteiras com base nos dados do objeto
S.​
Java​
import [Link];​
​
[Link](tv -> new TableRow<Person>() {​
@Override​
protected void updateItem(Person item, boolean empty) {​
[Link](item, empty);​
if (empty |​

| item == null) {
setStyle("");
} else {
if ([Link]().equals("Ana")) {
setStyle("-fx-background-color: #ffc0cb;"); // Rosa claro para a Ana
} else {
setStyle(""); // Estilo padrão para outras linhas
}
}
}
});
```
●​ Estilizando Cabeçalhos: A customização programática direta dos cabeçalhos é
menos comum e geralmente feita via CSS. No entanto, pode-se acessar os nós
dos cabeçalhos e aplicar estilos se necessário, embora seja complexo.

3.3.4. Customização Programática do Comportamento via Java

●​ Seleção:
○​ [Link]().setSelectionMode([Link]);
○​ [Link]().selectedItemProperty().addListener(...)
○​ [Link]().getSelectedItems().addListener(...)
●​ Ordenação: A ordenação é habilitada por padrão. Pode-se controlar
programaticamente com [Link]().add(column) e
[Link]([Link]).
 ●​ Edição de Células:
○​ [Link](true);
○​ [Link](true); (para colunas específicas)
○​ Usar CellFactorys que suportam edição, como
[Link]().
○​ [Link](EventHandler<[Link]<S,T>
> eventHandler)
Java​
[Link];​
​
[Link](true);​
[Link](true);​
[Link]([Link]());​
[Link](event -> {​
Person person = [Link]();​
[Link]([Link]());​
[Link]("Nome alterado para: " + [Link]());​
});​

3.3.5. Customização Avançada com CSS

CSS é amplamente usado para estilizar TableViews.
●​ Seletores Principais 62:
○​ .table-view: O controle TableView como um todo.
○​ .[Link]-header-background: A área de fundo dos cabeçalhos das
colunas.
○​ .[Link]-header: Cada cabeçalho de coluna individual.
○​ .[Link]: O texto dentro do cabeçalho da coluna.
○​ .[Link]: Espaço de preenchimento no final da barra de cabeçalho, se
as colunas não preencherem toda a largura.
○​ .[Link]-flow: O contêiner para as linhas.
○​ .table-row-cell: Cada linha da tabela.
○​ .table-cell: Cada célula individual.
○​ .[Link]: O nó exibido quando a tabela está vazia.
●​ Propriedades CSS Comuns:
○​ Tabela Geral (.table-view): -fx-background-color, -fx-border-color,
-fx-padding.
○​ Cabeçalhos (.[Link]-header,
.[Link]): -fx-background-color, -fx-border-color,
-fx-padding, -fx-text-fill, -fx-font-size.
 ○​ Linhas (.table-row-cell): -fx-background-color, -fx-border-color,
-fx-padding.
○​ Células (.table-cell): -fx-background-color, -fx-text-fill, -fx-padding,
-fx-alignment.
●​ Estilizando Estados com Pseudo-classes 74:
○​ Linhas (.table-row-cell):
■​ :odd, :even: Para listras.

.table-row-cell:odd { -fx-background-color: #f5f5f5; } .table-row-cell:even

{ -fx-background-color: white; } ```
■​ :selected: Para linhas selecionadas.

.table-row-cell:selected { -fx-background-color: #0078D7; }

.table-row-cell:[Link]-cell { /* Para o texto na célula selecionada */
-fx-text-fill: white; } ``` 75
■​ :hover: Para efeito ao passar o mouse sobre uma linha.

.table-row-cell:hover { -fx-background-color: #e0e0e0; } ```

■​ :focused (em .table-view): Para diferenciar a aparência da seleção quando
a tabela tem foco vs. não tem foco.
.table-view:[Link]-row-cell:selected { -fx-background-color:
#005a9e; /* Cor mais escura para seleção focada */ } ``` 75
○​ Células (.table-cell): Podem ter seus próprios estados :hover, :focused se a
seleção for por célula.
○​ Cabeçalhos (.[Link]-header):
■​ :hover:

.[Link]-header:hover { -fx-background-color: #e8e8e8; } ```

●​ Exemplo CSS 73:​
CSS​
/* [Link] */​

.table-view {
-fx-base: #f0f0f0; /* Cor base para o tema da tabela /
-fx-control-inner-background: white; / Fundo das linhas /
-fx-control-inner-background-alt: #f8f8f8; / Fundo alternativo para linhas (odd/even) */
}
.[Link]-header-background {
-fx-background-color: #e0e0e0;
}
.[Link]-header {
-fx-background-color: transparent;
-fx-padding: 8px;
-fx-border-color: transparent #d0d0d0 transparent transparent; /* Linha divisória à direita */
-fx-border-width: 0 1 0 0;
}
.[Link] {
-fx-font-weight: bold;
-fx-text-fill: #333;
}
.[Link]-cell {
-fx-padding: 8px;
-fx-border-color: transparent #e0e0e0 transparent transparent; /* Linhas de grade verticais
*/
-fx-border-width: 0 1 0 0;
}
.table-row-cell:odd {
-fx-background-color: -fx-control-inner-background-alt;
}
.table-row-cell:selected {
-fx-background-color: #0078D7;
}
.table-row-cell:[Link]-cell {
-fx-text-fill: white;
}
```
A estrutura do TableView com seus subcomponentes (column-header-background,
column-header, filler, virtual-flow, table-row-cell, table-cell) permite uma customização CSS
bastante detalhada. O uso de -fx-base e -fx-control-inner-background pode simplificar a
aplicação de um tema consistente.
3.4. TreeView<T>
3.4.1. Propósito e Casos de Uso Comuns
O TreeView<T> é usado para exibir dados hierárquicos em uma estrutura de árvore,
onde os itens (TreeItem<T>) podem ser expandidos ou recolhidos para mostrar ou
ocultar seus filhos.76 É ideal para:
●​ Representar sistemas de arquivos.
●​ Mostrar estruturas organizacionais.
●​ Navegação em menus hierárquicos.
●​ Qualquer dado que possua uma relação pai-filho.

3.4.2. Criação e Configuração Básica em Java

A criação de um TreeView envolve TreeItems.
 ●​ TreeView<T>:
○​ TreeView(): Construtor padrão.
○​ TreeView(TreeItem<T> root): Construtor que define o nó raiz.
○​ setRoot(TreeItem<T> value): Define o nó raiz da árvore.76
●​ TreeItem<T>: Representa um nó na árvore.
○​ TreeItem(T value): Cria um item com um valor.
○​ TreeItem(T value, Node graphic): Cria um item com valor e um ícone gráfico.76
○​ getChildren(): Retorna uma ObservableList<TreeItem<T>> para adicionar
filhos.
○​ setExpanded(boolean value): Controla se o item está expandido ou
recolhido.76
○​ isLeaf(): Retorna true se o item não tem filhos (ou não pode ter).

Exemplo de Criação:

Java

import [Link];​
import [Link];​
import [Link];​
import [Link];​
import [Link]; // Para o exemplo​
​
// Ícones (opcional)​
Image folderIcon = new Image(getClass().getResourceAsStream("[Link]"));​
Image fileIcon = new Image(getClass().getResourceAsStream("[Link]"));​
​
// Criando os itens da árvore (TreeItems)​
TreeItem<String> rootNode = new TreeItem<>("Arquivos", new ImageView(folderIcon));​
[Link](true); // Raiz expandida por padrão​
​
TreeItem<String> documentsNode = new TreeItem<>("Documentos", new
ImageView(folderIcon));​
[Link]().addAll(​
new TreeItem<>("Relató[Link]", new ImageView(fileIcon)),​
new TreeItem<>("Apresentaçã[Link]", new ImageView(fileIcon))​
);​
​
TreeItem<String> picturesNode = new TreeItem<>("Imagens", new
ImageView(folderIcon));​
[Link]().add(new TreeItem<>("Foto Fé[Link]", new
ImageView(fileIcon)));​
​
[Link]().addAll(documentsNode, picturesNode);​
​
// Criando o TreeView e definindo a raiz​
TreeView<String> treeView = new TreeView<>(rootNode);​
​
// Adicionando a um painel​
StackPane layout = new StackPane(treeView);​

76

3.4.3. Customização Programática da Aparência via Java

A principal forma de customizar a aparência das células de um TreeView é através de
uma CellFactory.
●​ Estilizando Células (setCellFactory) 76: O método
setCellFactory(Callback<TreeView<T>, TreeCell<T>> value) permite fornecer uma
implementação customizada de TreeCell<T>. No método updateItem(T item,
boolean empty) da TreeCell, pode-se alterar texto, gráfico, cores, fontes, etc.​
Java​
import [Link];​
import [Link];​
import [Link];​
import [Link];​
​
[Link](tv -> new TreeCell<String>() {​
@Override​
protected void updateItem(String item, boolean empty) {​
[Link](item, empty);​
if (empty |​

| item == null) {
setText(null);
setGraphic(null);
// Limpar estilos
} else {
setText(item); // Define o texto da célula
// Customização baseada no item
if (getTreeItem()!= null && getTreeItem().isLeaf()) {
setTextFill([Link]);
// Poderia definir um ícone diferente para folhas aqui também
// setGraphic(new ImageView(fileIcon));
} else {
setTextFill([Link]);
setFont([Link](null, [Link], -1));
// setGraphic(new ImageView(folderIcon));
}
// Se o TreeItem já tiver um gráfico, ele será usado por padrão.
// Para sobrescrever ou garantir que o gráfico do TreeItem seja usado:
if (getTreeItem()!= null && getTreeItem().getGraphic()!= null) {
setGraphic(getTreeItem().getGraphic());
}
}
}
});
```
É importante notar que TreeItem não herda de Node, então efeitos visuais ou menus de
contexto não podem ser aplicados diretamente a TreeItems; isso deve ser feito na TreeCell
através da CellFactory.76
3.4.4. Customização Programática do Comportamento via Java
●​ Listeners de Seleção:​
Java​
[Link]().selectedItemProperty().addListener(​
(observable, oldValue, newValue) -> {​
if (newValue!= null) {​
[Link]("Item selecionado: " + [Link]() +​
", Folha: " + [Link]());​
}​
}​
);​

●​ Edição de Células 76:

○​ [Link](true);
○​ Usar CellFactorys que suportam edição, como
[Link](), ou implementar a lógica de edição na
TreeCell customizada (mostrando um TextField em startEdit()).
 ○​ [Link](EventHandler<[Link]<T>>
eventHandler)
Java​
import [Link];​
​
[Link](true);​
[Link]([Link]()); // Permite edição inline​
​
[Link](event -> {​
TreeItem<String> editedItem = [Link]();​
[Link]([Link]());​
[Link]([Link]() + " alterado para " + [Link]());​
});​

●​ Adicionar Itens Dinamicamente (Exemplo com Menu de Contexto) 76:

Pode-se adicionar um ContextMenu a TreeCells para permitir ações como
adicionar novos TreeItems.​
Java​
// Dentro da CellFactory, no updateItem, para nós que não são folhas:​
// if (!isLeaf()) {​
// ContextMenu contextMenu = new ContextMenu();​
// MenuItem addItem = new MenuItem("Adicionar Novo Item");​
// [Link](event -> {​
// TreeItem<String> newItem = new TreeItem<>("Novo Item Filho");​
// getTreeItem().getChildren().add(newItem);​
// });​
// [Link]().add(addItem);​
// setContextMenu(contextMenu);​
// } else {​
// setContextMenu(null);​
// }​

3.4.5. Customização Avançada com CSS

A estilização do TreeView e de seus componentes internos (TreeCell) é feita via CSS.
●​ Seletores Principais 76:
○​ .tree-view: O controle TreeView como um todo.
○​ .tree-cell: As células individuais da árvore.
○​ .[Link]-disclosure-node: O nó de expansão/recolhimento (seta).
○​ .[Link]: A forma da seta.
○​ .[Link]-flow: O contêiner interno para as células.
●​ Propriedades CSS Comuns para Células (.tree-cell) 78:
 ○​ -fx-background-color: Cor de fundo da célula.
○​ -fx-text-fill: Cor do texto na célula.
○​ -fx-padding: Preenchimento da célula (afeta o recuo dos filhos também).
○​ -fx-font-size, -fx-font-family, etc.
○​ -fx-indent: Controla o recuo de cada nível da árvore.
●​ Estilizando Estados de Células com Pseudo-classes 78:
○​ :selected: Para células selecionadas.

.tree-cell:selected {-fx-background-color: #0078D7;-fx-text-fill: white;}```78

○​ :hover: Para efeito ao passar o mouse.

.tree-cell:hover {-fx-background-color: #e0e0e0;}```

○​ :focused: Para a célula focada (geralmente combinada com :selected).

.tree-view:[Link]-cell:selected {-fx-background-color: #005a9e; /* Cor

mais escura para seleção focada */}```
○​ :expanded e :collapsed (aplicadas ao .tree-disclosure-node ou à célula): Para
estilizar a seta ou

Referências citadas

1.​ JavaFX Tutorial | GeeksforGeeks, acessado em junho 3, 2025,

[Link]
2.​ Choosing Between JavaFX and Swing: The Performance Debate ..., acessado em
junho 3, 2025,
[Link]
3.​ JavaFX vs Swing Which is Better for Desktop Development, acessado em junho 3,
2025,
[Link]
[Link]
4.​ JavaFx Tutorial For Beginners 1 - Introduction To JavaFx - YouTube, acessado em
junho 3, 2025, [Link]
5.​ JavaFX Application Development - Tutorialspoint, acessado em junho 3, 2025,
[Link]
6.​ JavaFX | Java and OOP, acessado em junho 3, 2025,
[Link]
7.​ Getting Started with JavaFX, acessado em junho 3, 2025,
[Link]
8.​ How to set up JavaFX in Eclipse in 2023 (under 5 minutes) - YouTube, acessado
em junho 3, 2025, [Link]
9.​ Setup a JavaFX Project for JDK 11 Using Intellij - YouTube, acessado em junho 3,
2025, [Link]
10.​Java: como configurar um ambiente de desenvolvimento do ZERO - YouTube,
acessado em junho 3, 2025, [Link]
11.​ JavaFX GUI Development: Stage, Scene, and Node - [Link], acessado em
 junho 3, 2025,
[Link]
ene-and-node
12.​Getting Started with JavaFX: Hello World, JavaFX Style | JavaFX 2 ..., acessado em
junho 3, 2025, [Link]
13.​Application (JavaFX 2.2) - Oracle Help Center, acessado em junho 3, 2025,
[Link]
14.​Life Cycle of a JavaFX Application - Tutorialspoint, acessado em junho 3, 2025,
[Link]
15.​Using JavaFX UI Controls: About This Tutorial | JavaFX 2 Tutorials ..., acessado em
junho 3, 2025, [Link]
16.​Using JavaFX UI Controls: Label | JavaFX 2 Tutorials and ..., acessado em junho 3,
2025, [Link]
17.​JavaFX Label - Tutorialspoint, acessado em junho 3, 2025,
[Link]
18.​Label (JavaFX 8) - Oracle Help Center, acessado em junho 3, 2025,
[Link]
19.​JavaFX Region - [Link], acessado em junho 3, 2025,
[Link]
20.​JavaFX | Background Class | GeeksforGeeks, acessado em junho 3, 2025,
[Link]
21.​user interface - How do I make a simple solid border around a ..., acessado em
junho 3, 2025,
[Link]
rder-around-a-flowpane-in-javafx
22.​3 Fancy Forms with JavaFX CSS - Oracle Help Center, acessado em junho 3, 2025,
[Link]
23.​JavaFX labels styling: CSS customization - w3resource, acessado em junho 3,
2025,
[Link]
[Link]
24.​JavaFX CSS : Apply hover effect to Child nodes when Parent node is hovered on,
acessado em junho 3, 2025,
[Link]
child-nodes-when-parent-node-is-hovered-on
25.​Anyway to have a label respond to :focus CSS - Stack Overflow, acessado em
junho 3, 2025,
[Link]
o-focus-css
26.​Styling with CSS in JavaFX - w3resource, acessado em junho 3, 2025,
[Link]
27.​Button - Using JavaFX UI Controls, acessado em junho 3, 2025,
[Link]
28.​JavaFX | Button with examples - GeeksforGeeks, acessado em junho 3, 2025,
[Link]
29.​JavaFX Styling: Multiple button styles - w3resource, acessado em junho 3, 2025,
[Link]
[Link]
30.​java - JavaFX: Make a button look like it's being clicked - Stack ..., acessado em
junho 3, 2025,
[Link]
s-being-clicked
31.​Styling JavaFX buttons with pseudo-classes. - w3resource, acessado em junho 3,
2025,
[Link]
[Link]
32.​37 Styling UI Controls with CSS (Release 8) - Oracle Help Center, acessado em
junho 3, 2025,
[Link]
33.​Modena – new theme for JavaFX 8 | JavaFX News, Demos and ..., acessado em
junho 3, 2025,
[Link]
34.​How to Create a JavaFX Button (and Style It with CSS) - YouTube, acessado em
junho 3, 2025, [Link]
35.​Pseudo-classes - CSS: Cascading Style Sheets - MDN Web Docs, acessado em
junho 3, 2025, [Link]
36.​Banish Focus Glow: Styling JavaFX Focus Highlights! | Java Tech Blog, acessado
em junho 3, 2025, [Link]
37.​Button Hover and pressed effect CSS Javafx - Stack Overflow, acessado em
junho 3, 2025,
[Link]
-css-javafx
38.​Button (JavaFX 14), acessado em junho 3, 2025,
[Link]
39.​Using JavaFX UI Controls: Text Field | JavaFX 2 Tutorials and ..., acessado em junho
3, 2025, [Link]
40.​TextField (JavaFX 19), acessado em junho 3, 2025,
[Link]
41.​TextField (JavaFX 13), acessado em junho 3, 2025,
[Link]
42.​JavaFX CSS - Tutorialspoint, acessado em junho 3, 2025,
[Link]
43.​JavaFX | TextField - GeeksforGeeks, acessado em junho 3, 2025,
[Link]
44.​JavaFX Form Styling: Customizing text fields - w3resource, acessado em junho 3,
2025,
[Link]
[Link]
45.​JavaFX Tutorial: CSS Styling | Vojtech Ruzicka's Programming Blog, acessado em
junho 3, 2025, [Link]
46.​Using JavaFX UI Controls: Checkbox | JavaFX 2 Tutorials and ..., acessado em
junho 3, 2025, [Link]
47.​JavaFX | Checkbox | GeeksforGeeks, acessado em junho 3, 2025,
[Link]
48.​Styling a CheckBox - Oracle Forums, acessado em junho 3, 2025,
[Link]
49.​java - How to modify the ChoiceBox checkmark in JavaFX? - Stack ..., acessado
em junho 3, 2025,
[Link]
heckmark-in-javafx
50.​JavaFX Check-Menu-Item Css: Change Mark color on focus - Stack ..., acessado
em junho 3, 2025,
[Link]
ge-mark-color-on-focus
51.​JavaFX | RadioButton with examples | GeeksforGeeks, acessado em junho 3,
2025, [Link]
52.​RadioButton (JavaFX 8) - Oracle Help Center, acessado em junho 3, 2025,
[Link]
53.​java - How to change color of selected RadioButton in JavaFX [CSS ..., acessado
em junho 3, 2025,
[Link]
d-radiobutton-in-javafx-css
54.​How to programmatically set the color or texture of a tab label in JavaFX? - Stack
Overflow, acessado em junho 3, 2025,
[Link]
e-color-or-texture-of-a-tab-label-in-javafx
55.​ComboBox (JavaFX 17), acessado em junho 3, 2025,
[Link]
56.​JavaFX: Understanding the ComboBox - PragmaticCoding, acessado em junho 3,
2025, [Link]
57.​ComboBoxListCell (JavaFX 8) - Oracle Help Center, acessado em junho 3, 2025,
[Link]
[Link]
58.​JavaFX combo box style button if editable - Stack Overflow, acessado em junho
3, 2025,
[Link]
-editable
59.​JavaFX combobox css styling - Stack Overflow, acessado em junho 3, 2025,
[Link]
60.​ComboBox in JavaFX Tutorial | 100% Perfect For Beginners - YouTube, acessado
em junho 3, 2025, [Link]
61.​java - JavaFX ComboBox CSS style - Stack Overflow, acessado em junho 3, 2025,
[Link]
62.​JavaFX Styling Guide: TableView - PragmaticCoding, acessado em junho 3, 2025,
[Link]
63.​JavaFX : Style combobox popup list text color and selected item color? - Stack
Overflow, acessado em junho 3, 2025,
[Link]
t-text-color-and-selected-item-color
64.​Using JavaFX UI Controls: List View | JavaFX 2 Tutorials and ..., acessado em junho
3, 2025, [Link]
65.​ListView (JavaFX 8) - Oracle Help Center, acessado em junho 3, 2025,
[Link]
66.​Cell (JavaFX 13), acessado em junho 3, 2025,
[Link]
67.​JavaFX - CSS styling listview - Stack Overflow, acessado em junho 3, 2025,
[Link]
68.​css - JavaFX - styling an unfocused ListView row - Stack Overflow, acessado em
junho 3, 2025,
[Link]
ew-row
69.​12 Table View - Using JavaFX UI Controls - Oracle Help Center, acessado em
junho 3, 2025, [Link]
70.​Javafx Tableview | PDF | Data Management Software | Information ..., acessado
em junho 3, 2025, [Link]
71.​Populating TableView from a method (JavaFX forum at Coderanch), acessado em
junho 3, 2025,
[Link]
72.​java - Setting font color of JavaFX TableView Cells? - Stack Overflow, acessado
em junho 3, 2025,
[Link]
ew-cells
73.​Modify a Table View Header - Oracle Forums, acessado em junho 3, 2025,
[Link]
74.​JavaFX CSS Reference Guide, acessado em junho 3, 2025,
[Link]
75.​css - javafx - How to set selected row text color in not focused ..., acessado em
junho 3, 2025,
[Link]
ext-color-in-not-focused-tableview
76.​Using JavaFX UI Controls: Tree View | JavaFX 2 Tutorials and ..., acessado em
junho 3, 2025, [Link]
77.​TreeTableView (JavaFX 22), acessado em junho 3, 2025,
[Link]
ml
78.​css - simple way to change JavaFX treeview background and text ..., acessado
em junho 3, 2025,
[Link]
eview-background-and-text-color
79.​How to change background color of selected TreeCell? [Solved ..., acessado em
 junho 3, 2025,
[Link]
ll
80.​JavaFX CSS Reference Guide, acessado em junho 3, 2025,
[Link]
81.​TreeView (JavaFX 21), acessado em junho 3, 2025,
[Link]