V předchozích kapitolách jsme popsali vytvoření dokumentace od definice požadavků, přes návrh řešení, stránku pro uživatele, stránku pro editora článků, až po migraci z předchozí verze dokumentace. V tomto článku se podíváme, jak v ObjectGears jednoduše vylepšit vzhled stránek, s nimiž se potkává uživatel.
ObjectGears je rozsáhlý systém, který umožňuje vytvořit řešení bez znalosti programování. K tomu používá množství standardizovaných stránek určených pro tvůrce řešení a správce ObjectGears. Stránky, s nimiž se potkává uživatel, však stojí za to pozvednout, přizpůsobit uživateli a reflektovat styl vaší společnosti nebo projektu (tzv. Corporate identity). Takto může být upravena i dokumentace, kterou si právě prohlížíte, nebo jakékoli vaše řešení, které se rozhodnete v ObjectGears implementovat.
Oproti původním obrazovkám uvedeným např. v článku Funkcionalita pro editora, má stránka na obrázku niže celkově lepší design a obsahuje sbalitelné sekce se strukturou hiererachie článků a strukturou článku (nadpisy).
Jak pro vylepšení vzhledu postupovat? Vše provedete v několika krocích:
- Oslovení HTML designéra
- Probrání vašich potřeb a představ
- Otestování stránky dodané HTML designérem
- Implementace v ObjectGears
Oslovení HTML designéra
Pokud máte HTML designéra v týmu nebo již spolupracujete s firmou, která pro vás vytváří např. webové stránky a jste s nimi spokojeni, máte již vybráno. Pokud se chcete podívat po někom novém, existuje dnes mnoho firem i jednotlivců, kteří se designem a kódováním stránek zabývají, Nechte si ukázat jejich předchozí práce, ať víte, zda podobný styl by vyhovoval i vám.
My jsme nový vzhled dokumentace tvořili s designérem, s kterým jsme v minulosti již spolupracovali.
Specifikace potřeb a představ
Designerovi jsme sdělili naše představy a po doplnění věcí, které navrhl designér, jsme dostali následující seznam:
- celkové pozvednutí designu
- přidání panelu obsahujícího strukturu článku pro snadnou orientaci uživatele
- panely jsou sbalitelné, aby uživatel mohl maximalizovat obrazovku pro čtení článku
- stránka je plně responzivní
Otestování stránek dodaných HTML designérem
Vývojář vytvořil mock-up HTML stránky obsahující Lorem ipsum text, které jsme otestovali na všech významějších prohlížečích a různých velikostech obrazovek. Čtenář by měl mít adekvátní komfort, ať už používá mobilní telefon, tablet, notebook nebo velkou obrazovku. V této fázi je třeba si dát pozor např. na:
- zalamování textů v panelech, pokud jejich délka přesáhne šířku panelu
- správné poskládání všech částí stránky na různých zařízeních
- správnou funkci tlačítek pro sbalení panelů
- otestování všech funkcionalit na všech prohlížečích po opravě chyb, aby byla odhalena eventuální nová chyba zavlečená při opravě nějaké předchozí chyby
Implementace v ObjectGears
Test stránek jsme prováděli v prostředí poskytnutém vývojářem. Nyní je třeba je implementovat v instanci ObjectGears. To můžete provést v separátním testovacím prostředí. Pokud jde však pouze o změnu vzhledu, je možné vytvořit novou stránku a na ní pouze nově zobrazovat již existující informace. Touto cestou jsme šli i my.
Nová stránka a přesměrování
Novou stránku vytvoříte v menu Správa / Modely / Stránky.
Stávající dokumentace s původním vzhledem běžela na adrese https://doc.objectgears.cz/vcd. Novou stránku musíme odlišit a tak zvolíme např. https://doc.objectgears.cz/vcd2.
Uživatele přistupujícího na tyto adresy musíme přesměrovat na příslušné stránky ObjectGears. Nastavení je ve skriptu v aplikační události „Po startu aplikace“ (Menu Správa / Systém / Aplikační události).
Následující skript nastavuje jeden url redirect na konkrétní článek pro původní dokumentaci.
var m = OG.Model.GetByCode('vcd');
var cp = OG.ContentPage.GetAll().GetByCode(m.Id, 'article');
var r = OGRoute.Create('vcd_an_v', 'vcd/{lang}/an/{an}/v/{version}', '~/WebContentpage.aspx');
r.AddPar( 'id', cp.Id.ToString());
r.AddPar( 'version', '');
r.AddPar( 'lang', '');
r.Use();
Pro naši novou stránku jsme si tyto řádky zkopírovali, změnili jsme kód stránky z article na article2, url z vcd na vcd2 a přejmenovali proměnné. Takto rozšířený skript jsme přidali na konec původního skriptu a provedli restart aplikace. V příkladu níže je ukázka jen jednoho url redirectu. V ostrém skriptu je redirectů nastavených devět.
var cp2 = OG.ContentPage.GetAll().GetByCode(m.Id, 'article2');
var r2 = OGRoute.Create('vcd_an_v2', 'vcd2/{lang}/an/{an}/v/{version}', '~/WebContentpage.aspx');
r2.AddPar( 'id', cp2.Id.ToString());
r2.AddPar( 'version', '');
r2.AddPar( 'lang', '');
r2.Use();
Úpravy ve stránce se dají rozdělit na dvě části. Úpravy ve Schématu stránky a úpravy ve Skriptech. Jde o nastavení, která vidíte v detailu ObjectGears stránky na zvláštních záložkách.
Úpravy Schématu stránky
Do této záložky vložíme text HTML šablony, kterou dodal HTML designér, přesněji to, co je obsaženo v elementu BODY. Na místa, která chceme plnit skriptem (např. tam kde bude menu, obsah stránky, ikony pro lokalizaci atd.) vložíme kód dle následujícího vzoru:
{{Text:Language}}
První část daného příkazu (Text:) je neměnná, druhou (Language) obměníme podle toho, kolik takovýchto variabilních textů ve stránce budeme mít. Tato druhá část totiž slouží jako identifikátor. Pro každé vložení proto musíme použít jiný název. Ve skriptu pak na toto místo vložíme příslušný obsah dle následujícího příkladu:
OGControls['Language'].Text = '…náš obsah…';
Obsah, který chceme nastavovat pomocí skriptu, musíme ze schématu odebrat a ponechat tam místo něj jen {{Text:…}}, jinak by se nám na stránce zobrazoval původní obsah Lorem ipsum od designéra i nový obsah vkládaný skriptem. Při odebírání tohoto obsahu musíme dát pozor, abychom neodebrali něco navíc nebo naopak nezapomněli odebrat ukončovací element. Stránka by se pak mohla špatně zobrazovat.
Úpravy Skriptů stránky
Skript ve stránce má za cíl zjistit, co se má uživateli zobrazit – hledání, výsledky hledání, seznam tagů nebo konkrétní článek. Na základě toho zobrazí příslušnou část stránky. S naší změnou vzhledu zůstane podstatná část skriptu stejná. Upravit bude potřeba jen části, které generují postranní navigační menu, hlavní vodorovné menu, obsah článku… Tady je již potřeba trochu kódovat, protože úprava závisí na tom, jak designér navrhl vlastní HTML stránky.
Lokalizace ve stránce
V případě, že chcete mít na stránce texty, které mají být lokalizovány podle vybraného jazyka, pak použijte kód dle následujícího příkladu:
var s = OG.GetLocText('en-US::How can we help you?~de-DE::Wie können wir Ihnen helfen?~cs-CZ::Jak vám můžeme pomoci?');
OGControls['LocHowHelp'].Text = s;
Funkce OG.GetLocText vybere z předaného textu jen text podle aktuálně nastaveného jazyka uživatele.
Texty nemusíte mít přímo ve skriptu stránky, ale můžete použít i objekt Hlášení:
OG.MessageLoc.GetText(…)
Po důkladném otestování můžeme přejít z původního vzhledu na nový a zobrazovat ho i externím uživatelům, pracujícím s url obsahujícím .../vcd (ne .../vcd2). To provedeme překopírováním obsahu záložek Schéma a Skript ze stránky nové dokumentace do stránky původní dokumentace.