Kurs narzędzi JSF - Budowanie aplikacji JSF 2.0

Podsumowanie
Tematem tego kursu jest zbudowanie i wykonanie aplikacji WWW JSF 2.0 oraz przybliżenie opcji udostępnianych przez projekt narzędzi JSF.

Wprowadzenie

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.


Przygotowanie

Konfigurowanie instancji serwera Apache Tomcat

Instancję serwera Apache Tomcat należy skonfigurować w oparciu o informacje z sekcji Konfigurowanie w kursie Budowanie i uruchamianie aplikacji WWW.

Tworzenie projektu JavaServer Faces

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.



Nowa dynamiczna aplikacja WWW Aspekty projektu

Na stronie Możliwości JSF z listy rozwijanej jako Typ biblioteki JSF wybierz opcję Biblioteka użytkownika.

Strona Możliwości JSF


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.

Strona Możliwości JSF


Narzędzie pobiera pliki JAR, tworzy bibliotekę użytkownika JDT i dodaje ją do bieżącego projektu. Jeśli pole wyboru nowej biblioteki nie jest zaznaczone, należy je zaznaczyć. Następnie należy kliknąć ikonę Zarządzaj bibliotekami.

Strona Możliwości JSF

Kliknij przycisk Zakończ, aby utworzyć aplikację JavaServer Faces. Po zakończeniu może zostać wyświetlone pytanie o wyświetlenie perspektywy J2EE. Kliknij przycisk OK.

Aplikacja JSF została utworzona.


Tworzenie stron szablonu środowiska Facelets

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.

Tworzenie szablonu środowiska Facelets

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.



BasicTemplate.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">
<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.



Szablon środowiska Facelets

Tworzenie strony JSF

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>


Sprawdzanie poprawności atrybutów znaczników Facelets i aktywna obsługa treści

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>.



Sprawdzanie poprawności atrybutów znaczników Facelets

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



Aktywna obsługa treści dla atrybutów znaczników


Kończenie definiowania strony JSF

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.



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="/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>

Konfigurowanie zarządzanego komponentu bean

W eksploratorze projektów rozwiń węzeł JSFFaceletsTutorial->WebContent. Dwukrotnie kliknij plik faces-config.xml. Spowoduje to uruchomienie edytora konfiguracji Faces. Wybierz kartę Zarządzany komponent bean.

Zarządzany komponent bean edytora konfiguracji Faces

Kliknij przycisk Dodaj. Zostanie uruchomiony kreator nowego zarządzanego komponentu bean. Wybierz opcję Utwórz nową klasę Java. Na następnym panelu kreatora jako nazwę pakietu podaj wartość com.tutorial, a jako nazwę klasy - LoginBean. Kliknij przycisk Zakończ.
Klasa Java zostanie utworzona i zarejestrowana jako zarządzany komponent bean. Zapisz edytor konfiguracji Faces. Aby przejść do edycji klasy Java, kliknij odsyłacz Klasa ManagedBean na stronie Zarządzany komponent bean, tak jak pokazano na poniższym obrazku. Spowoduje to uruchomienie edytora Java.

Edytor konfiguracji Faces - Karta Zarządzany komponent bean


Edytuj klasę Java com.tutorial.LoginBean. Dodaj następujący kod i zapisz klasę.

LoginBean.java

/**
 * 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;
    }
}

Dodawanie innej strony

Utwórz nową stronę HTML welcome.xhtml w folderze WebContent z następującą treścią:


welcome.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:outputLabel value="#{loginBean.name} - Witamy!"></h:outputLabel>
    </ui:define>
</ui:composition>
</html>

Konfigurowanie reguł nawigowania między stronami

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ą.

Dodawanie stron do reguły nawigacji

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ą.

Łączenie stron dla reguły nawigacji

Kliknij strzałkę i otwórz widok Właściwości. Kliknij przycisk z wielokropkiem obok pola “Wynik źródłowy”.

Ustawianie działania dla reguły nawigacji

Wybierz opcję “Logowanie” w tym oknie dialogowym. Kliknij przycisk OK.

Wybieranie działania dla reguły nawigacji

Reguła nawigacji została skonfigurowana.

Uruchom stronę JSF Facelets

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.