Rich Internet Application

Rich Internet Application
Marcello Teodori
Java User Group Milano
http://www.jugmilano.it
marcello.teodori@jugmilano.it

Java Conference 2005

Agenda
● Due parole sul Java User Group Milano
● Che cos'è una Rich Internet Application?
● Modello di sviluppo per le RIA
● RIA dal browser al desktop
● Definizione GUI in XML
● Toolkit per RIA
● La rivincita del browser: Gmail e XMLHttpRequest
● Evoluzioni nel mondo Java: JSF, JNDC e JDIC
● Mobile RIA
● Un esempio: la ricerca libri nella biblioteca del JUG Milano

Java Conference 2005 2

Due parole sul JUG Milano
● Il JUG Milano nasce il 18 Dicembre 2002 ad opera di
Filippo Diotalevi e dopo un periodo di incubazione ne
esce il primo meeting ufficiale il 16 Dicembre 2003
● Lo scopo è quello di favorire l'interscambio di
conoscenze informatiche e creare un punto di
riferimento nel panorama degli sviluppatori Java locale
● La partecipazione alle attività è del tutto gratuita e
libera
● Il JUG gestisce una serie di attività tra cui meeting con
cadenza regolare, scrittura di articoli, tutorial e
recensioni libri sul nostro sito web, e partecipazione ad
avvenimenti di rilevanza tecnologica


Il Nostro Curriculum
● Una mailing list su Yahoo! Groups di 150 iscritti
● Un Wiki web site: http://www.jugmilano.it/
● 10 meeting al nostro attivo
● Partecipazione all'Italian Agile Day 2004, alle
edizioni 2003 e 2004 del Webbit, oggi in Java
Conference
● Collaborazione con il Politecnico di Milano (sede di
Como): seminari su AOP
● Collaborazione con Manning, Apress ed O'Reilly
● Progetto su Java.net: https://jugmilano.dev.java.net
● Facciamo parte della Top 50 dei JUG mondiali!

Definizione di Rich Internet Application
"web applications have extended the reach of enterprises to customers,
offering anywhere and anytime access. However, this has been at the
expense of the overall user-experience, which is diminished by delivery
through the web browser"
Steven Webster e Alistair McLeod, autori del libro Flex Integration with J2EE
http://www.theserverside.com/articles/article.tss?l=Flex
=> un nuovo tipo di web application che ne superi i limiti?
Caratteristiche:
● web deployment
● logica applicativa suddivisa fra client (desktop-based) e server (browser-
based)
● interazione immediata senza percezione di un roundtrip sul server
● flussi di esecuzione multipli
● accesso a rich content: audio/video


Applet?
...ma non facevano già tutto questo le Applet, ossia la prima
incarnazione di Java per il pubblico, nel lontano 1995?
http://java.sun.com/features/1998/05/birthday.html

Non esattamente...
● le applet erano proposte come generico contenuto dinamico
● difficoltà di realizzazione in AWT di interfacce grafiche complesse
● lentezza e crash browser
● "the JVM wars"
● tendenza degli sviluppatori a spedire applicazioni intere sul browser
come applet


Fattori abilitanti
Cosa è cambiato da allora, da poter decretare il
successo delle RIA, dopo il fallimento delle Applet?
● broadband: possibilità di download rapido di runtime e

applicazione
● evoluzione tecnologica del browser

● potenza di calcolo per ridurre startup time del runtime

● modello J2EE già consolidato per le applicazioni web

● accesso a logica distribuita via web services

● disponibilità di un parser XML già presente sul runtime


Non tutte le RIA sono uguali...
Dal weblog di David Temkin, CTO Laszlo:
http://www.davidtemkin.com/mtarchive/000003.html
● Unix-style RIA: Gmail is a great example of this. It's essentially text-only, with
keyboard equivalents. It's reminiscent of Pine or vi, particularly with regard to how
keyboard shortcuts work (...)
● Windows-style RIA: Oddpost, another rich Web mail service, is a perfect example of
this -- a Windows-style UI delivered into a Web browser. This can be done with
DHTML heroics (as is Oddpost), or with Java (...) The look and feel of these
applications is essentially a duplicate of the "classic" Windows desktop look and feel.
Users new to these applications can lean on their familiarity with Outlook and similar
applications, but they don't reflect what we've learned on the Web about UI -- very
little linking, very little contextual "content" or media.
● Mac-style RIA: Here I'm talking about the visually differentiated, smooth animated
interaction often associated with Mac OS X (or with Flash), but used in the context of
a Web application. These applications as a category represent the attempt to blend
the best of the Web with the best of applications (...)


Architettura di Riferimento


Client Runtime
La scelta del runtime:
● JVM
Noi del JUG ne sappiamo qualcosa...
● Mozilla XRE http://www.mozilla.org/projects/xul/xre.html
Toolkit per realizzare applicazioni Cross-Platform della Mozilla
Foundation
● Flash VM
Browser plugin per animazioni vettoriali, via via arrichitosi nelle
versioni recenti di funzionalità applicative.
● .NET CLR
In modo un pò sbrigativo, clone della JVM con enfasi sul
supporto per diversi linguaggi di programmazione.


