Jak v Nette nastylovat formulář pomocí Latte maker
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Jak v Nette nastylovat formulář pomocí Latte makerJak v Nette nastylovat formulář pomocí Latte maker

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Jak v Nette nastylovat formulář pomocí Latte maker

Google       Google       8. 9. 2014       24 132×

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.

Reklama
Reklama

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ě.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

1 názor  —  1 nový  
Hlasování bylo ukončeno    
8 hlasů
Google
(fotka) Jan ŠkrášekHonza pracuje jako webdeveloper, věnuje se vývoji Nette\Database a Nextras komponentám. Mnoho času věnuje komunitnímu portálu signály.cz. Honza je taky fanouškem XML technologií.
Web     Twitter    

Nové články

Obrázek ke článku Využití .htaccess na malém webu

Využití .htaccess na malém webu

V dnešní době existuje spoustu cms, které mnohdy ale vůbec nepotřebujeme a stačila by nám pouze základní funkčnost k úpravě url, přesměrování. K tomuto účelu je ideální .htaccess soubor, který nám se všemi těmato úpravami umí pomoct.

Reklama
Reklama
Obrázek ke článku Češi tlačí obce do otevřené komunikace – Mobilní Rozhlas si loni pořídilo dalších 171 měst a obcí

Češi tlačí obce do otevřené komunikace – Mobilní Rozhlas si loni pořídilo dalších 171 měst a obcí

Obyvatelé Česka se mnohem více zapojují do veřejného dění. Umožňují jim to přímo samosprávy, které stále častěji využívají nástroje takzvané chytré komunikace a participace. Dokládají to data za rok 2019 ekosystému Mobilní Rozhlas, lídra v oblasti chytré obecní komunikace. Zapojilo se do něj 171 nových měst a obcí, zaregistrovalo celkem 100 tisíc občanů a místní samosprávy jeho prostřednictvím rozeslaly třikrát více adresných zpráv než v roce 2018

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý