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)

LinkNomAscendingPrenomNaissanceRueVilleÉtatPaysRemarque
AbbottChris21-JUL-66
AbelMichel12-APR-739 rue OliverMontrealQuebecCanada
AndersonSue03-JUN-9952 Phillips #1WashingtonNYUSAUtilisatrice fidèle
AshbyAlexandre29-FEB-927811 Business RdTorontoOntarioCanada
AshtonElizabeth06-DEC-88345 Ste-CatherineParisParisFrance
BaconSerge01-DEC-88
BelavanceFrederic03-SEP-13
BelavanceRosalie07-AUG-0437 de MatagamiBlainvilleQuebecCanada
BradfordWendy05-SEP-991668 Church AveBrooklynNYUSA
BrennanWilliam16-JUN-9269 Cure-LabelleLavalQuebecCanada
BrunetteFrancine30-OCT-821670 Rogers AveBrooklynNYUSA
BushDaniel
CharronRaymond01-OCT-4612 Muse streetLorraineOntarioCanada
ClaudeSylvain23-SEP-819911 Maplewood RdTorontoOntarioCanada
CreteJean-Paul13-JUL-89
DionNathalie
DragutMathieu77 FabreMontrealQuebecCanada
FaubertFrancesco28-DEC-8212 PapineauMontrealQuebecCanada
ForesterGabrielle65, 76e avenueMontrealQuebecCanada
GalvinMaxime30-JAN-6212 Cremazie Est BlvdMontrealQuebecCanada
HourcadeRichard07-SEP-552500 Berri, #63TorontoOntarioCanada
IrwinPierre02-FEB-65101 Wicksteed AveTorontoOntarioCanada
JohnsonScott25-AUG-471 Hope StBlainvilleQuebecCanada
LabelleDenis01-JAN-7018 des LotusBoisbriandQuebecCanada
LabelleMaelie04-OCT-0677 Best st.BlainvilleQuebecCanada
LabelleStephane18-SEP-7137 de MatagamiBlainvilleQuebecCanadaVoici l'auteur de ce site web!
LambertSarah04-SEP-02
LanctotMael18-APR-072500 Berri, apt. 12MontrealQuebecCanada
LandryDominicQuebecCanada
LeducCarole10-MAR-977100 Wolf, Building 2TorontoOntarioCanada
LemieuxFrancois21-SEP-9025 Berri, apt. 101BlainvilleQuebecCanada
LopesKevin09-JUN-92
LordMireille23-SEP-7725, 34th street, #101New YorkNYUSA
MoreauNick09-NOV-61
PilonCecile13-MAY-8612 rue PérignonParisParisFrance
RenaudClaire21-MAR-7925 Claxton BlvdTorontoOntarioCanada
RoyDavid20-FEB-582500 St-MartinLavalQuebecCanada
RoyMartine17-SEP-821 Ouimet, apt. 3LavalQuebecCanada
RoyPascal25-DEC-751225 PailleLavalQuebecCanada
SimardIsaac02-JAN-84
St-PierreJeff01-SEP-66163 Kenwook avanueTorontoOntarioCanada
TalbotFranck21-SEP-6444 Notre-Dame, #91MontrealQuebecCanada
TanguayJohn03-MAY-93
TannerSonia29-JUL-6310001 champ-de-marsLavalQuebecCanada
TiptonGaston02-OCT-8477 Charron #10LavalQuebecCanada
TracyJean10-AUG-811007 de Tracy, #12BlainvilleQuebecCanada
TravisMartin04-APR-95
TremblayJennifer27-JUL-92Rene-LevesqueBlainvilleQuebecCanada
TrudeauLinda22-DEC-6530 Essex StLavalQuebecCanada
TurnerYvon101 RogersBlainvilleQuebecCanada
WalshKathleen24-JAN-48225 Bines, #52BrooklynNYUSA
WolfSimon01-JAN-88125 MailleQuebecQuebecCanada
  • 1 - 52
* Ces données sont fictives (noms, adresses et courriels).

Recherche

résultats

Liste des utilisateurs

Téléphone
Stephane LabelleM47info@apexlook.caBlainvilleQuebec(888) 123-4567
Sue AndersonF19sueand@hotmail.comWashingtonNY1 (882) 992-1633
Chris AbbottM52ChrisAbbott@abbott.ca   
Michel AbelM45 MontrealQuebec 
Alexandre AshbyM26Alex.Ashby@tdassur.comTorontoOntario(555) 961-9013
Elizabeth AshtonF30Elizabeth.Ashton@crayon.caParisParis00 34 915-212-900
Serge BaconM30    
Jennifer TremblayF26RBelavance@stuart.comBlainvilleQuebec(541) 772-1223
Frederic BelavanceM5fbelavance@stuart.com   
Cecile PilonF32Blais.Cecile@cie.comParisParis00 34 123-212-987
Wendy BradfordF19 BrooklynNY 
William BrennanM26wbrennan@williamb.comLavalQuebec876-433-1223
Francine BrunetteF36fbrunet@brunet.comBrooklynNY(555) 961-9013 p.23
 Daniel Bush  dbush@mblanche.com   
Raymond CharronM72craymond@ye.comLorraineOntario799-455-9866