rich inter net applicationsheckenas/okt/webf11.pdfria v kony-kliens gener lt (statikus) html...
TRANSCRIPT
Web-fejlesztésNGM_IN002_1
Rich Internet Applications
RIA
Vékony-kliensgenerált (statikus) HTML megjelenítéseszerver oldali feldolgozással szinkron oldal megjelenítéssel
RIAdesktop alkalmazások funkcionalitása és tulajdonságaifejlett felhasználói felületek kialakításaköztes kód-végrehajtási réteg -> kliens oldali motor
aszinkron kód- és tartalom letöltés
RIA el!nyök
Browserben futó alkalmazásokegyszer" installálásplatform függetlenségbiztonságos
RIAgazdagabb felhasználói interakciógyorsabb válaszid!kdesktop look & feelszerver terhelés csökkentésekisebb hálózati forgalom
RIA hátrányok
Korlátozott er!forrás hozzáférés (homokozó)
Plug-in vagy JavaScript támogatás szükséges
Kliens oldali motor letöltési ideje
Láthatóság keres! gépek számára
Nehezebb “akadálymentesítés”
RIA fejlesztési kérdések
Megnövekedett komplexitástervezési szabadság, tesztelési nehézségek
Weboldal paradigma megszünéseAszinkron kommunikáció és terhelés elosztásBöngész! adaptáció
DOM manipulálás (W3C, MS),CSS, plug-in, Applet
Különböz! keretrendszerekFelhasználói interakció minták
RIA megoldások
JavaScript / AJAX
Google Web Toolkit
Adobe Flex
OpenLaszlo
Java Appletek
MS Silverlight
ActiveX vezérl!k
Az AJAX
Technológiák ötvözése
Web alkalmazás fejlesztési megközelítés
Felhasználói interakciók javítása
W3C megoldások felhasználása
AJAX alkalmazás-modell
Webböngész!Webszerver(Web réteg) Adatbázis
HTTPkérés
HTTPválasz
(HTML,CSS, képek)
Lekérdezés
Adatok
Webböngész!
Webszerver(Web réteg) Adatbázis
HTTPkérés
HTTPválasz
Lekérdezés
Adatok
UIAJAX motor
JavaScript
JavaScriptHTML, CSS
(XML adatok)
Klasszikus webalkalmazás
AJAX webalkalmazás
AJAX alapelvek
Forgalom minimalizálás
“nyers” adatforgalom, formázás a kliens oldalon
Nem “webes” felhasználói interakció modell
direkt manipuláció, ismert metaforák
oldal kontextus fellazítása
felhasználó orientáltság
Példa
Az AJAX technológi alapjaiKliens oldali technológiák
HTML, XHTMLCSSDOMXML
XSLTXMLHttpJavaScript
Szerver oldali (backend) megoldásPHP, Servlet, JSP, stb.
Az AJAX kommunikációs módszerei
Rejtett keret módszerúj tartalom betöltése a rejtett keretbehistory kezelése
XMLHttp kérések (XHR)aszinkron http kérés JavaScriptb!l
küls! er!forráshoz proxyDinamikus script betöltés
<script/> elem hozzáadása a DOM-hoz
Rejtett keret megoldás
Webböngész!
WebszerverAdatbázisHTTP kérés
HTTP válasz(adatok, script)
Látható keret
Rejtett keret
JavaScript hívás JavaScript hívás
AJAX minták
Tervezési minták AJAX környezetre
Prediktív lekérés
Korlátozott felküldés
inkrementális szerveroldali "rlap validálás
Periódikus frissítés
Több fázisú oldal letöltés
AJAX fejlesztés támogatásaJavaScript “osztálykönyvtárak”
Yahoo! Connection Managerböngész! független statikus metódusok (function) kapcsolat orientált kommunikációra
jQueryDOM módosítás CSS szelektorokkal és egyszer" xPath kifejezésekkel
Fejleszt! környezetekGWT
UI kialakítása, tesztelése Javaban -> HTML, JavaScript kimenet
Google Web Toolkit
Java frontend fejlesztésböngész! független optimalizált JavaScript kimenettetsz!leges Java fejleszt!környezet használható
KomponensekJava-to-JavaScript fordítóGWT hosted web böngész!
speciális JVM böngész! elemekkelJRE emulációs JavaScript könyvtárak Web UI komponens könyvtár
Példa
Adobe Flex
Megjelenítés kialakításastateful client
Flash platformMXMLActionScript
SDKUI komponensekszolgáltatások
IDEFlex Builder
OpenLaszlo
Nyílt forrású RIA fejlesztési platformLZX (deklaratív) programozási nyelvJavaScriptCinematic User Experience
AlkalmazásokFlash, DHTMLSOLOOpenLaszlo Server (Servlet)
Vissza
Google Maps
Vissza
GWT
public class Hello implements EntryPoint {
public void onModuleLoad() {
Button b = new Button("Click me", new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello, AJAX");
}
});
RootPanel.get().add(b);
}
}
<html>
<head>
<title>Hello</title>
</head>
<body bgcolor="white">
<script language="javascript" src="com.google.gwt.sample.hello.Hello.nocache.js"></script>
</body>
</html>
function com_google_gwt_sample_hello_Hello(){var
l=window,k=document,t=l.external,ab,w,q,p='',z={},db=[],F=[],o=[],C,E;if(!
l.__gwt_stylesLoaded){l.__gwt_stylesLoaded={};}if(!l.__gwt_scriptsLoaded)
{l.__gwt_scriptsLoaded={};}function v(){try{return t&&
(t.gwtOnLoad&&l.location.search.indexOf('gwt.hybrid')== -1);}catch(a){return false;}}
function y(){if(ab&&w){var c=k.getElementById('com.google.gwt.sample.hello.Hello');var
b=c.contentWindow;b.__gwt_initHandlers=com_google_gwt_sample_hello_Hello.__gwt_initHandler
s;if(v()){b.__gwt_getProperty=function(a){return r(a);};}
com_google_gwt_sample_hello_Hello=null;b.gwtOnLoad
(C,'com.google.gwt.sample.hello.Hello',p);}}
...