Application ADF (Application Development Framework) pas à pas avec JDeveloper

Régis POUILLER

Cet article a pour objectif de présenter étape par étape la création d'une application web avec le framework ADF (Application Development Framework) et l'environnement de développement JDeveloper.

Une discussion a été ouverte pour les commentaires sur la publication de cet article : [ Commentez ♪

- Titre : Application ADF (Application Development Framework) pas à pas avec JDeveloper

- Auteur : Régis POUILLER

- Parution : 23 février 2012

- Public visé :

- Licence : Copyright ® 2009 Régis POUILLER. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. INTRODUCTION

- II. INSTALLATION DES OUTILS

- II-A. Installation de JDeveloper

- II-B. Installation de Oracle Express Edition

- III. « BONJOUR LE MONDE »

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

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

- 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

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

- IV-B-1. Partie Model

- IV-B-2. Partie ViewController

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

- IV-B-4. Lancement de l'application

- V. REMERCIEMENTS

- VI. AUTRES PUBLICATIONS

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 :

- Oracle JDeveloper 11g Release 2 (11.1.2.1.0)

- Oracle Database Express Edition : 10g Release 2 (Universal) (10.2.0.1)

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.

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

II - INSTALLATION DES OUTILS

II-A - Installation de JDeveloper

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

Cliquer sur « Suivant ».

Cliquer sur « Suivant ».

Cliquer sur « Suivant ».

Cliquer sur « Suivant ».

Cliquer sur « Suivant ».

Cliquer sur « Suivant ».

L'installation se déroule.

Cliquer sur « Terminé ».

Cliquer sur « Launch Oracle JDeveloper 11g ».

Cliquer sur « OK ».

Cliquer sur « OK ».

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

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

JDeveloper est correctement installé.

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 »).

Cliquer sur « Suivant ».

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

Cliquer sur « Suivant ».

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

Cliquer sur « Installer ».

L'installation se déroule.

Cliquer sur « Fin ».

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

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

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 ».

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

Cliquer sur « New Application… ».

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

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 > ».

Cliquer sur le bouton « Next > ».

Cliquer sur le bouton « Next > ».

Cliquer sur le bouton « Next > ».

Cliquer sur le bouton « Finish ».

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

III-B - Étape 2 : JSF « Bonjour le monde »

Faire un clic droit sur « Web Content ». Puis choisir « New… ».

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

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

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 ».

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

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

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

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

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

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

Voici le résultat dans un navigateur web.

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 ».

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

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

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 ».

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

Cliquer sur le lien « Connexion ».

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

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

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

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

Cliquer sur le bouton « Suivant > ».

Cliquer sur le bouton « Fin ».

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

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 ».

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

Cliquer sur la croix verte.

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 ».

Cliquer sur « OK ».

Cliquer sur « Browse ».

Cliquer sur « Query ».

Choisir la table « LISTECOURSES ». Puis, cliquer sur « OK ».

Cliquer sur « Next > ».

Cliquer sur « Next > ».

Cliquer sur « Next > ».

Cliquer sur « Next > ».

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 > ».

Cliquer sur « Finish ».

Cliquer sur l'icône pour tout sauvegarder.

IV-B-2 - Partie ViewController

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

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

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

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

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

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

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

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

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

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

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.

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

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.

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

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 ».

Cliquer sur le bouton « OK ».

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 ».

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 ».

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 ».

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

Choisir « Panel Group Layout ». Puis, cliquer sur « OK ».

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 ».

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

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

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

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

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

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

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

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

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

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

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 ».

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

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

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 ».

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

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

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

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

Choisir « Database Navigator » dans le menu « View / Database ».

Déplier « MonApplicationADF » et « ConnArticleADF ».

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

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);

Voici le résultat.

IV-B-4 - Lancement de l'application

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

Voici le résultat.

V - REMERCIEMENTS

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

- www.developpez.com qui me permet de publier cet article ;

- Nono40 et djibril pour leurs outils ;

- thierryler pour ses conseils et ses encouragements ;

- Mickael Baron pour ses encouragements ;

- Erielle pour sa relecture orthographique rigoureuse.

VI - AUTRES PUBLICATIONS

Liste également visible sur la page perso.

- Design Patterns du « Gang of Four » appliqués à Java

- Application Struts pas à pas avec Eclipse (Web Tools Platform) et Tomcat

- Tests unitaires automatisés avec JUnit4

- Mécanisme de chargement des classes de Tomcat et partage de librairies versionnées entre plusieurs applications

- Intégration continue avec Continuum

- Génération de diagrammes de classes UML avec UMLGraph