PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • 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
  • Traitements associés aux pages
  • Traitements gérés par défaut
  • Traitements optionnels
  • Les menus
  • 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
12. Les pages en pratique
Chapitre précédentSommaireChapitre suivant
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, ...
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, ...
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. Indiquez si la page vierge doit être créée en mode Responsive Web Design.
  4. Validez la création de la page. Une page vierge est créée.
  5. La fenêtre de sauvegarde apparaît automatiquement.
  6. 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.
  7. Validez la fenêtre de sauvegarde.
  8. Créez les champs dans la page.
Remarques :

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 "Page interne" 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, ...
    • l’onglet "RID" propose de créer des pages de type RID permettant de saisir des données. Seule l’interface de la page sera générée. La programmation sera à la charge du développeur.
  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.

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 R.A.D. :
  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, ... 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 à fusionner peut être issue d'un composant.
Pour plus de détails, consultez l'aide en ligne.
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 surchargent 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, ...),
  • demander une confirmation de suppression,
  • ...
Pour ouvrir une page popup depuis une autre page, il est possible d'utiliser la fonction navigateur PopupAffiche.
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 dynamique WEBDEV, 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", ...

Fonctionnement automatique

Par défaut, WEBDEV gère automatiquement les contextes de pages dynamiques :
  • Un contexte de page est ouvert lors de l'affichage de la page dynamique 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 l'aide en ligne.
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, ...),
  • par programmation en WLangage.

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

Lors de la description d'un bouton, d'un lien, d'une image clicable, il est possible de définir directement l'action effectuée et la destination de cette action.
Pour ouvrir directement une page "xxx" à partir d'un bouton, lien, image, ... :
  1. Affichez la description de l'élément (option "Description" du menu contextuel de l'élément).
  2. Sélectionnez l'action à effectuer : "Afficher la page xxx".
  3. Sélectionnez la destination de l'action : page en cours, navigateur en cours, ... (frame spécifique dans le cas d'un frameset). L'action précédemment sélectionnée sera effectuée dans cette destination.
  4. 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.
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 (bouton, lien, ...).
  • soit la destination définie pour la page en cours.
Traitements associés aux pages

Traitements gérés par défaut

WEBDEV gère par défaut les traitements 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. Le traitement d'initialisation des champs de la page est exécuté avant ce code.
  • 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.
  • 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.
  • Fermeture de la page (code serveur) :
    Exécuté lors de la fermeture de la page.
  • 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.

Traitements optionnels

Plusieurs traitements optionnels peuvent être gérés.
Pour gérer un traitement optionnel, il suffit de :
  1. Afficher la fenêtre de code de la page.
  2. Cliquer sur "..." présents dans le traitement "Autres traitements". La fenêtre des traitements optionnels s'affiche.
  3. Sélectionner le traitement optionnel à ajouter et valider.
  4. Le traitement sélectionné est automatiquement ajouté à la suite des traitements 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
WEBDEV permet de créer un menu dans vos pages HTML. Ce menu 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 boutons présents dans la page,
  • ...
WEBDEV permet de :
  • Créer un menu principal,
  • Editer un menu principal,
  • Supprimer un menu principal.
Pour plus de détails, consultez l'aide en ligne.
Les options de menu

Présentation

Un menu 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 fenêtres 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.
Chapitre précédentSommaireChapitre suivant
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire