niedziela, 20 czerwca 2010

Layout w JSP

Jeśli zaczynasz tworzyć własną aplikację z użyciem JSP na pewno warto pomyśleć nad szablonami. Jeśli jakieś strony wykorzystują ten sam układ, to samo menu, stopkę, itd. to warto poświęcić trochę czasu na stworzenie oddzielnych plików w których będziemy umieszczać wspólne kawałki kodu.

Prosta konfiguracja web.xml
Zacznijmy od modyfikacji pliku web.xml. Umieszczamy w nim fragment kodu który pozwoli nam używać plików .jspx i .tagx.
<context-param>
 <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
 <param-value>.jspx</param-value>
</context-param>

Pliku tagx
Nasz szablon będzie prostą biblioteką znaczników (taglib), która będzie zawierała podstawowy układ widoku. W folderze WEB-INF tworzymy folder tags a w nim folder gdzie będziemy trzymać nasze szablony. U mnie folder z szablonami będzie nazywał się layout. Następnie tworzymy prosty plik main.tagx w którym będzie znajdował się główny układ naszej aplikacji.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns:jsp="http://java.sun.com/JSP/Page"> 
 
 <jsp:output doctype-root-element="html"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
 <jsp:directive.attribute name="title" required="true"/> 
 
 <head>
     <title>${title}</title>
 </head>
 
 <body> 
  <jsp:directive.include file="/include/menu.jsp" />

  <div style="clear: both;">Layout góra</div>
   <jsp:doBody />  
   <div style="clear: both;">Layout dół</div>    
 </body>
</html>
Plik z szablonem wygląda na standardową stronę jsp. Dzięki elementowi jsp:directive.attribute możemy przekazywać do naszego szablonu różnego rodzaju atrybuty, takie jak tytuł strony. Tworząc atrybut ustawiamy nazwę (name) oraz definiujemy czy atrybut jest wymagany (required). Do atrybutu odwołujemy się poprzez ${NAZWA_ATRYBUTU}. W powyższym przykładzie tworzony jest atrybut title który określa tytuł strony (atrybut użyty jest w sekcji head w elemencie title).
Elementem <jsp:doBody /> wskazuje miejsce gdzie zostanie wstawione ciało naszej bazowej strony, tzn. strony która będzie korzystać z szablonu.
Elementem jsp:directive.include możemy załączać inne pliku jsp do naszego szablonu. U nas w przykładzie załączamy jeden plik w którym docelowo będzie znajdować się menu aplikacji (dla celów testowych wypiszemy tylko napis Menu).Plik ten nazywa się menu.jsp i znajduje się w katalogu include.

Pliki jsp i jspx
Zacznijmy od stworzenia pliku menu.jsp z którego korzysta nasz szablon. W katalogu WebContent tworzymy folder include a w nim plik menu.jsp. Plik ten powinien zawierać kawałek kodu html i/lub jsp. U mnie wygląda to tak:
<div>
 Menu.
</div>

Kiedy mamy już stworzony pierwsze szablon, stwórzmy prosty plik który z niego skorzysta. W katalogu WebContent tworzymy plik main.jspx.
<layout:main xmlns:layout="urn:jsptagdir:/WEB-INF/tags/layout"
 xmlns:jsp="http://java.sun.com/JSP/Page">

 <jsp:attribute name="title">Tytuł strony z atrybutu</jsp:attribute>
 <jsp:directive.page contentType="text/html;charset=UTF-8" language="java" />

 Hello World !!!
 
</layout:main>
Na początku strony deklarujemy że używamy taglibu layout (nazwa naszego folder z szablonami). Nasz szablon zawierał jeden atrybut title, który musi zostać przekazany, w przeciwnym wypadku dostaniemy komunikat błędu. Atrybut możemy przekazać w dwojaki sposób:
  • poprzez dodanie nowego elementu jsp:attribute gdzie deklarujemy nazwę i wartość naszego atrybutu (tak jak w przykładzie)
  • poprzez dodanie do naszego główne elementu, atrybutu: nazwa_atrybutu_w_szablonie="wartość" (czyli: <layout:main title="Tytuł strony")

Po uruchomieniu aplikacji i wejściu na stronę main.jspx zobaczymy napis Hello World!!! pochodzący z naszej strony wraz z napisem Menu. (z pliku menu.jsp) oraz Layout góra, Layout dół.

Brak komentarzy:

Prześlij komentarz