Scribd Logo
Importer

Bienvenue sur Scribd !

  • 105 vues

    TP1-Création Des Interfaces Graphiques Avec Java SWING: Module: IHM - Interface Homme Machine

    Transféré par

    jbjkhvnj

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    TP1-Création Des Interfaces Graphiques Avec Java SWING: Module: IHM - Interface Homme Machine

    Transféré par

    jbjkhvnj
    105 vues12 pages

    Titre original

    TP1

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    105 vues12 pages

    TP1-Création Des Interfaces Graphiques Avec Java SWING: Module: IHM - Interface Homme Machine

    Transféré par

    jbjkhvnj

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 12

    1 Module : IHM - Interface Homme Machine

    Auditoire : 2 ING
    A.U : 2022-2023

    TP1- Création des interfaces graphiques avec Java SWING

    L’objectif de ce TP :
    - Familiariser le développeur à la création des interfaces graphiques (en anglais GUI ;
    Graphical User Interface) avec swing pour Java.
    - La conception d’un écran graphique en utilisant différents layout Managers.
    - L’implantation des mécanismes de gestion des événements utilisateurs.

    1. A l’aide de l’invite de commande « cmd » vérifier l’installation de JDK (Java


    Development Kit en anglais, Kit de Développement Java en Français) en tapant :

    java -version

    JDK non installé !!!

    2. Télécharger, installer et configurer le kit de développement (JDK)


    ✓ Site oracle : https://www.oracle.com/java/technologies/downloads/#jdk18-
    windows
    ✓ Une fois le téléchargement terminé, le fichier est sur votre ordinateur et vous
    pouvez installer le JDK
    ✓ Vérifiez l’arborescence de votre installation, sous c:/Programmes/ Java/jdk.

    Enseignante: Dr. Ahlem ABOUD


    1
    2 Module : IHM - Interface Homme Machine

    ✓ Afin que le système reconnaisse TOUS les outils présents dans le répertoire
    ‘JDK/bin’, vous devez ajouter ce répertoire à la variable d’environnement
    ‘PATH’ de votre ordinateur.
    ✓ Vérifier l’installation de JDK sur CMD

    Java est désormais


    parfaitement installé sur
    votre ordinateur

    Définition de JDK : le JDK (Java Development Kit en anglais, Kit de


    Développement Java en Français) représente l’outillage indispensable au développeur
    Java. Ce kit contient les outils nécessaires programmer en java, exécuter ses programmes
    java, tester ses programmes java et livrer ses programmes java à ses clients.

    3. Télécharger et installer un ‘Integrated Development Environment’ (IDE) de votre choix,


    ici on utilise ‘Visual Studio Code’ (autres IDE : Eclipse, Netbeans …etc)
    4. Installer j’extension « Java Extension Pack » sur l’IDE VS.

    Enseignante: Dr. Ahlem ABOUD


    2
    3 Module : IHM - Interface Homme Machine

    5. Relancer l’IDE « Visual Code » et créer un répertoire de travail puis un premier projet
    Java « TP1 ».

    Enseignante: Dr. Ahlem ABOUD


    3
    4 Module : IHM - Interface Homme Machine

    6. Créer un nouveau fichier (class java) « MainJFrame.java »


    7. Dans ce TP nous allons creér l’interface graphique ci-dessous :
    ✓ Créer un Jframe : il faut définir un contenant (container) de cette interface
    graphique, on choisit de personnaliser par héritage la classe JFrame qui
    correspond à une fenêtre de type Windows. On va importer les deux packages
    java.awt.* et javax.swing.*.
    - Java AWT (Abstract Window Toolkit) est un API pour développer
    les interfaces graphiques « Graphical User Interface (GUI) »
    - Swing est une bibliothèque graphique pour le langage de
    programmation Java.
    import java.awt.*;
    import javax.swing.*;
    public class MainJFrame extends JFrame{

    Enseignante: Dr. Ahlem ABOUD


    4
    5 Module : IHM - Interface Homme Machine

    JFrame qui correspond à une


    fenêtre de type Windows.

    Main JPanel
    JLabel
    First Name
    Last Name
    welcom Form JPanel

    JTextField
    Deux Zones de texte

    JButton text JPanel


    Button ok
    Button clear

    Button JPanel

    ✓ Créer une méthode « public void initialize(){ } » pour initialiser les paramètres
    de conteneur JFrame.
    setTitle("My First SWING App");
    setSize(500,600);
    setMinimumSize(new Dimension(300,400));
    setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    setVisible(true);

    ✓ Créer tous les composants « JComponant » de formulaire « Form panel ».


    JLabel lbFirstName=new JLabel("First Name");
    JLabel lbLastName=new JLabel("Last Name");
    lbFirstName.setFont(f4);
    lbLastName.setFont(f4);
    JTextField tfFirstName= new JTextField();
    JTextField tfLastName= new JTextField();

    Enseignante: Dr. Ahlem ABOUD


    5
    6 Module : IHM - Interface Homme Machine

    ✓ Créer un JPanel « formPanel » et ajouter tous les composants


    JPanel formPanel =new JPanel();
    formPanel.setLayout(new GridLayout(4,1,5,5));
    // fix a transparent border
    formPanel.setOpaque(false);
    //add all components to the form panel
    formPanel.add(lbFirstName);
    formPanel.add(tfFirstName);
    formPanel.add(lbLastName);
    formPanel.add(tfLastName);
    ✓ Créer un label « lbWelcom »
    JLabel lbWelcom =new JLabel("Welcom");

    ✓ Créer les deux boutons JButton « Ok » et « Clear »


    //create a button ok
    JButton btnOk = new JButton("OK");
    //create a button clear
    JButton btnClear = new JButton("Clear");

    ✓ Créer un JPanel « bntPanel » pour ajouter les deux boutons « Ok » et « Clear »


    dans le JFrame
    JPanel bntPanel =new JPanel();
    bntPanel.setLayout(new GridLayout(1,2,5,5));
    bntPanel.setOpaque(false);
    bntPanel.add(btnOk);
    bntPanel.add(btnClear);

    ✓ Créer un JPanel principal « mainPanel » pour ajouter tous les composants


    (JComponant et JPanel) dans un seul JFrame.
    // Create the main panel
    //BorderLayout divide the frame to: north/west/center/east/south
    JPanel mainPanel = new JPanel();
    mainPanel.setLayout(new BorderLayout());
    mainPanel.setBackground(new Color(128,128,255));
    //add the form panel in the north of the main panel
    mainPanel.add(formPanel, BorderLayout.NORTH);
    //add the label welcome on the center
    mainPanel.add(lbWelcom, BorderLayout.CENTER);
    //add the JPanel of button on the south
    mainPanel.add(bntPanel, BorderLayout.SOUTH);
    mainPanel.setOpaque(false); // fix a transparent border
    //add a border to the main JPanel
    mainPanel.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));

    Enseignante: Dr. Ahlem ABOUD


    6
    7 Module : IHM - Interface Homme Machine

    ✓ L’implantation des mécanismes de gestion des événements pour le bouton


    « OK », en cliquant sur ce bouton le contenu de deux « JTextField » First
    Name et Last Name doit être afficher sur le JLabel « welcome ».
    btnOk.addActionListener( new ActionListener(){
    @Override
    public void actionPerformed(ActionEvent e) {
    lbWelcom.setText(tfFirstName.getText()+" "+tfLastName.getText());
    }
    }
    );

    ✓ L’implantation des mécanismes de gestion des événements pour le bouton


    « Clear », en cliquant sur ce bouton le contenu de JLabel « welcome » doit être
    supprimer.
    btnClear.addActionListener(new ActionListener(){
    @Override
    public void actionPerformed(ActionEvent e) {
    lbWelcom.setText(" ");
    }
    });

    ✓ Ajouter le panel principal « mainPanel » dans l’interface JFrame


    add(mainPanel);

    ✓ Créer une méthode de test « main » pour afficher l’interface graphique

    public static void main(String[] args) throws Exception {


    MainJFrame mainFrame=new MainJFrame();
    mainFrame.initialize();

    Enseignante: Dr. Ahlem ABOUD


    7
    8 Module : IHM - Interface Homme Machine

    Enseignante: Dr. Ahlem ABOUD


    8
    9 Module : IHM - Interface Homme Machine

    Enseignante: Dr. Ahlem ABOUD


    9
    10 Module : IHM - Interface Homme Machine

    Enseignante: Dr. Ahlem ABOUD


    10
    11 Module : IHM - Interface Homme Machine

    Enseignante: Dr. Ahlem ABOUD


    11
    12 Module : IHM - Interface Homme Machine

    Enseignante: Dr. Ahlem ABOUD


    12

    Vous aimerez peut-être aussi