DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 28 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Etape par étape
  • Etape 1 : Création d'un composant interne
  • Etape 2 : Utilisation du composant interne
Leçon 9.1. Les composants internes
Ce que vous allez apprendre dans cette leçon
  • Qu'est-ce qu'un composant interne ?
  • Etape par étape, création d'un composant interne.
  • Diffusion et utilisation d'un composant interne.
Durée de la leçon

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Un composant interne est un regroupement d'éléments d'un projet. Ce regroupement permet :
  • d'organiser un projet,
  • de partager des éléments entre différents projets (principalement via le Gestionnaire de Sources).
Lorsqu'un composant interne est intégré dans un projet, tous les éléments du composant sont intégrés dans le projet. Il est possible de manipuler les éléments publics directement sous l'éditeur. De plus, le composant interne peut être débogué directement depuis le projet qui l'utilise.
Les projets qui utilisent un composant interne ont accès sous l'éditeur WEBDEV au nom des objets, procédures ou méthodes rendus visibles par le concepteur du composant.
La réalisation d'un composant est très simple.
Comment faut-il faire ? Faites comme d'habitude, créez vos pages, procédures, classes. Puis lors­que vous aurez terminé, choisissez l'option de création d'un composant interne, c'est tout !
Un composant interne peut contenir du code, des pages, une analyse, des fichiers de données, etc.
Etape par étape

Etape 1 : Création d'un composant interne

Nous allons créer un composant interne permettant de s'inscrire et de se désinscrire à une lettre d'information dans un site Web.
Ce composant est constitué :
  • d'une page, permettant de visualiser la liste des inscrits à la lettre d'information,
  • d'un modèle de champs Web qui contient les différents champs (saisie de l'adresse email, bouton de validation, ...),
  • d'une analyse décrivant le fichier de données des inscrits.
