Auto FormationOracle Application Express

APEX App Builder Initiation

Initiation à APEX Builder

Prise en main de l'atelier de construction d'applications.

Cet article est un guide d'initiation pour la prise en main de l'atelier de construction d'application. Le principal objectif est de créer une application sur les structures d'une base de données relationnelle qui a été développée dans l'article d'initiation précédent : APEX SQL Workshop Initiation.  Cette base de données regroupe les informations concernant le classement, en nombre d'exemplaires, des jeux vidéo vendus dans le monde (les informations ont été extraites depuis le site www.vgchartz.com).  Ce projet va permettre à titre pédagogique, de mettre en évidence les différentes fonctionnalités, la rapidité et l'efficacité du constructeur d'application d'APEX (App Builder) :

Introduction

Cette série d'articles vient en complément des tutoriels officiels que propose Oracle avec APEX, l'objectif à terme étant de mettre en évidence différentes solutions alternatives et évolutives permettant une coopération entre les logiciels de gestion de base de données comme PostgreSQL, MySQL ou Oracle Database, afin de réduire les coûts de développement et d'éviter le gaspillage de temps de manière considérable.

Que vous soyez étudiant, développeur, professionnel IT, décideur ou tout simplement curieux, à la recherche d'idées innovantes, ces articles vont vous permettre d'investir rapidement, à titre d'auto formation, la pratique d'utilisation de l'atelier de développement rapide d'applications que vous pourrez déployer en interne et/ou sur internet.

L'objectif ici est de vous permettre d'apprendre les concepts et les bases du développement avec Application Express par la pratique, notamment si vous êtes débutant, pour pouvoir ensuite consolider vos connaissances avec d'autres articles plus avancés sur APEX et construire des applications beaucoup plus sophistiquées.

Pré requis

Pour suivre cet article, vous devez avoir un environnement APEX via un espace de travail (Workspace) opérationnel. Pour installer et créer votre espace de travail, si ce n'est déjà fait, reportez vous à APEX - Enregistrement & Workspace.

Vous devez avoir terminé la conception de votre base de données en ayant suivi l'article d'initiation précédent : APEX SQL Workshop Initiation.

Sites :  apex.oracle.com, tutorials, cloud free, apex+autonomous

Construction rapide d'une application à partir de la structure de la base de données

Le schéma de votre base de données est constitué des trois tables : GAMES, PUBLISHERS et CONSOLE_GAMES. La table principale GAMES contient le classement des ventes de jeux vidéo dans le monde. La table PUBLISHERS est la liste des éditeurs de jeux vidéo et la table CONSOLE_GAMES est la liste des types de console de jeux. PUBLISHERS et CONSOLE_GAMES sont des tables de consultation (lookup) vis à vis de GAMES et sont référencées via des clé étrangères :

Création de l'application à partir de la table GAMES

Le tutoriel qui est décrit ici est effectué dans un Workspace sur apex.oracle.com mais vous pouvez exécuter cet atelier dans n'importe quel autre environnement où votre Workspace a été installé.

1. Rendez vous sur apex.oracle.com et connectez vous à votre espace de travail

2. Cliquez sur « SQL Workshop », le menu principal de l'atelier SQL s'affiche. Cliquez sur « Navigateur d'objet »

3. Sélectionnez la table GAMES dans la barre de navigation de gauche. Cliquez sur « Créer une application ».

4. Cliquez à nouveau sur « Créer une application ».

La page de l'assistant de création rapide d'application s'affiche. Vous pouvez modifier ici, si vous le désirez, le nom et l'apparence du programme. Faites défiler la page vers le bas jusqu'au menu « fonctionnalités » et cliquez sur « Cocher tout».

Des fonctionnalités d'administration de l'application sont ajoutées. Vous pouvez éventuellement n'en sélectionner que certaines.

Faites défiler la page vers le haut et cliquez sur « Ajouter une page».

Sélectionnez « Etat interactif », une page  popup (modal) s'affiche.

Nous allons ajouter une fonctionnalité pour la gestion des types de consoles de jeux.

  • Cliquer sur le bouton de sélection de table ou de vue et choisissez CONSOLE_GAMES (1).
  • Entrez le nom de la page : « Consoles » (2)
  • Cochez la case « Inclure le formulaire » (3). Cela ajoutera une page pour ajouter, modifier et supprimer les éléments de la table.
  • Développez la liste de sélection « Avancé » et cochez la case « Définir comme page d'administration » (4), (5). Cette page ne sera accessible que pour les administrateurs de l'application.
  • Vous pouvez éventuellement « Définir l'icône » (6) et entrer un texte d'aide (7).

Cliquez sur « Ajouter une page»

5. Vous revenez à la page principale de l'assistant de création rapide d'application. Cliquez sur « Créer une application »

L'état d'avancement de création s'affiche. Lorsque le traitement est terminé, la page principale de conception du projet GAMES s'affiche.

Vous pouvez accéder ici à toutes les pages de votre application en mode développement.

Nous allons maintenant tester le programme. Cliquez sur  « Exécuter l'application ».

Test de l'application

La page de login s'ouvre. Entrez les informations de connexion de votre USER de développement en cours.

Développez le menu en cliquant sur le bouton en haut à gauche et cliquez sur « Games - Recherche ».

Vous pouvez observer en bas de la page, la barre d'état qui vous permet d'appeler la page d'accueil APEX, les options de débogage, de contrôle de la session et de retour sur le développement de l'application et/ou de la page en cours.

La page est composée de trois régions : un module de recherche à facets dans la partie gauche du cadre « Game - Recherche », une barre de boutons qui contient un champ de recherche et le bouton « Réinitialiser », et le corps de la page constitué par l'état classique qui exécute la requête SQL SELECT sur la table GAMES. Vous pouvez remarquer que la colonne du rapport « Image Game » contient du code html qui n'est pas interprété par le navigateur. Nous allons modifier cela, cliquez sur le bouton « Modifier une page 3 » dans la barre d'état en base de la page.

Vous pouvez remarquer les trois régions dans la « Page Rendering » (cadre de navigation de gauche). Cliquez sur « Games » (1), développer « Colonnes » et sélectionnez « IMAGE_GAME » (2).

Faites défiler  la « Page Processing » (cadre de navigation de droite) jusqu'au thème « Sécurité » et désactivez le contrôle des caractères spéciaux d'échappement (3). Cette option est toujours active par défaut, elle permet d'éviter les injections SQL s'il y a des champs de saisie. Cliquez sur « Enregistrer » (4) puis sur le bouton d'exécution (5).

Vous pouvez constater maintenant que la colonne « Image Game » affiche bien le logo du jeu. Cliquez à nouveau sur le bouton « Modifier une page 3 » dans la barre d'état.

Nous allons mettre en évidence les colonnes « Position » et « Game » .  Sélectionnez la colonne « POSITION » dans la « Page Rendering ». Faites défiler à droite la « Page Processing »  jusqu'au thème « Formatage des colonnes». Entrez le code suivant dans le champ « Expression HTML » :

<font size="3" color="red"><b>#POSITION#</b></font>

Procédez de même pour le champ « GAME »

<font size="3" color="blue"><b>#GAME#</b></font>

