Tutoriel : Construction d'une 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.
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
.
this
en BorderLayout
, dans l'inspecteur :
this
dans l'arborescence des composants du volet structure.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 :
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.
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.
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.
Astuce : Placez le curseur sur un composant de la palette pour voir son nom s'afficher dans une bulle d'aide.
this
dans l'arborescence des composants du volet structure. panel1
et panel2
sont ajoutés sous this
dans l'arborescence des composants.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
,
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.upper
.
name
.lower
.
upper
en Orange :
upper
dans l'arborescence des composants ou dans le concepteur.background
.lower
en Magenta.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.
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.
BorderLayout
.
layout
en BorderLayout
. Désormais, les 5 panneaux ont tous la disposition BorderLayout
.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.
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.Tutoriel : Construction d'une 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
.
Choice
. upper
. Utilisez l'une des méthodes suivantes :
upper
dans l'arborescence des composants.upper
dans le concepteur d'interface utilisateur.choice1
est ajouté à upper
dans l'arborescence des composants.
Label
upper
, à gauche du composant Choice
. Notez que label1
est ajouté à upper
dans l'arborescence des composants.label1
dans l'arborescence des composants et effectuez les étapes suivantes :
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
.font
pour définir la fonte. Cliquez sur le bouton Points de suspension pour ouvrir la boîte de dialogue.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 :
CardLayout
inférieur. Chacun de ces libellés contiendra "Good Evening" dans une langue différente.text
, dans l'inspecteur. Utilisez les langues suivantes ou choisissez les vôtres :
label2
: Good Evening (Anglais)label3
: Guten Abend (Allemand)label4
: Bonsoir (Français)label5
: God Kväll (Suédois)label6
: Gudday, Mate (Australien)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.constraints
en North, South, East, West ou Center, comme suit :
label2
: Northlabel3
: Southlabel4
: Eastlabel5
: Westlabel6
: CenterRemarque : 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.
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.
Button
FlowLayout
le ramène toujours sur la ligne où se trouve le libellé. La conception de votre applet pour panel5
doit maintenant ressembler à ceci :
Pour plus d'informations sur les dispositions et leurs comportements, voir "Utilisation des gestionnaires des dispositions" et "Tutoriel : Dispositions imbriquées".