Tapestry 5 in Action Pratica

Marco Pugliese - [email protected] – Java Italian PortalJavaday Roma - 01/12/2007 Tapestry5 in action 1

Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License

Pratica

Tapestry5 in action



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



Preparare l'ambiente

Tapestry5 in action




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)

mvn install:install-file -DgroupId=jukemodel -DartifactId=jukemodel -Dversion=1.0.0 -Dpackaging=jar -Dfile=/jarfile/path -DpomFile=/pomfile/pathmvn install:install-file -DgroupId=javax.transaction -DartifactId=jta -Dversion=1.0.1B -Dpackaging=jar -Dfile=/jarfile/pathmvn install:install-file -DgroupId=jid3lib -DartifactId=jid3lib -Dversion=0.5.4 -Dpackaging=jar -Dfile=/jarfile/pathmvn install:install-file -DgroupId=JLayer -DartifactId=JLayer -Dversion=1.0.0 -Dpackaging=jar -Dfile=/jarfile/path

http://javamusictag.sourceforge.net/index.html

http://www.javazoom.net/javalayer/sources.html

http://java.sun.com/products/jta/index.html




● 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[...]<context-param>

<param-name>tapestry.app-package</param-name><param-value>javaday.jukebox.web</param-value>

</context-param><filter>

<filter-name>juke</filter-name><filter-class>

org.apache.tapestry.TapestryFilter</filter-class>

</filter><filter-mapping>

