Nastavení vzhledu

1. Nastavení vzhledu aplikace

• Nastavení vzhledu určuje typografii, barvy, rozměry a strukturu uživatelského rozhraní NET Genia.
• Nastavení vzhledu se vztahuje na záhlaví, menu, tabulky a formuláře.
• Nastavení vzhledu je definováno na nahlížecí stránce „Vzhled“ v aplikaci/aplikační skupině „Nastavení“.
• Nový vzhled se vytváří pomocí tlačítka „Nový vzhled“.
• Lze definovat více vzhledů, přičemž aktivní může být pouze jeden.
• Výchozí instalace NET Genia obsahuje vzhled s názvem „Výchozí“, který je nastaven jako aktivní.
• Detailní popis jednotlivých částí uživatelského rozhraní je uveden v samostatné příručce Ovládací plocha.

1.1. Základní parametry

• Název – Textové označení záznamu vzhledu
• Uložit jako aktivní vzhled – Volba, která po uložení nastaví vybraný vzhled jako výchozí pro všechny uživatele aplikace
• Název fontu – Název fontu, který je výchozí pro všechny texty napříč celou aplikací (např. Tahoma, Helvetica, Arial)
• Velikost textu – Velikost textu výchozího fontu v bodech
• Barva písma – Barva textu výchozího fontu

1.2. Záhlaví

1.2.1. Logo

• Záhlaví – Logo – Relativní cesta k souboru s logem, které je zobrazováno v záhlaví
• Záhlaví – Obrázek na pozadí – Relativní cesta k obrázku, který tvoří grafické pozadí záhlaví (např. barevný pruh, textura nebo motiv)
• Záhlaví – Obrázek – Nahrání vlastního obrázku ze souboru – po kliknutí na tlačítko „Procházet…“ lze vybrat nový soubor, který bude použitý jako logo nebo obrázek na pozadí v záhlaví

1.2.1.1. Varianty a základní parametry loga

• Aplikace používá dvě varianty loga:
  • logo pro desktop a
  • logo pro mobilní zařízení (obvykle obsahuje ikonku menu – hamburgeru)
• Preferovaný formát loga je vektorové „svg“, alternativně je možné použít i rastrové „png“, „gif“ nebo „jpg“
• Doporučená velikost loga je 190×68px – logo v této velikosti používá i výchozí vzhled NET Genia
  • Šířka loga musí být menší než šířka menu uvedená v poli „Menu – Šířka“ (výchozí hodnota je nastavená na 10+185+10 = 205px)
  • Výška loga musí být menší než výška záhlaví uvedená v poli „Záhlaví – Výška“ (výchozí hodnota je nastavená na 0+68+0+56+7 = 131px)

1.2.1.2. Postup pro vytvoření nového loga nebo úpravu stávajícího

• Vytvoření nového souboru v programu pro úpravu obrázků, nebo zkopírování výchozího loga „Logo-NetGenium.svg“ a „Logo-NetGenium.mobile.svg“ ze složky „Themes“
• Nastavení velikosti plátna na výchozí hodnotu 190×68px, nebo dle vlastních rozměrů v souladu s hodnotami polí „Menu – Šířka“ a „Záhlaví – Výška“
• Vložení vlastního loga, u mobilní varianty zahrnout i ikonu menu (hamburger)
• Kontrola zarovnání loga – logo je v záhlaví vždy zobrazeno v levém horním rohu (0px odleva, 0px odshora)
• Uložení loga na server se soubory NET Genia
  • ručně do složky „Themes“ například pomocí vzdálené plochy, nebo
  • prostřednictvím formuláře „Vzhled“ u ovládacího prvku „Záhlaví – obrázek“ pomocí tlačítka „Procházet“
• Použití jednotného názvu souborů:
  • „Logo-Firma.svg“ pro desktopové logo (výchozí logo má název „Logo-NetGenium.svg“)
  • „Logo-Firma.mobile.svg“ pro mobilní logo (výchozí logo má název „Logo-NetGenium.mobile.svg“)
