Zanim przystąpimy do tworzenia projektu warto odpowiednio przygotować sobie zaplecze techniczne. Z racji, że w eclipse pisze znaczna część firm (przynajmniej polskich), a ja jeszcze z niego nie korzystałem w tego typu projektach postanowiłem, że to będzie dobry moment by się z nim zmierzyć.
Eclipse wyposażony zostanie dodatkowo we wtyczkę m2Eclipse która pomoże mi w zarządzaniu maven-em. Aplikacja uruchomiona zostanie na kontenerze aplikacji Tomcat, a dane przechowam w bazie PostreSQL. Z racji, że źródła umieszczane będą w zewnętrznym repozytorium opartym o GIT potrzebny jest też ten właśnie program, ja preferuję korzystać z gita poprzez konsolę, oczywiście jeśli ktoś woli można doinstalować odpowiednią wtyczkę bądź nakładkę graficzną.

Co przyda się przy tworzeniu:

• Eclipse
• maven2 i plugin m2Eclipse
• Tomcat 6
• PostgreSQL
• GIT
• Hudson - bo czemu nie

Podstawowe założenia

Aplikacja składać się będzie z dwóch modułów, panelu administracyjnego dostępnego tylko i wyłącznie dla użytkowników z poziomem dostępu ADMIN oraz części otwartej do której dostęp będą mieli wszyscy internauci (za wyjątkiem obszarów które będą wymagały zalogowania się z poziomem dostępu CLIENT). Podział taki można wykonać na dwa sposoby, pierwszym jest stworzenie jednego projektu w którym dokonamy logicznego podziału widoków jak i kontrolerów na panel administracyjny oraz strefę otwartą, spring security dodatkowo zabezpieczy wejście. Wyniki składane będą przez sitemesh dzięki któremu można stworzyć oddzielny layout dla panelu administracyjnego oraz dla części otwartej. Jedynym plusem tego rozwiązania jest łatwość operowania plikami w projekcie(o ile nie jest duży), wszystko mamy w jednym miejscu dzięki czemu nie trzeba przechodzić między projektami i szukać plików jeśli tylko chcemy coś zmienić. Niestety przeciw temu rozwiązaniu jest cała reszta, kod staje się mniej czytelny, potrzebne są dodatkowe obejścia które rozdzielać będą żądania do panelu administracyjnego jak i strony klienckiej, nie możliwe jest również umieszczenie osobno części administracyjnej na np. naszym serwerze wewnętrznym. Pomimo tego, że pliki poukładane mamy w jednym projekcie co z początku może wydawać się plusem w większych projektach staje się zmorą, gdyż większa ilość plików powoduje utrudnienia w odszukaniu tego który chcemy zmodyfikować (wiem, przeżyłem to na własnej skórze).

Drugim rozwiązaniem jest stworzenie osobnych projektów dla panelu administracyjnego oraz części klienckiej. Dzięki takiemu rozwiązaniu zachowujemy pewien ład i porządek w strukturze folderów projektów oraz plikach (mniej plików mniej problemu). Dzięki rozdzieleniu plików konfiguracyjnych zyskujemy większą elastyczność oraz możliwość łatwiejszego dostosowania ustawień. Część wspólna obu projektów (klasy związane z obiektami bazy danych) trzymane są w projekcie który dołączany jest jako biblioteka. Mój wybór padł właśnie na tą metodę.

Podsumowując, utworzone zostaną 3 projekty: bookstore, bookstore-admin oraz bookstore-lib.

Zaczynamy

Projekt zaczniemy od stworzenia prostej strony a’la Witaj Świecie!. Aby zacząć całą zabawę otwieramy Eclipse i tworzymy nowy projekt typu „Dynamic Web Project” (File -> New -> Project… -> Web -> Dynamic Web Project). Następnie wpisujemy nazwę projektu i klikamy finish.
Gdy nasz projekt zostanie utworzony musimy dodać do niego obsługę mavena. Jeśli mamy zainstalowaną wtyczkę m2Eclipse wystarczy kliknąć prawym klawiszem myszy na nasz projekt i wybrać odpowiednio Maven -> Enable Dependency Managment. Plugin doda do naszego projektu plik pom.xml, który zawiera wszelkie informacje potrzebne dla maven-a. W strukturze projektu możemy zauważyć folder WebContent który zawierać będzie pliki konfiguracyjne, tłumaczące, pliki jsp oraz wszystko co potrzebne do wyświetlania wyników. Ponieważ nazwa folderu nie przypadła mi do gustu zamieniłem ją na war (co będziecie mogli zobaczyć po pobraniu projektu).

Struktura projektu z uruchomioną opcją Dependency Managment

Dodawanie zależności

Pierwszą rzeczą jaką robię w nowo utworzonym projekcie jest dodanie podstawowych zależności. Z mojej strony są to takie biblioteki jak sitemesh 3 (UWAGA! – wydanie alpha, mam nadzieję, że działa), spring-web, spring-context, czy też spring-webmvc; czyli wszystko co potrzebne na dobry początek.
Na koniec dodaję biblioteki JUnit oraz Mockito które posłużą do testowania aplikacji. Ponieważ biblioteki te nie będą nam potrzebne w działającej aplikacji, warto zaznaczyć w ich zakresie (ang. scope) opcje „test” dzięki czemu będą dołączane tylko podczas testów.

Zarządzanie zależnościami w Eclipse

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

id="b0ok" version="2.5">

<display-name>bookstore</display-name>

<!--

wskazujemy lokalizacje plikow konfiguracyjnych

-->

<context-param>

<param-name>contextConfigLocation</param-name>

<param-value>

/WEB-INF/web-servlet.xml

</param-value>

</context-param>

<listener>

<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>

<!--

tworzymy servlet ktory obslugiwac bedzie nasze zapytania

-->

<servlet>

<servlet-name>web</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

</servlet>

<!--

ustalamy ze nasz servlet obslugiwac bedzie tylko zapytania konczace

sie rozszerzeniem *.html

-->

<servlet-mapping>

<servlet-name>web</servlet-name>

<url-pattern>*.html</url-pattern>

</servlet-mapping>

<!--

ustalamy, jakie pliki beda ladowane gdy aplikacja dostanie zapyanie

"/" (np. http://example.com/)

-->

<welcome-file-list>

<welcome-file>redirect.jsp</welcome-file>

</welcome-file-list>

</web-app>

<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<jsp:forward page="/index.html" />

Update 1:
Jak trafnie zauważył Chlebik (zob. komentarz), zamiast redirect.jsp możemy śmiało napisać „index.html” wtedy spring wykona akcję przeznaczoną dla żądania „/”, przy czym, należy dodać plik index.html do głównego katalogu (war/webContent) aplikacji, może być nawet pusty, ważne by spring wiedział, że jest. Za podpowiedź dziękuję.

Plik web-servlet.xml na początek wskażemy gdzie aplikacja ma szukać kontrolerów, oraz zaznaczymy, że będzie ona działała w oparciu o adnotacje.
web-servlet.xml

<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<context:component-scan base-package="com.darekzon.bookstore.controller" />
<context:annotation-config />
<context:spring-configured />
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/views/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>

W sekcji <context:component-scan> wskazujemy, który pakiet ma być skanowany w poszukiwaniu kontrolerów (klas z adnotacją @Controller), jeśli chcemy możemy wskazać więcej jak jeden pakiet przy czym trzeba pamiętać, że nazwy klas muszę się różnić, więc jeśli mamy IndexController w naszym pakiecie to w pakiecie com.darekzon.bookstore.controller musimy umieścić Index2Controller.

Ach, no i ostatni blok wskazuje gdzie spring ma szukać plików jsp za pomocą których generować będzie wyniki.

Pierwszy kontroler

Aplikacja skonfigurowana, pierwszy kontroler będzie wyświetlał legendarny napis „Witaj świecie!”. Sam kontroler jest wyjątkowo prosty, posiada tylko jedną metodę, która zwraca obiekt typu „ModelAndView” przechowujący nazwę widoku do wyrenderowania. Kontroler zapisany jest w pliku IndexController.java (konwencja nazewnicza nie jest obowiązkowa) a jego zawartość przedstawia się jak poniżej:

package com.darekzon.bookstore.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {

@RequestMapping(value = "/index")
public ModelAndView index(){
ModelAndView mav = new ModelAndView("index/index");

return mav;
}

}

Warto tutaj zwrócić uwagę na 3 rzeczy:

1. Każdy kontroler powinien mieć adnotację @Controller, dzięki temu spring podczas skanowania pakietów (zob. konfigurację web-servlet.xml ↑)
2. Spring szuka metody którą ma wykonać na podstawie adnotacji @RequestMapping, w naszym przypadku czeka aż wywołamy żądanie „/index„,  warto dodać, że nie można dodać dwóch metod z tą samą wartością tej adnotacji (podczas uruchamiania wyskoczy wyjątek)
3. W tym przypadku zwracamy obiekt ModelAndView który zawiera nazwę pliku widoków który posłuży do renderowania wyników, plik widoku powinien znajdować się w folderze /views/index/index.jsp, czyli według ustawień w pliku web-servlet.xml oraz wartości zwracanej przez metodę.

Kontroler gotowy, pora na widok który będzie renderowany, ponieważ będzie to wyświetlenie tekstu „Witaj świecie!” plik ten nie jest skomplikowany (kolejne na pewno wniosą coś nowego w tej kwestii), a jego zawartość przedstawia się następująco:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>Index</title>
</head>
<body>
Witaj świecie!
</body>
</html>

Tu tłumaczyć raczej nic nie trzeba, no może poza faktem pisania kodu całej strony w wyniku, ale o tym za chwilę.

Sitemesh i konfiguracja szablonów

Sitemesh to ciekawy projekt dzięki któremu znacznie ułatwimy sobie zabawę z wyglądem strony, jego głównym zadaniem jest sklejanie widoków wygenerowanych przez „aplikację” z ogólnym szablonem, oraz doklejanie części wspólnych między widokami (np. mamy oddzielny layout dla strony głównej, kontaktu oraz reszty serwisu, przy czym menu jest takie samo).

„]

