Modern Web Development Techniques using AJAX and GWT\

8. Felhasználói interakció JSF + AJAX Dr. Bilicki Vilmos Szegedi Tudományegyetem Informatikai Tanszékcsoport Szoftverfejlesztés Tanszék

Tartalom • AJAX • JSP • JSF • MVC megvalósítása • Komponens • Életciklus • AJAX támogatás • FACELETS

Programrendszerek fejlesztése AJAX • Új felhasználói élmény • Részleges frissítés • Aszinkron háttérben történő frissítés • Dinamikus GUI • Nagy adatmennyiség kezelése

Programrendszerek fejlesztése GWT • Java - JavaScript fordító • “hosted-mode” böngésző (fordítás nélkül futtatható, debug támogatás) • JRE emulációs könyvtár • Widgetek és eszközök

Programrendszerek fejlesztése GWT “Hello World” • public class HelloWorld implements EntryPoint • { • public void onModuleLoad () • { • Button button = new Button("Click Me"); • button.addClickHandler(new HelloButtonClickHandler()); • RootPanel.get().add(button); • } • class HelloButtonClickHandler implements ClickHandler • { • public void onClick (ClickEvent event) • { • Window.alert("Hello World"); • } • } • }

Programrendszerek fejlesztése GWT fejlesztés • Kódolás az IDE-ben • Futtatás a“hosted-mode” böngészőben • Hibakeresés az IDE-ben • Lefordítás JavaScript/Test “web-mode”-ban • Telepítés a szerverre

Programrendszerek fejlesztése Sok fájl • Böngésző/nyelv ~ 25 fájl Canvas canvas = Canvas.create(370, 370); public abstract class Canvas extends Widget { … } public class FFCanvasImpl extends Canvas { … } public class IECanvasImpl extends Canvas { … }

Programrendszerek fejlesztése Alapvető funkciók • Java JavaScript fordító • JRE Emulation Library • JavaScript híd • Widgets és panelek • History alrendszer • Utilities

Programrendszerek fejlesztése Java JavaScript fordító • Java forráskódot használja, nem a bájtkódot • Java 5 nyelvi támogatás • Memória szivárgás kezelés • Több JavaScript fájlt gyárt • Böngésző verziónként egyet • Nyelvenként egyet • Képek betöltése optimalizálható

Programrendszerek fejlesztése JRE Emulation Library • A GWT a JavaScript képességei miatt limitált • Package java.lang (primitive containers, exceptions, System, StringBuffer, Iterable, Comparable, Runnable, etc.) • Package java.util (Collection, Map, Set, List, Arrays, Enumeration, Iterator, Date, etc. … but no Calendar) • Package java.lang.annotation (Annotation, Retention, etc.) • Package java.io (Serializable, OutputStream, PrintStream) • Package java.sql (Date, Time, Timestamp)

Programrendszerek fejlesztése JavaScript híd • JavaScript Native Interface (JSNI) • JavaScript Overlay Types public class BookJs extends JavaScriptObject { protected BookJs () { } public final native String getName () /*-{ return this.name; }-*/; public final native String getAuthor () /*-{ return this.author; }-*/; }

Programrendszerek fejlesztése Widget-ekés Panelek • Basic layout (HorizontalPanel, VerticalPanel, FlowPanel) • Table layout (FlexTable, Grid) • Exact positioning (AbsolutePanel) • Specialized panels (StackPanel, DisclosurePanel, etc.) • Forms (HTMLForm, Button, RichTextArea, FileUpload, etc.) • Menus (MenuBar, Tree) • Tabs (TabPanel, TabBar) • Auto completion (SuggestBox) • And more (Incubator project)

Programrendszerek fejlesztése History alrendszer • Lehetővé teszik a navigációs gombok használatát <iframe src="javascript:''“ id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> History.addHistoryListener(new HistoryListener() { public void onHistoryChanged(String historyToken) { if (“help-page”.equals(historyToken)) { … } } }); http://gwtsandbox.com/gwtapp.html#help-page

Programrendszerek fejlesztése Utilities • XML Parser / DOM • Animation loop • Benchmark tool • JUnit TestCase/TestSuite for GWT • Number formatting • Cookie handling • Etc.

Programrendszerek fejlesztése Fejlett Szolgáltatások • RPC • Internationalization • Image bundles • Közvetett Kötés • Generators • Linkers

Programrendszerek fejlesztése Remote Procedure Calls • GWT-RPC • RequestBuilder • FormPanel • JSON support • XML support • Nincs SOAP/XML-RPC support

