DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Editeurs / Editeur de fenêtres et de pages / Editeur de pages
  • Présentation
  • Créer un agencement sous WEBDEV
  • Créer un nouvel agencement pour une page WEBDEV (site "Mobile friendly")
  • Créer un nouvel agencement pour l'impression d'une page
  • Créer un nouvel agencement pour intégrer une page WEBDEV dans une fenêtre WINDEV
  • Créer un nouvel agencement pour intégrer une page WEBDEV dans une fenêtre WINDEV Mobile
  • Manipulations des agencements sous l'éditeur
  • Visualiser simultanément deux agencements sous l'éditeur
  • Gestion des champs dans les agencements
  • Menu contextuel des champs spécifique aux agencements
  • Menu contextuel des agencements
  • Champs spécifiques (Sites "Mobile friendly")
  • Comparaison de pages avec agencements
  • Gestion des agencements en exécution
  • Fonctionnement par défaut
  • Cas particulier : Agencement pour impression
  • Programmation
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
Un agencement permet de définir plusieurs vues d'une page dans un même projet sans dupliquer cette page.
L'utilisation des agencements dans un projet WEBDEV permet de gérer de nombreuses fonctionnalités :
  • réaliser des sites "mobile friendly". Dans ce cas, deux agencements peuvent être définis :
    • une vue spécifique pour le mode "Desktop",
    • une vue spécifique pour le mode "mobile".
  • réaliser une impression "propre". Dans ce cas, il est possible de créer un agencement spécifique pour l'impression du contenu de la page.
  • Intégrer une page dans une application WINDEV ou WINDEV Mobile. Dans ce cas, il est possible de créer un agencement spécifique pour l'intégration de la page dans une fenêtre.
Important : Les agencements dans un projet WEBDEV sont une autre façon de faire un site mobile friendly. À la différence du mode "Responsive Web Design", les agencements n'ont pas de contraintes d'ordre des champs.
Ainsi, les agencements permettent de :
  • réaliser des mises en forme non réalisables simplement en RWD.
  • créer simplement des éléments dans un agencement puis de les masquer dans un autre agencement.
Pour plus de détails sur les avantages des agencements pour un site mobile friendly, consultez Site mobile friendly : les méthodes disponibles.
Cette page d'aide présente :
Remarque : Il est également possible de créer des agencements dans les projets WINDEV et WINDEV Mobile. Pour plus de détails, consultez Gestion des agencements en WINDEV et WINDEV Mobile.
Créer un agencement sous WEBDEV

Créer un nouvel agencement pour une page WEBDEV (site "Mobile friendly")

Pour créer un nouvel agencement pour une page :
  1. Ouvrez la page concernée sous l'éditeur.
  2. Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez l'option "Ajouter un agencement".
  3. La fenêtre de création d'un agencement s'affiche :
  4. Indiquez pour quel type d'écran l'agencement doit être créé. Il est également possible d'indiquer la largeur minimale de l'écran.
  5. Validez.
  6. L'éditeur affiche sur la droite les différents agencements disponibles pour la page. Un double-clic sur la pastille de l'agencement voulu permet de l'afficher sous l'éditeur pour le modifier.
Attention : Les agencements ne sont pas disponibles sur les pages en mode Responsive Web Design et sur les pages internes. Les agencements sont disponibles sur les modèles de pages.
Remarque : Plusieurs tutos WEBDEV permettent de découvrir et de manipuler les agencements :

Créer un nouvel agencement pour l'impression d'une page

Pour créer un nouvel agencement pour l'impression du contenu d'une page :
  1. Ouvrez la page concernée sous l'éditeur.
  2. Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez l'option "Ajouter un agencement pour l'impression".
  3. Un agencement "Impression" est automatiquement créé. L'éditeur affiche sur la droite les différents agencements disponibles pour la page. Un double-clic sur la pastille de l'agencement "Impression" permet de l'afficher sous l'éditeur pour le modifier.
    Il est ainsi possible de conserver dans cet agencement uniquement les champs nécessaires pour l'impression.
