Tutoriel : Construction d'une application

Ce tutoriel vous permet de vous familiariser avec l'environnement de développement intégré (EDI) de JBuilder. Le tutoriel montre comment :

Pour plus d'informations sur les conventions de la documentation, voir "Conventions utilisées par la documentation".

Le code source complet se trouve dans "Code source de HelloWorld" à la fin de ce tutoriel.

Remarque : Pour imprimer ce tutoriel, voir "Impression des tutoriels et autre documentation".

Si vous avez des suggestions à faire pour améliorer ce tutoriel, envoyez un e-mail à jpgpubs@borland.com.



Présentation Etape 2

Etape 1 : Création du projet

Avant de créer une application dans JBuilder, vous devez créer un projet dans lequel travailler. JBuilder utilise un fichier projet (.jpx ou .jpr) pour organiser les fichiers de l'application et maintenir les paramètres de fonctionnement et les propriétés du projet. L'expert projet peut créer le projet à votre place.

  1. Choisissez Fichier|Nouveau pour ouvrir la galerie d'objets.

    Galerie d'objets

  2. Double-cliquez sur l'icône Projet pour afficher l'expert projet.
  3. Apportez les modifications suivantes aux champs appropriés dans au cours de l'étape 1 de l'expert projet.
    1. Nom du projet : HelloWorld

      Remarque : Au fur et à mesure que vous tapez dans le champ Nom du projet, le même nom est entré par défaut dans le champ Nom du répertoire du projet. Le projet est enregistré dans ce répertoire du projet, HelloWorld.

    2. Type (type de fichier) : .jpr ou .jpx

      Remarque : JBuilder utilise une extension .jpr ou .jpx pour les fichiers projet. Le type de fichier .jpr sert de manière générale. Le type de fichier .jpx, un fichier projet XML, est utilisé dans un environnement de développement en équipe et pour le contrôle de versions. Les deux types de fichiers fonctionnent pour ce tutoriel. Le tutoriel utilise l'extension .jpr.

    L'étape 1 de l'expert projet doit ressembler à ceci :

    Etape 1 de l'expert projet

  4. Acceptez les autres valeurs par défaut de l'étape 1. Notez le chemin racine dans lequel est enregistré le projet.

    Remarque :Par défaut, JBuilder enregistre les projets dans le répertoire /<home>/jbproject/. Le répertoire de base dépend de la plate-forme. Voir "Conventions de la documentation."

    Pour plus d'informations sur les projets, voir "Création et gestion des projets" dans Construction d'applications avec JBuilder

    .
  5. Cliquez sur Suivant pour passer à l'étape 2 de l'expert projet.

    Etape 2 de l'expert projet

  6. Acceptez les valeurs par défaut à l'étape 2 du projet, pour les chemins du projet, du source, de sauvegarde, de la documentation et de destination, ainsi que pour la version du JDK. Notez où seront enregistrés les fichiers projet, classe et source. Notez également que l'option Créer un fichier de notes pour le projet est cochée. Cette option crée un fichier HTML contenant les informations sur le projet que vous entrerez à la prochaine étape de l'expert.
  7. Cliquez sur Suivant pour passer à l'étape 3 de l'expert.
  8. Apportez les modifications suivantes dans les champs appropriés de l'étape 3 :
    1. Tapez HelloWorld dans le champ Titre.
    2. Entrez votre nom et celui de votre société, ainsi que la description de votre application, dans les champs facultatifs appropriés. Cette information apparaît dans le fichier HTML du projet et comme commentaires d'en-tête facultatifs dans le code source.

    L'étape 3 de l'expert projet doit ressembler à ceci :

    Etape 3 de l'expert projet

  9. Cliquez sur le bouton Terminer. Deux fichiers, HelloWorld.jpr et HelloWorld.html, sont générés par l'expert et apparaissent dans le volet projet de l'AppBrowser.

    Voir aussi : "Construction des chemins d'accès par JBuilder" et "Où sont mes fichiers ?" de "Création et gestion des projets" dans Construction d'applications avec JBuilder.

  10. Double-cliquez sur HelloWorld.html, le fichier de notes du projet, pour le voir dans le volet contenu. Remarquez qu'il contient les informations du projet sur le nom, l'auteur, la société et la description saisies à l'étape 3 de l'expert projet.



