Podsumowanie
Tematem tego kursu jest zbudowanie i wykonanie aplikacji WWW JSF 2.0 oraz przybliżenie opcji udostępnianych przez projekt narzędzi JSF.
Projekt narzędzi JSF udostępnia narzędzia, które usprawniają budowanie aplikacji WWW JSF 2.0. Obejmują one zaawansowany edytor źródła HTML z aktywną obsługą treści i sprawdzaniem poprawności znaczników JSF. W ramach tego kursu zostanie utworzona i wykonana aplikacja WWW JSF 2.0. Na stronie Nowości i istotne informacje wymieniono wszystkie dostępne opcje narzędzi pomocne podczas tworzenia aplikacji WWW JSF 2.0.
Utwórz nową dynamiczną aplikację WWW o nazwie JSFFaceletsTutorial.
Jako docelowe środowisko wykonawcze wybierz Apache Tomcat 6.0.
W sekcji Konfiguracja kliknij przycisk Modyfikuj i wybierz aspekt “JavaServer Faces 2.0”. Pomiń
następny panel, aby przejść do strony Możliwości JSF.
Na stronie Możliwości JSF z listy rozwijanej jako Typ biblioteki JSF wybierz
opcję Biblioteka użytkownika.
Kliknij ikonę Pobierz bibliotekę. Zostanie wyświetlone okno
dialogowe Pobieranie biblioteki z listą dostawców plików JAR implementacji JSF. Wybierz bibliotekę JSF 2.0
(Mojarra). Kliknij przycisk Dalej.
Zaakceptuj
warunki licencji i kliknij przycisk Zakończ.
Aplikacja JSF została utworzona.
Teraz zostanie utworzona strona szablonu środowiska Facelets. Utwórz folder templates w folderze WEB-INF. Użyj kreatora HTML do utworzenia w tym folderze strony szablonu o nazwie BasicTemplate.xhtml. Kliknij prawym przyciskiem myszy folder template i wybierz opcję Nowy » HTML, aby uruchomić kreator HTML. Na stronie Wybór szablonów w kreatorze wybierz szablon Nowy szablon Facelet. Kliknij przycisk Zakończ.
Plik szablonu należy zmodyfikować zgodnie z instrukcjami w szablonie. Należy utworzyć i dołączyć szablony nagłówka i stopki. Gotowy szablon powinien być podobny do przedstawionego poniżej.
<!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">
<head>
<title><ui:insert name="title">Kurs środowiska Facelets</ui:insert></title>
</head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert>
</div>
</body>
</html>
W folderze template należy utworzyć szablony nagłówka i stopki przy użyciu kreatora nowego kodu HTML zgodnie z poniższym opisem. Na stronie Wybór szablonów w kreatorze należy wybrać odpowiednie pliki szablonów Nowy nagłówek elementu Facelet i Nowa stopka elementu Facelet. W tych szablonach należy wprowadzić zmiany zgodnie z poniższym opisem.
Utwórz stronę JSF ze znacznikami Facelets, która będzie używała szablonu utworzonego w poprzednim kroku. Użyj
kreatora strony HTML, aby utworzyć stronę o nazwie login.xhtml w folderze Web
Content nowej aplikacji. Na stronie Wybór szablonów w kreatorze wybierz szablon Nowa strona kompozycji Facelet. Kliknij przycisk Zakończ.
login.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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="">
<ui:define name="header">
Dodaj tutaj nagłówek lub usuń tę sekcję, aby użyć domyślnego
</ui:define>
<ui:define name="content">
Dodaj tutaj treść lub usuń tę sekcję, aby użyć domyślnej
</ui:define>
<ui:define name="footer">
Dodaj tutaj stopkę lub usuń tę sekcję, aby użyć domyślnej
</ui:define>
</ui:composition>
</html>
Projekt narzędzi JSF wprowadza obsługę sprawdzania poprawności atrybutów znaczników Facelets oraz udostępnia aktywną obsługę treści dla tych znaczników. Należy zwrócić uwagę na ostrzeżenie dotyczące atrybutu template znacznika <ui:composition>.
Ustaw kursor między cudzysłowami atrybutu template i naciśnij kombinację klawiszy Ctrl + spacja, aby wywołać aktywną obsługę treści. Powinna zostać wyświetlona wywoływana lista katalogów w folderze WebContent. Wybierz plik /WEB-INF/templates/BasicTemplate.xhtml
Usuń znaczniki <ui:define> dla nagłówka i stopki. Strona będzie miała nagłówek i stopkę z szablonu. Dodaj znaczniki do obsługi logowania w sekcji content zgodnie z poniższym przykładem. Należy zwrócić uwagę, że bieżąca wersja projektu narzędzi JSF nie obsługuje wizualnego renderowania strony XHTML w edytorze stron WWW JSF. Jednak wszystkie opcje edycji stron JSP dostępne na stronie Źródło w edytorze stron WWW są dostępne w edytorze źródła HTML na potrzeby budowania strony JSF Facelets w języku 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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Nazwa"></h:outputText>
<h:inputText value="#{loginBean.name}"></h:inputText>
<h:outputText value="Hasło"></h:outputText>
<h:inputSecret value="#{loginBean.password}"></h:inputSecret>
</h:panelGrid>
<h:commandButton value="Zaloguj" action="login"></h:commandButton>
</h:form>
</ui:define>
</ui:composition>
</html>
/**
* LoginBean.java
*
*/
package com.tutorial;
public class LoginBean
{
private String name;
private String password;
public String getName() {
return name;
}
public void setName (final String name)
{
this.name = name;
}
public String getPassword ()
{
return password;
}
public void setPassword (final String password)
{
this.password = password;
}
}
Utwórz nową stronę HTML welcome.xhtml w folderze WebContent z następującą treścią:
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:outputLabel value="#{loginBean.name} - Witamy!"></h:outputLabel>
</ui:define>
</ui:composition>
</html>
Kliknij dwukrotnie plik faces-config.xml, aby otworzyć edytor konfiguracji Faces. Kliknij kartę Reguła nawigacji. Przeciągnij pliki login.xhtml i welcome.xhtml z eksploratora projektów na siatkę reguł nawigowania między stronami zgodnie z poniższą ilustracją.
Kliknij narzędzie Odsyłacz na palecie z prawej strony. Narysuj strzałkę z pliku login.xhtml do pliku welcome.xhtml zgodnie z poniższą ilustracją.
Kliknij strzałkę i otwórz widok Właściwości. Kliknij przycisk z wielokropkiem obok pola “Wynik źródłowy”.
Wybierz opcję “Logowanie” w tym oknie dialogowym. Kliknij przycisk OK.
Reguła nawigacji została skonfigurowana.
Teraz należy wykonać stronę login.xhtml na serwerze Apache Tomcat. Wybierz opcję Wykonaj na serwerze
z menu kontekstowego, gdy w nawigatorze wybrana jest strona login.xhtml. Wybierz serwer Apache Tomcat i
skonfiguruj go odpowiednio do wymagań, jeśli nie zostało to jeszcze zrobione. Kliknij przycisk Zakończ. W widoku Konsola powinny zostać wyświetlone komunikaty
informujące o uruchomieniu serwera Tomcat, po czym w przeglądarce WWW powinna
zostać wyświetlona wykonana strona logowania, tak jak pokazano na
poniższym obrazku.
Gratulacje! Pierwsza aplikacja JSF Facelets została utworzona i wykonana.