Generování uživatelského rozhraní

Pokud jste se již seznámili se zobrazováním formulářů, tak vám tato část Jetu bude povědomá. Ono je to vlastně to samé, úplně stejný princip a prakticky identická funkce.

Pouze UI není zaměřeno na zobrazování formulářů, ale jak název napovídá jde o unifikaci a usnadnění zobrazení dalších prvků uživatelského rozhraní, které nemají charakter formuláře. To jest tlačítek, data gridů, ikon, uživatelských zpráv a tak dále.

Ale pokud ještě neznáte formuláře, tak si to pojďme ukázat a zopakovat. Použití je ve view je jednoduché a spočívá ve vytváření instancí příslušných objektů, jejich nastavení a prosté převedení na řetězec. Dejme tomu, že potřebujeme vygenerovat modální dialogové okno s celou řadou dalších UI elementů. Provedeme to takto: use Jet\Locale;
use Jet\Tr;
use Jet\UI;
use Jet\UI_badge;

$dialog = UI::dialog(
    id: 'example-dialog',
    title: Tr::_('Example dialog'),
    width: 500
);
?>

<?=UI::button(Tr::_('Show dialog'))
    ->setOnclick("$('#example-dialog').modal('hide');")
    ->setIcon('pen')?>

<?=$dialog->start()?>

    <p><?=UI::localeLabel( new Locale('cs_CZ') )?></p>

    <p>Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Etiam quis quam.</p>

    <p><?=UI::badge(UI_badge::WARNING, Tr::_('Warning'))?></p>

<?=$dialog->footer()?>
    <?=UI::button(Tr::_('Cancel'))->setOnclick("$('#example-dialog').modal('hide');")?>
    <?=UI::button_save()?>
<?=$dialog->end()?>

Také je nutné si připomenout identické principy, které platí i pro zobrazováním formulářů:

• Jet (myšleno knihovna Jet) vlastně sám o sobě nic nezobrazuje. Pouze nabízí rozhraní (z hlediska paradigmatu MVC je to vlastně Model) na jehož základě se vše zobrazí již ve view skriptech.
• Všechny view skripty jsou součástí aplikačního prostoru. To znamená, že zobrazení je plně pod vaší kontrolou. Součástí ukázkové aplikace jsou samozřejmě připravené view skripty, které můžete, ale nemusíte použít. Tedy i to že ukázková aplikace využívá framework Bootstrap a ikony Font Awesome není nic definitivního a pevně daného. Můžete si udělat vlastní view s použitím úplně jiného CSS frameworku, nebo čistě založené na vašem CSS a HTML.
• Systém zobrazení UI umí mnohem víc věcí než je v ukázce. To znamená, že vše můžete plně ovlivňovat, měnit, předávat HTML tagům atributy, mít zcela unikátní view skripty pro určité prvky a tak dále.
• I přes neomezenou flexibilitu zobrazení zůstává unifikované rozhraní. Jednoduše řečeno to znamená, že view můžete úplně "překopat", ale prvky UI se v aplikaci definují stále stejně.
• Smyslem tohoto systému je unifikovat podobu uživatelského rozhraní v aplikaci a zároveň si usnadnit a sjednotit práci při jeho tvorbě.

Renderer - co to je?

Renderer je základ každého UI prvku. Tedy dá se říct, že každý UI prvek je zároveň renderer. (To je rozdíl oproti formulářům, kde je renderer subentita formulářového prvku).

Tedy každý UI prvek dědí buď od třídy Jet\UI_Renderer_Single, nebo Jet\UI_Renderer_Pair a obě tyto třídy dědí od společné rodičovské třídy Jet\UI_Renderer.

Některé prvky se mohou skládat z více prvků. To se týká například Jet\UI_dataGrid. Ovšem každý subelement je opět redererm a dědí tedy od jedné z uvedených tříd.

Renderer a view

Řekli jsme si, že renderer je model, podle kterého view zobrazí daný element. Teď si pojďme ukázat jak přesně se to dělá.

Předpokládám, že již víte jak view v Jet funguje. Tedy úplné detaily zde vynechám.

Jak víte, tak aby view fungovalo, tak potřebuje tyto základní věci:

• Kořenový adresář kde má hledat view skripty
• Název view skriptu který se má zobrazovat
• A samozřejmě nějaká data podle kterých view zobrazí to co zobrazit má

Kořenový adresář view skriptů

Stejně jako systém formulářů, tak i systém UI počítá s tím, že bude tento adresář je nastaven systémovou konfigurací, konkrétně například takto: //... ... ...
public static function init( MVC_Router $router ): void
{
    //... ... ...
    SysConf_Jet_UI::setViewsDir( $router->getBase()->getViewsPath() . 'ui/' );
    //... ... ...
}
//... ... ...

Záměrně jsem jako ukázku použil kousek inicializátoru MVC báze, kde právě je vhodné místo pro provedení tohoto nastavení.

Ale pochopitelně ne vždy je nutné moužít celý MVC systém a kořenový adresář lze prostě a jednoduše takto: SysConf_Jet_UI::setViewsDir( $some_dir.'ui/' );

View adresáře v ukázkové aplikaci

Pravděpodobně jste si již všimli, že v ukázkové aplikaci jsou hned čtyři adresáře s view skripty UI:

• ~/_installer/views/ui/
  UI mikroaplikace instalátor
• ~/_tools/studio/application/views/ui/
  UI nástroje Jet Studio
• ~/application/bases/admin/views/ui/
  UI administrace
• ~/application/bases/web/views/ui
  UI ukázkového webu

Proč to tak je je rozebráno v kapitole zobrazování formulářů

Název view skriptu

Princip je vlastně takřka stejný jako u formulářů. S tím rozdílem, že každý element již má předdefinované názvy view skriptů a na rozdíl od formulářů tyto samozřejmě není nutné nastavovat.

Ovšem i zde platí, že je použita systémová konfigurace, konkrétně SysConf_Jet_UI_DefaultViews.

Třída Jet\UI

Třída Jet\UI sehrává speciální úlohu usnadňující použití generátoru UI. Pojďme si ukázat, jak by bylo nutné používat renderery bez ní. Například takto: use Jet\Tr;
use Jet\UI_button_edit;

$btn = new UI_button_edit(Tr::_('Edit something'));
$btn->setUrl( $some_edit_url );

echo $btn; Což opravdu není moc pohodlné ....

Jasně, dá se to zkrátit ještě takto: use Jet\Tr;
use Jet\UI_button_edit;

echo (new UI_button_edit(Tr::_('Edit something')))->setUrl( $some_edit_url ); Ale to stále není ono... I když takové použití je samozřejmě možné a v principu na tom není nic špatného.

Ovšem běžné použití je toto: use Jet\Tr;
use Jet\UI;

echo UI::button_edit(Tr::_('Edit something'))->setUrl( $some_edit_url );

Připravené elementy

Zde je seznam elementů a jejich rendererů, kterými Jet disponuje v základu.