04 Tapestry5 In Action Pratica

Indice

Preparare l'ambiente

Creiamo la nostra prima page

Creiamo un componente per gestire il layout

Creiamo un componente per il login/logout

La pagina di iscrizione utente

L'upload di un file

Realizziamo il jukebox

Software utilizzato:

JDK 1.6 (mustang)

Servlet specification 2.4

Maven2

Eclipse 3.2

Maven2 plugin

Jetty launcher 1.4.1

Jetty 4.2.27

Mysql Server 5.0

Prima di cominciare installiamo nel repository (locale) di maven tre jar previa scaricati:

jukemodel-1.0.0.jar (allegato alla presentazione)

jid3lib-0.5.4.jar, JLayer(mp3 util, reperibili qui e qui )

jta-1.0.1B.jar (java transaction api, reperibile qui )

Ok, apriamo eclipse creiamo il nostro maven2 project “jukeweb”

File -> new -> project

Maven2 -> Maven2 project

Create project:

Configure project:

Creato il progetto aggiungiamo le dipendenze:

< dependencies > < dependency > < groupId > jukemodel </ groupId > < artifactId > jukemodel </ artifactId > < version > 1.0.0 </ version > </ dependency > < dependency > < groupId > org.apache.tapestry </ groupId > < artifactId > tapestry-spring </ artifactId > < version > 5.0.6 </ version > </ dependency > < dependency > < groupId > org.springframework </ groupId > < artifactId > spring-web </ artifactId > < version > 2.0.2 </ version > </ dependency > < dependencies >

Ora dovremmo avere tutte le librerie necessarie.

Non ci resta che creare e configurare il web.xml

Start.java:

Start.tml:

Start.tml:

La sintassi ${[ prefix :] expression [. nestedExpr ] } è detta Expansions.

In un' expansions:

L'espressione passata viene interpretata secondo le regole di binding

La regola da usare viene selezionata con un prefisso

prop (default)

literal

message

Bene, è giunto il momento di lanciare per la prima volta l'applicazione:

Configuriamo jetty:

Configuriamo e lanciamo jetty:

Infine digitiamo l'url sul browser:

http://localhost:8080/jukeweb/

Creiamo un componente..

Prima di proseguire occorre includere nel progetto (in src/main/webapp/) alcune risorse disponibili come allegati alla presentazione:

Stylesheets

Immagini

Un flash mp3 player

E in src/main/resources/

Javascript files

Come già detto le component classes e i component templates si devono trovare in qualunque sub-package di

tapestry.app-package /components

Creiamo quindi un componente che ci consenta di “centralizzare” la gestione del layout delle pagine

Border.java (versione 1)

Border.tml (versione 1)

Adeguiamo quindi il template Start.tml

Ok, ora dovremmo avere acquisito un po' di confidenza col codice, ma il tutto è ancora statico

Prima di tutto vediamo come fare a passare al Border i titoli per la finestra e per la pagina.

Un parametro di un componente altro non è che un'attributo d'istanza opportunamente annotato (@Parameter) e corredato dei metodi accessor.

Adeguiamo quindi il template Start.tml

Gli Assets

sono il meccanismo offerto da Tapestry per riferirsi a risorse statiche

Consentono di accedere a risorse presenti nel classpath (default) o nel context root della web application

Creiamo quindi ora in Border.java i riferimenti agli stylesheets, ai files javascript e al mp3 flash player

Per farlo dobbiamo

Dichiarare per ciascuna risorsa che vogliamo linkare una variabile d'istanza di tipo org.apache.tapestry.Asset e il corrispondente metodo getter (il setter non occorre in quanto la risorsa è in sola lettura)

(continua)

Annotare ciascuna delle variabili con org.apache.tapestry.ioc.annotations.Inject

Annotare ciascuna delle variabili con org.apache.tapestry.annotations.Path (@Path(“context|classpath: path/risorsa.ext ”))

Aggiungiamo a Border.java

(...continua)

Aggiungiamo i metodi getter e modifichiamo il template

Dopo aver salvato ed eseguito diamo uno sguardo al codice risultante

Creiamo un componente per il menù. Menu.java

Creiamo un componente per il menù. Menu.java

E il template Menu.tml

E il template Menu.tml

Il componente login

Passiamo ora a creare un componente che gestisca le operazioni di login/logout

Al componente spettano la responsabilità di:

esporre le operazioni opportune

Conoscere e gestire il comportamento dell'applicazione al momento del login/logout

Il componente login

Login.java

Il componente login

Login.java

Il componente login

Login.java

Il componente login

(... continua)

Il componente login

(... continua)

Il componente login

(... continua)

Il componente login

(... continua)

Il componente login

Login.tml

Il componente login

Login.tml

Il componente login

Login.tml

Il componente login

Login.tml

Il componente login

(..continua)

Il componente login

(..continua)

Il componente login

(..continua)

Il componente login

E' giunto il momento di integrare spring e il backend per comunicare con il database

Primo, modificare il filter nel web.xml

Il componente login

Secondo, aggiungere al web.xml:

