DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Concepts WEBDEV / Partie 2 - Développement d'un site
  • Création d'une page
  • Création de pages vierges
  • Création de pages prédéfinies
  • Création des pages du projet par construction automatique du site (RAD)
  • Manipulations simples sur une page
  • Principales caractéristiques d'une page
  • Page interne
  • Modèles de pages
  • Page popup
  • Actualiser une page en mode Session
  • Présentation
  • Mise en place
  • Les contextes de pages
  • Présentation
  • Fonctionnement automatique
  • Ouvrir une page dans un site WEBDEV
  • Présentation
  • Ouverture d'une page depuis la description d'un champ
  • Ouverture d'une page par programmation
  • Evénements associés aux pages
  • Evénements gérés par défaut
  • Evénements optionnels
  • Les menus (principal ou contextuel)
  • Les options de menu
  • Présentation
  • Manipuler les options de menu sous l'éditeur
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
12. Les pages en pratique
Page précédenteSommairePage suivante
Une page a pour but d'afficher, de consulter et de saisir des informations. Ces informations peuvent provenir des fichiers de données d'une analyse, de fichiers externes, de requêtes, etc.
WEBDEV propose plusieurs solutions pour créer les pages d'un projet :
  • Créer une page vierge avec l'assistant.
  • Construire l'ensemble des pages du site à partir de la description de l'analyse.
  • Créer une page à partir de la description de l'analyse (avec son code ou non).
  • Créer des pages basées sur un modèle, etc.
Quelle que soit la méthode utilisée, la page pourra être modifiée après création : il sera possible d'ajouter, modifier ou supprimer des champs, de modifier les caractéristiques de la page.
Pour plus de détails sur la manipulation des champs d'une page, consultez le chapitre Les champs en pratique.
Ce chapitre traite les sujets suivants :
Création d'une page

Création de pages vierges

Pour créer une page vierge :
  1. Cliquez sur parmi les boutons d'accès rapide de WEBDEV. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page". L'assistant de création d'une page se lance.
  2. Choisissez le type "vierge".
  3. Validez la création de la page. Une page vierge est créée.
  4. La fenêtre de sauvegarde apparaît automatiquement.
  5. Spécifiez le titre de la page et son nom. La page correspond à un fichier ".WWH". Par défaut, ce fichier sera créé dans le répertoire principal du projet. Ce nom sera utilisé pour manipuler la page.
  6. Validez la fenêtre de sauvegarde.
  7. Créez les champs dans la page.
Remarques :
  • Par défaut, la page créée correspond au type du site en cours (statique, Session, AWP ou PHP). Le type de la page peut être modifié dans la fenêtre de description de la page. Pour plus de détails, consultez Principales caractéristiques d'une page.
  • Par défaut, la page créée utilise le mode d'édition "Responsive (zoning et agencements)". Ce mode d'édition permet d'utiliser les agencements pour proposer un site mobile friendly. Le mode d'édition de la page peut être modifié dans la fenêtre de description de la page.
  • Les différents types de champs sont présentés dans le chapitre Les différents types de champs standard.

Création de pages prédéfinies

Pour créer une page prédéfinie :
  1. Cliquez sur parmi les boutons d'accès rapide de WEBDEV. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page". L'assistant de création d'une page se lance.
  2. Choisissez le type de la page à créer dans les onglets :
    • l'onglet "Standard" permet de créer :
      • une page vierge ne contenant aucun champ.
      • une page vierge basée sur un modèle de pages, si le projet contient un modèle de pages.
      • une page basée sur un modèle prédéfini.
    • l'onglet "Pages internes" permet de créer des pages internes.
    • l'onglet "Pages d'erreurs" permet de créer des pages permettant de personnaliser les erreurs affichées dans le site.
    • l'onglet "RAD" propose de créer des pages RAD permettant d'afficher et de saisir des données. Ce type de page peut être basé sur un fichier de données, une requête, etc.
  3. Selon le type de page choisi, saisissez les informations demandées dans les différentes étapes de l'assistant.
  4. Validez la création de la page.
  5. La fenêtre de sauvegarde apparaît automatiquement. Spécifiez le titre de la page et son nom et validez.
  6. La page créée est affichée sous l'éditeur. Si nécessaire, le modèle de pages associé à la page est également généré et enregistré dans le projet.

Création des pages du projet par construction automatique du site (RAD)

