Facelets - Dariusz Pałka Dydaktyka

Transkrypt

Facelets - Dariusz Pałka Dydaktyka
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
Facelets
Tworzenie stron w
XMLu
Tak, lub w XHTMLu
Możliwość użycia
zunifikowanego EL TAK
W sparcie dla taglibs TAK
XML jest parsowany do
postaci drzewa obiektu
TagHandler, a
następnie jest
wykonywany. Nie jest
Sposób kompilacji
tworzony bytecode
strony
JSP
Tak, składnia JSP XML
TAK (od JSP 2.1)
TAK
Na podstawie XMLa
tworzony jest kod w
Javie, który jest
kompilowany do pliku
.class (bytecode) a
następnie wykonywany
Niektóre różnice pomiędzy JSP i Facelets
Aspekt
Facelets
W budowane wsparcie dla
szablonów
TAK
W sparcie 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
header.xhtml
Template (szablon)
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/xhtml1transitional.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/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
...
</html>
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/xhtml1transitional.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/xhtml1transitional.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/xhtml1transitional.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