Balises de transformation Bootstrap et 4D

Vous avez besoin d’accéder à vos données 4D à partir d’une page Web mais vous n’avez pas de concepteur dans votre équipe ? Vous n’êtes pas à l’aise pour concevoir vous-même les pages parce qu’au fond de vous, vous pensez que c’est plein de règles compliquées et non écrites ? Eh bien, avez-vous déjà pensé à Bootstrap ?
Dans cet article de blog, nous allons voir comment tirer parti du cadre de Bootstrap pour concevoir des pages Web en un rien de temps ! Nous vous fournirons également un exemple de base de données pour voir comment il peut être combiné avec les balises de transformation 4D.

HDI : Bootstrap et les balises de transformation 4D

Balises de transformation 4D

Remarque: si vous savez déjà comment utiliser les balises de transformation et que vous souhaitez simplement apprendre à les améliorer, passez ce chapitre. Ou lisez la suite pour vous rafraîchir la mémoire…

Plusieurs balises spécifiques à 4D sont disponibles pour vous permettre d’insérer des références à des variables, des expressions ou différents types de traitement 4D dans des pages HTML statiques envoyées par le serveur Web. Ces pages sont appelées pages semi-dynamiques.

Les balises sont insérées comme des commentaires de type HTML : <!–#4D…–> afin d’être traitées par 4D.

Gardez ces principes à l’esprit lorsque vous utilisez des balises :

• Vous devez ajouter le suffixe « .shtm » ou « .shtml » pour forcer l’analyse des pages HTML.
• L’exécution d’une méthode 4D avec 4DTEXT, 4DHTML, 4DEVAL, 4DSCRIPT, 4DIF, 4DELSEIF ou 4DLOOP à partir d’une requête Web est soumise à la valeur de l’attribut« Available via tags and 4D URLs (4DACTION …) » qui est définie dans les propriétés de la méthode. Dans l’exemple ci-dessous, la méthode sendEmployeesData est définie pour être accessible via le Web :

Pour en savoir plus sur les balises 4D, consultez cette vidéo du 4D Summit 2016.

Dans notre exemple, nous allons envoyer une liste d’employés à notre page SHTML. Et grâce à la balise <!–#4DLOOP…–> , nous pouvons itérer dans notre tableau d’employés. Ensuite, ils peuvent être affichés avec la balise <!–#4dtext …–>. Le code final ressemblera à ceci :

<!--#4dscript/sendEmployeesData--> //Execute the 4D method
<table>
<tr><th>Prénom</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>

Démarrez votre serveur web et exécutez le code pour voir les résultats :

Pas mal, mais pas génial. Pas d’inquiétude. Voyons comment Bootstrap peut aider à embellir ce …. d’autant plus que les tableaux existent dans la majorité des programmes et qu’ils sont un élément essentiel pour présenter des données aux utilisateurs finaux.

Tableaux bootstrap

L’utilisation de Bootstrap avec 4D est simple : téléchargez la version compilée, copiez-la dans le dossier web de votre base de données, puis incluez les fichiers JS et CSS dans votre fichier SHTML .

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

Gardez à l’esprit qu’il existe de nombreuses versions de Bootstrap (la version 4 est la plus récente). Dans ce billet de blog, nous utilisons la version 4.

Pour voir la puissance de Bootstrap, améliorons visuellement notre tableau.

Il est très facile de le rendre plus attrayant : il suffit d’ajouter la classe .table à la balise <table> pour appliquer un certain formatage visuel. Mieux encore, si vous êtes fan du mode sombre, Bootstrap a une classe .table-dark pour vous. Il existe même une classe .table-striped pour ajouter un style de rayures zébrées. Et toutes ces classes peuvent être combinées en fonction de ce que vous souhaitez obtenir. Ouvrez votre fichier SHTML, ajoutez ces classes, puis sélectionnez Run/Test Web Server dans 4D :

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


Bien joué !

Bootstrap dispose d’une liste intéressante de styles de tableaux. Consultez la documentation et voyez ce qui fonctionne pour vous.

Vous pouvez gagner beaucoup de temps en utilisant les classes et les modèles de conception prédéfinis de Bootstrap. Dans cet article, nous n’avons fait qu’effleurer la surface de ce qui peut être fait avec le framework. Consultez la documentation complète et découvrez comment Bootstrap, associé à la puissante fonctionnalité des balises 4D, peut vous aider à pimenter la conception de vos applications Web 4D.