Remarque: la valeur des colonnes retournées par la requête SQL SELECT est désignée par le nom de la colonne encadré par "#" (#POSITION#, #GAME#) .

Naviguez vers la colonne « PUBLISHER_ID ». Vous pouvez vérifier que le type de colonne est « Texte brut (en fonction d'une liste de valeur) »

En effet, la colonne « PUBLISHER_ID » de la table « GAMES » est une clé étrangère qui fait référence à la clé primaire de la table « PUBLISHER_GAMES ». Ce type de champ va appeler une liste de valeurs (LOV) qui va exécuter automatiquement un ordre SQL SELECT pour aller rechercher la valeur à afficher à la place de la valeur de la clé étrangère. La liste de valeur utilisée est celle qui a été créée automatiquement quand l'application a été conçue parce qu'une contrainte FOREIGN KEY avait été définie entre les deux tables. Ne modifiez pas le type de la colonne. Faites défiler à droite le cadre « Page Processing »  jusqu'au thème  « Liste de valeurs (LOV) »

Remplacer le type « Composant partagé » (1) par « Requête SQL » (2). La liste de valeurs qui a été prédéfinie va être remplacée par un ordre SQL SELECT.

Entrez l'ordre SQL suivant dans le champ « Requête SQL » :

select '<font size="3" color=“green"><b>'|| PUBLISHER || '</b></font>' as PUBLISHER, PUBLISHER_ID
from PUBLISHERS
order by PUBLISHER

La requête SELECT d'une liste de valeur doit ramener les données de deux colonnes : la valeur à afficher, la clé primaire de l'enregistrement de la table.  La colonne PUBLISHER est habillée avec du code HTML afin d'afficher le nom de l'éditeur en vert. La valeur de la clé primaire est récupérée via la colonne PUBLISHERS.PUBLISHER_ID. Cette valeur est automatiquement utilisée pour établir la jointure avec la table GAMES via la clé étrangère GAMES.PUBLISHER_ID.

Faites défiler  la « Page Processing » (cadre de navigation de droite) jusqu'au thème « Sécurité » et désactivez le contrôle des caractères spéciaux d'échappement :

Naviguez vers la colonne « CONSOLE_ID » (1) :

Faites défiler à droite le cadre « Page Processing »  jusqu'au thème  « Liste de valeurs (LOV) ». Remplacez le type « Composant partagé » (2) par « Requête SQL » (3) et entrez l'ordre SQL suivant (4) :

select '<img src="'|| REGEXP_REPLACE(CONSOLE_IMG_HTML, 'alt=".*"', '') || '">' as CONSOLE, CONSOLE_ID
from CONSOLE_GAMES
order by 2

La fonction REGEXP_REPLACE(CONSOLE_IMG_HTML, 'alt=".*"', '') élimine la chaîne de caractère ' alt="NOM_CONSOLE" ' sur la colonne CONSOLE_IMG_HTML afin que seul l'URL de l'image soit récupéré.

Faites défiler  la « Page Processing » (cadre de navigation de droite) jusqu'au thème « Sécurité » et désactivez le contrôle des caractères spéciaux d'échappement (5). Cliquez sur « Enregistrer » (6) puis sur le bouton d'exécution (7).

La page affiche maintenant correctement les images et les libellés.

Cliquez sur le lien du menu de gauche « Games - Etat » pour ouvrir la page 5 de l'application.

Etat interactif

Comme pour la page 3, vous pouvez remarquer que la colonne du rapport « Image Game » contient du code html qui n'est pas interprété par le navigateur. Les autres colonnes ne sont également pas mises en forme. Pour modifier cela il faut procéder comme pour la page 3, les colonnes étant identiques. cliquez sur le bouton « Modifier une page 5 » dans la barre d'état en base de la page.

Cliquez sur « Games », développer « Colonnes » et pour chaque colonne effectuez les modifications suivantes:

  • « IMAGE_GAME » - Faites défiler  la « Page Processing » jusqu'au thème « Sécurité » et désactivez le contrôle des caractères spéciaux d'échappement.
  • « POSITION » - Faites défiler à droite la « Page Processing »  jusqu'au thème « Formatage des colonnes ». Entrez le code suivant dans le champ « Expression HTML » : 
 <font size="3" color="red"><b>#POSITION#</b></font>
  • « GAME » - Faites défiler à droite la « Page Processing »  jusqu'au thème « Formatage des colonnes ». Entrez le code suivant dans le champ « Expression HTML » : 
<font size="3" color="blue"><b>#GAME#</b></font>
  • « PUBLISHER_ID » - Faites défiler à droite le cadre « Page Processing »  jusqu'au thème  « Formatage des colonnes ». Entrez le code suivant dans le champ « Expression HTML » : 
<font size="3" color="green"><b>#PUBLISHER_ID#</b></font>

Cliquez sur « Enregistrer » puis sur le bouton d'exécution.

Listes de valeurs

La colonne « CONSOLE_ID » a été liée automatiquement à une liste de valeurs qui a été pré-définie à la création de l'application. Cependant, les valeurs affichées sont de type "chaîne de caractères" et nous voudrions afficher l'image qui est référencée par le code HTML de la colonne « CONSOLE_IMG_HTML » de la table « CONSOLE_GAMES ». L'état interactif ne permet pas de remplacer les listes de valeur par du code SQL. Il est donc nécessaire de créer une liste de valeurs personnalisée. Pour cela cliquez sur le lien « Application nnnn » dans la barre d'état en bas de page puis sur « Composants partagés »

Cliquez sur le lien « Liste de valeurs (LOV) »

Cliquez sur le bouton « Créer »

Sélectionnez « Entièrement nouveau » et cliquez sur « Suivant »

Entrez le nom de la liste de valeur : « CONSOLE_HTML » et cliquez sur « Suivant »

Entrez le code SQL suivant :

select REGEXP_REPLACE(CONSOLE_IMG_HTML, 'alt=".*"', '') as CONSOLE, CONSOLE_ID
from CONSOLE_GAMES
order by 2

Cliquer sur le bouton « Créer ».

La liste de valeur « CONSOLE_HTML » ayant été ajoutée, retournez sur la page 5

Modifiez la liste de valeur utilisée pour le champ « CONSOLE_ID » :

Faites défiler à droite le cadre « Page Processing »  jusqu'au thème  « Liste de valeurs (LOV) ». Remplacer la liste « CONSOLE_GAMES.CONSOLE » par « CONSOLE_HTML ». Faites défiler  la « Page Processing » jusqu'au thème « Formatage des colonnes ». Entrez le code suivant dans le champ « Expression HTML » : 

 <img src="#CONSOLE_ID#">

#CONSOLE_ID# sera remplacé par la valeur retournée par l'ordre SQL de la liste.

Cliquez sur « Enregistrer » puis sur le bouton d'exécution.

Nous allons maintenant pouvoir améliorer les fonctionnalités de l'application. Rendez vous sur la page APEX App Builder Initiation