Le Tutoriel de Oracle APEX pour les débutants (APEX 5.0)

View more Tutorials:

1- Introduction

Dans ce document, je vais vous donner des instructions de travailler avec  Oracle Application Express (Oracle APEX) 5.x:
Vous pouvez voir le document de l'instruction sur  l'installation et de la configuration de l' Oracle APEX à:

2- Créer Workspace

Tout d'abord, vous devez vous connecter au système d'administration d' Oracle APEX afin de déclarer un Workspace. Un Workspace fonctionnera avec un SCHEME dans la base de données. Workspace contient des applications (y compris un système de formulaires, rapports, etc.), la gestion des utilisateurs qui participent à la programmation ou les utilisateurs qui utilisent l'application.
Vous devez créer un nouveau  Workspace:
Saisissez:
  • Workspace Name: DEV_WORKSPACE
  • Workspace ID: 1234567

 
Vous pouvez sélectionner un  SCHEMA disponible dans  Database, ici je crée un nouveau  SCHEMA nommé  DEV, avec le mot de passe  dev123.
Si vous utilisez  Oracle 12c, le nom du  Schema peut être commencer par  ##. Par exemple  ##DEV.
Dans l'étape précédente, vous avez créé un  SCHEMA nommé  DEV. Cela signfie qu'un  user database est créé et nommé  DEV.
​​​​​​​
Dans cette étape, vous devez déclarer un administration  User de  Workspace, Il n'est pas un  user database, il est un  user qui gère ce  APEX Workspace, il est capable de créer des applications, de créer des autres  APEX user qui joue le rôle du programmeur, ou un utilisateur de l'application,...
Votre  Workspace est créé. Vous pouvez voir la liste de  Workspace en cours et les éditer si vous voulez.

3- Travailler avec Workspace

Dans l'étape au- dessus, vous avez créé un  Workspace nommé  DEV_WORKSPACE. Maintenant nous allons nous indentifier et travailler avec ce  Workspace.
Saisissez:
  • Workspace: DEV_WORKSPACE
  • User Name: devadmin
  • Password: devadmin123
Dans la première fois que vous vous connectez au  Workspace, le système vous oblige à modifier votre mot de passe, mais vous pouvez garder votre mot de passe intact.
Vous pouvez vous connecter à l'espace du travail (Workspace)  DEV_WORKSPACE

4- Le gestionnaire de l'User et du Group dans Workspace

Après que vous vous connectez à  Workspace comme une acte d' admin vous pouvez créer des  user et des  group pour  Workspace.
Saisissez:
User dev01 a été créé.
Vous pouvez maintenant vous déconnecter (logout) du système pour vous connecter avec l'utilisateur dev01. Vous êtes maintenant prêt à programmer Oracle APEX.

5- Afficher le tableau et les données

Vous devez vous connecter à un user comme rôle d'un programmeur.
Regardez Objects in Schema via Object Browser.
Dans l'étape précédente, vous avez créé un Schema DEV via  Oracle APEX, ce  schema dispose actuellement de tables système et de certaines tables DEMO disponibles dans Oracle APEX et certaines Sequence relatives.

6- Créer des applications (Application)

Dans  Oracle APEX vous pouvez créer une application conformément à l'un des trois types suivants:
  1. Desktop Application
  2. Websheet Application
  3. Mobile Application
Pour un débutant  Oracle APEX, il est préférable d'avoir un exemple avec Database Desktop Application. En fait, cette application fonctionne toujours sur le Web, mais son interface est assez similaire à une application de Desktop typique.
Dans ce document, je vous donne des instructions pour que vous puissiez créer une application  Hello World Oracle Apex sous forme  Database Desktop Application.

6.1- Créer Database Desktop Application

Dans cette partie, nous allons créer une nouvelle  Database Desktop Application:
Cliquez sur le bouton  Create pour créer une nouvelle application:
Saisissez le nom de votre application:
  • Hello Database Desktop Application