Sposób działania Sitemesh-a[1

W projekcie użyję najnowszej (3.0alpha-1) wersji sitemesh-a, ponieważ nie jest to jeszcze stabilna wersja (nawet nie beta), zalecam do poważnych projektów używać wersję 2.4 dostępną pod starą stroną projektu.

Konfiguracja sitemesh-a może odbywać się na dwa sposoby: klasa Java rozszerzająca klasę ConfigurableSiteMeshFilter lub plik XML, ponieważ z niewiadomych przyczyn konfiguracja przez XML mi nie działa skupię się na konfigurowaniu z wykorzystaniem JAVY.

W pliku web.xml musimy dodać filtry które będą go uruchamiać dla każdego żądania (przynajmniej w moim przypadku), wskazując przy tym naszą klasę konfigurującą, kod wygląda następująco:

<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.darekzon.bookstore.filter.Sitemesh</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

Zaś klasa Sitemesh konfigurująca ma postać:

public class Sitemeshextends ConfigurableSiteMeshFilter {
@Override
protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) {
builder.addDecoratorPath("/*", "/views/layout/default.jsp");
}
}

Działanie proste, przechwytujemy wyniki żądań wysłanych do aplikacji, i „kompilujemy” je z dekoratorem z pliku „/views/layout/default.jsp” (UWAGA! powinno podawać się pliki z rozszerzeniami innymi od tych zdefiniowanych w filtrach w pliku web.xml – w moim wypadku .html).

W tej chwili dekorator wygląda następująco:

<!doctype html>
<html lang="pl" dir="ltr">
<head>
<title><sitemesh:write property='title' /> - BookStore</title>
<link rel="stylesheet" href="/resource/style/default.css" />
<sitemesh:write property='head' />
</head>
<body>
<sitemesh:write property='body' />
</body>
</html>

Podczas renderowania sitemesh otwiera dekorator oraz plik wynikowy kontrolera oraz je scala (nie chodzi o język programowania), w miejscu tagu <sitemesh:write property=’title’ /> wstawia wartość tagu <title> wyrenderowanego wyniku, w miejsce tagu <sitemesh:write property=’head’ /> wartość tagu head (za wyjątkiem title), a tam gdzie pyta o <sitemesh:write property=’body’ />, wszystko co znajduje się w body. Proste, a co ważne wygodne.

CDN…

W następnej części zajmiemy się panelem administracyjnym oraz jego zabezpieczeniem, stworzymy również cały layout tego panelu wykorzystując bardziej zaawansowane techniki dostarczane przez JSP i Sitemesh.Tymczasem zapraszam do pozostawiania komentarzy, wszelkie postaram się wziąć pod uwagę.

Jak pobrać projekt

Projekt został umieszczony na serwerach GitHub.com. Adres bezpośredni do projektu: https://github.com/darek/bookstore.
Dodatkowo zostało uruchomione repozytorium GIT dla wszystkich chętnych i dostępny jest pod adresem: git://github.com/darek/bookstore.git

^1. Diagram pobrany ze strony http://www.sitemesh.org/overview.html

autor: darek

Programista, z zamiłowania fotograf. Interesuje się różnymi aspektami programowania oraz językiem Java niemal w każdym jego wydaniu. Amator grejpfrutów oraz dobrego humoru. W wolnych chwilach czyta ciekawe książki(grails, gwt, objective-c) nie tylko informatyczne, ale również popularno naukowe oraz s-f