Ajout de fonctionnalités aux boutons Un guide pour débutants

Précédent ◈ Suivant

Une contribution de Saleem Gul et Tomas Pavek, maintenu par Ruth Kusterer

Ce tutoriel débutant vous apprend comment construire une interface graphique simple avec des fonctionnalités back-end. Vous apprendrez à développer une interface utilisateur graphique et comment ajouter des fonctionnalités aux boutons et champs utilisés. Une compréhension de base du langage de programmation Java est nécessaire.

Ce document vous présente les concepts fondamentaux de la création graphique et prend l'approche adoptée dans de nombreux livres d'auto-apprentissage. Nous travaillerons dans la mise en page et la conception d'une interface graphique et ajouter quelques boutons et zones de texte. Les zones de texte seront utilisés pour recevoir une entrée d'utilisateur et aussi pour afficher la sortie du programme. Le bouton lancera la fonctionnalité intégrée à l'avant. L'application que nous créons sera une calculatrice simple mais fonctionnelle.

Durée prévue: 15 minutes

Exercices Tutoriel

  • L'utilisation doit avoir des compétences de base dans le langage Java.
  • L'utilisateur doit être à l'aise avec l'utilisation de l'EDI NetBeans.
  • L'utilisateur doit déjà avoir terminé le didacticiel GUI du bâtiment dans l'EDI NetBeans 6.0.

Logiciel nécessaire pour ce tutoriel

Le NetBeans GUI Builder est livré avec NetBeans IDE, et aucune configuration particulière est nécessaire.

Assurez-vous que vous avez les logiciels suivants installés sur votre ordinateur:

Exercice 1: Création d'un projet

La première étape consiste à créer un projet, nous nommerons notre NumberAddition du projet.

Choisissez Fichier> Nouveau projet. Alternativement, vous pouvez cliquer sur l'icône Nouveau projet dans la barre d'outils IDE.

Dans le volet Catégories, sélectionnez le nœud général. Dans le volet Projets, choisissez Java Application. Cliquez sur Suivant.

Entrez NumberAddition dans le champ Nom du projet et spécifier un chemin par exemple dans votre répertoire personnel comme l'emplacement du projet.

Assurez-vous que la case à cocher Définir comme projet principal est sélectionné. Désélectionnez Créer la classe principale si elle est sélectionnée.

Exercice 2: Construire la fin avant

