Kit de Développement Logiciel Open Source

Le modèle de page constitue la structure HTML de l'application.
Il décrit l'entête (titre, logo, choix de la langue, lien de déconnexion...), le menu de navigation, la zone de travail (espace d'affichage des vues) et le pied de page de l'application.

2 modèles de page prêts à l'emploi

ZnetDK est livré en standard avec 2 modèles de page classic et office prêts à l'emploi qui peuvent être activés au choix en modifiant le paramètre CFG_PAGE_LAYOUT.

Ces deux modèles ont en commun d'afficher en entête de page :

Le logo, le titre et le sous-titre (pour le modèle classic uniquement) renseignés pour les constantes PHP LC_HEAD_IMG_LOGO, LC_HEAD_TITLE et LC_HEAD_SUBTITLE (voir Personnaliser titres, logo et page).
Un accès à l'aide en ligne si le paramètre CFG_HELP_ENABLED est activé,
Le choix de la langue d'affichage si le paramètre CFG_MULTI_LANG_ENABLED est activé,
Le nom de l'utilisateur connecté si le paramètre CFG_AUTHENT_REQUIRED est activé,
Un lien de déconnexion si le paramètre CFG_AUTHENT_REQUIRED est également activé,

Le thème de composants jQueryUI choisi pour l'application (voir paramètre CFG_THEME) est également appliqué à l'entête et au pied de page (pas de pied page en standard pour le modèle office), ce qui permet sans effort supplémentaire, de conserver une harmonie entre l'entête, le pied de page et les composants graphiques de l'application, quelque soit le thème de composant choisi.

Le modèle de page classic correspond au script PHP /engine/core/layout/classic.php.
Le modèle de page office pour sa part correspond au script /engine/core/layout/office.php.

Les styles appliqués par défaut à ces 2 modèles de page sont définis dans les feuilles de style layout.css, layout-classic.css et layout-office.css. Ils peuvent être éventuellement surchargés depuis la feuille de style renseignée pour le paramètre CFG_APPLICATION_CSS.

Enfin, le code HTML du modèle de page peut être ajusté si nécessaire, après avoir été préalablement copié sous le même nom classic.php ou office.php dans le dossier /applications/default/app/layout/.

Le modèle classic

Le modèle de page classic est activé par défaut et correspond à la valeur classic du paramètre CFG_PAGE_LAYOUT.

Il est basé sur un mode de navigation par onglets à 2 niveaux hiérarchiques au maximum.
Le premier niveau d'onglets est affiché verticalement sur la gauche et correspond aux entrées de menus de niveau 1 définies dans le script menu.php de l'application.
Un deuxième niveau d'onglets est affiché horizontalement dans la zone de travail du modèle de page dans le cas où l'entrée de menu sélectionnée est définie avec des sous-entrées de menu de niveau 2.

Son pied de page affiche le contenu des 3 constantes PHP LC_FOOTER_LEFT, LC_FOOTER_CENTER et LC_FOOTER_RIGHT (voir Personnaliser titres, logo et page).

Pour finir, il supporte au choix 3 modes de chargement des vues :

RIA / vue à la demande (CFG_VIEW_PRELOAD = false) : la page principale de l'application construite à partir du modèle de page, n'est chargée qu'une seule fois lors de son premier appel; les vues de l'application sont quant à elles chargées à la demande par appel AJAX au clic du menu correspondant, sans rechargement de la page principale hôte. Une fois une vue chargée, elle reste disponible dans le DOM de la page après l'accès à une autre vue de l'application. Ainsi, une vue n'a pas besoin d'être rechargée par un nouvel appel AJAX si elle a déjà été chargée une première fois.
RIA / vues pré-chargées (CFG_VIEW_PRELOAD = true) : toutes les vues de l'application sont pré-chargées dans le DOM de la page principale de l'application dès son premier appel. Le chargement initial de l'application est un peu allongé par rapport à la valeur false du paramètre mais en contrepartie, les vues sont affichées instantanément lorsqu'elles sont accédées.
Page rechargée avec la vue (CFG_VIEW_PAGE_RELOAD = true) : chaque vue accédée par un clic du menu est affichée après un rechargement complet de la page. L'URL du navigateur est spécifique à la vue demandée. Ce mode de chargement est adapté à de la publication de contenu qui peut ainsi être indexé par les moteurs de recherche.

Le modèle office

Le modèle de page office n'est activé qu'une fois le paramètre CFG_PAGE_LAYOUT renseigné à la valeur office.

Ce second modèle propose un affichage multiple des vues de l'application dans des fenêtres pouvant être redimensionnées et déplacées à la souris dans la zone de travail de la page.

Le menu de navigation est quant à lui vertical, déroulant et multi-niveaux (la hiérarchie des éléments de menus peut ête supérieure à 2 niveaux). Il est complété en partie inférieure d'un gestionnaire de fenêtres depuis lequel il est possible de :

• Choisir le mode d'ouverture des fenêtres : si l'option Fermeture auto. est cochée (comportement par défaut), l'ouverture d'une fenêtre à partir du menu de navigation entraîne la fermeture de la dernière fenêtre ouverte. Si elle est en revanche décochée, les fenêtres précédemment ouvertes ne sont pas refermées automatiquement et plusieurs vues peuvent ainsi être visualisées en même temps.
• Positionner et redimensionner automatiquement selon un alignement horizontal ou vertical, les 2 dernières fenêtres ouvertes, en cliquant sur la fonction Ajuster horizontal. ou Ajuster vertical..
• Fermer toutes les fenêtres ouvertes en cliquant sur la fonction Fermer tout.

