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

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

 

Jak v Nette nastylovat formulář pomocí Latte maker

Google       Google       8. 9. 2014       18 014×

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

Reklama
Reklama
Obrázek ke článku Blockchain & Bitcoin konference

Blockchain & Bitcoin konference

V pátek 19. 5. 2017 se v pražském konferenčním centru Andel’s konala Blockchain & Bitcoin konference. Řada odborníků a podnikatelů v oboru blockchainu a kryptoměn představila možnosti budoucího směřování tohoto oboru. Speakeři většinou rusky mluvící provenience prezentovali řešení svých firem založená na technologii blockchainu.

Obrázek ke článku Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Bezpečnostní tým Cisco Talos odhalil celkem 4 kampaně dosud neobjeveného malwaru, který dostal jméno KONNI. Ten se dokázal úspěšně maskovat od roku 2014. Zpočátku se malware zaměřoval pouze na krádeže citlivých dat. Za 3 roky se ale několikrát vyvinul, přičemž jeho současná verze umožňuje útočníkovi z infikovaného počítače nejenom krást data, ale i mapovat stisky na klávesnici, pořizovat screenshoty obrazovky či v zařízení spustit libovolný kód. Pro odvedení pozornosti oběti zasílali útočníci v příloze také obrázek, zprávu a výhružkách severokorejského režimu či kontakty na členy mezinárodních organizací.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý