Tag di trasformazione Bootstrap e 4D

Avete bisogno di accedere ai dati 4D da una pagina web ma non avete un designer nel vostro team? Non vi sentite a vostro agio nel progettare le pagine da soli perché credete che siano piene di regole complicate e non scritte? Beh, avete mai pensato a Bootstrap?
In questo blog post vedremo come sfruttare il framework di Bootstrap per progettare pagine web in pochissimo tempo! Vi forniremo anche un esempio di database per vedere come può essere combinato con i tag di trasformazione 4D.

HDI: Bootstrap e i tag di trasformazione 4D

Tag di trasformazione 4D

Nota: se sapete già come usare i tag di trasformazione e volete solo imparare a migliorarne l’aspetto, saltate questo capitolo. Oppure continuate a leggere per rinfrescarvi la memoria…

Sono disponibili diversi tag specifici per 4D che consentono di inserire riferimenti a variabili, espressioni o diversi tipi di elaborazione 4D nelle pagine HTML statiche inviate dal server Web. Queste pagine sono chiamate pagine semidinamiche.

I tag vengono inseriti come commenti di tipo HTML: <!–#4D…–> per essere elaborati da 4D.

Tenete a mente questi principi quando utilizzate i tag:

• È necessario aggiungere il suffisso “.shtm” o “.shtml” per forzare l’analisi delle pagine HTML.
• L’esecuzione di un metodo 4D con 4DTEXT, 4DHTML, 4DEVAL, 4DSCRIPT, 4DIF, 4DELSEIF o 4DLOOP da una richiesta web è soggetta al valore dell’attributo“Disponibile tramite tag e URL 4D (4DACTION …)”, definito nelle proprietà del metodo. Nell’esempio seguente, il metodo sendEmployeesData è impostato per essere accessibile via web:

Per saperne di più sui tag 4D, guardate questo video del 4D Summit 2016.

Nel nostro esempio, invieremo un elenco di dipendenti alla nostra pagina SHTML. Grazie al tag <!–#4DLOOP…–> , possiamo iterare l’elenco dei dipendenti. Poi, con il tag <!–#4dtext …–>, possiamo visualizzarli. Il codice finale avrà il seguente aspetto:

<!--#4dscript/sendEmployeesData--> //Execute the 4D method
<table>
<tr><th>Nome</th>
...
<th>Email</th></tr>
<!--#4dloop empID--> //Loop through the array of employees
<tr> <td><!--#4dtext empFname{empID}--></td> //Display the employee first name
....
<td><!--#4dtext empEmail{empID}--></td> </tr>
<!--#4dendloop-->
</table>

Avviare il server web ed eseguire il codice per vedere i risultati:

Non male, ma non eccezionale. Non c’è da preoccuparsi. Vediamo come Bootstrap può aiutare ad abbellire questo …. soprattutto perché le tabelle esistono nella maggior parte dei programmi e sono un elemento essenziale per presentare i dati agli utenti finali.

tabelle di bootstrap

Utilizzare Bootstrap con 4D è semplice: scaricate la versione compilata, copiatela nella cartella web del vostro database e includete i file JS e CSS nel vostro file SHTML .

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>

Tenete presente che esistono molte versioni di Bootstrap (la versione 4 è la più recente). In questo blog post, utilizzeremo la versione 4.

Per vedere la potenza di Bootstrap, miglioriamo visivamente la nostra tabella.

È molto facile renderla più attraente: basta aggiungere la classe .table al tag <table> per applicare una formattazione visiva. Ancora meglio, se siete fan della modalità scura, Bootstrap ha una classe .table-dark per voi. C’è anche una classe .table-striped per aggiungere uno stile zebrato. Tutte queste classi possono essere combinate a seconda di ciò che si vuole ottenere. Aprite il vostro file SHTML, aggiungete queste classi e selezionate Esegui/Test Web Server da 4D:

<table class="table table-dark table-striped">


Bello!

Bootstrap ha un interessante elenco di stili di tabella. Consultate la documentazione e vedete cosa fa al caso vostro.

È possibile risparmiare molto tempo utilizzando i modelli e le classi predefinite di Bootstrap. In questo post abbiamo solo scalfito la superficie di ciò che si può fare con il framework. Consultate la documentazione completa e scoprite come Bootstrap, combinato con la potente funzione dei tag 4D, può aiutarvi a rendere più vivaci i progetti delle vostre applicazioni web 4D.