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