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

 
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
Laser Game Brno

Jak v Nette nastylovat formulář pomocí Latte maker

Google       Google       8. 9. 2014       20 965×

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 SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

Firmy chrání svá citlivá data často nedostatečně. Podle průzkumu společnosti SODAT se v minulém roce setkalo až 80 % z nich s bezpečnostním incidentem ztráty nebo úniku dat. Jedna z pilotních firem, která testovala novou verzi řešení SODAT Protection & Analytics 2.0pro bezpečností analýzu a monitoring dat díky novince zjistila, kdo z disku smazal důležité výkresy a mohla na incident včas reagovat.

Reklama
Reklama
Obrázek ke článku Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Letní měsíce jsou pro většinu zaměstnanců spojené s každoroční dovolenou. Z údajů Českého statistického úřadu vyplývá, že v roce 2017 podnikli Češi přes 13 milionů delších cest (tzn. s více než čtyřmi noclehy). Přitom právě na období července, srpna a září připadá více než 7,5 milionů z nich. Nicméně tradiční představu o dovolené jako o čase, kdy má práci na starost někdo jiný, Češi boří. 

Obrázek ke článku 10 SEO mýtů, které už nemusíte v roce 2018 řešit

10 SEO mýtů, které už nemusíte v roce 2018 řešit

„Kolik má být na stránce klíčových slov?“, „Nemáš vyplněný meta tag keywords, to nebude fungovat.“, „Katalogy jsou mrtvý“. Také jste už slyšeli některé z těchto otázek? Pojďme si na ně konečně jednou provždy odpovědět.

Obrázek ke článku Trend Micro pomohlo usvědčit viníky v mezinárodním případu Scan4You

Trend Micro pomohlo usvědčit viníky v mezinárodním případu Scan4You

Společnost Trend Micro Incorporated, globální lídr v oblasti kybernetické bezpečnosti, oznámila podrobnosti o své úzké spolupráci s FBI v případu Scan4You. Trend Micro se podílelo na identifikaci osob, které byly spojeny se službou Scan4You Counter Antivirus, což vedlo k jejich odsouzení.

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