PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 24 !
  • 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.3. 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 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­.
  • Si vous n'avez pas ouvert l'exercice "Site WEBDEV Complet" dans la leçon précédente :
    1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Cours d'auto-formation" et sélectionnez "Site WEBDEV Complet (Exercice)".

      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 "Cours d'auto-formation" et sélectionnez "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 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".
      • 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 la zone "Type de page", pour l'option "Mode", sélectionnez "AWP".
    3. Validez.
    4. Enregistrez les modifications en cliquant sur 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 "Je veux remplir moi-même la zone répétée par programmation". 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 Classique : toutes les données seront affichées au chargement de la page.
        Sélectionnez le mode de fonctionnement "Classique".
      • 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".
    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 2 par 5.
    6. Passez à l'étape suivante.
    7. La dernière étape permet d'indiquer le nom du champ (par exemple ZR_Nouveautes). 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.
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 présents dans la 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éé.
    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 "Center 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 un affichage calculé 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 de l'image pour créer le lien.
    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 de l'image pour créer le libellé.
    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 présents dans la 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.
    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.
    6. Validez la fenêtre de description du champ Zone répétée.
    7. Enregistrez les modifications ( 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 de la 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 traitements associés à la page (cliquez dans la page et sélectionnez l'option "Code" du menu contextuel ou utilisez la touche F2).
    2. Dans le code d'initialisation de la page, saisissez le code suivant :
      POUR TOUT Produit AVEC Nouveauté = Vrai
      ZoneRépétéeAjouteLigne(ZR_Nouveautés,Produit.Visuel,...
      Produit.Libellé,Produit.IDProduit)
      FIN
    3. Examinons ce code :
      • Ce code effectue un parcours du fichier Produit grâce à l'instruction POUR TOUT.
      • Seuls les enregistrements pour lesquels la rubrique "Nouveauté" vaut Vrai sont sélectionnés.
      • La fonction ZoneRépétéeAjouteLigne 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 "Produit".
        • le libellé de l'attribut "ATT_Lien" a pour valeur le contenu de la rubrique "Libellé" du fichier "Produit".
        • le libellé de l'attribut "ATT_ID" a pour valeur le contenu de la rubrique "IDProduit" du fichier "Produit".
    4. Enregistrez les modifications ( 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 parmi les boutons d'accès rapide.
    2. La page apparaît automatiquement dans le navigateur.
  • 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 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".
    3. Validez.
    4. Enregistrez les modifications ( 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 traitements de la page.
    2. Dans le traitement "Déclarations globales", saisissez le code suivant :
      PROCÉDURE MaPage(gnIDProduit est un entier sur 8 octets)
    3. Examinons ce code :
      • Le mot-clé PROCEDURE dans le traitement "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 gnIDProduit 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 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 de saisie 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 libellés simples pour le libellé du produit, son prix et sa référence.
  • un libellé 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).
    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 "Center l'image dans le champ".

        Note

        Avec les options "Homothétique", "Centré l'image dans le champ" et "Sans agrandissement", 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).

      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 (à 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).
    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é".
    2. Cliquez dans la page, sous la description du produit : le champ est automatiquement créé.
  • 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".
    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".
    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 "Produit".
    • Champ ZTR_Description lié à la rubrique "Description" du fichier "Produit".
    • Champ LIBF_Prix lié à la rubrique "PrixHT" du fichier "Produit".
    • Champ LIB_Référence lié à la rubrique "Référence" du fichier "Produit".
  • Enregistrez la page.

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. Utilisez la touche F2. L'éditeur de code affiche les différents traitements de la page.
    2. Dans le traitement "Déclarations globales", à la suite du code que nous avons écrit précédemment, saisissez le code suivant :
      HLitRecherchePremier(Produit,IDProduit,gnIDProduit)
      SI HTrouve(Produit) ALORS
      FichierVersEcran()
      FIN
    3. Examinons ce code :
      • La fonction HLitRecherchePremier permet de rechercher le premier enregistrement du fichier Produit pour lequel la rubrique IDProduit est égale à la valeur gnIDProduit, correspondant au paramètre passé à la page.
      • La fonction HTrouve 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 FichierVersEcran permet d'afficher dans les champs 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 HLitRecherchePremier.
    4. 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 la zone répétée.
  • Nous allons tout d'abord modifier la page "PAGE_Liste_des_nouveautes" afin que le lien ouvre la page de description du produit.
    1. Placez-vous sur la page "Liste des produits" : cliquez sur le bouton "PAGE_Liste_des_nouveautes" dans la barre des boutons.
    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".
      • 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 le traitement "Déclaration des globales" de la page (gnIDProduit). 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 et sélectionnez "ATT_ID" :
    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 ( ou Ctrl + S).
  • Nous allons réaliser un test pour vérifier que tout fonctionne.
    1. Placez-vous si nécessaire sur la page "PAGE_Liste_des_nouveautes".
    2. Cliquez sur 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.
  • 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".
    2. L'assistant d'importation se lance et propose deux options :
      • Importer les styles CSS : 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 la flèche jaune.
    4. Sélectionnez le fichier "stylesperso.css". Ce fichier est disponible dans le répertoire "\Autoformation\Exercices\Site_WEBDEV_Complet". Les différents styles contenus dans la feuille de styles sont affichés.
      • 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" :
  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 ( ou Ctrl + S).
  • Nous allons réaliser un test pour vérifier que tout fonctionne.
    1. Placez-vous si nécessaire sur la page "PAGE_Liste_des_nouveautes".
    2. Cliquez sur 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.
  • 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 cours d'auto-formation concernant la création des pages Intranet.
  • Pour créer un lien "Administration" :
    1. Placez-vous sur la 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 lien “LIEN_Administration”). Le code est ainsi plus lisible.
    5. Dans la zone "Action du lien", pour l'option "Type", sélectionnez "Exécuter les codes navigateur uniquement".
    6. Validez.
  • Nous allons maintenant saisir le code associé à ce lien :
    1. Affichez les traitements associés au champ Lien (F2 sur le champ).
    2. Dans le code de clic 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 orange du modèle, cliquez sur 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()".
    4. Validez.
  • Nous allons maintenant lancer le test du projet via les pages AWP.
    1. Placez-vous sur la page "Liste des nouveautés".
    2. Cliquez sur parmi les boutons d'accès rapide.
    3. La page apparaît automatiquement dans le navigateur.
    4. Cliquez sur le lien "Administration". La page de gestion des produits apparaît.
  • 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 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 "\Autoformation\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 Retours chariot avant et après les titres.
      • Passez en gras les titres des différents points.
    6. Essayez les différentes options : toutes les options disponibles sur le texte sont disponibles dans le ruban.
    7. Cliquez sur parmi les boutons d'accès rapide.
    8. La page apparaît automatiquement dans le navigateur.
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 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire