Jak na APEX 6:  Kalendář s plánováním eventů

Kalendář budeme vytvářet již v existující aplikaci Zaměstnanci/Employees, kterou jste si mohli vytvořit, pomocí třetího návodu z tohoto seriálu. Aplikace obsahuje i číselník zaměstnanců. Ten použiji v následujícím článku, abych vám ukázal simulaci různých rolí, přistupujících do apky.

Před tím, než aplikaci začnete upravovat si vytvořte zálohu. Je to proto, abyste se měli k čemu vrátit.

Poté, co jsme vytvořili zálohu, pustíme se do samotných úprav původní apky.

Nejprve si musíte vytvořit novou stranu, ta může být prozatím prázdná. Kalendář přidáte později jako komponentu.

Abyste mohli vytvářet eventy a zobrazovat je v kalendáři, musíte si nejprve vytvořit tabulku do které je budete ukládat. Tabulku vytvoříte v záložce SQL workshop. Jakým způsobem ji vytvoříte záleží na vašich preferencích a schopnostech. Můžete použít tlačítko create table a nebo, pokud ovládáte alespoň základy programování, můžete napsat jednoduchý skript, který vám po spuštění tabulku vytvoří sám. Napsání skriptu je určitě rychlejší než naklikat jednotlivé sloupce, proto vám postup ukáži na následujícím obrázku.

Text skriptu můžete vidět níže a zároveň si jej stáhnout v přiloženém souboru. Jen upozorňuji, že jsem nakonec atributy naší tabulky upravil a proto skript, který tvořím, není na obrázku úplně správně.

Když je tabulka hotová, vytvoříme si kalendář, který na ní přímo napojíme.

V panelu napravo nejprve nastavím atributy kalendáře, jako například display column, start date a další. Zde také můžete nastavit jaký typ kalendáře chcete zobrazit. Pro náš příklad jsem nechal zaškrtnuté všechny možné typy: month, week, day a list.

Kalendář je momentálně bez funkce, nic nedělá, když do něj kliknete, na chvíli se zobrazí pole, do kterého jsme kliknuli. Vytváření událostí a editace události nastavíte také v atributech kalendáře.

Jak můžete vidět na obrázku pro create view/edit, je nutné mít link na stránku či okno. Proto pro automatické generování ID eventu budete muset vytvořit ještě jednu sekvenci. Opět to není nic přehnaně složitého, bude vám stačit jakýkoliv skript pro Oracle sequence create. Ty najdete volně přístupné na internetu. Jakmile ho budete mít spustíte SQL skript v APEXu. Dále potřebujete stranu pro modální okno. Tu nemusíte tvořit ručně, ale můžete ji nechat vygenerovat APEXem, jakožto formulář pro editaci tabulky zamestnanci_events.

Jako primární klíč zde použiji event_ID a svoji sekvenci. APEX mi automaticky vygeneruje pole pro editaci všech záznamů z tabulky. Dále vytvoří proces pro automatické uložení, update a delete záznamu. Dokonce i tlačítka pro create, save, delete a cancel. Na dalším obrázku vám ukážu vygenerované komponenty.

Nyní si pojďme napojit kalendář na nově vzniklé editační okno. Připojíme ho jak na create tak na view/edit. Pak se vrátíte na stranu kalendáře a v atributech přidáte stranu do stávajícího linku. Pro view/edit musíte připojit ID eventu.

Když si teď rozkliknete kalendář otevře se vám detail události. Vidíte, že pole zatím nejsou nijak upravená a nevypadají zrovna přívětivě. I přesto si zkuste založit první event.

Svoji nově vzniklou událost můžete rozkliknout, upravovat a případně smazat.

Samozřejmě chceme, aby naše aplikace nebyla jen funkčním nástrojem, ale aby také nějak vypadala. Protože některými úpravami jsem se již zabýval v předchozím návodu, tentokrát bych vám chtěl ukázat další možnosti úprav, které APEX nabízí.  Začneme uspořádáním polí formuláře, které rozdělíme do dvou částí pomocí regionů.

Jak vidíte, itemy jsem si v okně rozdělil do dvou regionů. Ze spodního regionu vytvořím prostor pro „dodatečné informace“, zde budou kontaktní údaje a místo. Tato část bude skládací a bude defaultně uzavřena, aby zbytečně nezabírala místo, pokud nebude vyplňována.  Jak okno vypadá před a po úpravě můžete vidět na dalším obrázku.

Změna na collapsible. Přejmenuji také region z “dvě” na additional info.

Collapsible, jako typ regionu, se vám bude hodit především pro uživatelé využívající aplikaci na laptopu nebo všeobecně na malých obrazovkách, kde se počítá každý centimetr. Ušetří Vám totiž čas a nenutí uživatele vyplňovat údaje, které nejsou povinné. Níže se můžete podívat na výsledek.

Nyní si nastavíme povinná pole a upravíme rozložení. Tím bychom měli získat další drahocené místo. Pole, do kterých nebudeme vpisovat dlouhý text změňte z text_area na text_field. Díky tomu budou mnohem menší.

V tuto chvíli se vámi vytvořený formulář pohodlně vejde na displej 13palcového laptopu. Dále si ještě upravíme okraje regionů. To můžete udělat v panelu atribut napravo v případě, že máte obsazený region, který chcete upravit. Ten bude svítit modře. Poslední krov v této části je změna z department na select list z tabulky zaměstnanců.

Tak a takto vypadá formulář kalendáře po námi provedených úpravách. Do startu a na konec jsem přidal čas a možnost listovat v měsících. Dále jsem trochu uhladil rozložení, takže regiony již nemají zbytečné okraje. Poslední úpravou pak je přidání kalendáře na home page.

S články o APEXU ještě určitě nekončíme. V tom následujícím vám ukáži, jak k jednotlivým událostem přikládat přílohy za pomoci jedné tabulky a jednoho modálního okna. Dále se naučíte, jak nastavit možnosti autorizace a autentifikace. To je spojeno s rolí uživatelů, které budu také věnovat.