Back

JavaFX TextField

JavaFX TextField

  1. Objectifs

    • Instancier un TextField sans texte initial afin de permettre à l’utilisateur de saisir du texte.
    • Utiliser le constructeur par défaut TextField().

  2. Introduction :

    • Dans l’application JavaFX, pour obtenir les informations utilisateur en tant que saisie de l’utilisateur, un formulaire est créé à l’aide de champs de texte qui permettent à l’utilisateur de saisir des données dans des champs spécifiques.
    • Dans l’application JavaFX, la classe javafx.scene.control.TextField est utilisée pour inclure TextField.
    • La classe TextField fait partie du package JavaFX. C’est un composant qui permet à l’utilisateur de saisir une ligne de texte non formaté, il n’autorise pas la saisie sur plusieurs lignes, il permet uniquement à l’utilisateur de saisir une seule ligne de texte. Le texte peut ensuite être utilisé selon les besoins. Constructeur de la classe TextField :
      • TextField() : crée un nouveau TextField avec un contenu texte vide
      • TextField(String s) : crée un nouveau TextField avec un text initial.

  3. Étape par Étape pour Créer une Interface JavaFX avec TextField et Button

    1. Ouvrir Eclipse et Créer un Nouveau Projet JavaFX
      • a. Ouvrez Eclipse.
      • b. Allez dans File -> New -> Project….
      • c. Sélectionnez Java Project et cliquez sur Next.
      • d. Donnez un nom à votre projet, par exemple JavaFXTextFieldProject, puis cliquez sur Finish.
    2. Configurer le Projet pour JavaFX
      • a. Cliquez avec le bouton droit sur le projet dans l’explorateur de projets et sélectionnez Properties.
      • b. Dans la section Java Build Path, allez à l’onglet Libraries et cliquez sur Modulepath.
      • c. Cliquez sur Add External JARs… et ajoutez les bibliothèques JavaFX (vous pouvez les télécharger depuis le site officiel de JavaFX).
      • d. Ajoutez également les bibliothèques requises pour JavaFX (comme javafx.base, javafx.controls, javafx.graphics).
    3. Créer la Classe Principale
      • a. Cliquez avec le bouton droit sur le dossier src dans l’explorateur de projets, puis sélectionnez New -> Class.
      • b. Nommez la classe TextFieldUI et cochez la case public static void main(String[] args) pour générer le point d’entrée principal.
      • c. Modifiez la classe pour qu’elle étende Application et ajoutez la méthode start. Voici un exemple de code complet :

          • package application;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class TextFieldUI extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Création du conteneur GridPane
        GridPane gridPane = new GridPane();

        // Création des labels et des champs de texte
        Label firstNameLabel = new Label("Prénom:");
        TextField firstNameTextField = new TextField();
        Label lastNameLabel = new Label("Nom:");
        TextField lastNameTextField = new TextField();

        // Création du bouton
        Button submitButton = new Button("Soumettre");

        // Ajout des éléments au GridPane
        gridPane.addRow(0, firstNameLabel, firstNameTextField);
        gridPane.addRow(1, lastNameLabel, lastNameTextField);
        gridPane.addRow(2, submitButton);

        // Configuration de la scène
        Scene scene = new Scene(gridPane, 400, 200);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Exemple de champ de texte JavaFX");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

      • Explications
      • Importer les Bibliothèques Nécessaires

          • import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
