AWWW-1st3.6-l12.tresc-1.0

From Studia Informatyczne

Spis treści

Aplikacje WWW - laboratorium

JavaServer Faces

Celem ćwiczenia jest przygotowanie aplikacji internetowej z wykorzystaniem technologii JSF.

Prezentowane ćwiczenia zostały wykonane w środowisku Oracle JDeveloper 10.1.3.0.4 (do pobrania ze strony: http://www.oracle.com/ .

Ćwiczenie 1

W tym ćwiczeniu zostanie stworzony serwlet wyświetlający podstawowe informacje o pracownikach.

  • Należy przygotować środowisko – nową aplikację (patrz opis do ćwiczenia „prosty servlet").

Image:AWWW-1st3_6-l12_tresc-1_0_01.png


  • W ramach aplikacji należy stworzyć projekt o nazwie view

Image:AWWW-1st3_6-l12_tresc-1_0_02.png

  • W ramach utworzonego projektu należy utworzyć stronę JSF (File->New).


  • Pierwsza strona będzie stroną startową, należy więc nazwać ją start.jsp.

Image:AWWW-1st3_6-l12_tresc-1_0_04.png

  • W następnych krokach należy zaakceptować proponowane ustawienia domyślne
  • Po wygenerowaniu strony należy upewnić się, że została utworzona we właściwym kontekście

Image:AWWW-1st3_6-l12_tresc-1_0_05.png


  • Następnie należy na utworzonej stronie umieścić odpowiednie informacje powitalne oraz przycisk który będzie przenosił na użytkownika do strony logowania. Należy w tym celu wykorzystać element Command Button z palety JSF HTML. Dla tego przycisku ustaw następujące właściwości (wartości zmienione są zaznaczone zielonymi punktami):

Image:AWWW-1st3_6-l12_tresc-1_0_06.png

  • Ostatnim punktem tego ćwiczenia jest analiza wygenerowanego kodu.

Ćwiczenie 2

Celem tego ćwiczenia jest zdefiniowanie przepływu sterowania pomiędzy stronami tworzonego serwisu internetowego

  • Należy rozpocząć od zlokalizowania pliku faces-config.xml w gałęzi: Web Content | WEB-INF i następnie otwarcia jego zawartości
  • Na otwartej stronie należy umieścić symbol stworzonego poprzednio pliku start.jsp a także wybierając z menu po prawej stronie dołożyć symbol kolejnego pliku. Nowemu plikowi nadać nazwę logowanie.jsp
  • Następnie należy dodać nawigację pomiędzy tymi dwoma plikami

Image:AWWW-1st3_6-l12_tresc-1_0_07.png

  • Należy też dodać kolejną stronę o nazwie strona_dla_zalogowanych.jsp

Image:AWWW-1st3_6-l12_tresc-1_0_08.png

  • Następnie należy przełączyć się na podgląd źródła stworzonego dokumentu XML i je przeanalizować

Ćwiczenie 3

W ramach tego ćwiczenia zostanie zaimplementowana strona logowania do serwisu.

  • Należy dwukrotnie kliknąć ikonę pliku logowanie.jsp
  • W uruchomionym kreatorze należy wybrać następujące opcje opisujące podstawowe parametry tworzonej strony

Image:AWWW-1st3_6-l12_tresc-1_0_09.png


  • Następnie należy zdefiniować parametry serwletu, który będzie obsługiwał formularz logowania

Image:AWWW-1st3_6-l12_tresc-1_0_10.png

  • W kolejnych krokach można akceptować wartości podpowiadane przez kreatora

  • Na wygenerowanej stronie należy stworzyć formularz logowania.
  • Korzystając z komponentów Output Label i Input Text należy stworzyć odpowiednie rubryki i miejsca na wprowadzanie danych (pola mają być wymagane, należy zaznaczyć to w ich właściwościach)
  • Z palety JSF CORE wybrać komponent Validate Length i powiązać go z polem przechowującym hasło użytkownika – minimalna długość hasła to 4 znaki
  • Następnie należy dołożyć przycisk Command Button, który będzie miał ustawione następujące właściwości: action = strona_dla_zalogowanych, value = Zaloguj

Image:AWWW-1st3_6-l12_tresc-1_0_11.png

Ćwiczenie 4

Celem tego ćwiczenia jest przygotowanie strony wyświetlającej informacje powitalne dla zalogowanego użytkownika

  • Na początku tego ćwiczenia należy na diagramie sterowania kliknąć dwukrotnie na ikonie strony dla zalogowanego użytkownika i korzystając z uruchomionego kreatora stworzyć taką stronę.

Image:AWWW-1st3_6-l12_tresc-1_0_12.png

  • Umieść na stronie element Output Text. W polu value skasuj istniejące dane i korzystając z kreatora bindowania danych wprowadź nastepującą wartość:

#{backing_logowanie.inputText1.value}

  • Aplikacja jest gotowa do uruchomienia

Ćwiczenie 5

Celem tego ćwiczenia jest zaprojektowanie akcji wykonywanej w sytuacji, kiedy użytkownik wprowadzi błędne dane do formularza logowania.

  • Wykonywanie ćwiczeni należy rozpocząć od zdefiniowania kolejnego przepływu sterowania na diagramie JSF. Tym przepływem będzie przepływ między stroną z formularzem logowania a stroną startową.

Image:AWWW-1st3_6-l12_tresc-1_0_13.png

  • Na stronie z formularzem logowania należy zmienić akcję dla przycisku na DEFAULT
  • W znajdującym się po prawej stronie oknie struktury dokumentu należy wybrać z menu kontekstowego dla przycisku tworzenie bindowania metody (Create Method Binding for Action)

Image:AWWW-1st3_6-l12_tresc-1_0_14.png


  • Kod metody powinien wyglądać następująco

  public String commandButton1_action()
  {
    // Add event code here...
    if (inputSecret1.getValue().toString().equals("welcome"))
    {
      return "success";
    }
    else
    {
      String message = "Invalid login";
      FacesContext.getCurrentInstance().addMessage(null,
                              new FacesMessage(message));
      return "zle dane";
    }
  }

  • Następnie można uruchomić i przetestować aplikację