niedziela, 5 kwietnia 2009

"Wicket in Action" - rozdział 1. Co to jest Wicket?

Zgodnie z zapowiedzią relacja z rozdziału pierwszego "Wicket in Action". Wyprzedzając fakty, mam wrażenie, że wybór Wicketa do poznania był dobrym strzałem. Brakowało mi czegoś tak przyjemnego. Ale po kolei...
W rozdziale pierwszym autorzy (Martin Dashorst i Eelco Hillenius) przedstawiają krótko historię tego rozwiązania oraz definiują jego miejsce i przeznaczenie na rynku szkieletów. Mówiąc wprost, Wicket stanowi pomost pomiędzy HTMLem, a starą dobrą Javą po stronie serwera, a jego głównym zadaniem jest zarządzanie stanem aplikacji.

We can break it into three parts: just Java, just HTML, and meaningful abstractions.
Tworząc Twoją nową aplikację internetową logikę i sposób zachowania zakodujesz wykorzystując Javę, widok stanowi praktycznie czysty HTML, a ponadto dla elementów często spotykanych na stronach WWW Wicket dostarcza odpowiednich komponentów.
Ponadto w rozdziale pierwszym przedstawionych jest kilka przykładów, które dają wyobrażenie o działaniu Wicket'a. Standardowa "aplikacja" - Hello World (odsyłam do tutoriala na stronie Apache Wicket) oraz dwa krótkie przykłady pokazujące wykorzystanie komponentów Label, Link oraz przeplecenie tego wszystkiego z AJAXem.
Podsumowując, poniżej przedstawiam mały przykład, którego zadaniem jest wyświetlenie dwóch linków:
  • link 1: zliczający ilość kliknięć w niego
  • link 2: przenoszący nas do strony "HelloWorld"
W pierwszej kolejności stwórzmy klasy odpowiedzialne za poszczególne strony. Klasę: LinkPage - odpowiedzialną za główną stronę, na której wyświetlone są linki oraz klasę SecondPage - odpowiedzialną za wyświetlenie strony po kliknięciu drugiego linku. Strona ta wyświetli komunikat Hello World, ale wykorzystując komponent Label.
Do dzieła!
Klasa LinkPage:

package com.blogspot.matecki.ch01;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.model.PropertyModel;


public class LinkPage extends WebPage {

private int counter = 0;

public LinkPage() {
add(new Link("link1"){
public void onClick() {
counter++;
}
});

add(new Link("link2"){
public void onClick() {
setResponsePage(new SecondPage());
}
});
add(new Label("lCounter", new PropertyModel(this,"counter")));
}
}

Klasa SecondPage:



package com.blogspot.matecki.ch01;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;

public class SecondPage extends WebPage {
public SecondPage() {
add(new Label("label", "Hello World!"));
}
}

Mamy już klasy odpowiedzialne za poszczególne strony. Brakuje jeszcze klasy reprezentującej całą aplikację. Oto i ona:


package com.blogspot.matecki.ch01;

import org.apache.wicket.protocol.http.WebApplication;
import org.apache.wicket.Page;

public class HelloWorldApplication extends WebApplication {
public Class getHomePage() {
return LinkPage.class;
}
}

Zgodnie z filozofią Wicketa każdej klasie reprezentującej stronę odpowiada plik HTML o dokładnie takiej samej nazwie znajdujący się w tej samej paczce. Odpowiedzialny on jest za widok. Stwórzmy więc dwa pliki SecondPage.html i LinkPage.html.
SecondPage.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<h1 wicket:id="label">Tutaj wstaw tekst</h1>
</body>
</html>

LinkPage.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<a href="#" wicket:id="link1">This link</a> has been clicked
<span wicket:id="lCounter">123</span> times. Go to <a href="#" wicket:id="link2">second page</a>.
</body>
</html>

Co tu jest ciekawego? Zwróć uwagę na element wicket:id jest on ściśle powiązany z identyfikatorami w klasach odpowiedzialnych za poszczególne strony. Ponadto klasy odpowiedzialne za strony rozszerzają WebPage, a klasa reprezentująca aplikację rozszerza WebApplication. Jeszcze tylko odpowiednie wpisy do web.xml i możemy próbować to uruchomić.
WEB.XML:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
<display-name>Wicket Examples</display-name>
<filter>
<filter-name>HelloWorldApplication</filter-name>
<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>com.blogspot.matecki.ch01.HelloWorldApplication</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>HelloWorldApplication</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>

Podsumowując. Rozdział pierwszy zapoznaje nas z założeniami rządzącymi światem Wicket i pozwala (prawie) zbudować coś działającego. Do ściągnięcia projekt w IntelliJ IDEA z działającą "aplikacją" na podstawie powyższych kodów źródłowych.
Jak Wam się podoba ta forma relacji?

2 komentarze:

Marek Kliś pisze...

Mógłbyś poprawić formatowanie kodów? W kodach javy brakuje wcięć a kod html jest trochę nieczytelnie połamany. Chyba, że mi Firefox to tak pokazuje.
Poza tym super i czekam na relację z dalszych rozdziałów.

Pozdrawiam

Maciej Matecki pisze...

Powinno być już dobrze. Mam wrażenie, że Google Chrome średnio się lubi z bloggerem, a przynajmniej jego edytorem...
Pozdr.,