Jak nastavit fungování aktivních prvků AJAXové aplikace?

Pokud se budeme bavit o moderních webových aplikacích, bude řeč o webových stránkách využívající AJAX pro efektivnější zpracování uživatelských požadavků. Takovým webům se říká RIA (Rich Internet Application) nebo interaktivní webové aplikace.

Vytvořit interaktivní webovou aplikaci není nic náročného. Díky nástrojům jako je jQuery nebo Nette Framework je můžete vytvořit za pár minut.

Návrh aplikace je ale podstatně složitější a je mu potřeba věnovat dostatek pozornosti a úsilí. Je potřeba dbát na to, aby nevznikaly problémy v komunikaci mezi aplikací a uživatelem.

Zpracování aktivních prvků

Nejen na uživatelských testování jsem si všiml, že méně zkušení uživatelé internetu mají tendence dvakrát klikat, tzv. double-click, na aktivní položky. Aktivními položkami myslím především:

  • Odkazy,
  • Tlačítka.

Pokud s tím aplikace nepočítá, požadavky se vykonají dvakrát. To může vyvolat chybu nejen v aplikaci, ale také v samotném rozhraní aplikace, například v podobě chybové hlášky. Těm je samozřejmě nutné předcházet.

Zpracování a řešení podobných problémů je celkem jednoduché a efektivní. Princip ukazuje následující obrázek:

Na obrázku jsou ukázány situace před a po odeslání formuláře.
Na obrázku jsou ukázány situace před a po odeslání formuláře.

Základní myšlenkou je vyvarovat se vícenásobnému odesílání požadavků na server, ale také patřičně informovat uživatele o tom, že jeho požadavek byl odeslán a je zpracováván.

Jak ukazuje obrázek, aktivní prvek je nahrazen zprávou v přívětivé formě, která bude informovat o vykonávání požadavku. To přináší také velkou výhodu v tom, že zpráva bude zobrazena v oblasti, kam uživatel aktuálně věnuje svou pozornost.

Pokud používáte zmíněné jQuery, řešení může vypadat nějak takto:

$("#odesilaci_tlacitko").click(function(event){
event.preventDefault();

var button = $(this);
var spinner = $('
Odesílám zprávu …<\/div>‘); spinner.insertBefore(button); button.hide(); // … AJAXové odeslání formuláře … });

kde element s id="spinner" bude může mít definovaný styl:

#spinner {
height: 16px;
line-height: 16px;
padding-left: 20px;
background: url('spinner.gif') no-repeat 0px 0px;
}

Podobným způsobem lze řešit i situaci s odkazy, kde nastává podobný problém.

Na obrázku jsou ukázány situace před a po kliknutí na odkaz.
Na obrázku jsou ukázány situace před a po kliknutí na odkaz.

Rozdílem je to, že odkaz se nahradí neaktivním elementem signalizujícím zpracovávání požadavku.

Pokud používáte zmíněné jQuery, řešení může vypadat nějak takto:

$("#odkaz").click(function(event){
event.preventDefault();

var odkaz = $(this);
var spinner = $('<\/span>');
spinner.text(odkaz.text()).insertBefore(odkaz)
odkaz.hide();
// … AJAXový požadavek …
});

kde element s id="spinner" bude může mít definovaný styl:

#spinner {
height: 16px;
line-height: 16px;
padding-right: 20px;
background: url('spinner.gif') no-repeat right 0px;
}

Výhodou prezentované ukázky je rychlost vykonání nahrazení jednotlivých aktivních prvků neaktivními. Čas potřebný pro nahrazení bude v řádech jednotek až desítek milisekund – samozřejmě v závislosti na prohlížeči.

Podívejte se na ukázku, jak takové řešení vypadá v reálné aplikaci.

Co když aplikace vrátí chybu jako odpověď?

Může nastat situace, kdy aplikace odpoví chybou. V uvedeném příkladu se s touto možností počítá a proto byla použita konstrukce element.hide() a proto postačí prvek opět zobrazit a element s id="spinner" schovat.

Pokud bychom aktivní prvek odstranili z DOM, museli bychom jej při chybě opět vytvářet.

Nefunkční aplikace při chybě nebo vypnutém JavaScriptu

Stále více se počítá s tím, že uživatelé mají ve svém prohlížeči zapnutý JavaScript. Je však těžké najít relevantní statistiku, která by podala přesné číslo o zastoupení uživatelů, kteří jej však mají vypnutý.

Já osobně při navrhování webu vždy počítám s tím, že aplikace bude funkční i s vypnutým JavaScriptem, a to z několika důvodů:

  • Přístupnost – nikdy nemůžete vědět, jaké má uživatel možnosti. Je to jedno z pravidel přístupnosti.
  • Chyba při vykonávání skriptu – pokud by na stránce nastala nějaká chyba, vykonávání JavaScriptu bude znemožněno a aplikace nebude funkční.

Proto doporučuji nejprve vytvořit aplikaci bez JavaScriptu a následně aktivní prvky doplnit o patřičné navěšené události. V případě chyby skriptu nebo vypnutém JavaScriptu bude aplikace stále fungovat a váš uživatel nebude zmatený, že aplikace z nějakého důvodu nefunguje.

V této situaci je potřeba dbát na to, aby všechny důležité prvky byly stále funkční. Proto bych osobně nedoporučuji využívat elementy k dotazování aplikace, např. <span>, namísto odkazů.

Závěr

Všiml jsem si i několika dalších řešení. V praxi jsem se ale setkal s tím, že uvedená řešení jsou nejefektivnější jak pro aplikaci, tak pro samotné uživatele.

Dnes je také možné využít hezkého řešení, které poskytuje Twitter Bootstrap v podobě stavových tlačítek. Doplněné o vhodné kurzory, které zmiňuji v článku Usnadněte lidem práci s UI díky správným kurzorům.

A jak řešíte fungování ve vaší aplikaci vy?

Komentáře

  1. Já osobně používám onen „spinner“ jako vrstvu přes celou aplikaci. Pokud požadavek trvá dlouho, uživateli se zobrazí příslušná hláška a má možnost požadavek opakovat či zrušit.

  2. Dělám to obdobně, jen k navěšování událostí používám http://api.jquery.com/on/ a jednotlivé informační hlášky a spinnery nekonstruuji v javascriptu, ale mám je přímo v html a přes identifikátory je jen zobrazuji a skrývám. Když pak potřebuji nějakou hlášku upravit či přeformátovat, nemusím ji hledat v souboru s javascriptem.

  3. Díky za tipy.

    Honza Hommer: Osobně se mi jeví spinner překrývající celou obrazovku jako moc radikální řešení, které může trochu frustrovat uživatele. Určitě by mě zajímalo, při jak dlouhé prodlevě zobrazuješ informační hlášku a také to, jestli obrazovku překrýváš společně se spinnerem i nějakým overlayem.

    LuKo: také to tak jde udělat taky, výsledkově to bude asi o něco lepší, než element vytvářet.

Napsat komentář