Présentation Etape 1 Etape 3

Etape 2 : Génération de vos fichiers source

L'expert application crée les fichiers source .java qui seront ajoutés au projet que vous venez de créer.

Pour générer les fichiers source de votre application en utilisant l'expert application, procédez comme suit :

  1. Sélectionnez Fichier|Nouveau pour ouvrir la galerie d'objets.
  2. Double-cliquez sur l'icône Application pour afficher l'expert application.
  3. Acceptez le nom de paquet par défaut, helloworld, dans l'étape 1 de l'expert application. Par défaut, l'expert utilise le nom du fichier projet, HelloWorld.jpr.
  4. Entrez HelloWorldClasse dans le champ Classe. C'est un nom de classe Java qui distingue les majuscules des minuscules.
  5. Cochez Générer les commentaires d'en-tête. Quand vous sélectionnez cette option, les informations des notes du projet qui ont été entrées à l'étape 3 de l'expert projet apparaissent au début de tous les fichiers source générés par l'expert application.

    L'étape 1 de l'expert application doit ressembler à ceci :

  6. Cliquez sur le bouton Suivant pour atteindre l'étape 2 de l'expert application.
  7. Entrez HelloWorldCadre dans le champ Classe pour nommer la classe Cadre.
  8. Entrez Hello World dans le champ Titre. Ce texte apparaît dans la barre de titre du cadre de votre application.
  9. Cochez toutes les options correspondant aux fonctionnalités que vous voulez ajouter à votre application : Créer la barre de menus, Créer la barre d'outils, Créer la barre d'état, Créer la boîte de dialogue A propos et Centrer le cadre à l'écran. L'expert génère le code de base gérant ces fonctionnalités.

    L'étape 2 de l'expert application doit ressembler à ceci :

  10. Cliquez sur le bouton Terminer.

    Les nouveaux fichiers source .java et les images de la barre d'outils sont ajoutés à votre projet et affichés en tant que noeuds dans le volet projet. Le code source de HelloWorldCadre.java est ouvert dans le volet contenu comme le montre l'image suivante.

    Remarque : Dans les éditions JBuilder Professionnel et JBuilder Entreprise, un noeud de paquet source automatique, appelé helloworld, apparaît également dans le volet projet lorsque l'option Activer automatiquement les paquets source est sélectionnée dans la page Général de la boîte de dialogue Propriétés du projet (Projet|Propriétés du projet).

    Eléments de l'AppBrowser

  11. Choisissez Fichier|Tout enregistrer pour enregistrer les fichiers source et le fichier projet.

    Remarque : Les fichiers source sont enregistrés dans : /<home>/jbproject/HelloWorld/src/helloworld
    Les fichiers classe sont enregistrés dans : /<home>/jbproject/HelloWorld/classes/helloworld



Présentation Etape 2 Etape 4

Etape 3 : Compilation et exécution de votre application

Maintenant, compilez et exécutez votre application.

  1. Choisissez Exécuter|Exécuter le projet Icône Exécuter  ou cliquez sur le bouton Exécuter pour compiler et exécuter votre application.

    Astuce : Vous pouvez aussi sélectionner HelloWorldClasse.java dans le volet projet, cliquer avec le bouton droit et sélectionner Exécuter.

    D'abord, le volet message s'ouvre en montrant le processus d'exécution. Ensuite, votre application s'affiche ; elle doit ressembler à ceci :

    Remarque : L'application qui s'exécute dans ce tutoriel reflète l'apparence Windows.

  2. Choisissez Fichier|Quitter dans l'application "Hello World" pour fermer celle-ci.
  3. Cliquez avec le bouton droit sur l'onglet HelloWorldClasse dans le volet message en bas de l'AppBrowser et sélectionnez Retirer l'onglet "HelloWorldClasse" pour fermer tous les messages.



Présentation Etape 3 Etape 5

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

