Outils pour construire un composant - 7: Constructeur de composants Joomla

Dans cet épisode, nous allons utiliser Constructeur de composants Joomla pour construire notre exemple de composant de calendrier d'événements.

Notre voyage jusqu'à maintenant

Dans cette série, nous voulons montrer quelques outils qui peuvent aider à construire des composants pour Joomla.

Dans l'épisode un et deux Nous avons présenté notre exemple, un calendrier d'événements, et l'avons mis en œuvre sans construire de composant. Nous l'avons implémenté avec le noyau Joomla, avec Seblod et Fabrik.

Dans l'épisode trois et quatre Nous avons construit un composant, sans utiliser beaucoup d'outils. Nous avons exploré comment les relations entre les entités sont implémentées dans Joomla lui-même et nous avons répertorié des fonctionnalités supplémentaires, intégrées dans Joomla.

Dans l'épisode cinq et six Nous avons utilisé Component Creator et Component Generator pour construire notre exemple de composant de planification d'événements.

Constructeur de composants Joomla

Dans cet épisode, nous allons regarder Constructeur de composants Joomla (JCB). C'est un outil pour construire des composants Joomla, créé par Llewellyn van der Merwe, fondateur de Vast Development Method (VDM) en Namibie, et bien connu Joomler. Joomla Component Builder est un système entièrement libre et open source pour construire n'importe quel composant Joomla, sans limites. Il fonctionne sur votre propre installation Joomla. Vous pouvez le télécharger à partir du JED ou directement à https://git.vdm.dev/joomla/pkg-component-builder/releases.

JCB s'adresse aux développeurs. C'est pas une solution sans code: Vous devez avoir des compétences en codage et une compréhension de base du fonctionnement des composants Joomla. Le code personnalisé peut être inséré dans votre composant à de nombreux endroits dans JCB, ce qui lui donne une flexibilité que nous n'avons jamais vue auparavant dans d'autres outils.

La documentation se compose principalement de plus de 70 vidéos, plus de 100 heures au total, expliquant et démontrant les possibilités. Pour faciliter la recherche dans ces vidéos, elles sont indexées dans le wiki.

Llewellyn a une vision d'échange communautaire blocs de construction réutilisables (appelé: Puissances) pour les composants. Les pouvoirs accessibles au public sont appelés Super pouvoirs. Ils peuvent être utilisés pour intégrer facilement votre logiciel personnalisé ou autre, comme par exemple le API Gitea ou OpenAI, dans vos propres composants.

Notre exemple: calendrier des événements

L'exemple de composant que nous utilisons dans cette série est basé sur la démo JCB de Tom van der Laan et Bram de Hoop sur Dutch JoomlaDagen 2024. Il s'agissait d'un calendrier d'événements, un calendrier d'événements qui peut par exemple être utilisé pour une conférence. Donc, avec cet épisode, l'exemple est de retour à son origine, le montrant à nouveau avec Joomla Component Builder.

Voir notre épisode 5 pour un aperçu de notre exemple de calendrier d'événements. Le composant est destiné à afficher les horaires sur des onglets (conteneurs), avec des événements verticalement à une heure spécifique d'une journée. Les événements concomitants sont affichés dans des pistes parallèles (sections). Les événements peuvent être de type événementiel et sont réalisés par des acteurs.

Par calendrier d'événements, nous avons ce diagramme Entité-Relation (ERD):

Donc, nous connaissons le entités et champs nous avons besoin. C'est souvent un bon début d'analyse de ce que nous voulons construire.

Étapes pour configurer un composant dans JCB

