I. INTRODUCTION

Cet article va présenter étape par étape la réalisation d'une application web simple. Les différentes étapes sont :

  • Installation des outils : JDeveloper et Oracle Express Edition
  • Développement d'une page web affichant "Bonjour le monde"
  • Développement d'une page web permettant la gestion des valeurs d'une base de données.

Ces étapes sont l'occasion de distinguer les parties Model et ViewController d'une application développée avec JDeveloper/ADF.

Pour une compréhension aisée de cet article, il est conseillé d'avoir quelques connaissances en Java, HTML/Javascript et SQL/Base de données. Mais ces connaissances ne sont pas nécessaires car le tutoriel repose sur l'interface WYSIWYG de JDeveloper.

Pour la réalisation de cet article les versions des outils sont :

La plupart des images de l'article sont une partie d'une autre image. Pour accéder à l'image complète, il suffit de cliquer sur l'image de l'article.

Un discussion a été ouverte pour la publication de cet article, pour les commentaires. [6 commentaires]

II. INSTALLATION DES OUTILS

II-A. Installation de JDeveloper

Lancer l'exécutable d'installation ("jdevstudio11121install.exe").

Image non disponible

Cliquer sur "Suivant".

Image non disponible

Cliquer sur "Suivant".

Image non disponible

Cliquer sur "Suivant".

Image non disponible

Cliquer sur "Suivant".

Image non disponible

Cliquer sur "Suivant".

Image non disponible

Cliquer sur "Suivant".

Image non disponible

L'installation se déroule.

Image non disponible

Cliquer sur "Terminé".

Image non disponible

Cliquer sur "Launch Oracle JDeveloper 11g".

Image non disponible

Cliquer sur "OK".

Image non disponible

Cliquer sur "OK".

Image non disponible

Décocher "Allow automated usage reporting to Oracle". Cliquer sur "OK".

Image non disponible

Décocher "Show tips at startup". Puis, cliquer sur la croix pour fermer.

Image non disponible

JDeveloper est correctement installé.

Image non disponible

Il sera possible de le relancer à partir du menu "Démarrer/Programmes/Oracle Fusion Middleware 11.1.2.1.0/JDeveloper Studio 11.1.2.1.0".

II-B. Installation de Oracle Express Edition

Lancer l'exécutable d'installation ("OracleXEUniv.exe").

Image non disponible

Cliquer sur "Suivant".

Image non disponible

Sélectionner "J'accepte les termes de l'accord de licence". Puis, cliquer sur "Suivant".

Image non disponible

Cliquer sur "Suivant".

Image non disponible

Saisir un mot de passe dans "Entrer le mot de passe" et "Confirmer le mot de passe". Puis, cliquer sur "Suivant".

Image non disponible

Cliquer sur "Installer".

Image non disponible

L'installation se déroule.

Image non disponible

Cliquer sur "Fin".

Image non disponible

Pour se connecter, il est possible d'utiliser le compte "SYSTEM" avec le mot de passe précédemment saisi.

Image non disponible

Après la connexion, on aboutit à un écran présentant les différentes actions possibles.

Image non disponible

On reviendra plus tard sur cet accès à la base de données.

III. "BONJOUR LE MONDE"

III-A. Étape 1 : Création de l'application dans JDeveloper

Lancer JDeveloper par le lien "JDeveloper Studio 11.1.2.1.0".

Image non disponible

Laisser "Studio Developer (All features)" sélectionné. Cliquer sur le bouton "OK".

Image non disponible

Cliquer sur "New Application...".

Image non disponible

Sélectionner "Fusion Web Application (ADF)" dans "General / Applications". Puis, cliquer sur le bouton "OK".

Image non disponible

Saisir le nom de l'application (ici : "MonApplicationADF") dans "Application Name : " et le préfixe des package (ici : "com.developpez.rpouiller.monappplicationadf") dans "Application Package Prefix : ". Puis, cliquer sur le bouton "Next >".

Image non disponible

Cliquer sur le bouton "Next >".

Image non disponible

Cliquer sur le bouton "Next >".

Image non disponible

Cliquer sur le bouton "Next >".

Image non disponible

Cliquer sur le bouton "Finish".

Image non disponible

L'application a été créée dans JDeveloper.

Image non disponible

III-B. Étape 2 : JSF "Bonjour le monde"

Faire un clic droit sur "Web Content". Puis choisir "New...".

Image non disponible

Choisir "Page" dans "Web Tier / JSF/Facelets". Puis, cliquer sur le bouton "OK".

Image non disponible

Saisir le nom de la page (ici : "bonjour.jsf") dans "File Name:". Puis, cliquer sur le bouton "OK".

Image non disponible

Cliquer sur "Output Text" dans "ADF Faces / Text and Selection" de la "Component Palette". Puis, faire glisser le composant au milieu de la page "bonjour.jsf".

Image non disponible

Saisir "Bonjour le monde" dans la propriété "Value" du composant Output Text. Puis, valider en tapant sur la touche Entrée.

Image non disponible

Sélectionner le composant "af:document" dans la structure.

Image non disponible

Saisir "Mon application ADF : Bonjour" dans la propriété "Title" du composant Document. Puis, valider en tapant sur la touche Entrée.

Image non disponible

Faire un clic droit sur le fichier "bonjour.jsf". Puis, choisir "Run".

Image non disponible

Saisir le mot de passe du Weblogic (par défaut : "weblogic1") dans "Password:" et "Confirm password:". Puis, cliquer sur le bouton "OK".

Image non disponible

Valider les éventuelles demandes d'autorisations en cliquant sur "Allow access".

Image non disponible
Image non disponible

Voici le résultat dans un navigateur web.

Image non disponible

IV. AFFICHAGE/CRÉATION/SUPPRESSION/MODIFICATION DE DONNÉES EN BASE

IV-A. Étape 3 : Création de la structure dans la base de données

Accéder à la base de données Oracle par le lien "Accéder à la page d'accueil de la base de données".

Image non disponible

Entrer le nom d'utilisateur "system" et le mot de passe associé qui a été saisi durant l'installation.

Image non disponible

Sélectionner "Créer un utilisateur" dans "Administration / Utilisateurs de base de données".

Image non disponible

Saisir le nom d'utilisateur (ici : "articleADF") et le mot de passe. Cocher les cases "CONNECT", "RESOURCE" et "DBA". Puis, cliquer sur le bouton "Créer".

Image non disponible

L'utilisateur a été créé. Cliquer sur le lien "Déconnexion".

Image non disponible

Cliquer sur le lien "Connexion".

Image non disponible

Entrer le nom d'utilisateur "articleadf" et le mot de passe associé.

Image non disponible

Sélectionner "Table" dans "Navigateur d'objet / Créer".

Image non disponible

Saisir le nom de la table et ceux des différentes colonnes. Puis, cliquer sur le bouton "Suivant >".

Image non disponible

Choisir que la clef primaire soit remplie à partir d'une nouvelle séquence. Puis, cliquer sur le bouton "Suivant >".

Image non disponible

Cliquer sur le bouton "Suivant >".

Image non disponible

Cliquer sur le bouton "Fin".

Image non disponible

Éventuellement, cliquer sur "SQL" pour afficher le code SQL de création de la table. Puis, cliquer sur le bouton "Créer".

Image non disponible

La table a été créée. Cliquer sur le lien "Page d'accueil".

IV-B. Étape 4 : Développement de la page de gestion des données

IV-B-1. Partie Model

Dans JDeveloper, faire un clic droit sur le projet "Model". Puis, choisir "New".

Image non disponible

Choisir "Entity Object" dans "Business Tier / ADF Business Components". Puis, cliquer sur le bouton "OK".

Image non disponible

Cliquer sur la croix verte.

Image non disponible

Entrer les paramètres de connexion à la base de données. Cliquer sur "Test Connection". Quand le résultat du test est "Success!", cliquer sur "OK".

Image non disponible

Cliquer sur "OK".

Image non disponible

Cliquer sur "Browse".

Image non disponible

Cliquer sur "Query".

Image non disponible

Choisir la table "LISTECOURSES". Puis, cliquer sur "OK".

Image non disponible

Cliquer sur "Next >".

Image non disponible

Cliquer sur "Next >".

Image non disponible

Cliquer sur "Next >".

Image non disponible

Cliquer sur "Next >".

Image non disponible

Cocher "Generate Default View Object" et saisir le nom correspondant. Cocher "Add to Application Module" et saisir également le nom correspondant. Puis, cliquer sur "Next >".

Image non disponible

Cliquer sur "Finish".

Image non disponible

Cliquer sur l'icône pour tout sauvegarder.

Image non disponible

IV-B-2. Partie ViewController

Faire un clic droit sur le dossier "Web Content". Puis, choisir "New".

Image non disponible

Choisir "Page" dans "Web Tier / JSF/Facelets". Puis, cliquer sur le bouton "OK".

Image non disponible

Saisir le nom du fichier. Choisir "Quick Start Layout". Puis, cliquer sur le bouton "OK".

Image non disponible

Sélectionner l'élément "af:panelStretchLayout" dans la structure.

Image non disponible

Saisir "auto" dans la propriété "TopHeight". Valider avec la touche ENTRÉE.

Image non disponible

Faire un clic droit sur l'élément "af:panelStretchLayout". Puis, choisir "Insert Inside af:panelStretchLayout / Facet top".

Image non disponible

Sélectionner l'élément "f:facet - top" dans la structure.

Image non disponible

Cliquer sur le composant "Panel Box" dans les composants "Layout" de "ADF Faces".

Image non disponible

L'élément a été rajouté. Le sélectionner si nécessaire.

Image non disponible

Saisir un nouveau texte dans la propriété "Text" de cet élément. Valider la modification avec le touche ENTRÉE.

Image non disponible

Sélectionner "ListeCourseEntityVO1" dans "Data Controls". Maintenir le bouton gauche de la souris appuyé pour le glisser-déposer dans l'élément Panel Box du fichier "gestion.jsf". Choisir "ADF Form..." de "Form" dans la liste qui apparait.

Image non disponible