Suivez les étapes ci-dessous pour personnaliser l'interface utilisateur de votre application.

  1. Double-cliquez sur HelloWorldCadre.java dans le volet projet s'il n'est pas déjà ouvert.
  2. Cliquez sur l'onglet Conception pour passer en vue conception. Le concepteur d'interface utilisateur apparaît dans le volet contenu, la palette de composants 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 contenant des composants et des dossiers tels que Interface utilisateur, Menu et Autre.

    Eléments du concepteur d'interface utilisateur

  3. Cliquez sur l'onglet Conteneurs Swing dans la palette des composants, au-dessus du concepteur d'interface utilisateur, et choisissez le composant JPanel pour ajouter un panneau à votre conception.

    Astuce : Placez le curseur sur un composant de la palette pour voir son nom s'afficher dans une bulle d'aide.

  4. Cliquez au centre du cadre, dans le concepteur d'interface utilisateur, pour lâcher le composant au centre du cadre de conception.

    Remarque : La propriété constraints, dans l'inspecteur, doit avoir la valeur Center. Sinon, cliquez sur la colonne de droite de la propriété constraints et choisissez Center dans la liste déroulante.

    jPanel1 est désormais sélectionné dans la conception de votre application, ainsi que dans l'arborescence des composants.

    Remarque : Le composant sélectionné dans l'arborescence des composants ou dans le concepteur d'interface utilisateur s'affiche dans la barre d'état, en bas du volet structure.

  5. Définissez par White la couleur du fond de jPanel1.
    1. Cliquez dans l'inspecteur sur la colonne située à droite de la propriété background.
    2. Cliquez sur la flèche vers le bas pour ouvrir la liste déroulante des couleurs et sélectionnez White au début de celle-ci.
  6. Ajoutez une bordure de ligne à jPanel1 et changez sa couleur en Gray.
    1. Cliquez dans l'inspecteur sur la colonne à droite de la propriété border.
    2. Cliquez sur la flèche vers le bas pour ouvrir la liste déroulante des bordures et sélectionnez Line.
    3. Sélectionnez le bouton Points de suspension  pour accéder à la boîte de dialogue Bordure.
    4. Cliquez sur Black dans Options|Couleur pour accéder à la liste déroulante et sélectionnez Gray.
    5. Cliquez sur OK pour fermer la boîte de dialogue Bordure.
  7. Changez le gestionnaire de disposition de jPanel1 en null.
    1. Cliquez dans l'inspecteur sur la colonne à droite de la propriété layout.
    2. Choisissez null dans la liste déroulante.

    null, c'est à dire aucune disposition, est un bon choix lorsque vous prototypez votre conception. Comme null n'utilise aucun gestionnaire de disposition, vous pouvez placer les composants exactement ou vous voulez qu'ils soient. Mais, null utilisant le positionnement absolu des composants, et non le positionnement relatif, l'interface utilisateur ne se redimensionne pas correctement lorsque l'utilisateur change la taille de la fenêtre de l'application. De ce fait, il est conseillé de ne jamais laisser un conteneur en null pour le déploiement. Plus tard dans ce tutoriel, vous pourrez choisir une disposition portable appropriée à votre conception et son déploiement.

  8. Enregistrez le projet.


Présentation Etape 4 Etape 6

Etape 5 : Ajout d'un composant à votre application

Vous allez maintenant utiliser la palette des composants pour ajouter un composant JLabel au composant JPanel.

  1. Sélectionnez l'onglet Swing dans la palette des composants et cliquez sur le composant JLabel.

  2. Placez le composant dans le panneau JPanel de votre conception en utilisant une des deux méthodes suivantes : Notez que jLabel1 est ajouté sous jPanel1 dans l'arborescence des composants. Si vous avez lâché le composant à un mauvais emplacement, vous pouvez le sélectionner, dans l'arborescence des composants ou dans le concepteur, et appuyer sur la touche Suppr. Ensuite, ajoutez-le à nouveau.
  3. Cliquez au milieu du composant libellé dans le concepteur, et faites-le glisser au centre du panneau.
  4. Sélectionnez jLabel1 dans l'arborescence des composants et suivez les étapes ci-dessous :
    1. Double-cliquez dans l'inspecteur sur la colonne à droite de la propriété text. Tapez Hello World! Appuyez sur Entrée. "Hello World!" apparaît alors dans le libellé. Ne vous inquiétez pas s'il n'apparaît pas complètement dans le libellé. Vous corrigerez ce problème en changeant de fonte.
    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. Cochez Gras et Italique. Entrez 28 dans la boîte Taille. Cliquez sur OK.
    4. Retaillez jLabel1 en faisant glisser les poignées noires jusqu'à ce que "Hello World!" soit complètement visible.
    5. Cliquez dans l'inspecteur sur la colonne à droite de la propriété foreground pour définir la couleur du texte "Hello World!". Cliquez sur la flèche vers le bas et sélectionnez Blue dans la liste déroulante des couleurs.

    Votre conception doit ressembler à ceci :

  5. Choisissez Fichier|Tout enregistrer.



