Introdução as Interfaces Gráficas (GUI) com JavaFX

• JavaFX é uma plataforma de software para a criação de interfaces gráficas de usuário (GUIs) em Java. Lançada em 2014, a JavaFX oferece um conjunto de APIs e ferramentas para o desenvolvimento de aplicativos desktop, móveis e embarcados com interfaces visuais ricas e interativas.

• Diferentemente do Java Swing, o JavaFX adota uma abordagem mais moderna e orientada a objetos para a criação de interfaces gráficas. Ele ainda pode utilizar uma linguagem de marcação chamada FXML para definir a estrutura da interface e um conjunto de classes Java para definir o comportamento e a lógica do aplicativo.

Arquitetura JavaFX

A hierarquia de componentes do JavaFX é organizada de forma a separar as responsabilidades de cada elemento na construção de interfaces gráficas. Os principais componentes são o Stage, a Scene e os UI Controls. Aqui está a descrição de cada um e sua relação hierárquica:

1. Stage (Palco):

   • O Stage é a janela principal da aplicação JavaFX. Ele representa uma janela onde os componentes gráficos são exibidos.

   • O Stage pode ser considerado como o "container" externo que contém tudo o que será mostrado na aplicação.

   • Há diferentes tipos de Stage no JavaFX, sendo o principal o Primary Stage, que é fornecido automaticamente quando a aplicação é iniciada.

   • Um Stage pode conter exatamente uma Scene por vez, mas é possível alternar entre diferentes Scenes dentro de um Stage.

2. Scene (Cena):

   • A Scene é responsável por organizar e gerenciar todos os componentes de interface da aplicação que estão sendo exibidos em um Stage.

   • Ela é uma hierarquia de Nodes (nós), onde os UI Controls e outros elementos gráficos são inseridos.

   • Uma Scene é análoga a um "espaço de trabalho" onde todos os componentes visuais são dispostos e organizados.

   • A raiz da cena é um elemento do tipo Parent, como um layout (VBox, HBox, BorderPane, etc.), e todos os controles e nós filhos são organizados dentro dessa estrutura.

3. UI Controls (Controles de Interface do Usuário):

   • Os UI Controls são os componentes de interface de usuário como botões, rótulos, caixas de texto, tabelas, etc.

   • Eles são considerados Nodes, ou seja, podem ser adicionados à hierarquia de uma Scene.

   • Exemplos de UI Controls incluem Button, Label, TextField, TableView, e muitos outros.

   • Esses controles são organizados dentro de contêineres de layout, que por sua vez são parte da hierarquia da Scene.

Relação Hierárquica

• O Stage contém a Scene.

• A Scene contém um conjunto de Nodes.

• Os UI Controls são tipos de Nodes e podem ser organizados dentro de contêineres de layout, formando a hierarquia de nós exibida na Scene.

Essa estrutura hierárquica permite que uma aplicação JavaFX seja modular, flexível e fácil de manter, pois separa claramente a lógica de janela, organização de layout e interação com os elementos da interface do usuário.

// Importa as bibliotecas essenciais do JavaFX para construir a interface gráfica

import javafx.application.Application; // Classe base para todas as aplicações JavaFX

import javafx.stage.Stage; // Representa a janela principal da aplicação

import javafx.scene.Scene; // Representa uma cena contendo os elementos visuais

import javafx.scene.control.Label; // Componente de texto simples (rótulo)

import javafx.scene.control.TextField; // Campo de entrada de texto

import javafx.scene.control.Button; // Botão clicável

import javafx.scene.layout.VBox; // Layout que organiza os componentes em uma coluna

import javafx.geometry.Pos; // Usado para alinhar os elementos no layout

import javafx.event.EventHandler; // Interface para lidar com eventos

import javafx.event.ActionEvent; // Representa o evento de ação, como um clique de botão

// A classe Main herda de Application, o que significa que ela é uma aplicação JavaFX

public class Main extends Application { 

  // O método start é obrigatório e é onde configuramos o que será mostrado na tela

  @Override

  public void start(Stage primaryStage) {

    // Declaração dos componentes da interface gráfica

    Label label; // Rótulo de texto

    TextField tf; // Campo de texto onde o usuário pode digitar

    Button button; // Botão que pode ser clicado

    VBox vbox; // Layout para organizar os componentes verticalmente

    Scene scene; // Cena onde os componentes são mostrados

    // Inicializa o campo de texto com um valor inicial

    tf = new TextField("Text Field!"); // O campo começa com o texto "Text Field!"

    tf.setMaxWidth(200); // Limita a largura do campo de texto a 200 pixels

    // Inicializa o rótulo com uma mensagem

    label = new Label("Type text and click the button"); // Mensagem inicial do rótulo

    button = new Button("Click"); // Botão que o usuário vai clicar

    // Define o que acontece quando o botão é clicado

    button.setOnAction(new EventHandler<ActionEvent>() {

      @Override 

      public void handle(ActionEvent e) {

        // Quando o botão é clicado, o texto do campo de texto é mostrado no rótulo

        label.setText(tf.getText()); // Atualiza o rótulo com o texto digitado

      }

    });

    // Inicializa o layout VBox e adiciona os componentes dentro dele

    vbox = new VBox(label, tf, button); // Adiciona o rótulo, campo de texto e botão no VBox

    vbox.setSpacing(20); // Define um espaçamento de 20 pixels entre os componentes

    vbox.setAlignment(Pos.CENTER); // Centraliza os componentes no meio da tela

    // Inicializa a cena com o VBox e define o tamanho da janela

    scene = new Scene(vbox, 300, 200); // Cria uma cena com o VBox, 300x200 pixels

    // Define o título da janela (Stage)

    primaryStage.setTitle("A Simple Scene!"); // Título da janela

    // Define a cena principal a ser exibida na janela

    primaryStage.setScene(scene); 

    // Exibe a janela para o usuário

    primaryStage.show();

  } 

  // O método main é o ponto de entrada da aplicação

  public static void main(String[] args) {

    // Lança a aplicação JavaFX

    launch(args);

  }

}

Explicação do código:

• TextField: É o campo de texto onde o usuário pode digitar uma mensagem.

• Label: Um rótulo que exibe texto fixo ou dinâmico. Inicialmente, ele instrui o usuário a digitar algo e clicar no botão.

• Button: Um botão clicável. Quando o usuário clica nele, a ação associada é executada.

• VBox: Um layout que organiza os componentes verticalmente, um embaixo do outro.

• Scene: É a cena que contém o layout e os componentes da interface.

• primaryStage: Representa a janela principal que contém a cena.

Quando o botão é clicado, o código dentro do método handle é executado, o que faz com que o texto do campo de entrada seja exibido no rótulo.