HTML elementy

Třída Nette\Utils\Html je pomocník pro generování HTML kódu.

use Nette\Utils\Html;

$el = Html::el('img'); // vytvoří element <img>
$el->src = 'image.jpg'; // nastaví atribut src
echo $el; // vypíše <img src="image.jpg" />

echo $el->getName(); // vrací 'img', název elementu
echo $el->isEmpty(); // vrací TRUE, jelikož <img> je prázdný element

Měnit a číst atributy HTML elementu je možné přes proměnné objektu. Zrušit je můžeme funkcí unset nebo přiřazením hodnoty NULL:

echo $el->src; // vypíše 'image.jpg'
unset($el->src); // nebo $el->src = NULL; - zruší atribut src

Téhož lze dosáhnout i voláním metod. V takovém případě lze využít zřetězených volání (fluent interfaces):

// <img src="image.jpg" alt="photo" />
echo Html::el('img')->src('image.jpg')->alt('photo');

Atributy lze také nastavit hromadně, dokonce přímo při vytváření elementu těmito způsoby:

$el = Html::el('input type=text class="red important"');

$el = Html::el('input', array(
    'type' => 'text',
    'class' => array('red', 'important'),
));

$el->addAttributes(array( // hromadné nastavení dalších atributů
    'value' => $val,
    'required' => TRUE,
));

Důležitým rysem je automatická ochrana proti Cross Site Scriptingu (XSS):

echo Html::el('input')->value('<script>alert()</script>');
// <input value="&lt;script&gt;alert()&lt;/script&gt;" />

Hodnotou atributu nemusí být jen řetězec, lze používat i logické hodnoty nebo pole.

$checkbox = Html::el('input')->type('checkbox');
$checkbox->checked = TRUE; // <input type="checkbox" checked="checked" />
$checkbox->checked = FALSE; // <input type="checkbox" />

// použití pole
$el->class[] = $active ? 'active' : NULL; // NULL se ignoruje
$el->class[] = 'top';
// alternativně $el->class['top'] = TRUE; nebo $el->class('top', TRUE);

$el->style['color'] = 'green'; // obdobně $el->style('color', 'green');
$el->style['display'] = 'block';

echo $el;
// <input class="active top" style="color: green; display: block" />

Metoda href() umí usnadnit skládání URL:

echo Html::el('a')->href('index.php', array(
    'id' => 10,
    'lang' => 'en',
));
// <a href="index.php?id=10&amp;lang=en"></a>

V HTML 5 lze používat tzv. datové atributy pro uživatelská data:

<img src="img.jpg" data-max-size="500x300" />

Obvykle pak hodnoty těchto atributů využívá JavaScript. A fungují ve všech prohlížečích.

Třída Html disponuje přímou podporou pro datové atributy z HTML5:

$el = Html::el('img');
$el->data['max-size'] = '500x300';
// nebo
$el->data('max-size', '500x300');

Obsah elementů

Textový obsah elementu můžeme nastavit metodami setText() či setHtml() nebo přímo při vytváření elementu:

echo Html::el('a')->href('#')->setText('link<br>');
// <a href="#">link&lt;br&gt;</a>

echo Html::el('a')->href('#')->setHtml('link<br>');
// <a href="#">link<br></a>

echo Html::el('strong', 'Nette');
// <strong>Nette</strong> odpovídá použití setText()

Získat textový obsah elementu lze metodami getText() či getHtml().

Obsahem však mohou být i další elementy:

$el = Html::el('div');

// vložíme do <div> nový element <strong>
$strong = $el->create('strong', 'Nette');
// nebo $el->create('strong')->setText('Nette')

// vložíme do <div> hotový Html object
$el->add( Html::el('br') ); // $el[] = Html::el('br');

echo $el; // <div><strong>Nette</strong><br /></div>

// vložíme do <div> textový uzel
$el->add('<i>Yes!</i>'); // na rozdíl od setHtml() nesmaže obsah elementu

$el->insert(0, Html::el('span')); // vloží prvek na první pozici

Všechny prvky odstraní metoda removeChildren().

S dětmi lze pracovat stejně, jako by se jednalo o pole. Včetně iterace:

echo $el[2]; // <br />

foreach ($el as $child) { ... }

echo count($el); // 4 - počet dětí

Generování HTML výstupu

Nejjednodušším způsobem, jak vypsat HTML element, je použít echo nebo objekt přetypovat na řetězec operátorem (string). Lze také samostatně vypsat otevírací nebo uzavírací značky:

$el = Html::el('div class=header');

echo $el; // <div class="header"></div>
$s = (string) $el; // vloží do $s řetězec '<div class="header"></div>'
echo $el->startTag(); // <div class="header">
echo $el->endTag(); // </div>

Výstupní formát určuje statická proměnná Html::$xhtml. Výchozím nastavením je TRUE, tj. XHTML výstup.

$el = Html::el('input')->disabled(TRUE);
echo $el; // <input disabled="disabled" />
Html::$xhtml = FALSE;
echo $el; // <input disabled>