Remarques
  • Les agencements ne sont pas disponibles sur les pages en mode Responsive Web Design et sur les pages internes. Les agencements sont disponibles sur les modèles de pages.
  • L'agencement pour l'impression sera automatiquement utilisé lorsque l'internaute imprimera la page correspondante. Il est par exemple possible de rendre invisibles les champs non nécessaires (boutons, liens, etc.) dans l'agencement créé pour l'impression.

Créer un nouvel agencement pour intégrer une page WEBDEV dans une fenêtre WINDEV

Pour créer un nouvel agencement afin d'intégrer une page WEBDEV dans une fenêtre WINDEV :
  1. Ouvrez la page concernée sous l'éditeur.
  2. Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez "Ajouter un agencement pour intégration dans WINDEV".
  3. Un agencement "Pour WINDEV" est automatiquement créé. L'éditeur affiche sur la droite les différents agencements disponibles pour la page. Un double-clic sur la pastille de l'agencement "Pour WINDEV" permet de l'afficher sous l'éditeur pour le modifier. Il est ainsi possible de conserver dans cet agencement uniquement les champs nécessaires pour l'affichage de la page dans l'application WINDEV.
Pour plus de détails, consultez Intégrer un site WEBDEV dans une application WINDEV.
Remarques
  • Les agencements ne sont pas disponibles sur les pages en mode Responsive Web Design et sur les pages internes. Les agencements sont disponibles sur les modèles de pages.
  • L'agencement pour une application WINDEV sera automatiquement utilisé lorsque la page sera intégré dans un champ "Page WEBDEV" du projet WINDEV.

Créer un nouvel agencement pour intégrer une page WEBDEV dans une fenêtre WINDEV Mobile

Pour créer un nouvel agencement afin d'intégrer une page WEBDEV dans une fenêtre WINDEV Mobile :
  1. Ouvrez la page concernée sous l'éditeur.
  2. Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez :
    • l'option "Ajouter un agencement pour intégration dans WINDEV Mobile (Téléphone)".
    • l'option "Ajouter un agencement pour intégration dans WINDEV Mobile (Tablette)".
  3. Un agencement "WINDEV Mobile (Tablette)" ou "WINDEV Mobile (Téléphone") est automatiquement créé. L'éditeur affiche sur la droite les différents agencements disponibles pour la page. Un double-clic sur la pastille de l'agencement spécifique pour WINDEV Mobile permet de l'afficher sous l'éditeur pour le modifier. Il est ainsi possible de conserver dans cet agencement uniquement les champs nécessaires pour l'affichage de la page dans l'application WINDEV Mobile.
Remarques
  • Les agencements ne sont pas disponibles sur les pages en mode Responsive Web Design et sur les pages internes. Les agencements sont disponibles sur les modèles de pages.
  • L'agencement pour une application WINDEV sera automatiquement utilisé lorsque la page sera intégré dans un champ "Page WEBDEV" du projet WINDEV.
Manipulations des agencements sous l'éditeur

Visualiser simultanément deux agencements sous l'éditeur

Par défaut, seul l'agencement en cours d'édition peut être visualisé sous l'éditeur de pages.
Pour visualiser (et modifier) simultanément deux agencements sous l'éditeur de pages :
  1. Affichez le menu contextuel de la vignette correspondant à l'agencement non affiché sous l'éditeur.
  2. Sélectionnez l'option "Editer (double vue)".
  3. Les deux agencements sont alors affichés sous l'éditeur.

Gestion des champs dans les agencements

Par défaut, la dissociation automatique est activée () :
  • Un champ créé dans un agencement est créé dans tous les agencements, avec les mêmes caractéristiques (taille, position, etc.).
  • Un champ déplacé (ou redimensionné) dans un agencement est déplacé (ou redimensionné) uniquement dans l'agencement en cours.
  • La dissociation automatique est activée par défaut pour tous les champs. Lorsque ce mode est activé, toute modification de taille ou de position effectuée sur un champ d'une des pages spécifiques de l'agencement ne sera pas reportée sur les autres.
