Jak v Nette nastylovat formulář pomocí Latte maker

Nette Framework formuláře mají pro Latte šablony definovaná vlastní makra, díky nimž je vykreslování formulářových prvků velmi jednoduché a přímočaré. To ale jen do doby, než chcete např. všem tlačítkům specifikovat vlastní html třídy (např. pro stylování pomocí Bootstrap). Jak na to, si ukážeme v dnešním článku.

Formulář v Nette Frameworku se dá velmi jednoduše vyrenderovat pomocí Latte maker:

<table>
<tr>
	<th>{label username /}</th>
	<td>{input username}</td>
</tr>
<tr>
	<th>{label password/}</th>
	<td>{input password}</td>
</tr>
<tr>
	<th></th>
	<td>{input login}</td>
</tr>
</table>

Pokdu ovšem chceme formulářové prvky stylovat, nezbývá nám, než jim přidat nějakou html třídu. Pokud chceme použít CSS framework, pak dokonce ne kdejakou html třídu, ale jednu velice konkrétní. Předpokládejme, že bychom rádi naši ukázku ostylovali ve frameworku Bootstrap 3.

Bootstrap 3 v dokumentaci říká, že textové input mají mít třídu form-control a tlačítka třídy btn a dále btn-default nebo btn-primary podle toho, jak má být tlačítko výrazné.

Latte makra jsou mocná, a tak první implementace může vypadat následovně:

<table>
<tr>
	<th>{label username /}</th>
	<td>{input username class => form-control}</td>
</tr>
<tr>
	<th>{label password/}</th>
	<td>{input password class => form-control}</td>
</tr>
<tr>
	<th></th>
	<td>{input login class => 'btn btn-primary'}</td>
</tr>
</table>

Šablona nám začíná trochu bublat a nejeden by mohl říci, že začíná být také nepřehledná. A toho se chceme zbavit. Chceme přeci, aby šablona vypadala tak, jako na začátku. Navíc, kdo dělá s Bootstrapem trochu déle, pamatuje si tu náročnou migraci z verze 2 - a opravdu nechceme přepisovat všechny svoje šablony s formuláři, abychom v nich změnili html třídu. Pojďme se tedy podívat, jak na to jít automaticky.

Latte makra se kompilují do PHP kódu, který je posléze spouštěn. Pokud chceme upravit chování Latte maker, musíme si napsat makro nové - v Latte nemůžeme rozšířit jednou již nadefinované makro, lze pouze vytvořit nové makro se stejným názvem, čímž přepíšeme to makro původní.

Při psaní nového formulářového makra musíme pořešit pár dalších záležitostí, jako je párovost/nepárovost {label} makra, přidávání atributů, renderování jen části prvku (tj. např. 1 checkbox z 5), název prvku předaný jako proměnná apod. Když se podíváme na kód, který toto obstarává pro Nette 2.2, je zřejmé, že se nejedná o nic jednoduchého.

Navíc, v době kompilace makra o daném prvku nic nevíme - nevíme, zdali se jedná o tlačítko nebo o radio button. Proto je třeba upravit zkompilovaný kód tak, aby jeho spuštění volalo další funkci, která vždy dynamicky přidá potřebné html třídy.

Rád bych vám představil jednu ze tříd z mé knihovny nextras/forms. Třída BaseInputMacros slouží přesně k tomu, abychom mohli dynamicky upravovat chování Latte maker label a input. Makra, jak již bylo dříve řečeno, můžeme definovat pouze jednou, definujte je tedy v aplikaci pouze jedenkrát.

Třídu BaseInputMacros podědíme a využijeme jejích statických metod label a input, které slouží k úpravě renderování labelu, respektive inputu. Jako parametr metody dostávají Html třídu reprezentující generovaný prvek a také instanci daného formulářového prvku. Naše výše uvedené zadání bychom splnili asi takto:

use Nette\Utils\Html;
use Nette\Forms\Controls\BaseControl;
use Nextras\Forms\Bridges\Latte\MacrosBaseInputMacros;


class MyOwnInputMacros extends BaseInputMacros
{

    public static function input(Html $input, BaseControl $control)
    {
        $name = $input->getName();
        if ($name === 'input' && in_array($input->type, array('text', 'password'))) {
            $input->addClass('form-control');

        } elseif ($name === 'input' && ($input->type === 'submit' || $input->type === 'reset')) {
            $input->addClass('btn btn-primary');
        }

        return $input;
    }

}

Nově vytvořenou třídu definující nové chování Latte maker stačí už jen správně zaregistrovat - ideálně jen tehdy, kdy je potřebujeme, tj. v konkrétním presenteru či komponentě.

Balíček nextras/forms samozřejmě obsahuje připravená makra pro renderování frameworkem Bootstrap 3. Instalaci nextras/forms provedete jednoduše pomocí composeru:

$ composer require nextras/forms

Balíček nextras/forms nabízí ještě množství dalších užitečných komponent, ale o tom třeba někdy příště.