• Zadání relativní cesty k logu ve formuláři „Vzhled“ do pole „Záhlaví – Logo“
  • Hodnota pole obsahuje cestu k desktopovému logu
  • Logo pro mobilní zařízení dohledáváno automaticky podle přípony „mobile.svg“. Pokud je takový soubor ve složce „Themes“ nalezen, je na mobilním zařízení zobrazeno toto logo.
• Formát „svg“ je vektorový, a tedy pro webovou aplikaci ideální. Jeho úpravy v grafickém editoru ale mohou být velmi komplikované – často dokonce nemožné – typicky při pokusu o úpravu velmi složitého loga s velkým množstvím linií. Proto je v krajním případě možné používat i rastrové formáty „png“, „gif“ nebo „jpg“, přestože nejsou pro web ideální, především kvůli svojí rozmazanosti na mobilním zařízení, nebo u uživatelů na desktopu, kteří používají zoom ve webovém prohlížeči.

1.2.2. Barvy záhlaví

• Záhlaví – Horní lišta – Barva záhlaví horní lišty, ve které se zobrazuje logo a základní informace jako je jméno uživatele nebo datum
• Záhlaví – Dolní lišta – Barva záhlaví dolní lišty, ve které se zobrazují aplikační skupiny
• Záhlaví – Barva písma – Barva textu v záhlaví (jméno uživatele, datum)
• Záhlaví – Lišta aplikačních skupin – Barva pozadí pruhu, ve kterém se zobrazují jednotlivé aplikační skupiny
• Záhlaví – Pozadí vybrané skupiny – Barva zvýraznění pro aktuálně vybranou aplikační skupinu a aplikaci
• Záhlaví – Aplikační skupina – Barva textu neaktivních aplikačních skupin
• Záhlaví – Vybraná skupina – Barva textu pro aktuálně vybranou aplikační skupinu a aplikaci, barva tlačítek na nahlížecích stránkách a editačních formulářích
• Záhlaví – Horizontální linie – Barva oddělovací čáry mezi záhlavím a hlavním oknem aplikace

1.2.3. Rozměry a oddělovače v záhlaví

• Záhlaví – Oddělovač aplikačních skupin – Používá se pouze u starého designu do roku 2016 včetně, a určuje textový řetězec, který odděluje jednotlivé aplikační skupiny
• Záhlaví – Výška – Celková výška záhlaví
  • Hodnota se počítá jako součet dílčích částí záhlaví A + B + C + D + E, kde:
    • A – Horní okraj
    • B – Horní lišta
    • C – Dolní lišta
    • D – Lišta aplikačních skupin
    • E – Dolní okraj
  • Výchozí hodnota je nastavená na 0+68+0+56+7
• Záhlaví – Pravý okraj – Velikost pravého okraje v záhlaví – šířka volného prostoru mezi tlačítky a pravou hranou okna

1.3. Menu (Navigátor)

• Menu – Obrázek – Používá se pouze u starého designu do roku 2016 včetně, a určuje nastavení obrázku zobrazovaného v levém horním rohu menu
• Menu – Pozadí – Barva pozadí navigační oblasti
• Menu – Svislá linie – Používá se pouze u starého designu do roku 2016 včetně, a určuje barvu svislé linie zobrazované na pravé straně navigační oblasti
• Menu – Pozadí titulku – Barva pozadí titulku aplikační skupiny nebo aplikace
• Menu – Titulek – Barva textu titulku aplikační skupiny nebo aplikace
• Menu – Pozadí tabulky – Barva pozadí neoznačených nahlížecích stránek
• Menu – Admin – Text – Barva textu používaného v administrátorském režimu v navigační oblasti
• Menu – Šířka – Celková šířka navigační oblasti
  • Hodnota je vypočítávána ve formátu A + B + C, kde:
    • A – Levý okraj
    • B – Šířka menu
    • C – Pravý okraj
  • Výchozí hodnota je nastavená na 10+185+10

1.4. Nahlížecí tabulka

• Tabulka – Pozadí titulku – Barva pozadí titulku tabulky a barva pozadí detailu záznamu
• Tabulka – Titulek – Barva textu nadpisu v titulku tabulky
• Tabulka – Hlavička – Barva pozadí hlavičky tabulky (řádek s názvy sloupců) a sloupce akcí (sloupec obsahující ikony pro úpravu záznamu)
• Tabulka – Horizontální linie – Barva čáry oddělující hlavičku a datovou část tabulky
• Tabulka – Řádek 1 – Barva pozadí lichých (neoznačených) řádků tabulky
• Tabulka – Řádek 2 - Barva pozadí sudých (neoznačených) řádků tabulky
• Tabulka – Pozadí zápatí – Barva pozadí zápatí, ve kterém se zobrazují navigační prvky stránkování
• Tabulka – Detaily – Barva pozadí označeného řádku tabulky
• Tabulka – Rámeček – Barva obrysové linky kolem tabulky

1.5. Formulář

• Formulář – Levý sloupec – Barva pozadí levého sloupce formuláře, který obsahuje názvy ovládacích prvků
• Formulář – Pozadí titulku – Barva pozadí titulku typu C
• Formulář – Titulek – Barva textu titulku typu C
• Formulář – Okraje – Rozměry okrajů formuláře
  • Hodnota je vypočítávána ve formátu A + B + C + D, kde:
    • A – Horní okraj
    • B – Pravý okraj
    • C – Dolní okraj
    • D – Levý okraj

1.6. Textbox

• TextBox – Výška – Výška textboxu resp. vstupního pole pro zadání textu, čísla, datumu apod.
• TextBox – Radius – Hodnota zaoblení rohů textboxu (vyšší hodnota znamená více zakulacené rohy)

• Výška textboxu se považuje za hlavní rozměr, podle kterého se automaticky odvozují výšky ostatních ovládacích prvků. Například tlačítka mají stejnou výšku jako textbox a víceřádková vstupní pole mají výšku stanovenou jako násobek výšky textboxu a počtu řádků.

1.7. Ajax Picker

• Ajax Picker je tooltip, který se zobrazuje v nahlížecí tabulce po kliknutí na řádku tabulky, nebo v editačním formuláři během přebírání hodnot do polí editačního formuláře.

• Ajax Picker – Pozadí – Barva pozadí tooltipu
• Ajax Picker – Odkazy – Barva textu tooltipu
• Ajax Picker – Rámeček – Barva obrysové linky kolem tooltipu

1.8. Tlačítka „Uložit“, „Smazat“ a „Zpět“

• Tlačítko „Uložit“ – Uložení změn v nastavení záznamu vzhledu
• Tlačítko „Smazat“ – Trvalé odstranění záznamu vzhledu
• Tlačítko „Zpět“ – Ukončení editace záznamu vzhledu bez uložení změn

2. Vizuální uspořádání editačního formuláře

2.1. Pravidla a doporučení pro tvorbu editačních formulářů

• Editační formulář zobrazuje ovládací prvky vertikálně pod sebou
• Každý ovládací prvek ve výchozím nastavení zabírá celou šířku formuláře a je rozdělen do dvou nebo volitelně tří sloupců
  • První sloupec obsahuje název (label) ovládacího prvku
  • Druhý sloupec obsahuje samotný ovládací prvek
  • Volitelný třetí sloupec obsahuje nápovědu k ovládacímu prvku
• Formulář jako celek tak vizuálně působí jako dvousloupcové nebo třísloupcové rozvržení:
  • 1. sloupec: názvy ovládacích prvků
  • 2. sloupec: ovládací prvky
  • 3. sloupec (volitelný): nápovědy
• Doporučená standardní šířka ovládacích prvků v editačním formuláři je 400px

2.1.1. Přichytávání ovládacích prvků

