Strumenti per costruire un componente - 7: Joomla Component Builder

In questo episodio useremo Joomla Component Builder per costruire il nostro componente di pianificazione degli eventi di esempio.

Il nostro viaggio fino ad ora

In questa serie vogliamo mostrare alcuni strumenti che possono aiutare a costruire componenti per Joomla.

Nell'episodio uno e due Abbiamo introdotto il nostro esempio, un programma di eventi, e lo abbiamo implementato senza costruire un componente. L'abbiamo implementato con il core Joomla, con Seblod e Fabrik.

Nell'episodio tre e quattro Abbiamo costruito un componente, senza usare molti strumenti. Abbiamo esplorato il modo in cui le relazioni tra le entità sono implementate in Joomla stesso e abbiamo elencato funzionalità aggiuntive, integrate in Joomla.

Nell'episodio cinque e sei Abbiamo usato Component Creator e Component Generator per costruire il nostro componente di pianificazione degli eventi di esempio.

Joomla Component Builder

In questo episodio vedremo Joomla Component Builder (JCB). È uno strumento per costruire componenti Joomla, creato da Llewellyn van der Merwe, fondatore di Vast Development Method (VDM) in Namibia, e un noto Joomler. Joomla Component Builder è un sistema completamente gratuito e open source per costruire qualsiasi componente Joomla, senza limiti. Funziona sulla tua installazione Joomla. È possibile scaricarlo dal JED oppure direttamente presso https://git.vdm.dev/joomla/pkg-component-builder/releases.

JCB è rivolto agli sviluppatori. Non è una soluzione senza codice: Devi avere alcune abilità di codifica e una comprensione di base di come funzionano i componenti Joomla. Il codice personalizzato può essere inserito nel componente in molti punti di JCB, dandogli flessibilità che non abbiamo mai visto prima in altri strumenti.

La documentazione consiste principalmente in più di 70 video, più di 100 ore in totale, che spiegano e dimostrano le possibilità. Per facilitare la ricerca in tali video, essi sono indicizzati nel wiki.

Llewellyn ha una visione di una comunità che si scambia blocchi da costruzione riutilizzabili (denominato: Poteri) per i componenti. I poteri disponibili al pubblico sono chiamati Superpoteri. Possono essere utilizzati per integrare facilmente il tuo software personalizzato o altro, come ad esempio le API di Gitea oppure OpenAI nei propri componenti.

Il nostro esempio: calendario degli eventi

Il componente di esempio che usiamo in questa serie è basato sul JCB-demo di Tom van der Laan e Bram de Hoop sull'olandese JoomlaDagen 2024. Era un programma di eventi, un calendario di eventi che può ad esempio essere utilizzato per una conferenza. Quindi con questo episodio l'esempio è tornato alla sua origine, mostrandolo di nuovo con Joomla Component Builder.

Vedi il nostro Episodio 5 per una panoramica del nostro esempio di calendario degli eventi. Il componente è destinato a visualizzare orari su schede (contenitori), con eventi verticalmente in un momento specifico di una giornata. Gli eventi simultanei vengono visualizzati in tracce parallele (sezioni). Gli eventi possono essere di un tipo di evento e sono fatti da attori.

Per Programma Evento abbiamo questo Diagramma Entità-Relazione (ERD):

Quindi, sappiamo di quali entità e campi abbiamo bisogno. Questo è spesso un buon inizio di un'analisi di ciò che vogliamo costruire.

Passi per configurare un componente in JCB

In Joomla Component Builder ho impostato il componente di base utilizzando i seguenti passaggi. Si tratta di un approccio dal basso verso l'alto: prima definisci i blocchi di costruzione (come i campi) e poi li raccogli in strutture più grandi (come le viste dell'amministratore).

1. Campi

Definisci i campi di cui hai bisogno. Un campo può essere utilizzato in più entità e in più componenti. Ad esempio un campo "nome"; ce n'è già uno nel componente demo, quindi puoi riutilizzarlo. I tipi di campo Joomla possono essere usati come base, ma puoi anche definire i tuoi tipi di campo, davvero senza limiti! Per il nostro esempio abbiamo definito un tipo di campo “Time”, che abbiamo utilizzato nei campi “Start Time” e “End Time”.

2. VISTE AMMINISTRATORE

