< Précédent | Suivant >

Leçon 1.2 : Ajout et agencement de la table des employés

Dans cette leçon, vous allez utiliser l'éditeur visuel Java pour ajouter un JScrollPane et une JTable à l'application. Dans des exercices ultérieurs, vous programmerez la JTable de sorte qu'elle obtienne ses données d'un service Web qui renvoie la liste de tous les employés enregistrés dans l'annuaire de la société.

Après avoir ajouté la JTable, vous utiliserez la vue de conception de l'éditeur visuel Java pour personnaliser l'agencement de la JTable conformément aux spécifications suivantes :

  • Etendre la JTable à trois cellules horizontalement et deux cellules verticalement
  • Ajouter un encart gauche de 15 pixels
  • Renommer la JTable en employeesTable.

Ouvrir le fichier DirectoryApp.java dans l'éditeur visuel Java

Pour ouvrir le fichier DirectoryApp.java dans l'éditeur visuel Java, procédez comme suit :
  1. Dans la vue Packages de la perspective Java, développez la branche du projet MyDirectory et celle du package directory.client.
  2. Cliquez avec le bouton droit sur le fichier DirectoryApp.java et sélectionnez Ouvrir avec > Editeur visuel. L'éditeur visuel Java charge la classe Java et affiche la conception dans la zone graphique du canevas.
Conseil :
  • Pour changer l'apparence utilisée par l'éditeur visuel Java, sélectionnez Fenêtre > Préférences > Java > Editeur visuel et spécifiez une apparence pour Swing. La nouvelle préférence prendra effet à la prochaine ouverture de la classe. Le présent tutoriel utilise l'apparence Windows.
  • Pour que l'éditeur visuel soit l'éditeur par défaut de tous les fichiers Java, vous pouvez cliquer sur Fenêtre > Préférences et accéder à la page Plan de travail > Associations de fichiers pour définir votre préférence.

Ajouter une JTable sur un JScrollPane

La fenêtre principale de DirectoryApp.java utilise un JFrame doté d'un JPanel pour son panneau de contenu principal. Le JPanel de notre application est intitulé jContentPane. Le jContentPane a été configuré pour l'utilisation d'un type de gestionnaire d'agencement appelé GridBagLayout. Le GridBagLayout est un puissant schéma d'agencement basé sur une grille de cellules qui peuvent être occupées par des composants visuels. Pour faciliter l'utilisation de GridBagLayout, l'éditeur visuel java affiche les bordures de grille. Il affiche également des marqueurs de positionnement lorsque de nouveaux composants sont placés sur la grille, ainsi que des poignées sur les composants que vous redimensionnez ou déplacez dans le GridBagLayout.

Pour ajouter la table des employés (javax.swing.JTable) à l'interface utilisateur DirectoryApp.java, procédez comme suit :
  1. Cliquez avec le bouton droit sur le jContentPane dans la vue de conception ou dans la vue Beans Java et sélectionnez Afficher la grille. Un trait pointillé rouge affiche la bordure de la grille et des cercles numérotés de couleur bleue indiquent les numéros de ligne et de colonne. Par exemple, vous remarquerez que le bouton New occupe la cellule située à l'intersection de la ligne 1 (axe y de la grille) et de la colonne 3 (axe x de la grille).

    Grille sur canevas graphique

  2. Dans la palette de l'éditeur visuel Java, sélectionnez le composant Swing JTable dans JScrollPane icône JTable dans JScrollPane. Vous le trouverez dans le tiroir Composants Swing de la palette.
    Conseil : Par défaut, la palette est réduite sur le côté droit de la zone de conception. Vous pouvez la redimensionner et la déplacer.
  3. Amenez le pointeur de la souris sur la cellule de la colonne 0 et de la ligne 1 de la grille :

    Dépôt sur la grille

    • Lors du déplacement du pointeur de la souris sur la grille, le pointeur affiche deux carrés numérotés qui indiquent les coordonnées x et y de la grille en fonction de l'emplacement du pointeur.
    • Si le pointeur est placé directement sur une bordure de grille, il se peut que de nouvelles lignes et colonnes soient créées ; les lignes et colonnes existantes sont donc renumérotées. Dans ce cas, des carrés jaunes sur le pointeur, des barres jaunes entre les lignes de quadrillage et des intitulés de colonne ou de ligne jaunes indiquent ce comportement et révèlent l'impact qu'aura le positionnement de l'objet à cet endroit.
  4. Cliquez avec le bouton gauche de la souris pour insérer le JScrollPane et la JTable dans la cellule située à la colonne 0, ligne 1 :

    Table déposée sur la grille

Etendre le JScrollPane et la JTable sur plusieurs colonnes et lignes de la grille

