Nastavení vzhledu

1. Nastavení vzhledu aplikace

• Nastavení vzhledu umožňuje definovat typografii, barvy, rozměry a strukturu uživatelského rozhraní NET Genia – záhlaví, menu, tabulky a formuláře.
• Detailní popis jednotlivých částí uživatelského rozhraní je uveden v samostatné příručce „Ovládací plocha“.
• Nastavení vzhledu se provádí na nahlížecí stránce „Vzhled“ v aplikaci/aplikační skupině „Nastavení“. Ta obsahuje tabulku se seznamem definovaných vzhledů. Výchozí instalace NET Genia obsahuje vzhled s názvem „Výchozí“, který je označený jako aktivní. Pomocí tlačítka „Nový vzhled“ je možné vytvořit libovolné množství dalších vzhledů, jako aktivní ale může být označený pouze jeden.

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 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“ uloženého ve složce „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 nezapomenout na ikonu menu (hamburger)
• Kontrola zarovnání loga – v záhlaví NET Genia se logo vždy zobrazuje v levém horním rohu 0px odleva a 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“
• Doporučený systém nazývání souborů s logy je:
  • „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“)
• Uložení relativní cesty k logu ve formuláři „Vzhled“ do pole „Záhlaví – Logo“
  • Hodnota tohoto pole musí obsahovat cestu k desktopovému logu
  • Logo určené pro mobilní zařízení NET Genium dohledává automaticky podle přípony „mobile.svg“. Pokud takový soubor ve složce „Themes“ najde, zobrazí na mobilním zařízení právě 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)

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, DataGrid, 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 a nastavuje se v dialogu nastavení ovládacího prvku na záložce „Nápověda“.
• Nápovědy všech ovládacích prvků začínají na stejné svislé linii v celém editačním formuláři – opticky jsou umístěny do samostatného sloupce nápovědy.
• Zobrazování 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ů”, bude ve sloupci s nápovědou automaticky vygenerován odrážkový seznam všech ovládacích prvků s nápovědou umístěných ve stejné řádce, s možností rozkliknout položku odrážkového seznamu 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, která je umístěná na běžném místě jako nápověda, jen opticky zaujímá menší prostor. Případně může být před touto ikonou zobrazen zkrácený text nápovědy. Ikona otazníku se definuje tak, že se na konec první řádky nápovědy umístí tři tečky a následně přechod na novou řádku (enter). Před třemi tečkami se může nacházet zkrácený text nápovědy. Následuje pak již libovolně dlouhý 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 následovaný za třemi tečkami, ale naopak se zobrazuje/skrývá obsah například divu umístěného kdekoliv v editačním formuláři. Na nové řádce za třemi tečkami je nutné uvést ID tohoto divu pomocí javascriptové funkce „el”.
  • …

el('D1')

• Zkrácený text nápovědy…

el('D1')

• 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
• 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í.

Tyto funkce je možné aplikovat dvěma způsoby:

• Vložením do poznámky editačního formuláře – nastavení se v takovém případě 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 a používají reverzní design – ovládací prvky nemají rámeček, mají nastavené 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ů, které jsou umístěny ve sloupcích a používají reverzní design.
• Příklad použití funkce COLUMN

2.4.2. DISABLEPAGETOOLS

• DISABLEPAGETOOLS()
  • Funkce zakáže plovoucí ikony na nahlížecí stránce nebo v editačním formuláři, které se zobrazují v pravém horním rohu.
• 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ů, které mají název ovládacího prvku v levém sloupci zarovnaný doleva.
• 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ů, které nepoužívají barevné pozadí v levém sloupci s názvem ovládacího prvku. Zahájený blok, který není ukončen pomocí funkce „/NOBACKGROUND”, ukotví tlačítka „Uložit”, „Smazat” a „Zpět”. Tyto tlačítka pak nebudou plovoucí, a budou se zobrazovat vždy až na konci editačního formuláře.
• /NOBACKGROUND
  • Funkce zakončí blok ovládacích prvků, které nepoužívají barevné pozadí v levém sloupci s názvem ovládacího prvku.
• 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 s názvem ovládacího prvku, a které používají reverzní design – ovládací prvky nemají rámeček, mají nastavené barevné pozadí, a při focusu zobrazují barevnou lištu pod ovládacím prvkem. Zahájený blok, který není ukončen pomocí funkce „/WEBFORM”, ukotví tlačítka „Uložit”, „Smazat” a „Zpět”. Tyto tlačítka pak nebudou plovoucí, a budou se zobrazovat vždy až na konci editačního formuláře.
• /WEBFORM
  • zakončí blok ovládacích prvků, které nepoužívají barevné pozadí v levém sloupci s názvem ovládacího prvku, a které používají reverzní design – ovládací prvky nemají rámeček, mají nastavené barevné pozadí, a při focusu zobrazují barevnou lištu pod ovládacím prvkem.
• Příklad použití funkce WEBFORM