< Précédent | Suivant >

Leçon 6 : Ajouter des données à la page

Dans cet exercice, vous allez ajouter des données de la base de données, incluse dans ce tutoriel, à la page Web que vous avez créée dans l'exercice précédent.
Cette tâche se décompose comme suit :

Dans cette leçon, vous allez utiliser l'assistant de contenu EGL. Il s'agit d'un outil permettant de compléter les instructions de programmation sans avoir à saisir l'instruction entière.

Ajout d'un tableau d'enregistrements à la vue Données de page et au gestionnaire JSF

  1. Si le fichier allcustomers.jsp n'est pas ouvert, ouvrez-le en cliquant deux fois dessus dans la vue Explorateur d'entreprise.
  2. Recherchez la vue Données de page, qui apparaît généralement dans la partie inférieure gauche du plan de travail. Vous pouvez faire apparaître la vue Données de page à l'aide des onglets, mais si vous ne la trouvez pas, cliquez sur Fenêtre > Afficher la vue > Données de page.
  3. Recherchez la vue Palette, qui se trouve généralement sur le côté droit du plan de travail. Si vous ne pouvez pas trouver cette vue, cliquez sur Fenêtre > Afficher la vue > De base > Palette.
  4. Dans la vue Palette, cliquez sur le tiroir EGL pour l'ouvrir.
  5. Faites glisser l'icône Nouvelle variable de la vue Palette à la page allcustomers.jsp dans l'éditeur. La fenêtre Création d'une variable de données EGL s'ouvre.
  6. En dessous de Sélection d'un type, cliquez sur Enregistrement.
  7. En dessous de Type d'enregistrement, cliquez sur Customer. De cette façon, vous sélectionnez le composant Enregistrement sur lequel sera basé chacun des éléments du tableau.
  8. Dans la zone Entrez le nom de la zone, tapez ce texte :
    customers
  9. En dessous de Propriétés du tableau, cochez la case Tableau. Laissez la zone Taille à blanc.
  10. Désélectionnez la case Ajouter des contrôles pour afficher l'élément EGL sur la page Web.

    La fenêtre Création d'une variable de données EGL se présente comme suit :

    Fenêtre Création d'une variable de données EGL

  11. Cliquez sur OK. Rien n'apparaît sur le fichier JSP où vous avez déplacé la variable. En effet, EGL a créé la variable dans un fichier distinct, nommé gestionnaire JSF, qui contient du code pour répondre aux événements dans le fichier JSP. Un élément représentant la nouvelle variable apparaît dans la vue Données de page, sous la section Gestionnaire JSF > Données.
  12. Développez la branche Gestionnaire JSF > Données, puis la branche customers - Customer[]. Il y a 12 icônes sous les clients, représentant les 12 zones de cet enregistrement de base de données.

La vue Données de page se présente comme suit :

Vue Données de page avec une variable de tableau customers visible

En ajoutant des entrées à la vue Données de page, vous avez également ajouté un tableau d'enregistrements au gestionnaire JSF. Dans la section suivante, vous allez créer les zones associées sur la page Web.

Affichage des données sur la page Web

Les données qui figurent dans la vue Données de page peuvent être ajoutées à la page Web.
  1. Depuis la vue Données de page, faites glisser la variable tableau customers - Customer[] vers le fichier allcustomers.jsp, et déposez-la sous le texte Liste de tous les clients, dans les lignes vides que vous avez ajoutées au cours de l'exercice précédent.

    La fenêtre Insérer un contrôle de liste s'ouvre. Cette fenêtre présente la liste de toutes les zones de l'enregistrement de base de données. Vous pouvez utiliser cette fenêtre pour choisir quelles zones afficher dans la page.

  2. Sous Contrôle de données à créer, conservez la valeur par défaut, à savoir Table de données multi-colonne.
  3. Sous Créer des contrôles pour, cliquez sur l'option Affichage d'un enregistrement existant (lecture seule).

    Quand vous sélectionnez cette option, les données de la page sont affichées dans des zones en lecture seule. Si vous choisissez la mise à jour d'un enregistrement existant, les zones sur la page sont des zones d'entrée où vous pouvez entrer des données, et vous pouvez associer des actions aux boutons placés sous ces zones. Vous créerez ce type de zone sur une autre page. Dans notre cas, l'option Création d'un enregistrement est identique à Mise à jour d'un enregistrement existant, excepté que les boutons par défaut sont différents.

  4. Sous Colonnes à afficher, cliquez sur le bouton Aucune. Vous avez désélectionné toutes les zones.
  5. Cochez les cases des zones suivantes :
    • CUSTOMERID
    • FIRSTNAME
    • LASTNAME

    La fenêtre Insérer un contrôle de liste se présente comme suit :

    Fenêtre Insérer un contrôle de liste

  6. Cliquez sur Terminer. Une table de données est créée sur votre page avec trois colonnes correspondant aux trois zones sélectionnées dans la fenêtre Insérer un contrôle de liste.
  7. Sauvegardez la page.

La page se présente comme suit :

Apparence actuelle de la page

Les colonnes de la table de données ont des en-têtes basés sur les noms des zones de la base de données. Vous pouvez modifier ces en-têtes en cliquant dessus, en ouvrant la vue Propriétés et en modifiant la zone Valeur.

Les trois zones de texte de la table de données, qui apparaissent sous la forme {CUSTOMERID}, {FIRSTNAME}, et {LASTNAME}, représentent les endroits où les informations de la base de données apparaîtront sur la page.

Appel de fonction à partir de la bibliothèque EGL

L'étape suivante consiste à ajouter du code à cette page pour appeler la fonction de la bibliothèque CustomerLibrary.egl. Cette fonction lit les données dans la base de données et les rend disponibles pour la page.

  1. Cliquez avec le bouton droit n'importe où dans la zone de format libre du fichier allcustomers.jsp.
  2. Dans le menu contextuel, cliquez sur Editer le code de page.

    Le fichier allcustomers.egl s'ouvre dans l'éditeur. Ce fichier comprend une section Gestionnaire JSF. Dans les étapes suivantes, vous ajoutez du code à ce gestionnaire JSF qui extrait des données de la base de données et les place sur la page.

  3. Dans le fichier allcustomers.egl, recherchez la ligne customers Customer[0];

    Il s'agit de la ligne de code qui définit la variable d'enregistrement que vous avez créée pour afficher sur la page. Vous devez également définir un enregistrement pour stocker le code à exécuter en cas de réussite ou d'échec de l'appel SQL.

  4. Sur une ligne vide, immédiatement après la ligne customers Customer[0];, ajoutez le code suivant, exactement tel qu'il est écrit :
    status StatusRec;
    Notez la ligne rouge ondulée sous StatusRec, indiquant que le type est inconnu du gestionnaire. Vous devez ajouter une instruction import pour indiquer au gestionnaire où trouver la définition de l'enregistrement StatusRec. Vous pouvez effectuer cette opération automatiquement en cliquant avec le bouton droit sur un espace vide de la fenêtre de l'éditeur, puis en cliquant sur Organiser les importations.
    La ligne rouge ondulée sous StatusRec et le menu déroulant contenant l'option Organiser les importations.

    Le raccourci clavier de cette fonction est Ctrl+Maj+O. EGL vérifie tous les fichiers qu'il voit, recherche les informations nécessaires et ajoute une instruction import en haut du fichier.

    Vous disposez maintenant de l'enregistrement à extraire de la base de données et de l'enregistrement de statut SQL. L'étape finale de l'ajout des données à votre page consiste à passer ces deux variables à la fonction qui accède à la base de données. Cette fonction, appelée GetCustomerListAll(), a été créée par l'assistant Application EGL d'accès aux données dans une leçon précédente.

    Notez les lignes entre accolades qui suivent la déclaration handler. Ces lignes affectent des valeurs aux propriétés du gestionnaire JSF. Dans EGL, les propriétés sont des paires nom-valeur qui modifient le comportement d'un composant. La plupart des types de section EGL possèdent une ou plusieurs propriétés, et chaque sorte de section peut accepter différentes propriétés. Dans ce cas, le gestionnaire JSF a quatre propriétés définies :

    onConstructionFunction = onConstruction
    La propriété onConstructionFunction spécifie une fonction du gestionnaire JSF qui s'exécute la première fois que la page web (JSP) associée au gestionnaire JSF s'affiche dans un navigateur. Dans le cas présent, la propriété spécifie une fonction appelée onConstruction, qui est créée par défaut dans le gestionnaire JSF. Vous n'utiliserez pas cette fonction dans ce tutoriel.
    onPreRenderFunction = onPreRender
    La propriété onPreRenderFunction spécifie une fonction dans le gestionnaire JSF qui s'exécute chaque fois que la page JSP associée s'affiche dans le navigateur, y compris quand l'utilisateur actualise la page ou revient à la page après en avoir affiché une autre. Dans le cas présent, la propriété spécifie une fonction appelée onConstruction, qui est créée par défaut dans le gestionnaire JSF. Dans les étapes suivantes, vous allez ajouter du code à cette fonction pour extraire les données actuelles de la base de données chaque fois que la page est chargée.
    view = "allcustomers.jsp"
    La propriété view spécifie la page Web associée au gestionnaire JSF. Par défaut, la page web et le gestionnaire JSF ont le même nom, mais ils portent des extensions différentes.
    viewRootVar = viewRoot
    La variable viewRoot permet d'obtenir l'accès à l'arborescence des composants JSF. Vous n'utiliserez pas la variable viewRoot dans ce tutoriel. Pour plus d'informations sur les composants JSF et la variable viewRoot, voir Accès à l'arborescence de composants.
  5. Ajoutez le code d'appel de la fonction de bibliothèque GetCustomerListAll() à la fonction onPreRender(). Cette fonction extrait les données client de la base de données. Dans ce cas, essayez d'utiliser l'assistant de contenu dans l'éditeur EGL :
    1. Placez le curseur sur la ligne vide entre function onPreRender() et end.
    2. Tapez le code suivant :
      cust
    3. Appuyez sur Ctrl + Barre d'espacement. La fenêtre de suggestion de complément de code s'ouvre avec toutes les commandes EGL disponibles et les ressources commençant par cust.
    4. Dans la fenêtre de l'assistant de contenu, sélectionnez la bibliothèque CustomerLib en la mettant en évidence à l'aide du clavier et en appuyant sur Entrée ou en cliquant deux fois sur celle-ci avec la souris.

      La nouvelle ligne contient maintenant CustomerLib.

    5. Tapez un point après CustomerLib.
    6. Appuyez à nouveau sur Ctrl + Barre d'espacement. La fenêtre de suggestion de code s'ouvre à nouveau.
    7. Dans la fenêtre de suggestion de complément de code, sélectionnez la fonction GetCustomerListAll(customerArray Customer[], status StatusRec) en la mettant en évidence et en appuyant sur Entrée ou en cliquant deux fois sur celle-ci avec la souris. Veillez à ne pas sélectionner la fonction GetCustomerList(listSpec ListSpecification, listOut Customer[], status StatusRec).

      La nouvelle ligne contient maintenant CustomerLib.GetCustomerListAll(customerArray, status) et l'argument customerArray est mis en évidence.

    8. Remplacez l'argument par défaut customerArray de la nouvelle ligne de code par le nom de votre variable d'enregistrement : customers.
    9. Terminez la ligne de code par un point-virgule.
    Au final, la ligne de code contient ceci :
    CustomerLib.GetCustomerListAll(customers, status);
    Notez également qu'il y a une nouvelle instruction import en haut du fichier : import eglderbydb.access.CustomerLib;. Cette ligne importe la bibliothèque, ce qui vous évite d'écrire dans le code le chemin d'accès complet de cette bibliothèque et vous permet d'y faire référence directement.

    L'assistant de contenu a ajouté cette instruction import automatiquement. Si vous n'avez pas utilisé l'assistant de contenu ni la fonction d'organisation des importations pour créer cette instruction import, vous devez spécifier l'emplacement explicite de la bibliothèque en qualifiant son nom avec les noms suivants : eglderbydb.access.CustomerLib.

  6. Sauvegardez le fichier.
