Artykuł Eclipse Corner

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:

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.

Nowa dynamiczna aplikacja WWW


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ę dostarczaną przez firmę Sun Microsystem. 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



Utwórz bibliotekę użytkownika JDT na potrzeby przechowywania pliku JAR biblioteki JSTL. Kliknij przycisk OK.

Strona Możliwości JSF



W oknie dialogowym Możliwości JSF zostanie wyświetlona biblioteka JSTL. Wybierz bibliotekę i kliknij przycisk Zakończ.

Strona Możliwości JSF



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.


Edytor stron WWW


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


Edytor stron WWW - Dodawanie komponentu CommandButton


Dodawanie komponentu PanelGrid
Modyfikacja komponentów wewnątrz siatki panelu


Edytor stron WWW - Dodawanie komponentu PanelGrid


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.

Edytor konfiguracji Faces dla zarządzanego komponentu 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.

Nowy zarządzany komponent bean

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

Sprawdzanie poprawności właściwości komponentu bean w języku wyrażeń

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.

Sprawdzanie poprawności właściwości komponentu bean w języku wyrażeń

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.

Aktywna obsługa treści

Utwórz klasę Java o nazwie com.tutorial.validatePassword implementującą interfejs Validator i zapisz klasę.

Analizator poprawności
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.

Karta Komponent w edytorze konfiguracji Faces

Kliknij przycisk Dodaj. Kliknij przycisk Przeglądaj obok pola Klasa Validator i wybierz klasę com.tutorial.ValidatePassword. Zapisz zmiany.

Rejestrowanie analizatora poprawności w edytorze konfiguracji Faces

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.

Aktywna obsługa treści - nazwy analizatorów poprawności


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.

Aktywna obsługa treści - pakunek zasobów

Dodaj znacznik JSF loadBundle, zgodnie z poniższym obrazkiem. Znacznik można przeciągnąć i upuścić z sekcji JSF Core widoku Paleta.

Aktywna obsługa treści - pakunek zasobów

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

Aktywna obsługa treści - pakunek zasobów

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.

Aktywna obsługa treści - pakunek zasobów


Dokończ stronę logowania zgodnie z poniższym obrazkiem.

Dokończona strona logowania

Utwórz nową stronę JSF o nazwie welcome.jsp, zgodnie z poniższym obrazkiem.

Dokończona strona logowania

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.

Edytor konfiguracji Faces



Edytor konfiguracji Faces

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.