Začneme deklarací datového modelu. Na stránce budeme chtít mít:
- jméno autora,
- email,
- foto,
- text, kde se autor může představit.
Do Site.config přidáme následující typ:
...
<Types>
...
<Type name="About">
<SimpleText name="name" />
<SimpleText name="email" />
<Img name="photo">
<Size name="original" />
<Size name="thumb" width="250" height="350" />
</Img>
<TinyText name="text" />
</Type>
...
</Types>
...
Vytvoříme také proměnnou tohoto typu:
...
<Vars>
...
<Var name="about" type="About" />
...
</Vars>
...
Na rozdíl od předchozí kapitoly, kde jsme použili kolekci, nám zde stačí „jen“ proměnná. Blog má jen jednoho autora a tak údaje o něm stačí jednou.
Obrázky
V definici typu jsme kromě již dříve vysvětlených datových typů použili i <Img>. Dokonce jsme do něj zabalili elementy <Size>. Asi celkem očekávaně <Img> slouží k ukládání obrázků. <Size> pak zařídí, že JellyPot automaticky nahraný obrázek přepočítá na požadované velikosti. V našem případě vytvoří velikosti dvě:
- original – jelikož jsme nezadali žádné další parametry, bude obrázek zachován přesně tak, jak ho nahrajeme.
- thumb – obrázek bude zmenšen a v případě potřeby oříznut na rozměr 250×350. Pokud bychom nechtěli obrázek ořezávat, mohli bychom to zapsat:
<Size name="web" width="max 250" height="max 350" />
Tím bychom zařídili, že obrázek bude mít na šířku maximálně 250px a na výšku maximálně 350 – např. by tak mohl mít 200×350 nebo 250×250, podle poměru stran nahrávaného obrázku.
Velikost můžeme definovat jen jednu, dvě, nebo klidně i více – jejich počet není nijak omezen. Pojmenovat je můžeme libovolně, jen přirozeně musí být jméno každé v rámci jednoho <Img> jedinečné.
Kromě typu <Img> JellyPot zná ještě <SimpleImg>. Oproti <Img> podporuje i formáty GIF, PNG a SVG, ale neumožňuje automatickou změnu jejich velikosti. Pouze je dokáže nahrát a zobrazit na stránkách. Neobsahuje tedy žádné elementy <Size> a zapisuje se jako nepárový tag:
V administraci naplňte do představení autora libovolný obsah, abychom v dalším kroku měli s čím pracovat.
.aspx šablona
Vytvoříme stránku /cs/about.aspx a do ní dáme tento kód:
<%@ Page %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<je:stylelink runat="server" href="/assets/css/main.css" />
<title>O autorovi - Můj cvičný blog</title>
</head>
<body>
<header>
<je:a runat="server" class="logo" href="/cs/">Můj blog</je:a>
<nav>
<je:a runat="server" href="/cs/">Homepage</je:a>
<je:a runat="server" href="/cs/about.aspx">O autorovi</je:a>
</nav>
</header>
<main>
<h1>O autorovi</h1>
<p>
<strong>Jméno:</strong>
<je:item runat="server" field="about.name" />
</p>
<p>
<strong>E-mail:</strong>
<je:emaillink runat="server" field="about.email" />
</p>
<je:img runat="server" field="about.photo" size="thumb" />
<je:item runat="server" field="about.text" tag="div" class="about" />
</main>
</body>
</html>
(Na http://localhost/mujblog/cs/about.aspx si můžete prohlédnout výsledek.)
Použili jsme dva nové controly:
<je:img>zařídí zobrazení obrázku. Control<je:img>slouží k výpisu polí typu<Img>i<SimpleImg>. V případě<Img>musíme atributemsizeurčít, kterou velikost obrázku chceme. Pro pole typu<SimpleImg>se atribut neuvádí.<je:emailLink>vytvoří e-mailový odkaz.
U controlu <je:item> pro výpis pole about.text jsme použili atributy tag="div" a class="about". Zdánlivě stejného výsledku bychom dosáhli i tímto kódem:
<div class="about">
<je:item runat="server" field="about.text" />
</div>
Rozdíl nastane, pokud v administraci pole text nebude vyplněno. V prvním případě se nevypíše nic, což je požadované chování; ve druhém by se vypsal prázdný element <div class="about"></div>, neboť žádný control nemůže nijak ovlivnit kód HTML kolem sebe.
Tím máme stránku „O autorovi“ pro zatím hotovou. Ještě se k ní v budoucnu vrátíme v části o zpracování formulářů.