Backend
Qual è il backend più adatto per le RIA? Va bene qualsiasi
soluzione, purchè esponga le proprie funzionalità in:
● XML over HTTP (ReST)

● SOAP

● formati proprietari in base al runtime scelto

– Serialization Protocol ed RMI over HTTP per Java

– AMF per Flash

=> un primo passo potrebbe essere riciclare una
webapp old-style in un backend RIA generando
XML invece di HTML!


Dal browser al desktop
Problema: la cache del browser governa il deployment di
una RIA visualizzata nel browser
=> è necessario scaricare l'applicazione ogni volta
che non sia più presente nella cache del browser
Soluzione:
● JVM: Java WebStart

● Flash VM: Central

● XRE: XPI (Cross Platform Installer)

● .NET: ClickOnce/SmartClient


XML User Interface Language
Come sviluppare rapidamente interfacce
grafiche per RIA?
● le definisco tramite un documento XUL (XML

User Interface Language)
● XUL: implementazione Mozilla => termine

generico
● XUL obbliga ad usare il paradigma MVC

● possibilità di caricare dinamicamente a runtime

altri documenti XUL da web


Esempio XUL (OpenLaszlo)
<canvas width="600">
<view resource="cd_cover.jpg"/>
<view name="player" resource="song.mp3"/>
<view>
<button onclick="player.setAttribute('play', false)">Pause</button>
<button>Play
<method event="onclick">
player.setAttribute("play", true);
</method>
</button>
<simplelayout axis="x" spacing="2"/>
</view>
<simplelayout axis="y" spacing="4"/>
</canvas>


XML Binding Language
Come si definisce l'interazione con una GUI
definita in XUL?
=> con XBL (XML Binding Language) che
collega view e controller di una RIA
● XBL aggiunge al file XUL la possibilità di gestire

gli eventi generati dalla GUI, associando gli
event handler corrispondenti
● spesso, come nell'esempio appena visto, il

binding è già nel documento XUL


Mozilla XUL
L'implementazione originale della Mozilla Foundation.
● Runtime: XRE (Mozilla 1.0+, Firefox, Thunderbird...)

● GUI Builder: XUL Maker http://xulmaker.mozdev.org/

● Documentazione: http://books.mozdev.org/

● Skin: CSS

● Binding: JavaScript

● Desktop: solo come Estensione o lanciando da CLI il

documento mozilla -chrome chrome://calendar.xul
● Esempi: Mozilla Calendar, Amazon Browser

http://www.faser.net/mab/


Thinlet
http://www.thinlet.com/

Implementazione XUL in Java senza uso di Swing.
● Licenza: LGPL
● Runtime: JVM con supporto JDK 1.1+, Personal Java, J2ME PBP
● GUI Builder:
– ThinG, disponibile anche come plugin per NetBeans 4.1 (GPL)
http://thing.sourceforge.net/

– Thedore (Commerciale, con demo limitata disponibile via JavaWS)
http://www.carlsbadcubes.com/theodore/

● Desktop Deployment: Java Web Start
● Skin: modifico direttamente le proprietà dei componenti
● Markup Language: XUL
● Binding: carico esplicitamente da codice Java i documenti XUL ed associo le azioni
● Esempio: Blogmento http://www.blogmento.com
● Solo 30kb di dimensioni libreria


Macromedia Flex
http://www.macromedia.com/software/flex/
J2EE framework per applicazioni RIA.
● Licenza: Commerciale, costi sul sito
● Runtime: Flash 7+
● IDE:
– Flex Plug-in for WebSphere Studio, non più disponibile, ma...
...di recente Macromedia è entrata nella Eclipse Foundation!
http://www.alphaworks.ibm.com/tech/wsadflex

– FlexBuilder (bundled/solo Windows)
http://www.macromedia.com/software/flex/flexbuilder

● Markup: MXML
● Skin: CSS
● Binding: ActionScript
● Desktop Deployment: Central
● integrazione con download e streaming audio/video
via Flash Communication Server (solo formato FLV – Flash Video)
● componenti di charting eccellenti


OpenLaszlo
J2EE framework per applicazioni RIA.
● http://www.openlaszlo.org/
● Licenza: CPL 1.0
● Runtime: Flash 6+
● GUI Builder: IBM IDE Lazlo per Eclipse (AlphaWorks Trial License)
http://alphaworks.ibm.com/tech/ide4laszlo
● Skin: CSS
● Markup: LZX
● Binding: JavaScript
● Desktop Deployment: no
● server-less deployment dei file SWF generati nella versione 3.0 (SOLO)
● supporta solo SWF come formato di rich content