Créer un conteneur JFrame

  • Dans la fenêtre Projets, cliquez droit sur le nœud NumberAddition et choisissez Nouveau> JFrame Form.
  • Entrez NumberAdditionUI comme le nom de classe.
  • Entrez my.NumberAddition comme le paquet.

    L'EDI crée la forme NumberAdditionUI et la classe NumberAdditionUI dans l'application NumberAdditionUI.java et ouvre le formulaire NumberAdditionUI dans l'interface graphique Builder. Notez que le paquet my.NumberAddition remplace le package par défaut.

    Ajout de composants: Faire de l'extrémité avant

    Ensuite, nous allons remplir avant la fin de notre application avec un JPanel, et trois JLabels, JTextFields et JButton chacun. Le JFrame avec les composants mentionnés ci-dessus se présente comme suit.

    Ajout de fonctionnalités aux boutons Un guide pour débutants

    Sélectionnez Windows> Palette pour ouvrir la palette si vous ne le voyez pas. Vous utilisez la palette pour faire glisser et déposer les composants de l'interface utilisateur dans la zone de conception.
    1. Commencez par sélectionner un JPanel dans la palette et déposez-le sur le JFrame.
    2. Alors que le JPanel est mis en surbrillance, allez à la fenêtre Propriétés et cliquez sur le bouton « » à côté de la frontière de choisir un style de bordure.
    3. Dans la boîte de dialogue Bordure, sélectionnez Intitulée Border dans la liste, et tapez Numéro Ajout dans le champ Titre. Cliquez sur OK pour enregistrer les modifications et quitter la boîte de dialogue.
    4. Vous devriez maintenant voir un JFrame vide intitulé qui dit Nombre Addition comme dans la capture d'écran. Regardez la capture d'écran et d'ajouter trois JLabels, trois JTextFields et trois JButton que vous voyez ci-dessus.

    Renommant les composants

    Dans cette étape, nous allons renommer les composants qui viennent d'être ajoutés à la JFrame.

    1. Double-cliquez sur jLabel1 et modifiez la propriété text First Nombre
  • Double-cliquez sur jLabel2 et changer le texte du second numéro
  • Double-cliquez sur jLabel3 et modifier le texte Résultat
  • Double-cliquez sur jButton1 et le renommer Effacer

  • Double-cliquez sur jButton2 et renommez Ajouter

  • Double-cliquez sur jButton3 et renommez Quitter

    Votre GUI fini devrait ressembler à ceci:

    Ajout de fonctionnalités aux boutons Un guide pour débutants

    Exercice 3: Ajout de fonctionnalités

    Dans cet exercice, nous allons donner des fonctionnalités à Ajouter, Effacer et boutons de sortie. Les boîtes jTextField1 et jTextField2 seront utilisés pour l'entrée d'utilisateur et jTextField3 pour la sortie du programme - ce que nous créons est une calculatrice très simple. Commençons.

    Faire le travail Bouton Quitter

    Afin de donner fonction aux boutons, il faut attribuer un gestionnaire d'événements à chaque, en réponse à un événement. Dans notre cas, nous voulons savoir quand le bouton est enfoncé, que ce soit par un clic de souris ou via le clavier. Nous allons donc utiliser ActionListener répondre à ActionEvent.
    Faites un clic droit sur le bouton Quitter. Dans le menu contextuel choisissez Events -> Action -> ActionPerformed. Notez que le menu contient beaucoup plus d'événements que vous pouvez répondre à! Lorsque vous sélectionnez l'événement actionPerformed, l'IDE ajoutera automatiquement un ActionListener au bouton de sortie et générer une méthode de gestionnaire pour le traitement de la méthode actionPerformed de l'auditeur.
  • L'IDE ouvrira la fenêtre de code source et faites défiler à l'endroit où vous implémentez l'action que vous voulez que le bouton faire lorsque le bouton est enfoncé (soit par un clic de souris ou via le clavier). Votre fenêtre de code source doit contenir les lignes suivantes:
  • Nous allons maintenant ajouter du code pour ce que nous voulons que le bouton Quitter pour faire. Vous devrez taper System.exit (0); à l'aide du code ci-dessus, en remplaçant la ligne de suggérer. Votre code bouton Quitter fini devrait ressembler à ceci:

    • Faire le travail Bouton Effacer

    1. Cliquez sur l'onglet Conception en haut de votre zone de travail pour revenir à la conception de formulaire
  • Faites un clic droit sur le bouton Effacer (jButton1). Dans le menu contextuel sélectionnez Événements -> Action -> actionPerformed.

  • Nous allons avoir le bouton Effacer effacer tout le texte des jTextFields. Pour ce faire, vous allez ajouter un peu de code comme ci-dessus. Votre code source fini devrait ressembler à ceci:

    • Le code ci-dessus modifie le texte dans les trois de nos jTextFields à rien, en substance, il est en remplacant texte existant par un blanc.

    Faire fonctionner le bouton Ajouter

    Le bouton Ajouter effectue trois actions.
    1. Il va accepter l'entrée d'utilisateur à partir jTextField1 et jTextField2 et convertir l'entrée d'un type String à un flotteur.
    2. Il sera ensuite effectuer une addition des deux nombres et enfin,
    3. il convertit la somme à un type String et placez-le dans jTextField3.
    Commençons!
    1. Cliquez sur l'onglet Conception en haut de votre zone de travail pour revenir à la conception de formulaire.
    2. Faites un clic droit sur le bouton Ajouter (jButton3). Dans le menu contextuel, sélectionnez Événements -> Action -> actionPerformed
    3. Nous allons ajouter un peu de code pour que notre travail bouton Ajouter. Le code source fini doit ressembler à ceci:

    Notre programme est maintenant terminée, nous pouvons maintenant construire et l'exécuter pour le voir en action.

    Exercice 4: Exécution du programme

    La dernière étape consiste à construire et exécuter le programme.
    1. Cliquez sur Construire dans le menu principal et choisissez -> Générer le projet principal.
    2. Lorsque la sortie de la construction est terminée, cliquez sur Exécuter dans le menu principal et choisir -> Exécuter le projet principal
    3. Si vous obtenez une fenêtre vous informant que le projet NumberAddition ne dispose pas d'un ensemble principal de la classe, alors vous devez sélectionner my.NumberAddition.NumberAdditionUI comme la classe principale dans la même fenêtre, puis cliquez sur le bouton OK.
    4. Votre programme créé est maintenant en cours d'exécution.

    Dans ce tutoriel, vous avez appris comment vous brancher à la fonctionnalité des composants de l'interface graphique avec l'interface graphique NetBeans Builder Matisse.

    Comment fonctionne de gestion des événements

    Ce tutoriel a montré comment réagir face à un événement simple bouton. Il y a beaucoup plus d'événements que vous pouvez avoir votre répondre à l'application. L'IDE peut vous aider à trouver la liste des événements disponibles peuvent gérer vos composants de l'interface graphique:
    Retour au fichier NumberAdditionUI.java dans l'éditeur. Cliquez sur l'onglet Conception pour voir la mise en page de l'interface graphique dans l'interface graphique Builder Matisse.
  • Clic droit sur un élément graphique, et sélectionnez des événements dans le menu contextuel. Pour l'instant, il suffit de parcourir le menu pour voir ce qui est là, vous n'avez pas besoin de choisir quoi que ce soit.
  • Vous pouvez également sélectionner Propriétés dans le menu Fenêtre. Dans la fenêtre Propriétés, cliquez sur l'onglet Événements. Dans l'onglet Evénements, vous pouvez afficher et modifier les gestionnaires d'événements associés à la composante GUI active.

  • Vous pouvez avoir votre application répondre aux pressions sur les touches, simples, doubles et triples clics de souris, le mouvement de la souris, la taille de la fenêtre et les changements de focus. Vous pouvez générer des gestionnaires d'événements pour tous dans le menu des événements. L'événement le plus courant que vous utiliserez est un événement d'action. (Découvrez les meilleures pratiques pour la gestion des événements de Java Events Tutoriel de Sun).

    • Comment fonctionne la gestion des événements ne? Chaque fois que vous sélectionnez un événement dans le menu de l'événement, l'IDE crée automatiquement un écouteur d'événement soi-disant pour vous, et les crochets jusqu'à votre composant. Suivez les étapes ci-dessous pour voir comment fonctionne la gestion des événements.
    Retour au fichier NumberAdditionUI.java dans l'éditeur. Cliquez sur l'onglet Source pour voir la source de l'interface graphique.
  • Faites défiler vers le bas et notez les méthodes jButton1ActionPerformed (). jButton2ActionPerformed (). et jButton3ActionPerformed () que vous venez de mise en œuvre. Ces méthodes sont appelées gestionnaires d'événements.
  • Maintenant, faites défiler jusqu'à une méthode appelée initComponents (). Si vous ne voyez pas cette méthode, cherchez une ligne qui indique le code généré; cliquez sur le signe + à côté d'étendre la méthode initComponents () effondrés.
  • Tout d'abord, notez le bloc bleu autour de la méthode initComponents (). Ce code a été généré automatiquement par l'EDI et vous ne pouvez pas le modifier.

  • Dans initComponents (). défiler vers le bas à l'endroit où il dit que c'est l'endroit où un objet écouteur d'événement est ajouté au composant GUI; dans ce cas, vous enregistrez un ActionListener au jButton3. L'interface ActionListener a une méthode actionPerformed prenant objet ActionEvent qui est mis en œuvre simplement en appelant votre gestionnaire d'événements jButton3ActionPerformed. Le bouton est maintenant à l'écoute des événements d'action. Chaque fois que l'on appuie un ActionEvent est généré et transmis à la méthode actionPerformed de l'auditeur qui à son tour exécute le code que vous avez fourni dans le gestionnaire d'événements pour cet événement.

    • D'une manière générale, pour être en mesure de répondre, doit enregistrer chaque composant graphique interactif à un écouteur d'événement et doit mettre en œuvre un gestionnaire d'événements. Comme vous pouvez le voir, NetBeans IDE poignées brancher l'écouteur d'événement pour vous, donc vous pouvez vous concentrer sur la mise en œuvre de la logique commerciale réelle qui devrait être déclenché par l'événement.

    Prochaines étapes

    Articles Liés

    Précédent ◈ Suivant