Main menu

Jak na APEX 05: Mobilní zobrazení a mobilní aplikace

V dalším díle seriálu o APEXU a jeho funkcích, bych Vám rád představil, jak fungují webové aplikace na mobilních zařízeních. Mobilní zařízení jsou v dnešní době tak běžnou součástí našich životů, proto umět vytvořit aplikaci určenou přímo pro Váš telefon, je nutností.

Jako výchozí aplikaci použijeme tu, kterou jsme již vytvořili v předchozím návodu a pouze jí upravíme, tak, aby byla plně funkční i v telefonu.

Zde si můžete prohlédnout, jak vypadá Vaše aplikace na počítači.

Pro simulaci zobrazení na telefonu, použiji internetový prohlížeč google chrome. Poté, co se přihlásíte do aplikace, klikněte pravým tlačítkem myši a použijte možnost prozkoumat. V levém rohu na první liště vyberte ikonu mobilních zařízení.

Google chrome je v tomto případě výborný pomocník, dokáže totiž nejen simulovat různá zařízení a rotovat obrazovku, ale nechá Vás i vybrat, jestli je simulované zařízení online nebo offline a dokonce nabídne i možnost vyzkoušet si aplikaci na starším a slabším hardware. Simulace mobilního prostředí je proto velmi věrohodná.

Pojďme si nyní projít aplikaci a ukázat si, jak na mobilním zařízení vypadá. Prvně se podíváme na menu.

Menu jde v APEXu nastavit tak, aby se otevíralo z horní strany obrazovky, ne ze strany. Na mobilních telefonech je takové menu preferované, vypadá lépe a je přehlednější. Pokud byste pak otočili Vaše zařízení na šířku, tak i v tom případě bude menu přívětivě umístěné.

APEX tímto responsivním škálováním aplikace umožňuje vytvořit jen jednu aplikaci pro všechny platformy. Vámi vytvořená apka tak bude fungovat v operačních systémech Windows, Linux či macOS, nebude mít problém ani s iOS nebo Androidem a zvládne dokonce i chytré televize. Poběží zkrátka všude, kde je webový prohlížeč.

Nyní bych Vám rád ukázal, jak vypadá dashboard a strana s obrázkem. Poté se budu pečlivěji věnovat report zaměstnanců.

Jak vidíte, přizpůsobení zobrazení je velmi přesvědčivé a v dnešní době, kdy více lidí navštěvuje webové stránky přes telefon než přes počítač, je tato možnost APEXu velkou výhodou.

Na dalším obrázku můžete vidět, jak vypadá tabulka zaměstnanců, vytvoření záznamu a jeho editace.

Vytvořená tabulka vypadá lépe zobrazená na šířku. Můžeme ji upravovat, odstranit zbytečné sloupce, upravit šířku a podobně. Možností úprav nabízí APEX mnoho. Editace a vytváření nového záznamu je pak standardní, a vypadá úplně stejně jako na počítači. Date picker neboli kalendář pro výběr data, je uzpůsoben pro výběr prstem a uživatelné ho velmi snadno a intuitivně používají.

Další, ohromnou výhodou APEXu je, že celé zobrazení aplikace na telefonu je plně automatické, není potřeba upravovat, byť jen jediný řádek kódu, a ani jednu komponentu. Aplikace se všemu sama přizpůsobí. I přes to je lepší si zkontrolovat každou stranu apky a podívat se, jak se zobrazuje na různých zařízeních. Pokud například použijete příliš mnoho sloupců nebo velké komponenty, tak by uživatel musel zbytečně moc scrollovat. Pak by určitě stálo za to aplikaci upravit, aby byla pro koncového uživatele co nejpřívětivější.

V každém případě to, že můžete používat aplikaci vytvořenou primárně pro desktop, bez jakýchkoliv komplikací i na mobilních zařízeních, je velmi působivé.

V předchozích verzích Oracle APEX jste mohli vyvíjet aplikace přímo za pomocí speciálního template pro mobilní zařízení. V poslední verzi 18 tato možnost již není a uživatelé si tak musí vystačit s běžnými komponenty. Ty ale fungují velmi dobře, a tak po starších verzích není třeba truchlit.

Na následujícím obrázku Vám předvedu, jak změnit menu, tak aby se nacházelo na horní hraně zařízení.

Je to velmi snadné, v dalším sceenu je mobilní zobrazení.

Do zobrazení můžete přidat ikony a dokonce i submenu.

Pevně věřím, že pro Vás tento návod byl užitečný. Pokud máte zájem dozvědět se více o Oracle APEX, například jak vytvořit plánovač s kalendářem ve kterém můžete k jednotlivým událostem přikládat přílohy, čtěte dál.

 

 

Další články ze seriálu Jak na APEX:

I programováním nedotčení uživatelé dostávají s APEXem do ruky mocný nástroj, který jim umožní jednoduše vytvořit dříve jen obtížně dostupné aplikace. Máte-li dotazy, neváhejte psát do komentářů! Na závěr vám ještě dlužím varování: Práce s APEXem může být návyková.

Tomáš Kucharzyk
APEX & Mobile App Developer

Kontakt

CEOS Data s.r.o.
Technologická 375/3, 708 00, Ostrava-Pustkovec

Office Praha
Na Pankráci 58, 140 00, Praha 4 - Nusle

info@ceosdata.com
Praha, Brno, Plzeň, Ostrava, Hradec Králové