Programrendszerek fejlesztése Internationalization • Static string insertion (compile time) • Dynamic string insertion (run time) • Left-to-Right support • Number/Date formatting

Programrendszerek fejlesztése Image Csomagok • Egy fájlba csomagolhatóak a képek • CSS segítségével szedi ki belőle

Programrendszerek fejlesztése Közvetett Kötés • Lehetővé teszi a böngésző függő osztály implementációkat <replace-with class="com.google.gwt.user.client.impl.DOMImplIE6"> <when-type-is class="com.google.gwt.user.client.impl.DOMImpl"/> <when-property-is name="user.agent" value="ie6"/> </replace-with> <replace-with class="com.google.gwt.user.client.impl.DOMImplMozilla"> <when-type-is class="com.google.gwt.user.client.impl.DOMImpl"/> <when-property-is name="user.agent" value="gecko1_8"/> </replace-with> public class DOM { static final DOMImpl impl = GWT.create(DOMImpl.class); … }

Programrendszerek fejlesztése RAP

Programrendszerek fejlesztése Probléma a Java Servlet-tel • MVC ? • Println(”<HTML></HTML>”) • Nem különülnek el a feladatok • HTML tervező • Felhasználói interfész logika fejlesztő • Üzleti logika fejlesztő • Komponens fejlesztő • Alkalmazás tervező • A fejlesztő hozzáfér a teljes ServletAPI-hoz (html programoz is !) • Nehézkes RAD eszözöket vagy WYSIWYG eszközöket alkalmazni

Programrendszerek fejlesztése Megoldások • Template engine-k használata • Magasabb szintű funkciók • Bővíthető építőelem készlet • Népszerűbb template motorok-k: • JSP • Velocity • FreeMarker • … • Ezekre épülő keretrendszerek: • Java Server Faces • Struts • Turbine

Programrendszerek fejlesztése JSP 1.0 <html> <head><title>Hello</title></head> <body> <h1> <% if (request.getParameter("name") == null) { out.println("Hello World"); } else { out.println("Hello, " + request.getParameter("name")); } %> </h1> </body></html>

Programrendszerek fejlesztése Velocity <html> <head><title>Hello</title></head> <body> <h1> #if ($request.getParameter("name") == null) Hello World #else Hello, $request.getParameter("name") #end </h1> </body> </html>

Programrendszerek fejlesztése A JSP áttekintése • Bármilyen XML oldalon lehet • XML szintakszis • Elvileg megvalósíthatja az MVC-t vagy Model 2-architektúrát • Model: Java Bean • View: JSP • Controler: Servlet • Azonban tipikusan Model 1 architekúra • Az üzleti logika és a megjelenítés nincs szeparálva

Programrendszerek fejlesztése Elemei • Oldal direktíva • <%@ pagecontentType="text/html; charset=UTF-8" %> • Akció elem direktíva • <%@ tagliburi=http://java.sun.com/jsp/jstl/coreprefix="c" %> • Akció elemek • <jsp:useBeanid="locales" scope="application„ class="mypkg.MyLocales"/> • JSP elemek (ExpressionLanguage) • <c:setvar="selectedFlag” value="${!emptyselectedLocaleString}" /> • Szkript elemek • <%javakód%>

Programrendszerek fejlesztése A JSP oldal életciklusa • Konvertálás Servletté • Fordítás • Futtatás • Bufferelés

Programrendszerek fejlesztése Objektumok • Implicit • A tároló hozza létre őket • Request, … • Alkalmazás specifikus • Tipikusan Java Bean-ben tárolódnak • Megosztott objektumok • Szálak között (I/N) • Kötődhetnek: • Laphoz – pageContext • Alkalmazáshoz - servletContext • Viszonyhoz – session • Kéréshez – request • Válaszhoz – response

Programrendszerek fejlesztése Java Bean-nek használata • <jsp:useBeanid=" bookDB” scope="application” class="mypkg. bookDB "/> • <c:set var="bid" value="${param.bookId}"/> • <jsp:setPropertyname="bookDB" property="bookId” value="${bid}" /> • <jsp:setPropertyname="bookDB" property=”*”/> • ${bookDB.bookDetails.title} • <jsp:getPropertyname="beanName" property="propName"/>

Programrendszerek fejlesztése Java Server Pages Standard Tag Library • Standard, gyakran használt elemek összegyűjtve • Típusai • Alap (c) • Változó támogatás • Folyam vezérlés • URL manipulálás • Egyéb • XML (x) • Alap • Folyam vezérlés • Transzformáció • I18n (fmt) • Lokalitás • Üzenet formázás • Szám, dátum formázás • Adatbázis (sql) • SQL • Egyébb (fn) • Gyűjtemény hossz • String manipulálás