A présent, nous voulons que le JScrollPane (et sa JTable enfant) s'étendent sur trois colonnes et deux lignes de la grille pour améliorer l'espacement et le redimensionnement. Voici comment procéder :
  1. Sélectionnez le JScrollPane dans la zone de conception ou la vue Beans Java (il doit encore être sélectionné, car vous venez de l'ajouter). Notez les petits carrés verts sur le côté droit et en bas du JScrollPane. Vous allez utiliser ces poignées de redimensionnement pour étendre le JScrollPane sur plusieurs colonnes et plusieurs lignes de la grille.
  2. Cliquez sur la poignée verte de la bordure droite du JScrollPane (ne relâchez pas le bouton de la souris).
  3. Faites glisser le pointeur de la souris vers la droite jusqu'à ce que les coordonnées indiquent colonne 2, ligne 1. Un ombrage gris foncé indique également les cellules que le composant occupera lorsque vous relâcherez le bouton de la souris.

    Table étirée pour s'étendre sur trois colonnes

  4. Relâchez le bouton de la souris. Le JScrollPane s'étend désormais sur trois colonnes.
  5. Répétez le même processus pour faire glisser la poignée inférieure du JScrollPane jusqu'à ce que ce dernier s'étende sur la ligne 2 de la grille :

    Table étirée pour s'étendre sur deux lignes

Personnaliser l'espacement du JScrollPane dans le GridBag

Le gestionnaire GridBagLayout permet également de définir diverses contraintes pour personnaliser encore plus la disposition. Vous pouvez par exemple spécifier les contraintes suivantes :
  • ancre : une orientation de type ancre peut être donnée à un composant dans sa cellule, ce qui a une incidence sur la façon dont le composant se déplace lorsque l'application est redimensionnée par un utilisateur. Par exemple, un composant peut être ancré dans sa partie supérieure gauche, dans sa partie centrale gauche, au centre ou dans sa partie inférieure droite.
  • remplissage : un composant peut occuper tous l'espace disponible dans sa ou ses cellules horizontalement et/ou verticalement.
  • encarts : un composant peut recevoir son propre remplissage en haut, en bas, à gauche et à droite afin d'assurer un espacement entre lui-même et le bord de la grille.

Pour personnaliser l'ancre, le remplissage et les encarts du JScrollPane, procédez comme suit :

  1. Cliquez avec le bouton droit sur le JScrollPane dans la vue de conception ou dans la vue Beans Java et sélectionnez Personnaliser la disposition.

    Menu contextuel du jScrollPane

    Conseil : La boîte de dialogue Personnalisation de la présentation peut rester ouverte lorsque vous sélectionnez et modifiez l'agencement de différents composants. Vous pouvez ouvrir cette boîte de dialogue à tout moment en cliquant sur le bouton correspondant de la barre d'outils :

    Icône Personnaliser la disposition

  2. Sous l'onglet Composant de la boîte de dialogue, vérifiez que le bouton Ancre centre est celui qui est sélectionné.
  3. Assurez-vous que les deux boutons Remplissage horizontal et Remplissage vertical sont actionnés.
  4. Ajoutez un encart gauche de 15 (pixels) pour que l'espacement à gauche du JScrollPane soit similaire à celui des autres composants visuels de l'application.

    Boîte de dialogue Personnalisation de la présentation

    Par exemple, la table est maintenant alignée avec le libellé Filter.

    Boîte de dialogue Personnalisation de la présentation

Renommer le nouveau JTable et le configurer pour la sélection d'une seule ligne à la fois

Dans la mesure où vous devrez continuer à travailler sur cette table au cours d'autres leçons, il est utile de renommer l'instance JTable correspondante et sa méthode d'accès get. Pour renommer la table, procédez comme suit :
  1. Dans la vue Beans Java, cliquez avec le bouton droit sur le composant jTable et sélectionnez Renommer la zone.

    Menu contextuel du jTable

  2. Entrez employeesTable et cliquez sur OK. La JTable est désormais intitulée employeesTable et la méthode qui permet de l'instancier est getEmployeesTable.
  3. Configurez la table afin qu'elle autorise la sélection d'une seule ligne à la fois :
    1. Sélectionnez employeesTable dans la vue de conception.
    2. Dans la vue Propriétés, sélectionnez la propriété selectionMode et choisissez la valeur SELECTION_UNIQUE.

      Vue Propriétés montrant le choix de la valeur SELECTION_UNIQUE

    3. Sauvegardez le fichier DirectoryApp.java.

Récapitulatif de la leçon

Dans cette leçon, vous avez appris à utiliser l'éditeur visuel pour ajouter une table à une interface utilisateur existante. Vous avez ensuite appris à personnaliser son agencement, son positionnement et son espacement.

< Précédent | Suivant >