Vytvoření šablony

Tak, když už máme konečně ten teoretický presenterový porod za sebou, vytvoříme si šablonu – to je o mnoho zábavnější. Hurá na to!

Co je to šablona?

Šablona, neboli pohled (anglicky view), jak se jí občas říká, je to písmenko „V“ z MVC. Je to prostě věc, která je zodpovědná za zobrazení dat uživateli.

Pojďme se podívat, jak tyhlety šablony vnímá Nette Framework:

Co je to šablona v Nette Frameworku?

Pro Nette Framework je šablona soubor s názvem XXX.phtml, kde XXX nahradíme názvem akce, ke které šablona patří (s malým počátečním písmenem). Tento soubor se nachází v adresáři /app/templates/YYY/, kde YYY nahradíme názvem presenteru, ke kterému tato šablona patří (zde pro změnu s velkým počátečním písmenem).

Šablona obsahuje informace o tom, co má daná akce daného presenteru vykreslit (vypsat) na obrazovku. A ano, jak správně čekáte, právě v těchto souborech jsou kousky HTML, ze kterých se postupně poskládá celá stránka. V těchto souborech toho ale může být mnohem víc. O tom ale až o několik řádek níže.

Z výše uvedeného vyplývá následující:

Každá šablona vždy patří jednomu konkrétnímu Presenteru – jenom to jí ovšem nestačí a proto patří vždy k jedné konkrétní akci jednoho konkrétního presenteru.

Příklad: Máme náš presenter Todolist, který jsme si vytvořili na minulé stránce. Ten má akci show. Když vytvoříme k této akci šablonu, tak:

• tato šablona bude soubor se jménem show.phtml
• bude se nacházet v adresáři app/templates/Todolist/
• cesta k tomuto souboru bude tedy /app/templates/Todolist/show.phtml

Když už víme co je to ta šablona, můžeme si povědět o tom, co je v ní. Než tak ale učiníme, povíme si ještě o konceptu dvoufázového renderování.

Mohou existovat akce, které nemají své šablony. Tyto akce ale potom buď nemají žádný výstup a nebo využívají šablon jiných akcí. – Tedy ano, lze docílit toho, že budou mít dvě akce stejnou šablonu. – Ale toto neznamená, že by jedna šablona patřila ke dvěma akcím. Naopak jedna akce používá šablonu, která patří k jiné akci (taky v tom nevidíte moc velký rozdíl? Sice není vidět ale je tam, časem se k němu dostaneme).

Místo, kde Nette Framework hledá šablony, lze změnit, stejně jako výše uvedené konvence pro jejich pojmenovávání. Nette Framework dokonce již defaultně zkouší prohledávat několik různých míst. O tom ale detailněji až jindy a jinde. Nette Framework vás nikdy k ničemu nenutí.

Pokud jste zmatení z těch různých termínů „šablona“, „template“ a „pohled“, vězte, že jsou to jen tři různá slova, která znamenají to samé. Když někdo mluví o „šablonách“, „templejtách“ a „pohledech“, vždycky tím myslí tyto soubory s koncovkou .phtml.

Dvoufázové renderování šablon

Nette Framework je (jako každý správný moderní framework) vybaven takovou chytrou věcí, která má šílený název. Jmenuje se to „dvoufázové renderování šablon“ a je to věc, která nám hodně pomůže.

Taky jste si všimli, že se vaše webové aplikace často skládají z nějaké části, která je na všech stránkách stejná? Například nadpis, logo, atd.? Tomu, co zůstává stále stejné, se někdy říká „layout“ webu a tomu, co se mění, se říká „obsah“.

Prakticky každá webová stránka má tyto dvě části (aneb komu by se chtělo HTML meta tagy psát ke každé akci znovu a znovu?).

A k tomu, abychom s nimi mohli efektivně pracovat, nám slouží právě ono „dvoufázové renderování šablon“.

V praxi to znamená to, že Nette Framework má ke každé akci ve skutečnosti hnedle ne jednu, ale dvě šablony:

Šablona akce

Jednu z nich jsme si již představili výše – to je ta, která se jmenuje jako akce s koncovkou .phtml a která se nachází v adresáři, který se jmenuje jako presenter. Je to také místo, kam se ukládá vzhled obsahu stránky a proto s jí říká obsahová šablona, patrial šablona, šablona části, nebo také „šablona akce“, či konkrétněji „šablona akce XXX“, kde XXX je název té akce, ke které patří – protože právě tato šablona je pro každou akci jiná (většinou). My v tomto tutoriálu budeme používat termín „šablona akce XXX“.

Příklad: Naší šabloně, o které jsme mluvili v minulém příkladu – tedy o té, co je uložena v souboru /app/templates/Todolist/show.phtml – budeme říkat „šablona akce show“, nebo „šablona akce show presenteru Todolist“.

Šablona layoutu

Druhou šablonou je ta, ve níž je uložený layout. Tato šablona je často společná pro několik různých akcí, dokonce napříč několika presentery nebo pro celou aplikaci. Této šabloně říkáme, jak nám již nadpis napovídá, „šablona layoutu“.

Šablona layoutu je opět soubor s koncovkou .phtml. Tento je uložen opět v adresáři app/templates/, ale tentokrát není v žádném podadresáři, neboť šablona layoutu nepatří k žádnému konkrétnímu presenteru.

Výchozí soubor šablony layoutu se jmenuje @layout.phtml a cesta k němu je app/templates/@layout.phtml. Název souborů layoutu vždy začíná znakem zavináče („@“).

Ten znak zavináče („@“) na začátku souborů šablon layoutů má své opodstatnění. Tím, že napíšeme před název šablony znak zavináče („@“), znemožníme použití šablony layoutu jako šablony akce. Přesněji, přítomnost znaku zavináče znemožní použití názvu šablony v url, což je zcela nutné pro šablony akcí. Proto jeho uvedením dosáhneme výše popsaného efektu.

V aplikaci může být layoutů i více. Dokonce tomu tak často bývá – nejrozšířenější schéma je jeden layout pro frontend (zobrazení pro klienta) a druhý pro backend (zobrazení pro administraci).

Soubor app/templates/@layout.phtml je v Nette Frameworku nastaven jako výchozí a pokud nám nevadí jej používat, nemusíme nikde nic nastavovat a Nette Framework tento soubor automaticky nalezne a v případě jeho existence ho použije.

Když už víme jak funguje ono dvoufázové renderování šablon, pojď si nějakou tu šablonu vytvořit. Začneme šablonou layoutu.

Vytvoření šablony layoutu

Vytvoření šablony layoutu je úkol velmi jendoduchý, neboť díky skeletonu na nás z distribuce jeden takový layout už kouká. Pojďme si prohlédnout obsah souboru app/templates/@layout.phtml:

{**
 * My Application layout template.
 *
 * @copyright  Copyright (c) 2010 John Doe
 * @package    MyApplication
 *
 * @param string   $basePath web base path
 * @param string   $robots   tell robots how to index the content of a page (optinal)
 * @param array    $flashes  flash messages
 *}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="description" content="Nette Framework web application skeleton">
    <meta name="robots" content="{$robots}" n:ifset="$robots">

    <title>Nette Application Skeleton</title>

    <link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/screen.css" type="text/css">
    <link rel="stylesheet" media="print" href="{$basePath}/css/print.css" type="text/css">
    <link rel="shortcut icon" href="{$basePath}/favicon.ico" type="image/x-icon">
</head>

