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

Options

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

Liste des utilisateurs

Edit MStephane Labelle047 47 - Majeurinfo@apexlook.caBlainville(888) 123-4567, Autre: 987-654-3210
Edit FSue Anderson019 19 - Majeursueand@hotmail.comWashington1 (882) 992-1633
Edit MChris Abbott052 52 - SeniorChrisAbbott@abbott.ca  
Edit MMichel Abel045 45 - Majeur Montreal 
Edit MAlexandre Ashby026 26 - MajeurAlex.Ashby@tdassur.comToronto(555) 961-9013
Edit FElizabeth Ashton030 30 - MajeurElizabeth.Ashton@crayon.caParis00 34 915-212-900
Edit MSerge Bacon030 30 - Majeur   
Edit FJennifer Tremblay026 26 - MajeurRBelavance@stuart.comBlainville(541) 772-1223, Autre: 123-123-1234
Edit MFrederic Belavance005 5 - Enfantfbelavance@stuart.com  
Edit FCecile Pilon032 32 - MajeurBlais.Cecile@cie.comParis00 34 123-212-987, Autre: 441-771-1233 ext. 1221
Edit FWendy Bradford019 19 - Majeur Brooklyn 
Edit MWilliam Brennan026 26 - Majeurwbrennan@williamb.comLaval876-433-1223
Edit FFrancine Brunette036 36 - Majeurfbrunet@brunet.comBrooklyn(555) 961-9013 p.23, Autre: (555) 961-9999
Edit  Daniel Bush dbush@mblanche.com  
Edit MRaymond Charron072 72 - Seniorcraymond@ye.comLorraine799-455-9866
Next

Liste des utilisateurs (IR)

Report Settings

Sexe : Femme
LinkPhotoNomPrénomÂgeVilleÉtatPays
AndersonSue19WashingtonNYUSA
AshtonElizabeth30ParisParisFrance
BelavanceRosalie14BlainvilleQuebecCanada
BradfordWendy19BrooklynNYUSA
BrunetteFrancine36BrooklynNYUSA
DionNathalie
LabelleMaelie12BlainvilleQuebecCanada
LambertSarah16
LeducCarole21TorontoOntarioCanada
LordMireille41New YorkNYUSA
PilonCecile32ParisParisFrance
RenaudClaire39TorontoOntarioCanada
RoyMartine36LavalQuebecCanada
TannerSonia55LavalQuebecCanada
TremblayJennifer26BlainvilleQuebecCanada
TrudeauLinda52LavalQuebecCanada
WalshKathleen70BrooklynNYUSA
Count: 17Average: 32.375Count Distinct: 3
Sexe : Homme
 PhotoNomPrénomÂgeVilleÉtatPays
AbbottChris52
AbelMichel45MontrealQuebecCanada
AshbyAlexandre26TorontoOntarioCanada
BaconSerge30
BelavanceFrederic5
BrennanWilliam26LavalQuebecCanada
CharronRaymond72LorraineOntarioCanada
ClaudeSylvain37TorontoOntarioCanada
  • 1 - 25 of 52
* Ces données sont fictives (noms, adresses et courriels).