• Přichytávání slouží k umisťování ovládacích prvků vedle sebe a umožňuje vytvářet vícesloupcové rozložení formuláře
• Přichytávání se používá pro ovládací prvky, které lze zobrazit vedle sebe. Nepoužívá se pro prvky, které tvoří samostatné celky nebo komplexní komponenty (např. Tree, Tab, Map)
• Ovládací prvky lze umisťovat vedle sebe do sloupců pomocí volby „Přichytit k předchozímu ovládacímu prvku“ (záložka „Obecné“). Tato volba určuje způsob umístění prvku:
  • Zapnuto – prvek se zobrazí napravo od předchozího prvku
  • Vypnuto – prvek se zobrazí pod předchozím prvkem (výchozí zobrazení dle rozložení formuláře)
• Přichycené ovládací prvky tvoří společně samostatný sloupec editačního formuláře
• Přichycené prvky jsou v administrátorském režimu označeny ikonou šipky směřující vpravo nahoru
• Pokud je prvek přichycen k předchozímu, lze definovat jeho odsazení:
  • Odsazení určuje vodorovnou vzdálenost od předchozího prvku
  • Odsazení se zadává se v pixelech do textového pole „Odsazení“, které je umístěno nalevo vedle pole „Šířka“
• Přichycené ovládací prvky, které tvoří jeden sloupec, by měly mít stejné odsazení

• Doporučení pro návrh rozložení formuláře:
  • Ovládací prvky zarovnávejte tak, aby tvořily co nejméně svislých linií
  • Prvky ve stejném sloupci by měly mít jednotnou šířku
  • Přichycené prvky, které tvoří jeden sloupec, by měly mít stejné odsazení

• Návrh sloupcového rozložení:
  • Nejprve určete šířku ovládacích prvků v prvním sloupci
  • Následně určete celkovou šířku druhého sloupce
• Specifika prvního sloupce:
  • Všechny ovládací prvky začínají na stejné svislé linii
  • Šířka názvů (labelů) se přizpůsobuje automaticky podle nejdelšího textu
• Specifika druhého sloupce (přichycené prvky):
  • Sloupec má pevně dané odsazení
  • V tomto odsazení se zobrazují názvy přichycených prvků
  • Pokud je název delší než odsazení, může dojít k posunu ovládacího prvku doprava
• Celková šířka druhého sloupce se skládá z:
  • Odsazení
  • Šířky přichyceného ovládacího prvku
• Odsazení lze zadat i nepřímo pomocí výpočtu:
  • Zápis ve tvaru „500-” znamená
  • Odsazení = celková šířka sloupce - šířka ovládacího prvku

• Příklady rozložení ovládacích prvků při zachování celkové šířky 400px:
  • Jeden sloupec (bez přichycení)
    • Ovládací prvek – šířka 400px
  • Dva sloupce
    • Princip: součet odsazení a šířky druhého prvku odpovídá celkové šířce 400px
    • První ovládací prvek – šířka 100px
    • Druhý ovládací prvek – odsazení 300px, šířka 100px, zapnuto „Přichytit k předchozímu ovládacímu prvku“
  • Tři sloupce
    • Princip: každý další sloupec respektuje stejnou celkovou šířku 400px
    • První ovládací prvek – šířka 50px
    • Druhý ovládací prvek – odsazení 150px, šířka 50px, přichycený
    • Třetí ovládací prvek – odsazení 150px, šířka 50px, přichycený

2.2. Vzhled nadpisů (Title) a tlačítek (Button)

2.2.1. Nadpis (Title)

• Vzhled a význam nadpisu určuje pole „Typ“ v dialogu nastavení ovládacího prvku „Title“ na záložce „Obecné“:
  • Typ A – Nadpis úrovně „H1”
  • Typ B – Nadpis úrovně „H2” s barevným pozadím převzatým z nastavení vzhledu ze sloupce „Formulář – Levý sloupec”
  • Typ C – Nadpis úrovně „H2” s barevným pozadím převzatým z nastavení vzhledu ze sloupce „Formulář – Pozadí titulku (Title C)”
• Detailní popis ovládacího prvku „Title“ je uveden v samostatných příručkách Editační formulář – Title a Nahlížecí stránka – Title.
• Příklady jednotlivých typů nadpisů:

2.2.2. Tlačítko (Button)

• Vzhled a význam určuje pole „Typ“ v dialogu nastavení ovládacího prvku „Button“ na záložce „Obecné“:
  • Typ A – tlačítko výraznějšího vzhledu používané pro události s větším významem
  • Typ B – tlačítko méně výrazného vzhledu používané pro události s menším významem
• Detailní popis ovládacího prvku Button je uveden v samostatných příručkách Editační formulář – Button a Nahlížecí stránka – Button.
• Příklady jednotlivých typů tlačítek:

2.3. Zobrazení nápovědy

• Nápověda je text zobrazovaný napravo vedle samotného ovládacího prvku v editačním formuláři.
• Nastavení nápovědy se provádí v dialogu nastavení ovládacího prvku na záložce „Nápověda“.
• Radio button nápovědy obsahuje následující dva typy definice nápovědy:
  • Text – text nápovědy definuje ručně zadaný textový řetězec umístěný ve víceřádkovém textovém poli pod radio buttonem
  • Z dotazu – text nápovědy definuje výsledek databázového dotazu, který je vyhodnocen při otevření editačního formuláře
• Nápovědy všech ovládacích prvků začínají na stejné svislé linii v celém editačním formuláři – opticky tvoří samostatný sloupec nápovědy.
• Zobrazení textu nápovědy se liší v případě přichytávání ovládacích prvků.
  • Je-li v nastavení editačního formuláře zaškrtnuto „Automatické seskupování nápovědy přichycených ovládacích prvků”, ve sloupci nápovědy je automaticky generován odrážkový seznam všech ovládacích prvků s nápovědou umístěných ve stejné řádce, jednotlivé položky seznamu lze rozkliknout a zobrazit text nápovědy.
  • Není-li v nastavení editačního formuláře zaškrtnuto „Automatické seskupování nápovědy přichycených ovládacích prvků”, nápovědy ovládacích prvků umístěných nalevo od přichycených ovládacích prvků se nezobrazují.
• Text nápovědy podporuje jednoduché formátování textu pomocí wiki syntaxe:
  • '''Tučný text'''
  • ''Kurzíva''
  • '''''Tučná kurzíva'''''
  • ""Text umístěný ve dvojitých uvozovkách""
  • Seznamy:
    • * Nadpis 1
    • ** Podnadpis 1.1
    • ** Podnadpis 1.2
    • * Nadpis 2
    • * Nadpis 3
    • # Číslovaný nadpis 1
    • ## Číslovaný podnadpis 1.1
    • ## Číslovaný podnadpis 1.2
    • # Číslovaný nadpis 2
    • # Číslovaný nadpis 3
• Text nápovědy se může zobrazovat až po kliknutí na ikonu s otazníkem
  • Ikona je umístěna na běžném místě nápovědy, ale opticky zabírá menší prostor.
  • Ikona otazníku se definuje umístěním tři teček na konec první řádky nápovědy a následným přechodem na novou řádku (enter).
  • Před třemi tečkami se může být uveden zkrácený text nápovědy.
  • Za třemi tečkami následuje text nápovědy včetně přechodů na nové řádky.
  • …
    Text nápovědy zobrazovaný po kliknutí na ikonu otazníčku
  • Zkrácený text nápovědy…
    Text nápovědy zobrazovaný po kliknutí na ikonu otazníčku

• Ve spojení s ikonou otazníčku lze použít variantu, kdy se po kliknutí na ikonu nezobrazuje text nápovědy za třemi tečkami, ale zobrazuje nebo skrývá obsah (například div) umístěný kdekoliv v editačním formuláři.
  • Na nové řádce za třemi tečkami je uvedeno ID tohoto divu pomocí javascriptové funkce „el”.
    • …
      el('D1')
    • Zkrácený text nápovědy…
      el('D1')

