Tworzenie aplikacji internetowych z wykorzystaniem szkieletu Wicket

BłaŜej Bukowy, 157489 Wojciech Orzeszyna, 157630 Cel prezentacji

• Zwrócenie uwagi słuchaczy na webowy framework

• 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 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 HTMLa Historia

• 2004 – start projektu (Jonathan Locke) • 2005 –JavaOne'05 (wersja 1.0) • 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 i HTML – Komponenty i obiekty • Separacja kodu od widoku • Absolutne minimum konfiguracji w XML • Wbudowany (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) • 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 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 • Java IDE • Kontener servletów • Maven lub Ant Jak zacząć? Ant

Biblioteki: • wicket.jar • servletapi2.3.jar • slf4j api.jar

• jetty.jar • jettyutil.jar

• slf4jlog4j12.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.html mvn archetype:create DarchetypeGroupId=org.apache.wicket – DarchetypeArtifactId= wicketarchetypequickstart DarchetypeVersion=1.4.8 – DgroupId=com.mycompany DartifactId=myproject

pom.xml org.apache.wicket wicket 1.4.8 Jak zacząć? Jak zacząć?

Wicket in Action Bonus Chapter 15 Setting up a Wicket project

http://www.manning.com/dashorst/Wicket_Bonuschapter15.pdf HelloWorld

• Budowa strony: – Plik *.html – Plik *.java (o tej samej nazwie) • Powiązanie: – wicket:id HelloWorld

[tu zmienimy]

HelloWorld.html + add(new Label("msg", "Hello World!")) HelloWorld.java =

Hello World!

Koncepcje Wicket

• Aplikacja • Sesja • RequestCycle • Komponenty • Zachowania • Model Koncepcje Wicket – Aplikacja

• Kontener najwyŜszego poziomu, przechowuje: – Komponenty – Znaczniki – Pliki konfiguracyjne – 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

wicket org.apache.wicket.protocol.http.WicketFilter applicationClassName example.MyApplicatio n 1 Koncepcje Wicket – Sesja

• Abstrakcja sesji uŜytkownika • Typowo trzymana w HttpSession • Przypisane do wątków • Silnie typowana class MySession extends WebSession { private ShoppingCart cart; public ShoppingCart getCart() { … } public void setCart(ShoppingCart cart) { … } } • Zawiera komponenty i historię stron Koncepcje Wicket – Sesja

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

@Override public Session newSession (Request request , Response response) { return new KlasaSesji(WicketApplication.this, request); } Koncepcje Wicket – Sesja

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; } } Koncepcje Wicket – Sesja

3. Dostęp do obiektu sesji

PlikSesji session = (PlikSesji) getSession(); session.setStanSesji (true ); Koncepcje Wicket RequestCycle

• Kroki podejmowane przy kaŜdym Ŝądaniu: – Stworzenie obiektu RequestCycle – Dekodowanie Ŝądania – Identyfikacja celu Ŝądania ( jaka strona, komponent ?) – Przetworzenie zdarzeń (onClick, onSubmit) – Wygenerowanie odpowiedzi (strona, komponent, obrazek, pdf ...) – Sprzątanie Koncepcje Wicket RequestCycle

• Dwa typy Ŝądań: – Stanowe • Związane z konkretną sesją uŜytkownika • Nie da się zrobić zakładki – Bezstanowe • Niekoniecznie związane z konkretną sesją • MoŜna uczynić z nich zakładki Koncepcje Wicket RequestCycle Koncepcje Wicket – Komponent

• Podstawowy klocek w aplikacji • Potrafi się wyrysować • Odbiera zdarzenia • Ł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ć! Koncepcje Wicket – Komponent Koncepcje Wicket – Komponent

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

[tu zmienimy]

HTML

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

• MoŜna usunąć wicket:id z wynikowej odpowiedzi Koncepcje Wicket – Komponent (Link)

Click HTML

Link link = new Link("link") { @Override public void onClick() { //do something setResponsePage(new NewPage()); } }; add(link); Java Koncepcje Wicket – Komponent (AjaxLink)

Click HTML

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 ) { tag.put("class", css = (((Item)component).getIndex() % 2 == 0) ? "even" : "odd"); } });

Wyśjcie: … … 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 Koncepcje Wicket – Model

• „Leniwe wiązanie” w Javie? • Nie aktualizuje wartości new TextField(“txt”, person.getName()) • 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())); Koncepcje Wicket – Model

add(new Label("street", (cust==null || cust.getAddress()==null) ? "" : cust.getAddress().getStreet()); vs add(new Label("street", new PropertyModel(customer,"address.street"))); vs setModel(new CompoundPropertyModel(customer)); add(new Label("address.street "); Koncepcje Wicket – Model public class MyForm extends Form { public MyForm(String id) { super(id); Customer customer = new Customer(); setModel(ne w 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

• 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.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/wicketbench/trunk/wicketbenchsite Wicket Bench features

• Poprawiony edytor • Wizardy dla projektów i paneli Wicketa • Generator formularzy • 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 ; @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 Integracja z Hibernate

Persistence.xml

com.apress.wicketbook.shop.model.Book true Co słychać u konkurencji? Co słychać u konkurencji?

Wbudowane wsparcie dla Ajaxa:

JSF: Brak, wykorzystuje ICEfaces i Ajax4JSF : 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 Co słychać u konkurencji?

Przyjazne adresy URL:

JSF: wszystko przesyłane POSTem, nie ma mowy o URLach Stripes : Tak Struts 2: namespace’y tak Spring MVC: Tak Tapestry: Nie

Wicket: Tak Co słychać u konkurencji?

Walidacja po stronie uŜytkownika:

JSF: Brzydkie, ale konfigurowalne domyślne komunikaty Stripes : 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 Co słychać u konkurencji?

Testowalność:

JSF: Brzydkie, ale konfigurowalne domyślne komunikaty Stripes : Servlet API Mocks , MockRoundtrip Struts 2: EasyMock, jMock Spring MVC: EasyMock, jMock, SpringMock Tapestry: Trudne testowanie – klasy stron s ą abstrakcyjne

Wicket: WicketTester – bardzo dobre rozwi ązanie Co słychać u konkurencji? Co słychać u konkurencji?

Liczba ksiąŜek na Amazon.com

Wicket Tapestry Struts 2 Stripes Spring MVC JSF

0 5 10 15 20 25 Co słychać u konkurencji?

Dostępne narzędzia

Wicket

Tapestry

Struts 2

Stripes

Spring MVC

JSF

0 5 10 15 Co słychać u konkurencji?

Liczba ofert pracy w ostatnich 3 miesiącach

Wicket Tapestry Struts 2 Stripes Spring MVC JSF

0 500 1000 1500 2000 2500 3000 3500

www.itjobswatch.co.uk Co słychać u konkurencji? Co słychać u konkurencji? 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 • 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 Wicketa • 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 Commits • IRC (##[email protected]) • Blogi • Google • Dokumentacja https://cwiki.apache.org/WICKET/documentationindex.html Bibliografia

• Wicket in Action Martijn Dashorst, Eelco Hillenius, 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=I ntroducingApacheWicket • http://www.slideshare.net/dashorst/wicketinaction • http://www.ibm.com/developerworks/web/library/wa ajwicket/index.html Część praktyczna

Przykład na Ŝywo