JSF i Facelets
Wprowadzenie JSP (JavaServer Pages) są natywną i najczęściej używaną technologią do tworzenia warstwy prezentacyjnej dla JSF (JavaServer Faces) Istnieją alternatywne technologie opisu wyglądu (ang. view description technology) dla JSF z których najbardziej popularna to Facelets Co więcej dzięki ViewHandler API (który jest częścią specyfikacji JSF) możliwe jest dostosowanie istniejącej lub stworzenie zupełnie nowej technologi opisu wyglądu (widoku) dla JSF
Technologia opisu wyglądu Technologia opisu wyglądu zawiera: Używany język znaczników (np. HTML, XML, itp.) Mechanizm pozwalający wiązać (łączyć) znaczniki z komponentami interfejsu użytkownika (np. JSP Custom Tag Library, TagLibrary dla Facelets) Mechanizm pozwalający agregować (składać) fragmenty stron w celu uzyskania strony wynikowej (np. JSTL 'c:import', 'XInclude') (trochę podobne do 'include' w PHP)
Podobieństwa pomiędzy JSP i Facelets Aspekt Tworzenie stron w XMLu Możliwość użycia zunifikowanego EL W sparcie dla taglibs Sposób kompilacji strony Facelets Tak, lub w XHTMLu JSP Tak, składnia JSP XML TAK TAK (od JSP 2.1) TAK TAK XML jest parsowany do Na podstawie XMLa postaci drzewa obiektu tworzony jest kod w TagHandler, a Javie, który jest następnie jest kompilowany do pliku wykonywany. Nie jest.class (bytecode) a tworzony bytecode następnie wykonywany
Niektóre różnice pomiędzy JSP i Facelets Aspekt Facelets Wbudowane wsparcie dla szablonów TAK Wsparcie dla przekazywania parametrów do zawartości szablonu TAK W przypadku wystąpienia błędu dokładna informacja o linii w która go spowodowała TAK Szybkie wsparcie oraz szerokie spektrum dostawców dla tej technologii TAK/NIE JSP NIE (tylko proste include) NIE NIE TAK
Facelets szablony Template client (klient szablonu) start.xhtml Template (szablon) header.xhtml sidebar.xhtml template.xhtml footer.xhtml
template.xhtml Normalny plik XHTML z następującą deklaracją doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">... </html>
template.xhtml Dodatkowo posiada zdefiniowany namespace Facelets (zwyczajowo o nazwie 'ui') <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"... </html> xmlns:ui="http://java.sun.com/jsf/facelets">
template.xhtml Jeżeli szablon korzysta z komponentów JSF (h:..., f:..) to też znajdują się w nim deklaracje odpowiednich namaspace'ów (o nazwach 'h' i 'f') <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f ="http://java.sun.com/jsf/core" xmlns:h ="http://java.sun.com/jsf/html"> </html>
template.xhtml Aby wstawić do szablonu zmienne fragmenty można użyć tagu ui:insert <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f ="http://java.sun.com/jsf/core" xmlns:h ="http://java.sun.com/jsf/html"> <head> <title> <ui:insert name="tytul">domyślny tytuł</ui:insert> </title> <link rel="stylesheet" type="text/css" href="./css/main.css"/> </head> </html>
ui:insert Jeżeli nie zostanie zdefiniowana zawartość dla nazwy użytej w ui:insert (u nas nazwa to 'tytul'), zostanie użyta zawartość domyślna znajdująca się pomiędzy otwarciem tagu '<ui:insert>' i jego zamknięciem '</ui:insert>'. U nas zawartość domyślna to 'Domyślny tytuł'. Oczywiście zawartość domyślna może być pusta Jeżeli zostanie zdefiniowana zawartość za pomocą tagu ui:define to zostanie użyta ona, zamiast zawartości domyślnej. Definicja mogłaby wyglądać następująco: <ui:define name= tytul >Jakiś tytuł</ui:define>
ui:insert Zobacz dokumentację do ui:insert https://facelets.dev.java.net/nonav/docs/dev/docbook.html#template-insert ui:define https://facelets.dev.java.net/nonav/docs/dev/docbook.html#template-define
template.xhtml Aby wstawić do szablonu zawartość innego pliku należy użyć tagu ui:include... <head> <title> <ui:insert name="tytul">domyślny tytuł</ui:insert> </title> <link rel="stylesheet" type="text/css" href="./css/main.css"/> </head> <body> <div class= hd > <ui:include src= header.xhtml /> </div>... </body></html>
template.xhtml Można użyć tagu ui:include w powiązaniu z ui:insert... <head> <title> <ui:insert name="tytul">domyślny tytuł</ui:insert> </title> <link rel="stylesheet" type="text/css" href="./css/main.css"/> </head> <body> <div class= hd > <ui:insert name="naglowek"> <ui:include src= header.xhtml /> </ui:insert> </div>... </body></html>
ui:include i ui:insert W ten sposób jeśli nie zdefiniujemy innej zawartości nagłówka (za pomocą ui:define) zostanie włączona (wstawiona) zawartość pliku o nazwie 'header.xhtml', natomiast za pomocą ui:define można zdefiniować własny nagłówek. Tag ui:include pozwala 'składać' strony (szablony) ze zdefiniowanych części (plików). W ten sposób można łatwo powtórnie używać części szablonów, takie jak nagłówek, menu, stopka, ramka z reklamami, itp.
ui:include Zobacz dokumentację do ui:include https://facelets.dev.java.net/nonav/docs/dev/docbook.html#template-include
start.xhtml Aby 'wywołać' szablon (czyli utworzyć konkretną stronę na jego podstawie) należy użyć tagu ui:composition. Początek (podobnie jak w 'template.xhtml') <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f ="http://java.sun.com/jsf/core" xmlns:h ="http://java.sun.com/jsf/html">
start.xhtml cd. <body> To i wszystko przed tym będzie pominięte w stronie wynikowej <ui:composition template= template.xhtml > <ui:define name= tytul >Super strona</ui:define> <ui:define name= naglowek > <ui:include src= specjalny_naglowek.xhtml /> </ui:define>... </ui:composition> To i wszystko po tym będzie pominięte w stronie wynikowej </body> </html>
ui:composition Wewnątrz tagu ui:composition znajdują się definicje (ui:define) zawartości nazw występujących we włączanym szablonie. Dla nazw z szablonu które nie zostaną zdefiniowane będzie użyta zawartość domyślna. Wszystko co znajduje się przed i po tagu ui:composition będzie pominięte w stronie docelowej
ui:composition Zobacz dokumentację do ui:composition http://facelets.dev.java.net/nonav/docs/dev/docbook.html#template-composition
Zasoby Strona domowa projektu: http://facelets.dev.java.net Dokumentacja dla programistów: http://facelets.dev.java.net/nonav/docs/dev/docbook.html