Il listener di spring che si vuole usare

Il context-param che punta ai files di configurazione

Il componente login

Importiamo nel path opportuno i due files di configurazione di spring

Modifichiamo i dati per la connessione nel file hibernate-config.xml

Il componente login

Importiamo nel path opportuno i due files di configurazione di spring

Modifichiamo i dati per la connessione nel file hibernate-config.xml

Il componente login

Per conservare lo stato dell'utente creiamo una classe UserState nel package

tapestry.app-package /state

Il componente login

Aggiungiamo i riferimenti allo state object e allo userService, e il metodo getter per accedere allo state object in Login.java

Il componente login

Modifichiamo i metodi login e logout in Login.java

Il componente login

Ora con il tapestry component If facciamo in modo che nel template Login.tml venga mostrato il form di login solo se non ci si è loggati e l'inverso per il comando di logout.

L'If component ha la seguente forma:

Il componente login

Il Login.tml diventa quindi:

Il componente login

Adesso, per verificare quanto realizzato inseriamo un utente di prova sul db

Il componente login

Login:

Il componente login

Login:

La pagina d'iscrizione utente

Veniamo ora a esaminare un componente molto potente, il beanEditForm.

Il beanEditForm:

Accetta i seguenti parametri:

object : l'oggetto che si vuole editare

remove : una lista di nomi di attributi dell'oggetto da editare, di cui si vuol inibire il rendering

submitLabel : l'etichetta del submit button del form

model : un'istanza di org.apache.tapestry.beaneditor.BeanModel

reorder : una lista di nomi di attributi nell'ordine desiderato

clientValidation : true|false

Il beanEditForm:

mappa

Boolean con checkbox

java.util.Date con DateField

Enum con select

String e Number con textField

Il beanEditForm:

mappa

Boolean con checkbox

java.util.Date con DateField

Enum con select

Tipi primitivi, wrapper e String con textField

Può essere ulteriormente configurato annotando opportunamente l'oggetto che gli si passa.

Aggiungiamo il package account all'interno della root delle page component classes e creaiamo la classe CreateAccount.java

Aggiungiamo il package account all'interno della root delle page component classes e creaiamo la classe CreateAccount.java

...e il template.

...e il template.

...e il template.

...e il template.

http://localhost:8080/jukeweb/account/create

Come forse avrete notato la url non è come ci si aspetterebbe /account/createaccount, bensì /account/create. In sostanza tapestry ignora la ripetizione di account, questo consente di avere url più pulite .

Resta da realizzare un link per accedere alla pagina di iscrizione, e aggiungere un riferimento al servizio verso il db nella classe della pagina per salvare l'utente creato.

Login.tml

CreateAccount.java

CreateAccount.java

CreateAccount.java

L'upload di un file

Tapestry incapsula il componente e i servizi, necessari per effettuare l'upload, in un modulo a parte tapestry-upload.jar

Quindi aggiungiamo la dipendenza corrispondente nel pom.xml

L'upload di un file

Creiamo una class page track/CreateTrack.java

L'upload di un file

Quindi il template track/CreateTrack.tml

L'upload di un file

Una volta caricato il file dobbiamo inserire i dati ad essa relativi

Modifichiamo il metodo upload come segue

L'upload di un file

Aggiungiamo un attributo Track con i relativi accessor, per editare le informazioni.

L'upload di un file

Occorre anche definire un attributo StylesEnum

Essendo una enum, il beanEditForm la gestirà con una select.

L'upload di un file

Infine ci servono i riferimenti allo stateObject e al servizio per salvare la traccia creata

L'upload di un file

Infine dobbiiamo modificare il template, in modo da mostrare prima l'upload form, e poi il track form.

L'upload di un file

Bene, siamo giunti all'ultimo elemento dell'applicazione

Nel realizzarlo vedremo

come untilizzare il grid component

come realizzare un componente che scrive direttamente sull'output (privo di template)

come realizzare un componente che scrive direttamente sull'output (privo di template)

come ottenere uno stream verso una risorsa tramite Tapestry

Modifichiamo quindi la Start page, e aggiungiamole gli attributi

Modifichiamo quindi la Start page, e aggiungiamole gli attributi

Infine faccio in modo che quando la pagina viene inizializzata, carichi dal database le tracce.

Infine faccio in modo che quando la pagina viene inizializzata, carichi dal database le tracce.

Quindi inseriamo il component grid nel template

Riordiniamo gli attributi

Aggiungiamo la paginazione

Gestiamo il rating con un componente specifico

Il componente Rating.java

Infine sovrascriviamo la fileNameCell

Il component Player.java

La stream page TrackStream.java

La stream page TrackStream.java

Ringraziamenti

Un ringraziamento va a tutti coloro che con il loro impegno e disponibilità hanno permesso la realizzazione del Javaday

Naturalmente agli sponsor

E in particolare a Mara Marzocchi, Java Italian Portal webmaster, per l'incoraggiamento, il sostegno e la disponibilità (ma anche i consigli, le proposte e le idee).

Tapestry5 in action