Présentation Etape 5 Etape 7 Code source

Etape 6 : Modification du code source

Vous pouvez changer les informations de la boîte de dialogue A propos, en modifiant directement le code. Par défaut, la version créée par l'expert application est la version 1.0.

  1. Double-cliquez sur HelloWorldCadre_AboutBox.java dans le volet projet pour ouvrir le fichier. Le volet contenu se transforme en une vue source où vous pouvez modifier le code dans l'éditeur.
  2. Choisissez Chercher|Chercher. Entrez la ligne de code suivante dans la boîte de dialogue Chercher/Remplacer du texte :
    String version = "1.0";
    
  3. Cliquez sur Chercher.

    L'éditeur trouve le texte sélectionné.

  4. Sélectionnez 1.0 et saisissez 2.0 entre les guillemets.
  5. Choisissez Fichier|Tout enregistrer.



Présentation Etape 6 Etape 8

Etape 7 : Compilation et exécution de votre application

Vous pouvez maintenant compiler et exécuter l'application.

  1. Choisissez Projet|Construire le projet.
  2. Choisissez Exécuter|Exécuter le projet.

    L'application "HelloWorld" s'affiche :

  3. Choisissez Aide|A propos. Les informations de version que vous avez modifiées s'affichent dans la boîte de dialogue A propos.

  4. Cliquez sur OK pour fermer la boîte de dialogue.
  5. Choisissez Fichier|Quitter dans votre application "Hello World" pour la fermer.



Présentation Etape 7 Etape 9

Etape 8 : Exécution de votre application depuis la ligne de commande

Vous pouvez aussi exécuter l'application hors de l'environnement de JBuilder, depuis la ligne de commande.

Remarque : Le répertoire jdk/bin/ qui contient la commande java doit se trouver dans votre chemin d'accès. Si java est dans votre chemin d'accès, lorsque vous saisissez java sur la ligne de commande, des informations expliquant la commande doivent s'afficher. Si ce n'est pas le cas, vous devez exécuter l'application depuis le répertoire jdk/bin/.

Pour exécuter l'application,

  1. Ouvrez la fenêtre de la ligne des commandes.
  2. Exécutez l'application en saisissant ce qui suit sur la ligne de l'invite de commande :
    java -classpath
    /<home>/jbproject/HelloWorld/classes helloworld.HelloWorldClasse
    

    Remarque : Pour Windows, utilisez une barre oblique inversée (\).

    Cette commande est de la forme :

    java -classpath nom-paquet.nom-classe-principale
    

    Dans cet exemple,

  3. Fermez l'application "Hello World".

Voir aussi : "Setting the classpath" et "Basic tools" à l'adresse http://java.sun.com/j2se/1.3/docs/tooldocs/tools.html



Présentation Etape 8 Etape 10 Code source

Etape 9 : Ajout d'un événement à un bouton