<filter-name>juke</filter-name><url-pattern>/*</url-pattern>

</filter-mapping>[...]



Creiamo la nostra prima page

Tapestry5 in action




Start.java:

package javaday.jukebox.web.pages;public class Start {}




Start.tml:

<html><head>

<title>home page</title></head><body>

Benvenuti nel mondo di Tapestry!<br />E' stata renderizzata la pagina ${class.simpleName}!

</body></html>




● 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/

http://localhost:8080/jukeweb/



Creiamo un componente per gestire il layout

Tapestry5 in action



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)

package javaday.jukebox.web.components;public class Border {}




● Border.tml (versione 1)

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"><head><title>titolo finestra</title><link rel="stylesheet" href="/jukeweb/styles/layout.css"></link><link rel="stylesheet" href="/jukeweb/styles/header.css"></link><link rel="stylesheet" href="/jukeweb/styles/menu.css"></link><link rel="stylesheet" href="/jukeweb/styles/body.css"></link><script src="/jukeweb/js/script.js" ></script><script src="/jukeweb/js/audio-player.js" ></script>

</head>...




● Border.tml (versione 1)...<body><div class="page">

<div class="header"><div class="gkey" onclick="document.location.href='/jukeweb'"

onmouseover="this.style.cursor='hand'"></div><div class="title">titolo pagina</div>

</div><div class="menu">

menu</div><div class="body">

<t:body /></div><div class="footer">

<a href="mailto:[email protected]"> Created by [email protected] </a></div>

</div></body></html>




● Adeguiamo quindi il template Start.tml

<t:border xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">Benvenuti nel mondo di Tapestry!<br />E' stata renderizzata la pagina ${class.simpleName}!

</t:border>




● http://localhost:8080/jukeweb/




● 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.




● Border.java (versione 2) package javaday.jukebox.web.components;import org.apache.tapestry.annotations.Parameter;public class Border {

@Parameter(defaultPrefix="literal")private String windowTitle = "Untitled";@Parameter(defaultPrefix="literal")private String pageTitle = "Untitled";

...




● Border.java (versione 2) package javaday.jukebox.web.components;import org.apache.tapestry.annotations.Parameter;public class Border {

@Parameter(defaultPrefix="literal")private String windowTitle = "Untitled";@Parameter(defaultPrefix="literal")private String pageTitle = "Untitled";

...

Binding prefix:● prop● literal● asset● block● component● traslate● Message● validate




● Border.java (versione 2) ...

public String getPageTitle() {return pageTitle;

}

public void setPageTitle(String pageTitle) {this.pageTitle = pageTitle;

}

public String getWindowTitle() {return windowTitle;

}

public void setWindowTitle(String windowTitle) {this.windowTitle = windowTitle;

}

}




● Adeguiamo quindi il template Start.tml

<t:border pageTitle="Listen everything you want" windowTitle="Home"xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">Benvenuti nel mondo di Tapestry!<br />E' stata renderizzata la pagina ${class.simpleName}!

</t:border>




● 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...

@Inject@Path("context:styles/layout.css")private Asset layout;@Inject@Path("context:styles/header.css")private Asset header;@Inject@Path("context:styles/menu.css")private Asset menu;@Inject@Path("context:styles/body.css")private Asset body;

...




● (...continua)...

@Inject@Path("classpath:js/script.js")private Asset script;@Inject@Path("classpath:js/audio-player.js")private Asset playerScript;

...




● Aggiungiamo i metodi getter e modifichiamo il template

...<head>

<title>${windowTitle}</title><link rel="stylesheet" href="${layout}"></link><link rel="stylesheet" href="${header}"></link><link rel="stylesheet" href="${menu}"></link><link rel="stylesheet" href="${body}"></link><script src="${script}" ></script><script src="${playerScript}" ></script>

</head>...




● Dopo aver salvato ed eseguito diamo uno sguardo al codice risultante

...<link href="/jukeweb/styles/layout.css" rel="stylesheet"><link href="/jukeweb/styles/header.css" rel="stylesheet"><link href="/jukeweb/styles/menu.css" rel="stylesheet"><link href="/jukeweb/styles/body.css" rel="stylesheet"><script src="/jukeweb/assets/js/script.js"></script><script src="/jukeweb/assets/js/audio-player.js"></script>

...




● Creiamo un componente per il menù. Menu.java

package javaday.jukebox.web.components;import org.apache.tapestry.annotations.OnEvent;public class Menu {

@OnEvent(value="action")String openPage(String pageName){

return pageName;}

}




● E il template Menu.tml

<div class="vocimenu" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">

<div class="vocemenu"><a t:type="ActionLink" context="literal:start">Home</a>

</div><div class="login"><t:login /></div>

</div>



Creiamo un componente per il login/logout

Tapestry5 in action



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

package javaday.jukebox.web.components;...public class Login {

@Persist private String _userName; private String _password; @Component(id = "password") private PasswordField _passwordField; @Component(id="loginForm") private Form _form;

...



Il componente login

● Login.java



...



Il componente login

● (... continua)

...@OnEvent(component="loginForm",value="success")

void login() {

boolean valid = false;if(!valid){

_form.recordError(_passwordField, "Invalid user name or password.");

} }

@OnEvent(component="logout",value="action")void logout(){}

...



Il componente login

● (... continua)


void login() {



} }


...



Il componente login

● (... continua)

...

public String getPassword() {return _password;

}public void setPassword(String _password) {

this._password = _password;}public String getUserName() {

return _userName;}public void setUserName(String name) {

_userName = name;}

}



Il componente login

● Login.tml

<t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">

<div class="formLogin"><t:form t:id="loginForm">

<div class="title">Login</div><t:errors /><label t:type="label" t:for="userName" class="label">

user</label><div class="element">

<t:textField t:id="userName" t:value="userName" t:validate="required" />

</div>...



Il componente login

● Login.tml






</div>...



Il componente login

● (..continua)

...<label t:type="label" t:for="password" class="label">

pass</label><div class="element">

<t:passwordField t:id="password" t:validate="required, minLength=5" />

</div><div class="submit">

<input type="submit" value="login"/></div>

</t:form></div><div class="vocemenu">

<a href="#" t:type="actionLink" t:id="logout">logout</a></div>

</t:container>



Il componente login

● (..continua)








</t:container>



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[...]<filter>

<filter-name>juke</filter-name><filter-class>

org.apache.tapestry.spring.TapestrySpringFilter</filter-class>

</filter>[...]



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

[...]<context-param>

<param-name>contextConfigLocation</param-name><param-value>

/WEB-INF/config/bean.xml,/WEB-INF/config/hibernate-config.xml

</param-value></context-param><listener>

<listener-class>org.springframework.web.context.ContextLoaderListener

</listener-class></listener>[...]



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

[...]<bean id="jukeDataSource"

class="org.apache.commons.dbcp.BasicDataSource"destroy-method="close"><property name="driverClassName"

value="org.gjt.mm.mysql.Driver" /><property name="url"

value="jdbc:mysql://127.0.0.1:3306/jukebox" /><property name="username" value="root" /><property name="password" value="" />

</bean>[...]



Il componente login

● Per conservare lo stato dell'utente creiamo una classe UserState nel package – tapestry.app-package/state

package javaday.jukebox.web.state;import javaday.jukebox.model.dto.User;public class UserState {

private User user;public User getUser() {

return user;}public void setUser(User user) {

this.user = user;}public boolean isLoggedIn(){

return user != null && user.getId() != null;}

}



Il componente login

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

...@ApplicationStateprivate UserState _userState;@Injectprivate IUserService _userService;public UserState getUserState() {

return _userState;}

...



Il componente login



return _userState;}

...



Il componente login



return _userState;}

...

Per specificare il nome del bean da usare occorre modificare il codice come segue:@Inject@Service("userService")private IUserService _userService;



Il componente login

● Modifichiamo i metodi login e logout in Login.java

...@OnEvent(component="loginForm",value="success")void login(){

_userState.setUser(_userService.login(getUserName(), getPassword()));

if(!_userState.isLoggedIn()){ _form.recordError(_passwordField,

"Invalid user name or password.");}

}@OnEvent(component="logout",value="action")void logout(){

_userState.setUser(null);}

...



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:

<t:if test="boolean expression" negate="true|false">renderizzato se test=true e negate=false, oppure test=false e negate=true<t:parameter name="else">

altrimenti renderizza questo</t:parameter>

</t:if>



Il componente login

● Il Login.tml diventa quindi:<t:if test="userState.loggedIn" negate="true"

xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"><div class="formLogin">

[...]</div><t:parameter name="else">

<div class="vocemenu"><a href="#" t:type="actionLink" t:id="logout">

logout</a>

</div></t:parameter>

</t:if>



Il componente login

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

insert into user (user, pass, firstName, name, emailAddress, birthDate)values ('bobpuley', 'bobpuley', 'pugliese', 'marco', '[email protected]', '1973-02-24');



Il componente login

● Login:



La pagina di iscrizione utente

Tapestry5 in action



La pagina d'iscrizione utente

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

<t:beanEditForm object="expression" [t:id="value"remove="fieldName_1[,fieldName_n]"reorder="fieldName_1[,fieldName_n]"model="expression"submitLabel="value"]>

</t: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

package javaday.jukebox.web.pages.account;import javaday.jukebox.model.dto.User;import org.apache.tapestry.annotations.OnEvent;public class CreateAccount {

private User user = new User();public User getUser() {return user;}public void setUser(User user) {this.user = user;}@OnEvent(component="userForm", value="success")void menageAccount(){

System.out.println(user);}

}




● ...e il template.

<t:border pageTitle="Personal Account" windowTitle="Personal Account - create a new account"xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">

<div class="form"><t:beanEditForm t:id="userForm" object="user"

remove="id" submitLabel="literal:confirm"reorder="user,pass,firstName,name,birthDate,emailAddress"><t:parameter name="pass">

<label for="pass" id="pass:label">Pass</label><t:passwordField t:id="pass" value="user.pass" />

</t:parameter>

</t:beanEditForm></div>

</t:border>







remove="id" submitLabel="literal:confirm"reorder="user,pass,firstName,name,birthDate,emailAddress"><t:parameter name="pass">


</t:parameter>


</t:border>







remove="id" submitLabel="literal:confirm">reorder="user,pass,firstName,name,birthDate,emailAddress"><t:parameter name="pass">


</t:parameter>


</t:border>




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

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[...]<t:form t:id="loginForm">

<div class="title">Login</div><t:errors /><label t:type="label" t:for="userName" class="label">user</label><div class="element">


</div><label t:type="label" t:for="password" class="label">pass</label><div class="element"><t:passwordField t:id="password"

t:validate="required, minLength=5" /></div><div class="submit"><input type="submit" value="login"/></div>or: <a href="#" t:type="pageLink" t:page="account/create">

Get an account</a>

</t:form>[...]




● CreateAccount.javapackage javaday.jukebox.web.pages.account;import javaday.jukebox.model.dto.User;import org.apache.tapestry.annotations.OnEvent;public class CreateAccount {

private User user = new User();@Injectprivate IUserService userService;public User getUser() {return user;}public void setUser(User user) {this.user = user;}@OnEvent(component="userForm", value="success")void menageAccount(){

userService.create(user);}

}







}



L'upload di un file

Tapestry5 in action



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

[...]<dependency>

<groupId>org.apache.tapestry</groupId> <artifactId>tapestry-upload</artifactId> <version>5.0.6</version></dependency>[...]



L'upload di un file

● Creiamo una class page track/CreateTrack.javapublic class CreateTrack {

private UploadedFile uploadedFile;@OnEvent(component = "uploadForm", value = "success")public void upload() {

FileUtil fileUtil = new FileUtil(null);File file = fileUtil.getTmpFile(uploadedFile.getFileName());uploadedFile.write(file);

}public UploadedFile getUploadedFile() {return uploadedFile;}public void setUploadedFile(UploadedFile uploadedFile) {

this.uploadedFile = uploadedFile;}

}



L'upload di un file

● Quindi il template track/CreateTrack.tml<t:border windowTitle="Add new track" pageTitle="New Track"

xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"><div class="form">

<div class="title">Upload a Mp3</div><t:form t:id="uploadForm">

<div class="t-beaneditor"><div class="t-beaneditor-row">

<label id="upload:label" for="upload">Add track</label><t:upload id="upload" value="uploadedFile" />

</div><div class="t-beaneditor-row">

<input type="submit" /></div>

</div></t:form>

</div></t:border>



L'upload di un file

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

● Modifichiamo il metodo upload come segue@OnEvent(component = "uploadForm", value = "success")public void upload() {

FileUtil fileUtil = new FileUtil(null);File file = fileUtil.getTmpFile(uploadedFile.getFileName());uploadedFile.write(file);try {

setTrack(fileUtil.getMp3Infos(file));setStyle(StylesEnum.getFromValue(getTrack().getStyle()));

} catch (Exception e) {setTrack(new Track());

}}



L'upload di un file






}}



L'upload di un file

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

@Persistprivate Track track = null;public Track getTrack() {

return track;}

public void setTrack(Track track) {this.track = track;

}



L'upload di un file

● Occorre anche definire un attributo StylesEnum● Essendo una enum, il beanEditForm la gestirà

con una select.@Persistprivate StylesEnum style;public StylesEnum getStyle() {

return style;}

public void setStyle(StylesEnum style) {this.style = style;

}



L'upload di un file

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

@Injectprivate ITrackService trackService;@ApplicationStateprivate UserState state;@OnEvent(component = "trackForm", value = "success")public void saveTrack() {

try {track.setUser(state.getUser());track.setStyle(getStyle().toString());trackService.create(getTrack());track.setFileName(new FileUtil(null).modifyTrack(track));trackService.modify(track);setTrack(null);setStyle(null);

} catch (Exception e) {e.printStackTrace();

}}



L'upload di un file





}}



L'upload di un file

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

[...] <t:if test="track" negate="true">form upload

<t:parameter name="else"><div class="title">Edit info</div><t:beanEditForm t:id="trackForm" object="track"

remove="id,user,fileName,rating" reorder="title,author,length,style" submitLabel="literal:salva">

<t:parameter name="style"><label for="style" id="style:label">Pass</label><t:select t:id="style" value="style" />

</t:parameter></t:beanEditForm>

</t:parameter></t:if>[...]



L'upload di un file


[...] <t:if test="track" negate="true">form upload








L'upload di un file


[...]<t:if test="track" negate="true">form upload








Realizziamo il jukebox

Tapestry5 in action




● Bene, siamo giunti all'ultimo elemento dell'applicazione

● Nel realizzarlo vedremo – come untilizzare il grid component





● Nel realizzarlo vedremo – come untilizzare il grid component– come realizzare un componente che scrive

direttamente sull'output (privo di template)





● Nel realizzarlo vedremo – come untilizzare il grid component– 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

@Persistprivate List<Track> tracks = new ArrayList<Track>();private Track itemTrack;@Injectprivate ITrackService service;public Track getItemTrack() {return itemTrack;}public void setItemTrack(Track itemTrack) {

this.itemTrack = itemTrack;}

public List<Track> getTracks() {return tracks;}public void setTracks(List<Track> tracks) {

this.tracks = tracks;}




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

@SetupRendervoid init(){

setTracks(service.findAll());if(getTracks()==null || getTracks().isEmpty()){

setTracks(new ArrayList<Track>());}

}




● Quindi inseriamo il component grid nel template<t:border windowTitle="home page" pageTitle="Everything you need"

xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">Benvenuti nel mondo di Tapestry!<br />E' stata renderizzata la pagina ${class.simpleName}!<div class="form">

<t:form></t:form><div class="title">JukeBox</div><t:if test="tracks">

<t:grid source="tracks" row="itemTrack" remove="id" /><t:parameter name="else">

The collection is empty.</t:parameter>

</t:if></div>

</t:border>




● Riordiniamo gli attributi<t:border windowTitle="home page" pageTitle="Everything you need"



<t:grid source="tracks" row="itemTrack" remove="id"reorder="title,author,style,length,rating,fileName"/>

<t:parameter name="else">The collection is empty.

</t:parameter></t:if>

</div></t:border>




● Aggiungiamo la paginazione<t:border windowTitle="home page" pageTitle="Everything you need"



<t:grid source="tracks" row="itemTrack" remove="id" reorder="title,author,style,length,rating,fileName"rowsPerPage="5" pagerPosition="both" />

<t:parameter name="else">The collection is empty.

</t:parameter></t:if>

</div></t:border>




● Gestiamo il rating con un componente specifico<t:border windowTitle="home page" pageTitle="Everything you need"



<t:grid source="tracks" row="itemTrack" remove="id" reorder="title,author,style,length,rating,fileName"rowsPerPage="5" pagerPosition="both">

<t:parameter name="ratingCell"><t:rating t:ratingValue="itemTrack.rating" />

</t:parameter></t:grid><t:parameter name="else">


</t:if></div>

</t:border>




● Il componente Rating.javapublic class Rating {

private static final String MAX_RATING = "*****";@Parameter(required=true)private Integer ratingValue;@BeginRendervoid render(MarkupWriter writer){

int rating = calculateRating(ratingValue);writer.element("span","class","rating" + rating);writer.write(getRatingStars(rating));writer.end();

}

...







}

...




● Il componente Rating.javapublic Integer getRatingValue() {

return ratingValue;}

public void setRatingValue(Integer value) {this.ratingValue = value;

}

private String getRatingStars(int rating) {return MAX_RATING.substring(0, rating);

}

private int calculateRating(Integer value) {int rating = (int)(value/5) + 1;rating = rating<6?rating:5;return rating;

}

}




● Infine sovrascriviamo la fileNameCell<t:border windowTitle="home page" pageTitle="Everything you need"





</t:parameter><t:parameter name="fileNameCell">

<t:player t:id="_player" t:idTrack="itemTrack.id" /></t:parameter>

</t:grid><t:parameter name="else">


</t:if></div>

</t:border>













</t:if></div>

</t:border>




● Il component Player.javapublic class Player {

private static final String SCRIPT = "Event.observe(window,'load',function(){addPalayer('%s','%s');});";

@Injectprivate ComponentResources _resources;@Parameter(required=true)private Integer idTrack;@BeginRendervoid render(MarkupWriter writer){

String id = _resources.getId() + "_" + idTrack;writer.element("div", "id", id);writer.element("script");String filePath = _resources.createPageLink("trackStream", true, idTrack).toURI();writer.writef(SCRIPT, filePath, id);writer.end();writer.end();

}...








}...




● Il component Player.java...

/** * @return the idTrack */public Integer getIdTrack() {

return idTrack;}/** * @param idTrack the idTrack to set */public void setIdTrack(Integer idTrack) {

this.idTrack = idTrack;}

}




● La stream page TrackStream.javapublic class TrackStream{

@Injectprivate ITrackService _service;StreamResponse onActivate(Integer id) throws FileNotFoundException{

_service.incrementRatingOf(id);Track track = _service.findById(id);File file = new File(track.getFileName());return new Mp3Stream(file);

}

...




● La stream page TrackStream.java...

public static class Mp3Stream implements StreamResponse{InputStream inputStream;public Mp3Stream(File file) {

try {inputStream = new FileInputStream(file);

} catch (FileNotFoundException e) {e.printStackTrace();

}}

public String getContentType() {return "audio/mpeg3";}public InputStream getStream() throws IOException{

return inputStream;}

public void prepareResponse(Response response) {}}

}





http://localhost:8080/jukeweb/



???

Tapestry5 in action



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

FINE

Marco Pugliese

[email protected]

Tapestry 5 in Action Pratica

Business

Transcript of Tapestry 5 in Action Pratica