• Příklad zobrazení nápovědy po stisknutí ikony otazníku, pokud jsou ovládací prvky ve sloupcích

• Příklad zobrazení nápovědy, pokud ovládací prvek stojí samostatně a v textu nápovědy nejsou uvedené tři tečky

2.4. Serverové funkce pro dodatečné nastavení vzhledu formuláře

• Vzhled každého editačního formuláře může být dodatečně ovlivněn pomocí serverových funkcí.
• Serverové funkce lze aplikovat dvěma způsoby:
  • Vložením do poznámky editačního formuláře – nastavení se vztahuje na celý formulář.
  • Použitím HTML ovládacích prvků – vytvoří se začátek a konec sekce, ve které se definují pravidla vzhledu.
• Detailní popis serverových funkcí je uveden v samostatné příručce Serverové funkce.

Pro dodatečné nastavení vzhledu v konkrétním formuláři je možné použít následující serverové funkce.

2.4.1. COLUMN

• COLUMN(int columnWidth, int labelWidth, int defaultControlWidth)
  • Funkce zahájí blok ovládacích prvků, které jsou umístěny ve sloupcích.
  • Ovládací prvky používají reverzní design – nemají rámeček, mají barevné pozadí, a při focusu zobrazují barevnou lištu pod ovládacím prvkem.
  • Detailní popis funkce COLUMN je uveden v samostatné příručce Serverové funkce.

• /COLUMN
  • Funkce zakončí blok ovládacích prvků definovaných funkcí COLUMN.

• Příklad použití funkce COLUMN

2.4.2. DISABLEPAGETOOLS

• DISABLEPAGETOOLS()
  • Funkce zakáže plovoucí ikony zobrazované v pravém horním rohu nahlížecí stránky nebo editačního formuláře.

• Příklad použití funkce DISABLEPAGETOOLS

2.4.3. LAYOUT

• LAYOUT
  • Funkce nastaví vzhled aktuálního editačního formuláře podle definice uložené v tabulce „slayout”.
  • Detailní popis funkce LAYOUT je uveden v samostatné příručce Serverové funkce.

2.4.4. LEFTALIGNMENT

• LEFTALIGNMENT
  • Funkce zahájí blok ovládacích prvků s názvy zarovnanými doleva.

• /LEFTALIGNMENT
  • Funkce zakončí blok ovládacích prvků definovaných funkcí LEFTALIGNMENT.

• Příklad použití funkce LEFTALIGNMENT

• Příklad použití funkce LEFTALIGNMENT nad grafem

• Příklad zobrazení bez použití funkce LEFTALIGNMENT

2.4.5. NOBACKGROUND

• NOBACKGROUND
  • Funkce zahájí blok ovládacích prvků bez barevného pozadí v levém sloupci s názvem ovládacího prvku.
  • Pokud není blok ukončen funkcí „/NOBACKGROUND”, tlačítka „Uložit”, „Smazat” a „Zpět” jsou ukotvena a zobrazují se na konci editačního formuláře.

• /NOBACKGROUND
  • Funkce zakončí blok ovládacích prvků definovaný funkcí NOBACKGROUND.

• Příklad použití funkce NOBACKGROUND

2.4.6. WEBFORM

• WEBFORM
  • Funkce zahájí blok ovládacích prvků, které nepoužívají barevné pozadí v levém sloupci.
  • Ovládací prvky používají reverzní design – nemají rámeček, mají nastavené barevné pozadí a při focusu zobrazují barevnou lištu pod ovládacím prvkem.
  • Pokud není blok ukončen funkcí „/WEBFORM”, tlačítka „Uložit”, „Smazat” a „Zpět” jsou ukotvena a zobrazují se na konci editačního formuláře.

• /WEBFORM
  • Funkce zakončí blok ovládacích prvků definovaný funkcí WEBFORM.

• Příklad použití funkce WEBFORM