Značky transformace Bootstrap a 4D

Potřebujete přistupovat k datům 4D z webové stránky, ale nemáte v týmu návrháře? Je vám nepříjemné navrhovat stránky sami, protože se v hloubi duše domníváte, že je to plné složitých a nepsaných pravidel? No, přemýšleli jste někdy o Bootstrapu?
V tomto příspěvku na blogu se podíváme na to, jak využít framework Bootstrap k návrhu webových stránek během chvilky! Poskytneme vám také příklad databáze, na kterém uvidíte, jak ji lze kombinovat s transformačními značkami 4D.

HDI: Bootstrap a transformační značky 4D

4D transformační značky

Poznámka: Pokud již víte, jak používat transformační značky, a chcete se jen naučit, jak je lépe upravit, tuto kapitolu přeskočte. Nebo si přečtěte, abyste si osvěžili paměť…

K dispozici je několik specifických značek 4D, které umožňují vkládat odkazy na proměnné 4D, výrazy nebo různé typy zpracování do statických stránek HTML odesílaných webovým serverem. Tyto stránky se nazývají polodynamické stránky.

Značky se vkládají jako komentáře typu HTML: <!–#4D…–>, aby je mohl 4D zpracovat.

Při používání značek mějte na paměti tyto zásady:

• Pro vynucení zpracování stránek HTML je nutné přidat příponu „.shtm“ nebo „.shtml“.
• Spuštění metody 4D s 4DTEXT, 4DHTML, 4DEVAL, 4DSCRIPT, 4DIF, 4DELSEIF nebo 4DLOOP z webového požadavku se řídí hodnotou atributu„Dostupné prostřednictvím značek a 4D URL (4DACTION ...)“, která je definována ve vlastnostech metody. V níže uvedeném příkladu je metoda sendEmployeesData nastavena tak, aby byla přístupná přes web:

Chcete-li se o značkách 4D dozvědět více, podívejte se na toto video z konference 4D Summit 2016.

V našem příkladu odešleme na stránku SHTML seznam zaměstnanců. A díky značce <!–#4DLOOP…–> můžeme iterovat přes naše pole zaměstnanců. Poté je můžeme zobrazit pomocí značky <!–#4dtext …–>. Výsledný kód bude vypadat takto:

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

Spusťte webový server a spusťte kód, abyste viděli výsledky:

Není to špatné, ale ani skvělé. Žádné obavy. Podívejme se, jak může Bootstrap pomoci zkrášlit tuto stránku …., zejména proto, že tabulky existují ve většině programů a jsou základním prvkem pro prezentaci dat koncovým uživatelům.

Bootstrap Tabulky

Použití nástroje Bootstrap s aplikací 4D je jednoduché: stáhněte si zkompilovanou verzi, zkopírujte ji do webové složky vaší databáze a poté do souboru SHTML zahrňte soubory JS a CSS.

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

Mějte na paměti, že existuje mnoho verzí systému Bootstrap (nejnovější je verze 4). V tomto příspěvku na blogu používáme verzi 4.

Abychom se přesvědčili o síle Bootstrapu, pojďme si vizuálně vylepšit naši tabulku.

Její zatraktivnění je velmi snadné: jednoduše přidejte třídu .table do značky <table> a použijte vizuální formátování. A co víc, pokud jste příznivci tmavého režimu, Bootstrap pro vás má třídu .table-dark. K dispozici je dokonce i třída .table-striped , která přidá styl pruhování zebra. A všechny tyto třídy lze kombinovat podle toho, čeho chcete dosáhnout. Otevřete svůj soubor SHTML, přidejte tyto třídy a v aplikaci 4D vyberte možnost Spustit/Testovat webový server :

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


Pěkné!

Bootstrap má zajímavý seznam stylů tabulek. Podívejte se do dokumentace a zjistěte, co vám vyhovuje.

Použitím předdefinovaných šablon a tříd návrhu Bootstrap můžete ušetřit spoustu času. V tomto příspěvku jsme pouze poškrábali povrch toho, co lze s tímto frameworkem dělat. Podívejte se na úplnou dokumentaci a zjistěte, jak vám Bootstrap v kombinaci s výkonnou funkcí 4D tagů může pomoci okořenit návrhy webových aplikací 4D.