Presentazione del Jug Ancona relativa al framework web Wicket

1. Il framework Wicket Andrea Del Bene Jug Marche [email_address]

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)

20. Il pannello footer … < wicket:panel > < span class = &quot;piccolo&quot; > Powered by </ span > < a target = &quot;_blank&quot; title = &quot;vai al sito dello JUG Ancona,..” href = &quot;http://www.jugancona.it/&quot; > < img title = &quot;vai al sito dello JUG Ancona, ...&quot; alt = &quot;JUG Ancona, Java User Group di Ancona&quot; src = &quot;wicketLayout_files/logo_jugancona.gif&quot; ></ a > < img title = &quot;JUG, Java User Group&quot; alt = &quot;JUG, Java User Group&quot; src = &quot;wicketLayout_files/logo_jug.gif&quot; > < a title = &quot;vai al sito del framework Spring &quot; href = &quot;http://www.springframework.org/&quot; > < img title = &quot;vai al sito del framework Spring&quot; alt = &quot;Spring&quot; src = &quot;wicketLayout_files/logo_spring.gif&quot; ></ a > < a title = &quot;vai al sito di Mozilla Firefox...&quot; href = &quot;http://www.mozilla.com/&quot; > < img title = &quot;vai al sito di Mozilla Firefox...&quot; alt = &quot;Firefox&quot; src = &quot;wicketLayout_files/logo_firefox.gif&quot; ></ 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=&quot;menuTitle&quot;>Menu principale</div> <ul class=&quot;menuItems&quot;> <li> <img src=&quot;wicketLayout_files/home.gif&quot;> <a class=&quot;Offmouse&quot; href=&quot;http://localhost:8080/jug4tenda/index.jsp&quot; id=&quot;newOspite&quot; onmouseout=&quot;this.className='Offmouse'&quot; onmouseover=&quot;this.className='Onmouse'&quot;>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( &quot;headerPanel&quot; ) ); add( new MenuPanel( &quot;menuPanel&quot; ) ); add( new FooterPanel( &quot;footerPanel&quot; ) ); add( new Label( &quot;contentComponent&quot;, &quot;content&quot; ) ); } } < html > < head > < meta http-equiv = &quot;Content-Type&quot; content = &quot;text/html; charset=UTF-8&quot; > < title > Jug4Tenda - Home page </ title > ... </ head > < body > < div id = &quot;intestazione&quot; wicket:id = &quot;headerPanel&quot; > intestazione </ div > < div id = &quot;pagina&quot; > < div id = &quot;Menu&quot; wicket:id = &quot;menuPanel&quot; > Menu </ div > < div id = &quot;Content&quot; wicket:id = &quot;content&quot; > Content </ div > </ div > < div id = &quot;piedipagina&quot; wicket:id = &quot;footerPanel&quot; > piedipagina </ div > </ body > </ html >

23. Demo

33. Codice della pagina di esempio public class HomePage extends WebPage { public HomePage (){ super (); add( new Label( &quot;label&quot; , &quot;Hello World&quot; )); add( new Label( &quot;timeStamp&quot; , &quot;&quot; + new Date())); add( new Link( &quot;link&quot; ) { @Override public void onClick() { } }); add( new Link( &quot;spanLink&quot; ){ @Override public void onClick() { } } ); .... @Override protected void onBeforeRender () { super .onBeforeRender(); addOrReplace( new Label( &quot;timeStampFresh&quot; , &quot;&quot; + new Date())); } }

37. new Model<Persona>( new Persona( “Mario” , “Rossi” )); …

40. Classe Java

41. new TextField<String>( “username” , new Model<String>( “Inserisci il tuo username” )); Codice HTML Username: < input type = &quot;text&quot; wicket:id = &quot;username&quot; />

42. Prototipo maschera di login

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( &quot;username&quot; , new Model<String>( &quot;&quot; )); passwordField = new PasswordTextField( &quot;password&quot; , new Model<String>( &quot;&quot; )); loginStatus = new Label( &quot;loginStatus&quot; ); add( usernameField ); add( passwordField ); add( new Label( &quot;message&quot; , &quot;Login&quot; )); add( loginStatus ); } public final void onSubmit() { String username = usernameField .getValue(); String password = passwordField .getValue(); if ((username.equals( &quot;Mario&quot; ) && password.equals( &quot;Rossi&quot; ))) loginStatus .setDefaultModel( new Model<String>( &quot;Complimenti!&quot; )); else loginStatus .setDefaultModel( new Model<String>( &quot;Username o password errate!&quot; )); } 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( &quot;form&quot; ); 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( &quot;username&quot; , new Model<String>( &quot;&quot; )); passwordField = new PasswordTextField( &quot;password&quot; , new Model<String>( &quot;&quot; )); loginStatus = new Label( &quot;loginStatus&quot; ); add( usernameField ); add( passwordField ); add( new Label( &quot;message&quot; , &quot;Login&quot; )); add( loginStatus ); } public final void onSubmit() { String username = usernameField .getValue(); String password = passwordField .getValue(); if ((username.equals( &quot;Mario&quot; ) && password.equals( &quot;Rossi&quot; ))) loginStatus .setDefaultModel( new Model<String>( &quot;Complimenti!&quot; )); else loginStatus .setDefaultModel( new Model<String>( &quot;Username o password errate!&quot; )); ... 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.

48. Demo

50. I repeat viewer

52. la aggiunge alla lista di istanze precedentemente create

53. visualizza le istanze della lista.

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>( &quot;person.name&quot; )); add( new TextField<String>( &quot;person.sureName&quot; )); add( new TextField<String>( &quot;person.address&quot; )); add( new TextField<String>( &quot;person.email&quot; )); } @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>( &quot;person.name&quot; )); add( new TextField<String>( &quot;person.sureName&quot; )); add( new TextField<String>( &quot;person.address&quot; )); add( new TextField<String>( &quot;person.email&quot; )); } @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

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( &quot;form&quot; )); PageableListView<Person> persons = new PageableListView<Person>( &quot;persons&quot; , personsArray,30) { @Override protected void populateItem(ListItem<Person> personHtml) { personHtml.add( new Label( &quot;personName&quot; , personHtml.getModel().getObject().getName())); personHtml.add( new Label( &quot;personSurename&quot; , personHtml.getModel().getObject().getSureName())); personHtml.add( new Label( &quot;address&quot; , personHtml.getModel().getObject().getAddress())); personHtml.add( new Label( &quot;email&quot; , personHtml.getModel().getObject().getEmail())); } }; add(persons); this . personsArray = personsArray; } Il codice nell'ellisse è il repeat viewer che visualizza la lista di persone create

59. Demo

61. Rende le applicazioni web testabili molto più facilmente.

62. Gestione dello stato trasparente.

63. Grande varietà di componenti pronti all'uso.

65. Documentazione utente e tutorial frammentari e scarni.

66. ...

68. Applicare attributi ai tag HTML

71. Grazie ! Andrea Del Bene JUG Marche - www.jugancona.it