martedì gen 23, 2007
martedì gen 23, 2007
Ajax rappresenta un fattore abilitante per il Web 2.0, ma per chi sviluppa normalmente in Java EE non è semplice affrontare la scrittura di molto codice JavaScript per poterne sfruttare appieno le potenzialità, per non parlare della varietà di framework disponibili che, se da un lato offrono tanti widget pronti, dall'altro espongono interfacce spesso diverse tra loro.
Per semplificare l'uso della tecnologia Ajax nasce jMaki, un wrapper Open Source per offrire nelle JSP/JSF delle librerie di tag come interfaccia univoca verso i più popolari framework Ajax, come Dojo, Prototype, Yahoo e tanti altri. Con la possibilità di espanderlo, inoltre, si candida a fare da wrapper anche per collezioni di widget disponibili nel futuro.
Ma come posso usarlo facilmente? Ecco un esempio di codice JSP che lo include:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" href="jmaki-standard-no-sidebars.css" type="text/css"></link>
<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %> <!-- vedi nota (1)->
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="outerBorder">
<div class="header">
<div class="banner">Application Name</div>
<div class="subheader">
<div>
<a href="mailto:feedback@youraddress">Feedback</a> |
<a href="#">Site Map</a> |
<a href="#">Home</a>
</div>
</div> <!-- subheader -->
</div> <!-- header -->
<div class="main">
<div class="content" style="height:400px">
Main Content Area
<a:ajax name="yahoo.map" args="{centerLat:41.9, mapType:'REGULAR', centerLon:12.59}"/> <!-- vedi nota (2)->
</div> <!-- content -->
</div> <!-- main -->
</div> <!-- outerborder -->
</body>
</html>
dove:
(1) si dichiara la tag library JMaki
(2) si usa il widget Yahoo Map, incluso nella libreria
La JSP in questione viene poi trasformata in HTML dall'engine jsp per includervi i JavaScript, i CSS ed i template HTML che costituiscono gli elementi base di jMaki. Nella fase di scrittura del codice posso impostare i parametri che caratterizzano i widget usati.
Ma come posso sfruttare questo framework in modo più produttivo?
Semplice, credetemi!!
Installato NetBeans 5.5, posso procedere alla ricerca dei nuovi plug-in e scaricare quello per jMaki.
Da Tools/Update Center, connettetevi e selezionate dalla lista dei plug-in offerti, quelli elencati nell'Ajax Update Center, ed in particolare jMaki Ajax Support plug-in. Dopo il restart dell'IDE sarete pronti allo sviluppo con il framework in questione.
Create un progetto di tipo Web -> Web Application. Quando il wizard vi chiederà di selezionare un framework, scegliete jMaki Ajax Framework, con configurazione CSS Layout: Standard No Sidebars.
Fatto questo, vi basterà aprire la pagina index.jsp e fare il drag&drop di:
- jMaki->Library Definition, prima del codice HTML;
- jMaki Yahoo-> Map, sotto la scritta "Main Content Area", così come mostrato in figura:
il risultato, a livello di codice, dovrebbe essere esattamente quanto visto precedentemente.
A questo punto possiamo personalizzare le properties del widget inserito nella pagina JSP, e lo facciamo semplicemente selezionando "yahoo.map" e settando le coordinate per far centrare la mappa, ad esempio, su Roma, e scegliendo di non avere le immagini da satellite, ma solo la cartina stradale:
Per Roma le coordinate saranno:
centerLat= 41.9
centerLon=12.59
mapType=Regular
...ed il gioco è fatto.
Dal menù, con Run/Run Main Project o F6, se preferite fare alla svelta, potrete vederne il risultato, con la mappa ottenuta direttamente da Yahoo nella vostra applicazione Web.
Nelle prossime settimane altri trucchi e possibilità di jMaki. Nel frattempo, buon divertimento.
Per semplificare l'uso della tecnologia Ajax nasce jMaki, un wrapper Open Source per offrire nelle JSP/JSF delle librerie di tag come interfaccia univoca verso i più popolari framework Ajax, come Dojo, Prototype, Yahoo e tanti altri. Con la possibilità di espanderlo, inoltre, si candida a fare da wrapper anche per collezioni di widget disponibili nel futuro.
Ma come posso usarlo facilmente? Ecco un esempio di codice JSP che lo include:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" href="jmaki-standard-no-sidebars.css" type="text/css"></link>
<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %> <!-- vedi nota (1)->
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="outerBorder">
<div class="header">
<div class="banner">Application Name</div>
<div class="subheader">
<div>
<a href="mailto:feedback@youraddress">Feedback</a> |
<a href="#">Site Map</a> |
<a href="#">Home</a>
</div>
</div> <!-- subheader -->
</div> <!-- header -->
<div class="main">
<div class="content" style="height:400px">
Main Content Area
<a:ajax name="yahoo.map" args="{centerLat:41.9, mapType:'REGULAR', centerLon:12.59}"/> <!-- vedi nota (2)->
</div> <!-- content -->
</div> <!-- main -->
</div> <!-- outerborder -->
</body>
</html>
dove:
(1) si dichiara la tag library JMaki
(2) si usa il widget Yahoo Map, incluso nella libreria
La JSP in questione viene poi trasformata in HTML dall'engine jsp per includervi i JavaScript, i CSS ed i template HTML che costituiscono gli elementi base di jMaki. Nella fase di scrittura del codice posso impostare i parametri che caratterizzano i widget usati.
Ma come posso sfruttare questo framework in modo più produttivo?
Semplice, credetemi!!
Installato NetBeans 5.5, posso procedere alla ricerca dei nuovi plug-in e scaricare quello per jMaki.
Da Tools/Update Center, connettetevi e selezionate dalla lista dei plug-in offerti, quelli elencati nell'Ajax Update Center, ed in particolare jMaki Ajax Support plug-in. Dopo il restart dell'IDE sarete pronti allo sviluppo con il framework in questione.
Create un progetto di tipo Web -> Web Application. Quando il wizard vi chiederà di selezionare un framework, scegliete jMaki Ajax Framework, con configurazione CSS Layout: Standard No Sidebars.
Fatto questo, vi basterà aprire la pagina index.jsp e fare il drag&drop di:
- jMaki->Library Definition, prima del codice HTML;
- jMaki Yahoo-> Map, sotto la scritta "Main Content Area", così come mostrato in figura:
il risultato, a livello di codice, dovrebbe essere esattamente quanto visto precedentemente.
A questo punto possiamo personalizzare le properties del widget inserito nella pagina JSP, e lo facciamo semplicemente selezionando "yahoo.map" e settando le coordinate per far centrare la mappa, ad esempio, su Roma, e scegliendo di non avere le immagini da satellite, ma solo la cartina stradale:
Per Roma le coordinate saranno:
centerLat= 41.9
centerLon=12.59
mapType=Regular
...ed il gioco è fatto.
Dal menù, con Run/Run Main Project o F6, se preferite fare alla svelta, potrete vederne il risultato, con la mappa ottenuta direttamente da Yahoo nella vostra applicazione Web.
Nelle prossime settimane altri trucchi e possibilità di jMaki. Nel frattempo, buon divertimento.
Comments: