6. Powtórz kroki z punktu 5. dla strony sorry.jsp, zmieniając jedynie treść wyświetlanego tekstu ( Niestety zamiast Witaj )

Transkrypt

1 Wielowarstwowe aplikacje internetowe - laboratorium JavaServer Faces (JSF) Do realizacji ćwiczenia potrzebne jest zintegrowane środowisko programistyczne Oracle JDeveloper w wersji lub wyŝszej. Autor ćwiczenia: Marek Wojciechowski 1. Utwórz w środowisku JDeveloper (10.1.3) nową aplikację typu Web Application (Default) : a. File -> New -> General -> Application b. W oknie Create application zmień nazwę aplikacji na Logowanie i wybierz Web Application [JSF, EJB] jako Application Template. Przed zatwierdzeniem wyboru (OK) przeczytaj opis wybranego szablonu aplikacji (Template Description) c. Rozwiń drzewko aplikacji w Nawigatorze d. Obejrzyj zawartość pliku konfiguracyjnego modułu webowego web.xml. Zwróć uwagę na deklarację (<servlet> i mapowanie (<servlet-mapping>) dla serwletu kontrolera aplikacji (FacesServlet) 2. Utwórz stronę z formatką do logowania: a. Przejdź do edycji pliku faces-config.xml w trybie wizualnym (zakładka Diagram edytora) b. Umieść na diagramie ikonę nowej strony JSF (JSF Page z palety JSF Navigation Diagram, drag&drop) c. Zmień na diagramie nazwę dodanej strony na login.jsp d. Przejdź do definiowania strony poprzez dwuklik na jej ikonie na diagramie: i. Step 1: Pozostaw opcje domyślne ii. Step 2: Wybierz drugą opcję (automatyczne wiązanie komponentów strony z nowo utworzonym komponentem backing bean). Pozostaw domyślne propozycje nazwy komponentu, klasy i pakietu iii. Step 3-5: Pozostaw opcje domyślne

2 iv. Obejrzyj kod automatycznie wygenerowanej klasy komponentu backing bean (w gałęzi Application Sources drzewka aplikacji w Nawigatorze) v. Obejrzyj automatycznie dodaną deklarację komponentu backing bean (jako managed bean) w pliku faces-config.xml (zakładka Source edytora) vi. Powróć do edycji strony login.jsp w trybie Design e. Wybierz z listy palet w Palecie Komponentów paletę HTML Common f. Umieść na stronie element Table (3 wiersze, 2 kolumny, szerokość 200 pikseli), pozostałe atrybuty wg propozycji kreatora) g. Wybierz z listy palet w Palecie Komponentów paletę JSF HTML h. Umieść na stronie następujące elementy zgodnie z układem przedstawionym na poniŝszym obrazku (UWAGA: naleŝy najpierw umieścić kursor w wybranym miejscu strony, a następnie kliknąć na odpowiedniej ikonce w Palecie Komponentów): i. Element Output Text z tekstem UŜytkownik: (tekst wprowadź w Palecie Właściwości pozycja Value, po umieszczeniu komponentu na stronie) ii. Element Output Text z tekstem Hasło: (tekst wprowadź w Palecie Właściwości (Property Inspector) pozycja Value, po umieszczeniu komponentu na stronie) iii. Element Input Text do wprowadzania nazwy uŝytkownika iv. Element Input Secret do wprowadzania hasła v. Element Command Button (zmień etykietę na Zaloguj w Palecie Właściwości pozycja Value, po umieszczeniu komponentu na stronie) i. Obejrzyj kod źródłowy strony (zakładka Source edytora) j. Obejrzyj kod automatycznie dodany przez kreator do pliku klasy backing bean Login.java k. Zapisz wszystkie zmiany (Save All) l. Uruchom stronę login.jsp (z poziomu JDevelopera) i. Zwróć uwagę na URL w przeglądarce odpowiadający mapowaniu dla FacesServlet ii. Wypełnij formularz i naciśnij przycisk Zaloguj iii. Zwróć uwagę, Ŝe nastąpi ponowne wyświetlenie tego samego formularza z zachowaniem wartości wprowadzonej nazwy uŝytkownika

