3. L'HTTP è stateless e dobbiamo fare i salti mortali per associare uno stato alla navigazione di un utente sul nostro sito (di solito si ricorre all'oggetto Session)
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20. Il pannello footer … < wicket:panel > < span class = "piccolo" > Powered by </ span > < a target = "_blank" title = "vai al sito dello JUG Ancona,..” href = "http://www.jugancona.it/" > < img title = "vai al sito dello JUG Ancona, ..." alt = "JUG Ancona, Java User Group di Ancona" src = "wicketLayout_files/logo_jugancona.gif" ></ a > < img title = "JUG, Java User Group" alt = "JUG, Java User Group" src = "wicketLayout_files/logo_jug.gif" > < a title = "vai al sito del framework Spring " href = "http://www.springframework.org/" > < img title = "vai al sito del framework Spring" alt = "Spring" src = "wicketLayout_files/logo_spring.gif" ></ a > < a title = "vai al sito di Mozilla Firefox..." href = "http://www.mozilla.com/" > < img title = "vai al sito di Mozilla Firefox..." alt = "Firefox" src = "wicketLayout_files/logo_firefox.gif" ></ a > </ wicket:panel > … FooterPanel.html package helloWorld.layoutTenda; import org.apache.wicket.markup.html.panel.Panel; public class FooterPanel extends Panel { public FooterPanel(String id) { super (id); } } HeaderPanel.java
21. Il pannello menu … <div class="menuTitle">Menu principale</div> <ul class="menuItems"> <li> <img src="wicketLayout_files/home.gif"> <a class="Offmouse" href="http://localhost:8080/jug4tenda/index.jsp" id="newOspite" onmouseout="this.className='Offmouse'" onmouseover="this.className='Onmouse'">Home</a></li> </ul> … MenuPanel.html package helloWorld.layoutTenda; import org.apache.wicket.markup.html.panel.Panel; public class Menu Panel extends Panel { public Menu Panel (String id) { super (id); } } MenuPanel.java
22. La pagina template Jug4Wicket package helloWorld.layoutTenda; import org.apache.wicket.markup.html.WebPage; public class JugTemplate extends WebPage { public JugTemplate(){ add( new HeaderPanel( "headerPanel" ) ); add( new MenuPanel( "menuPanel" ) ); add( new FooterPanel( "footerPanel" ) ); add( new Label( "contentComponent", "content" ) ); } } < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Jug4Tenda - Home page </ title > ... </ head > < body > < div id = "intestazione" wicket:id = "headerPanel" > intestazione </ div > < div id = "pagina" > < div id = "Menu" wicket:id = "menuPanel" > Menu </ div > < div id = "Content" wicket:id = "content" > Content </ div > </ div > < div id = "piedipagina" wicket:id = "footerPanel" > piedipagina </ div > </ body > </ html >
33. Codice della pagina di esempio public class HomePage extends WebPage { public HomePage (){ super (); add( new Label( "label" , "Hello World" )); add( new Label( "timeStamp" , "" + new Date())); add( new Link( "link" ) { @Override public void onClick() { } }); add( new Link( "spanLink" ){ @Override public void onClick() { } } ); .... @Override protected void onBeforeRender () { super .onBeforeRender(); addOrReplace( new Label( "timeStampFresh" , "" + new Date())); } }
41. new TextField<String>( “username” , new Model<String>( “Inserisci il tuo username” )); Codice HTML Username: < input type = "text" wicket:id = "username" />
45. Il pannello e la form di login (Java) 2 public class LoginForm extends Form { private TextField usernameField = null ; private PasswordTextField passwordField = null ; private Label loginStatus = null ; public LoginForm( final String componentName) { super (componentName); usernameField = new TextField( "username" , new Model<String>( "" )); passwordField = new PasswordTextField( "password" , new Model<String>( "" )); loginStatus = new Label( "loginStatus" ); add( usernameField ); add( passwordField ); add( new Label( "message" , "Login" )); add( loginStatus ); } public final void onSubmit() { String username = usernameField .getValue(); String password = passwordField .getValue(); if ((username.equals( "Mario" ) && password.equals( "Rossi" ))) loginStatus .setDefaultModel( new Model<String>( "Complimenti!" )); else loginStatus .setDefaultModel( new Model<String>( "Username o password errate!" )); } Wicket dispone di un componente apposito per i campi password. L'evento onSubmit della form scatta prima di inviare i parametri della form al server.
46. Il pannello di login (Java) public class LoginPanel extends Panel { public LoginPanel(String id) { super (id); init(); } private void init(){ Form loginForm = new LoginForm( "form" ); add(loginForm); } public final class LoginForm extends Form { private TextField usernameField = null ; private PasswordTextField passwordField = null ; private Label loginStatus = null ; public LoginForm( final String componentName) { super (componentName); usernameField = new TextField( "username" , new Model<String>( "" )); passwordField = new PasswordTextField( "password" , new Model<String>( "" )); loginStatus = new Label( "loginStatus" ); add( usernameField ); add( passwordField ); add( new Label( "message" , "Login" )); add( loginStatus ); } public final void onSubmit() { String username = usernameField .getValue(); String password = passwordField .getValue(); if ((username.equals( "Mario" ) && password.equals( "Rossi" ))) loginStatus .setDefaultModel( new Model<String>( "Complimenti!" )); else loginStatus .setDefaultModel( new Model<String>( "Username o password errate!" )); ... Wicket dispone di un componente apposito per i campi password. L'evento onSubmit della form scatta prima di inviare i parametri della form al server.
54. Il JavaBean Person package helloWorld; import java.io.Serializable; public class Person implements Serializable { private String name ; private String sureName ; private String address ; private String email ; public String getAddress() { return address ; } public void setAddress(String address) { this . address = address; } public String getEmail() { return email ; } public void setEmail(String email) { this . email = email; } public String getName() { return name ; } public void setName(String name) { this . name = name; } public String getSureName() { return sureName ; } public void setSureName(String sureName) { this . sureName = sureName; } }
55. La form class CreatePerson extends Form { private Person person = new Person(); public Person getPerson() { return person ; } public CreatePerson(String id) { super (id); setDefaultModel( new CompoundPropertyModel<Person>( this )); add( new TextField<String>( "person.name" )); add( new TextField<String>( "person.sureName" )); add( new TextField<String>( "person.address" )); add( new TextField<String>( "person.email" )); } @Override protected void onSubmit() { super .onSubmit(); personsArray .add( person ); person = new Person(); } }
56. La form class CreatePerson extends Form { private Person person = new Person(); public Person getPerson() { return person ; } public CreatePerson(String id) { super (id); setDefaultModel( new CompoundPropertyModel<Person>( this )); add( new TextField<String>( "person.name" )); add( new TextField<String>( "person.sureName" )); add( new TextField<String>( "person.address" )); add( new TextField<String>( "person.email" )); } @Override protected void onSubmit() { super .onSubmit(); personsArray .add( person ); person = new Person(); } } Si traduce in getPerson().getPerson().set/getName , quindi il TextFiled legge/scrive direttamente sui campi dell'istanza di Person Uso la stessa form come modello per i miei dati ed avrò accesso ai sui campi La form sarà una inner class del pannello è vedrà la sua variabile personsArray
57.
58. Il pannello public class PersonsManager extends Panel { private List<Person> personsArray = new ArrayList<Person>(); public PersonsManager(String id, List<Person> personsArray) { super (id); add( new CreatePerson( "form" )); PageableListView<Person> persons = new PageableListView<Person>( "persons" , personsArray,30) { @Override protected void populateItem(ListItem<Person> personHtml) { personHtml.add( new Label( "personName" , personHtml.getModel().getObject().getName())); personHtml.add( new Label( "personSurename" , personHtml.getModel().getObject().getSureName())); personHtml.add( new Label( "address" , personHtml.getModel().getObject().getAddress())); personHtml.add( new Label( "email" , personHtml.getModel().getObject().getEmail())); } }; add(persons); this . personsArray = personsArray; } Il codice nell'ellisse è il repeat viewer che visualizza la lista di persone create