Le fichier allcustomers.egl se présente maintenant comme suit :
Code du fichier allcustomers.egl

Si vous voyez des erreurs indiquées par des croix (X) rouges dans l'éditeur, vérifiez que votre code correspond bien à celui de ce fichier : Fichier allcustomers.egl terminé après la leçon 6.

Test de la page

La page est maintenant prête à être exécutée sur le serveur. Procédez selon les étapes suivantes pour la tester et voir comment les données de la base de données apparaissent sur la page.

Avant de poursuivre, prenez les précautions suivantes :
  1. Si ce n'est déjà fait, enregistrez les fichiers allcustomers.egl et allcustomers.jsp, puis fermez-les.
  2. Assurez-vous que le serveur d'applications a démarré et est synchronisé.
  1. Dans la vue Explorateur d'entreprise, cliquez avec le bouton droit de la souris sur le projet EGLWeb, puis cliquez sur Générer.
  2. Dans la vue Explorateur d'entreprise, cliquez avec le bouton droit de la souris sur le fichier allcustomers.jsp, et non pas sur le fichier allcustomers.egl.
  3. Dans le menu contextuel, cliquez sur Exécuter en tant que > Exécuter sur le serveur.

    Comme dans la leçon précédente, la page web s'ouvre dans un navigateur Web dans le plan de travail. Cette fois, les données dynamiques apparaissent sur la page. Si les données dynamiques ne sont pas affichées, cliquez sur l'icône d'actualisation à côté de la barre d'adresses. La page se présente comme suit :

    Apparence actuelle de la page allcustomers.jsp

Dans la leçon suivante, vous allez créer une page détaillée affichant toutes les zones dans un enregistrement client individuel.
< Précédent | Suivant >

Retour d'informations