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 Lekérdezés
HTTP kérés Webszerver (Web réteg)
Webböngész!
Adatbázis
HTTP válasz (HTML,CSS, képek)
Adatok
Klasszikus webalkalmazás
Lekérdezés
HTTP kérés
Webböngész! JavaScript AJAX motor
UI JavaScript HTML, CSS
(XML adatok)
Webszerver (Web réteg)
HTTP válasz
Adatbázis
Adatok
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
Hello <script language="javascript" src="com.google.gwt.sample.hello.Hello.nocache.js">
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
