Podpora modularizace prezentace

Podobně jako je možné definovat moduly pro doplňování článků, lze modulárně skládat celou komplikovanou stránku.

Je třeba stanovit všechny možnosti rozložení prvků na stránce. Tyto možnosti je pak třeba popsat ve XML formátu jako Definici rozložení stránky a stanovit odpovídající pravidla prezentační logiky.

Správce obsahu pak bude vytvářet nebo upravovat Osazení stránky řídící se touto definicí.

Následující výklad je postavený na několika typických příkladech; popis všech možností by ho zbytečně komplikoval. Viz podrobnější dokumentaci k definici rozložení a osazení stránky.

Definice rozložení stránky

Vytvoříme definici rozložení stránky tak, aby stránka mohla mít následující alternativní rozložení obsahu:

  • Hlavní obsah uprostřed, první postranní lišta vlevo, druhá vpravo.
  • Hlavní obsah uprostřed, první postranní lišta vpravo, druhá vlevo.
  • Hlavní obsah vlevo, první postranní lišta vpravo, druhá je skrytá.
  • Hlavní obsah vpravo, první postranní lišta vlevo, druhá je skrytá.
  • Hlavní obsah přes celou šířku, obě postranní lišty jsou skryté.

Rozložení předpokládá existenci tří prvků s obsahem, zvolíme pro ně systémové identifikátory takto:

  • Hlavní obsah: identifikátor “main”.
  • První postranní lišta: identifikátor “sidebar1”.
  • Druhá postranní lišta: identifikátor “sidebar2”.

Nyní můžeme přikročit k definování XML dokumentu popisujícího rozložení. Na nejvyšší úrovni bude prvek Alternative sdružující pět prvků Region - každý odpovídá jednomu z alternativních rozložení obsahu popsaných výše.

Pět alternativních rozložení
<?xml version="1.0" encoding="UTF-8"?>
<LayoutDefinition xmlns="http://www.etnetera.cz/jnp/layoutDefinition">
<Alternative id="page_layout_types">
  <title>page_layout_types</title>
  <Region id="alt1">
    <title>alt1</title>
    ...
  </Region>
  <Region id="alt2">
    <title>alt2</title>
    ...
  </Region>
  <Region id="alt3">
    <title>alt3</title>
    ...
  </Region>
  <Region id="alt4">
    <title>alt4</title>
    ...
  </Region>
  <Region id="alt5">
    <title>alt5</title>
    ...
  </Region>
</Alternative>
</LayoutDefinition>

Každý prvek Region obsahuje jeden až tři prvky Placeholder. Řadí se v něm tak, jak budou vizuálně zleva doprava - kvůli prezentaci v editačním rozhraní. (Výsledné pořadí elementů HTML v toku dokumentu může být pochopitelně odlišné.)

Placeholdery
<?xml version="1.0" encoding="UTF-8"?>
<LayoutDefinition xmlns="http://www.etnetera.cz/jnp/layoutDefinition">
<Alternative id="page_layout_types">
  <title>page_layout_types</title>
  <Region id="alt1">
    <title>alt1</title>
    ...
    <orientation>horizontal</orientation>
    <Placeholder id="alt1_sidebar1" dataId="sidebar1">
      <title>sidebar1</title>
      ...
      <width>20</width>
    </Placeholder>
    <Placeholder id="alt1_main" dataId="main">
      <title>main</title>
      ...
      <width>40</width>
    </Placeholder>
    <Placeholder id="alt1_sidebar2" dataId="sidebar2">
      <title>sidebar2</title>
      ...
      <width>20</width>
    </Placeholder>
  </Region>
  <Region id="alt2">
    <title>alt2</title>
    ...
    <orientation>horizontal</orientation>
    <Placeholder id="alt2_sidebar2" dataId="sidebar2">
      <title>sidebar2</title>
      ...
      <width>20</width>
    </Placeholder>
    <Placeholder id="alt2_main" dataId="main">
      <title>main</title>
      ...
      <width>40</width>
    </Placeholder>
    <Placeholder id="alt2_sidebar1" dataId="sidebar1">
      <title>sidebar1</title>
      ...
      <width>20</width>
    </Placeholder>
  </Region>
  <Region id="alt3">
    <title>alt3</title>
    ...
    <orientation>horizontal</orientation>
    <Placeholder id="alt3_main" dataId="main">
      <title>main</title>
      ...
      <width>60</width>
    </Placeholder>
    <Placeholder id="alt3_sidebar1" dataId="sidebar1">
      <title>sidebar1</title>
      ...
      <width>20</width>
    </Placeholder>
  </Region>
  <Region id="alt4">
    <title>alt4</title>
    ...
    <orientation>horizontal</orientation>
    <Placeholder id="alt4_sidebar1" dataId="sidebar1">
      <title>sidebar1</title>
      ...
      <width>20</width>
    </Placeholder>
    <Placeholder id="alt4_main" dataId="main">
      <title>main</title>
      ...
      <width>60</width>
    </Placeholder>
  </Region>
  <Region id="alt5">
    <title>alt5</title>
    ...
    <orientation>horizontal</orientation>
    <Placeholder id="alt5_main" dataId="main">
      <title>main</title>
      ...
      <width>80</width>
    </Placeholder>
  </Region>
</Alternative>
</LayoutDefinition>

Prvek Placeholder má vždy identifikátor zdroje dat “dataId” - všimněte si, že v každém z alternativních rozložení používáme tytéž identifikátory z předem zvolené trojice. Díky tomu pak autor obsahu bude moci přepínat alternativy tak, že se bude měnit jen rozložení obsahu, zdroje obsahu budou stále tytéž.

Prvek Placeholder musí mít také unikátní identifikátor “id” - kvůli požadované jedinečnosti ho doplníme prefixem podle nadřazeného prvku Region.

Pojmenované režimy

Výpis osazení bude předpokládat, že nějakým způsobem přiřadíme každému uzlu v definici režim výpisu.

V našem přikladu budeme vypisovat:

  • každé z alternativních rozložení specifickým způsobem: režimy pojmenujeme “alt1” až “alt5”, tedy shodně s identifikátorem prvku Region – pro usnadnění orientace;
  • shodným způsobem obě postranní lišty, volíme tedy jeden režim “sidebar”;
  • dalším způsobem hlavní obsah, volíme režim “main”.
Režimy
<?xml version="1.0" encoding="UTF-8"?>
<LayoutDefinition xmlns="http://www.etnetera.cz/jnp/layoutDefinition">
<Alternative id="page_layout_types">
  <title>page_layout_types</title>
  <Region id="alt1">
    <title>alt1</title>
    <mode>alt1</mode>
    <orientation>horizontal</orientation>
    <Placeholder id="alt1_sidebar1" dataId="sidebar1">
      <title>sidebar1</title>
      <mode>sidebar</mode>
      <width>20</width>
    </Placeholder>
    <Placeholder id="alt1_main" dataId="main">
      <title>main</title>
      <mode>main</mode>
      <width>40</width>
    </Placeholder>
    <Placeholder id="alt1_sidebar2" dataId="sidebar2">
      <title>sidebar2</title>
      <mode>sidebar</mode>
      <width>20</width>
    </Placeholder>
  </Region>
  <Region id="alt2">
    <title>alt2</title>
    <mode>alt2</mode>
    <Placeholder id="alt2_sidebar2" dataId="sidebar2">
      <title>sidebar2</title>
      <mode>sidebar</mode>
      <width>20</width>
    </Placeholder>
    ...
  </Region>
  ...
</Alternative>
</LayoutDefinition>

Osazení stránky

Osazení stránky bude existovat více. Všechna budou používat společnou definici - tu, kterou jsme právě vytvořili.

Zavedeme konvenci, podle které může být osazení stránky definované pro každou sekci zvlášť, s děděním osazení pro podsekce. Jako výchozí vytvoříme osazení v kořenové sekci prezentace.

Budeme pro ně používat systémový název “arrangement”. V hlavní šabloně proto výpis části stránky reprezentované osazením bude řídit následující kód:

Volání osazení v šabloně
{_primary!arrangement mode="arrangement"}

Toto pravidlo vede standardně k volání formátovače, musíme proto do formátovače přidat pravidlo pro typ Osazení stránky a režim “arrangement”. Toto je triviální:

Pravidlo osazení ve formátovači
{_asset.root}

Volá se výpis kořenového uzlu osazení. Další výpis se bude řídit Pravidly osazení, která definuje příslušná definice rozložení stránky.

Pravidla osazení

Pravidla výpisu jednotlivých uzlů osazení jsou definovaná v samotné definici rozložení stránky; vztahují se na všechna osazení používající tuto definici.

Některá pravidla se budou typicky používat pro všechny definice. Tak je tomu v pravidlech pro kořenový uzel (kde se vypíše jeho obsah) a pro alternativu (kde se vypíše zvolený uzel):

Pravidlo pro kořen
{_node.root}
Pravidlo pro alternativu
{_node.selectedChild}

Pravidla pro regiony jsou nejvariabilnější. V našem případě budeme potřebovat pět pravidel pro jednotlivé pojmenované režimy. V nich potřebujeme zobrazit dětské uzly regionu v odlišném pořadí; toho se nejsnáze dosáhne voláním výpisu konkrétních uzlů podle jejich identifikátoru:

Pravidlo pro režim "alt1"
{_asset.node$alt1_sidebar1}

{_asset.node$alt1_main}

{_asset.node$alt1_sidebar2}

Při výpisu sidebarů použijeme prostou iteraci přes obsah datového zdroje. Počítáme s tím, že v osazení mohou být moduly, proto vypisujeme vlastnost “reference” assetové obálky. Každý prvek vypisujeme v režimu “side”.

Pravidlo pro režim "sidebar"
{while _node.content.asset}
  {_.reference mode="side"}
{else}
  {value(special, _main, _primary) mode="side"}
{/while}

Jako alternativu pro případ, kdy je datový zdroj prázdný, použijeme výpis aktuálního obsahu v režimu “sidebar”.

Při výpisu hlavního obsahu použijeme stejný postup, lišit se budou jen jména režimů:

Pravidlo pro režim "main"
{while _node.content.asset}
  {_.reference mode="detail"}
{else}
  {value(special, _main, _primary) mode="detail"}
{/while}

Použití obsahových assetů, šablon a modulů

Jako prvky vkládané do osazené stránky se mohou používat libovolné assety. Bývá užitečné používat takto šablony a speciálně šablony definující modul. Při výpisu šablony je možné rozlišovat režim, a tedy zobrazit jiný výstup v hlavní části stránky a jiný v postranní liště.

Také je možné (a obyčejně i vhodné) definovat režimy formátovače pro běžné obsahové assety, aby je bylo možné přímo používat v osazení stránky.

Stránky tutoriálu:
Pro vložení příspěvku do diskuse se přihlašte.