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

Application Development Framework

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 : [6 commentaires Donner une note  l'article (5)]

Article lu   fois.

L'auteur

HomeViadeoLinkedIn

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

Une 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 la 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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2009 Régis POUILLER. Aucune reproduction, même partielle, ne peut être faite de ce site ni 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. Droits de diffusion permanents accordés à Developpez LLC.