Tworzenie aplikacji internetowych z wykorzystaniem ...sens.e-informatyka.pl/wp-content/uploads/WIRP2/wicket.pdf · Tworzenie aplikacji internetowych z wykorzystaniem szkieletu Wicket

Tworzenieaplikacji internetowychaplikacji internetowych

z wykorzystaniem szkieletu Wicket

BłaŜej Bukowy, 157489

Wojciech Orzeszyna, 157630

Cel prezentacji

• Zwrócenie uwagi słuchaczy na webowy framework Apache Wicketframework Apache Wicket

• Pokazanie na przykładach łatwości tworzenia w Wickecie

Agenda

1. Czym jest Wicket? Historia, cechy charakterystyczne

2. Jak zacząć? Ant, Maven

3. HelloWorld

4. Koncepcje Wicket4. Koncepcje Wicket

5. WicketTester

6. Wicket Bench

7. Integracja z innymi frameworkami – Spring, Hibernate

8. Co słychać u konkurencji?

9. Kto tego uŜywa?

10. Wady i zalety

11. Wsparcie

12. Bibliografia

Czym jest Wicket?

Lekki, oparty na komponentach opensource'owy

framework do budowy aplikacji webowych

za pomocą Javy i HTML-a

Historia

• 2004 – start projektu (Jonathan Locke)

• 2005 –JavaOne'05 (wersja 1.0)

• 2006 – inkubacja w ASF (wersja 1.2)• 2006 – inkubacja w ASF (wersja 1.2)

• 2007 – status Top Level Projects w ASF

• 2008 – wersja 1.3

• 2009 – wersja 1.4

• 2010 – wersja 1.4.7

Cechy charakterystyczne Wicketa

• Tylko JAVA i HTML– Komponenty i obiekty

• Separacja kodu od widoku• Separacja kodu od widoku

• Absolutne minimum konfiguracji w XML

• Wbudowany AJAX (JavaScript)

• Przejrzyste zarządzanie sesjami

• Przyjazne adresy URL

Cechy charakterystyczne Wicketa

• Rozwiązanie problemu przycisku „wstecz”

• Integralność z innymi frameworkami i bibliotekami (Spring, Hibernate + inne)bibliotekami (Spring, Hibernate + inne)

• Rozbudowane, gotowe do uŜycia komponenty (ponad 200)– wybieranie daty, edytor tekstu, Google Maps

– panel z kartami, nawigacja, drzewo

Co to oznacza w praktyce?

• Pisanie aplikacji w Apache Wicket bardziej przypomina pisanie aplikacji desktopowej przypomina pisanie aplikacji desktopowej niŜ aplikacji webowej

• Jasny podział zakresu prac między programistę i projektanta wyglądu stron

• Szybki start – tylko znane technologie

Jak zacząć?

Wymagania wstępne:

• JDK ≥ 5• JDK ≥ 5

• Java IDE

• Kontener servletów

• Maven lub Ant

Jak zacząć? - Ant

Biblioteki:• wicket.jar

• servletapi-2.3.jar

• slf4j-api.jar• slf4j-api.jar

• jetty.jar

• jetty-util.jar

• slf4j-log4j12.jar

• log4j.jar

Jak zacząć? - Ant

build.xml

Jak zacząć? - Ant

build.xml

Jak zacząć? - Ant

build.xml

Jak zacząć? – Maven

• http://wicket.apache.org/quickstart.htmlmvn archetype:create DarchetypeGroupId=org.apache.wicket –DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.4.8 –DgroupId=com.mycompany -DartifactId=myprojectDgroupId=com.mycompany -DartifactId=myproject

<dependency>

<groupId>org.apache.wicket</groupId>

<artifactId>wicket</artifactId>

<version>1.4.8</version>

</dependency>

pom.xml

Jak zacząć?

Jak zacząć?

Wicket in ActionBonus Chapter 15Bonus Chapter 15

Setting up a Wicket project

http://www.manning.com/dashorst/Wicket_Bonus-chapter15.pdf

HelloWorld

• Budowa strony:– Plik *.html

– Plik *.java (o tej samej nazwie)– Plik *.java (o tej samej nazwie)

• Powiązanie:– wicket:id

HelloWorld

<h1 wicket:id="msg">[tu zmienimy]</h1>HelloWorld.html

++add(new Label("msg", "Hello World!"))

HelloWorld.java

=<h1>Hello World!</h1>

Koncepcje Wicket

• Aplikacja

• Sesja

• RequestCycle

• Komponenty• Komponenty

• Zachowania

• Model

Koncepcje Wicket – Aplikacja

• Kontener najwyŜszego poziomu, przechowuje:– Komponenty

– Znaczniki

– Pliki konfiguracyjne

– Właściwości– Właściwości

• Inicjalizacja i konfiguracja– UŜycie specyficznych tagów Wicket

– Określenie strony startowej

– Konfiguracja DAO (dla uŜywających Springa)

• Fabryki dla obiektów (np. Session, RequestCycle, Security)

• Konfiguracja w web.xml

• Plik WebApplication.java

Koncepcje Wicket – Aplikacja

<filter>

<filter-name>wicket</filter-name>

<filter-class>

org.apache.wicket.protocol.http.WicketFilterorg.apache.wicket.protocol.http.WicketFilter

</filter-class>

<init-param>

<param-name>applicationClassName</param-name>

<param-value>example.MyApplication</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</filter>

Koncepcje Wicket – Sesja

• Abstrakcja sesji uŜytkownika

• Typowo trzymana w HttpSession

• Przypisane do wątków

• Silnie typowana• Silnie typowana

class MySession extends WebSession {

private ShoppingCart cart;

public ShoppingCart getCart() { … }

public void setCart(ShoppingCart cart) { … }

}

• Zawiera komponenty i historię stron


1. PrzeciąŜenie metody newSession w WicketApplication.java

@Override

public Session newSession(Request request, Responsepublic Session newSession(Request request, Responseresponse) {

return new KlasaSesji(WicketApplication.this, request);

}


2. Utworzenie klasy przechowującej sesję

public final class KlasaSesji extends WebSession {

private boolean stanSesji;

protected KlasaSesji(WebApplication application, Request request) { super(request);

stanSesji = false;

}

public void setStanSesji(boolean _sS) { stanSesji = _sS; }

public boolean getStanSesji() { return stanSesji; }

}


3. Dostęp do obiektu sesji

PlikSesji session = (PlikSesji) getSession();

session.setStanSesji(true);session.setStanSesji(true);

Koncepcje Wicket - RequestCycle

• Kroki podejmowane przy kaŜdym Ŝądaniu:

– Stworzenie obiektu RequestCycle

– Dekodowanie Ŝądania

– Identyfikacja celu Ŝądania (jaka strona, komponent?)– Identyfikacja celu Ŝądania (jaka strona, komponent?)

– Przetworzenie zdarzeń (onClick, onSubmit)

– Wygenerowanie odpowiedzi(strona, komponent, obrazek, pdf ...)

– Sprzątanie


• Dwa typy Ŝądań:

– Stanowe

• Związane z konkretną sesją uŜytkownika

• Nie da się zrobić zakładki• Nie da się zrobić zakładki

– Bezstanowe

• Niekoniecznie związane z konkretną sesją

• MoŜna uczynić z nich zakładki


Koncepcje Wicket – Komponent

• Podstawowy klocek w aplikacji

• Potrafi się wyrysować

• Odbiera zdarzenia

• Łatwo rozszerzalny i łatwy do ponownego wykorzystania• Łatwo rozszerzalny i łatwy do ponownego wykorzystania

• Dostępne ponad 220 gotowych komponentów w Wicket core i Wicket extensions!

• Główne komponenty odpowiadają plikowi HTML

• Podkomponenty odpowiadają elementom HTML

• Hierarchie w kodzie i widoku muszą się zgadzać!



• Połączenie komponentu z widokiem w HTMLu za pomocą wicket:id

<h1 wicket:id=“msg”>[tu zmienimy]</h1>

HTML

new Label(“msg”, “Hello, World!”);

Java

• MoŜna usunąć wicket:id z wynikowej odpowiedzi

Koncepcje Wicket – Komponent (Link)

<a href="#" wicket:id="link">Click</a>HTML

Link link = new Link("link") {Link link = new Link("link") {

@Override public void onClick() {

//do something

setResponsePage(new NewPage());

}

};

add(link);Java

Koncepcje Wicket – Komponent (AjaxLink)

<a wicket:id="link">Click</a>HTML

AjaxLink link = new AjaxLink("link") {AjaxLink link = new AjaxLink("link") {

public void onClick(AjaxRequestTarget t){

//do something

t.addComponent(someComponent);

t.appendJavascript("Effects.fade('foo');");

}

};

add(link);Java

Koncepcje Wicket – Zachowania

• Zachowania to rodzaj wtyczek do komponentów

• Mogą zmieniać kod HTML generowany przez komponent

item.add(new AbstractBehavior() {

public void onComponentTag(Component component, ComponentTag tag) {public void onComponentTag(Component component, ComponentTag tag) {

tag.put("class", css = (((Item)component).getIndex() % 2 == 0) ? "even" : "odd");

}

});

Wyśjcie:

<tr class=“odd”>…</tr>

<tr class=“even”>…</tr>

Koncepcje Wicket - Zachowania

• Nie tylko zmiana atrybutów

• Dodawanie JavaScriptowych zdarzeń

• Dodawanie zachowania w stylu Ajax

component.add(

new AjaxSelfUpdatingBehavior(

Duration.seconds(1)

)

);

Koncepcje Wicket – Model

• KaŜdy komponent ma swój model, który utrzymuje jego stan

• Model jest połączeniem komponentu z naszymi POJOs


• „Leniwe wiązanie” w Javie?

• Nie aktualizuje wartości

new TextField(“txt”, person.getName())

• Trzeba uwaŜać na puste referencje• Trzeba uwaŜać na puste referencje

new Label(“street”, person.getAddress().getStreet())

• Rozwiązanie: wyraŜenia w stylu OGNL/EL

• Przyłączalne i odłączalne modele

new Label("lastname", customer.getName());

new Label("lastname", new Model(customer.getName()));=


add(new Label("street", (cust==null ||cust.getAddress()==null) ? "" : cust.getAddress().getStreet());

vsadd(new Label("street",

new PropertyModel(customer,"address.street")));

setModel(new CompoundPropertyModel(customer));add(new Label("address.street ");

vs

vs


public class MyForm extends Form {

public MyForm(String id) {

super(id);

Customer customer = new Customer();

setModel(new Model(customer));setModel(new Model(customer));

add(new TextField("name", new PropertyModel(customer, "name")));

add(new TextField("street", new PropertyModel(customer, „address.street")));

}

protected void onSubmit() {

Customer customer = (Customer)getModelObject();

String street = customer.getAddress().getStreet();

// …

}

}

WicketTester

• Klasa słuŜąca do testów jednostkowych komponentów

• JUnit / TestNG• JUnit / TestNG

• Intuicyjne modelowanie sposobu uŜywania aplikacji przez uŜytkownika

• Testowalne są równieŜ akcje AJAX

WicketTester - przykład

WicketTester wicketTester = new WicketTester(new WicketApplication());

wicketTester.startPage(FileInfoPage.class);

wicketTester.assertRenderedPage(LoginPage.class);

FormTester formTester = wicketTester.newFormTester("signInPanel:signInForm");FormTester formTester = wicketTester.newFormTester("signInPanel:signInForm");

formTester.setValue("username", „gosc");

formTester.setValue("password", „haslo123");

formTester.submit();

wicketTester.assertRenderedPage(FileInfoPage.class);

wicketTester.assertLabel("message", „Zalogowany jako gosc");

Wicket Bench

• Plugin do Eclipse’a

• Adres do instalacji bezpośrednio z Eclipse: http://www.laughingpanda.org/svn/wicket-bench/trunk/wicket-bench-site

Wicket Bench - features

• Poprawiony edytor

• Wizardy dla projektów i paneli Wicketa

• Generator formularzy

• Quick fixes• Quick fixes

• Parser bloków wicket:id w plikach HTML

• Integracja z Selenium

Integracja ze Springiem

• Więcej warstw!

• Dependency Injection

• Dodatkowe komponenty

Integracja ze Springiem

• Jak?XML, Bean, WicketApplication.java

public class WicketInActionApplication extends WebApplication {

private ApplicationContext ctx;private ApplicationContext ctx;

@Override

protected void init() {

ctx = new ClassPathXmlApplicationContext("applicationContext.xml");

…

}

Public DiscountsService getDiscountService() {

return (DiscountsService) BeanFactoryUtils.beanOfType(ctx, DiscountsService.class);

}

…

Integracja z Hibernate

• Most między OOP a ORM

• Definiowanie encji

• Mapowanie obiektów• Mapowanie obiektów

Integracja z Hibernate

Persistence.xml

<persistence>

<persistence-unit name="wicketPersistenceManager" transactiontype="RESOURCE_LOCAL">

<class>com.apress.wicketbook.shop.model.Book</class>

<properties><properties>

<property name="hibernate.dialect" value="org.hibernate.dialect.HSQLDialect"/>

<property name="hibernate.connection.driver_class"value="org.hsqldb.jdbcDriver"/>

<property name="hibernate.connection.username" value="sa"/>

<property name="hibernate.connection.password" value=""/>

<property name="hibernate.connection.url" value="jdbc:hsqldb:."/>

<property name="hibernate.max_fetch_depth" value="3"/>

<property name="hibernate.hbm2ddl.auto" value="create-drop"/>

<property name="hibernate.show_sql">true</property>

<property name="hibernate.jdbc.batch_size" value="0"/>

</properties>

</persistence-unit>

</persistence>

Co słychać u konkurencji?


Wbudowane wsparcie dla Ajaxa:

JSF: Brak, wykorzystuje ICEfaces i Ajax4JSF

Stripes: BrakStripes: Brak

Struts 2: wbudowana biblioteka DOJO, pluginy dla GWT

Spring MVC: Brak, wykorzystuje DWR i Spring MVC Extras

Tapestry: wbudowana biblioteka DOJO

Wicket: wbudowana biblioteka DOJO


Przyjazne adresy URL:

JSF: wszystko przesyłane POST-em, nie ma mowy o URLach

Stripes: TakStripes: Tak

Struts 2: namespace’y - tak

Spring MVC: Tak

Tapestry: Nie

Wicket: Tak


Walidacja po stronie uŜytkownika:

JSF: Brzydkie, ale konfigurowalne domyślne komunikaty

Stripes: Walidacja w Javie – nie ma walidacji po stronie klientaStripes: Walidacja w Javie – nie ma walidacji po stronie klienta

Struts 2: Tak, wykorzystuje OGNL

Spring MVC: Tak, wykorzystuje Commons Validator

Tapestry: Tak, bardzo dobre domyślne komunikaty

Wicket: Walidacja w Javie – nie ma walidacji po stronie klienta


Testowalność:

JSF: Brzydkie, ale konfigurowalne domyślne komunikaty

Stripes: Servlet API Mocks, MockRoundtripStripes: Servlet API Mocks, MockRoundtrip

Struts 2: EasyMock, jMock

Spring MVC: EasyMock, jMock, SpringMockTapestry: Trudne testowanie – klasy stron są abstrakcyjne

Wicket: WicketTester – bardzo dobre rozwiązanie



Tapestry

Wicket

Liczba ksiąŜek na Amazon.com

0 5 10 15 20 25

JSF

Spring MVC

Stripes

Struts 2

Tapestry


Tapestry

Wicket

Dostępne narzędzia

0 5 10 15

JSF

Spring MVC

Stripes

Struts 2

Tapestry


Tapestry

Wicket

Liczba ofert pracy w ostatnich 3 miesiącach

0 500 1000 1500 2000 2500 3000 3500

JSF

Spring MVC

Stripes

Struts 2

www.itjobswatch.co.uk



Kto tego uŜywa?

http://fabulously40.com Rails � Wicket

Kto tego uŜywa?

http://www.meetmoi.com

Kto tego uŜywa?

http://www.avigo.de Wicket + Hibernate + Spring

Zalety Wicketa

• Łatwość tworzenia komponentów i ich ponownego uŜywania

• Brak potrzeby konfiguracji XML

• śeby zacząć wystarczy znajomość Javy• śeby zacząć wystarczy znajomość Javy

• Separacja kodu Java od HTML

• MoŜliwość integracji z innymi frameworkami, jak Spring MVC czy Hibernate

• Rosnąca popularność i duŜa społeczność

Wady Wicketa

• DuŜo kodu w Javie moŜe być trudne do utrzymania

• Projektanci IU muszą pamiętać o znacznikach WicketaWicketa

• MoŜe być za wolny dla bardzo dynamicznych stron

• Tylko widok i model – brak kontrolera

• Nie naleŜy do standardu, wciąŜ jeszcze mała popularność

• Trzeba znać Javę

Wsparcie

• Listy mailingowe:

– Wicket Users

– Wicket Developers

– Wicket Announcements– Wicket Announcements

– Wicket Commits

• IRC (##[email protected])

• Blogi

• Google

• Dokumentacja

https://cwiki.apache.org/WICKET/documentation-index.html

Bibliografia

• Wicket in Action - Martijn Dashorst, EelcoHillenius, wydawnictwo Manning Publications (2008)

• Enjoying Web Development with Wicket - Kent Tong (2007)

• Pro Wicket - Karthik Gurumurthy, wydawnictwo Apress (2006)

• https://cwiki.apache.org/WICKET/

• http://www.theserverside.com/tt/articles/article.tss?l=IntroducingApacheWicket

• http://www.slideshare.net/dashorst/wicket-inaction

• http://www.ibm.com/developerworks/web/library/wa-aj-wicket/index.html

Część praktyczna

Przykład na ŜywoPrzykład na Ŝywo

Documents

Tworzenie aplikacji internetowych z wykorzystaniem ...sens.e-informatyka.pl/wp-content/uploads/WIRP2/wicket.pdf · Tworzenie aplikacji internetowych z wykorzystaniem szkieletu Wicket