Pour les sites dynamiques (Session, AWP ou PHP), les pages du projet peuvent être créées directement en une seule opération à partir de la description de l'analyse, par la construction automatique du site (RAD).
Pour plus de détails sur les pages créées par le RAD, consultez l'aide en ligne.
Pour créer le site dynamique par le RAD :
  1. Sous le volet "Projet", dans le groupe "Génération", cliquez sur "RAD Application complète".
    Attention : Pour utiliser cette option, le projet doit être associé à une analyse générée au moins une fois.
  2. Sélectionnez le pattern RAD à utiliser.
  3. Sélectionnez les fichiers de données utilisés pour la génération.
  4. Sélectionnez les fichiers de données principaux qui seront les points d'entrée dans l'application (principalement, ces fichiers de données seront utilisés pour mettre en place les options de menu).
  5. Validez la création de votre site par le RAD.
Manipulations simples sur une page
L'éditeur de pages permet de réaliser les manipulations suivantes sur les pages :
  • Ouvrir une page sous l'éditeur : Il suffit de double-cliquer sur le nom de la page affiché dans le volet "Explorateur de projet".
  • Sauvegarder et copier une page.
  • Importer et exporter une page.
  • Modifier l'ordre de navigation.
Principales caractéristiques d'une page
Une page peut accueillir tous les types de champs disponibles. Une page peut :
  • avoir une image de fond : cette image est affichée en fond de la page et les champs viennent se superposer à cette image.
  • avoir un menu : ce menu permettra aux internautes d'accéder plus rapidement aux principales fonctionnalités du site. Pour créer un menu déroulant dans une page, il suffit d'utiliser un champ "Menu". Les deux premières options apparaissent dans la page. Les options peuvent être manipulées grâce au menu contextuel des options. Les options de menu peuvent ensuite être manipulées par programmation.
  • avoir une barre de message : cette barre de message affichera les messages d'aide associés aux différents champs de la page. Pour plus de détails, consultez l'aide en ligne.
  • être multilingue : toutes les langues définies pour la page seront disponibles pour tous les champs de la page. Une page peut être associée à plus de langues que le projet (cas par exemple des pages partagées entre plusieurs projets). Pour plus de détails, consultez le chapitre Sites multilingues.
Remarque : Les pages Web destinées à être vues sur le téléphone Apple iPhone peuvent bénéficier d'enrichissements particuliers : splash screen au lancement, mode plein écran, etc. Ces fonctionnalités les font ressembler à de véritables applications. WEBDEV permet de paramétrer aisément toutes ces spécificités tout en préservant la compatibilité avec les autres navigateurs (mobiles ou non) du marché.
Page interne
Les pages internes permettent de partager dynamiquement une même partie d'interface au sein d'un ou de plusieurs sites.
L'interface à utiliser plusieurs fois est créée dans une page de type "Page Interne".
Cette interface est utilisée dans les différentes pages de votre site grâce au champ de type "Page interne".
Remarque : La page interne à partager peut être issue d'un composant.
Pour plus de détails, consultez Le champ Page Interne.
Modèles de pages
WEBDEV permet de créer des modèles de pages. Ces modèles contiennent tous les éléments graphiques et le code communs à l'ensemble des pages de votre site.
Les modifications effectuées dans un modèle de pages sont automatiquement reportées sur toutes les pages utilisant ce modèle.
Un modèle de pages permet de respecter la charte graphique définie pour un site.
L'utilisation de modèles de pages dans vos sites permet de :
  • simplifier la création des pages du site.
  • simplifier la mise en page des pages du site.
  • simplifier la mise à jour de la charte graphique du site.
Un modèle de pages se crée aussi simplement qu'une page. Pour créer une page en utilisant un modèle, il suffit de choisir l'option "basée sur un modèle".
Par défaut, toute modification effectuée dans le modèle est reportée dans les pages l'utilisant. Il est cependant possible dans une page spécifique de gérer des cas particuliers en surchargeant les éléments du modèle.
Pour plus de détails, consultez Les modèles de pages (templates).
Page popup
WEBDEV permet de créer des pages popup. Ces pages popup permettent de dialoguer simplement avec l'internaute. Il est par exemple possible d'utiliser une page Popup pour :
  • faire saisir des renseignements (paramètres SMTP pour l'envoi d'emails, nouvelle adresse, etc.),
  • demander une confirmation de suppression,
  • etc.
Pour ouvrir une page popup depuis une autre page, il est possible d'utiliser la fonction navigateur PopupAffiche.
Remarque : Il est également possible d'afficher une page sous forme de popup. Dans ce cas, l'affichage de la popup sera réalisé via la fonction PopupAffichePage.
Pour plus de détails, consultez Le champ Popup.
Actualiser une page en mode Session