Par défaut, la page  Home est créée simultanément avec l'application. Vous pouvez ajouter d'autres pages à l'application en cliquant sur "Add Page". Il est préférable de les ajouter plus tard.
Votre application a été créée. Son ID est 115 et il a deux pages Login & Home.
Actuellement, la page  Home n'a pas été conçue. Cependant, vous pouvez cliquer sur l'icône pour tester le web.

6.2- Créer votre première page

Ensuite, nous ajoutons une page affichant une liste de départements (tableau DEPT) et une page utilisée pour créer et modifier l'information des départements. Pour être simple, nous créons cette page sous la forme d'un modèle d' Oracle APEX disponible. Dans la partie suivante, je vais vous demander de créer une nouvelle page à partir d'une page vierge afin que vous puissiez bien comprendre le problème.
Sélectionnez  "Form on a Table with Report". Avec ce modèle  Oracle APEX vous fournira deux pages qui incluent une page de la liste des départements ( DEPT) et une forme de création (et d'édition) d'informations des départements.
D'abord,  Oracle APEX ous oblige à saisir les informations de la page contenant la liste des départements ( DEPT). Page Number est un attribut important que vous devez rappeler. J'accorde Page Number = 2 de cette page. (Remarque: la page d'accueil contient Page Number = 1).
Sélectionnez la table  DEPT:
Saisissez des informations pour  Menu:
  • New Navigation Menu Entry: Dept List (2)
Choisissez des colonnes d'affichage:
Voici la page pour entrer les informations du département. Ici, j'assigne  Page Number = 3.
Page Mode:
  • Normal: Cela signifie que lorsque vous cliquez sur la création d'un nouveau département, le Web se déplacera vers une nouvelle page afin de pouvoir saisir les informations du département.
  • Model Dialog: Cela signifie que lorsque vous cliquez sur la création d'un nouveau département, une boîte de dialogue s'affiche afin que vous puissiez saisir les informations.
Sélectionnez la colonne de clé primaire (Primary Key):
Lorsque vous créez un nouveau enregistrement  DEPT, la colonne  DEPTNO va être automatiquement attribuée une valeur par  DEPT_SEQ sequence.
Deux pages ont été créées. Tout d'abord, procédez à un essai.
D'accord, tout est parfait. Revenez à l'écran de conception pour découvrir ce que Oracle APEX a créé.
Oracle APEX crée 2 pages sous forme du  "Interactive Report" et  "DML Form".
Cliquez sur la page  "Form on DEPT (3)" pour éditer.
Dans l'image illustrative ci-dessus, vous verrez que l'écran de conception est divisé en trois parties:
  1. Les éléments de la page, y compris les régions (Regions), les boutons et le traitement (Processing),...
  2. ​​​​​​​L'interface de la page. Une page a habituellement six régions:

  • PAGE HEADER
  • PAGE NAVIGATION
  • BREADCRUMB BAR
  • CONTENT BODY
  • FOOTER
  • INLINE DIALOGS
    ​​​​​​​3. Lorsque vous sélectionnez un élément de la page comme indiqué dans la partie 1, ses attributs s'affichent dans la partie 3.
Exemple: Vous cliquez sur l'élément  PAGE, et changez l'attribut de  Page Mode en  "Model Dialog". Et cliquez sur  save, comme l'image de l'illustration ci-dessous:
Et réexécutez cette page web.
Une  Dialog sera ouvrerte et elle vous permet de saisir l'information de nouveau département.

6.3- Créer une page à partir de zéro

Dans les parties ci-dessus, je vous ai présenté comment créer rapidement un Web avec des codes de traitement créés automatiquement par Oracle APEX. Afin de comprendre Oracle APEX beaucoup plus, dans cette partie, je recréerai l'exemple ci-dessus à partir de zéro sans utiliser les Template (modèles) disponibles d' Oracle APEX.
C'est le modèle de 2 pages que je vais créer:
  • Create Page
Sélectionnez une page vierge:
La page de la liste des départements ( DEPT) sera mise sur  Menu.
Une page vierge a été créée. Nous créons la liste de départements, cette région sera incluse dans la section​​​​​​​ "Content Body".
Une nouvelle région (region) a été créée:
Saisissez l'information dans la région que vous venez de créer:
  1. Title: Dept List
  2. Type: Interactive Report
  3. Source SQL Query: Select DEPTNO, DNAME, LOC from DEPT
  4. SAVE
Maintenant, vous pouvez presse le bouton  RUN ( ) pour tester.
Vous devez ajouter une colonne contenant des icônes d'édition, comme indiqué ci-dessous:
Choisissez  Attributes de la section  "Dept List". Et définissez les propriétés comme indiqué ci-dessous:

Link Column = Link to Single Row View

Cela signifie que lorsque vous cliquez sur l'icône des enregistrements (modifier), l'application sautera sur une page par défaut (affiche les informations d'enregistrement)

Link Column = Link to Custom Target

Utilisez pour sauter à votre page personnalisée, pour afficher les informations d'enregistrement. (A mentionner plus tard).
Réexecutez votre page de web:
La page Web se tournera vers une page par défaut et affichera les informations que vous avez sélectionnées.

Form

Ensuite, nous créons une page Form, lorsque vous cliquez pour modifier ou créer un département, il se tournera vers cette page.
Une page vierge est créée, nous créerons une région contenant   Form.
Saisissez les informations pour la nouvelle région qui vient d'être créer:
  • Title: Form on Dept
  • Type: Static Content
Remarque: Avec le type  "Region Type = Static Content". Vous devez créer des  Item dans cette région, et écrire les gestionnaires pour afficher et d'écrire des données de la bases de données.
Nous créerons 3 champs (field):
  • Hidden: DEPTNO
  • Text Field: DNAME
  • Text Field: LOC
Glissez et déplacez un élément  Hidden au zone  ITEMS comme l'illustration ci-dessous.
Le réglement des propriétés pour Item:
Similairement, créez deux  TEXT-FIELD:
Testez:
L'utilisateur sélectionne un enregistrement sur la liste (page 4) à modifier, il sera tourné vers la page Form (page 5) et passera l' ID de l'enregistrement. Vous devez effectuer un Process (en Pre-Rendering) à la page 5 pour charger les données et afficher  Form:
Créer un  Process dans:
  • Pre-Rendering/After Header
Ce  Process (Processus) sera appelé avant que la page est affichée.
Saisissez:
  • Name: Fetch/load row From DEPT
  • Type: Automatic Row Fetch
  • Table Name: DEPT
  • Primary Key Column: DEPTNO
  • Primary Key Item: P5_DEPTNO
Retournez la page 4 ( Dept List (4)) pour établir les paramètres passés de la page 4 à la page 5.
Save et tester la page web:
Ensuite, nous ajoutons de nouvelles fonctions de création et des fonctions de sauvegarde de l'enregistrement comme indiqué ci-dessous:
Sur la page 4:
Ensuite, sautez à la page 5.
Glissez et déplacez des  Button sur les positions sur l'écran de conception comme indiqué ci-dessous:
Lorsque vous cliquez sur  CANCEL sur la page 5, le site web irai à la page 4.
Les réglages des propriétés pour le bouton  CANCEL:
  • Button Name: CANCEL
  • Label: Cancel
  • Action: Redirect to Page in this Application
  • DELETE_IMMEDIATELY

Lorsque vous cliquez sur le bouton  DELETE_IMMEDIATELY, l'enregistrement sera supprimé spontanément. Nous allons définir les attributs de ce buton:
  • Button Name: DELETE_IMMEDIATELY
  • Label: Delete (Immediately)
  • Action: Submit Page
  • Database Action: SQL DELETE Action
Ce  Button affichera si  P5_DEPTNO n'est pas  null:
  • Condition Type: Item not null
  • Condition Item: P5_DEPTNO
  • DELETE_CONFIRM

Lorsque vous cliquez sur ce bouton, l'application demande à l'utilisateur de vouloir supprimer ce document ou non.
Configurer les attributs pour le bouton DELETE_CONFIRM:
  • Button Name: DELETE_CONFIRM
  • Label: Delete (confirm)
  • Action: Redirect to URL
  • Target: javascript:apex.confirm('Are you sure?','DELETE_CONFIRM');
  • Database Action: SQL DELETE action
La condition pour cet affichage de button sur la page.
  • Condition Type: Item is NOT NULL
  • Condition Item: P5_DEPTNO
Remarque:
apex.confirm(text, BUTTON_NAME) est une fonction  javascript disponible dans  APEX, il va afficher une  Dialog demande une action de confirmation de l'utilisateur avant d'exécuter l'action de définition sur​​​​​​​ BUTTON_NAME.
Ce  Button va afficher sur la page web si  P5_DEPTNO n'est pas  null.
Vous pouvez également définir une variable  javascript et l'utiliser dans l'ensemble de la page  web.
// Declare a variable named htmldb_delete_message
var htmldb_delete_message='Would you like to perform this delete action?';

// Or:
// "DELETE_CONFIRM_MSG" is a constant available in APEX.
// It has value: Would you like to delete this thực action?


var htmldb_delete_message='"DELETE_CONFIRM_MSG"';


// Then can use this variable in the whole page.

apex.confirm(htmldb_delete_message,'DELETE_CONFIRM');
  • SAVE_EDIT

Ce  Button affichera pour que l'utilisateur modifie l'enregistrement disponible sur DB (faites une déclaration Update  sur DB).
  • Button Name: SAVE_EDIT
  • Label: Save (edit)
  • Action: Submit Page
  • Database Action: SQL UPDATE action
Les conditions pour que ce  button affiche sur la page.
  • Condition Type: Item is NOT NULL
  • Condition Item: P5_DEPTNO
  • SAVE_CREATE

  • Button Name: SAVE_CREATE
  • Label: Save (create)
  • Action: Submit Page
  • Database Action: SQL INSERT action
  • Condition
    • Type: Item is NULL
    • Item: P5_DEPTNO
  • Process

Ensuite, nous ajoutons 3 Process (processus).
  1. Get PK: Vérifier le champ P5_DEPTNO est attribué de la valeur ou pas, si non, nous allons attribuer la valeur pour ce champ à partir de DEPT_SEQ (Utiliser au cas de l'Insert).
  2. Process Row of Dept: Exécuter une action (Insert, Update ou Delete).
  3. Reset Page: Supprimer des status.
Créer un nouveau  Process nommé  "Get PK", et saisir des valeurs de l'attribut:
  • Name: Get PK
  • Type: PL/SQL Code
  • PL/SQL Code:
begin
    if :P5_DEPTNO is null then
        select DEPT_SEQ.nextval
          into :P5_DEPTNO
          from dual;
    end if;
end;
Ensuite, vous créez un  Process nommé  "Process Row of DEPT" avec des attributs:
  • Name: Process Row of DEPT
  • Type: Automatic Row Processing (DML)
  • Table Name: DEPT
  • Primary Key Column: DEPTNO
  • Primary Key Item: P5_DEPTNO
  • Support Operations:
    • Insert
    • Update
    • Delete
Puis, vous créez un  Process baptisé  "Reset Page" et attribuez la configuration pour ce processus "Utilisé uniquement pour supprimer l'enregistrement".
Les conditions pour lesquelles ce  Process est exécuté est que le  request comprend le mot  "DELETE", cela signifique qu'il sera exécuté lorsque vous cliquez sur le bouton  DELETE_IMMEDIATELY ou  DELETE_CONFIRM.

Après que le  Process est exécuté ( Insert, update, delete) sur la page 5, pour retourner à la page 4, vous avez besoin un processus dans  "After Processing".
Maintenant, vous pouvez  SAVE les changements de la conception de l'écran et tester l'application:

7- Le didactitciel de la programmation Oracle APEX (Continue)

Vous pouvez lire le reste du document:

View more Tutorials: