Po delší odmlce je tu další díl o komponentovém frameworku Prado. V minulém díle jsme se seznámili se základním konceptem a také s generátorem kostry aplikace. V tomto díle si probereme fungování šablon a přidávání komponent do stránky.

...

Získání informací

Prado šablony vypadají podobně jako ASP.NET šablony, tedy je to mix XHTML a vlastních XML značek začínajících na com: (komponenty), popřípadě prop: (vlastnosti). Seznam komponent je možno nalézt v Quick Start příručce v sekci Control Reference. Na začátek jsou nejdůležitější sekce Standard controls, kde se nalézají základní komponenty, které budete využívat dnes a denně a dále je důležitá sekce Validation Controls a Data Controls. První z nich popisuje nevizuální komponenty, které lze využít pro validaci formulářů a druhá popisuje složené komponenty, které renderují tabulková data.

Z počátku, pokud se Prado učíme, narážíme na problém, že víme co chceme, ale nevíme jak na to. Můj postup byl následující. Vybral jsem si komponenty, které jsem chtěl použít, dle krátkého popisu. Pro každou komponentu (např. TDatePicker) je vytvořena detailní stránka se základním popisem, co komponenta umí a jakými základními vlastnostmi jde nastavit, nicméně nejsou zmíněny zdaleka všechny. Na stránce s popisem jsou minimálně na konci také odkazy na ukázky a zdrojové kódy ukázek, které většinou pomůžou rozšířit naše obzory v tom, jak komponentu použít i jaké další vlastnoti lze použít.

Ani to nemusí stačit a pak nám nezbývá než se podívat do vývojářské dokumentace. Odkaz na API Manuál daného widgetu naleznete vždy hned pod jeho názvem na stránce s jeho popisem. Na API stránce nalezneme vývojářský popis, seznam tříd v dědící hiearchii a dále seznam vlastností a metod. Pokud ani poté není jasné jak komponentu použít, je vhodné navštívit fórum a zde zkusit vyhledávání, většinou váš problém řešil už někdo jiný a doberete se uspokojivého výsledku.

Praktická ukázka

Již z minule je v aplikaci jedna výchozí šablona Home.page. Budeme provádět pokusy přímo v ní. Stránka obsahuje jeden nadpis a nic víc. Zkusme přidat komponentu. Výše jsem odkazoval na DatePicker, přidáme tedy jej:


<com:TDatePicker />


Pokud se na stránku podíváme, uvidíme jeden textový input. Když do něj klikneme myší, zobrazí se vlastní element pro výběr data. Každá komponenta v Pradu má vlastnost ID, pomocí které lze komponentu na stránce jednoduše najít a pracovat s ní v PHP kódu, je tedy vhodné veškeré komponenty, ke kterým budeme v PHP přistupovat jedinečně označit.

Z příkladů a popisu DatePickeru jsme si zjistili, že má vlastnost Mode, která určuje, zda se bude vlastní kalendář zobrazovat po kliknutí do inputu (Basic), nebo se bude zobrazovat tlačítko (Button), nebo obrázek (ImageButton). Další zajímavou vlastností je InputMode, která určuje, zda se bude zobrazovat textový input pro zadání data (TextBox), nebo bude výsledné datum složené ze třech selectů (DropDownList). Zkuste experimentovat:


<com:TDatePicker ID="myCalendar" InputMode="DropDownList" Mode="Button" />


Další zajímavou vlastnosti je DateFormat pro zadání tvaru výsledného datumu:


<com:TDatePicker ID="myCalendar" InputMode="DropDownList" Mode="Button" DateFormat="dd/MMMM/yyyy" />


Pokud do stránky přidáme tlačítko:


<com:TButton ID="myButton" Text="Uložit" OnClick="save"/>


můžeme definovat vlastností OnClick volanou metodu na straně serveru. Jestliže si ještě v šabloně definujeme prostor pro vypsání textu:


<com:TLiteral ID="myOutput" />


pak můžeme začít tvořit náš první PHP kód obsluhující tuto stránku.

PHP kód

Každá stránka v Pradu má obslužnou stránku stejného názvu jako šablona. Tedy pro naší stránku Home.page vytvoříme obslužný skript s názvem Home.php a uložíme do stejného adresáře jako je šablona, tedy do protected/pages. Minimální kód musí vypadat takto:


<?php
class Home extends TPage {
}
?>


Třída obsluhující naší stránku se musí jmenovat stejně jako šablona. Dále musí dědit z obecné třídy TPage. Pokud se na naši stránku znovu podíváme, nic se nezmění.

Po kliknutí na tlačítko na nás vyskočí PHP chyba, která nás upozorňuje na neexistenci metody save. Tak si ji vytvoříme. Jak jsem se zmínil výše, Prado pro adresování elementů na stránce využívá jejich IDčka, můžeme tedy psát:


<?php
class Home extends TPage {
  public function save($param, $sender) {
    $this->myOutput->Text = $this->myCalendar->Value;
  }
}
?>


Co si z tohoto kódu máte odnést? Za prvé, každé metodě, která je událostně volaná, jsou předávané dva parametry. První je objekt s parametry volání, v tomto případě nezajímavé, druhým je objekt odesílatele, tedy toho objektu, na kterém byla událost vyvolána. Přes parametr odesílatele lze zjistit na jaké tlačítko bylo např. kliknuto. Nicméně ani tento atribut není často využíván.

Druhým zajímavým poznatkem je, že veškeré veřejné vlastnosti jsou dostupné jako Property v .NETu. Tedy žádné volání metod. Tato funkcionalita je zabezpečena samozřejmě velice jednoduše pomocí definování __get a __set magických metod.

Poslední zajímavou věcí je, že k prvkům na stránce jde přistupovat přímo jejich odkázáním v objektů stránky jejich IDčkem.

A co vlastně kód dělá? Jednoduše do našeho objektu TLiteral uloží obsah TDatePickeru.

Na příště se seznámíme s konfigurací databáze a jejich použitím.