Session Gateway in
OpenLaszlo e Flex
Problema: come accedo a server di backend diversi
dall'originating server, ossia da quello dal quale ho scaricato
l'applicazione RIA?
In Java posso bucare la sandbox firmando
l'applicazione, ma in Flash?
Soluzione: I framework OpenLaszlo e Flex si comportano da
HTTP Proxy, collegandosi ai server di backend di cui
l'applicazione RIA ha bisogno in sua vece e rigirando ad essa
l'output. É loro compito mantenere sincronizzata la sessione
J2EE con le sessioni presso i server di backend.


Altre soluzioni
● XAML per .NET
● SwiXML per Swing
http://www.swixml.org/
● RIB per SWT e Swing
http://www.alphaworks.ibm.com/tech/rib
● Canoo UltraLightClient
http://www.canoo.com/ulc/
– Half-Object Pattern
– Visual Editor Eclipse plugin
http://www.canoo.com/ulc/products/ulcvisualeditor.html


La rivincita del browser:
Gmail e XMLHttpRequest
● Cos'è XMLHttpRequest?
Un oggetto JavaScript che permette di inviare richieste HTTP in
modo asincrono rispetto a quanto visualizzato dal browser
● Dove viene utilizzato?
– Gmail: visualizzazione messaggio, autocompletamento indirizzi

– Google Suggest: ricerca incrementale
● Quali browser lo supportano: IE 5.5, Mozilla/Firefox 1.0, Safari 1.2,
preview Opera
● Problematiche?
Le solite di JavaScript, piccole differenze di implementazione
richiedono codice con trucchi vari per avere un comportamento
uniforme fra i diversi browser


Novità J2EE: JSF
JSF (Java Server Faces) porta sul Web Container J2EE un modello a
componenti ed eventi, lo stesso visto per RIA.
http://www.onjava.com/pub/a/onjava/2004/06/09/jsf.html
● ViewHandler
Effettua una object realization del modello della GUI a partire dalla sua
definizione. La reference implementation fornisce un ViewHandler basato su
TagLib JSP, che faciliti la migrazione a questa nuova tecnologia ed un
prototipo di implementazione più interessante basato su definizioni in
documenti XUL che NON richiede JSP
● RenderKit
Effettua il rendering della definizione della GUI verso un'implementazione
specifica. La reference implementation di JSF fornisce un RenderKit per
HTML, potenzialmente sarebbe possibile costruirne anche uno adhoc per un
Applet Java o applicazioni Java WebStart, XUL, Flash, paradossalmente
anche .NET, eventualmente utilizzando i toolkit per RIA appena visti.


Novità J2SE: jdesktop.org
● Una serie di progetti open source su java.net
con focus sul desktop (finalmente!)
● Possibile integrazione nella prossima versione

Mustang 6.0 della JVM
● ancora mooooolto immaturi

● alcune parti native, non tutti gli OS sono

supportati
=> potrebbero facilitare lo sviluppo di RIA su
runtime Java, vediamo in che modo...


JDesktop Network Components (JNDC)
● https://jdnc.dev.java.net/
● componenti Swing evoluti con data binding

locale e remoto
● definizione GUI in XML con un proprio markup

derivato da XUL
● gestione di una sessione di autenticazione

● funzionalità base già pronte per applicazioni

document-based
=> c'è un esempio di Rich Text Editor con
ricerca scritto solo in XML!

JDesktop Integration Components (JDIC)
● https://jdic.dev.java.net/
● Un layer multi-platform per accedere a

funzionalità native di integrazione con il
desktop
● associazione fra documenti ed applicazioni

● area di notifica

● accesso a browser e mailer predefiniti

=> maggiore interazione fra RIA e desktop!


Mobile RIA
Opzioni per applicazioni in ambito Mobile:
● WAP, cHTML e xHTML Mobile Profile

● J2ME

– JNLP => JAD
– Java Web Start => JAM (Java Application
Manager)
●Flash Player
=> riutilizzo lo stesso modello?


Situazione Mobile Client
● Browser
– Supporto XUL in Mozilla Minimo?
● Flash Player
– su device al momento solo versioni 4 e 5
– evoluzione offerta Macromedia verso settore Mobile
● J2ME
– pronta per interagire con backend RIA
– supporto MIDP per Thinlet rimosso
● SVG


Riferimenti
● Java GUI Alternatives
http://leepoint.net/notes-java/30GUI/95misc/80gui-generator.html
● XULPlanet
http://xulplanet.com/
● XMLHttpRequest and LiveSearch
http://blog4.bitflux.ch/wiki/LiveSearch
● Rich Clients Portal
http://www.richclients.org
● Migrazione da applicazioni Struts a RIA con Flex
http://www.macromedia.com/devnet/flex/articles/struts.html


Rich Internet Application

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Rich Internet Application

Similaire à Rich Internet Application (20)

Plus de Marcello Teodori

Plus de Marcello Teodori (10)

Rich Internet Application