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
  • 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 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. Nous créerons par la suite un nouveau projet pour utiliser ce composant interne.
  • Pour ouvrir le projet exemple :
    1. Affichez si nécessaire la page d'accueil (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Cours d'auto-formation" et sélectionnez le projet "Composant Interne (Exercice)".
    3. Le projet se charge
  • 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 l'explorateur de projet).
    2. Lancez le test du modèle de champs Web ( parmi les boutons d'accès rapide).
    3. Saisissez une adresse email.
    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 l'explorateur de projet :
      • Sélectionnez le dossier "Composants internes".
      • Affichez le menu contextuel (clic droit).
      • Sélectionnez l'option "Nouveau composant interne".
      • L'assistant de création d'un composant interne se lance.
    2. Passez à l'écran suivant 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.
    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.
    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.
    10. 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 Sites\Mes Exemples\WW_Composant_Interne (Exercices)\WW_Composant_Interne.ana".
    11. Terminez l'assistant. WEBDEV va créer le composant interne dans un répertoire spécifique de votre projet.
Dans l'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 "Composant Interne", avec ses différents éléments : analyse et modèle de champs Web.

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 "Cours d'auto-formation" et sélectionnez "Site WEBDEV Complet (Avec pages)". Le projet se charge.
  • Intégrez le composant interne dans le projet.
    1. Dans le ruban, sous l'onglet "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 Sites\Mes Exemples\WW_Composant_Interne (Exercices)\ComposantInterneInscriptionNewsletter". 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 l'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.
    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é.
  • Nous allons maintenant tester le fonctionnement du modèle de champs :
    1. Lancez le test de la page (Go parmi les boutons d'accès rapide).
    2. Saisissez une adresse email.
    3. Cliquez sur "Valider".
    4. Un message confirme l'inscription.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire