JSF 2 ja AJAX

Pitkästä aikaa pääsin taas pitämään JSF 2 koulutuksia. Kovasti olen tästä tekniikasta itse pitänyt, siinä on huomattavia parannuksia versioon 1 nähden mutta siltikään ei joudu aikaisempia oppejaan täysin hukkaan heittämään.

Yksi koukuttava uutuus on JSF AJAX moduuli. JSF 1 heikkoutena oli aiemmin että kun se oli täysin serveripuolen ratkaisu, ja vielä korkealla nostetulla abstraktiotasolla, niin AJAX ei oikein istunut kuvaan. Sitä voi scriptata komponenttien sisään mutta Googlen suosima yhden sivun ajax malli ilman navigointia ei oikein onnistu elleivät kontrollit keskustele keskenään niin client kuin server puolellakin.

JSF 2 to the rescue! Nyt löytyy parannettu elinkaarimalli, JavaScript kirjasto AJAX:ia varten, ja myös helppo tag jolla käskyttää JSF kontrolleja JavaScriptin kautta. Näin ollen sivu jolta ei navigoida ollenkaan pois on nyt mahdollinen.

Perusidea on että vaiheet execute (sisältäen muodosta oliomalli sivusta, päivitä sitä lähetetyillä parametreilla, validoi, konvertoi, kopioi tiedot model:eihin, ja suorita koodi) ja render (käy puumalli läpi ja käske kontrolleja generoimaan lopputulokseen tarvittava HTML) on nyt erotettu toisistaan, ja lisäksi tukevat osittaista suoritusta ja renderöintiä. Näin voidaan pähkinänkuoressa sanoa: Suorita kontrolliin a liittyvät vaiheet, ja piirrä kontrolli b. Eli reagoi johonkin eventtiin, ja päivitä joku osa sivua.

Tässä siis klassinen hello world versio tästä:

<h:form>
   <h:inputText id="name" value="#{helloBean.name}"/>
     <h:commandButton value="Greet me">
	 <f:ajax execute="name" render="output" />
     </h:commandButton>
   <h2><h:outputText id="output" value="#{helloBean.greeting}" /></h2>
</h:form>

Eli tuossa käytännössä todetaan: kun painat nappia, suorita kontrolli jonka id on ’name’, ja päivitä kontrolli jonka id on ’output’. Jos haluaa reagoida muihin javascript eventteihin, ylläolevassa voidaan lisätä parametri ’event’. Ja suorittaessa kontrollia ’name’ mekanismi käy siis pistämässä kaikki muuttujat paikalleen, ja ajaa tarvittaessa myös action bindingit. Todellinen voima ei piile napin painalluksen käsittelyssä, vaan muissa javascript eventeissä, mutta sekin voi olla hyödyllinen – esim. taulurakenne jossa on sorttaukseen ja sivutukseen napit jotka eivät navigoi pois sivulta, vaan päivittävät managed bean tilaa ja renderöivät vain taulun uusiksi.

Tässä esimakua aiheesta, jos päädyn leikittelemään asialla lisää kirjoittelen pikkasen hello worldiä kiintoisampia kikkailuja. Näitä on toki jo maailmalla ruodittu, esim. html 5 canvas elementistä saa paketoitua aika kivan komponentin JSF 2 komposiittimallilla.

 

Advertisements

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s