Programrendszerek fejlesztése Példák • Core <c:set var="foo" scope="session" value="..."/> <c:forEach var="item" items="${sessionScope.cart.items}"> ... <tr> <tdalign="right" bgcolor="#ffffff"> ${item.quantity} </td> ... </c:forEach> • URL <acme:transform> <jsp:includepage="/exec/employeesList"/> <acme:transform/> <c:import url="/books.xml" var="xml" /> <x:parsedoc="${xml}" var="booklist" scope="application" /> • SQL <c:set var="bid" value="${param.Add}"/> <sql:query var="books" > select * fromPUBLIC.bookswhereid = ? <sql:paramvalue="${bid}" /> </sql:query>

Programrendszerek fejlesztése Saját Elem Könyvtár • Újrahasznosítható komponensek • Felhasználó által definiált JSP komponens • Könyvtárakba gyűjtik a hasonló funkciókat, egy-egy funkciót megvalósító kód az elem kezelő (Tag Handler) • Logika/Megjelenítés elkülönül • Lehetőségek: • Paraméterek átadása • Értékek visszaadása • Minden objektumot elér a JSP oldalon • Kommunikálhatnak egymással • Egymásba ágyazhatóak • Két típus: • Egyszerű (Nem lehet benne szkript elem) • Klasszikus • Tag fájl JSP vagy Java kód, a tároló fordítja le

Programrendszerek fejlesztése Attribútumok • Elem attribútumok: • Egyszerű • <pelda:p attr = ”érték”/> • <pelda:p attr = ”${object.Value}”/> • Darab (Fragment) egy JSP kód darabot kap attribútumként <sc:catalogbookDB ="${bookDB}" color="#cccccc"> <jsp:attributename="normalPrice"> <fmt:formatNumbervalue="${price}" type="currency"/> </jsp:attribute> <jsp:attributename="onSale"> <strike><fmt:formatNumbervalue="${price}” type="currency"/></strike><br/> <font color="red"><fmt:formatNumbervalue="${salePrice}” type="currency"/></font> </jsp:attribute> </sc:catalog> • Dinamikus • Nincs specifikálva, menet közben derül ki

Programrendszerek fejlesztése Törzs (Body) • Egy elem más elemeket és HTML tartalmat is tartalmazhat <c:if test="${param.Clear}"> <font color="#ff0000" size="+2"><strong> You just cleared your shopping cart! </strong><br> <br></font> </c:if> • jsp:body

Programrendszerek fejlesztése Elemek közötti kommunikáció • Megosztott objektumok segítségével kommunikálnak (oldal környezet) <c:set var="aVariable" value="aValue" /> <tt:anotherTag attr1="${aVariable}" /> • Az egymásba ágyazott elemek a privát változókat is használhatják

Programrendszerek fejlesztése Példa • Tag fájl • JSP kódot tartalmaz (WEB-INF/tags, WEB-INF/lib) <%@ attribute name="greeting" required="true" %> <%@ attribute name="name" required="true" %> <h2><font color="black">${greeting}, ${name}!</font></h2> • Használata: <%@ taglibtagdir="/WEB-INF/tags" prefix="h" %> <html> <head><title>Hello</title></head> <body bgcolor="white"> <c:set var="greeting" value="Hello" /> <form method="get"> <input type="text" name="username" size="25"> <p></p> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> <h:response greeting="${greeting}” name="${param.username}"/>

Programrendszerek fejlesztése Tag Library Descriptor • Amennyiben Java-ban írjuk meg az elemkészletünket akkor szükséges • Információt tartalmaz az elem gyűjteményről és az elemekről is <tag> <name>present</name> <tag-class>condpkg.IfSimpleTag</tag-class> <body-content>scriptless</body-content> ... <attribute> <name>test</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> ... </tag>

Programrendszerek fejlesztése Java Tag • SimpleTag, interfészt kell megvalósítani • doTag • get/set • javax.servlet.jsp.JspContext • getJspBody() • … public HelloWorldSimpleTag extends SimpleTagSupport { public void doTag() throws JspException, IOException { getJspContext().getOut().write("Hello, world."); } } public class SimpleWriter extends SimpleTagSupport { public void doTag() throws JspException, IOException { StringWritersw = new StringWriter(); jspBody.invoke(sw); jspContext(). getOut().println(sw.toString().toUpperCase()); } }

