Apache Wicket (16-18)

JASR Wiki

<<< Powrót do Tworzenie aplikacji wielowarstowych 2007/2008

Spis treści

Wprowadzenie

Apache Wicket to framework służący do tworzenia aplikacji webowych. Cechą charakterystyczną jest brak konieczności korzystania z jakichkolwiek plików konfiguracyjnych ani znajomości specjalnej składni do tworzenia stron (co odróżnia go m.in. od JSF czy Struts).

Instalacja

Sposób 1

1. Ściągnąć i rozpakować najnowszą wersję Apache Wicket

2. Dodać do tworzonego projektu biblioteki z katalogu lib/

Sposób 2 + Hello World

Założenia: zainstalowane Java SDK 1.4 lub nowsze.

1. Ściągnąć i rozpakować narzędzie Maven 2

2. Dodać katalog bin/ do zmiennej środowiskowej PATH, np.:

Unix

 export PATH=/usr/local/maven-2.0/bin:$PATH

Windows

 set PATH="c:\program files\maven-2.0\bin";%PATH%

3. Wejść na stronę Apache Wicket - Quickstart

4. Wpisać/wybrać wartości:

 GroupID:     pl.edu.mimuw.students
 ArtifactID:  HelloWorld
 Version:     1.3.3

5. Skopiować wygenerowane polecenie z pola Command line (przyda się za chwilę).

6. Z linii poleceń wejść do katalogu, w którym chcemy stworzyć projekt (np. katalog roboczy ulubionego środowiska).

7. Wkleić polecenie z punktu 5 i wcisnąć ENTER.

8. Po wygenerowaniu przez Mavena projektu wejść do katalogu HelloWorld.

9. Wykonać polecenie mvn jetty:run (kompiluje i uruchamia aplikację na serwerze jetty)

10. W ulubionej przeglądarce otworzyć adres http://localhost:8080/HelloWorld. Jeśli wszystko przebiegło pomyślnie, powinien ukazać się komunikat o treści: "If you see this message wicket is properly configured and running".

11. Dla formalności można podmienić powyższy komunikat na "Hello World!" w pliku src/main/java/pl/edu/mimuw/students/HomePage.java

Ćwiczenie

Policzyć ile linii kodu trzeba było napisać, aby stworzyć aplikację Hello World wykorzystując Apache Wicket i Mavena.

Prosta interakcja

Rozszerzymy aplikację o prostą interakcję z użytkownikiem. Użytkownik poda swoje imię, które następnie zostanie wyświetlone na stronie.

Tworzymy stronę domową o nazwie pl.edu.mimuw.students.HomePage.html (zauważmy, że oprócz atrybutu wicket:id cała strona to czysty HTML):

 <html>
     <head>
         <title>Homepage</title>
     </head>
     <body>
         <strong>Do I know you?</strong>
         <br/><br/>
         <form wicket:id="enterNameForm">
         Tell me your name:
         <input type="text" wicket:id="name" />
         <input wicket:id="okButton" type="submit" value="OK"/> 
         </form>
     </body>
 </html>

Odpowiadająca tej stronie klasa pl.edu.mimuw.students.HomePage.java wyglądać będzie następująco:

 package pl.edu.mimuw.students;
 
 import org.apache.wicket.PageParameters;
 import org.apache.wicket.markup.html.WebPage;
 import org.apache.wicket.markup.html.form.Button;
 import org.apache.wicket.markup.html.form.Form;
 import org.apache.wicket.markup.html.form.RequiredTextField;
 import org.apache.wicket.model.CompoundPropertyModel;
 
 
 public class HomePage extends WebPage {
 
     private static final long serialVersionUID = 1L;
 
     public HomePage(final PageParameters parameters) {
         add(new EnterNameForm("enterNameForm"));
     }
     
     private class EnterNameForm extends Form {
 
         private static final long serialVersionUID = 1L;
 
         public EnterNameForm(String wicketId) {
             
             super(wicketId, new CompoundPropertyModel(new EnterNameModel()));
             
             add(new RequiredTextField("name"));
             
             add(new Button("okButton"));
             
         }
         
         public void onSubmit() {
             String name = ((EnterNameModel)getModelObject()).getName();
             setResponsePage(new WelcomePage(name));
         }
     }
 }

Stworzenie prostego modelu dla formularza na stronie (klasa pl.edu.mimuw.students.EnterNameModel):

 package pl.edu.mimuw.students;
 
 import java.io.Serializable;
 
 public class EnterNameModel implements Serializable {
 
   private static final long serialVersionUID = 1L;
 
   private String name;
 
   public String getName() {
     return name;
   }
 
   public void setName(String name) {
     this.name = name;
   }
   
 }

Wyświetlenie wyniku (plik pl.edu.mimuw.students.WelcomePage.html):

 <html>
     <head>
         <title>Welcome page</title>
     </head>
     <body>
         <strong>Now I do!</strong>
         <br/><br/>
         Hello, <span wicket:id="name">unknown name</span>!
     </body>
 </html>

I odpowiadająca klasa (pl.edu.mimuw.students.WelcomePage.java):

 package pl.edu.mimuw.students;
 
 import org.apache.wicket.markup.html.WebPage;
 import org.apache.wicket.markup.html.basic.Label;
 
 public class WelcomePage extends WebPage {
     
     public WelcomePage(String name) {
       add(new Label("name", name));
     }
 }

Co dalej

W miarę wolnego czasu będziemy przechodzili przez przykłady lub wybierali interesujące:

Examples <- na początek to trzeba otworzyć gdzieś z boku

Opisy przykładów (live oznacza że można sobie zobaczyć jak działa wynik ćwiczenia):


Navomatic - zasada działania komponentu Border (otaczania zawartości elementu o danym wicket:id, komponentem zdefiniowanym na boku)

GuestBook - dodawanie komentarzy (formularz) i wyświetlanie ich poniżej z użyciem ListView

DropDownChoice - użycie komponentu DropDownChoice

StockQuote - definiowanie własnego komponentu

Markup Inheritance - tworzenie uniwersalnego layoutu

Ajax Counter - "praca z Ajaxem czystym relaksem", licznik

Fragments - użycie komponentu Fragment


Można jeszcze przejrzeć efektowne komponenty z: Component Reference np. TabbedPanel i Palette

Przydatne linki

http://wicket.apache.org/ - oficjalna strona frameworku Apache Wicket

http://jlaskowski.blogspot.com/2008/02/pierwsze-kroki-z-apache-wicket-13.html - pierwsze kroki z Apache Wicket na blogu Jacka Laskowskiego

http://cwiki.apache.org/WICKET/wicket-15-wish-list.html - wishlist kolejnej wersji.