Le entità o le tabelle sono rappresentate da Admin Views in JCB. Creare le viste amministratore e aggiungere i campi definiti nel passaggio 1.

3. Componente

Creare un nuovo componente, compilare alcune informazioni generali e aggiungere le viste amministratore ad esso.

È possibile saltare questo terzo passaggio e farlo in un secondo momento, mentre si aggiungono le viste del sito. Ma creando un Componente in questo momento e aggiungendo le viste Admin, possiamo già testare un Componente amministratore di base completamente funzionale: "compilarlo" e installarlo con un clic del pulsante nell'installazione corrente di Joomla.

4. QUERY DINAMICHE

I Dynamic Gets sono query selezionate al database tramite l'interfaccia utente grafica (GUI): è possibile ottenere campi da diverse tabelle: le viste amministratore precedentemente definite, ma anche altre tabelle nel database, unendole, filtrandole, ecc.getListQuery) e un'interrogazione di un elemento (getItem). Ma puoi creare query di elenco personalizzate e query di elementi in qualsiasi modo tu voglia. È possibile utilizzare i set di dati risultanti nelle visualizzazioni sito o nelle visualizzazioni amministratore personalizzate.

5. Vista(E) del sito

Definisci quali viste del sito vuoi avere. Le viste standard sono una vista elenco (plurale, record multipli) e una vista elemento (singolare, un record singolo). Selezionare il corrispondente "Ottieni" da un elenco a discesa. Ma puoi creare qualsiasi altra visualizzazione del sito personalizzata, come ad esempio gli orari che vogliamo avere nel nostro esempio di pianificazione degli eventi.

È possibile scrivere il modello di layout predefinito direttamente nella schermata Visualizzazione sito. Llewellyn ha scelto di non fornire un modello di frontend già pronto, perché sono così specifici e diversi per qualsiasi componente personalizzato. Ma i suggerimenti di codice per il set di dati scelto sono forniti sulla stessa pagina e puoi facilmente copiarli e incollarli. Naturalmente è necessario avere alcune capacità di codifica, JCB è non una soluzione senza codice, il gruppo target sono gli sviluppatori.

Ecco alcuni di questi frammenti di codice (per una vista articolo):

Un primo passo sarebbe quello di creare un modello di visualizzazione molto semplice, stampando solo alcune variabili o un semplice elenco. Solo per verificare se funziona.

Aggiungere la visualizzazione del sito al componente, compilare e installare. Così si può vedere immediatamente il risultato. In questo momento abbiamo un componente di lavoro minimo con amministratore e sito!

6. VisTA TEMPLATE / Layout

In Component Creator e Component Generator non c'era la possibilità di creare il proprio modello di frontend personalizzato. Puoi aggiungerlo solo dopo aver installato il componente e dovrai riapplicare tali personalizzazioni dopo ogni aggiornamento del componente. In JCB si definiscono i modelli di visualizzazione personalizzati e vengono utilizzati negli aggiornamenti del componente.

Invece di digitare il modello di visualizzazione direttamente nella vista sito, possiamo anche creare un modello (riutilizzabile). Lo troverete nel menu:

Per il nostro componente di esempio abbiamo utilizzato modelli di visualizzazione proprio come quando abbiamo implementato l'esempio "a mano". Abbiamo creato un modello di visualizzazione che mostra i nostri contenitori in schede. Per esempio per mostrare i diversi giorni della conferenza. E abbiamo creato modelli per il programma e per l'evento. Tutti questi modelli finiscono come sotto-modelli sotto il modello di visualizzazione predefinito e vengono chiamati con $this->loadTemplate('templatename');.

Possiamo anche creare layout e chiamarli dal view-template con LayoutHelper::render('layoutname', $thedata);. Il namespace \Joomla\CMS\Layout è già importato nel modello generato e nei file di layout.

Come puoi vedere, puoi davvero creare un frontend molto specifico. Non è necessario modificare il componente dopo averlo installato. Basta fare le modifiche in JCB, ricompilare e reinstallare, così bello!

relazioni Molti-a-moltI

