Asynchronous JavaScript and XML (AJAX) je souhrnné označení technologie pro vývoj interaktivních webových aplikací. Dřívější webové stránky byly čistě statické, případně generovaly dynamický obsah pouze v případě znovunačtení celé stránky
3.1 Historie
Asynchronous JavaScript and XML (AJAX) je souhrnné označení technologie pro vývoj interaktivních webových aplikací. Dřívější webové stránky byly čistě statické, případně generovaly dynamický obsah pouze v případě znovunačtení celé stránky (pomocí skriptovacích jazyků jako např. PHP, ASP, CGI…), mírná dynamičnost byla možná díky použití JavaScriptu, případně DHTML pro vizuální efekty, ale především se jednalo o synchronní přístup – uživatel provedl akci (např. vyplnil formulář) a na základě této akce byly odeslány data na server, ten je nějakým způsobem zpracoval a vygeneroval znovu celou HTML stránku, kterou webový prohlížeč na straně klienta zobrazil.
Pomocí technologie AJAX je možné načíst pouze část stránky (typicky např. data v tabulce, případně obsah elementu DIV či SPAN), stejně tak odeslat pouze část dat na pozadí bez nutnosti překreslovat celou stránku. Tato vlastnost ostatně není žádná novinka – komunikaci se serverem na pozadí umožňoval už např. Macromedia Flash od verze 4, stejně tak mezi první průkopníky základu této technologie je možné považovat společnosti Microsoft a Netscape, které ve svých prohlížečích definovaly tagy IFRAME (Microsoft Internet Explorer 3) a LAYER (Netscape Communicator 4). V Microsoft Internet Exploreru 4 (a Netscape Communicatoru 4) bylo také možné používat Java applet běžící v prohlížeči, který na pozadí komunikoval se serverem. Za průlom se dá považovat až objekt XMLHttpRequest, který byl zaveden v prohlížeči Microsoft Internet Explorer.
Termín AJAX použil poprvé až v únoru roku 2005 Jesse James Garret ve článku Ajax: A new approach to web applications [1]. V té době již tuto technologii aktivně využívala společnost Google pro některé své služby, především Gmail, Suggest… Od té doby nastal doslova boom této technologie a dnes je součástí tzv. Web 2.0, na němž, jakožto nepsaném standardu je založena převážná většina moderních webových aplikací.
3.2 WEB 2.0
Podle WIKIpedie může za vznik pojmu Web 2.0 nakladatelství O’Reilly (konkrétně se jedná o článek Tima O’Reillyho „What is web 2.0“ [3]), který jej definovalo jako „druhou generaci internetových služeb, která lidem umožňuje spoluvytvářet a sdílet informace novým způsobem – například sociální sítě, stránky využívající wiki, komunikační nástroje a folksonomie“. Také konference „Web 2.0“, která proběhla v roce 2005 měla velké ohlasy.
Na jednu stranu se může zdát, že Web 2.0 je označením pro souhrn velice progresivních technologií, na stranu druhou již většina technologií, které do tohoto souhrnu spadají existuje delší dobu a weby, které tyto technologie využívají „označovány nálepkou“ Web 2.0 nejsou. Spíše než o revoluci se tedy jedná o pouhou evoluci, z důvodu poptávky po novějších technologiích – zvyšují se kapacity přípojek koncových uživatelů, počty uživatelů internetu rostou, místo obrázků jsou maily posílány videa, roste potřeba sdílení multimediálního obsahu… Jak bylo napsáno výše, jedná se o souhrn moderních technologií, které mohou být (při správném použití) velkým přínosem pro vývojáře a stejně tak dobrým pomocníkem pro uživatele.
Jak jsem napsal výše, Web 2.0 slučuje některé moderní technologie, do kterých patří zejména:
- Na AJAXu založené Rich Internet Aplikace
- Rich Internet Aplikace bez použití AJAXu
- Kaskádové styly
- Semanticky správné XHTML značkování
- Informační kanály (RSS a Atom)
- Sociální sítě (Folksonomie, weblogy, wiki…)
- Sdružování služeb nabízených na různých webech na jedno místo (mohou sem spadat i uvedené RSS)
- Representation State Transfer
- Programová rozhraní webových služeb (SOAP)
3.3 Používané technologie
V úvodu jsem napsal, že AJAX je technologie, což není úplná pravda. AJAX je jakési zastřešení několika různých technologií, které jako celek tvoří mocný nástroj.
- Definice dokumentu pomocí XHTML – prakticky se jedná o Document Object Model (DOM) reprezentující zobrazení webové stránky zapsaný jako stromová struktura
- Definice stylů stránky pomocí Cascading Style Sheets (CSS)
- Propojení zobrazené stránky za pomocí XML jazyka (je možné použít i jakýkoliv jiný formát, např. HTML, čistý text, či JavaScript Object Notation, XML je ovšem z hlediska rozšířenosti nástrojů pro parsování tohoto typu nejvhodnější)
- Asynchronní metoda pro získávání dat – XMLHttpRequest
- Rutiny v JavaScriptu umožňující spojení se serverem na pozadí a upravující nebo modifikující DOM stránky
3.4 Příklady praktického použití AJAXu
Technologie AJAX je ideální například pro následující činnosti:
- Validace položek formulářů v reálném čase – v praxi se využívá např. pro ověření správnosti seriového čísla, neexistence loginu nově vytvářeného uživatele…
- Autokompletace – v češtině se vžil pojem „našeptávač“ – při psaní do pole uživatel má možnost vybíraz z odpovídajích možností, aby nemusel vypisovat celou frázi
- Načítání na vyžádání – načtení konkrétní části stránky na pozadí a vložení do existujícího DOM
- Sofistikované komponenty – dynamicky generované stromové struktury, menu tabulky…
- Serverem vynucená změna obsahu – aktualizování objektů na stránce bez zásahu uživatele – měnové kurzy, kurzy sázek, hlasování
- Částečné odeslání – odeslání dat bez nutnosti překreslení celé stránky
Málokterá webová aplikace je tvořená pouze jedinou stránkou, většinou se jedná spíše o soustavu JSP stránek, které jsou vzájemně propojeny. Toto propojení není tvořeno statickými odkazy, jako v případě HTML dokumentu. Navigace je definována opět v XML struktuře (soubor navigation.xml), jako soustava navigačních pravidel, tzv. navigation-case elementů, ze kterých se vybírá na základě výsledku prováděné akce.
Málokterá webová aplikace je tvořená pouze jedinou stránkou, většinou se jedná spíše o soustavu JSP stránek, které jsou vzájemně propojeny. Toto propojení není tvořeno statickými odkazy, jako v případě HTML dokumentu. Navigace je definována opět v XML struktuře (soubor navigation.xml), jako soustava navigačních pravidel, tzv. navigation-case elementů, ze kterých se vybírá na základě výsledku prováděné akce.
<navigation-rule>
<from-view-id>/Page1.jsp</from-view-id>
<navigation-case>
<from-outcome>prejdi</from-outcome>
<to-view-id>/Page2.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Tab. XI: Příklad jednoduchého navigačního pravidla
Touto akcí může být například stisknutí tlačítka pro odeslání formuláře, čili přímé aktivování komponenty typu UICommand, nebo se může jednat o návratovou hodnotu některé metody, která mohla být vyvolána na základě nějaké předchozí akce. V praxi se jedná o návratovou hodnotu typu string, která je porovnávána s jednotlivými navigation-case elementy a na jejich základě může zobrazit další stránku (definovanou pomocí emelentu to-view-id).
<ui:button action=“#{Page1.buton1_action}“
binding=“#{Page1.button1}“ id=“button1″ text=“Přejít“/>
Tab. XII: Definice tlačítka v JSP
public String button1_action() {
return „prejdi“;
}
Tab. XIII: Handler zpracovávající událost stisku tlačítka
Každá JSP stránka je definována XML strukturou, která obsahuje jednotlivé komponenty. Rozložení jednotlivých tagů je velice podobné struktuře HTML stránky, samotný HTML kód je generován dynamicky v případě požadavku na jeho zobrazení. Tagy obsahují tedy i mapování jednotlivých komponent na datový model.
Každá JSP stránka je definována XML strukturou, která obsahuje jednotlivé komponenty. Rozložení jednotlivých tagů je velice podobné struktuře HTML stránky, samotný HTML kód je generován dynamicky v případě požadavku na jeho zobrazení. Tagy obsahují tedy i mapování jednotlivých komponent na datový model.
Ke každé JSP stránce je přidružen PageBean. V této třídě jsou obsaženy definice jednotlivých komponent a jejich inicializační kód, stejně tak inicializační rutiny pro jednotlivé beany (metody getBean) a zachytávací rutiny pro události vyvolané akcí uživatele.
private TextField textField1 = new TextField();
public TextField getTextField1() {
return textField1;
}
public void setTextField1(TextField tf) {
this.textField1 = tf;
}
Tab. X: Část beanu stránky – obsluha komponenty TextField1
Po vytvoření beanů používaných aplikací je nutné je deklarovat v konfiguračním souboruaplikace (Java Studio Creator používá soubor managed-beans.xml). V dřívějších verzích JSF (stejně tak u JSP stránek) se beany inicializovaly pomocí tagu <jsp:useBean…> v dané JSP stránce, mohly však vznikat problémy při přístupu k beanu, který ještě nebyl inicializován – požadavek na jeho inicializaci mohla vznášet stránka, která ještě nebyla navštívena. Proto jsou beany definovány zvlášť v konfiguračním souboru.
Po vytvoření beanů používaných aplikací je nutné je deklarovat v konfiguračním souboruaplikace (Java Studio Creator používá soubor managed-beans.xml). V dřívějších verzích JSF (stejně tak u JSP stránek) se beany inicializovaly pomocí tagu <jsp:useBean…> v dané JSP stránce, mohly však vznikat problémy při přístupu k beanu, který ještě nebyl inicializován – požadavek na jeho inicializaci mohla vznášet stránka, která ještě nebyla navštívena. Proto jsou beany definovány zvlášť v konfiguračním souboru. Díky tomu jsou beany dostupné globálně pro celou aplikaci, dají se spravovat centralizovaně a nemusejí se dohledávat v každé JSP stránce zvlášť, lze definovat hodnoty vlastností beans přímo v definici. Při spouštění aplikace jsou vytvořeny instance všech daných beanů dle jejich konfigurace.
<managed-bean>
<managed-bean-name>UserBean</managed-bean-name>
<managed-bean-class>semestralka.UserBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Tab. VII: Příklad definice datové komponenty UserBean
Jednotlivé názvy vlastností definuje Java Studio Creator automaticky (mimo něj se definují pomocí elementů <managed-property>), je nutné zadat pouze rozsah platnosti dané instance (managed-bean-scope). Ta může nabývat následujících hodnot:
- none – při každém použití beanu bude vytvořena nová instance
- request – pro každé znovunačtení beanu bude vytvořena nová instance
- session – instance je vytvořena pro každou otevřenou session (prakticky jedno okno prohlížeče)
- application – instance je vytvořena pouze jedna pro celou aplikaci
Žádná instance není vytvářena samovolně, ale až v okamžiku požadavku na její vytvoření, tedy v okamžiku volání metody getBean(). V případě beanu UserBean je tedy po zavolání metody getUserBean() vytvořena instance třídy UserBean pro celou existující session (teoreticky pro každého uživatele jedna).
protected UserBean getUserBean() {
return (UserBean)getBean(„UserBean“);
}
Tab. VIII: Metoda vytvářející UserBean
Napojení komponenty na přidružený bean je realizováno pomocí zavolání get metody v beanu, kdy se neuvádí prefix get.
<ui:textField binding=“#{Page1.textField1}“ id=“textField1″
text=“#{UserBean.jmeno}“/>
Tab. IX: Nastavení obsahu komponenty TextField1 na proměnnou přidruženou v beanu
Datový model je definován Java Beany. Jedná se o standardní třídy jazyka Java, jejichž proměnné nejsou veřejné. K vlastnostem těchto proměnných se přistupuje pomocí tzv. getterů a setterů, čili metod, které mají prefix getNazevProměnné a setNázevProměnné, případně setAnoNe a isAnoNe pro proměnné typu boolean.
Datový model je definován Java Beany. Jedná se o standardní třídy jazyka Java, jejichž proměnné nejsou veřejné. K vlastnostem těchto proměnných se přistupuje pomocí tzv. getterů a setterů, čili metod, které mají prefix getNazevProměnné a setNázevProměnné, případně setAnoNe a isAnoNe pro proměnné typu boolean. Návratová hodnota (případně parametr) této metody musí samozřejmě odpovídat datovému typu této proměnné, nebo se musí postarat o konverzi a správnou interpretaci (tato konverze nemá nic společného s konvertory z knihoven tagů).
Tyto třídy musí mít neparametrický konstruktor (vzhledem k inicializaci pomocí konfiguračního souboru, viz. níže), případně být bez konstruktoru – překladač vytvoří výchozí bezparametrický konstruktor.
public class UserBean{
private Integer vek;
private String jmeno;
public UserBean(){
vek = new Integer();
jmeno = new String();
}
public Integer getVek(){
return this.vek;
}
public void setVek(Integer vek){
this.vek = vek;
}
public String getJmeno(){
return this.jmeno;
}
public void setJmeno(String jmeno){
this.jmeno = jmeno;
}
}
Tab. VI: Ukázka jednoduchého Beanu
Součástí distribuce Java Server Faces verze 1.2 a výše jsou základní knihovny html a core. V knihovně html jsou obsaženy komponenty pro tvorbu objektů zobrazených na HTML stránkách, v knihovně core jsou speciální komponenty, jako např. výše uvedené validátory a konvertory.
Součástí distribuce Java Server Faces verze 1.2 a výše jsou základní knihovny html a core. V knihovně html jsou obsaženy komponenty pro tvorbu objektů zobrazených na HTML stránkách, v knihovně core jsou speciální komponenty, jako např. výše uvedené validátory a konvertory. Java Studio Creator dále přidává knihovny JSP-Page (vlastnosti stránky) a ui (rozšíření knihovny html).
Tyto knihovny je potřeba uvést na začátku každé JSP stránky, která je využívá. Volání konkrétních komponent je realizováno uvedením prefixu a názvu komponenty, jednoznačného identifikátoru a návaznosti na definici komponenty – datový model. Všechny viditelné komponenty (jejich tagy, včetně konvertorů a validátorů) musí být uzavřeny v tagu <f:view>.
<jsp:root version=“1.2″
xmlns:f=“http://java.sun.com/jsf/core“
xmlns:h=“http://java.sun.com/jsf/html“
xmlns:jsp=“http://java.sun.com/JSP/Page“
xmlns:ui=“http://www.sun.com/web/ui“
>
Tab. I: Zápis direktivy taglib v prostředí Java Studio Creatoru
<ui:staticText binding=“#{Page1.staticText1}“ id=“staticText1″ />
Tab. II: Zápis komponenty StaticText v JSP v prostředí Java Studio Creatoru
Byl poprvé uveden v objektově orientovaném programovém prostředí Smalltalk. Díky tomuto modelu je aplikace dělena na tři vrstvy a múžeme tak dosáhnout větší flexibility a vícenásobné použitelnosti kódu.
Byl poprvé uveden v objektově orientovaném programovém prostředí Smalltalk. Díky tomuto modelu je aplikace dělena na tři vrstvy a múžeme tak dosáhnout větší flexibility a vícenásobné použitelnosti kódu.
2.2.1 Vrstva Model
Tato vrstva obsahuje data, s nimiž aplikace pracuje a funkce pro operaci nad těmito daty. Objekt Model je nezávislý na vstupním a výstupním chováním aplikace. Objektů Model může aplikace obsahovat i více (v praxi se může jednat například o několik tabulek v databázi, otevřené soubory, nebo služby jiných aplikací).
2.2.2 Vrstva View
Tato vrstva je interpretující – zobrazující – data uživateli. Neobsahuje vlastní data, ani logiku práce s nimi. Objektů view může být v aplikace více, protože můžeme chtít zobrazit více různých údajů o modelu, nebo požadovat výstup konkrétně optimalizovaný (např. Bez grafiky, čistě textově, v XML…). Každý objekt View je asociovaný k objektu Controller.
2.2.3 Vrstva Controller
Kód zpracovávající uživatelský vstup. Přijímá události vyvolané objekty ve vrstvě view, které transformuje jako požadavky na službu pro View, nebo Model. Zajišťuje logiku chování celého systému.
Java Server Faces je systém pro tvorbu uživatelského rozhraní v jazyce Java, běžící jako servlet na straně serveru v tzv. webovém kontejneru (např. Apache Tomcat). Základní myšlenkou bylo oddělit aplikační logiku od zobrazovací části. Díky tomu by bylo možné tvořit design stránek bez znalosti pozadí celé aplikace a stejně tak, aby bylo možné tvořit funkční aplikační logiku bez nutnosti zabývat se optimalizací pro konkrétní zobrazovací zařízení.
Java Server Faces je systém pro tvorbu uživatelského rozhraní v jazyce Java, běžící jako servlet na straně serveru v tzv. webovém kontejneru (např. Apache Tomcat). Základní myšlenkou bylo oddělit aplikační logiku od zobrazovací části. Díky tomu by bylo možné tvořit design stránek bez znalosti pozadí celé aplikace a stejně tak, aby bylo možné tvořit funkční aplikační logiku bez nutnosti zabývat se optimalizací pro konkrétní zobrazovací zařízení. V praxi to vypadá tak, že existuje jakési rozhraní, které generuje data a rozhraní, které tato data interpretuje – zobrazuje – na dané platformě (v této práci se budu zabývat webovými službami, čili o konkrétní interpretaci optimalizovaného HTML kódu – např. pro PDA, mobilní telefon, počítačový webový prohlížeč…) pomocí stránek Java Server Pages (JSP).
Tento základní model přístupu byl dále ještě rozšířen v modelu MVC (Model – View – Controller), který samotnou aplikaci rozděluje na tři části. Díky tomu je celý životní cyklus řízen událostmi, které generuje uživatel. Tyto události dále volají konkrétní akce (např. při stisku tlačítka), případně ověřují (validují) zadané hodnoty ve formuláři, případně tyto hodnoty konvertují na datové typy, se kterými dále pracují (např. při změně pole formuláře).
Další velkou výhodou systému JSF je, že dokáže importovat knihovny tagů, což mohou být výše uvedené konvertory a validátory, nebo přímo konkrétní komponenty. Díky tomu není potřeba vytvářet JSP stránky ručně, ale použít některý vizuální (WYSIWYG) editor – NetBeans, Sun Java Studio Creator… Tyto knihovny je samozřejmě možné upravovat, nebo vytvářet zcela nové, čímž mohou vzniknout zcela nové balíčky komponent (ICE Faces).
Opoznámkovat si stránky? Dobře, použiju Google notes. Ale opoznámkovat si stránky "bublinama" přímo mezi obsahem na stránce a navíc tyto poznámky ještě sdílet s dalšími lidmi? Jde to!
Opoznámkovat si stránky? Dobře, použiju Google notes. Ale opoznámkovat si stránky "bublinama" přímo mezi obsahem na stránce a navíc tyto poznámky ještě sdílet s dalšími lidmi? Jde to!
Protože mi doma z neznámých důvodů umřela jedničková verze Firefoxu a já docela spíchal, tak jsem nainstalil dvojku. Hned po instalaci mi byla nabídnutá stránka s rozšířeními. Protože jedničku jsem měl prolezlou všemi možnými vylepšeními, které byly většinou nekompatibilní s dvojkovou verzí (což byl taky důvod, proč jsem doma setrvával s Firefoxem 1) a v práci se spokojím s rozšířeními společnosti Google, nedalo mi to a prolezl jsem si pár pro mě potenciálně zajímavých kategorií a mimo jiné narazil na rozšíření Fleck.
Ovšem zřejmě největší výhodou je fakt, že Fleck nevyžaduje instalaci žádného modulu (modul jako takový existuje pro zpříjemnění přístupu a zjednodušení přidávání), nevyžaduje ani registraci a přihlašování na účet při přidávání poznámek.
Jak to teda vlastně funguje? Majitel stránek může mít zaintegrovaný Fleck ve stránkách. To je asi nejméně pravděpodobné. Další možností je plugin v prohlížeči (na stránkách Flecku je nabízen pro MSIE a pro Firefox), čili stačí stisknout tlačítko "Annotate this page…", nebo jako poslední možnost je zkopírovat adresu stránky a vložit ji do pole na stránkách Fleck.com.
V každém případě je daná stránka načtena jako obsah stránky "extension.fleck.com" a je přidán plovoucí panel s možnostmi přidání poznámky (editovatelné), bubliny, sdílení (mailem), možnost odeslání do blogu a dokonce i verzování uložených poznámek, čili jakási historie změn, dále je tu možnost učinit změny v poznámkách jako veřejné, nebo je nechat jen pro svou soukromou potřebu.

Po uložení je hotovo a pokud kdokoliv, kdykoliv otevře danou stránku jedním z předchozích způsobů, zobrazí se mu poznámky a bubliny příslušné k danému datu.
Z mého pohledu je Fleck rozhodně zajímavá aplikace, která by ovšem bez existence pluginu do prohlížeče byla ne zrovna jednoduše použitelná, ovšem díky integraci do prohlížeče (a na druhou stranu i možnosti použití bez pluginu) a nevyžadované registraci na rozdíl od služeb trails nebo stickis, která stojí nejenom za vyzkoušení.