Cocher "Include Navigation Controls" et "Include Submit Button". Puis, cliquer sur le bouton "OK".

Image non disponible

Sélectionner "ListeCourseEntityVO1" dans "Data Controls". Maintenir le bouton gauche de la souris appuyé pour le glisser-déposer en dessous de l'élément Panel Box du fichier "gestion.jsf", dans la partie centrale du "panel stretch layout". Choisir "ADF Read-only Table..." de "Table" dans la liste qui apparait.

Image non disponible

Cocher "Enable Sorting" et "Enable Filtering". Puis, cliquer sur le bouton "OK".

Image non disponible

Sélectionner l'opération "Commit" dans "Data Controls". Maintenir le bouton gauche de la souris appuyé pour le glisser-déposer sur le bouton "Submit".

Image non disponible

Cliquer sur le bouton "OK".

Image non disponible

Sélectionner l'opération "Rollback" dans "Data Controls". Maintenir le bouton gauche de la souris appuyé pour le glisser-déposer à côté du bouton "Commit".

Image non disponible

Sélectionner l'opération "Create" de "ListeCoursesEntityVO1" dans "Data Controls". Maintenir le bouton gauche de la souris appuyé pour le glisser-déposer à côté du bouton "Rollback".

Image non disponible

Sélectionner l'opération "Delete" de "ListeCoursesEntityVO1" dans "Data Controls". Maintenir le bouton gauche de la souris appuyé pour le glisser-déposer à côté du bouton "Rollback".

Image non disponible

Faire un clic droit sur "af:commandButton - Commit". Sélectionner "Surround With...".

Image non disponible

Choisir "Panel Group Layout". Puis, cliquer sur "OK".

Image non disponible

Sélectionner successivement les éléments "af:commandButton - Rollback", "af:commandButton - Create" et "af:commandButton - Delete" pour les glisser-déposer à l'intérieur de l'élément "af:panelGroupLayout".

Image non disponible
Image non disponible
Image non disponible

Sélectionner le bouton "First" et changer la valeur de sa propriété "Id".

Image non disponible

Sélectionner le bouton "Previous" et changer la valeur de sa propriété "Id".

Image non disponible

Sélectionner le bouton "Next" et changer la valeur de sa propriété "Id".

Image non disponible

Sélectionner le bouton "Last" et changer la valeur de sa propriété "Id".

Image non disponible

Sélectionner le bouton "Create" et changer la valeur de sa propriété "Id".

Image non disponible

Sélectionner le bouton "Delete" et changer la valeur de sa propriété "Id".

Image non disponible

Sélectionner le bouton "Commit" et changer la valeur de sa propriété "Id".

Image non disponible

Sélectionner le bouton "Rollback" et changer la valeur de sa propriété "Id".

Image non disponible

Sélectionner la table de données. Puis, cliquer sur la flèche à droite de la propriété "PartialTriggers" afin de choisir "Edit...".

Image non disponible

Sélectionner les éléments qui sont "not found". Cliquer sur la flèche pour supprimer les éléments désélectionnés.

Image non disponible

Sélectionner les éléments "cbCommit" et "cbRollback". Cliquer sur la flèche pour ajouter ces éléments à ceux sélectionnés. Puis, cliquer sur le bouton "OK".

Image non disponible

Sélectionner l'élément "af:panelFormLayout" qui entoure les champs de saisie.

Image non disponible

Cliquer sur la flèche à droite de la propriété "PartialTriggers" afin de choisir "Edit...".

Image non disponible

Sélectionner les éléments "cbFirst", "cbPrevious", "cbNext", "cbLast", "cbCreate", "cbDelete", "cbCommit" et "cbRollback". Cliquer sur la flèche pour ajouter les éléments à ceux sélectionnés. Puis, cliquer sur le bouton "OK".

Image non disponible

Sélectionner les éléments "cbFirst", "cbPrevious", "cbNext", "cbLast", "cbCreate", "cbDelete", "cbCommit" et "cbRollback" dans la structure.

Image non disponible

Changer la valeur de la propriété "PartialSubmit" de ces éléments en "true".

Image non disponible

Choisir "Reset to Default" pour la propriété "Disabled" de ces éléments grâce à la flèche à droite.

Image non disponible

IV-B-3. Insertion de données de test par JDeveloper

Choisir "Database Navigator" dans le menu "View / Database".

Image non disponible

Déplier "MonApplicationADF" et "ConnArticleADF".

Image non disponible

Copier les requêtes suivantes. Puis, exécuter le script avec l'icône avec la feuille et la flèche verte.

 
Sélectionnez
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Banane', 3); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Sucre blanc', 75); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Oeuf', 1); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Levure', 1); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Sel', 1); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Farine', 150); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Beurre', 70); 
Image non disponible

Voici le résultat.

Image non disponible

IV-B-4. Lancement de l'application

Faire un clic droit sur le fichier "gestion.jsf". Puis, choisir "Run".

Image non disponible

Voici le résultat.

Image non disponible

V. REMERCIEMENTS

Je remercie sincèrement par ordre plus ou moins chronologique :

VI. AUTRES PUBLICATIONS