Nette – HTML elementy

Kromě formátování HTML pomocí šablon můžete použít ve frameworku Nette tzv. k HTML elementy. HTML elementy dokáží vygenerovat validní HTML kód. Jejich uplatnění můžete nalézt například v presenteru při výpisu zpráv po zpracování formuláře, nebo například při úpravě políček vstupního formuláře a jeho pokročilejšího vykreslování.

Psaná dokumentace počítá s tím, že rovnou vytváříte konkrétní tag. Funkce lze však použít i na prázdný tag. Použití elementů není až tak jednoduché. Metodou add můžete přidávat další html elementy do stávajícího elementu (jde o vnoření do stávajícího tagu). Metodou insert můžete vložit nějaký HTML element úplně na začátek. Článek nemá nahradit psanou dokumentaci, pouze uvádím pár příkladů pro doplnění na jejich použití...

Html::el()

Klasické použití

use Nette\Utils\Html;

$el = Html::el('h2', 'Zadání');
echo $el;	// vypise <h2>Zadání</h2>

Použití insert()

Zde již není celé HTML obaleno jedním tagem. Část textu chci mít bez HTML značek.

// n = 5
$n = 5;
$elN = Html::el('em', 'n');
$el = Html::el('', ' = '.$n)
	->insert(0, $elN); 	
echo $el;	// vypise n = 5

Použití zanořovaného tagu (tag v tagu)

// Kn = ?
$elKn = Html::el('em', 'K')
	->add(Html::el('sub', 'n'));
$el = Html::el('', ' = ?')
	->insert(0, $elKn);
echo $el;	// vypise K_n = ?

Kombinace HTML elementu s metodou setHTML()

// K0 = 500 Kč
$kapital = 500;
$elK0 = Html::el('em', 'K')
	->add(Html::el('sub', '0'));
$el = Html::el('', ' = ')		
	->add(Html::el('')->setHtml($kapital.'&nbsp;Kč'))
	->insert(0, $elK0);		
echo $el;	// vypise K₀ = 500&nbsp;Kč

Prázdné HTML entity

Toto je možná nejlepší způsob použití v případě, že celý HTML tag nechci mít zabalen v HTML značce. Není nutné zde použít metodu insert().

// tucne obycejne kurzivou
$el = Html::el('', '')
	->add(Html::el('strong', 'tucne'))
	->add(Html::el('', ' obycejne '))
	->add(Html::el('em', 'kurzivou'));
echo $el; // vypise tucne obycejne kurzivou

Prázdné HTML entity se zanořením

Volat metodu Html::el() lze i bez parametrů. Vnořování lze dělat i vrámci předávaného parametru. Při patřičném odsazení je zachována kontrola a přehlednost. Toto mi přijde asi jako nejlepší způsob zápisu. HTML entity lze zapsat v pořadí tak, jak postupně plynou.

// Kn = ?
$el = Html::el()
	->add(Html::el('em', 'K')
		->add(Html::el('sub', 'n')))
	->add(Html::el('', ' = ?'));
echo $el;   // vypise K_n = ?

To samé pomocí setHTML()

Pokud vkládáme komplikovanější HTML, tak HTML elementy mi přijdou poněkud nepřehledné. Je možno HTML text zapsat přímo pomocí setHtml(). Výhoda HTML elementů je, že jsou validní a jsou bezpečné, nelze však do nich vkládat např. značky tvrdé mezery   – text je escapován na bezpečné entity. Proto v tomto případě musíte použít setHtml().

// K0 = 500 Kč
$kapital = 500;
$html = 'K₀ = '.$kapital.'&nbsp;Kč';
$el = Html::el()->setHtml($html);
echo $el;	// vypise K₀ = 500&nbsp;Kč

Pozn.: Pokud v rámci HTML vložíte i nějaké proměnné, nemělo by se zapomínat je pro jistotu prohnat funkcí htmlspecialchars(), aby byla zachována bezpečnost stránek. Při použití šablon či HTML entit je to ošetřeno automaticky. Takže v rámci setHTML() by se mělo dělat spíše jen to, co opravdu nejde udělat jinak. Takže já bych zde správně měla přidat pouze   Kč bez toho, abych tam přidávala proměnnou $kapital.

Proč vytvářet HTML entity?

Příklady předpokládají zobrazení a zpracování formuláře pomocí presenteru.

Úprava textových prvků ve formuláři

Zpracováním HTML docílíte toho, že například v tagu <label> nebude pouze obyčejný text.

$form = new Form();
// i (úroková sazba)
$el = Html::el()
	->add(Html::el('em', 'i'))
	->add(Html::el('', ' (úroková sazba):'));
$form->addText('i', $el, 5, 10) // tag <label> bude obsahovat HTML i (úroková sazba):        
	->setRequired('Musíte zadat úrokovou sazbu.')
	->addRule(Form::FLOAT, 'Úroková sazba musí být desetinné číslo.')                        			
	->addRule(Form::RANGE, 'Úroková sazba musí být kladné číslo.', array(0, null));

Úprava výstupních hlášek formuláře

Například při výpisu výsledků zpracování formuláře metodou flashMessage() se při předání surového HTML zjevně použije funkce htmlspecialchars() a výstup se nezobrazí ve formě, jakou potřebujete.

$this->flashMessage('K₀ = 500&nbsp;Kč', 'success');  // vypise text ve formě escapovanych html znacek

Při předání HTML elementu $el se výstup zobrazí ve formě HTML.

$this->flashMessage($el, 'success'); // vypise text spravne ve formatovani HTML

Další způsob, jak dostat HTML do kódu by určitě byl formou klasických template.