Présentation

L'actualisation d'une page consiste à ré-afficher une page déjà ouverte sous le navigateur. Cette action est identique à l'utilisation de la touche "Rafraîchir" du navigateur.
Lors de l'actualisation de la page, les données dynamiques présentes dans la page sont mises à jour en fonction du contexte de page présent sur le serveur. Seules les données modifiées sont ré-affichées.
Par exemple, lors de la saisie d'une commande dans une application commerciale, à chaque nouvelle commande d'un article, la page affichant le récapitulatif de la commande (le panier) est réactualisée.

Mise en place

Pour actualiser une page, il suffit d'utiliser la fonction du WLangage PageActualise.
Lors de l'actualisation d'une page, les opérations effectuées automatiquement sont les suivantes :
  1. Vérification de l'existence du contexte de la page sur le serveur.
  2. Ré-affichage de la page en fonction de son contexte présent sur le serveur.
    L'utilisation de la fonction PageAffiche est déconseillée pour actualiser une page, car le temps de chargement de la page est beaucoup plus long.
Les contextes de pages

Présentation

Dans une application Windows, toutes les informations relatives à la fenêtre sont conservées avec la fenêtre.
Dans un site WEBDEV en mode Session, pour chaque page affichée sur le navigateur de l'internaute, un contexte de page existe sur le serveur.
Le contexte de page regroupe toutes les informations relatives à la page :
  • contenu des champs,
  • variables locales,
  • variables globales,
  • code WLangage "serveur", etc.

Fonctionnement automatique

Par défaut, WEBDEV gère automatiquement les contextes de pages en mode Session :
  • Un contexte de page est ouvert lors de l'affichage de la page en mode Session sur le navigateur.
  • Le contexte d'une page est mis à jour en fonction des informations saisies par l'internaute sous le navigateur. Cette mise à jour se fait lors de la validation de la page (à l'aide d'un bouton de type "Envoi au serveur" ou de la fonction PageValide).
  • Les contextes de page existants sont fermés lors de l'utilisation de la fonction PageUtilise. Le contexte de page correspondant à la page à afficher avec cette fonction est alors ouvert.
Remarque : WEBDEV offre la possibilité de réaliser une gestion avancée des contextes grâce aux fonctions ContexteXXX. Pour plus de détails, consultez Fonctions de gestion des pages.
Ouvrir une page dans un site WEBDEV

Présentation

L'ouverture d'une nouvelle page dans un site WEBDEV peut être réalisée selon plusieurs méthodes :
  • directement depuis la description du champ qui doit ouvrir la page (bouton, lien, menu, etc.),
  • par programmation en WLangage.

Ouverture d'une page depuis la description d'un champ

Lors de la description d'un champ Bouton, d'un champ Lien, d'un champ Image (avec zone de clic), il est possible de définir directement l'action effectuée et la destination de cette action.
Pour ouvrir directement une page "xxx" à partir par exemple d'un champ Bouton, Lien ou Image :
  1. Affichez la description de l'élément (option "Description" du menu contextuel de l'élément).
  2. Dans la zone "Action", sélectionnez le type d'action à effectuer : "Afficher une page du site".
  3. Sélectionnez la page à afficher.
  4. Sélectionnez la destination de l'action : page en cours, navigateur en cours, etc. L'action précédemment sélectionnée sera effectuée dans cette destination.
  5. Indiquez enfin si le contenu des champs doit être envoyé au serveur lors de l'action.
  6. Validez.

Ouverture d'une page par programmation

Le WLangage propose plusieurs fonctions permettant d'ouvrir une page.
  • PageActualise : Actualise la page affichée par rapport à son contexte.
  • PageAffiche : Ouvre et affiche une nouvelle page dans le navigateur de l'internaute.
  • PageAfficheDialogue : Ouvre et affiche une nouvelle page de manière modale dans le navigateur de l'internaute.
  • PageUtilise : Ferme toutes les pages en cours (et leurs contextes) et ouvre une nouvelle page.
  • PopupAffiche : Affiche une popup dans la page.
  • PopupAffichePage : Affiche une page sous forme de popup dans la page.
Lors de l'ouverture de la page, il est possible de passer des paramètres à la page. Pour plus de détails, consultez l'aide en ligne.
Remarque : Par défaut, lors de l'ouverture d'une page en programmation, la destination choisie est :
  • soit la destination définie dans la description de l'objet lançant l'ouverture de la page (champ Bouton, Lien, etc.).
  • soit la destination définie pour la page en cours.
Evénements associés aux pages

Evénements gérés par défaut

