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.

• 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.

• Création d'une page.
• 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.
• Ouvrir une page dans un site WEBDEV.
• Evénements associés aux pages.
• Les menus.

WEBDEV propose plusieurs méthodes pour créer une page :

• Création de pages vierges.
• Création de pages prédéfinies.
• Création de pages par le RAD projet.

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).

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.

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.

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é.

Les pages internes permettent de partager dynamiquement une même partie d'interface au sein d'un ou de plusieurs sites.

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.

• 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".

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.

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.

Mise en place

Pour actualiser une page, il suffit d'utiliser la fonction du WLangage PageActualise.

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.

Présentation

Dans une application Windows, toutes les informations relatives à la fenêtre sont conservées avec la fenêtre.

• 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.

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.

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.

• 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 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 :
  • DemandeMiseAJourUI : Exécute l'événement à la fin de l'événement en cours (lancement asynchrone).
  • ExécuteMiseAJourUI : Exécute immédiatement l'événement.
• 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.

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.

• 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.

WEBDEV permet de créer un menu et/ou un menu contextuel dans vos pages HTML. Ces menus correspondent à des champs spécifiques.

• d'afficher des pages,
• d'exécuter le code de champs Bouton présents dans la page,
• etc.

• 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.

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.

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.

• 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.