3 3. Zaprojektuj reguły nawigacji dla aplikacji w przypadku powodzenia i niepowodzenia logowania. a. Przejdź do edycji pliku faces-config.xml w trybie Diagram b. Dodaj na diagramie dwie strony JSF Page. Zmień ich nazwy na welcome.jsp i sorry.jsp. W tej chwili nie przechodź jeszcze do edycji stron c. Dodaj regułę nawigacji z dwoma moŝliwymi przypadkami nawigacji (JSF Navigation Case): i. Od login.jsp do welcome.jsp z etykietą success (pozostaw domyślną) ii. Od login.jsp do sorry.jsp z etykietą failure (zmień etykietę na diagramie) d. Obejrzyj dodaną regułę nawigacji w kodzie źródłowym pliku faces-config.xml e. Powróć do edycji pliku faces-config.xml w trybie diagram f. Zapisz wszystkie zmiany 4. Utwórz metodę akcji dla przycisku logowania na stronie login.jsp, zwracającą etykiety powodujące nawigację do stron welcome.jsp i sorry.jsp: a. Przejdź do edycji strony login.jsp w trybie Design b. Kliknij dwukrotnie na przycisku logowania. Kreator utworzy szkielet metody akcji w klasie komponentu backing bean powiązanego ze stroną i powiąŝe ją z przyciskiem c. Jako ciało metody wprowadź poniŝszy kod: String user = (String) inputtext1.getvalue(); String pass = (String) inputsecret1.getvalue(); if (user.equals(pass)) return "success"; else return "failure"; PowyŜszy fragment kodu implementuje regułę, Ŝe poprawne hasło to hasło identyczne z nazwą uŝytkownika. Zwróć uwagę na konieczność wydobycia wartości pola tekstowego z obiektu komponentu (metoda getvalue()) i konieczność konwersji zwróconej referencji typu Object do klasy String. d. Obejrzyj utworzone przez kreator powiązanie metody akcji z przyciskiem Zaloguj w kodzie źródłowym strony login.jsp e. Zapisz zmiany i powróć do edycji pliku faces-config.xml w trybie Diagram

4 5. Utwórz stronę welcome.jsp: a. Kliknij dwukrotnie na ikonie strony na diagramie nawigacji b. Pozostaw wartości domyślne dla wszystkich opcji kreatora tworzenia strony c. Dodaj na stronie element Output Text wyświetlający tekst Witaj i element Output Text, który ma docelowo ma wyświetlać nazwę uŝytkownika d. Przejdź do edycji właściwości dodanego elementu Output Text w Palecie Właściwości e. Wprowadź #{ jako wartość dla właściwości Value. Przejdź do innej właściwości, a następnie wróć do właściwości Value. ZauwaŜ, Ŝe pojawił się przycisk... f. Wywołaj kreator wiązania wartości naciskając przycisk... dla właściwości Value elementu Output Text g. Wybierz w drzewku zmiennych (przez podwójne kliknięcie) węzeł JSF Managed Beans -> backing_login -> inputtext1 -> value h. Jeśli zachodzi taka potrzeba, popraw (jeszcze w okienku dialogowym) treść wyraŝenia na: #{ backing_login.inputtext1.value} i naciśnij przycisk OK i. Zapisz zmiany 6. Powtórz kroki z punktu 5. dla strony sorry.jsp, zmieniając jedynie treść wyświetlanego tekstu ( Niestety zamiast Witaj ) 7. Uruchom aplikację (uruchamiając stronę login.jsp) i przetestuj jej działanie dla prawidłowego i błędnego hasła 8. Zapewnij moŝliwość powrotu ze strony sorry.jsp do strony login.jsp poprzez kliknięcie przycisku: a. Zdefiniuj odpowiednią regułę nawigacji (edycja pliku faces-config.xml w trybie Diagram). W tym wypadku wystarcza nawigacja statyczna z jednym przypadkiem nawigacji ze strony sorry.jsp do strony login.jsp. Oznacz ten przypadek bezwarunkowej nawigacji etykietą back. b. Dodaj na stronie sorry.jsp przycisk z etykietą Powrót, pozwalający na powrót do strony logowania. Pamiętaj o tym, Ŝe aby przycisk zatwierdzał stronę, musi on być elementem formularza. (W przypadku umieszczania nowego przycisku poza formularzem, kreator spyta czy utworzyć formularz.) Jako wartość atrybutu Action przycisku wybierz z listy w palecie właściwości wartość back, odpowiadającą zdefiniowanemu wcześniej przypadkowi bezwarunkowej nawigacji. c. Uruchom aplikację i przetestuj powrót do strony logowania za pomocą przycisku. 9. Rozbuduj aplikację o walidację danych wprowadzanych do formularza. Podanie nazwy uŝytkownika powinno być obowiązkowe, a hasło powinno mieć od 4 do 6 znaków: a. Korzystając z palety właściwości ustaw właściwość Required dla elementu Input Text do wprowadzania nazwy uŝytkownika. b. Obok tego elementu umieść element Message z palety komponentów JSF HTML. Jako wartość jego właściwości For wybierz nazwę elementu do wprowadzania nazwy uŝytkownika.

