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.
Vybavení pro Laser Game
Spuštěn Filmový magazín

Jak v Nette nastylovat formulář pomocí Latte maker

Google       Google       8. 9. 2014       19 492×

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 NopCommerce – datová vrstva a přístup k datům – 2. díl

NopCommerce – datová vrstva a přístup k datům – 2. díl

V minulém článku jsme si představili platformu NopCommerce z globálního pohledu. V dnešním díle se již zaměříme na konkrétní část systému, a to datovou vrstvu. Představíme si základní stavební kameny systému v podobě doménových objektů. Ukážeme si, jakým způsobem rozšířit doménové objekty a jakým způsobem přistupuje NopCommerce k nastavení systému a modulů.

Obrázek ke článku Seznamte se s open source platformou NopCommerce – 1. díl

Seznamte se s open source platformou NopCommerce – 1. díl

Hledáte e-commerce řešení, které si dokážete přizpůsobit podle vašich požadavků? Chcete čistý a srozumitelný kód, se kterým bude radost pracovat? Prozkoumejte s námi možnosti open source projektu NopCommerce. Seriál programování pod NopCommerce vám pomůže překonat první kroky nejistoty a úspěšně zvládnout vývoj pod platformou NopCommerce.

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