Programrendszerek fejlesztése Iterátor Tag <%@ tagliburi="/tlt" prefix="tlt" %> <html> <head> <title>Departments</title> </head> <body bgcolor="white"> <jsp:useBean id="myorg" class="myorg.Organization"/> <table border=2 cellspacing=3 cellpadding=3> <tr> <td><b>Departments</b></td> </tr> <tlt:iteratorvar="departmentName" type="java.lang.String" group="${myorg.departmentNames}"> <tr> <td><a href="list.jsp?deptName=${departmentName}"> ${departmentName}</a></td> </tr> </tlt:iterator> </table> </body> </html>

Programrendszerek fejlesztése Iterátor Tag public void doTag() throws JspException, IOException { if (iterator == null) return; while (iterator.hasNext()) { getJspContext().setAttribute(var, iterator.next()); getJspBody().invoke(null); } } public void setVar(String var) { this.var = var; } public void setGroup(Collection group) { this.group = group; if(group.size() > 0) iterator = group.iterator(); }

Programrendszerek fejlesztése Szkriptek használata • JSP oldalakon Java kódot is használhatunk • Nem célszerű használnunk mert eléggé átláthatatlan lesz az oldal • Biztonsági kockázata is van (a servlet kontextushoz is hozzáférhet mindenki) <%! private BookDBAObookDBAO; public void jspInit() { bookDBAO = (BookDBAO)getServletContext().getAttribute("bookDB"); if (bookDBAO == null) System.out.println("Couldn’t get database."); } %> <%! public void jspDestroy() { bookDBAO = null; } %>

Programrendszerek fejlesztése Cél

Programrendszerek fejlesztése Java Server Faces • Szerver oldali web komponens felhasználói felületek létrehozására • Model 2, MVC • A logika és a megjelenítés elkülönül • Hasonló lehetőségeket biztosít a fejlesztőknek mint a Desktop GUI fejlesztése • A ServletAPI-ra épül -> független a JSP-től

Programrendszerek fejlesztése JSF • Elemei: • API az UI komponensek reprezentálására és állapotuk kezelésére, validálásra, navigációra, … • JSP Elem könyvtárak • Segítségével • A felhasználói eseményeket a szerver oldali kódhoz köthetjük • Az UI komponensek adatait szerver oldali adattárolókhoz köthetjük • UI készítés újrafelhasználható elemekkel • UI állapot elmentése és betöltése • Folyamatokat definiálhatunk

Programrendszerek fejlesztése Komponens modell • UIComponent-ek (UIComponentBase) melyek leírják az UI komponensek állapotát és viselkedését • Renderelő modell mely leírja a megjelenését • Kódolás, Dekódolás • Esemény kezelő (JavaBean tervezési mintát követi) • ActionEvent • ValueChangedEvent • Konverziós modell • Validációs modell (egy vagy több üzenetet gyártanak) <h:inputText id="userNo” value="#{UserNumberBean.userNumber}” validator_length minimum=”6” maximum='10” />

Programrendszerek fejlesztése Hogyan működik

Programrendszerek fejlesztése Kérés feldolgozási életciklus

Programrendszerek fejlesztése A nézet visszaállítása • Komponens fa visszaállítása • FacesServlet – controller • A válaszból kiolvassa a view ID-t (ha nincs akkor legyártja) • Új nézet – FacesContext (viewRoot) • Kezdeti nézet – üres kontextus, mindjárt rendereléssel folytatja • Visszaküldés – már meglévő oldal, adatok érvényesítése a köv. lépés

Programrendszerek fejlesztése A kérés adatok érvényesítése • Minden komponens betölti az aktuális állapotát • A komponensek betöltődnek a FacesContext objektumból • Az értékeket a kérés paraméterekből (vagy süti,…) • Amennyiben az azonnali esemény kezelés hamis akkor az értékeket csak átkonvertálja (pl.: Integer) • Ha ez nem sikerül akkor egy üzenete tesz az üzenet sorba (FacesContext) • UIComponent.processDecodes() • converter.getAsObject() • component.setValue()

Programrendszerek fejlesztése Validációk feldolgozása • Az első esemény forrás • Validációs szabályok • JSF meglévő validátorok • Saját validátorok • Hiba esetén a FaceConfig-ba egy üzenet kerül és a komponens érvénytelen lesz jelölve • Ha nincsenek validációs hibák akkor a model értékek frissítés szakaszba lép • UIViewRoot.processValidators() • validator.validate()

Modern Web Development Techniques using AJAX and GWT\