Embed Size (px)
DESCRIPTION
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. AJAX. Új felhasználói élmény Részleges frissítés - PowerPoint PPT Presentation
Citation preview
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
8. Felhasználói interakció JSF + AJAX
Dr. Bilicki Vilmos
Szegedi Tudományegyetem
Informatikai Tanszékcsoport
Szoftverfejlesztés Tanszék
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
TartalomAJAXJSPJSF
■ MVC megvalósítása■ Komponens■ Életciklus■ AJAX támogatás
FACELETS
23.04.22. 2
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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
23.04.22. 3Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
GWTJava - 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árWidgetek és eszközök
23.04.22. 4Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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"); } }}
23.04.22. 5Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
GWT fejlesztés
Kódolás az IDE-benFuttatás a“hosted-mode” böngészőbenHibakeresés az IDE-benLefordítás JavaScript/Test “web-mode”-banTelepítés a szerverre
23.04.22. 6Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Sok fájl
Canvas canvas = Canvas.create(370, 370);
public abstract class Canvas extends Widget { … }
public class FFCanvasImpl extends Canvas { … }
public class IECanvasImpl extends Canvas { … }
Böngésző/nyelv ~ 25 fájl
23.04.22. 7Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Alapvető funkciók
Java JavaScript fordítóJRE Emulation LibraryJavaScript hídWidgets és panelekHistory alrendszerUtilities
23.04.22. 8Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Java JavaScript fordító
Java forráskódot használja, nem a bájtkódotJava 5 nyelvi támogatásMemória szivárgás kezelésTöbb JavaScript fájlt gyárt
Böngésző verziónként egyetNyelvenként egyet
Képek betöltése optimalizálható
23.04.22. 9Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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)
23.04.22. 10Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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; }-*/;}
23.04.22. 11Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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)
23.04.22. 12Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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
23.04.22. 13Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Utilities
XML Parser / DOMAnimation loopBenchmark toolJUnit TestCase/TestSuite for GWTNumber formattingCookie handlingEtc.
23.04.22. 14Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Fejlett Szolgáltatások
RPCInternationalizationImage bundlesKözvetett KötésGeneratorsLinkers
23.04.22. 15Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Remote Procedure Calls
GWT-RPCRequestBuilderFormPanelJSON supportXML supportNincs SOAP/XML-RPC support
23.04.22. 16Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Internationalization
Static string insertion (compile time)
Dynamic string insertion (run time)
Left-to-Right supportNumber/Date formatting
23.04.22. 17Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Image Csomagok
Egy fájlba csomagolhatóak a képekCSS segítségével szedi ki belőle
23.04.22. 18Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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); …}
23.04.22. 19Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
RAP
23.04.22. 20Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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 Servlet API-hoz (html programoz is !)
Nehézkes RAD eszözöket vagy WYSIWYG eszközöket alkalmazni
23.04.22. 21Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
MegoldásokTemplate 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
23.04.22. 22Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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>
23.04.22. 23Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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>
23.04.22. 24Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
A JSP áttekintéseBármilyen XML oldalon lehetXML szintakszisElvileg 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
23.04.22. 25Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Elemei Oldal direktíva
■ <%@ page contentType="text/html; charset=UTF-8" %> Akció elem direktíva
■ <%@ taglib uri=http://java.sun.com/jsp/jstl/core prefix="c" %>
Akció elemek■ <jsp:useBean id="locales"
scope="application„ class="mypkg.MyLocales"/> JSP elemek (Expression Language)
■ <c:set var="selectedFlag” value="${!empty selectedLocaleString}" />
Szkript elemek■ <%java kód%>
23.04.22. 26Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
A JSP oldal életciklusaKonvertálás ServlettéFordításFuttatásBufferelés
23.04.22. 27Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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
23.04.22. 28Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Java Bean-nek használata<jsp:useBean id=" bookDB”
scope="application” class="mypkg. bookDB "/>
<c:set var="bid" value="${param.bookId}"/><jsp:setProperty name="bookDB"
property="bookId” value="${bid}" /><jsp:setProperty name="bookDB"
property=”*”/>${bookDB.bookDetails.title}<jsp:getProperty name="beanName"
property="propName"/>
23.04.22. 29Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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
23.04.22. 30Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Példák Core
<c:set var="foo" scope="session" value="..."/><c:forEach var="item" items="${sessionScope.cart.items}">
...<tr><td align="right" bgcolor="#ffffff">${item.quantity}</td>...
</c:forEach> URL
<acme:transform><jsp:include page="/exec/employeesList"/>
<acme:transform/><c:import url="/books.xml" var="xml" /><x:parse doc="${xml}" var="booklist"scope="application" />
SQL<c:set var="bid" value="${param.Add}"/><sql:query var="books" >select * from PUBLIC.books where id = ?<sql:param value="${bid}" /></sql:query>
23.04.22. 31Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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
23.04.22. 32Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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:catalog bookDB ="${bookDB}" color="#cccccc">
<jsp:attribute name="normalPrice"><fmt:formatNumber value="${price}" type="currency"/>
</jsp:attribute><jsp:attribute name="onSale">
<strike><fmt:formatNumber value="${price}” type="currency"/></strike><br/><font color="red"><fmt:formatNumber value="${salePrice}” type="currency"/></font>
</jsp:attribute></sc:catalog>
■ Dinamikus– Nincs specifikálva, menet közben derül ki
23.04.22. 33Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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
23.04.22. 34Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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
23.04.22. 35Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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:<%@ taglib tagdir="/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}"/>
23.04.22. 36Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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>
23.04.22. 37Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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 {StringWriter sw = new StringWriter();jspBody.invoke(sw);jspContext().getOut().println(sw.toString().toUpperCase());
}}
23.04.22. 38Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Iterátor Tag<%@ taglib uri="/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:iterator var="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>
23.04.22. 39Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Iterátor Tagpublic 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();
}
23.04.22. 40Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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 BookDBAO bookDBAO;public void jspInit() {
bookDBAO =(BookDBAO)getServletContext().getAttribute("bookDB");if (bookDBAO == null)
System.out.println("Couldn’t get database.");}%><%!public void jspDestroy() {bookDBAO = null;}%>
23.04.22. 41Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Cél
23.04.22. 42Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Java Server FacesSzerver oldali web
komponens felhasználói felületek létrehozására
Model 2, MVCA logika és a megjelenítés elkülönülHasonló lehetőségeket biztosít a
fejlesztőknek mint a Desktop GUI fejlesztése
A Servlet API-ra épül -> független a JSP-től
23.04.22. 43Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
JSFElemei:
■ API az UI komponensek reprezentálására és állapotuk kezelésére, validálásra, navigációra, …
■ JSP Elem könyvtárakSegí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
23.04.22. 44Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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” />
23.04.22. 45Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Hogyan működik
23.04.22. 46Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Kérés feldolgozási életciklus
23.04.22. 47Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
A nézet visszaállítása
Komponens fa visszaállításaFacesServlet – controllerA 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
23.04.22. Programrendszerek fejlesztése 48
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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()
23.04.22. Programrendszerek fejlesztése 49
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
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()
23.04.22. Programrendszerek fejlesztése 50
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Model értékek frissítése A bevitt érték itt szintakitkailag és szemantikailag
helyes A szerver oldali model értékeit frissíti Itt történhet meg az üzleti logika szintű validálás Ha az érték változott akkor esemény generálódik UIViewRoot.processUpdates() xBean.setProerty(component.getValue())
23.04.22. Programrendszerek fejlesztése 51
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Alkalmazás meghívása
Az alkalmazás logika meghívásaEddig az összes esemény is beérkezett
(PhaseID.INVOKE_APPLICATION)Form beküldésAz eredmény alapján másik oldalra lehet
menni■ successful outcome■ faces-config.xml (vagy annotáció)
23.04.22. Programrendszerek fejlesztése 52
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Válasz elkészítése
A komponensek aktuális állapotának kirajzolása
Az válasz állapota elmentődik a következő kérések feldolgozásához
ViewHandler.renderView()Faces View Decoration Language (VDL)
23.04.22. Programrendszerek fejlesztése 53
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
AJAX támogatás
Kliens oldalon■ Frissíthetjük a JSF komponenseket
– Teljes feldolgozás– Csak renderelés
■ Eseményeket kezelhetünk
Szerver oldalon■ Elérhetjük a menedzselt babokat
23.04.22. Programrendszerek fejlesztése 54
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
f:ajax render
■ Elem lista melynek az értékét frissíteni kell (csak render)
execute■ Elem lista melyeket vissza kell küldeni a szerverre
végrehajtásra (minden lépésen végigmegy) event
■ A DOM esemény melyre reagál (mouseover, …) ■ JSF+
– action– valueChange
listener
23.04.22. Programrendszerek fejlesztése 55
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Navigáció definiálása<navigation-rule>
<from-view-id>/greeting.jsp</from-view-id><navigation-case>
<from-outcome>success</from-outcome><to-view-id>/response.jsp</to-view-id>
</navigation-case></navigation-rule><navigation-rule>
<from-view-id>/response.jsp</from-view-id><navigation-case>
<from-outcome>success</from-outcome><to-view-id>/greeting.jsp</to-view-id>
</navigation-case></navigation-rule><h:commandButton id="submit" action="success"value="Submit" />
23.04.22. Programrendszerek fejlesztése 56
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Fejlesztési lépések1. Modell objektumok fejlesztése
2. Ezek hozzárendelése menedzselt babként
3. Web oldalak létrehozása UI komponensekkel
4. Navigáció definiálása
5. Web.xml konfigurálása
23.04.22. Programrendszerek fejlesztése 57
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
JSP problémák
JSP■ Egyszeri feldolgozás az elejétől a végéig■ Servlet gyártás a cél
JSF■ Komponens fa■ Komponens
– Létrehozása– Ha van bevitelé feldolgozása– Kirajzolás
■ Ezeket jól definiált sorrendben kell elvégezniA JSF komponens model életciklusa
független a JSP servlet életciklusától
23.04.22. Programrendszerek fejlesztése 58
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Facelets
View technológiaJSF komponens életciklus támogatásJSF elemek használataJSTL használataEL használataKomponens fát alkot nem servlet-etDRY (Do not Repeat Yourself)
megközelítés
23.04.22. Programrendszerek fejlesztése 59
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
23.04.22. Programrendszerek fejlesztése 60
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Facelets
Nézet deklarációk■ Sablonok gyárthatóak
Kompozit komponensek
23.04.22. Programrendszerek fejlesztése 61
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
Tipikus JSF alkalmazásJava Bean-ekEsménykezelőkValidátorokJSP oldalakSzerver oldali segéd osztályokFacesconfig.xml
23.04.22. 62Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
TartalomAJAXJSPJSF
■ MVC megvalósítása■ Komponens■ Életciklus■ AJAX támogatás
FACELETS
23.04.22. 63Programrendszerek fejlesztése
UN
IVER
SIT
Y O
F SZ
EG
ED
Dep
artm
ent o
f Sof
twar
e E
ngin
eeri
ng
UN
IVE
RS
ITA
S S
CIE
NT
IAR
UM
SZ
EG
ED
IEN
SIS
A következő előadás tartalomaCDI/Kontextusok - Web BabEJB
■ Babok■ Tranzakció■ Biztonság
23.04.22. 64Programrendszerek fejlesztése