Nel nostro esempio di calendario degli eventi ci sono due relazioni molti-a-molti: tra attori ed eventi, tra contenitori e sezioni. Un attore può fare più eventi e un evento può essere fatto da più attori. Quando aggiungi o elimini un evento da un attore, anche quell'attore dovrebbe essere aggiunto o eliminato da quell'evento. Se un evento viene eliminato, anche quell'evento non dovrebbe più essere elencato come fatto da alcun attore. Ciò è attuato con una cosiddetta "tabella di giunzione", una tabella supplementare con tutte le combinazioni di attori ed eventi.

In Episodio 3 Abbiamo mostrato il modo principale di Joomla per farlo, come viene ad esempio utilizzato con la relazione tra utenti e gruppi di utenti. Joomla aggiorna nativamente la tabella di giunzione nell'oggetto Tabella. Ho usato lo stesso principio per un'implementazione del nostro esempio di calendario degli eventi. Questo è ovviamente possibile anche con JCB, ma questa volta lo abbiamo fatto in un altro modo: abbiamo aggiornato la tabella di giunzione nel modello dopo il salvataggio e dopo l'eliminazione.

Per prima cosa abbiamo dovuto definire la tabella di giunzione. L'ho aggiunto nella scheda MySql del componente.

CREATE TABLE IF NOT EXISTS `#__eventschedule_actor_event` (
    `actor_id` bigint(20) UNSIGNED,
    `event_id` bigint(20) UNSIGNED,
    PRIMARY KEY (`actor_id`, `event_id`)
)  ENGINE=InnoDB DEFAULT COLLATE utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `#__eventschedule_container_section` (
    `container_id` bigint(20) UNSIGNED,
    `section_id` bigint(20) UNSIGNED,
    PRIMARY KEY (`container_id`, `section_id`)
)  ENGINE=InnoDB DEFAULT COLLATE utf8mb4_unicode_ci;

Quindi, una relazione molti-a-molti tra entità può essere implementata in JCB, ma al momento è necessario implementare manualmente la tabella di giunzione e il codice per aggiornarlo.

Vista Collegata in una Vista di Amministrazione Personalizzata

Nell'episodio 4, nella sezione "Programmazione di più eventi", abbiamo introdotto un'entità "Programmazione Eventi" per poter fornire diversi programmi, ad esempio per l'edizione di un altro anno di una conferenza. Abbiamo aggiunto un eventschedule_id come chiave esterna in tutte le altre tabelle (contenitori, sezioni, attori, eventi e tipi di evento). Negli ultimi episodi abbiamo avuto una semplice implementazione in cui dovevamo selezionare il programma dell'evento in ogni record aggiunto. Vorremmo scegliere il programma dell'evento nel menu di amministrazione e poi visualizzare solo i contenitori, le sezioni, gli attori, gli eventi e i tipi di evento di quel programma. Una sorta di vista nidificata, per così dire.

In JCB è possibile farlo utilizzando una Vista di Amministrazione Personalizzata. Le Viste di Amministrazione nidificate vengono inserite in una scheda diversa nella Vista di Amministrazione Personalizzata. Questa funzionalità si chiama "Viste Collegate". Guarda il video sulle Viste di Amministrazione, con un esempio di sermoni appartenenti a un predicatore in un componente di distribuzione di sermoni.

AGGIUNTA DI CODICE PERSONALIZZATO

In Joomla Component Builder puoi inserire codice personalizzato in molti modi diversi e in diverse posizioni, ad esempio:

• Modelli e layout di visualizzazione personalizzati, come abbiamo visto sopra.
• Librerie frontend in "Librerie".
• Nelle schede PHP, CSS, JavaScript, Pulsanti personalizzati e intestazioni di classe di una visualizzazione.

• La scheda Script personalizzato in Dynamic Gets.
• La scheda Script in Campi.
• Frammenti.
• Segnaposti.

Parte del codice personalizzato ora finisce nei metodi helper statici; potrebbe essere un miglioramento se fosse possibile aggiungere metodi direttamente alla parte modello del MVC.

Gli snippet possono essere condivisi e molti di essi sono disponibili. Esiste tuttavia una politica che prevede un approccio più strutturato alla condivisione del codice, aggiungendo classi con namespace al posto degli snippet, utilizzando un identificatore univoco universale (UUID = identificatore univoco globale o GUID nel linguaggio Microsoft). Questo viene fatto con i "POTERI".

Power, Joomla Power e Super Power

Le classi esterne possono essere aggiunte al componente tramite i cosiddetti Power. Vengono inseriti in una cartella di libreria e il caricamento automatico è gestito da JCB. Anche le classi Joomla possono essere inserite in questo modo: Joomla Power. L'idea era di distribuirli con il componente e, in seguito, di poterli utilizzare anche senza Joomla. Questi Power possono essere inseriti nei repository Git sui server come blocchi costitutivi distribuiti: Super Power. Possono essere scaricati automaticamente da questi repository Git per integrare facilmente il codice personalizzato o altri software, come ad esempio le API Gitea o OpenAI, nei componenti. Consulta questa wiki sui Super Power per le specifiche.

Questi Super Power dispongono di un'utile documentazione dei loro metodi generata automaticamente.

Miglioramenti futuri

JCB sta passando dagli ID ad incremento automatico agli UUID. Questo offre ottime possibilità per lo scambio di codice e dati, poiché non è più necessario sincronizzare gli ID su installazioni diverse. L'obiettivo è rendere JCB uno strumento più potente, scalabile e orientato alla community per gli sviluppatori Joomla.

"Funzionalità" utilizzate in JCB

Nel quarto episodio di questa serie ho elencato le funzionalità integrate in Joomla e utilizzabili nel nostro componente. Quali di queste vengono utilizzate da Joomla Component Builder?

*) Non sono stati esaminati a fondo per questo articolo

Un sacco di spunte verdi! JCB può farlo!

Joomla Component Builder

• Potente strumento per sviluppatori Joomla con molte possibilità, completamente gratuito e open source. Hai bisogno di competenze di codifica di base e una comprensione di Joomla Components.
• Può essere utilizzato per realizzare qualsiasi componente Joomla. Ha anche possibilità complete per creare un frontend personalizzato, come il nostro programma di eventi di esempio.
• Al momento è possibile produrre un componente per Joomla 3, 4 e 5. La modularizzazione degli elementi costitutivi contribuirà a un rapido adeguamento alle future versioni di Joomla.
• Il codice prodotto è standard Joomla, ma non il più piccolo che sarebbe possibile implementare il componente. Questo è anche perché si ottengono utilità extra (in parte con metodi di aiuto statico). Alcune caratteristiche speciali, non integrate nel core Joomla (come l'auto-checkin) sono possibili.
• Può utilizzare Git, sia per i componenti prodotti che per i blocchi da costruzione riutilizzabili. Più di 100 ore di video come documentazione; nuovi prodotti regolarmente. La maggior parte dei video sono indicizzati per trovare facilmente un argomento.
• È in fase di sviluppo attivo e ha una visione forte e autentica della cooperazione e della distribuzione di elementi costitutivi per i componenti nei pronti contro termine pubblici di Git.

IL PROSSIMO MESE

Nel prossimo episodio (edizione febbraio 2025) vedremo un altro strumento gratuito, più piccolo ma promettente. A marzo chiuderemo questa serie e valuteremo gli episodi precedenti.

RISORSE

Joomla Component Builder:

• Joomla Component Builder
• Wiki with index of videos
• Latest release download
• Main JCB repo
• Joomla Component Builder channel on Joomla’s Mattermost

Building a component:

• Joomla! Programmers Documentation, our ever expanding online source of information.
• Book: “Developing Extensions for Joomla! 5” by Carlos Cámara.
• Online book: "Joomla Extension Development"by Nicholas Dionysopoulos.
• Robbie Jackson’s tutorial: “Developing an MVC Component”. Made for Joomla 3, but there is a lot that is still useful.
• Look at core components. They are supposed to be an example for your own code.
• Book: "Developing Extensions: Step by step to an working Joomla extension" by Astrid Günther. Out of sale at the moment; hopefully a new version will be published.

Articles in this series about Tools to build a Component:

• Episode 1: Introduction and Core Solution
• Episode 2: An Embedded Application in Joomla
• Episode 3: Creating a Component
• Episode 4: Built-in extras and some setup tools
• Episode 5: Component Creator
• Episode 6: Component Generator
• Episode 7: Joomla Component Builder (this article)

Extra material like the code for our example event schedule component can be found in the repository for this series.

Alcuni articoli pubblicati sul Joomla Community Magazine rappresentano l'opinione personale o l'esperienza dell'Autore sull'argomento specifico e potrebbero non essere allineati alla posizione ufficiale del Progetto Joomla