Pour qu'une modification de champ (position ou taille) soit reportée dans tous les agencements, il est possible d'enlever la dissociation automatique () : la prochaine modification de taille ou de position sera effectuée sur tous les agencements. Un triangle rouge peut apparaître lors de la sélection d'un champ. Il indique que le champ est dissocié, et que sa modification affectera uniquement l'agencement en cours.
Conseil : Des toast apparaissent régulièrement pour vous informer de l'influence des modifications du champ dans les autres agencements en fonction de l'activation ou non de la dissociation automatique et / ou des options de dissociation du champ.

Menu contextuel des champs spécifique aux agencements

Le menu contextuel "Agencements" des champs permet également de gérer la dissociation ou non des caractéristiques du champ.
. Ces options sont les suivantes :
  • Dissocier la position : Si cette option est sélectionnée, la position du champ sera modifiée uniquement sur l'agencement en cours. Si cette option n'est pas sélectionnée, la position du champ sera modifiée sur tous les agencements.
  • Dissocier la taille : Si cette option est sélectionnée, la taille du champ sera modifiée uniquement sur l'agencement en cours. Si cette option n'est pas sélectionnée, la taille du champ sera modifiée sur tous les agencements.
  • Dissocier l'ancrage : Si cette option est sélectionnée, l'ancrage du champ sera modifié uniquement sur l'agencement en cours. Si cette option n'est pas sélectionnée, l'ancrage du champ sera modifié sur tous les agencements.
  • Dissocier le style : Si cette option est sélectionnée, les modifications de style du champ seront effectuées uniquement sur l'agencement en cours. Si cette option n'est pas sélectionnée, les modifications de style seront effectuées sur tous les agencements.
  • Dissocier le contenu riche : Si cette option est sélectionnée, le contenu riche du champ (libellé par exemple) sera modifié uniquement sur l'agencement en cours. Si cette option n'est pas sélectionnée, l'ancrage du champ sera modifié sur tous les agencements.
Remarque : Si le mode dissociation automatique n'est pas activé, lors de la désactivation d'une dissociation par le menu contextuel, la caractéristique dissociée pour l'agencement en cours est appliquée automatiquement pour tous les agencements. Par exemple, si la dissociation "Position" a été effectuée puis a été désactivée, le prochain déplacement du champ sera effectué sur tous les agencements.
Le menu contextuel "Agencements" des champs propose également d'autres options :
  • Editer les propriétés dissociées : Permet d'obtenir la liste des propriétés dissociées pour le champ sélectionné, avec les valeurs correspondantes pour l'agencement en cours. Il est possible de modifier certaines valeurs pour l'agencement en cours.
  • Visibilité par agencement : Permet de rendre le champ sélectionné visible ou invisible dans certains agencements.
  • Rendre invisible dans cet agencement : Permet de rendre invisible le champ sélectionné dans l'agencement en cours.
  • Rendre visible dans tous les agencements : Permet de rendre le champ en cours visible dans tous les agencements.
  • Afficher les champs invisibles : Permet d'afficher les champs actuellement invisibles dans l'agencement en cours. Les champs sont affichés "en grisé". Ils disparaissent lorsque l'agencement est réaffiché.
Remarque : Ce menu contextuel est disponible pour une sélection de champs.
Limite : Pour les champs Graphes, il n'est pas possible de dissocier les propriétés du titre et de la légende entre plusieurs agencements.

Menu contextuel des agencements

Le menu contextuel des vignettes des agencements disponibles permet de gérer les agencements.
Il est possible de :
  • Visualiser et modifier la description de l'agencement. Pour plus de détails, consultez Paramètres de l'agencement.
  • Visualiser la liste des champs dissociés.
  • Editer l'agencement, c'est-à-dire l'afficher pour le modifier.
  • Editer l'agencement en mode double vue : les deux agencements pourront être affichés et modifiés en parallèle.
  • Créer un nouvel agencement à partir de celui en cours.
  • Désactiver cet agencement. Une croix rouge apparait alors dans l'icône de l'agencement et l'agencement ne pourra pas être utilisé en exécution. Il sera cependant conservé sous l'éditeur.
    Remarque : Cette option peut être utile lorsqu'une page hérite d'un ou de plusieurs modèles de pages possédant des agencements. Il est ainsi possible de conserver uniquement les agencements voulus.
  • Supprimer l'agencement sélectionné.
  • Afficher des vignettes proportionnelles.
  • Rafraîchir automatiquement : Permet de rafraîchir l'agencement dès qu'une modification est effectuée dans la fenêtre.
  • Rafraîchir cet agencement : Permet de rafraîchir immédiatement l'agencement.
  • Tout rafraîchir : Permet de rafraîchir immédiatement tous les agencements.