5 c. Dodaj walidator ValidateLength dla pola z hasłem, zaznaczając pole w edytorze wizualnym strony, a następnie wybierając walidator z palety komponentów JSF Core. Poprzez paletę właściwości zmień właściwości Minimum i Maximum walidatora na 4 i 6. d. Analogicznie do punktu b. dodaj element Message wyświetlający błędy dla pola z hasłem. e. Uruchom aplikację i przetestuj walidację dla obu pól formularza. 10. Dodaj na stronie logowania pole wyboru, którego zaznaczenie będzie konieczne przed zalogowaniem się do systemu: a. Zmień właściwość Disabled przycisku logowania na true. b. Przenieś przycisk logowania do lewej komórki dolnego wiersza tabelki, a w prawej umieść element Checkbox z palety JSF HTML. Obok pola wyboru wpisz tekst Tak, mam skończone 18 lat.. c. Zdefiniuj procedurę obsługi zdarzenia zmiany stanu pola wyboru. W tym celu w palecie właściwości pola wyboru wprowadź jako wartość właściwości ValueChangeListener nazwę metody do utworzenia, np. checkbox1changed(). d. Przejdź do edycji klasy komponentu backing bean strony logowania i wprowadź poniŝszy kod jako ciało metody utworzonej w kroku c.: if (selectbooleancheckbox1.isselected()) commandbutton1.setdisabled(false); else commandbutton1.setdisabled(true);

6 e. Jako wartość właściwości OnChange pola wyboru wprowadź następujący kod JavaScript: submit(). Jest to niezbędne, gdyŝ obsługa zdarzeń odbywa się na serwerze, a zmiana stanu pola wyboru nie powoduje domyślnie zatwierdzenia formularza i interakcji z serwerem. f. Uruchom aplikację i zaobserwuj problem niechcianej walidacji pól tekstowych po zmianie stanu pola wyboru. g. Aby obsługa zdarzenia z pola wyboru miała miejsce przed walidacją, ustaw jego właściwość Immediate na true. h. Aby po obsłudze zdarzenia pominąć całkowicie fazę walidacji, na końcu ciała metody obsługującej zdarzenie zmiany stanu przycisku wprowadź poniŝszy kod: FacesContext context = FacesContext.getCurrentInstance(); context.renderresponse(); i. Ponownie przetestuj działanie aplikacji. 11. Spraw, aby aplikacja wspierała wiele języków poprzez zdefiniowanie treści komunikatów w plikach.properties. Domyślnym językiem powinien być angielski, a drugim wspieranym - polski: a. Dodaj do projektu dwa pliki poprzez menu kontekstowe dla węzła Application Sources projektu ViewController: New->General->File. Nazwij pliki: messages.properties i messages_pl.properties. b. W pliku messages.properties umieść następujące pary klucz=wartość: sorryprompt=sorry backlabel=back c. W pliku messages_pl.properties umieść następujące pary klucz=wartość: sorryprompt=niestety backlabel=powr\u00f3t Zwróć uwagę, Ŝe polskie znaki diakrytyczne w plikach.properties muszą być reprezentowane przez kody Unicode. d. W pliku sorry.jsp w znaczniku <f:view> umieść atrybut locale z wartością #{facescontext.externalcontext.request.locale}, co spowoduje przyjęcie lokalizacji wskazanej przez przeglądarkę w Ŝądaniu. e. W pliku sorry.jsp po znaczniku <f:view> umieść poniŝszy element: <f:loadbundle basename="messages" var="msg"/>, a teksty Niestety i Powrót zastąp przez odwołania: #{msg.sorryprompt} i #{msg.backlabel}.

7 f. Analogicznie obsłuŝ wielojęzyczność dla wszystkich tekstów i etykiet na stronach login.jsp i welcome.jsp. Ewentualne teksty wpisane bezpośrednio w kodzie strony zastąp elementami Output Text. g. Uruchom i przetestuj aplikację. 12. Aby dokończyć lokalizację aplikacji naleŝy jeszcze spolszczyć komunikaty o błędach z wykorzystywanych standardowych walidatorów. W tym celu: a. Dodaj do projektu plik tekstowy errors_pl.properties (analogicznie do punktu 11. a.) b. Umieść w nim komunikaty dla kluczy reprezentujących standardowe walidatory JSF: javax.faces.component.uiinput.required=pole jest wymagane! javax.faces.validator.lengthvalidator.minimum=minimalna dopuszczalna liczba znak\u00f3w to {0}! javax.faces.validator.lengthvalidator.maximum=maksymalna dopuszczalna liczba znak\u00f3w to {0}! c. Dodaj do projektu pusty plik tekstowy errors.properties (Opcjonalnie moŝna w nim umieścić własne angielskie komunikaty o błędach walidacji. Jeśli wpis dla jakiegoś błędu walidacji się w tym pliku nie znajdzie, będzie obowiązywał domyślny komunikat walidatora.) d. Przejdź do edycji pliku faces-config.xml w trybie Overview. W panelu po lewej stronie wybierz sekcję Application. W polu Message Bundle wpisz errors. e. Zapisz wszystkie zmiany. Uruchom aplikację. Zwróć uwagę na polskie komunikaty o błędach walidacji.