DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WEBDEV / Tuto - Réaliser un site Internet avec données
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Création d'une page en mode AWP listant les nouveaux produits
  • Création de la page
  • Création de la liste des nouveaux produits
  • Visualisation du détail d'une nouveauté
  • Création de la page
  • Que doit faire la page ?
  • Création des champs
  • Affichage des données dans la page
  • Affichage de la fiche depuis la liste des produits
  • Gestion des styles
  • Importer une feuille de styles CSS
  • Appliquer les styles CSS
  • Liaison du site Internet et du site Intranet
  • Création d'une page affichant les conditions générales de vente
  • Création de la page
  • Création du champ
  • Conclusion
Leçon 4.2. Création de pages en mode AWP
Ce que vous allez apprendre dans cette leçon
  • Création d'une page en mode AWP listant les nouveaux produits.
  • Création d'une fiche produit en mode AWP.
  • Importation de styles CSS.
  • Liaison entre la partie Internet et la partie Intranet du site.
  • Création d'une page de conditions générales de ventes.
Durée de la leçon

Durée estimée : 50 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Nous allons créer les différentes pages en mode AWP permettant de lister, ajouter et modifier des nouveaux produits. Ces manipulations vous feront découvrir plusieurs aspects de la gestion des fichiers de données et vous feront également manipuler certaines fonctionnalités du mode AWP­.
Nous allons faire ces manipulations dans le projet "Site_WEBDEV_Complet". Nous avons déjà travaillé sur ce projet dans la partie précédente.

  • Pour ouvrir ce projet :
    1. Lancez WEBDEV si nécessaire.
    2. Affichez la page d'accueil de WEBDEV (Ctrl + <).
    3. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 3 à 6", double-cliquez sur "Site WEBDEV Complet - Exercice".
    4. WEBDEV vous informe que ce projet a déjà été ouvert et vous propose d'ouvrir la version locale ou d'écraser ce projet avec la version initiale du cours. Pour récupérer vos manipulations, cliquez sur le bouton "Ouvrir la copie locale".

Corrigé

Un projet corrigé est disponible. Ce projet contient les différentes pages créées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 3 à 6", double-cliquez sur "Site WEBDEV Complet - Corrigé".
Création d'une page en mode AWP listant les nouveaux produits
Nous allons maintenant créer dans le projet "Site_WEBDEV_Complet" une page listant les nouveaux produits. Cette page sera une page "Vitrine" et sera accessible par Internet. Cette page doit être référencée sur Internet, elle doit donc utiliser le mode de génération AWP.

Création de la page

  • Pour créer une page listant les nouveaux produits :
    1. Créez une nouvelle page :
      • Cliquez sur Créer un élément parmi les boutons d'accès rapide.
      • La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
      • Dans l'assistant de création d'une nouvelle page, cliquez sur la page prédéfinie "Simple".
        Création d'une nouvelle page
      • Vérifiez que l'option "Créer : une page et son modèle" est bien cochée.
      • Validez l'assistant.
    2. La nouvelle page apparaît sous l'éditeur. La fenêtre de sauvegarde est affichée.
    3. Saisissez le titre de la page : "Liste des nouveautés". Le nom de la page "PAGE_Liste_des_nouveautes" est automatiquement proposé.
    4. Validez.
  • La page a été créée avec des champs proposés par défaut. Supprimez ces champs :
    1. Sélectionnez les champs présents dans la page (utilisez le raccourci Ctrl + A).
    2. Supprimez les champs (touche Suppr).
  • Cette page doit pouvoir être référencée. Pour cela, elle doit être générée en mode AWP :
    1. Affichez la fenêtre de description de la page : affichez le menu contextuel et sélectionnez "Description".
    2. Dans l'onglet "Général", dans la zone "Type de page", pour l'option "Mode", sélectionnez "AWP".
      Sélection du mode AWP
    3. Validez.
    4. Enregistrez les modifications en cliquant sur Enregistrer un élément parmi les boutons d'accès rapide.

Création de la liste des nouveaux produits

Nous allons afficher la liste des nouveaux produits. Pour cela, nous allons utiliser un champ Zone répétée. Nous avons déjà vu dans la partie précédente comment créer ce type de champ sans programmation, via l'assistant. Pour cette page, nous allons programmer le remplissage du champ Zone répétée.
Création du champ Zone répétée
  • Pour créer le champ Zone répétée :
    1. Sous le volet "Création", dans le groupe "Données", déroulez "Zone Répétée" et sélectionnez "Zone répétée". Le champ en création suit alors le mouvement de la souris.
    2. Cliquez dans la page en haut à gauche : l'assistant de création du champ Zone répétée se lance.
    3. Dans l'assistant, sélectionnez l'option "Remplir le champ Zone répétée par programmation".
      Assistant de création d'un champ Zone répétée
      Passez à l'étape suivante.
    4. Dans l'étape suivante, nous allons sélectionner des paramètres supplémentaires pour la création du champ Zone répétée :
      • Le champ Zone répétée est en mode Serveur : toutes les données seront affichées au chargement de la page.
        Sélectionnez le mode de fonctionnement "Serveur".
      • Le champ Zone répétée utilise un nombre de répétitions infini. En effet, tous les produits doivent être accessibles directement dans la page. La page va s'agrandir afin d'afficher tous les produits.
        Sélectionnez "Pas de limite" dans la zone "Nombre maximum de répétitions par page".
        Assistant de création d'un champ Zone répétée
    5. Passez à l'étape suivante. Nous allons configurer les paramètres d'affichage.
      • Conservez le sens d'affichage proposé : nombre de colonnes fixe, remplissage en ligne.
      • Le champ Zone répétée va afficher les nouveautés sur 5 colonnes.
        Dans la zone "Nombre de colonnes", remplacez 1 par 5.
    6. Passez à l'étape suivante.
    7. La dernière étape permet d'indiquer le nom du champ (par exemple ZR_Nouveautes).
    8. Validez l'assistant. Le champ Zone répétée est automatiquement créé dans la page.
