PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Génération en mode Zoning et génération en mode table de positionnement
  • Comment utiliser la génération en mode zoning ?
  • Différences d'édition et de génération
  • Mode "zoning" : Taille de référence des pages
  • Créer et manipuler des zones de mise en page sous l'éditeur
  • Présentation
  • Créer des zones
  • Manipuler des zones
  • Fenêtre de description de la zone
  • Sémantique associée à une zone
Produits
WINDEVWEBDEV - Code ServeurWEBDEV - Code NavigateurWINDEV MobileEtats et Requêtes
Plateformes
WindowsLinuxWindows MobileUniversal Windows 10 AppAndroidWidget AndroidiPhone/iPadApple Watch
Langages
JavaPHPAjaxCode Utilisateur (MCU)Langage Externe
Bases de données
HFSQLHFSQL Client/ServeurProcédures stockéesOLE DBODBCAccès Natifs
Présentation
A partir de la version 17, le mode d'édition en mode Zoning apparaît. Ce mode d'édition permet de :
  • simplifier l'édition et la modification d'une page sous l'éditeur.
  • optimiser la génération de la page.
  • proposer de nouvelles fonctionnalités telles que :
    • possibilité de définir une taille de référence pour les pages,
    • possibilité de définir des zones de mise en page,
    • proposer un ancrage simplifié des champs, ...
Génération en mode Zoning et génération en mode table de positionnement

Comment utiliser la génération en mode zoning ?

Par défaut, toutes les pages créées à partir de WEBDEV 17 utilisent la génération en mode zoning. Pour utiliser ce mode de génération avec des pages créées avec des versions précédentes, il est nécessaire de :
  1. Affichez la fenêtre de description de la page (option "Description" du menu contextuel de la page).
  2. Dans l'onglet "Général", sélectionnez l'option "Edition en "zoning", positionnement par blocs et ancrage sur les champs".
  3. Validez.

Différences d'édition et de génération

En mode "Compatible 16", la génération des pages utilise le mécanisme des tables de positionnement. Dans ce mode de génération, les positions des champs sont liées les unes aux autres. Il y a donc des risques d'interaction entre les champs.
Par exemple, dans une page, un champ Zone répétée et des liens sont positionnés côte à côte.
En exécution, selon la position des liens et la taille de la zone répétée, les liens ne sont pas correctement positionnés.
Dans ce mode, pour obtenir un positionnement correct, il est conseillé de placer les champs dans des cellules.
En mode "zoning", la génération des pages n'utilise pas le mécanisme des tables de positionnement. Les avantages de ce mode sont notamment :
  • des pages plus proches en exécution de leur mise en page sous l'éditeur.
  • une plus grande liberté sur la manipulation des champs.
  • un code généré plus clair et plus simple.
Dans ce mode, l'usage des cellules pour réaliser la mise en page n'est plus nécessaire (les cellules ne servent plus à éviter des problèmes de mise en page).
Par exemple, en modifiant uniquement le mode de génération de la page contenant une zone répétée et des liens, le résultat est le suivant :

Mode "zoning" : Taille de référence des pages

En mode zoning, lors de l'édition d'une page sous l'éditeur, il est possible de définir la taille de la page :
  • soit directement, en utilisant la souris et en redimensionnant la page.
  • soit en indiquant les nouvelles dimensions de la page dans la barre d'état de l'éditeur :
