Introduction Etape 3 Etape 5

Tutoriel : Construction d'une applet

Etape 4 : Personnalisation de l'interface utilisateur de votre applet

Maintenant que l'expert applet a généré l'ossature de l'applet, vous allez la personnaliser au cours des étapes suivantes à l'aide de divers composants.

  1. Sélectionnez l'onglet Conception en bas du volet contenu pour passer à la vue conception de GoodEveningApplet.java. Le concepteur d'interface utilisateur apparaît dans le volet contenu, la palette de composants en haut au-dessus de lui et l'inspecteur à sa droite. Vous allez maintenant utiliser la palette des composants pour ajouter des composants à votre interface utilisateur et l'inspecteur pour modifier les propriétés et ajouter des événements à votre code. Le volet structure contient maintenant une arborescence de composants ayant des dossiers comme Interface utilisateur, Menu et Autre.

    Concepteur d'interface utilisateur

  2. Changez la disposition de this en BorderLayout, dans l'inspecteur :
    1. Sélectionnez this dans l'arborescence des composants du volet structure.
    2. Cliquez avec le bouton droit sur la propriété layout, dans la page Propriétés de l'inspecteur. Sélectionnez BorderLayout dans la liste déroulante des dispositions.

    BorderLayout organise les composants d'un conteneur en zones appelées North, South, East, West et Center (Nord, Sud, Est, Ouest et Centre). Utilisez BorderLayout quand vous voulez forcer des composants à se placer contre un ou plusieurs bords d'un conteneur ou remplir le milieu de ce conteneur avec un composant. C'est également la disposition que vous utiliserez pour qu'un composant seul occupe tout son conteneur.

    Attention : A tout moment, si vous choisissez XYLayout (une disposition personnalisée de Borland) dans la liste déroulante de l'inspecteur, JBuilder ajoute l'instruction import suivante au code source : com.borland.jbcl.layout.*. Cette instruction import n'est pas supprimée lorsque vous changez pour une disposition plus portable avant le déploiement. Si vous ne supprimez pas cette instruction import, votre applet déployée ne s'exécutera pas, car elle sera bloquée par l'importation des classes de disposition de la jbcl. Vous devez supprimer l'instruction import manuellement avant le déploiement.

    Le concepteur d'interface utilisateur de JBuilder utilise un gestionnaire de disposition par défaut pour chaque conteneur, généralement la disposition du conteneur AWT parent. Dans l'AWT Java, les panneaux utilisent tous FlowLayout par défaut. Pour voir le gestionnaire de disposition du panneau, cliquez sur l'icône de développement dans l'arborescence des composants afin de développer la sélection. Le gestionnaire de disposition s'affiche dans l'arborescence en tant qu'élément, juste au-dessous du conteneur parent.

    Voir aussi :

  3. Sélectionnez l'onglet AWT de la palette des composants en haut du concepteur d'interface utilisateur. Vous aurez probablement besoin de faire défiler la palette des composants vers la droite pour trouver l'onglet AWT. Les composants AWT, contrairement aux composants Swing, sont supportés par la plupart des navigateurs.

    Attention : Le concepteur d'interface utilisateur s'ouvre toujours avec les composants Swing sur la première page de la palette. Si vous sélectionnez par erreur ces composants Swing, votre applet ne fonctionnera pas dans les navigateurs. Faites donc bien attention à choisir les composants de la page AWT de la palette.

  4. Maintenant, vous allez ajouter deux panneaux au panneau this. Le panneau du haut contiendra la liste déroulante des langues à sélectionner et un libellé pour identifier cette liste. Le panneau du bas contiendra "Good Evening" en différentes langues.
    1. Choisissez l'onglet AWT dans la palette de composants.
    2. Faites un Maj+Clic sur le composant AWT Panel dans la palette de composants. Maj+Clic vous permet de placer plusieurs fois le composant sans avoir à le sélectionner à chaque fois dans la palette. Vous pouvez alors ajouter plusieurs panneaux à this.
    3. Astuce : Placez le curseur sur un composant de la palette pour voir son nom s'afficher dans une bulle d'aide.

    4. Cliquez deux fois sur this dans l'arborescence des composants du volet structure. panel1 et panel2 sont ajoutés sous this dans l'arborescence des composants.
    5. Cliquez sur l'outil de sélection Flèche de sélection, à gauche de la palette de composants, pour désactiver la sélection des composants.
    6. Vérifiez la propriété constraints des panneaux dans l'inspecteur. Pour le panneau du haut, elle doit être North, et pour celui du bas, Center. Pour vérifier la propriété constraints,
      1. Sélectionnez un panneau dans l'arborescence des composants ou dans le concepteur.
      2. Assurez-vous que, dans l'inspecteur, la propriété constraints est définie par North pour le panneau du haut et par Center pour le panneau du bas. Sinon, cliquez sur la colonne située à droite de la propriété constraints et choisissez la contrainte appropriée dans la liste déroulante.
    7. Renommez le panneau du haut upper.
      1. Sélectionnez le panneau du haut, dans l'arborescence des composants ou dans le concepteur, et double-cliquez dans l'inspecteur sur la colonne située à droite de la propriété name.
      2. Entrez upper et appuyez sur Entrée.

      Astuce : Vous pouvez aussi renommer un composant en cliquant dessus avec le bouton droit dans l'arborescence des composants et en sélectionnant Renommer dans le menu.

    8. Renommez le panneau du bas lower.

  5. Changez dans l'inspecteur la couleur du fond de upper en Orange :
    1. Sélectionnez upper dans l'arborescence des composants ou dans le concepteur.
    2. Cliquez dans l'inspecteur sur la colonne située à droite de la propriété background.
    3. Cliquez sur la flèche vers le bas pour ouvrir la liste déroulante des couleurs, et sélectionnez Orange dans cette liste.
  6. Changez la couleur du fond de lower en Magenta.
  7. Changez la disposition de lower en CardLayout. Le panneau CardLayout contiendra 5 panneaux, chacun avec "Good Evening" dans une langue différente.

    CardLayout place les composants (généralement des panneaux) les uns par dessus les autres, comme un jeu de cartes. Vous n'en voyez qu'un à la fois, et vous pouvez les faire permuter en utilisant un autre contrôle pour sélectionner celui du dessus. CardLayout est généralement associé à un composant de contrôle, comme une case à cocher ou une liste. L'état du composant de contrôle détermine le composant CardLayout qui s'affiche. L'utilisateur fait son choix en sélectionnant quelque chose dans l'interface utilisateur.

  8. Ajoutez 5 panneaux (panneaux 1 à 5) au panneau lower en utilisant Maj+Clic lorsque vous sélectionnez le composant Panel. Chacun de ces panneaux contiendra "Good Evening" dans une langue différente. Choisissez l'outil de sélection pour désactiver la sélection multiple du composant Panel.

    Remarque : Si vous lâchez le composant au mauvais endroit, sélectionnez-le dans l'arborescence des composants et appuyez sur Suppr. Puis, ajoutez-le à nouveau.

  9. Changez la disposition des panneaux 1 à 5 en BorderLayout.
    1. Utilisez Maj+Clic ou Ctrl+Clic pour sélectionner les panneaux 1 à 5 dans l'arborescence des composants.
    2. Dans l'inspecteur, changez la valeur de la propriétélayout en BorderLayout. Désormais, les 5 panneaux ont tous la disposition BorderLayout.
    3. Sélectionnez un autre composant dans l'arborescence ou dans le concepteur pour désélectionner tous les panneaux.
  10. Dans l'inspecteur, choisissez une couleur différente comme couleur du fond de chacun des 5 panneaux.

    Astuce : Cliquez sur le bouton Points de suspension, à droite de la propriété background dans l'inspecteur, et utilisez les glissières pour créer une couleur.

  11. Enregistrez le fichier et le projet.
  12. Cliquez avec le bouton droit sur GoodEveningApplet.html et sélectionnez Exécuter. Quand l'applet s'exécute dans l'appletviewer de Sun, vous voyez uniquement upper et le panneau du dessus dans la disposition CardLayout. Les panneaux des autres langues s'afficheront plus tard, lorsque vous ajouterez la liste déroulante et des événements aux éléments de cette liste.
  13. Quittez l'applet.
  14. Fermez le volet message en cliquant avec le bouton droit sur l'onglet GoodEveningApplet et sélectionnez Retirer l'onglet "GoodEveningApplet".

Introduction Etape 4 Etape 6

Tutoriel : Construction d'une applet

Etape 5 : Ajout de composants AWT à votre applet

Vous allez maintenant utiliser la palette des composants pour ajouter un composant Label et un composant Choice au panneau du haut de votre conception, upper.

  1. Sélectionnez l'onglet AWT de la palette des composants et cliquez sur le composant Choice.  
  2. Placez ce composant dans le panneau orange en haut de votre conception, upper. Utilisez l'une des méthodes suivantes : Notez que choice1 est ajouté à upper dans l'arborescence des composants.
  3. Sélectionnez le composant Label Label dans la page AWT de la palette et placez-le dans upper, à gauche du composant Choice. Notez que label1 est ajouté à upper dans l'arborescence des composants.
  4. Sélectionnez label1 dans l'arborescence des composants et effectuez les étapes suivantes :
    1. Double-cliquez sur la colonne de droite de la propriété text, dans l'inspecteur, pour mettre en évidence le texte existant. Entrez Choisissez une langue et appuyez sur Entrée. "Choisissez une langue" apparaît maintenant dans le libellé, à côté du composant Choice.
    2. Cliquez sur la colonne de droite de la propriété font pour définir la fonte. Cliquez sur le bouton Points de suspension pour ouvrir la boîte de dialogue.
    3. Choisissez Serif dans la liste des fontes et cochez Gras. Entrez 20 dans la boîte Taille. Cliquez sur OK.
    4. Cliquez dans l'inspecteur sur la colonne située à droite de la propriété foreground pour définir la couleur du texte. Cliquez sur la flèche vers le bas et sélectionnez Blue dans la liste déroulante des couleurs.

    Votre conception doit maintenant ressembler à ceci :

  5. Ajoutez un libellé AWT à chacun des panneaux (panneaux 1 à 5) du panneau CardLayout inférieur. Chacun de ces libellés contiendra "Good Evening" dans une langue différente.
  6. Pour chaque libellé, traduisez "Good Evening" dans une langue différente. D'abord, sélectionnez le libellé au-dessous de chaque panneau, dans l'arborescence des composants, et entrez "Good Evening" dans la langue appropriée comme valeur de la propriété text, dans l'inspecteur. Utilisez les langues suivantes ou choisissez les vôtres :
  7. Sélectionnez label2 à label6 en faisant un Ctrl+Clic et changez les propriétés font de tous les libellés en Gras et en taille 24. Changez la propriété foreground des libellés en Black. Cliquez sur un composant dans l'arborescence des composants ou dans le concepteur d'interface utilisateur pour désélectionner les libellés.
  8. Changez la position de chaque libellé en changeant dans l'inspecteur la propriété constraints en North, South, East, West ou Center, comme suit :

    Remarque : Remarquez la position des libellés dans leur panneau BorderLayout respectif. Center remplit tout le panneau, alors que North, South, East et West remplissent seulement une partie du panneau.

  9. Changez le gestionnaire de disposition de panel5 en FlowLayout, la disposition que vous avez utilisée pour le panneau upper. Notez que le libellé "Gudday, Mate" se place au haut du milieu du panneau. FlowLayout est le bon choix lorsque vous voulez disposer en lignes vos composants. Vous ajouterez ensuite un bouton que FlowLayout placera sur la même ligne que le libellé.

    FlowLayout arrange les composants de gauche à droite sur la ligne. Lorsque la ligne est pleine, les composants restants se placent sur une nouvelle ligne.

  10. Cliquez sur le composant AWT Button Bouton AWT et lâchez-le à gauche du libellé "Gudday, Mate". Essayez de déplacer le bouton dans le concepteur. Vous verrez que FlowLayout le ramène toujours sur la ligne où se trouve le libellé. La conception de votre applet pour panel5 doit maintenant ressembler à ceci :

  11. Choisissez Fichier|Tout enregistrer pour enregistrer le projet.

Pour plus d'informations sur les dispositions et leurs comportements, voir "Utilisation des gestionnaires des dispositions" et "Tutoriel : Dispositions imbriquées".

Introduction Etape 4 Etape 6