WEBDEV gère par défaut les événements suivants (ordre d'apparition sous l'éditeur de code) :
  • Déclarations globales (code serveur) :
    Déclaration des variables globales à la page. C'est le premier code exécuté à l'ouverture de la page.
  • Initialisation (code serveur) :
    Exécuté lors de l'ouverture de la page. L'événement correspondant à l'initialisation des champs de la page est exécuté avant ce code.
  • Déclarations globales (code navigateur) :
    Déclaration des variables navigateur globales à la page.
  • Chargement (onload) de la page (code navigateur) :
    Code navigateur exécuté lors de l'affichage de la page dans le navigateur.
  • Déchargement (onunload) de la page (code navigateur) :
    Code navigateur exécuté lors de l'affichage d'une nouvelle page dans le navigateur.
  • A chaque changement d'agencement (code serveur) :
    Exécuté lorsque l'agencement de la page est modifié.
  • Demande de mise à jour de l'affichage (code serveur) :
    Permet de regrouper le code de mise à jour des champs de la page : contenu des champs, état (visible, grisé, etc.), libellé à mettre à jour, etc.
    Cet événement est lancé sur demande grâce aux fonctions :
  • Fermeture de la page (code serveur) :
    Exécuté lors de la fermeture de la page.
  • Synchronisation de la page (code serveur) :
    Code serveur permettant de gérer la synchronisation de la page lors de l'utilisation du bouton "Précédent" du navigateur.
  • Affectation de la propriété Valeur (page interne uniquement) :
    Exécuté lors de l'utilisation de la propriété Valeur en affectation sur le champ Page Interne.
  • Récupération de la propriété Valeur (page interne uniquement) :
    Exécuté lors de l'utilisation de la propriété Valeur en lecture sur le champ Page Interne.

Evénements optionnels

Plusieurs événements optionnels peuvent être gérés.
Pour gérer un événement optionnel, il suffit de :
  1. Afficher la fenêtre de code de la page.
  2. Cliquer sur "Ajouter d'autres événements à la page" présent à la fin de la liste des événements. La fenêtre des événements optionnels s'affiche.
  3. Sélectionner l'événement optionnel à ajouter et valider.
  4. L'événement sélectionné est automatiquement ajouté à la suite des événements proposés par défaut.
Il est ainsi possible de gérer par exemple :
  • le survol du champ par la souris,
  • le bouton gauche enfoncé, relâché, avec double-clic,
  • le bouton droit enfoncé, relâché, avec double-clic,
  • la roulette de la souris, etc.
Les menus (principal ou contextuel)
WEBDEV permet de créer un menu et/ou un menu contextuel dans vos pages HTML. Ces menus correspondent à des champs spécifiques.
Le menu principal ou contextuel d'une page peut être vertical ou horizontal. A partir des différentes options de ce menu, il est possible :
  • d'afficher des pages,
  • d'exécuter le code de champs Bouton présents dans la page,
  • etc.
WEBDEV permet de :
  • Créer un menu (principal ou contextuel),
  • Editer un menu (principal ou contextuel),
  • Supprimer un menu (principal ou contextuel).
Pour plus de détails, consultez l'aide en ligne.
Les options de menu

Présentation

Un menu (principal ou contextuel) est composé d'une ou de plusieurs options et sous-options. Chaque option permet d'exécuter un code WLangage.
Pour manipuler les options de menu, il suffit d'éditer le menu concerné.
Pour éditer (ou afficher sous l'éditeur) le menu principal d'une page :
  1. Ouvrez la page concernée sous WEBDEV.
  2. Cliquez deux fois sur le menu : un cadre jaune apparaît.

Manipuler les options de menu sous l'éditeur

L'éditeur de pages permet de réaliser très simplement les manipulations suivantes :
  • Ajouter une option de menu,
  • Ajouter un séparateur,
  • Ajouter un sous-menu,
  • Supprimer une option de menu.
Les options de menu peuvent également être directement manipulées sous l'éditeur de pages et leurs caractéristiques sont modifiables grâce à une fenêtre de description.
La fenêtre de description des options de menu permet par exemple de :
  • modifier le libellé de l'option,
  • cocher ou décocher une option de menu,
  • associer une image à une option de menu,
  • associer un raccourci clavier à une option de menu.
Il est également possible d'associer du code WLangage à une option de menu. Seules les options de menu ne possédant pas de sous-menu peuvent lancer un traitement WLangage.
Pour plus de détails, consultez Manipuler les options de menu.
Page précédenteSommairePage suivante
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/08/2023

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