Dans Joomla Component Builder, j'ai configuré le composant de base en suivant les étapes suivantes. Il s’agit d’une approche ascendante: Vous définissez d'abord les blocs de construction (comme les champs), puis vous les collectez dans des structures plus grandes (comme les vues d'administration).

1. Champs

Définissez les champs dont vous avez besoin. Un champ peut être utilisé dans plusieurs entités et dans plusieurs composants. Par exemple, un champ «nom»; il y en a déjà un dans le composant de démonstration, vous pouvez donc le réutiliser. Les types de champs Joomla peuvent être utilisés comme base, mais vous pouvez également définir vos propres types de champs, vraiment pas de limites! Dans notre exemple, nous avons défini un type de champ «Time», que nous avons utilisé dans les champs «Start Time» et «End Time».

2. Vues d'administration

Les entités ou tables sont représentées par des vues d'administration dans JCB. Créez les vues d'administration et ajoutez-y les champs que vous avez définis à l'étape 1.

3. Composante

Créez un nouveau composant, renseignez quelques informations générales et ajoutez-y les vues d'administration.

Vous pouvez sauter cette troisième étape et le faire plus tard, tout en ajoutant la (les) vue(s) du site. Mais en créant un composant dès maintenant et en ajoutant les vues d'administration, nous pouvons déjà tester un Composant administrateur de base entièrement fonctionnel: le «compiler» et l’installer en un seul clic dans l’installation Joomla actuelle.

4. Obtient dynamique

Dynamic Gets sont des requêtes de sélection à la base de données via le interface utilisateur graphique (GUI): vous pouvez obtenir des champs à partir de différentes tables: les vues d'administration précédemment définies, mais aussi d'autres tables de votre base de données, en les joignant, en les filtrant, etc. Chaque vue d'administration, où vous définissez les tables spécifiques à votre composant, produit automatiquement une requête de liste (getListQuery) et une requête d'élément (getItem). Mais vous pouvez créer des requêtes de liste personnalisées et des requêtes d'éléments de la manière que vous voulez. Vous pouvez utiliser les ensembles de données résultants dans les vues de site ou dans les vues d'administration personnalisées.

5. Vue(s) du site

Définissez les vues de site que vous souhaitez avoir. Les vues standard sont une vue de liste (pluriel, enregistrements multiples) et une vue d'élément (singulier, un seul enregistrement). Sélectionnez les «gets» correspondants dans une liste déroulante. Mais vous pouvez créer n'importe quelle autre vue de site personnalisée, comme par exemple les horaires que nous voulons avoir dans notre exemple de calendrier d'événements.

Vous pouvez écrire le modèle de mise en page par défaut directement dans l'écran Affichage du site. Llewellyn a choisi de ne pas fournir un modèle frontal prêt à l'emploi, car ils sont si spécifiques et différents pour tout composant personnalisé. Mais les suggestions de code pour l'ensemble de données choisi sont fournies sur la même page et vous pouvez facilement les copier et les coller. Bien sûr, vous devez avoir des compétences de codage, car JCB est pas une solution sans code, le groupe cible est les développeurs.

Voici quelques-uns de ces extraits de code (pour une vue d'article):

Une première étape consisterait à créer un modèle de vue très basique, en n'imprimant que certaines variables ou une simple liste. Juste pour tester si ça marche.

Ajoutez la vue de votre site à votre composant, compilez et installez. Ainsi, vous pouvez immédiatement voir le résultat. En ce moment, nous avons un composant de travail minimal avec l'administrateur et le site!

6. Voir le modèle / Layout

Dans Component Creator et Component Generator, il n'y avait aucune possibilité de créer votre propre modèle frontend personnalisé. Vous ne pouviez ajouter cela qu’après l’installation du composant, et vous deviez réappliquer ces personnalisations après chaque mise à jour du composant. Dans JCB, vous définissez vos modèles de vue personnalisés et ils sont utilisés dans les mises à jour du composant.

Au lieu de taper le modèle de vue directement dans la vue du site, nous pouvons également créer un modèle (réutilisable). Vous le trouverez dans le menu:

Pour notre composant d’exemple, nous avons utilisé des modèles de vue tout comme lors de la mise en œuvre de l’exemple «à la main». Nous avons créé un modèle de vue montrant nos conteneurs sous forme d'onglets. Par exemple pour montrer les différents jours de la conférence. Et nous avons fait des modèles pour l'horaire et pour l'événement. Tous ces modèles se retrouvent sous forme de sous-modèles sous le modèle de vue par défaut et sont appelés avec $this->loadTemplate(«nom du modèle»);.

Nous pouvons également faire des mises en page et les appeler à partir de la vue-modèle avec LayoutHelper::render('layoutname', $thedata);. L'espace de noms \Joomla\CMS\Layout est déjà importé dans les fichiers de modèle et de mise en page générés.

Comme vous pouvez le voir, vous pouvez vraiment faire un frontend très spécifique. Il n’est pas nécessaire de changer le composant après son installation. Il suffit de faire les changements dans JCB, recompiler et réinstaller, si agréable!

Nombreuses à nombreuses relations

Dans notre exemple de calendrier d'événements, il existe deux relations multiples: entre les acteurs et les événements, et entre les conteneurs et les sections. Un acteur peut faire plusieurs événements et un événement peut être fait par plusieurs acteurs. Lorsque vous ajoutez ou supprimez un événement d'un acteur, cet acteur doit également être ajouté ou supprimé de cet événement. Si un événement est supprimé, alors cet événement ne devrait plus être répertorié comme étant fait par un acteur. Ceci est mis en œuvre avec une «table de jonction», une table supplémentaire avec toutes les combinaisons d’acteurs et d’événements.

Dans épisode 3 Nous avons montré la méthode de base de Joomla pour le faire, comme c'est par exemple le cas pour la relation entre les utilisateurs et les groupes d'utilisateurs. Joomla met à jour nativement cette table de jonction dans l'objet Table. J'ai utilisé le même principe pour la mise en œuvre de notre exemple de calendrier d'événements. C'est bien sûr aussi possible avec JCB, mais cette fois, nous l'avons fait d'une autre manière: nous avons mis à jour la table de jonction dans le modèle après la sauvegarde et après la suppression.

Nous avons d'abord dû définir la table de jonction. Je l'ai ajouté dans l'onglet MySql du composant.

CRÉER UN TABLEAU S'IL N'EXISTE PAS «#__eventschedule_actor_event» ( 

«actor_id» bigint(20) NON SIGNÉ,

«event_id» bigint(20) NON SIGNÉ,

CLÉ PRIMAIRE («actor_id», «event_id») CRÉER UN TABLEAU S'IL N'EXISTE PAS «#__eventschedule_container_section» () ENGINE=InnoDB DEFAULT COLLATE utf8mb4_unicode_ci; «container_id» bigint(20) NON SIGNÉ,

«section_id» bigint(20) UNSIGNED, CLE PRIMAIRE («container_id», «section_id») Ainsi, une relation multiple entre les entités peut être implémentée dans JCB, mais pour le moment, vous devez implémenter manuellement la table de jonction et le code pour la mettre à jour. ) ENGINE=InnoDB DEFAULT COLLATE utf8mb4_unicode_ci;

Dans

, sous la rubrique «Programmes d’événements multiples», nous avons introduit une entité de planification d’événements afin de pouvoir fournir des calendriers différents, par exemple pour l’édition d’une autre année d’une conférence. Nous avons ajouté un

• comme clé étrangère dans toutes les autres tables (conteneurs, sections, acteurs, événements et types d'événements). Dans les derniers épisodes, nous avons eu une implémentation simple dans laquelle nous devions sélectionner le calendrier des événements dans chaque enregistrement que nous avons ajouté. Nous aimerions choisir le calendrier des événements dans le menu d'administration, puis ne voir que les conteneurs, les sections, les acteurs, les événements et les types d'événements de ce calendrier d'événements. Une sorte de vue imbriquée, pour ainsi dire.
• épisode 4
• eventschedule_id
  
• . Voir la vidéo Admin Views, avec un
• dans un composant distributeur de sermons.
• Vues liées
• Exemple de sermons appartenant à un prédicateur

Ajout de code personnalisé Sur les onglets PHP, CSS, JavaScript, Boutons personnalisés et En-têtes de classe d'une vue. Dans Joomla Component Builder, vous pouvez insérer du code personnalisé de différentes manières à différents endroits, par exemple: Modèles et mises en page d'affichage personnalisés, comme nous l'avons vu ci-dessus. L'onglet Custom Script dans Dynamic obtient.Bibliothèques frontales sous «Bibliothèques».

L'onglet Scripts dans Fields

Des extraits. (UUID = identifiant unique global ou GUID dans Microsoft speak). Ceci est fait avecPlaceholders. . Certains codes personnalisés se retrouvent maintenant dans des méthodes d'aide statiques; il pourrait être une amélioration s'il était possible d'ajouter directement des méthodes à la partie modèle du MVC. Classes avec espace de nomsLes extraits peuvent être partagés et beaucoup d'entre eux sont disponibles. Il existe cependant une politique vers une approche plus structurée du partage de code en ajoutant Identifiant universel unique au lieu d'extraits, en utilisant un

Pouvoirs

Des classes externes peuvent être ajoutées à votre composant avec ce qu'on appelle des Powers. Ils sont placés dans un dossier de bibliothèque et le chargement automatique est pris en charge par JCB. Les classes Joomla peuvent également être insérées de cette manière: Les pouvoirs de Joomla. Une idée était qu'ils peuvent être distribués avec votre composant et peuvent éventuellement même être utilisés sans Joomla lui-même. Ces pouvoirs peuvent être mis en repos Git sur des serveurs en tant que blocs de construction distribués:

. Ils peuvent être téléchargés automatiquement à partir de ces repos Git pour intégrer facilement votre code personnalisé ou d'autres logiciels, comme par exemple le

ou

, dans vos propres composants. Voir ceci API Gitea pour le cahier des charges. OpenAI Super pouvoirs

30.

✅

31.

• ✅
• Services Web / API
• *
• 32.
• │
• CLI
• *

*) N’ont pas fait l’objet d’un examen approfondi pour cet article

Beaucoup de chèques verts! JCB peut le faire!

Constructeur de composants Joomla

• Outil puissant pour les développeurs Joomla avec de nombreuses possibilités, entièrement gratuit et open source. Vous avez besoin de compétences de codage de base et d'une compréhension de Joomla Components.
• Peut être utilisé pour créer n'importe quel composant Joomla. A également des possibilités complètes pour faire un frontend personnalisé, comme notre exemple de calendrier d'événements.
• À l'heure actuelle, un composant peut être produit pour Joomla 3, 4 et 5. La modularisation des blocs de construction permettra un ajustement rapide aux futures versions de Joomla.
• Le code produit est Joomla standard, mais pas le plus petit qui serait possible d'implémenter le composant. C'est aussi parce que vous obtenez des utilitaires supplémentaires (en partie avec des méthodes d'aide statiques). Certaines fonctionnalités spéciales, non intégrées dans le cœur de Joomla (comme l'auto-checkin) sont possibles.
• Peut utiliser Git, à la fois pour les composants produits et pour les blocs de construction réutilisables. Plus de 100 heures de vidéo comme documentation; nouveaux produits régulièrement. La plupart des vidéos sont indexées pour trouver facilement un sujet.

Est en cours de développement actif et a une vision forte et authentique de la coopération et de la distribution des éléments constitutifs des composants dans les dépôts publics de Git.

• Dans le prochain épisode (édition de février 2025), nous examinerons un autre outil gratuit, plus petit mais prometteur. En mars, nous terminerons cette série et évaluerons les épisodes précédents.Le mois prochain
• RessourcesConstructeur de composants JoomlaConstructeur de composants Joomla:
• Wiki avec index des vidéosRepo JCB principalDernière version téléchargée
• sur Mattermost de JoomlaConstruire un composant:Canal Joomla Component Builder
• , notre source d'information en ligne en constante expansion.
• Joomla! Documentation des programmeurs» par Carlos Cámara.Livre: «

Développer des extensions pour Joomla! 5

• Livre en ligne: « "par Nicholas Dionysopoulos.
• Développement de l'extension Joomla Tutoriel de Robbie Jackson: «
• .» Fait pour Joomla 3, mais il y a beaucoup de choses qui sont encore utiles. Développement d'un composant MVC
• Regardez les composants de base. Ils sont censés être un exemple pour votre propre code. Livre: «
• : Etape par étape, jusqu'à l'extension Joomla" par Astrid Günther. En rupture de vente pour le moment; Nous espérons qu'une nouvelle version sera publiée. Développement d'extensions
• Articles dans cette série sur Outils pour construire un composant: Épisode 1:
• Introduction et solution de base

Épisode 2: Épisode 3: Une application intégrée dans Joomla