Introduzione

Wicket è un framework open source per lo sviluppo di applicazioni web Java che si basa su un approccio a componenti. In questo primo articolo della serie esamineremo l'architettura del framework, le sue principali caratteristiche e costruiremo un primo semplice esempio pratico per comprenderne il funzionamento.

// Register comment page
mountBookmarkablePage("/comment", CommentPage.class);
}

/**
- Marks home page.
*
*/
public Class getHomePage() {
return MainPage.class;
}

}

In questo esempio abbiamo registrato due web page (MainPage e CommentPage) e indicato come home page, fra le due, la MainPage. Entrambe le pagine, come tutte le Wicket Page, devono estendere la classe

org.apache.wicket.markup.html.WebPage

Ad ogni Java WebPage deve corrispondere un template HTML avente lo stesso nome della classe che deve essere presente nello stesso path della classe all'interno del classpath applicativo (vedi figura 3).

Figura 3 - Classpath dell'applicazione di esempio
Figura 3 - Classpath dell'applicazione di esempio

Ci deve essere una corrispondenza 1:1 tra i widget HTML aventi l'attributo wicket:id e i componenti della WebPage. Il valore di wicket:id è univoco. Il codice del template HTML della Main page è il seguente:

<html>
<title>Main Page</title>
<link rel="stylesheet" href="css/main-style.css">
<link rel="stylesheet" href="css/style.css">
<body>
<span wicket:id="message" id="message">Message goes here</span>
<br>
<a href="#" wicket:id="commentLink">Add a comment</a>
</body>
</html>

I widget che hanno l'attributo wicket:id sono due, lo span message e l'anchor commentLink. Quindi la WebPage corrispondente avrà due component, uno di tipo

org.apache.wicket.markup.html.basic.Label

e l'altro di tipo

org.apache.wicket.markup.html.link.Link:

public class MainPage extends WebPage {
public MainPage() {
add(new Label("message", "This is my today's post!"));

add(new Link("commentLink") {
public void onClick() {
setResponsePage(CommentPage.class);
}
});
}
}

A runtime, durante la fase di render di una pagina, Wicket invoca il metodo WebPage.render(). La WebPage identifica il template corrispondente e inizia il parse dell'HTML. Per ogni tag che possiede l'attributo wicket:id viene ricercato nella WebPage il Wicket component corrispondente (avente lo stesso wicket:id value) e il rendering viene delegato a tale component. L'istanza di WebPage viene memorizzata in un internal store di tipo org.apache.wicket.PageMap. Wicket mantiene una PageMap per ogni sessione utente. La Main page della nostra applicazione, accessibile da browser invocando l'URL

HYPERLINK "http://loclahost/" http://localhost:<port>/<contextname>

avrà l'aspetto mostrato in figura 4.

Figura 4 - Main Page
Figura 4 - Main Page

Dal link presente nella pagina è possibile accedere alla CommentPage (figura 5):

Figura 5 - Comment Page
Figura 5 - Comment Page

Il codice HTML di questa ulteriore pagina è il seguente:

<html>
<title>Comment Page</title>
<link rel="stylesheet" href="css/main-style.css">
<link rel="stylesheet" href="css/style.css">
<body>
<form wicket:id = "commentForm">
Add your comment here:
<p>
<textarea wicket:id = "text">This is a comment</textarea>
<p>
<input type = "submit" value = "Submit"/>
</form>
<p>
<span wicket:id = "comments">
<p>
<span wicket:id = "date">1/1/2004</span><br>
<span wicket:id = "text">Comment text goes here.</span>
</p>
</span>
<wicket:remove>
<p>
1/2/2004<br/>
More comment text here.
</p>
</wicket:remove>
</body>
</html>

Mentre il codice della corrispondente classe Java è:

public class CommentPage extends WebPage {
private List commentList = new ArrayList();
private ListView commentListView;

public CommentPage() {
add(new CommentForm("commentForm"));
add(commentListView = new ListView("comments", commentList) {
public void populateItem(final ListItem listItem) {
final Comment comment = (Comment)listItem.getModelObject();
listItem.add(new Label("date", comment.getDate().toString()));
listItem.add(new MultiLineLabel("text", comment.getText()));
}
});
}

public class CommentForm extends Form {
private final Comment comment = new Comment();

public CommentForm(final String componentName) {
super(componentName);
add(new TextArea("text", new PropertyModel(comment, "text")));
}

public final void onSubmit() {
final Comment newComment = new Comment();
newComment.setText(comment.getText());

commentList.add(0, newComment);
commentListView.modelChanged();

comment.setText("");
}
}

}

Il codice dell'applicazione di esempio può essere scaricato dal menu in alto a sinistra (WicketExamples1). L'archivio non comprende le librerie necessarie per la compilazione e/o il runtime. Le dipendenze sono le seguenti:

wicket-1.4-m2.jar (compilazione e runtime) slf4j-api-1.5.0.jar (runtime) slf4j-jcl-1.5.0.jar (runtime)

Conclusioni

In questo primo articolo è stata data a grandi linee una descrizione del framework. Nel prossimo articolo ne vedremo più in dettaglio componenti e caratteristiche più avanzate.

Riferimenti

  • [1] Karthik Gurumurthy, "Pro Wicket", Apress, 2006
  • [2] Sito ufficiale di Wicket presso Apache

HYPERLINK "http://wicket.apache.org/" http://wicket.apache.org/