Nous allons maintenant ajouter un composant Swing à votre application.

  1. Ouvrez HelloWorldCadre.java, puis cliquez sur l'onglet Conception pour passer dans le concepteur d'interface utilisateur.
  2. Cliquez sur le composant JButton  jButton  dans l'onglet Swing de la palette des composants et lâchez-le soit sur jPanel1 dans l'arborescence des composants, soit sur le panneau lui-même dans votre conception. jButton4 est ajouté sous jPanel1 dans l'arborescence des composants.
  3. Cliquez sur jButton4 dans le concepteur et faites-le glisser au centre de la partie supérieure de votre conception, comme le montre l'image ci-après.

  4. Dans l'inspecteur, changez la valeur de la propriété Text de jButton4 en Appuyer. Appuyez sur Entrée. Agrandissez le bouton en faisant glisser les poignées noires jusqu'à ce que "Appuyer" soit complètement visible.

    L'inspecteur doit ressembler à ceci :

  5. Cliquez sur l'onglet Evénements de l'inspecteur pour définir ce qui doit se passer lorsque jButton4 est enfoncé.
  6. Double-cliquez sur la colonne située à droite de l'événement ActionPerformed.

    JBuilder va dans l'éditeur là où a été ajouté le squelette de code pour l'événement ActionPerformed.

    void jButton4_actionPerformed(ActionEvent e) {
    }
    
    Vous pouvez alors entrer votre code et définir l'événement.

  7. Tapez le code suivant indiqué en gras :
    void jButton4_actionPerformed(ActionEvent e) {
      jLabel1.setForeground(new Color(255,0,0));
    }
    
    Astuce : Utilisez l'audit de code pour écrire le code. Tapez jLabel1. et attendez la fenêtre surgissante ou appuyez sur Ctrl+barre d'espace pour l'appeler. Tapez setfor pour mettre en évidence setForeground(Color) dans la fenêtre surgissante ou utilisez les flèches de direction. Appuyez sur Entrée. Vous pouvez configurer l'audit de code dans la boîte de dialogue Options de l'éditeur (Outils|Options de l'éditeur|Audit de code).

    Maintenant, lorsque vous exécutez l'application et appuyez sur le bouton "Appuyer", "Hello World!" doit apparaître en rouge.

  8. Choisissez Fichier|Tout enregistrer.
  9. Choisissez Projet|Construire le projet.
  10. Choisissez Exécuter|Exécuter le projet.
  11. Cliquez sur le bouton "Appuyer". La couleur du texte "Hello World!" devient rouge.

  12. Choisissez Fichier|Quitter pour clore l'application "Hello World".


Présentation Etape 9 Etape 11

Etape 10 : Fin de la conception de votre interface utilisateur

La dernière étape de la construction de votre application consiste à changer sa disposition en une disposition portable. N'oubliez pas que, si vous laissez jPanel1 en null, c'est-à-dire sans disposition, les composants de votre interface utilisateur ne se repositionnent pas lorsque l'utilisateur change la taille de la fenêtre de l'application pendant l'exécution. null utilisant le positionnement absolu des composants, ceux-ci conservent la même place quelle que soit la taille de la fenêtre. De ce fait, null n'est pas un gestionnaire de disposition approprié au déploiement final de votre application.

Pour illustrer ce problème de redimensionnement de la fenêtre avec null, exécutez l'application comme ci-dessous :
  1. Cliquez avec le bouton droit sur HelloWorldClasse.java, qui contient la méthode main(), et choisissez Exécuter.
  2. Changez les dimensions de la fenêtre de l'application "Hello World", en l'augmentant et en la diminuant, et observez le comportement des composants. Notez que les composants libellé et bouton ne se déplacent pas lorsque vous retaillez la fenêtre.

  3. Fermez l'application "Hello World".
Les dispositions portables, au contraire de null, utilisent le positionnement relatif, qui est dynamique. Dans les dispositions portables, les composants se repositionnent correctement lorsque l'utilisateur retaille la fenêtre de l'application. Dans cet exemple, vous changerez la disposition en GridBagLayout. Pour plus d'informations sur les dispositions, voir "Utilisation des gestionnaires de dispositions" dans Construction d'applications avec JBuilder.
  1. Revenez au fichier HelloWorldCadre.java dans le volet contenu, puis cliquez sur l'onglet Conception pour passer dans le concepteur.
  2. Choisissez jPanel1 dans l'arborescence des composants.
  3. Choisissez l'onglet Propriétés de l'inspecteur.
  4. Changez la disposition de jPanel1 en GridBagLayout dans l'inspecteur. Sélectionnez chaque composant dans le concepteur et notez la zone de la grille qu'il occupe.

    GridBagLayout est un choix approprié à la disposition sur une grille de composants de tailles variées. Voir "GridBagLayout" dans Construction d'applications avec JBuilder.

  5. Enregistrez et exécutez l'application.
  6. Retaillez la fenêtre de l'application et remarquez comment les composants se repositionnent lorsque changent les dimensions de la fenêtre.

  7. Fermez l'application "Hello World".
