J4.x:Page Builder

This page is a translated version of the page J4.x:Page Builder and the translation is 85% complete.

GSoC 2019
Joomla 4 Page Builder
Documentazione

Joomla!

4.x

Introductione

Immagina che qualcuno voglia creare un modello, ma senza scrivere HTML. I CSS dovrebbero essere usati solo per lo stile e non per definire il layout. Quindi il Page-builder e il modello frontend "Apodis" sono strumenti utili. L'obiettivo principale è un editor, che consente di creare posizioni personalizzate con l'aiuto di una GUI drag & drop. Gli utenti possono utilizzare elementi predefiniti: contenitore, griglia, colonna, posizione del modulo nonché elementi personalizzati. Gli sviluppatori di terze parti sono in grado di aggiungere i propri elementi tramite plug-in.

Come iniziare

Per usare il Page builder, il modello di frontend attivato deve avere il campo pagebuilder nel templateDetails.xml come qui da Apodis:

<fieldset name="pagebuilder" label="TPL_APODIS_PAGEBUILDER">
   <field
		name="grid"
		type="pagebuilder"
		hidden="true"
		label="TPL_APODIS_PAGEBUILDER"
   />
</fieldset>

Il modello stesso deve caricare RenderHelper, che rende il parametro, compilato dall'editor. Questo succede nei template index.php.

use Joomla\Component\Templates\Administrator\Helper\RenderHelper;

$grid = $this->params->get('grid');

Successivamente, l'output viene inserito nel corpo HTML:

<?php echo RenderHelper::renderElements($grid); ?>

Editor

L'editor di Page Builder è disponibile negli stili modello e nella scheda appropriata. Supporta l'aggiunta di nuovi elementi, il trascinamento della selezione per riorganizzarli e posizionarli secondo i propri gusti e la possibilità di ridimensionare le colonne. La nidificazione degli elementi è inoltre disponibile e può essere modificata modificando le impostazioni del plug-in. Questo crea possibilità quasi illimitate.

Page Builder Editor:

Gli utenti possono aggiungere diversi elementi al layout utilizzando il pulsante "Aggiungi elemento" nella parte inferiore delle righe. Quindi viene visualizzata una finestra modale, in cui sono in grado di selezionare gli elementi disponibili e impostare direttamente ulteriori opzioni.

È possibile aggiungere classi CSS personalizzate utilizzando l'icona delle impostazioni, presente su ogni elemento e qui gli utenti possono anche aggiungere offset alle colonne e selezionare il nome e il modulo chrome per ogni posizione del modulo. I plugin sono in grado di offrire le proprie opzioni per la barra laterale.

Gli utenti possono modificare gli elementi nella barra laterale delle impostazioni:

L'output è un oggetto JSON memorizzato nel campo dei parametri con il tipo, le opzioni, le dimensioni e i figli di ogni elemento. L'editor carica automaticamente il layout salvato dal parametro in modo che l'utente possa continuare direttamente la modifica.

Elementi

Esistono quattro elementi predefiniti forniti con il Page Builder:

Contenitore
Griglia
Colonna
Posizione del modulo

Di seguito è disponibile la configurazione predefinita, che può essere modificata tramite plugin.

Config	Container	Grid	Column	Module Position
Parents allowed	Root, Column	Root, Column, Container	Grid	Root, Grid, Column, Container
Contain children	True	True	True	False
Can contain component	True	True	True	False
Can contain message	True	True	True	False

Componente e messaggio

Non solo le posizioni dei moduli sono elementi importanti nel generatore di pagine. La posizione del componente e i messaggi visualizzati possono essere impostati trascinandoli sugli elementi che lo accettano. Questo rende estremamente facile selezionare le posizioni, a cui sono abituati gli output dei contenuti della pagina. Solo uno di entrambi può essere posizionato su un elemento. Un clic sulla 'x' rimuove la posizione e può essere nuovamente sostituita.

Gli utenti possono impostare la posizione del componente o del messaggio sugli elementi del builder Pagina:

Users can set the component or message position on Page builder elements

Apodis

Page Builder è integrato con un nuovo modello di frontend chiamato Apodis, che consente agli utenti di selezionare, trascinare e rilasciare i propri stili di modello utilizzando l'editor. Il nuovo design del modello ottiene gli elementi del generatore di pagine in index.php e mostra direttamente l'output di rendering. Ciò è utile per test indipendenti, in cui nessun foglio di stile può interrompere il comportamento predefinito. Funziona così: una funzione di aiuto com_templates viene chiamata in index.php e scorre in modo ricorsivo attraverso il parametro JSON ottenuto dalla tabella #_template_styles, che include tipo, posizione e tutte le informazioni degli elementi salvati del Page Builder. A seconda del tipo e delle opzioni, il rendering cambia o aggiunge HTML. In futuro, il renderer osserverà anche i plug-in di page builder e il rendering desiderato.

Integrare stato e metodi utilizzando Vuex

Vuex viene utilizzato per consentire a più componenti di ottenere il loro stato da un negozio Vuex centralizzato e può aggiornarsi in modo reattivo ed efficiente ogni volta che cambia lo stato del negozio. L'uso di Vuex ha reso la base di codice e l'architettura di page-builder molto più modulari, efficienti ed espandibili per future estensioni. Ci consente inoltre di tenere traccia degli eventi che cambiano stato e ci aiuta a eseguire il debug utilizzando Vue Devtools Extension.

Shipping Bootstrap 4

Abbiamo incluso i tuoi file BS4 con l'editor del generatore di pagine per tenere conto della situazione in cui il modello back-end non ha file Bootstrap inclusi.

J4.x