Le champ Zone répétée créé est vide. WEBDEV matérialise la cellule principale (celle que l'on va éditer) en trait plein et les suivantes en trait pointillé.

  • Réduisez à l'aide des poignées la largeur de la cellule principale afin que les 5 cellules rentrent en largeur dans la page.
    Champ Zone répétée en édition dans la page
Nous allons maintenant créer les différents champs qui vont être affichés dans le champ Zone répétée.
Chaque répétition va afficher :
  • Un champ Image affichant l'image du produit.
  • Un champ Lien affichant le nom du produit et permettant d'ouvrir la fiche détail.
  • Un champ Libellé permettant de stocker l'identifiant du produit.
Nous allons créer ces différents champs puis programmer le remplissage du champ Zone répétée.
Création des champs contenus dans le champ Zone répétée
  • Pour créer le champ Image :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Image". Le champ en création apparaît sous la souris.
    2. Survolez la première répétition : un cadre vert apparaît permettant de visualiser la zone disponible.
    3. Cliquez en haut à gauche de la première répétition du champ Zone répétée. Le champ Image est créé. A l'aide des poignées de sélection, agrandissez la taille du champ. Vous obtenez la page suivante :
      Création du champ Image dans le champ Zone Répétée
    4. Affichez la description du champ Image pour modifier les caractéristiques du champ (double-cliquez sur le champ).
    5. Modifiez :
      • le nom du champ : IMG_Visuel.
      • le mode d'affichage de l'image : choisissez "Homothétique" et cochez les options "Sans agrandissement de l'image" et "Centrer l'image dans le champ".
      • le mode de transformation de l'image. Dans notre cas, l'image du produit est stockée sous forme de mémo dans une rubrique du fichier de données Produit. Choisissez une transformation calculée "côté serveur", pour optimiser la bande passante et cochez l'option "Haute qualité".
    6. Validez.
  • Pour créer le champ Lien :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Lien".
    2. Cliquez dans le champ Zone répétée, en dessous du champ Image pour créer le champ Lien.
      Création du champ Lien dans le champ Zone répétée
    3. Affichez la description du champ Lien pour modifier les caractéristiques du champ (double-cliquez sur le champ).
    4. Ce champ a pour nom "LIEN_Visu_Produit".
    5. Validez la fenêtre de description du champ.
    6. Sélectionnez le champ Lien et agrandissez sa largeur (à l'aide des poignées) pour qu'il occupe la largeur de la répétition.
  • Pour créer le champ Libellé contenant l'identifiant du produit :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Texte" et sélectionnez "Libellé simple".
    2. Cliquez dans le champ Zone répétée, à droite du champ Image pour créer le champ Libellé.
      Création du champ Libellé dans le champ Zone répétée
    3. Affichez la description du champ Libellé pour modifier les caractéristiques du champ (double-cliquez sur le champ).
    4. Ce champ a pour nom "LIB_Produit".
    5. Validez la fenêtre de description du champ.
Pour remplir les champs contenus dans le champ Zone répétée et modifier leurs caractéristiques à chaque répétition, nous allons créer des attributs.

Note

Un champ Zone répétée est composé de :
  • champs, répétés à chaque répétition.
  • attributs. Un attribut permet de définir la caractéristique du champ qui sera modifiée à chaque répétition. Par exemple, si à chaque répétition, le champ PRIX doit changer de valeur et de couleur, il sera nécessaire de définir deux attributs différents sur le même champ.

  • Pour créer des attributs :
    1. Affichez la fenêtre de description du champ Zone répétée (double-cliquez sur le champ).
    2. Dans la partie haute de la fenêtre, aucun attribut n'est créé. Nous allons définir 3 attributs (un pour chaque champ de la zone répétée).
    3. Créez un nouvel attribut en cliquant sur le bouton "Nouveau" :
      • Renommez l'attribut en "ATT_Image".
      • Sélectionnez le champ "IMG_Visuel".
      • Sélectionnez la propriété "Valeur". En effet, la valeur de l'image sera modifiée à chaque répétition.
        Description de l'attribut ATT_Image
    4. Créez un nouvel attribut en cliquant sur le bouton "Nouveau" :
      • Renommez l'attribut en "ATT_Lien".
      • Sélectionnez le champ "LIEN_Visu_Produit".
      • Sélectionnez la propriété "Libellé". En effet, le libellé du champ sera modifié à chaque répétition.
    5. Créez un nouvel attribut en cliquant sur le bouton "Nouveau" :
      • Renommez l'attribut en "ATT_ID".
      • Sélectionnez le champ "LIB_Produit".
      • Sélectionnez la propriété "Libellé". En effet, le libellé du champ sera modifié à chaque répétition.
        Description du champ Zone répétée
    6. Validez la fenêtre de description du champ Zone répétée.
    7. Enregistrez les modifications (Enregistrer un élément ou Ctrl + S).
Le champ Zone répété est maintenant terminé. Nous pouvons maintenant programmer le remplissage du champ Zone répétée.
Remplissage du champ Zone répétée
Le remplissage du champ Zone répétée est réalisé lors de l'initialisation de la page.

  • Pour remplir le champ Zone répétée :
    1. Affichez les événements WLangage associés à la page :
      • Cliquez à l'extérieur de la page (par exemple à gauche ou à droite de la fenêtre d'accueil de la page sous l'éditeur).
      • Sélectionnez l'option "Code" du menu contextuel ou utilisez la touche F2.
    2. Dans l'événement "Initialisation" de la page, saisissez le code suivant :
      POUR TOUT Produit AVEC Nouveauté = Vrai
      ZR_Nouveautés.AjouteLigne(Produit.Visuel,Produit.Libellé,Produit.IDProduit)
      FIN
    3. Examinons ce code WLangage :
      • Ce code effectue un parcours du fichier de données Produit grâce à l'instruction POUR TOUT.
      • Seuls les enregistrements pour lesquels la rubrique "Nouveauté" vaut Vrai sont sélectionnés.
      • La fonction <Zone répétée>.AjouteLigne permet d'ajouter une nouvelle répétition dans le champ Zone répétée. Les différents attributs de la répétition sont mis à jour avec les données de l'enregistrement en cours :
        • la valeur de l'attribut "ATT_Image" correspond à l'image contenue dans la rubrique "Visuel" du fichier de données "Produit".
        • le libellé de l'attribut "ATT_Lien" a pour valeur le contenu de la rubrique "Libellé" du fichier de données "Produit".
        • le libellé de l'attribut "ATT_ID" a pour valeur le contenu de la rubrique "IDProduit" du fichier de données "Produit".
    4. Enregistrez les modifications (Enregistrer un élément ou Ctrl + S).
    5. Fermez la fenêtre de code.
  • Nous allons tout de suite tester la page que nous venons de créer.
    1. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    2. La page apparaît automatiquement dans le navigateur.
      Page en exécution
  • Fermez le navigateur. L'éditeur de WEBDEV réapparaît.
Visualisation du détail d'une nouveauté
Avoir la liste des nouveaux produits, c'est bien. Nous allons maintenant créer une page "fiche" permettant de voir le détail du produit. Cette page sera affichée lorsque l'internaute cliquera sur le lien affichant le nom du produit dans le champ Zone répétée.

Création de la page

  • Pour créer une page affichant le détail d'un produit :
    1. Créez une nouvelle page.
      • Cliquez sur Créer un élément parmi les boutons d'accès rapide.
      • La fenêtre de création d'un élément s'affiche : cliquez sur "Page" puis sur "Page".
      • L'assistant de création d'une page s'affiche.
      • Dans la zone "Basée sur un modèle du projet", choisissez "PAGEMOD_Simple" et validez l'assistant.
    2. La fenêtre de sauvegarde de la page est affichée. Saisissez le titre "Détails du produit". Le nom "PAGE_Details_du_produit" est automatiquement proposé.
    3. Validez.
  • Comme pour la page de la liste des nouveautés, cette page doit être générée en mode AWP :
    1. Affichez la fenêtre de description de la page (dans le menu contextuel, sélectionnez l'option "Description").
    2. Dans la zone "Type de page", sélectionnez le mode "AWP".
      Modification du type de page
    3. Validez.
    4. Enregistrez les modifications (Enregistrer un élément ou Ctrl + S).

Que doit faire la page ?

La page que nous sommes en train de créer est destinée à afficher les caractéristiques du produit actuellement sélectionné dans le champ Zone répétée.
Dans notre cas, cette page va afficher le contenu des différentes rubriques présentes dans le fichier de données "Produit".
Nous allons tout d'abord indiquer à la page quel produit doit être affiché. Pour cela, il suffit de déclarer un paramètre dans la page. Ce paramètre sera passé sur l'URL.

  • Pour déclarer un paramètre dans la page :
    1. Utilisez la touche F2. L'éditeur de code affiche les différents événements de la page.
    2. Dans l'événement "Déclarations globales", saisissez le code suivant :
      PROCÉDURE MaPage(NumProduitAAfficher est un entier sur 8 octets)
    3. Examinons ce code WLangage :
      • Le mot-clé PROCEDURE dans l'événement "Déclarations globales" permet d'associer une procédure à l'ouverture de la page.
      • La procédure a pour nom "MaPage". A l'exécution, ce mot-clé sera automatiquement remplacé par le nom de la page en cours.
      • La procédure attend pour paramètre la variable NumProduitAAfficher qui est un entier sur 8 octets. Cette variable correspond à l'identifiant du produit à afficher dans la page. Cette variable est du même type que la rubrique IDProduit correspondante décrite dans le fichier de données Produit. Ce paramètre contient la valeur qui sera présente dans l'URL.
    4. Fermez l'éditeur de code. Nous allons maintenant créer les différents champs de la page.

Création des champs

Nous allons maintenant créer les différents champs permettant de visualiser dans la page les différentes informations concernant le produit sélectionné.
Dans la partie précédente, nous avons vu comment créer les champs par un "Drag and Drop" depuis le volet de l'analyse. Dans cette partie, nous allons créer les champs un par un puis les associer à la rubrique correspondante dans le fichier de données.
Nous allons créer les champs suivants :
  • un champ Image.
  • des champs Libellé simple pour le libellé du produit, son prix et sa référence.
  • un champ Zone de texte riche pour la description du produit.
  • Pour créer le champ Image :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Image".
    2. Cliquez dans la page (par exemple en haut à gauche).
      Création du champ Image
    3. Affichez la description du champ Image pour modifier les caractéristiques du champ (double-cliquez sur le champ).
      • Ce champ a pour nom "IMG_Image_Produit".
      • Choisissez un affichage calculé côté serveur, pour optimiser la bande passante et cochez l'option "Haute qualité". En effet, Le mode d'affichage de l'image est "Homothétique". Cochez les options "Sans agrandissement de l'image" et "Centrer l'image dans le champ".

        Note

        Avec les options "Homothétique", "Centrer l'image dans le champ" et "Sans agrandissement de l'image", la taille de l'image s'adaptera homothétiquement à la zone définie pour l'image. Les proportions seront respectées et l'image ne sera pas agrandie.
    4. Validez la fenêtre de description du champ.
  • Pour créer le champ Libellé simple permettant d'afficher le libellé du produit :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Texte" et sélectionnez "Libellé simple".
    2. Cliquez dans la page (par exemple à droite de l'image).
      Création du champ Libellé

      Note

      Pour simplifier le positionnement des champs, appuyez sur la touche F7. Un appui sur cette touche permet de voir la zone occupée par le champ, un second appui sur cette touche permet d'afficher un liseré autour du champ (uniquement en édition).
      Il est ainsi possible de visualiser le cadre du champ et ainsi de positionner simplement les champs les uns par rapport aux autres.
      Cette fonctionnalité est très utile pour les champs qui n'ont pas de bordure.
    3. Renommez le champ Libellé : "LIB_Titre".
    4. Agrandissez le champ en largeur (à l'aide des poignées de redimensionnement).
  • Nous allons afficher la description du produit dans un champ Libellé riche (appelé Zone de Texte Riche). Pour créer ce champ :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Texte" et sélectionnez "Zone de Texte Riche". Il est également possible de cliquer directement sur l'icône "Texte".
    2. Cliquez dans la page (par exemple à droite de l'image, en dessous du champ LIB_Titre).
      Création du champ Libellé riche
    3. Renommez le champ : "ZTR_Description".
Nous allons afficher le prix du produit dans un champ d'affichage formaté. Ce type de champ permet par exemple d'afficher des dates, des heures, des valeurs monétaires, en respectant le format d'affichage correspondant.
  • Pour créer un champ d'affichage formaté :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Texte" et sélectionnez "Champ d'affichage formaté".
      Création d'un champ d'affichage formaté
    2. Cliquez dans la page, sous la description du produit : le champ est automatiquement créé.
    3. Diminuez la largeur du champ à l'aide des poignées de redimensionnement.
  • Nous allons modifier les caractéristiques de ce champ :
    1. Affichez la fenêtre de description du champ que vous venez de créer : double-cliquez sur le champ par exemple.
    2. Dans l'onglet "Général" :
      • Modifiez le nom du champ : "LIBF_Prix".
      • Supprimez le libellé.
      • Modifiez le type du champ : sélectionnez "Monétaire".
        Description d'un champ d'affichage formaté
    3. Validez.
  • Créez un champ Libellé simple pour afficher la référence du produit. Ce champ a pour nom "LIB_Référence" et pour libellé "Référence". Ce champ est positionné sous le prix.
Tous les champs dont nous avons besoin sont créés. Nous allons maintenant associer chaque champ à la rubrique correspondante. Cette association est réalisée dans l'onglet "Liaison" de la fenêtre de description du champ.

  • Pour lier le champ "IMG_Image_Produit" à la rubrique correspondante :
    1. Sélectionnez le champ "IMG_Image_Produit".
    2. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Description".
    3. Affichez l'onglet "Liaison" de la fenêtre de description. Cet onglet permet de voir que le champ en cours n'est actuellement lié à aucune rubrique. Nous allons le lier à la rubrique Visuel du fichier de données Produit.
    4. Dans la zone "Rubrique reliée", déroulez "Analyse" puis déroulez "Produit". La liste des rubriques du fichier de données Produit s'affiche.
    5. Sélectionnez la rubrique "Visuel" du fichier de données "Produit".
      Liaison du champ avec la rubrique
    6. Validez la fenêtre de description.
  • Effectuez la même manipulation pour effectuer les liaisons suivantes :
    • Champ LIB_Titre lié à la rubrique "Libellé" du fichier de données "Produit".
    • Champ ZTR_Description lié à la rubrique "Description" du fichier de données "Produit".
    • Champ LIBF_Prix lié à la rubrique "PrixHT" du fichier de données "Produit".
    • Champ LIB_Référence lié à la rubrique "Référence" du fichier de données "Produit".
  • Enregistrez la page (Ctrl + S).

Affichage des données dans la page

La page "Fiche" doit afficher le produit sélectionné dans le champ Zone répétée. Dans le code de la page, nous allons maintenant saisir le code permettant de :
  • rechercher le produit à afficher.
  • afficher les données dans la page.
  • Pour afficher les données dans la page :
    1. Cliquez à l'extérieur de la page (par exemple à gauche ou à droite de la fenêtre d'accueil de la page sous l'éditeur).
    2. Utilisez la touche F2. L'éditeur de code affiche les différents événements WLangage de la page.
    3. Dans l'événement "Déclarations globales", à la suite du code que nous avons écrit précédemment, saisissez le code suivant :
      Produit.LitRecherchePremier(IDProduit, NumProduitAAfficher)
      SI Produit.Trouve() ALORS
      Produit.VersPage()
      FIN
    4. Examinons ce code WLangage :
      • La fonction <Fichier de données>.LitRecherchePremier permet de rechercher le premier enregistrement du fichier de données Produit pour lequel la rubrique IDProduit est égale à la valeur NumProduitAAfficher, correspondant au paramètre passé à la page.
      • La fonction <Fichier de données>.Trouve permet de vérifier si un enregistrement a été effectivement trouvé. Cette fonction est notamment nécessaire dans des sites multi-utilisateurs. Elle permet ainsi d'éviter les erreurs dues aux suppressions effectuées par d'autres utilisateurs.
      • La fonction <Fichier de données>.VersPage permet d'afficher dans les champs de la page, les données présentes dans le fichier de données, pour l'enregistrement en cours. Dans notre cas, l'enregistrement en cours correspond à l'enregistrement trouvé avec la fonction <Fichier de données>.LitRecherchePremier.
    5. Fermez l'éditeur de code.

Affichage de la fiche depuis la liste des produits

Nous allons maintenant voir comment afficher la fiche du produit sélectionné dans la liste des produits. Le principe est simple : l'utilisateur sélectionnera le produit dans le champ Zone répétée et affichera le détail grâce à un lien. Ce lien existe déjà dans le champ Zone répétée.

  • Nous allons tout d'abord modifier la page "PAGE_Liste_des_nouveautes" afin que le champ Lien ouvre la page de description du produit.
    1. Placez-vous sur la page "Liste des nouveautés" : cliquez sur "PAGE_Liste_des_nouveautes" dans la barre des documents ouverts.
    2. Affichez la fenêtre de description du champ Lien : double-cliquez sur le champ.
    3. Dans l'onglet "Général" de la fenêtre de description, dans la zone "Action du lien" :
      • Sélectionnez le type "Afficher une page du site".
      • Sélectionnez la page "PAGE_Details_du_produit".
        Description du champ Lien
      • Cliquez sur le bouton "Paramètres". Nous allons définir le paramètre à passer à la page pour afficher le détail du produit sélectionné.
    4. Dans la fenêtre qui s'affiche, nous retrouvons le nom du paramètre que nous avons déclaré dans l'événement "Déclarations globales" de la page (NumProduitAAfficher). Il suffit de sélectionner le champ contenant la valeur du paramètre. Dans notre cas, l'identifiant du produit est contenu dans l'attribut "ATT_ID".
    5. Déroulez la valeur correspondant au paramètre "NumProduitAAfficher" et sélectionnez "ATT_ID" :
      Sélection du paramètre de la page
    6. Cliquez sur "OK" et validez la fenêtre de description des paramètres.

      Note

      Attention : Dans un champ Zone répétée, la valeur n'est pas contenue dans le champ mais dans l'attribut qui lui est associé sur la caractéristique de la valeur.
    7. Validez la fenêtre de description du champ Lien.
    8. Enregistrez les modifications (Enregistrer un élément ou Ctrl + S).
  • Nous allons réaliser un test pour vérifier que tout fonctionne.
    1. Affichez si nécessaire la page "PAGE_Liste_des_nouveautes" sous l'éditeur de pages (utilisez la barre des documents).
    2. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    3. La page apparaît automatiquement dans le navigateur.
    4. Cliquez sur le lien pour afficher le détail d'un produit.
      Détail d'un produit (en exécution)
  • Fermez les pages pour arrêter le test.
Gestion des styles
Pour améliorer notre page, nous allons modifier les styles des champs. Si vous avez un infographiste ou une charte graphique définie pour votre site (charte graphique de l'entreprise par exemple), les styles ont été préalablement définis dans une feuille de styles CSS. Nous allons importer cette feuille de styles dans notre projet WEBDEV pour utiliser ces styles.

Note

WEBDEV propose deux types de styles :
  • les styles WEBDEV.
  • les styles CSS.
Un style WEBDEV est un ensemble de styles CSS permettant de définir un style global sur des objets de haut niveau.
Par exemple, un style WEBDEV pour un champ de saisie contiendra deux styles CSS :
  • un style pour le libellé.
  • un style pour le texte de la zone de saisie.

Note

Rappel : Lors de la création du site, il est possible de choisir une ambiance. Les ambiances permettent d'harmoniser l'aspect visuel d'un site et rendent les changements de look plus simples et plus rapides.
L'ambiance fournit les images, les polices, la texture, la forme des boutons et les styles disponibles pour le projet.
Vous créez ainsi des sites avec un look professionnel facilement, à partir des styles fournis en standard. L'importation de styles CSS permet dans ce cas par exemple d'ajouter un nouveau style trouvé sur Internet.

Importer une feuille de styles CSS

  • Pour importer la feuille de styles CSS dans le projet :
    1. Dans le ruban, sous le volet "Projet", dans le groupe "Projet", déroulez "Importer" et sélectionnez "Une feuille de styles CSS".
      Remarque : Si vous utilisez le produit WEBDEV intégré à WINDEV, l'option devient : sous le volet "Projet", dans le groupe "Projet", déroulez "Importer" et sélectionnez "De WEBDEV" puis "Une feuille de styles CSS".
    2. L'assistant d'importation se lance et propose deux options :
      Assistant d'importation de styles
      • Importer les styles CSS dans WEBDEV : Cette option importe directement les styles CSS dans le projet WEBDEV. Les styles seront alors modifiables sous WEBDEV.
      • Utiliser une feuille de styles CSS externe : Cette option permet d'utiliser une feuille de style existante. Cette option doit être choisie lorsqu'une feuille de style est par exemple définie pour une entreprise et doit être partagée entre plusieurs sites (charte graphique de l'entreprise).
    3. Choisissez l'option "Importer des styles CSS dans WEBDEV" et cliquez sur le bouton "Suivant".
    4. Sélectionnez le fichier "stylesperso.css". Ce fichier est disponible dans le répertoire "\Tutoriel\WB\Exercices\Site_WEBDEV_Complet". Les différents styles contenus dans la feuille de styles sont affichés.
      Sélection des styles à importer
      • Un aperçu du style sélectionné est affiché sur la droite.

        Astuce

        Les rectangles de couleurs dans l'aperçu permettent de changer la couleur de fond. Il est ainsi possible d'obtenir un aperçu sur une couleur autre que du blanc.
      • Le préfixe "class-" signifie que c'est une classe CSS. Cet attribut signifie que ce style sera appliqué sur les éléments possédant l'attribut HTML "class".
    5. Conservez tous les styles proposés et validez. Les styles sont importés et sont disponibles dans WEBDEV.

Appliquer les styles CSS

Nous allons maintenant appliquer les différents styles aux champs de la page "PAGE_Details_du_produit".
  1. Placez-vous sur la page "PAGE_Details_du_produit".
  2. Affichez la fenêtre de description du champ "LIBF_Prix" qui affiche le prix du produit (double-cliquez sur le champ).
  3. Dans l'onglet "Style" :
    • Sélectionnez l'élément "Zone d'affichage (CSS)".
    • Sélectionnez le style "class-styleprix" dans la liste "Style CSS" :
      Onglet Style d'un champ d'affichage formaté
  4. Validez. Le style est automatiquement appliqué au champ.
  5. Agrandissez si nécessaire le champ (à l'aide des poignées de redimensionnement) pour adapter sa taille à son contenu.
  6. Enregistrez les modifications (Enregistrer un élément ou Ctrl + S).
  • Nous allons réaliser un test pour vérifier que tout fonctionne.
    1. Affichez si nécessaire la page "PAGE_Liste_des_nouveautes" sous l'éditeur de pages (utilisez la barre des documents ouverts).
    2. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    3. La page apparaît automatiquement dans le navigateur.
    4. Cliquez sur le lien pour afficher le détail d'un produit. Le prix est désormais affiché en rouge.
      Utilisation d'un style importé en exécution
  • Fermez les pages pour arrêter le test.
Liaison du site Internet et du site Intranet
Jusqu'ici, nous avons créé des pages Intranet permettant de gérer les produits et des pages Internet permettant aux internautes de consulter les nouveautés.
Nous allons lier ces pages en proposant depuis les pages Internet un lien "Administration" permettant d'accéder aux pages Intranet.
Pour cela, nous allons modifier le modèle des pages Internet.

Attention !

Les manipulations suivantes peuvent être réalisées uniquement si vous avez suivi la partie 3 de ce tutoriel concernant la création des pages Intranet.
  • Pour créer un lien "Administration" :
    1. Placez-vous sur la page "PAGE_Liste_des_nouveautés".
    2. Affichez le menu contextuel d'un des liens présents en haut de la page et sélectionnez l'option "Ouvrir le modèle".
    3. Affichez la description du champ Notifications (double-cliquez sur le champ).
    4. Modifiez le libellé du champ : Administration.

      Astuce

      Dans vos développements, nous vous conseillons de toujours bien nommer vos éléments (par exemple ici, nommez le champ Lien “LIEN_Administration”). Le code est ainsi plus lisible.
    5. Dans la zone "Action du lien", pour l'option "Type", sélectionnez "Exécuter le code de clic navigateur uniquement".
    6. Validez.
      Lien
  • Nous allons maintenant saisir le code WLangage associé à ce champ Lien :
    1. Affichez les événements associés au champ Lien (F2 sur le champ).
    2. Dans le code "Clic xxx (navigateur)", saisissez le code suivant :
      SiteDynamiqueAffiche("Site_WEBDEV_Complet")
    3. Dans ce code, la fonction SiteDynamiqueAffiche permet d'afficher la première page dynamique du projet (dans notre cas, ce sera la page "PAGE_Liste_des_Produits").
    4. Fermez l'éditeur de code.
    5. Dans le bandeau du modèle, cliquez sur Propager les modifications du modèle de pages pour propager les modifications du modèle à toutes les pages utilisant ce modèle.
    6. Dans notre cas, les deux pages en mode AWP du projet sont proposées. Validez la fenêtre de mise à jour du modèle.
    7. Fermez le modèle de pages.
  • Nous allons maintenant modifier la page "PAGE_Liste_des_produits" pour qu'elle puisse être ouverte par la fonction SiteDynamiqueAffiche :
    1. Affichez la page "PAGE_Liste_des_produits" sous l'éditeur.
    2. Affichez la fenêtre de description (dans le menu contextuel, sélectionnez "Description").
    3. Dans l'onglet "Général", cochez l'option "Accessible par la fonction SiteDynamiqueAffiche".
      Description de la page
    4. Validez.
  • Nous allons maintenant lancer le test du projet via les pages AWP.
    1. Affichez si nécessaire la page "PAGE_Liste_des_nouveautes" sous l'éditeur de pages (utilisez la barre des documents).
    2. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    3. La page apparaît automatiquement dans le navigateur.
      Page de la liste des nouveautés en exécution
    4. Cliquez sur le lien "Administration". La page de gestion des produits apparaît.
      Mode administrateur en exécution
  • Fermez les pages pour arrêter le test.
Création d'une page affichant les conditions générales de vente
Nous allons maintenant créer un type de page souvent utilisé dans les sites de vente : une page affichant les conditions générales de vente. Pour cela, nous allons utiliser le champ Zone de texte Riche qui permet de mettre en forme rapidement un texte.

Création de la page

  • Pour créer une page affichant les conditions générales de vente :
    1. Créez une nouvelle page.
      • Cliquez sur Créer un élément parmi les boutons d'accès rapide.
      • 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 s'affiche.
      • Dans la zone "Basée sur un modèle du projet", choisissez "PAGEMOD_Simple" et validez l'assistant.
    2. La fenêtre de sauvegarde de la page est affichée. Saisissez le titre "Conditions générales de vente". Le nom "PAGE_Conditions_generales_de_vente" est automatiquement proposé.
    3. Validez.

Création du champ

  • Pour créer un champ Libellé riche :
    1. Dans le ruban, sous le volet "Création", dans le groupe "Champs usuels", déroulez "Texte" et sélectionnez "Zone de texte Riche".
    2. Cliquez dans la page (par exemple en haut à gauche). Le champ est automatiquement créé.
  • Ce type de champ s'adapte automatiquement en hauteur à son contenu. Nous allons définir uniquement une largeur spécifique :
    1. Sélectionnez le champ que vous venez de créer.
    2. Agrandissez le champ en largeur (à l'aide des poignées) jusqu'à ce qu'il occupe la largeur de la page.
  • Maintenant, nous allons afficher les conditions générales de ventes dans le champ. Nous avons préparé le fichier contenant le texte.
    1. Copiez le texte présent dans le fichier CGV.txt. Ce fichier est disponible dans le répertoire "\Tutoriel\WB\Exercices\Site_WEBDEV_Complet" du répertoire d'installation de WEBDEV.
    2. Sélectionnez le champ "Zone de texte Riche" dans la page.
    3. Tapez sur la touche Espace du clavier : le champ passe en édition. Un cadre jaune est affiché autour du champ.
    4. Remplacez le texte présent par le texte contenu dans le presse-papiers (Ctrl + V). Le texte apparaît.
    5. Effectuez quelques modifications dans le texte :
      • Ajoutez des espaces avant et après les titres (touche Entrée).
      • Passez en gras les titres des différents points.
        Sous l'éditeur de pages
    6. Essayez les différentes options : toutes les options disponibles sur le texte sont disponibles dans le ruban.
    7. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    8. La page apparaît automatiquement dans le navigateur.
      En exécution
Conclusion
Les deux dernières parties nous ont permis de voir les spécificités d'un site Intranet et celles d'un site Internet.
Dans la prochaine partie, nous aborderons des sujets pouvant être intégrés aussi bien dans un site Internet que dans un site Intranet :
  • Recherche multicritère,
  • Impression,
  • Gestion du multilingue, ...
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 28
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 08/06/2023

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