<body>
    {foreach $flashes as $flash}<div class="flash {$flash->type}">{$flash->message}</div>{/foreach}

    {include #content}
</body>
</html>

Jak je vidět z výpisu výše, v souboru šablony layoutu je HTML kód, a pak nějaké divné značky, které těm z vás, kteří mají zkušenosti z jinými šablonovacími systémy pro PHP, mohou lecos připomínat (pokud znáte Smarty můžete pozorovat jistou podobnost).

Pro nás ostatní prozradím dopředu, že ty divné „tagy“, či spíše příkazy obklopené složenými závorkami (tedy znaky „{“ a „}“) jsou skutečně příkazy pro šablonovací systém Nette Frameworku. Ale o něm až o chloupek níže.

Když už máme hotovou šablonu layoutu, stvoříme ještě šablonu akce.

Vytvoření šablony akce

Dalším krokem bude vytvoření šablony akce show presenteru Todolist, tedy vytvoření souboru /app/templates/Todolist/show.phtml. Vytvořte nyní tento soubor a jako jeho obsah vložte následující:

{block content}

<p>Toto je šablona akce show presenteru Todolist</p>

Soubor uložte a zkuste webovou aplikaci spustit.

Na obrazovce byste nyní měli vidět něco podobného:

…tady bude screenshot…

Funguje? Tak to je dobře! Gratulujeme, právě jste vytvořili svoji první šabonu akce!

Jak to funguje?

Ještě než pokročíme dále, pojďme se podívat jak to vlastně funguje. Někteří z vás si jistě všimli podobnosti mezi {include #content} v šabloně layoutu a {block content} v šabloně akce. To není žádná náhoda. Příkaz {include XXX} vkládá do šablon šablony jiné, místo XXX můžeme uvést buďto relativní, či absolutní cestu k jinému .phtml souboru a nebo pokud místo XXX napíšme něco, co začíná znakem hashe („#“), pak vkládáme „pojmenovaný blok“, který se Nette Framework pokusí najít a vložit.

Detailně si o šablonovacím systému Nette Frameworku povíme v části Hezčí šablony, až si rozebereme model a budeme mít v šablonách co vypisovat.

V tuto chvíli nám stačí vědět, že právě pomocí vkládání bloků je realizováno vkládání šablony akce do šablony layoutu.

Když si otevřete zdrojový kód naší aplikace v prohlížeči, zjistíte, že šablona akce byla skutečně vložena do šablony layoutu místo {include #content}.

Každá akce šablony musí vždy mít na svém začátku {block content}.

Pokud na začátku souboru se šablonou akce zapomenete uvést {block content}, Nette Framework ji nenajde. Proto si při výskytu problémů vždy zkontrolujte, že na začátku všech šablon akce tento příkaz máte.

Závěrem

Tak, teď máme kromě databáze a presenteru hotový i pohled. Sice zatím nic moc nevypisuje, ale to mu nemůžeme mít za zlé, neboť nemá žádná data se kterými by mohl pracovat. Jak to? No protože ještě nemáme model! Ten vytvoříme v další části tutorialu.

Zatím jsme samotným příkazům šablonovacího systému Nette Frameworku pod sukně moc nenahlédli, ale nebojte, dostaneme se k tomu v části Hezčí šablony. Abychom mohli schopnosti šablon náležitě demonstrovat, budeme již potřebovat nějaká data a ta nám musí obstarat model.

Tak, zopakujme si co jsme se naučili, a hurá na model!

Co bychom si měli zapamatovat?

• Šablona, nebo také pohled, je ta část MVC, která se stará JEN A POUZE o zobrazování dat a jejich prezentaci.
• Šablona je v Nette Frameworku soubor s koncovkou .phtml, který obsahuje (nejčastěji) HTML kód a příkazy pro šabonovací systém
• Příkazy pro šabonovací systém jsou klíčová slova obklopená znaky „{“ a „}“, která si detailně rozebereme v části Hezčí šablony
• Šablonovací systém Nette Framewoku podporuje „dvoufázové renderování šablon“
• To znamená, že vždy musíme mít dvě šablony:
  1. tzv. „šablonu layoutu“
  2. a tzv. „šablonu akce“
• Šablona layoutu je soubor, který:
  1. je (nejčastěji) uložen v adresáři app/templates/
  2. se nejčastěji jmenuje @XXX.phtml, kde XXX je název layoutu (výchozí šablona layoutu je v souboru @layout.phtml)
  3. má na začátku názvu znak zavináče („@“)
  4. má někde ve svém kódu {include #content}, tento příkaz se nahradí obsahem šablony akce
• V jedné aplikaci může být (a často je) více layoutů, nejčastěji je jeden pro frontend aplikace (= to, co vidí uživatel) a druhý pro backend aplikace (= to, co vidí administrátor)
• Výchozí layout (ten, který se jmenuje @layout.phtml)
• Šablona layoutu je společná (nejčastěji) pro více akcí
• Šablona layoutu se nejčastěji používá k uložení „layoutu“ webu, tedy zejména HTML hlavičky a patičky, která je společná pro určitou skupinu akcí, jendoho nebo více presenterů
• Skeleton, který nalezeneme v distribuci Nette Frameworku, již obsahuje základní layout, který můžeme přímo použít, nebo z něho vyjít při tvorbě našeho vlastního
• Šablona akce je soubor, který:
  1. je (nejčastěji) uložen v adresáři app/templates/XXX/, kde XXX je název presenteru, k jehož některé akci šablona patří
  2. se nejčastěji jmenuje YYY.phtml, kde YYY je název akce ke které patří (např. pro akci show se soubor jmenuje show.phtml)
  3. je vždy uložen v adresáři, který se jmenuje stejně jako presenter, k jehož některé akci šablona patří
  4. jeho kód začíná na {block content}, díky tomuto příkazu Nette Framework soubor nalezne a může jej vložit na patřičné místo do šablony layoutu
• Šablona akce vždy patří k právě jedné akci
• Mohou existovat akce, které nemají žádnou šablonu (takové akce buďto nemají žádný výstup a po svém skončení návštěvníka přesměrují na jinou akci, nebo používají ke svému výstupu šablonu akce jiné akce)
• Sdílení šablon akcí:
  1. Každá šablona akce patří právě jendé akci, neexistuje šablona akce, která by patřila dvěma akcí
  2. Akce však může ke svému vykreslení využít šablonu akce jiné akce téhož presenteru. Tento trik nelze uplatnit napříč několika presentery.
• Šablona akce se používá pro vykreslení výstupu jednotlivých akcí presenterů, tedy té části obsahu, která je pro každou akci jiná.
• Šablony lze do sebe různě vkládat, s tím opatrně, nenadužívat!
• Pokud k nějaké akci nevytvoříme její šablonu akce, nepřesměrujeme ji na jinou akci, a ani ji nedonutíme použít šablonu akce jiné akce, potom při pokusu o zobrazení této akce zobrazí aplikace vyjímku, že nenalezla šablonu akce pro danou akci. → z toho plyne, že pokud má nějaká akce mít nějaký výstup, pak musí mít šalbonu akce a nebo využívat šablonu akce jiné akce.

---

Tak, a hurá na model!

---

Login to submit a comment