POURQUOI CE SITE WEB ?

Le but de ce site web est de démontrer l’expertise de l’auteur vis-à-vis ce merveilleux outil de développement web qu’est Oracle Application Express (APEX). Quoi de mieux que de créer quelques petites applications pour démontrer ce qu’on peut faire avec APEX !

COMBINAISON DE « BOOTSTRAP » ET « UNIVERSAL THEME »

Nous avons réussi à « marier » le thème universel (Universal Theme (UT) – theme 42) avec un thème « Bootstrap » disponible sur le marché. Nous avons dû résoudre les conflits présents entre le cœur d’Apex et ce thème Bootstrap. Une fois fait, nous pouvons utiliser les avantages de ces deux thèmes dans chacune de nos pages.

CONTACT INFO

Le projet

Une simple liste d'utilisateurs contenant noms, âges et coordonnées, voilà un projet très simple afin de ne pas se perdre dans la complexité!

La gestion d’utilisateurs en utilisant une fenêtre de dialogue modale (fenêtre flottante), voilà le but de ce projet. Vous verrez aussi différentes façons d’afficher une même liste d'utilisateurs et constater les possibilités qui s'offrent à vous avec Apex.

Trois onglets vous donnent autant de types d'affichage ("Standard", "Amélioré" et "Personnalisé"). Sous chacun de ces onglets, vous aurez un exemple de rapport "Classique" et "Interactif". Veuillez consulter l'aide située à côté des onglets ou des boutons de rapport pour de plus amples détails.