Champs spécifiques (Sites "Mobile friendly")

Certains champs avancés (champ Zone répétée, champ Table, menu horizontal, ...) demandent une dissociation à un niveau plus précis que la simple dissociation de la taille ou des ancrages. Dans ce cas, l'icône permet de gérer les options dissociables du champ en permettant de définir une valeur spécifique par agencement si nécessaire.
Pour le champ Table, il est possible par exemple de regrouper les colonnes verticalement pour un affichage adapté au mobiles.
Pour le champ Zone répétée, il est possible de définir le nombre de colonnes du champ Zone répétée par agencement.
Pour gérer les menus, WEBDEV met à votre disposition un champ spécifique pour les agencements : le champ Barre de navigation. Le champ Barre de navigation permet de créer notamment une zone de menu s'adaptant facilement à la taille du navigateur. Cette zone peut contenir tous les types de champs. Les caractéristiques de ce champ peuvent être également paramétrées depuis la fenêtre de description du champ.
Remarque : Plusieurs tutos WEBDEV permettent de découvrir et de manipuler les agencements :

Comparaison de pages avec agencements

WINDEV Mobile permet de comparer deux projets, deux éléments d'un projet, etc. Pour plus de détails, consultez Comparateur de projets.
Lors de la comparaison de pages contenant des agencements, les différences sur chaque agencement sont présentées.
Gestion des agencements en exécution

Fonctionnement par défaut

L'agencement initial est automatiquement choisi en fonction :
  • de la taille du navigateur,
  • de la taille de la page (sous l'éditeur).
L'agencement est automatiquement modifié en fonction de la taille du navigateur.
Il est possible de définir les paramètres de l'agencement (option "Description" du menu contextuel de la barre de titre de l'agencement) en fonction de la taille du navigateur.
Ces paramètres sont pris en compte pour déterminer le choix de l'agencement à l'exécution.
Remarque : Si l'agencement choisi ne convient pas, il est possible de forcer l'utilisation d'un agencement par programmation.

Cas particulier : Agencement pour impression

Si un agencement de type "Impression" a été créé sur une page, cet agencement sera automatiquement utilisé lorsque l'internaute utilisera l'option "Imprimer" du menu contextuel du navigateur (ou Ctrl + P). Dans ce cas, seuls les champs visibles dans l'agencement seront imprimés.

Programmation

Il est possible :
  • de forcer l'agencement à utiliser (fonction PageChangeAgencement). Il suffit d'indiquer en paramètre le numéro de l'agencement à utiliser. Ce numéro est indiqué dans la barre de titre de l'agencement.
  • de connaître l'agencement en cours (fonction PageAgencementEnCours).
Liste des exemples associés :
WW_Agencements Exemples didactiques (WEBDEV) : WW_Agencements
[ + ] Cet exemple est un site pouvant être visualisé sur un terminal mobile.
Le site utilise les agencements de WEBDEV afin d'adapter l'UI du site aux terminaux mobiles.
WW_Rewali Exemples complets (WEBDEV) : WW_Rewali
[ + ] Cet exemple est un site de réservation de voyages.

Il propose des offres de voyages à des prix très attractifs.
Il est ensuite possible de choisir la durée du voyage, les dates de départ .. puis de valider l'achat jusqu'au paiment via Paypal.

Il utilise notamment le champ "bandeau défilant" et les plans.
Version minimum requise
  • Version 25
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 01/12/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale