Případová studie: Verzovaná dokumentace - Stránka s články

Obrazovky, které budeme potřebovat pro zobrazení dat a které jsme si popsali v předchozím článku můžeme v ObjectGears realizovat pomocí jednoho objektu Stránka.

Nejprve navrhneme schéma stránky - rozložení jejích hlavních částí. Pro naše učely nám nebude stačit některé z předdefinovaných rozložení. Místo toho si navrhneme své vlastní schéma (viz Detail stránky, záložka Schéma stránky).

<div class="verdoc">
<div class="head noprint">
  <div class="title"><a href="./vcd"><img src="./images/system/miniLogo.png" align="center" alt="ObjectGears" /> {{Text:PageTitle}}</a></div>
  <div class="r">
     {{100:HeadRight}}
  </div>
  <div class="r" style="padding-top: 19px">
   {{TextBox:SearchTb}}
    <a href="https://www.linkedin.com/company/objectgears" title="LinkedIn" target="_blank" class="nsp"><img src="modules/OG.VersionDoc/linkedin.png" /></a>
    <a href="https://twitter.com/ObjectGears" title="Twitter" target="_blank" class="nsp"><img src="modules/OG.VersionDoc/twitter.png" /></a>
    <a href="https://www.facebook.com/objectgears" title="Facebook" target="_blank" class="nsp"><img src="modules/OG.VersionDoc/facebook.png" /></a><br/>
  </div>
  <div class="clear"></div>
  {{Text:TopicMenu}}
</div>

<table class="tabcontent">
<tr>
  <td class="tree noprint">
      <div class="version">
         {{Text:VersionLabel}}: {{DropDownList:Version}}
      </div>
      {{Text:Menu}}
    {{10:Tree}}
  </td>
  <td class="content">
    {{0:Content}}
  </td>
</tr>
</table>

<div class="start">
{{Text:SearchTitle}}
 {{20:Find}}
  {{Text:StartArticle}}
</div>
 {{30:Footer}}
</div>

Výsledné rozložení je následující. (Poznámka: Obrázek níže již obsahuje i webparty, které jsme do zón stránky vložili).

Níže si ukážeme několik příkladů, kterými vyřešíme další požadavky uvedené v předchozím článku.

Zobrazení článku na stránce

Pro zobrazení informací o vyhledaných článcích, menu a detailu článku používáme databázové procedury a jeden dotaz. Dotaz nám jednoduše spojí všechny informace o článku do jednoho záznamu. Ve stránce je pak s daty jednudušší práce a veškerá složitost zůstane ve zmíněném dotazu.

Poté, co vyhledáme články, vypíšeme je skriptem na stránku. Z důvodu velikosti skriptu jej zde neuvádíme, ale naleznete jej v modelu Verzované dokumentace.

Detail článku vykresluje webpart skript s kódem text. Stránka jen vyhledá požadovaný článek a předá jej webpartu.

Ukázka předání webpartu:

OGWebParts['text'].SetData('article', article);
OGWebParts['text'].SetData('at', at);
OGWebParts['text'].SetData('version', v);

Čtení článku ve webpartu - stránka předává webpartu více informací, aby si je nemusel znova načítat.

//prevzit clanek a text, ktery se nacetl ve strance
var article = OGWebPart.GetData('article');
var at = OGWebPart.GetData('at');
var orig_version = OGWebPart.GetData('version');

Zobrazení levého menu s hierarchií článků

V zobrazení levého menu chceme zobrazit vybraný článek, všechny jeho nadřízené články až k nejvyššímu, dále články na stejné úrovni jako je zobrazovaný článek a pak všechny články přímo pod vybraným článkem. Z důvodu optimalizace výkonu veškeré vyhledávání provedeme na úrovni databáze. Ta je na toto plně vybavena a z databáze se budou přesouvat na web-aplikační server jen ta data, která budeme opravdu zobrazovat.

Vložení zajišťuje na stránce funkce SetMenu a v databázi uložená procedura VerDoc_GetMenu.

Editační tlačítka

Pro pohodlnou editaci článku jsou na stránce čtyři tlačítka. Ta jsou přístupná jen pro editora. To je zajištěno následujícím skriptem.

//editační tlačítka jen pro přihlášeného uživatele
if (OG.Person.IsUserInRoleByCode('vcd_editor'))
{
   ...vložení tlačítek do stránky
}