Appuyez sur le bouton (dans la barre d'outils ici-bas) pour connaître les détails plus techniques démontrés sur cette page.

Essayez-la! N'hésitez pas à tester l'application, ajoutez et supprimez des utilisateurs, les données ne sont visibles que par vous!

Liste et écran de saisie « Standard »

Ce qu'on retrouve dans cette page

Rapport classique

Le rapport classique a été généré avec le Wizard de pages d'Application Express et présente les données telles quelles. Il inclut une barre de recherche (également générée par le Wizard) contenant quelques champs permettant d'effectuer des recherches.

Rapport interactif (Interactive Report)

Les données sont présentées de trois façons : sous forme d'icônes, de rapport et de façon détaillée. Utiliser les boutons « Choisir entre icônes, rapport et détail » pour sélectionner votre vue.

Le rapport interactif « Standard » affiché ici est celui généré par défaut par le Wizard – à l'exception des vues par icônes et détaillées qui ont été personnalisées par le programmeur.

Écran de saisie de l'utilisateur

L'écran de saisie de l'utilisateur est une fenêtre modale (flottante). Elle comporte trois sections (onglets) et utilise également des fenêtres modales pour modifier la photo et l'adresse de l'utilisateur.

Les items de page sont des items standards d'Apex et n'ont pas été personnalisés.

Liste et écran de saisie « Amélioré »

Ce qu'on retrouve dans cette page

Quelques règles CSS et quelques modifications nous ont permis d’améliorer l’expérience utilisateur de façon significative. En voici les grandes lignes :

Rapport classique

Deux champs de recherche sont maintenant présents et le look du bloc de recherche a été grandement amélioré. La recherche se fait maintenant à l’aide d’une requête Ajax (sans « soumission » de la page), ce qui la rend beaucoup plus performante.

L’affichage de la liste a été amélioré avec quelques règles CSS. Par exemple, la police de caractères a été augmentée et modifiée pour une police Google (Google Font), le quadrillage du rapport a aussi été modifié. Ceci n’est qu’un exemple pour démontrer qu’on peut faire à peu près n’importe quoi sur l’affichage des éléments standard d’Apex sans trop de difficulté.

Rapport interactif (Interactive Report)

Nous avons créé différentes vues de notre liste d’utilisateurs. Utilisez la liste déroulante Choix du rapport dans la barre d’outils du rapport interactif pour les essayer. Vous y verrez des exemples de tris et regroupements différents, des éléments en surbrillance, des colonnes différentes et plus encore! Vous pouvez même mettre le rapport plein écran en cliquant sur Agrandir plein écran. Vous pourriez aussi personnaliser votre rapport avec le menu menu Action et l’enregistrer pour utilisation future (non disponible dans notre exemple).

Écran de saisie de l’utilisateur

L’écran de saisie de l’utilisateur est une fenêtre modale (flottante). Elle comporte trois sections (onglets) et utilise également des fenêtres modales pour modifier la photo et l’adresse de l’utilisateur.

La disposition des données est différente à celle de notre écran « Standard ». Les champs et la police de caractères sont plus gros, les boutons sont positionnés en haut et les libellés au-dessus.

Liste et écran de saisie « Personnalisé »

Ce qu'on retrouve dans cette page

Les modèles (templates) de notre thème principal ont été personnalisés. Nous avons arrimé nos modèles de rapport, de région et de libellé pour qu’ils ressemblent à ceux de notre thème « Bootstrap » (acheté sur le web) autant au niveau visuel que sous le capot (code bootstrap généré).

Rapport classique

Nous utilisons quelques icônes, images et de la couleur pour rehausser l’apparence de notre rapport.

Pour davantage de simplicité, le bloc de recherche a été réduit à un seul champ et est fait avec une requête Ajax (sans « soumission » de la page), ce qui est très rapide. Le texte recherché est mis en surbrillance dans le résultat de recherche.

Les données peuvent être triées différemment en cliquant sur les entêtes de colonne.

Rapport interactif (Interactive Report)

Les données sont présentées sous plusieurs formes : sous forme d'icônes, de rapport et de liste détaillée. Utilisez les boutons « Choisir entre icônes, rapport et détail » pour sélectionner votre vue.

Nous avons créé différentes vues de notre liste d’utilisateurs. Utilisez la liste déroulante dans la barre d’outils du rapport interactif pour les essayer. Vous y verrez des exemples de tris et regroupements différents, des éléments en surbrillance, des colonnes différentes et plus encore! Vous pouvez même mettre le rapport plein écran en cliquant sur Agrandir plein écran. Vous pourriez aussi personnaliser votre rapport avec le menu menu Action et l’enregistrer pour utilisation future (non disponible dans notre exemple).

Vous pouvez voir les données des utilisateurs sous plusieurs formes. Utilisez la liste déroulante Choix du rapport dans la barre d’outils du rapport. Nous avons inclus des exemples de données regroupées et agrégées différemment pour vous montrer toute la puissance des rapports interactifs! Tout ceci est possible simplement en configurant le rapport, sans programmation.

Écran de saisie de l’utilisateur

L’écran de saisie de l’utilisateur est une fenêtre modale (flottante). Elle comporte trois sections (onglets) et utilise également des fenêtres modales pour modifier la photo et l’adresse de l’utilisateur.

L’écran de saisie est la même pour le rapport standard et interactif. Elle ressemble beaucoup à notre écran de saisie de la section « Amélioré » mais, sous le capot, on y retrouve que des composantes « Bootstrap »! Les modèles de régions, d’items, de dialogues modales et de boutons ont été refaits pour s’agencer parfaitement au framework voulu.

Rapport « Classique » ou « Interactif » ?

Il existe deux types de rapport sous APEX : Rapport classique ou interactif. Voyons quelques particularités propres à chacun.

Rapport Classique (Classic Report)

C'est le plus simple des deux types de rapport; il permet d’afficher habituellement une liste avec un nombre fixe de colonnes. On peut trier les rangées en cliquant sur l’entête d’une colonne.

On utilisera en général ce type de rapport lorsqu’on voudra afficher une liste toute simple ou, au contraire, si on désire l’agrémenter d’un ou plusieurs contrôles « personnalisés » qui sont externes au rapport et qui permettent d’interagir avec celui-ci (champ(s) de recherche, nombre de rangées affichées, etc.).

Rapport Interactif (Interactive Report)

Très puissant et hautement configurable, il est apprécié par son interface de recherche complète, ses différentes vues (personnalisables) d’une même liste, ses différents types d’affichage, de tri et regroupement, etc.

Il est un allié prisé par les utilisateurs et simplifie beaucoup la tâche des programmeurs qui n’ont qu’à configurer le rapport pour lui offrir les options voulues.

Ce type de rapport clé en main, intégré à même l’outil de développement, offre un avantage certain vis-à-vis d’autres outils de développement pour la gestion des données.

N’hésitez pas à explorer les différentes options disponibles dans la barre d’outils des rapports interactifs pour avoir un aperçu de la puissance que vous avez au bout des doigts.

Se connecter

Options

Liste des utilisateurs (IR)

Report Settings

LinkPhotoNom completAscendingGenreÂgeCourrielVilleTéléphone(s)
Alexandre Ashby28Alex.Ashby@tdassur.comToronto(555) 961-9013
Carole Leduc23cleduc@hydro.caToronto(541) 772-1223
Cecile Pilon34Blais.Cecile@cie.comParis00 34 123-212-987, Autre: 441-771-1233 ext. 1221
Chris Abbott54ChrisAbbott@abbott.ca
Claire Renaud41RC@cal.caToronto
Daniel Bushdbush@mblanche.com
David Roy62roy.david.223@hotmail.comLaval999-123-1133
Denis Labelle50Den21@me.comBoisbriand876-433-1223
Dominic Landrydom.landry@hydroquebec.com
Elizabeth Ashton31Elizabeth.Ashton@crayon.caParis00 34 915-212-900
Francesco Faubert37faubertfff@outlook.comMontreal1-877-123-4567, Autre: 123-123-1234
Francine Brunette37fbrunet@brunet.comBrooklyn(555) 961-9013 p.23, Autre: (555) 961-9999
Franck Talbot56FrankT@bombardier.comMontreal(555) 961-9013, Autre: (800) 276-7432
Francois Lemieux30Francoislemieux@apex.comBlainville441-771-1233 ext. 1024, Autre: (800) 276-7432
Frederic Belavance7fbelavance@stuart.com
Gabrielle Forestergforest@forestg.comMontreal(541) 772-1223
Gaston Tipton36Gtip@office.msftLaval(541) 772-1223, Autre: (800) 276-7432 ask telep.
Isaac Simard36Isaac.Simard@outlook.com(555) 961-9013
Jean Tracy39Tracy.Jean@rue.comBlainville
Jean-Paul Crete31jpcrete@dojo.ca
  • 1 - 20
* Ces données sont fictives (noms, adresses et courriels).

Recherche

Liste des utilisateurs

Photo
FaubertFrancescoFrancis Faubert
12 Papineau
Montreal (Quebec)
Canada    H0H 0H0
1-877-123-4567 Autre: 123-123-1234
 
ForesterGabrielleGabrielle Forester
65, 76e avenue
Montreal (Quebec)
Canada    H3G 1N9
(541) 772-1223
 
GalvinMaximeMaxime Galvin
12 Cremazie Est Blvd
Montreal (Quebec)
Canada    H3G 1N9
(800) 331-2211 Autre: 771-112-1234
 
HourcadeRichardRichard Hourcade
2500 Berri
#63
Toronto (Ontario)
Canada    H2H 101
441-771-1233
 
IrwinPierrePierre Irwin
101 Wicksteed Ave
Toronto (Ontario)
Canada    M4G 4H9
+1 416-467-2300
 
JohnsonScottScott Johnson
1 Hope St
Blainville (Quebec)
Canada
999-123-1133
 
LabelleMaelieMaelie Labelle
77 Best st.
Blainville (Quebec)
Canada    H3G 1N9
799-455-9866
 
LabelleDenisDenis Labelle
18 des Lotus
Boisbriand (Quebec)
Canada    H1B 3N2
876-433-1223
 
LambertSarah  
LanctotMaelMarc Lanctot
2500 Berri
apt. 12
Montreal (Quebec)
Canada    H1H 6Y1
712-432-6324
 
LandryDominicDominic Landry (Quebec)
Canada    G2B 1X3
 
LeducCaroleCarole Leduc
7100 Wolf
Building 2
Toronto (Ontario)
Canada    H7E 4X9
(541) 772-1223
 
LemieuxFrancoisFrancois Lemieux
25 Berri
apt. 101
Blainville (Quebec)
Canada    J7E 4B5
441-771-1233 ext. 1024 Autre: (800) 276-7432
 
LopesKevin  
LordMireilleMireille Lord
25, 34th street
#101
New York (NY)
USA    10023
799-455-9866 Autre: 1-555-1123 #25
 
MoreauNick
799-455-9866
 
RenaudClaireClaire Renaud
25 Claxton Blvd
Toronto (Ontario)
Canada    M6G 0H0
 
RoyPascalPascal Roy
1225 Paille
Laval (Quebec)
Canada    J2H 2Z1
(800) 331-2211 Autre: 123-123-1234 x.11
 
RoyMartineMartine Roy
1 Ouimet
apt. 3
Laval (Quebec)
Canada
999-123-1133
 
RoyDavidDavid Roy
2500 St-Martin
Laval (Quebec)
Canada    H7E 4X9
999-123-1133