A JAX i praksis By Geir Otto Olsen THInc Consulting AS.

Presentasjon om: "A JAX i praksis By Geir Otto Olsen THInc Consulting AS."— Utskrift av presentasjonen:

1 A JAX i praksis By Geir Otto Olsen THInc Consulting AS

2  HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

3 HTML, Javascript, CSS og DOM HTMLHTML Hypertext Markup Language, hvor hypertext refererer til hyperlinks, hvor hyper viser til at det ikke er linært, dvs. du kan gå hvorsomhelst, ingen gitt rekkefølge. C ascading S tyle S heets C ascading S tyle S heets brukes for å kontrollere hvordan htmlsidene blir presentert, og gir en bedre lesbarhet. J ava S cript J ava S cript gjør det mulig å legge på grunnlegende funksjonalitet som hendelsesstyring, animasjon osv. DOMDOM Document Object Model, som er en platform- og språk- uavhengig standard for beskriving av HTML og XML dokumenter, samt et API for spørring, traversering og manipulering av disse dokumenter.

4  HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

5 Webserver Et program som aksepterer HTTP forespørsler fra web browsere (klienter), og gir HTTP svar tilbake med valgfritt datainnhold, som ofte består av web sider som HTML dokumenter og linket bilder m.m. Vendor ProductWeb Sites HostedPercent Apache 96,531,03352.05% Microsoft IIS61,023,47432.90% Google GWS9,864,3035.32% nginx 3,462,5511.87% lighttpd 2,989,4161.61% Oversee 1,847,0391.00% Others -9,756,6505.26% Total -185,474,466100.00%

6  HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

7 Webspeed WebSpeed®, sammen med andre Progress® produkter, gir utviklere mulighet til raskt å lage skalerbare forretningsapplikasjoner som kan prosessere store volum av transaksjoner over internett.

8  HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

9 Kommunikasjon På grunn av den økende mengden av data som beveger seg via internett, samt begrensning i visse medier når det gjelder båndbredde, vil det være nødvendig å begrense mengden av data en sender via de webapplikasjoner en benytter for at brukerne skal få en god opplevelse ved bruk – Geir Otto Olsen 

10  HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk Hovedtema

11 AJAX AJAX Asynchronous Javascript and Xml, er en gruppe beslektet web utviklingsteknikker som benyttes for å lage interaktive web applikasjoner, GUI applikasjoner på web. Jesse James Garrett (introduserer av Ajax) mener følgende teknikker trengs:  XHTML og CSS for presentasjon XHTMLCSS  the Document Object Model(DOM) for dynamisk visning og interaksjon med dataDocument Object Model  XML og XSLT for utveksling, manipulering og visning av data, henholdsvis XMLXSLT  XMLHttpRequest objekt for asynkron kommunikasjon, XMLHttpRequest  JavaScript for å knytte teknologiene sammen JavaScript Det er dog ikke nødvendig at selve kommunikasjonen er asynkron, den kan også være synkron. Det er heller ikke nødvendig å benytte XML.

12 Ajax – hva og hvordan?  Metoder  Open(method,url,async)  setRequestHeader(label,value)  Send(content)  Properties  readyState  Onreadystatechange ): hendelse for hver readyState....  responseText ):  responseXML ):  Status ): returnerer f.eks. 200 = ok, 404 = not found  statusText ): OK, not found.... Se over

13  HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

14 Rammeverk Framework Response %Response count BackbaseBackbase, an Enterprise Ajax Framework for creating Rich Internet Applications 8.3216 Dojo ToolkitDojo Toolkit, an Open Source DHTML toolkit written in JavaScript 11.8310 Ext (javascript library)Ext (javascript library), a library that extends Prototype, Jquery and YUI until version 1.0. Since version 1.1 a standalone Ajax framework. 22.5589 jQueryjQuery, a JavaScript framework that provides an Ajax framework and other utilities 29.3767 MootoolsMootools, a compact and modular JavaScript framework best known for its visual effects and transitions 14.3375 PrototypePrototype, a JavaScript framework that provides Ajax and other utilities 34.1892 Script.aculo.usScript.aculo.us, Used with the Prototype Framework, mainly for animations and interface development 22.3585 Yahoo! UI LibraryYahoo! UI Library, a set of utilities and controls, for building richly interactive web applications using techniques such as DOM scripting, DHTML and Ajax 13.0341 Peter van Dam sin bok Making Progress with Ajax, er en utmerket bok for å forstå hvordan ting henger i sammen opp mot Progress.

15 Demo • Ren HTML • Kommunikasjon med webserver • WebSpeed – SpeedScripting • Kommunikasjon med webserver og WebSpeed Messenger (POX - Plain Old XML) • Ajax • DOM, XML og Javascript • WebSpeed + AppServer = gjenbruk • TomCat + AppServer istedet for webservices • Ved å kalle TomCat( Servlet), vil en kunne gå direkte til AppServer • Sonic HTTP request reader + AppServer gir også en sterk og fleksibel arkitektur • jQuery • Den enkle verden 

16 Ren HTML WebBrowser (klient) Peker til http://thincmobil2/msgboard/login.html WebServer (tjener) Fil login.html

17 HTML med CSS  http://localhost/msgboard/login01.html http://localhost/msgboard/login01.html

18 WebSpeed - Speedscripting WebServer  scripts/cgiip.exe  scripts/msgboard.wsc (som peker til cgiip.exe) http://localhost/scripts/msgboard.wsc/login02.html http://localhost/scripts/msgboard.wsc/login02a.html med AppServer kall – eksemplifisering http://localhost/scripts/msgboard.wsc/login02b.html Og funksjonibel kode http://localhost/scripts/msgboard.wsc/login02c.html

19 Ajax  Javascript  Cross browser  function createRequest() {return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(”Microsoft.XMLHTTP”);}  GET og POST  GET benytter URL querystring, med dens begrensinger  POST benytter HTTP request HEADER og kan sende ubegrenset mengde  open(”GET|POST”,URL,”YES|NO”) /*metode,url,asynkront*/  Synkront og Asynkront  Asynkront krever mer med hensyn til håndtering av svar på kallet

20 Ajax eksempler  Basic Ajax call – GET | POST  http://localhost/scripts/msgboard.wsc/login03.html http://localhost/scripts/msgboard.wsc/login03.html  Basic Ajax call - benytt DOM for plassering av svar  http://localhost/scripts/msgboard.wsc/login03a.html http://localhost/scripts/msgboard.wsc/login03a.html  getElementById(), getElementsByTagName...  Mange tilbydere av javascript biblioteker som inneholder masse ferdigfunksjonalitet: wforms,jQuery....  Basic Ajax call – send parametre  setRequestHeader("Content-Type","application/x-www-form-urlencoded");  http://localhost/scripts/msgboard.wsc/login03b.html http://localhost/scripts/msgboard.wsc/login03b.html  Using XML  setRequestHeader("Content-Type",”Text/xml");  NB! Kan ikke sende parametre på samme måte som ved application/x-www-form-url...  http://localhost/scripts/msgboard.wsc/login03c.html http://localhost/scripts/msgboard.wsc/login03c.html  Eksempel med xml parametre sendt over  http://localhost/scripts/msgboard.wsc/login03d.html http://localhost/scripts/msgboard.wsc/login03d.html

21 jQuery rammeverk  Rammeverk for javascript, med masse ferdigkode. http://jquery.com http://jquery.com  “jQuery is a new kind of JavaScript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”  http://localhost/scripts/msgboard.wsc/login04.html http://localhost/scripts/msgboard.wsc/login04.html  http://localhost/scripts/msgboard.wsc/login05.html http://localhost/scripts/msgboard.wsc/login05.html  Complex layouts with jQuery  http://www.webappers.com/2009/01/15/create-complex- application-layout-with-uilayout http://www.webappers.com/2009/01/15/create-complex- application-layout-with-uilayout  http://www.ericmmartin.com/simplemodal / http://www.ericmmartin.com/simplemodal /