D'autre part, le modèle de page office ne dispose pas de pied de page dans le but de libérer un maximum d'espace pour l'affichage des fenêtres de l'application.

Enfin, seul le mode de chargement des vues RIA / vue à la demande (CFG_VIEW_PRELOAD = false) est supporté par le modèle office.

1 modèle de page personnalisable

Le modèle de page personnalisable custom n'est activé qu'une fois le paramètre CFG_PAGE_LAYOUT renseigné à la valeur custom. Il correspond au script PHP /engine/core/layout/custom.php.

Comme cela est montré sur la photo du milieu, ce modèle de page est brut, ce qui signifie qu'aucun style n'est appliqué à la structure de la page (entête, pied de page, menu de navigation, ...). Seuls les composants graphiques PrimeUI affichés dans la page de l'application sont stylisés en accord avec le thème de composants choisi pour l'application (voir Choisir un thème).

Le choix de ce modèle de page doit être motivé par le besoin d'appliquer à l'application une charte graphique et une structure de page en rupture avec les modèles de page standards classic et office. Il implique également de personnaliser le thème de composants graphiques pour qu'il s'intègre à la charte graphique appliquée à la page (voir Thème sur mesure).
La photo de droite illustre un exemple de personnalisation du modèle de page custom.

Les 3 modes de chargement des vues RIA / vue à la demande (CFG_VIEW_PRELOAD = false), RIA / vues pré-chargées (CFG_VIEW_PRELOAD = true) et Page rechargée avec la vue (CFG_VIEW_PAGE_RELOAD = true) décrits pour le modèle de page classic, sont également supportés par le modèle custom.

Les paragraphes qui suivent décrivent les variables, constantes et méthodes PHP invoquées dans le modèle de page pour l'affichage dynamique des libellés, images et menus de l'application.
La photo de gauche schématise les différentes zones du modèle de page custom et pour chacune d'elles, indique le nom des variables, constantes et méthodes impliquées.

La balise <head>

La variable $pageTitle, destinée à l'élément HTML <title/> contient le titre de l'application. Elle est initialisée à partir de la constante LC_PAGE_TITLE (voir Personnaliser titres, logo et page).

La méthode renderMetaTags() ajoute les balises <meta> de description de la page, d'indication des mots clés de recherche et de l'auteur.

La méthode renderDependencies() insère les feuilles de styles et les fichiers Javascript nécessaires à l'application.

L'entête de page

La méthode renderLogoURL() renvoie l'URL du lien hypertexte <a id="zdk-header-logo"/> associé au logo de l'application.

Les constantes LC_HEAD_IMG_LOGO, LC_HEAD_TITLE et LC_HEAD_SUBTITLE fournissent l'URL du logo, les titre et sous-titre à afficher en entête de page (voir Personnaliser titres, logo et page)

Le choix de la langue

La variable $language, destinée à être affectée à l'attribut lang de la balise <html/>, indique la langue courante d'affichage de l'application.

La méthode renderLangSelection() insère dans la page la liste déroulante de sélection de la langue.

La zone de connexion

Les variables $connectedUser, $loginName et $userEmail sont destinées à alimenter les attributs data-zdk-login, data-zdk-username et data-zdk-usermail de l'élément HTML <div id="zdk-connection-area"/>. Elles contiennent respectivement le nom de l'utilisateur connecté, son identifiant de connexion et son adresse email.
Ces variables sont renseignées uniquement si le paramètre CFG_AUTHENT_REQUIRED est défini à la valeur true.

La constante LC_HEAD_LNK_LOGOUT contient l'intitulé du lien de déconnexion de l'élément HTML <a id="zdk-logout" />. Elle est renseignée dans les fichiers de traduction situés dans le dossier /engine/core/lang (voir Gestion multilingue).

La constante LC_FORM_LBL_PASSWORD, destinée à alimenter l'attribut data-zdk-changepwd de l'élément HTML <div id="zdk-connection-area"/>, contient l'intitulé du bouton de changement de mot de passe par l'utilisateur.
Cet intitulé est initialisé dans les fichiers de traduction situés dans le dossier /engine/core/lang (voir Gestion multilingue).

L'aide en ligne

Le paramètre CFG_HELP_ENABLED conditionne l'affichage de l'élément HTML <div id="zdk-help-area" />, contenant l'icône et le lien d'accès à l'aide en ligne.

La constante LC_HEAD_LNK_HELP contient l'intitulé du lien affiché pour accéder à l'aide en ligne contextuelle. Cet intitulé est initialisé dans les fichiers de traduction situés dans le dossier /engine/core/lang (voir Gestion multilingue).

Le fil d'ariane

La méthode renderBreadcrumb() insère le titre de l'élément de menu qui a été sélectionné.

Le menu de navigation

La méthode renderNavigationMenu() insère le menu de navigation dans l'application.

La vue de l'application

La méthode renderCustomContent() insère la vue d'application correspondant à l'élément de menu qui a été sélectionné.

Le pied de page

Les constantes LC_FOOTER_LEFT, LC_FOOTER_CENTER et LC_FOOTER_RIGHT fournissent les 3 intitulés à afficher en pied de page (voir Personnaliser titres, logo et page)

L'afficheur de messages

L'élément HTML <div id="zdk-messages"/> sert de point d'ancrage au composant graphique puigrowl d'affichage des messages informatifs, d'alerte et d'erreur de l'application.

L'image animée des chargements AJAX

L'élément HTML <img id="zdk-ajax-loading-img"> permet d'indiquer l'emplacement et le nom de l'image animée qui doit être affichée pendant les appels AJAX de l'application.