Web-fejlesztés NGM_IN002_1 Rich Internet Applications
RIA Vékony-kliens generált (statikus) HTML megjelenítése szerver oldali feldolgozással szinkron oldal megjelenítéssel RIA desktop alkalmazások funkcionalitása és tulajdonságai fejlett felhasználói felületek kialakítása kö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ások egyszer" installálás platform függetlenség biztonságos RIA gazdagabb felhasználói interakció gyorsabb válaszid!k desktop look & feel szerver terhelés csökkentése kisebb 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ás tervezési szabadság, tesztelési nehézségek Weboldal paradigma megszünése Aszinkron kommunikáció és terhelés elosztás Böngész! adaptáció DOM manipulálás (W3C, MS),CSS, plug-in, Applet Különböz! keretrendszerek Felhaszná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ásmodell HTTP kérés Lekérdezés Webböngész! Webszerver (Web réteg) Adatbázis HTTP válasz (HTML,CSS, képek) Adatok Klasszikus webalkalmazás Webböngész! JavaScript HTTP kérés Lekérdezés UI JavaScript HTML, CSS AJAX motor (XML adatok) HTTP válasz Webszerver (Web réteg) Adatok Adatbázis 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 alapjai Kliens oldali technológiák HTML, XHTML CSS DOM XML XSLT XMLHttp JavaScript Szerver oldali (backend) megoldás PHP, Servlet, JSP, stb. Az AJAX kommunikációs módszerei Rejtett keret módszer új tartalom betöltése a rejtett keretbe history kezelése XMLHttp kérések (XHR) aszinkron http kérés JavaScriptb!l küls! er!forráshoz proxy Dinamikus script betöltés <script/> elem hozzáadása a DOM-hoz
Rejtett keret megoldás Webböngész! Látható keret HTTP kérés Webszerver Adatbázis JavaScript hívás JavaScript hívás Rejtett keret HTTP válasz (adatok, script) 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ása JavaScript osztálykönyvtárak Yahoo! Connection Manager böngész! független statikus metódusok (function) kapcsolat orientált kommunikációra jquery DOM módosítás CSS szelektorokkal és egyszer" xpath kifejezésekkel Fejleszt! környezetek GWT UI kialakítása, tesztelése Javaban -> HTML, JavaScript kimenet Google Web Toolkit Java frontend fejlesztés böngész! független optimalizált JavaScript kimenet tetsz!leges Java fejleszt!környezet használható Komponensek Java-to-JavaScript fordító GWT hosted web böngész! speciális JVM böngész! elemekkel JRE emulációs JavaScript könyvtárak Web UI komponens könyvtár Példa
Adobe Flex Megjelenítés kialakítása stateful client Flash platform MXML ActionScript SDK UI komponensek szolgáltatások IDE Flex Builder OpenLaszlo Nyílt forrású RIA fejlesztési platform LZX (deklaratív) programozási nyelv JavaScript Cinematic User Experience Alkalmazások Flash, DHTML SOLO OpenLaszlo Server (Servlet)
Google Maps Vissza GWT <html> <head> <title>hello</title> </head> <body bgcolor="white"> <script language="javascript" src="com.google.gwt.sample.hello.hello.nocache.js"></script> </body> </html> 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); } } 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);}}... Vissza