Classe Principale

      • La classe TextFieldUI étend Application et surcharge la méthode start pour configurer l’interface utilisateur.
      • Méthode start
        • Crée un conteneur GridPane pour organiser les éléments de l’interface.
        • Crée des labels (Label) et des champs de texte (TextField) pour le prénom et le nom de l’utilisateur.
        • Crée un bouton (Button) pour soumettre les informations.
        • Ajoute les éléments au GridPane en utilisant la méthode addRow.
        • Crée une scène avec le GridPane et la configure dans la fenêtre principale (primaryStage).
        • Configure la fenêtre principale (titre et dimensions) et affiche la fenêtre en appelant show.
      • Méthode main
        • Lance l’application en appelant launch(args).
      • Tester l’Application
      • Exécuter le Projet
      • Cliquez avec le bouton droit sur la classe TextFieldUI dans l’explorateur de projets et sélectionnez Run As -> Java Application.
      • Vérifier les Actions
        • Dans la fenêtre de l’application JavaFX, vérifiez que les labels et les champs de texte pour le prénom et le nom s’affichent correctement avec le bouton « Soumettre ».
    4. Output

        5. JavaFX TextField

    5. Mise en forme
      • Pour ajouter de l’espace à gauche des labels et entre les TextField dans une application JavaFX, vous pouvez utiliser les propriétés de disposition de GridPane telles que les marges et les espacements. Voici comment vous pouvez le faire :
      • Ajouter des marges aux labels : Vous pouvez utiliser la méthode setMargin pour ajouter des marges autour des nœuds individuels.
      • Ajouter des espacements entre les éléments du GridPane : Utilisez les propriétés setHgap et setVgap du GridPane pour définir les espacements horizontaux et verticaux entre les enfants du GridPane.

        • package application;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class textFieldExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Création du conteneur GridPane
        GridPane gridPane = new GridPane();

        // Définir les espacements entre les éléments
        gridPane.setHgap(10); // Espacement horizontal
        gridPane.setVgap(10); // Espacement vertical

        // Définir les marges pour le GridPane
        gridPane.setPadding(new Insets(10, 10, 10, 10)); // Marge autour du GridPane

        // Création des labels et des champs de texte
        Label firstNameLabel = new Label("Prénom:");
        TextField firstNameTextField = new TextField();
        Label lastNameLabel = new Label("Nom:");
        TextField lastNameTextField = new TextField();

        // Ajouter des marges aux labels
        GridPane.setMargin(firstNameLabel, new Insets(0, 0, 0, 10)); // Marge à gauche du label
        GridPane.setMargin(lastNameLabel, new Insets(0, 0, 0, 10)); // Marge à gauche du label

        // Création du bouton
        Button submitButton = new Button("Soumettre");

        // Ajout des éléments au GridPane
        gridPane.add(firstNameLabel, 0, 0);
        gridPane.add(firstNameTextField, 1, 0);
        gridPane.add(lastNameLabel, 0, 1);
        gridPane.add(lastNameTextField, 1, 1);
        gridPane.add(submitButton, 1, 2);

        // Configuration de la scène
        Scene scene = new Scene(gridPane, 400, 200);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Exemple de champ de texte JavaFX");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}




  4. Activité: JavaFX simple avec deux champs de texte et un bouton

    1. Objectifs :
      • Créer une interface utilisateur JavaFX avec deux champs de saisie, un bouton et un label pour afficher le résultat.
      • Gérer l’événement de clic sur le bouton pour calculer la somme des deux nombres saisis.
      • Afficher le résultat de la somme dans le label.
    2. Instructions :

        3. JavaFX TextField

      • Créez un nouveau projet JavaFX Eclipse.
      • Dans la classe principale, créez les contrôles suivants :
      • Deux TextField pour la saisie des nombres
      • Un Button pour le calcul de la somme
      • Un Label pour afficher le résultat
      • Organisez les contrôles dans une disposition de type GridPane.
      • Ajoutez un gestionnaire d’événement au bouton pour récupérer les valeurs saisies dans les champs de texte, calculer la somme et l’afficher dans le label.
      • Testez votre application en saisissant des nombres dans les champs de texte et en cliquant sur le bouton.
    3. Bonus :
      • Ajoutez une vérification pour s’assurer que les valeurs saisies sont bien des nombres.
      • Ajoutez un traitement d’erreur en cas de saisie non numérique.
      • Cet exercice permettra à vos étudiants de se familiariser avec la création d’une interface utilisateur simple en JavaFX, la gestion des événements et l’affichage de résultats.
      Solution 

        package application;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class sommeDeuxNombres extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Créer les contrôles
        TextField numberField1 = new TextField();
        TextField numberField2 = new TextField();
        Button calculateButton = new Button("Calculer");
        Label resultLabel = new Label();

        // Définir l'action du bouton
        calculateButton.setOnAction(event -> {
            try {
                double number1 = Double.parseDouble(numberField1.getText());
                double number2 = Double.parseDouble(numberField2.getText());
                double result = number1 + number2;
                resultLabel.setText("La somme est : " + result);
            } catch (NumberFormatException e) {
                resultLabel.setText("Veuillez saisir des nombres valides.");
            }
        });

        // Disposition des contrôles dans une grille
        GridPane gridPane = new GridPane();
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        gridPane.setPadding(new Insets(20));
        gridPane.add(new Label("Nombre 1 :"), 0, 0);
        gridPane.add(numberField1, 1, 0);
        gridPane.add(new Label("Nombre 2 :"), 0, 1);
        gridPane.add(numberField2, 1, 1);
        gridPane.add(calculateButton, 0, 2);
        gridPane.add(resultLabel, 1, 2);

        // Créer la scène et afficher la fenêtre
        Scene scene = new Scene(gridPane, 400, 200);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Calculateur de somme");
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

  5. Applications

    1. App: 01

      1. Enoncé: Création d’un Formulaire JavaFX avec Éclipse

        • Objectif :

          • L’objectif de ce travail pratique est de créer un formulaire simple en utilisant JavaFX. Le formulaire doit contenir trois zones de texte, un bouton de soumission, et un label qui affichera les résultats après un clic. Les étudiants apprendront à manipuler les composants de l’interface utilisateur et à gérer les événements.
        • Prérequis :
          • Avoir Eclipse installé sur votre ordinateur.
          • Avoir les bibliothèques JavaFX configurées dans votre projet Eclipse.
        • Création des Composants :
          • Créez trois TextField pour le prénom, le nom de famille et l’adresse e-mail.
          • Ajoutez des PromptText pour chaque TextField.
          • Créez un Button pour soumettre les informations.
          • Créez un Label pour afficher les résultats.
        • Ajout d’un Gestionnaire d’Événements :
          • Ajoutez un gestionnaire d’événements au bouton de soumission. Ce gestionnaire vérifiera si tous les champs sont remplis. Si ce n’est pas le cas, il affichera un message d’erreur en rouge et en gras.
          • Si tous les champs sont remplis, il affichera les informations saisies avec les valeurs colorées en vert et en gras.
        • Configuration du Layout :
          • Utilisez un GridPane pour organiser les composants dans la scène.
          • Configurez l’espacement et les marges avec Insets.
          • Ajoutez les composants au GridPane.
          • Création et Affichage de la Scène :
          • Créez une scène avec le GridPane et définissez la taille.
          • Configurez le titre de la fenêtre principale et ajoutez la scène à la fenêtre (Stage).
          • Affichez la fenêtre principale en appelant show().

      2. Solution

          3. Code 

          package application;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;
import javafx.geometry.Insets;

public class textPrompt extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Création des TextField
        TextField textField1 = new TextField();
        TextField textField2 = new TextField();
        TextField textField3 = new TextField();

        // Définir le texte d'invite (prompt text)
        textField1.setPromptText("First Name");
        textField2.setPromptText("Last Name");
        textField3.setPromptText("Email Address");

        // Création du bouton Submit
        Button submitButton = new Button("Submit");

        // Création du label pour afficher les résultats
        Label resultLabel = new Label();
        resultLabel.setStyle("-fx-font-size: 14px;");

        // Création du TextFlow pour afficher le texte stylisé
        TextFlow resultTextFlow = new TextFlow();

        // Ajout d'un gestionnaire d'événement au bouton
        submitButton.setOnAction(event -> {
            String firstName = textField1.getText();
            String lastName = textField2.getText();
            String email = textField3.getText();

            resultTextFlow.getChildren().clear(); // Clear previous text

            if (firstName.isEmpty() || lastName.isEmpty() || email.isEmpty()) {
                resultLabel.setText("Please fill in all fields.");
                resultLabel.setTextFill(Color.RED);
                resultLabel.setStyle("-fx-font-size: 16px; -fx-font-weight: bold;");
            } else {
                Text text1 = new Text("First Name: ");
                Text text2 = new Text(firstName);
                text2.setFill(Color.GREEN);
                text2.setStyle("-fx-font-weight: bold;");

                Text text3 = new Text(", Last Name: ");
                Text text4 = new Text(lastName);
                text4.setFill(Color.GREEN);
                text4.setStyle("-fx-font-weight: bold;");

                Text text5 = new Text(", Email: ");
                Text text6 = new Text(email);
                text6.setFill(Color.GREEN);
                text6.setStyle("-fx-font-weight: bold;");

                resultTextFlow.getChildren().addAll(text1, text2, text3, text4, text5, text6);
                resultLabel.setText("");
            }
        });

        // Création et configuration du GridPane
        GridPane gridPane = new GridPane();
        gridPane.setPadding(new Insets(10));
        gridPane.setHgap(10);
        gridPane.setVgap(10);

        // Ajout des éléments au GridPane
        gridPane.add(textField1, 0, 0);
        gridPane.add(textField2, 0, 1);
        gridPane.add(textField3, 0, 2);
        gridPane.add(submitButton, 0, 3);
        gridPane.add(resultLabel, 0, 4);
        gridPane.add(resultTextFlow, 0, 5); // Ajout du TextFlow sous le label

        // Création de la scène
        Scene scene = new Scene(gridPane, 400, 250);

        // Configuration et affichage de la fenêtre principale
        primaryStage.setTitle("JavaFX TextField Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}


    2. App: 02

      1. Enoncé

      2. Solution

          3. Solution


author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Installer Spring Tool Suite pour Eclipse
9 juin, 2024

La Classe LocalTime en Java Installer Spring Tool Suite pour Eclipse Objectifs Introduction Spring Tool Suite (STS) est une distribution Eclipse spécialement conçue pour le développement d’applications Spring. Il fournit des outils intégrés pour simplifier la création, la gestion et …

Spring Java
9 juin, 2024

La Classe LocalTime en Java Spring Java Objectifs Spring Java : qu’est-ce que c’est ? Spring Framework est un framework complet et modulaire pour le développement d’applications Java. Il fournit une vaste gamme de fonctionnalités pour le développement d’applications Java …

Exercices manipulation des dates en Java Série 01
8 juin, 2024

La Classe LocalDate en Java La Classe LocalTime en Java La Classe LocalDateTime en Java Récupérer la Valeur d’une Unité Temporelle en Java Fuseaux horaires et formatage en Java Exercices manipulation des dates en Java Série 01   Exercices manipulation …