Les étapes 11 et 12 utilisent des fonctionnalités offertes par JBuilder Professionnel et JBuilder Entreprise. Si vous utilisez JBuilder Personnel, ce tutoriel est terminé.



Présentation Etape 10 Etape 12

Etape 11 : Préparation de l'application pour son déploiement

Poursuivez les exercices de ce tutoriel si vous êtes en possession d'une version Professionnel ou Entreprise de JBuilder.

Le Constructeur d'archives de JBuilder rassemble tous les fichiers requis pour distribuer votre programme et peut les archiver dans un fichier JAR (Java archive).

Pour déployer votre application :

  1. Choisissez Experts|Constructeur d'archives pour ouvrir le Constructeur d'archives.
  2. Sélectionnez Application dans la liste déroulante Type d'archive.

  3. Cliquez sur Suivant pour aller à l'étape 2.
  4. Acceptez le nom par défaut de l'archive et le chemin par défaut du fichier JAR. Notez que HelloWorld.jar sera enregistré dans le répertoire HelloWorld.

  5. Acceptez les valeurs par défaut de l'étape 3 à l'étape 6.
  6. Cliquez sur Terminer pour fermer le Constructeur d'archives. Un noeud d'archive nommé Application apparaît dans le volet projet. Vous pouvez modifier ce fichier en cliquant dessus avec le bouton droit et en sélectionnant Propriétés.
  7. Sélectionnez Projet|Construire le projet pour compiler votre application et créer le fichier JAR. Le Constructeur d'archives rassemble tous les fichiers du chemin de sortie du projet (Projet|Propriétés du projet|Chemins) dans le fichier JAR.
  8. Cliquez sur l'icône de développement à côté du noeud d'archive Application pour développer le noeud et voir le fichier archive HelloWorld.jar. Double-cliquez sur le fichier JAR dans le volet projet. Le fichier manifest apparaît dans le volet contenu et le contenu du fichier JAR apparaît dans le volet structure.

    Visualiseur d'archives

  9. Enregistrez votre projet.

Pour plus d'informations sur le déploiement, voir "Déploiement des programmes Java" dans Construction d'applications avec JBuilder.



Présentation Etape 11

Etape 12 : Exécution de l'application déployée depuis la ligne de commande

Poursuivez les exercices de ce tutoriel si vous êtes en possession d'une version Professionnel ou Entreprise de JBuilder.

Pour tester l'application déployée, vous pouvez exécuter le fichier JAR depuis la ligne de commande.

Remarque : Le répertoire jdk/bin/ qui contient la commande java doit se trouver dans votre chemin d'accès. Si java est dans votre chemin d'accès, lorsque vous saisissez java sur la ligne de commande, des informations expliquant la commande doivent s'afficher. Si ce n'est pas le cas, vous devez exécuter l'application depuis le répertoire jdk/bin/.

  1. Ouvrez la fenêtre de la ligne des commandes.
  2. Entrez la commande suivante sur la ligne de l'invite de commande :

    java -classpath /<home>/jbproject/HelloWorld/HelloWorld.jar helloworld.HelloWorldClasse

    Remarque : Pour Windows, utilisez une barre oblique inversée (\).

    La commande doit respecter la syntaxe :

    java -classpath nom-paquet.nom-classe-principale
    

    Dans cet exemple,

    Pour plus d'informations sur les fichiers JAR, voir le tutoriel JAR à l'adresse http://java.sun.com/docs/books/tutorial/jar/index.html.

  3. L'application "Hello World" se charge et s'exécute.

Bravo. Vous venez de créer votre première application avec JBuilder. Maintenant que vous êtes familier de l'environnement de développement de JBuilder, vous allez constater que ses nombreuses fonctionnalités facilitent la programmation et vous font gagner du temps.

Pour trouver d'autres tutoriels sur la conception d'interfaces utilisateur dans JBuilder, voir "Editeur de texte", "GridBagLayout" et "Dispositions imbriquées".

Présentation Etape 11