Les champs sont positionnés par rapport à la page et à sa taille définie sous l'éditeur.
Remarque : En mode "Compatible 16", les différents champs présents dans la page définissaient la taille de la page. L'ajout d'un champ dans la page pouvait modifier toute la mise en page. Dans ce cas, l'usage d'une cellule permettait de définir la taille de la page.
L'utilisation d'une taille de référence pour la page permet notamment :
  • d'afficher automatiquement des ascenseurs si nécessaire lors de l'affichage de la page sur un navigateur spécifique (par exemple affichage sur le navigateur d'un iPhone).
  • de gérer les ancrages.
Créer et manipuler des zones de mise en page sous l'éditeur

Présentation

Le mode Zoning apporte des avantages au niveau de la génération et permet également de simplifier l'édition d'une page en utilisant le nouveau concept de "zones de mise en page". Ces zones permettent par exemple de définir l'architecture de la page : entête, pied de page, ... Ces zones sont matérialisées et facilement manipulables sous l'éditeur.
Par exemple, l'agrandissement de la hauteur de la zone d'entête déplace automatiquement les zones situées en-dessous : zone corps de page et de bas de page.

Créer des zones

Pour créer des zones, il suffit d'utiliser l'outil de dessin de zone (icône ou option "Page .. Zoning .. Dessiner le zoning").
  1. En cliquant sur cette icône, le curseur se transforme en crayon.
  2. Pour dessiner les zones, il suffit de cliquer dans la page et de déplacer la souris :
    • un déplacement vers la gauche ou la droite permet de créer une zone verticale,
    • un déplacement vers le haut ou le bas permet de créer une zone horizontale.
Si nécessaire, les zones peuvent être déplacées.
Remarques :
  • La création de zones est possible uniquement si l'option "Edition en zoning" est sélectionnée dans la fenêtre de description de la page (option "Page .. Description", onglet "Général").
  • La création de zones est possible :
    • dans les pages et les modèles de pages,
    • dans les pages popup,
    • dans les "conteneurs" : cellules, superchamps, zones répétées, modèles de champs, ... La création de zones n'est pas possible dans les pages internes.

Manipuler des zones

Pour manipuler les zones, définir leurs caractéristiques sous l'éditeur, il est nécessaire de passer en mode d'édition zoning :
  • par l'option "Page .. Zoning .. Mode Zoning" ou le raccourci Alt + Z.
  • en cliquant sur l'onglet "Zoning" sous l'éditeur (l'onglet "Page" permet de revenir au mode de manipulation des champs de la page) :
Lorsque le mode zoning est activé en édition :
  • chaque zone sélectionnée est hachurée. Il n'est pas possible dans ce cas de manipuler les champs présents dans la zone. Pour manipuler les champs, il faut revenir en mode d'édition normal (Alt + Z ou onglet "Page").
  • le menu contextuel de la zone permet notamment de :
    • Afficher la fenêtre de description de la zone.
    • Ancrer la zone.
    • Supprimer la zone. Si une zone est supprimée, tous les champs contenus dans la zone sont conservés.
    • Fractionner verticalement ou horizontalement la zone.

Fenêtre de description de la zone

La fenêtre de description de la zone est accessible par le menu contextuel de la zone (uniquement si le mode d'édition "zoning" est activé).
Les informations importantes contenues dans cette fenêtre sont les suivantes :
  • Onglet "Général" : Cet onglet permet de spécifier le nom de la zone, d'indiquer la sémantique associée à la zone et liste les champs présents dans la zone.
  • Onglet "IHM" : Cet onglet permet notamment de définir l'ancrage de la zone.
  • Onglet "Style" : Cet onglet permet de définir les options de cadrage et débordement de la zone, l'image de fond de la zone et le cadre de la zone. Ces options permettent d'éviter l'utilisation d'une cellule.
Remarque : Plusieurs caractéristiques de la zone sont également modifiables par programmation, grâce aux propriétés WLangage. Pour plus de détails, consultez Propriétés associées à une zone.

Sémantique associée à une zone

WEBDEV offre la possibilité d'associer une sémantique HTML 5 spécifique à chaque zone.
Cette information n'est pas obligatoire et permet notamment d'optimiser le référencement par les moteurs de recherche (SEO, Search Engine Optimization).
Ces informations permettent également d'améliorer l'accessibilité d'un site (par exemple, un site saura quel est le titre de la page et pourra le grossir dans le cadre d'un affichage en mode "accessibilité").
Liste des exemples associés :
WW_Forum_AWP Exemples complets (WEBDEV) : WW_Forum_AWP
[ + ] Cet exemple propose les fonctionnalités principales d'un forum utilisateur (création de forums, de sujets (ou topics) et de messages, modération par un administrateur, recherche, etc...)

WW_FORUM_AWP utilise entre autres les fonctionnalités suivantes :
- Recherche fulltext
- Champs riches
- Zones répétées
- Pages POPUP
- AJAX
- ...
Version minimum requise
  • Version 17
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire