Snad každému tvůrci webových stránek se nejednou stalo, že potřeboval v již hotových stránkách provést nějakou, byť jen malou, úpravu rozvržení stránky (layoutu), která se nedala provést pomocí CSS, ale pouze přímou úpravou HTML kódu. Pokud se jednalo o malý soubor stránek (3 stránky), pak v tom problém určitě neměl, ale představte si, že potřeboval zmodifikovat stránek více. Každou stránku otevřít, modifikovat a opět uložit. Takovéto úpravy nemá žádný kodér rád. Pokud kóderovi takový problém nastal, pak jistě nepoužil ke generování shodných částí webových stránek aplikační rámec Sitemesh.

Jak jsem uvedl výše, Sitemesh je aplikační rámec poskytující prostředky pro snadnější tvorbu a správu layoutů webových stránek. V podstatě jde o aplikaci založenou na javax.servlet.Filter, která dokáže odekorovat jednotlivé HTML stránky a tím docílit jejich jednotný vzhled.

Sitemesh je často srovnáván s Tiles (součást frameworku Jakarta Struts, který řeší podobný problém. Největší rozdíl mezi těmito technologiemi je v tom, že Sitemesh můžeme snadno zaintegrovat do již hotových projektů (díky tomu, že se jedná o filtr), zatímco Tiles ne.

Pokud si chce programátor programující v nějakém skriptovacím jazyce ušetřit práci a mnoho problémů, většinou navrhuje svoje stránky následujícím způsobem. Danou stránku rozdělí do několika logických celků, většinou se jedná o části jako jsou menu, zahlaví a zápatí, která jsou na všech stránkách stejná. Ty pak umístí do jednotivých souborů, které do sebe postupně vkládá. Potom, pokud chce např. udělat změnu v menu, stačí sáhnout do jednoho souboru a provést jen jednu změnu.

Příklad takovéhoto návrhu stránek:

include/menu.jsp, obsahuje HTML kód generující menu include/zahlavi.jsp, obsahuje HTML kód generující záhlaví include/zapati.jsp, obsahuje HTML kód generující zápatí

a do stránky jsou následně includovány:



<html>
  <head>
    <itle>Klasický návrh stránek
  </itle></head>
  <body>
    < %@ include file="include/zahlavi.jsp" %>
    < %@ include file="include/menu.jsp" %>
    <p>Nějaký text</p>
    < %@ include file="include/zapati.jsp" %>
  </body>
</html>

Stejně tak je nutno includovat tyto stránky do všech ostatních stránek dané website. Následná změna je pak velmi nesnadná.

Po aplikaci tohoto způsobu návrhu také vzniká mnoho pomocných souborů, kdežto pomocí Sitemeshe můžeme daný problém vyřešit jednodušeji a efektivněji. Stačí si vytvořit jeden soubor, který bude reprezentovat daný dekorátor a nechat Sitemesh dělat svoji práci.

dekorator.jsp



< %@ taglib uri="https://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<html>
  <head> 

    <decorator :head />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <div id="zahlavi">záhlaví</div>
    <div id="menu">menu</div>

    <decorator :body />

    <div id="zapati">zápatí</div>
  </body>
</html>

Pokud pak namapujeme daný Sitemesh filtr na celý kontext aplikace, budou všechny HTML stránky dekorovány pomocí tohoto dekorátoru. Z každé stránky se vezme HTML kód uzavřený v elementech a , jenž se vloží do daného dekorátotu a vzniklý HTML kód se zobrazí v prohlížeči.

Příklad dekorované stránky



<html>
  <head>
     <title>Sitemesh
  </title></head>
  <body>
    <div id="content">
      <p>Odstavec 1</p>
      <p>Odstavec 2</p>
    </div>
  </body>
</html>

Výsledek je pak zřejmý. Mapování a kompletní příklad si uvedeme v druhém díle tohoto mini seriálu.

Díky tomu, že Sitemesh aplikujeme jako filtr, můžeme jej přidat do již existujících projektů s minimálním úsilím a to nezávisle na technologiích, které dané HTML stránky generují. Pomocí Sitemeshe můžeme odekorovat stránky, které jsou generovány nejen javovýmy technologiemi typu JSP, Servlets, ale i např. CGI, PHP, Perl apod.

To je pro motivaci vše. V následujících pokračováních si ukážeme kompletní příklad aplikace využívající Sitemesh, popíšeme si parametry, na základě kterých se aplikují jednotlivé dekorátory a popíšeme si podporu Sitemeshe pro Freemarker a Jakarta Velocity.