Pour ne pas avoir à développer le code nécessaire au fonctionnement du composant, nous avons regroupé tous les éléments nécessaires dans un projet "WW_Composant_Interne". Nous allons nous servir de ce projet pour créer notre composant interne. Ce composant interne sera ensuite utilisé dans le projet "Site WEBDEV complet".

  • Pour ouvrir le projet exemple :
    1. Lancez WEBDEV 28 (si ce n'est déjà fait).
    2. Affichez si nécessaire la page d'accueil de WEBDEV (Ctrl + <).
    3. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 9 - Leçon 9.1 - Les composants internes", double-cliquez sur "Composant interne (Exercice)".
    4. Le projet se charge.

      Corrigé

      Un projet corrigé est disponible, contenant déjà le composant interne. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 9 - Leçon 9.1 - Les composants internes", double-cliquez sur "Composant interne (Corrigé)".
  • Nous allons tester directement le modèle de champs de ce projet :
    1. Affichez le modèle de champs Web "MDLC_InscriptionNewsletter" (double-cliquez sur son nom dans le volet "Explorateur de projet").
    2. Lancez le test du modèle de champs Web (Tester un élément parmi les boutons d'accès rapide).
    3. Saisissez une adresse email.
      Test du modèle de champs
    4. Cliquez sur "VALIDER" pour ajouter l'adresse dans le fichier de données.
    5. Fermez le navigateur et revenez sous l'éditeur.
    6. Vous pouvez vérifier le contenu du fichier de données avec l'outil WDMap (accessible dans le volet "Outils" du ruban).
Nous allons maintenant créer notre composant interne.
  • Pour créer un composant interne :
    1. Dans le volet "Explorateur de projet" :
      • Sélectionnez le dossier "Composants internes".
      • Affichez le menu contextuel (clic droit).
        Composant interne dans le volet 'Explorateur de projet'
      • Sélectionnez l'option "Nouveau composant interne".
      • L'assistant de création d'un composant interne se lance.
    2. Passez à l'étape suivante de l'assistant.
    3. Identifiez votre composant : saisissez le nom "ComposantInterneInscriptionNewsletter". Le libellé du composant est automatiquement proposé.
    4. Passez à l'étape suivante.
    5. Sélectionnez les éléments qui constituent le composant. Dans notre cas, tous les éléments doivent être sélectionnés.
      Assistant de création d'un composant interne
    6. Passez à l'étape suivante.
    7. L'assistant vous demande de sélectionner les éléments du composant qui seront accessibles depuis le projet client.
      Dans notre cas, tous les éléments doivent être sélectionnés.
      Assistant de création d'un composant interne
    8. Passez à l'étape suivante.
    9. Cette étape permet d'indiquer le mode de gestion des données du composant. Dans notre cas, le composant interne utilise sa propre analyse.
      Sélectionnez l'option "Utiliser une analyse spécifique", puis dans le champ "Analyse", sélectionnez l'analyse correspondant au projet en cours (fichier "WW_Composant_Interne.wda" présent dans le sous-répertoire "WW_Composant_interne.ana" du projet). Par exemple : "Mes Projets\Mes Exemples\WW_Composant_Interne (Exercices)\WW_Composant_Interne.ana".
      Assistant de création d'un composant interne
    10. Terminez l'assistant. WEBDEV va créer le composant interne dans un répertoire spécifique de votre projet.
Dans le volet "Explorateur de projet", le modèle de champs Web "MDLC_InscriptionNewsletter" n'est plus présent dans la liste des modèles de champs Web du projet. Par contre, le composant interne que nous venons de créer est apparu dans le dossier "Composants internes", avec ses différents éléments : analyse et modèle de champs Web.
Composant interne dans le volet 'Explorateur de projet'

Etape 2 : Utilisation du composant interne

Une fois créé, votre composant interne est utilisable dans n'importe quel autre projet WEBDEV. Nous allons maintenant voir comment réutiliser ce composant.

Note

Dans cet exemple, nous allons voir une utilisation "directe" du composant interne. Pour un partage des ressources, il est conseillé d'utiliser les composants internes via le Gestionnaire de Sources (GDS).
Pour plus de détails, consultez Composant interne.
Dans notre exemple, nous allons importer le composant interne dans le projet "Site WEBDEV Complet".

  • Ouvrez le projet "Site_WEBDEV_Complet".
    1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 9 - Leçon 9.1 - Les composants internes", double-cliquez sur "Site WEBDEV Complet (Exercice)".
    3. 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 vous permet d'effectuer les différentes manipulations de cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 9 - Leçon 9.1 - Les composants internes", double-cliquez sur "Site WEBDEV Complet (Corrigé)".

  • Intégrez le composant interne dans le projet.
    1. Dans le ruban, sous le volet "Projet", dans le groupe "Projet", déroulez l'option "Importer" et sélectionnez l'option "Un composant Interne .. A partir d'un fichier".
    2. Sélectionnez le fichier "Mes Projets\Mes Exemples\WW_Composant_Interne (Exercices)\ComposantInterneInscriptionNewsletter\ComposantInterneInscriptionNewletter.wci". Ce fichier correspond au composant que nous avons créé précédemment.
    3. Le composant interne est intégré au projet.
  • Pour utiliser le composant interne, nous allons instancier le modèle de champs Web fourni par le composant interne dans la page d'accueil du site. Pour cela :
    1. Affichez sous l'éditeur la page "PAGE_Liste_des_nouveautes" (double-cliquez sur son nom dans le volet "Explorateur de projet").
    2. Déplacez la zone répétée présente dans la page vers le bas afin d'insérer le modèle de champs du composant interne.
    3. Sélectionnez le volet "Création" du ruban et dans le groupe "Conteneurs", cliquez sur "Modèle de champs".
    4. La fenêtre de sélection du modèle à instancier s'affiche.
      Sélection du modèle de champs
    5. Sélectionnez le modèle provenant du composant interne et validez.
    6. Placez le modèle de champs Web dans la page en cliquant à l'endroit souhaité.
      Création du modèle de champs dans la page
  • Nous allons maintenant tester le fonctionnement du modèle de champs :
    1. Lancez le test de la page (Tester un élément parmi les boutons d'accès rapide).
    2. Saisissez une adresse email.
    3. Cliquez sur "VALIDER".
    4. Un message confirme l'inscription.
      Test du fonctionnement du modèle de champs
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 28
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire