DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV 2025 !
Aide / Tuto WINDEV / Tuto - Composants externes
  • Réutilisez du code grâce aux composants externes
  • Présentation
  • Création d'un composant externe
  • Ouverture du projet exemple
  • Création d'une configuration de projet
  • Génération du composant
  • Utilisation du composant externe
  • Création d'un projet
  • Importation du composant externe
  • Création d'une fenêtre
  • Appel du composant
  • Test du composant
  • Conclusion

Tuto - Composants externes

Réutilisez du code grâce aux composants externes
Ce que vous allez apprendre :
  • Qu'est-ce qu'un composant externe ?
  • Exemple pratique :
    • Création d'un composant externe.
    • Utilisation d'un composant externe.
Durée de la leçon 40 mn
Présentation
WINDEV propose différentes méthodes pour partager du code :
  1. Les collections de procédures.
  2. Les classes.
  3. Les composants externes.
  4. Les composants internes.
Dans ce tuto, nous allons nous intéresser aux composants externes.
Un composant externe WINDEV est une brique applicative qui peut être réutilisée dans un nombre illimité de projets (et donc d'exécutables).
Principe d'un composant externe
Un composant externe permet d'avoir un traitement identique avec un code source unique pour réaliser une opération donnée même si ce traitement doit être réalisé par plusieurs projets.
Les projets qui utilisent un composant externe ont accès sous l'éditeur WINDEV au nom des objets, procédures ou méthodes rendues visibles par le concepteur du composant. Les projets ne peuvent pas voir ou modifier le code source. La confidentialité et la stabilité du code sont garanties.
La réalisation d'un composant externe est très simple, nous allons le voir dans ce tuto. Ce tuto va vous permettre :
  • de créer un composant externe à partir d'un projet existant.
  • d'utiliser le composant externe précédemment créé dans un nouveau projet.
Un composant externe peut contenir du code, des fenêtres, une analyse, des fichiers de données, etc.
Création d'un composant externe

Ouverture du projet exemple

Nous allons créer un composant externe à partir du projet "WD Application Complète". Ce projet permet de gérer des commandes, des produits et des clients.
Le composant externe que nous allons créer va nous permettre de connaître dans une autre application instantanément les clients correspondant à une ville donnée.
Lors de l'appel au composant externe, vous pourrez :
  • Passer une ville en paramètre.
  • Récupérer une chaîne contenant le nom du client et le montant total de ses commandes.
Ce tuto manipule le projet "WD Application Complète". Pour ouvrir cet exemple :
  1. Affichez la page d'accueil de WINDEV (Ctrl + <).
  2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Réutiliser du code grâce aux composants externes", cliquez sur le lien "Ouvrir le projet exercice".
Pour les besoins du composant, le projet contient :
  • une requête "REQ_CommandesParVille". Cette requête est une requête paramétrée permettant d'obtenir pour une ville donnée les clients correspondants ainsi que le montant total de leurs commandes.
  • une collection de procédures "COL_Composant". Cette collection de procédures contient :
    • la procédure "DonneCommandesParVille" qui renvoie pour la ville passée en paramètre une chaîne contenant le nom du client et le montant total de ses commandes.
    • la procédure "LocalisationDonnées" qui permet de localiser les données utilisées par le composant.
  • une analyse permettant de décrire les fichiers de données stockant les informations.

Création d'une configuration de projet

Nous allons maintenant créer le composant externe à partir du projet "WD Application Complète".
Nous allons pour cela, utiliser une configuration de projet de type "Composant externe".
A savoir : Les configurations de projet permettent de créer à partir d'un même projet plusieurs "cibles" différentes : une application 64 bits, une application Linux, un composant, etc.
À tout moment, vous pouvez choisir la configuration sur laquelle vous travaillez et générer les éléments correspondants. Pour plus de détails, consultez Configuration de projet.

Pour créer une configuration de projet de type "Composant Externe" et lui associer les éléments voulus :
  1. Dans le volet "Explorateur de projet", sélectionnez "Configurations".
  2. Dans le menu contextuel de "Configurations", sélectionnez l'option "Nouvelle configuration". L'assistant de création d'une configuration de projet se lance.
  3. Donnez un nom à votre configuration de projet (par exemple "CompoCommandesParVille") puis sélectionnez le type de configuration de projet à créer. Dans notre cas, sélectionnez "Composant". Passez à l'étape suivante.
  4. Notre composant est un composant pour une application Windows ou Linux. Conservez les options proposées par défaut. Passez à l'étape suivante.
  5. Sélectionnez les éléments à intégrer dans la configuration de projet. Dans cet exemple, ces éléments seront également présents dans le composant.
    • Cliquez sur le bouton "Aucun".
    • Sélectionnez les éléments "REQ_CommandesParVille" et "COL_Composant".
      Configuration de projet
  6. Passez à l'étape suivante et validez la création de la configuration.
  7. La nouvelle configuration devient automatiquement la configuration en cours.
    Pour connaître et modifier la configuration en cours, utilisez le volet "Explorateur de projet".
    Volet 'Explorateur de projet'
    La configuration en gras correspond à la configuration courante. Pour changer la configuration courante, double-cliquez sur le nom de la configuration à activer.

Génération du composant

Nous allons maintenant générer notre composant :
  1. Sous le volet "Projet", dans le groupe "Génération", cliquez sur "Générer".
  2. L'assistant de génération du composant se lance. Passez à l'étape suivante de l'assistant.
  3. L'assistant vous demande de sélectionner les éléments du composant qui seront accessibles depuis l'application cliente. Dans notre exemple, seule la collection de procédures "COL_Composant" sera utilisée :
    Génération d'un composant - Eléments accessibles
  4. Passez à l'étape suivante.
  5. WINDEV propose d'autoriser la traduction du composant. Cette fonctionnalité est intéressante si votre composant doit être utilisé par des applications multilingues.
    Génération d'un composant - Traduction du composant
    Si l'option "Autoriser la traduction du composant" est cochée, il sera possible de traduire à partir de l'application utilisant le composant les éléments spécifiés du composant.
    Cette traduction sera réalisée à l'aide de WDMSG, module indépendant permettant d'extraire et de réintégrer les messages à traduire d'un projet.

    Pour cet exemple, conservez l'option par défaut. Passez à l'étape suivante.
  6. L'assistant propose ensuite de gérer les différentes versions du composant. Dans notre exemple, le composant vient d'être créé.
    Conservez les options par défaut. Passez à l'étape suivante.
  7. Saisissez les différentes informations concernant le composant :
    • Propriétaire,
    • Libellé, Copyright, etc.
    Passez à l'étape suivante.
  8. Vous pouvez associer une image à votre composant. Passez à l'étape suivante.
  9. Spécifiez la présentation générale du composant. Cette présentation permettra à l'utilisateur du composant de connaître sa finalité. Saisissez par exemple :
    Génération du composant - Présentation générale
  10. Passez à l'étape suivante. L'assistant va maintenant effectuer la génération automatique de la documentation sur le composant. Cette documentation peut être basée sur les commentaires que vous aurez insérés dans votre code source.
  11. Passez à l'étape suivante. Vous avez la possibilité de modifier la documentation générée. Nous n'allons pas y toucher. Passez à l'étape suivante.
  12. Vous avez la possibilité de créer un fichier d'aide associé à votre composant (format CHM). Ce fichier d'aide sera livré avec le composant. Les clients pourront y accéder en utilisant la touche F1 à partir du code du composant.
    Nous n'allons pas générer de fichier d'aide. Passez à l'étape suivante.
  13. Il ne reste plus alors qu'à donner un nom physique à notre composant.
    Génération du composant
  14. Validez (bouton "Terminer"). Un message indique que le composant a été généré. Validez le message en cliquant sur "Terminer".
Voilà, votre premier composant est maintenant créé, il est prêt à l'emploi !
Utilisation du composant externe
Une fois créé, votre composant est alors utilisable dans n'importe quel autre projet WINDEV. Nous allons maintenant voir comment réutiliser ce composant.

Création d'un projet

Pour cela, nous allons créer un nouveau projet et importer notre composant dans ce projet.
  1. Fermez le projet en cours : sous le volet "Accueil", dans le groupe "Général", déroulez "Fermer" et sélectionnez "Fermer le projet".
  2. Validez la fermeture du projet et si nécessaire l'enregistrement des modifications.
  3. La page d'accueil de WINDEV apparaît.
  4. Créez un nouveau projet : cliquez sur "Créer un projet" dans la page d'accueil.
    • Ce projet est une application Windows.
    • Ce projet utilise le gabarit Eleven.
    • Ce projet s'appelle "CompoUtilisation".

Importation du composant externe

  1. Sous le volet "Projet", dans le groupe "Projet", déroulez "Importer" et sélectionnez l'option "Un composant Externe ... À partir d'un fichier".
  2. Dans le répertoire du projet "WD Application Complète", sélectionnez le sous-répertoire "EXE\CompoCommandesParVille", puis le fichier "CompoCommandesParVille.wdi".
  3. Après avoir cliqué sur "Ouvrir", la description de notre composant s'est affichée. Cette description contient :
    • Sur l'onglet "Général", les éléments saisis lors de la création du composant externe ainsi que son emplacement.
      Description du composant
    • Sur l'onglet "Détail", la description du composant ainsi que l'aide générée automatiquement. Il est ainsi possible de connaître les éléments utilisables du composant.
      Il est possible d'accéder à tout moment à la description du composant. Il suffit de sélectionner le composant dans le volet "Explorateur de projet" et de sélectionner l'option "Description" du menu contextuel. Dans ce cas, il est également possible de définir le mode de chargement du composant.
  4. Validez (bouton "Fermer"). Le composant est intégré dans votre projet.

Création d'une fenêtre

Nous allons maintenant créer une nouvelle fenêtre vierge pour utiliser le composant.
  1. Créez une fenêtre vierge.
    • La fenêtre a pour titre "Clients par ville".
    • Le nom de la fenêtre est "FEN_Clients_par_ville".
    • Validez la sauvegarde.
  2. Affichez les événements WLangage associés à la fenêtre (option "Code" du menu contextuel).
  3. Dans l'événement "Fin d'initialisation", nous allons appeler la fonction LocalisationDonnées du composant. Cette fonction attend en paramètre le chemin permettant d'accéder aux fichiers de données manipulés par le composant. Saisissez le chemin d'accès aux données de l'exemple "WD Application Complète". Par exemple :
    LocalisationDonnées(...// Indiquez le chemin de VOS données
    	"C:\Mes Projets\Mes Exemples\WD Application Complète (Answers)\Exe\Exécutable Windows 32 bits")

    Si votre projet utilise une autre procédure nommée "LocalisationDonnées", il sera nécessaire de préfixer le nom de la procédure du composant par le nom de la collection de procédures utilisée pour supprimer l'ambiguïté. Le code devient alors :
    COL_Composant.LocalisationDonnées(...
  4. Fermez l'éditeur de code.
  5. Dans la fenêtre, ajoutez les champs suivants :
    • Un champ de saisie de type Texte avec pour libellé "Ville" et pour nom "SAI_Ville".
    • Un champ Table "TABLE_Résultat", rempli par programmation et composé de 2 colonnes :
      • une colonne "Nom" de type Texte.
      • une colonne "Total ventes" de type Monétaire.
    • Un champ Bouton avec pour libellé "Rechercher" et pour nom "BTN_Rechercher".

Appel du composant

Editez maintenant les événements WLangage associés au champ Bouton "BTN_Rechercher". Lors du clic sur ce champ, nous allons exécuter la procédure de recherche présente dans le composant. Cette procédure :
  • attend en paramètre le nom de la ville
  • renvoie une chaîne de la forme :
    Nom du client 1 + TAB + Total vente 1 + RC +
    Nom du client 2 + TAB + Total vente 2 + ...
    Le code de l'événement "Clic" du champ "BTN_Rechercher" doit donc :
  • appeler la procédure DonneCommandesParVille du composant en lui passant en paramètre le contenu du champ SAI_Ville.
  • traiter la chaîne obtenue pour l'ajouter dans le champ Table. Saisissez le code WLangage suivant :
    ListeRésultat est une chaîne
    // Récupère la liste des clients et leurs commandes
    // pour la ville saisie
    ListeRésultat = DonneCommandesParVille(SAI_Ville)
    // Si la liste n'est pas vide
    SI ListeRésultat <> "" ALORS
    	// Vide le champ Table
    	TABLE_Résultat.SupprimeTout()
    	// Parcourt les résultats
    	POUR TOUTE CHAÃŽNE UnClient DE ListeRésultat SÉPARÉE PAR RC
    		// Ajoute ce client dans le champ Table
    		TABLE_Résultat.Ajoute(UnClient)
    	FIN
    SINON // Si la liste est vide
    	InfoConstruit("Aucun client trouvé pour la ville %1", SAI_Ville)
    FIN
Fermez l'éditeur de code et sauvegardez votre fenêtre.

Test du composant

Testez la fenêtre :
  1. Cliquez sur Tester une fenêtre parmi les boutons d'accès rapide.
  2. Dans le champ de saisie, saisissez "Paris" (en respectant la casse) puis cliquez sur le bouton "Rechercher". La liste des clients s'affiche.
    Test de la fenêtre
Et c'est terminé ! Simple n'est-ce pas ?
Vous savez désormais créer un composant et le réutiliser dans vos applications. Mais vous pourriez également décider de gérer des procédures d'installation de vos composants, pour, par exemple, les redistribuer séparément de vos applications.
Conclusion
Nous avons vu dans ce tuto comment créer et utiliser un composant externe.
Bien entendu, la prochaine étape consiste à distribuer ce composant. Nous ne détaillerons pas les différents modes d'installation d'un composant.
Si vous souhaitez obtenir plus de détails concernant l'installation de composants, consultez Distribuer un composant externe.
Sommaire
Version minimum requise
  • Version 2025
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 26/11/2024

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