Implementace komentářů z minulého dílu byla sice funkční, ale značně nedokonalá. V případě, že uživatel udělal ve formátování komentáře chybu (zadal nepovolené XHTML značky atd.), dostal po odeslání od serveru chybovou hlášku, ale už neměl šanci chyby napravit – byl odkázán na funkci „zpět“ svého prohlížeče, u které není zaručeno, že se vyplněné údaje z formuláře neztratí. Pokud se mu naopak povedlo naformátovat komentář správně, mohlo snadno dojít k několikanásobnému odeslání (pokud by uživatel obnovil stránku).
Naším dnešním cílem proto bude, umožnit uživatelům zobrazit si náhled formátování komentáře a odeslat ho, aniž by se načítala celá stránka – místo klasického odesílání formuláře vyvoláme asynchronní požadavek javascriptem a odpověď serveru zobrazíme v rámci již načtené stránky.
Jako obvykle si nejprve si aktualizujeme zdrojové kódy aplikace pomocí Mercurialu:
$ hg pull $ hg up "15. díl"
Případně je můžete stáhnout jako bzip2 archiv přes web.
Na straně klienta
S implementací na straně klienta nám pomůže knihovna jQuery, kterou již ve své aplikaci používáme. Umožňuje snadnou práci s AJAXem a odstiňuje nás od odlišností jednotlivých prohlížečů. Klientský kód je stručný a naleznete ho v souboru komentare.js
:
komentare.nahled = function() { $("#formularKomentuj .vystup").load("komentare", $("#formularKomentuj form").serialize()); }; komentare.odeslat = function() { $("#formularKomentuj .vystup").load("komentare?odeslat=true", $("#formularKomentuj form").serialize()); };
jQuery funkce load()
vyvolá HTTP požadavek na dané URL (v našem případě komentare
– první parametr), pomocí nějž předá serveru obsah formuláře (ve standardním URL kódování). Odpověď serveru pak tato funkce vloží do elementu, který jsme si pro tento účel připravili. Javascriptové funkce nahled()
a odeslat()
navážeme na události formuláře místo klasického (synchronního) odeslání, které je spojeno s načtením celé nové stránky.
Formulář vymažeme až po úspěšném uložení komentáře na serveru – vložené údaje se tak uživateli neztratí, ani při dočasné chybě serveru nebo špatné syntaxi komentáře. Smazáním obsahu formuláře se pak vyhneme případnému opětovnému odeslání (komentář s nulovou délkou nelze vložit). Případně bychom mohli formulář skrýt nebo ho nechat třeba „odletět“ pomocí nějakého pěkného efektu, to už nechám na vás (začít můžete třeba u pluginů do jQuery jako je Flip!).
Na straně serveru
Na straně serveru teď potřebujeme nějak obsloužit požadavky, které přicházejí na URL /komentare
. K tomu využijeme technologii servletů, se kterou jsme se seznámili v devátém díle. Implementaci datové vrstvy a kontroly formátování máme hotovou už od minule a zapouzdřenou do EJB, takže jí přepisovat nemusíme – jediné, co je potřeba upravit, je relativně tenká vrstva, která se stará o překlad z HTTP parametrů na objekty a o vykreslení hlášek informujících uživatele o výsledku (původní implementace této vrstvy byla celá v JSP).
Servlety nám umožní příjemnější zápis dané logiky než JSP – přeci jen programovat v dokumentově orientovaném formátu XML cykly a podmínky není dvakrát zábavné ani pro milovníky XML.
Náš servlet se nachází ve třídě Komentare
a podstatná je jeho metoda doPost()
:
@Override protected void doPost(HttpServletRequest pozadavek, HttpServletResponse odpoved) throws ServletException, IOException { PodnikRemote ejb = hledac.getPodnikEJB(); /** Načteme HTTP parametry */ Komentar k = new Komentar(); k.setPodnik(Integer.decode(pozadavek.getParameter("podnik"))); k.setNadpis(pozadavek.getParameter("nadpis")); k.setKomentar(pozadavek.getParameter("komentar")); k.setTyp(Komentar.TYP.valueOf(pozadavek.getParameter("typ"))); boolean ulozit = Boolean.valueOf(pozadavek.getParameter("odeslat")); String jsp; try { /** Komentář odešleme do nižší vrstvy ke kontrole nebo rovnou k uložení */ k = ejb.komentuj(k, ulozit); pozadavek.setAttribute("komentar", k); if (ulozit) { jsp = "/WEB-INF/casti/ajaxKomentare/odeslano.jsp"; } else { jsp = "/WEB-INF/casti/ajaxKomentare/nahled.jsp"; } } catch (Exception e) { /** Objekty mezi servletem a JSP si můžeme předávat pomocí atributů požadavku */ pozadavek.setAttribute("chyba", e); jsp = "/WEB-INF/casti/ajaxKomentare/chyba.jsp"; } /** O vykreslení XHTML vyýstupu se už zase postará JSP */ RequestDispatcher rd = getServletContext().getRequestDispatcher(jsp); rd.forward(pozadavek, odpoved); }
Z HTTP požadavku si nejprve načteme parametry a tím provedeme i jejich základní typovou kontrolu. Nějaké uživatelsky přívětivé chybové hlášky v této fázi nemusíme řešit – pokud by např. v parametru podnik
nebyla celočíselná hodnota nebo parametr typ
neodpovídala našemu číselníku ( enum
), došlo by ke standardní chybě 500 Interní chyba serveru. To se ale stane jen v případě, že by se uživatel v aplikaci „vrtal“ a podstrkával jí ručně svoje parametry – na takového uživatele nemusíme brát zřetel a vyrábět pro něj přívětivé chybové hlášky.
Školení Javy
Java je multiplatformní programovací jazyk, který vytvořila a vyvíjí společnost Sun. Java je silný, objektově orientovaný jazyk se širokou komunitou, nabízející především vysokou produktivitu vývoje. Přijďte na školení Základy programovacího jazyka Java 7. 9. 2010 od 9:00, nebo na Pokročilejší kurz jazyka Java 8. 9. 2010 opět od 9:00.
V Javě se skvěle programuje, ale na druhou stranu se v ní špatně vytvářejí HTML dokumenty – mohli bychom k tomu sice použít HttpServletResponse.getWriter().print(String
a „lepit“ výsledné HTML z kousků textu, ale nejen že by to bylo nepohodlné, ale také by byla velká pravděpodobnost, že někde uděláme chybu a výsledný kód bude obsahovat např. neuzavřené značky. Naštěstí existuje způsob, jak skloubit programování v Javě a vytváření HTML v JSP dohromady. Pomocí
text);RequestDispatcher
u a jeho metody forward()
můžeme řetězit za sebe servlety a JSP (což jsou ve výsledku taky servlety) a díky tomu udělat část práce v javovském kódu a část v JSP.
V připojeném JSP máme k dispozici jednak původní GET/POST parametry, které dorazily na servlet a jednak JSPčku můžeme předávat další data (objekty) pomocí atributů požadavku – HttpServletRequest.setAttribute()
, které jsou identifikované jednoduše textovým klíčem.
Vytvořený servlet nezapomeneme přidat do souboru web.xml
a namapovat na požadované URL:
<servlet> <description>Odesílání a náhledy komentářů pomocí AJAXu.</description> <servlet-name>komentare</servlet-name> <servlet-class>cz.frantovo.nekurak.servlet.Komentare</servlet-class> </servlet> <servlet-mapping> <servlet-name>komentare</servlet-name> <url-pattern>/komentare</url-pattern> </servlet-mapping>
JSP, na které se v servletu odkazujeme, je velmi jednoduché a nám známé – nový je jen způsob, kterým přistupujeme k atributům požadavku (objektům). Ty se nacházejí v poli requestScope[]
pod námi zvoleným klíčem. Dále s těmito objekty pracujeme, jak jsme zvyklí (pomocí .komentar
přistupujeme k vlastnosti objektu – ve výsledku se volá metoda getKomentar()
třídy Komentar
).
<?xml version="1.0" encoding="UTF-8"?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:nk="urn:jsptagdir:/WEB-INF/tags/nekurak" version="2.0"> <div> <p class="informacniHlaska"><fmt:message key="komentare.nahledNadpis"/>:</p> <!-- XHTML je už zkontrolované: → vypíšeme ho rovnou --> ${requestScope['komentar'].komentar} </div> </jsp:root>
Závěr
Dnes jsme vylepšili naši aplikaci tak, aby se formulář pro komentování odesílal AJAXem, což uživatelům zpříjemní práci s webem – tedy alespoň těm se zapnutým Javascriptem (pro ostatní je tu původní implementace s klasickým odesíláním HTML formuláře). Při tom jsme si prakticky ukázali, jak skloubit servlety a JSP a mít z obou to lepší – ze servletů programování a z JSP tvorbu HTML/XML dokumentů.
Odkazy
- jQuery serialize() – funkce pro URL-kódování formulářů.
- jQuery load() – jednoduchá funkce pro načítání AJAXových odpovědí do elementu.
- jQuery Ajax – plnohodnotné funkce pro práci s AJAXem.
- RequestDispatcher vs. sendRedirect – rozdíl RequestDispatcheru oproti HTTP přesměrování.
- Myslete, když navrhujete formulář – blogový zápisek s šikovnými tipy k našemu tématu.
- Použitelné a přístupné webové formuláře – další pojednání na téma formuláře.
Přehled komentářů