Bootstrap- und 4D-Transformations-Tags

Müssen Sie über eine Webseite auf Ihre 4D Daten zugreifen, haben aber keinen Designer in Ihrem Team? Ist es Ihnen unangenehm, die Seiten selbst zu entwerfen, weil Sie tief im Inneren glauben, dass es voller komplizierter und ungeschriebener Regeln ist? Haben Sie jemals über Bootstrap nachgedacht?
In diesem Blog-Beitrag zeigen wir Ihnen, wie Sie die Vorteile des Bootstrap-Frameworks nutzen können, um Webseiten im Handumdrehen zu gestalten! Außerdem zeigen wir Ihnen anhand eines Datenbankbeispiels, wie es sich mit 4D Transformation Tags kombinieren lässt.

HDI: Bootstrap und 4D-Transformations-Tags

4D-Transformations-Tags

Hinweis: Wenn Sie bereits wissen, wie man Transformations-Tags verwendet, und nur lernen wollen, wie man sie besser aussehen lässt, überspringen Sie dieses Kapitel. Oder lesen Sie weiter, um Ihr Gedächtnis aufzufrischen…

Es stehen mehrere 4D-spezifische Tags zur Verfügung, mit denen Sie Verweise auf 4D-Variablen, Ausdrücke oder verschiedene Arten der Verarbeitung in statische HTML-Seiten einfügen können, die vom Webserver gesendet werden. Diese Seiten werden als halb-dynamische Seiten bezeichnet.

Die Tags werden als HTML-artige Kommentare eingefügt: <!–#4D…–>, damit sie von 4D verarbeitet werden können.

Beachten Sie diese Grundsätze bei der Verwendung von Tags:

• Sie müssen das Suffix „.shtm“ oder „.shtml“ hinzufügen, um das Parsen von HTML-Seiten zu erzwingen.
• Die Ausführung einer 4D Methode mit 4DTEXT, 4DHTML, 4DEVAL, 4DSCRIPT, 4DIF, 4DELSEIF oder 4DLOOP aus einer Web-Anfrage unterliegt dem Attributwert„Verfügbar über Tags und 4D URLs (4DACTION …)“, der in den Methodeneigenschaften definiert ist. Im folgenden Beispiel ist die Methode sendEmployeesData so eingestellt, dass der Zugriff über das Web erfolgt:

Weitere Informationen über 4D Tags finden Sie in diesem Video vom 4D Summit 2016.

In unserem Beispiel werden wir eine Liste von Mitarbeitern an unsere SHTML-Seite senden. Und dank des <!–#4DLOOP…–> Tags können wir durch unser Array von Mitarbeitern iterieren. Dann können sie mit dem <!–#4dtext …–> Tag angezeigt werden. Der endgültige Code sieht wie folgt aus:

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

Starten Sie Ihren Webserver und führen Sie den Code aus, um die Ergebnisse zu sehen:

Nicht schlecht, aber auch nicht toll. Aber keine Sorge. Schauen wir uns an, wie Bootstrap helfen kann, diese …. zu verschönern, zumal Tabellen in den meisten Programmen vorkommen und ein wesentliches Element für die Darstellung von Daten für Endbenutzer sind.

Bootstrap-Tabellen

Die Verwendung von Bootstrap mit 4D ist ganz einfach: Laden Sie die kompilierte Version herunter, kopieren Sie sie in den Web-Ordner Ihrer Datenbank und fügen Sie dann die JS- und CSS-Dateien in Ihre SHTML-Datei ein.

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

Denken Sie daran, dass es viele Versionen von Bootstrap gibt (Version 4 ist die aktuellste). In diesem Blogbeitrag verwenden wir Version 4.

Um die Leistungsfähigkeit von Bootstrap zu sehen, wollen wir unsere Tabelle visuell verbessern.

Es ist sehr einfach, sie attraktiver zu gestalten: Fügen Sie einfach die Klasse .table zum <table>-Tag hinzu, um eine visuelle Formatierung vorzunehmen. Noch besser: Wenn Sie ein Fan des dunklen Modus sind, hat Bootstrap eine .table-dark Klasse für Sie. Es gibt sogar eine Klassetable-striped , um einen Zebrastreifenstil hinzuzufügen. Und alle diese Klassen können kombiniert werden, je nachdem, was Sie erreichen wollen. Öffnen Sie Ihre SHTML-Datei, fügen Sie diese Klassen hinzu und wählen Sie in 4D Run/Test Web Server :

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


Sehr schön!

Bootstrap hat eine interessante Liste von Tabellenstilen. Sehen Sie sich die Dokumentation an und finden Sie heraus, was für Sie geeignet ist.

Sie können eine Menge Zeit sparen, wenn Sie die vordefinierten Designvorlagen und Klassen von Bootstrap verwenden. In diesem Beitrag haben wir nur an der Oberfläche dessen gekratzt, was man mit dem Framework machen kann. Schauen Sie sich die vollständige Dokumentation an und entdecken Sie, wie Bootstrap in Kombination mit den leistungsstarken 4D-Tags das Design Ihrer webbasierten 4D-Anwendungen aufpeppen kann.