Kursy WTP - Kurs narzędzi JavaServer Faces
Podsumowanie
W tym kursie zostanie zbudowana i wykonana aplikacja
JavaServer Faces przy użyciu funkcji wniesionych przez projekt
narzędzi JSF.
Raghu Srinivasan, Oracle Corporation
15 czerwca 2009
Wprowadzenie
W tym kursie zostanie pokazany proces tworzenia i wykonywania aplikacji WWW
wykorzystującej technologię JavaServer Faces. W ramach projektu WTP JSF Tools
dostępne są funkcje upraszczające tworzenie, konfigurowanie i wykonywanie
aplikacji. Obejmują one edytor stron WWW umożliwiający
wizualne edytowanie strony WWW JSF-JSP, sprawdzanie poprawności składniowej i
semantycznej strony JSF-JSP oraz edytor konfiguracji Faces umożliwiający
edytowanie pliku zasobów zawierającego konfigurację aplikacji.
Przed rozpoczęciem tego kursu zalecane jest zapoznanie się z kursem
Tworzenie
i uruchamianie aplikacji WWW. Kurs ten opisuje czynności związane z
konfigurowaniem instancji serwera, które nie są objęte niniejszym
kursem.
Przygotowanie
Ustawianie edytora stron WWW jako edytora domyślnego dla stron JSP
Wnoszony przez projekt narzędzi JSF edytor stron WWW NIE JEST rejestrowany
jako domyślny edytor plików JSP. Następujące kroki umożliwiają ustawienie edytora
stron WWW jako domyślnego edytora dla plików JSP:
- Przejdź do opcji Okna -> Preferencje... -> Ogólne ->
Edytory -> Powiązania plików.
- W sekcji Typy plików wybierz opcję „*.jsp”.
- W sekcji Powiązane edytory wybierz opcję Edytor stron WWW.
- Kliknij przycisk Domyślny.
Tworzenie projektu JavaServer Faces
Utwórz nową dynamiczną aplikację WWW o nazwie JSFTutorial.
Jako docelowe środowisko wykonawcze wybierz Apache Tomcat 6.0.
W sekcji Konfiguracja wybierz opcję Projekt JavaServer Faces 1.2. Pomiń dwa kolejne panele, 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ę dostarczaną przez firmę Sun Microsystem. Kliknij przycisk Dalej. Zaakceptuj
warunki licencji i kliknij przycisk Zakończ.

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.
Utwórz bibliotekę użytkownika JDT na potrzeby przechowywania pliku JAR
biblioteki JSTL. Kliknij
przycisk OK.
W oknie dialogowym Możliwości JSF zostanie wyświetlona biblioteka JSTL. Wybierz
bibliotekę i kliknij przycisk Zakończ.
Aplikacja JSF została utworzona. Należy zwrócić uwagę, że plik web.xml
został zaktualizowany danymi serwletu Faces i odwzorowania serwletu, utworzony został
szkieletowy plik konfiguracyjny aplikacji JSF (faces-config.xml), a w ścieżce
budowania zostały umieszczone pliki JAR zawierające implementację.

Jeśli dostępna jest
istniejąca dynamiczna aplikacja WWW, można do niej dodać możliwości JSF
przez wybranie następujących opcji:
Właściwości projektu > Aspekty projektu > Dodaj/usuń aspekty
projektu
Tworzenie strony JSP JSF
Korzystając z kreatora strony JSP, utwórz stronę o nazwie login.jsp w
folderze Treść WWW nowej aplikacji. Na stronie Wybór szablonów kreatora wybierz
szablon Nowa strona JSP - HTML.
Kliknij przycisk Zakończ. Strona
zostanie otwarta w edytorze stron WWW, tak jak pokazano poniżej.

Otwórz widok Właściwości. Prawym przyciskiem myszy kliknij kanwę edytora i
z menu kontekstowego wybierz opcję Pokaż->Właściwości. Poczekaj na
zamknięcie okna dialogowego Odczytywanie właściwości.
Dodawanie na kanwę komponentu CommandButton
- W widoku Paleta kliknij sekcję JSF HTML. Zostanie
wyświetlona lista komponentów.
- Przeciągnij przycisk CommandButton i upuścić go na kanwę. Zwróć uwagę, że w edytorze komponent CommandButton został otoczony znacznikami
<f:view> i <h:form>.
- W widoku właściwości kliknij opcję Szybka edycja.
- Ustaw wartość atrybutu Value na Login.
- Ustaw wartość atrybutu Action na login.
Dodawanie komponentu PanelGrid
- Z widoku Paleta przeciągnij i upuść na kanwę komponent PanelGrid (siatkę
panelu). Zwróć uwagę na informacje zwracane przez cel upuszczania.
- Upuść komponent PanelGrid przed przyciskiem CommandButton, ale w obrębie
znacznika Form. Komponent siatki panelu zostanie utworzony z predefiniowanym
zestawem komponentów OutputText.
Modyfikacja komponentów wewnątrz siatki panelu
- Kliknij komponent OutputText o nazwie Item2 i naciśnij klawisz
Delete.
- Dodaj znacznik InputText (w widoku Paleta odpowiada mu tekstowe pole
wejściowe) po komponencie Item1, ale przed komponentem Item3.
- Usuń komponent OutputText o nazwie Item4.
- Dodaj znacznik InputSecret (w widoku Paleta odpowiada mu tajne pole
wejściowe) po komponencie Item3.
- Kliknij komponent OutputText o nazwie Item1. W widoku Źródło zmień
jego wartość na Name.
- Kliknij komponent OutputText o nazwie Item3. W widoku Źródło zmień
jego wartość na Password.
- Kliknij kartę Podgląd, aby zobaczyć wynik wyświetlenia strony w
przeglądarce.
- Kliknij znacznik InputText obok komponentu Name. W widoku
Właściwości ustaw atrybut value na wartość #{loginBean.name}.
- Zapisz stronę. Edytor zgłosi ostrzeżenie, informując, że nie można
rozstrzygnąć zmiennej loginBean.
W eksploratorze projektów rozwiń węzeł
JSFTutorial->WebContent.
Dwukrotnie kliknij plik faces-config.xml. Spowoduje to uruchomienie
edytora konfiguracji Faces. Wybierz kartę Zarządzany komponent bean.
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.
Edytuj klasę Java com.tutorial.LoginBean. Dodaj następujący kod i zapisz klasę.
W widoku eksploratora projektów kliknij prawym
przyciskiem myszy stronę JSP login.jsp i z menu kontekstowego wybierz
opcję Sprawdź poprawność. Strona powinna już być poprawna.
Na stronie Źródło w
edytorze stron WWW dodaj następujący znacznik JSF: <h:inputSecret
value="#{}"></h:inputSecret> . Umieść kursor wewnątrz nawiasów
kwadratowych i naciśnij kombinację klawiszy Ctrl+Spacja. Powinno zostać
wyświetlone okno wywoływane zawierające listę wszystkich obiektów niejawnych oraz
zdefiniowany wcześniej zarządzany komponent bean. Wybierz zarządzany komponent
bean (loginBean).
Wpisz nazwę właściwości, która nie jest zdefiniowana w zarządzanym komponencie
bean (na przykład x), i zapisz zmianę. Edytor zgłosi ostrzeżenie z informacją
o braku możliwości rozstrzygnięcia właściwości.
Usuń niepoprawną właściwość. Ustaw kursor po znaku kropki (.) w nazwie
komponentu bean i naciśnij kombinację klawiszy Ctrl+Spacja. Powinna
zostać wyświetlona lista właściwości zdefiniowanych w
zarządzanym komponencie bean. Z wyświetlonego menu wybierz opcję
password.
Utwórz klasę Java o nazwie com.tutorial.validatePassword implementującą
interfejs Validator i zapisz klasę.
W eksploratorze projektów rozwiń węzeł
JSFTutorial->WebContent.
Dwukrotnie kliknij plik faces-config.xml. Spowoduje to uruchomienie edytora pliku faces-config. Wybierz kartę Komponent. Rozwiń sekcję Analizatory poprawności.
Kliknij przycisk Dodaj. Kliknij przycisk Przeglądaj obok pola
Klasa Validator i wybierz klasę
com.tutorial.ValidatePassword. Zapisz zmiany.
Dodaj następujący znacznik JSF:
<f:validator id=""></f:validator > . Umieść kursor wewnątrz
cudzysłowów i naciśnij kombinację klawiszy Ctrl+Spacja. Powinna zostać
wyświetlona lista zawierająca wszystkie standardowe analizatory poprawności
oraz analizatory zarejestrowane w pliku faces-config. Wybierz analizator o
nazwie Validate Password.
Użyte na stronie
łańcuchy statyczne zostaną teraz przeniesione do pakunku zasobów. W tym celu
dodaj plik o nazwie messages.properties w folderze com.tutorial. Zdefiniuj właściwości zgodnie z poniższym obrazkiem i zapisz plik.
Dodaj znacznik JSF loadBundle, zgodnie z poniższym obrazkiem. Znacznik
można przeciągnąć i upuścić z sekcji JSF Core widoku Paleta.
Usuń łańcuch Name z atrybutu value znacznika outputLabel. Umieść
kursor wewnątrz nawiasów kwadratowych i naciśnij kombinację
klawiszy Ctrl+Spacja. Powinna zostać wyświetlona lista zawierająca między innymi
zmienną msg zdefiniowaną w znaczniku loadBundle. Wybierz ją.
Po słowie msg należy wpisać kropkę i nacisnąć
kombinację klawiszy Ctrl+Spacja. Powinna zostać wyświetlona lista właściwości
zdefiniowanych w pliku messages.properties. Należy wybrać właściwość
name.
Dokończ stronę logowania zgodnie z poniższym obrazkiem.
Utwórz nową stronę JSF o nazwie welcome.jsp, zgodnie z poniższym
obrazkiem.
Edytor zasobów konfiguracji technologii Faces
W ramach projektu JSF Tools dostarczany jest specjalny edytor plików
zasobów konfiguracji technologii Faces. W następującej sekcji przedstawiono krótki przegląd
tego edytora. Niebawem zostanie opublikowany obszerny kurs opisujący
szczegółowo wszystkie funkcje edytora.
Aby uruchomić edytor konfiguracji Faces, należy dwukrotnie kliknąć plik
faces-config.xml. Następnie należy przejść na kartę Nawigacja.
- Na karcie Nawigacja dodaj pliki login.jsp i welcome.jsp. Z palety wybierz element sterujący Strona i upuść go na kartę
Nawigacja. W wyświetlonym oknie dialogowym Wybór pliku JSP wybierz
odpowiednią stronę.
- Połącz obie strony. Na
palecie kliknij element sterujący Odsyłacz, wybierz stronę login
i narysuj linię łączącą ją ze stroną welcome. Wybierz utworzoną linię na karcie Nawigacja, a następnie w widoku właściwości
ustaw wartość właściwości from-outcome na login.
Testowanie strony JSP JSF
1) Strona zostanie teraz uruchomiona za pomocą serwera Apache Tomcat.
W nawigatorze zaznacz stronę login.jsp, a następnie z menu kontekstowego
wybierz opcję Uruchom na serwerze.

2) Wybierz serwer Apache Tomcat i skonfiguruj go stosownie do potrzeb (jeśli
jeszcze nie jest skonfigurowany).
3) 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.

Kliknij przycisk login. Powinna zostać wyświetlona strona
welcome.
Gratulacje! Utworzono i wykonano pierwszą
aplikację JavaServer Faces przy użyciu nowych narzędzi Eclipse WTP JSF.