Lab1. Zad.1. 1. Wybierz opcję File/New Project. Wybierz kategorię projektu Web, a

rodzaj projektu Web Application 2. Kliknij na Next 3. Podaj nazwę projektu (Project name), wybierz katalog (Project Location) 4. Wybierz serwer aplikacji GlassFish V2 z listy Server oraz wersję Javy

Enterprise (Java 5 EE Version) – wybierz domyślne wartości. 5. Kliknij na Next i wybierz Visual Web JavaServer Faces i naciśnij Finish. 6. Wybierz okno projektu (zakładka Projects) - zawiera ono układ plików

typu BluePrints. Plik Page1.jsp jest stroną startową napisaną w języku JSP (zaznaczenie zielonym poziomym trójkątem) i znajduje się w podkatalogu „Web Pages”.

7. Wybierz okno Files (zakładka Files)– zawiera ono układ fizyczny plików.

Plik Page1.jsp oraz Page1.java stanowią całość - plik Page1.java obsługuje stronę jsp i znajduje się w podkatalogu „src”

8. Sprawdź zawartość okna Navigator w trybie Design dla strony Page1 – zawiera ono strukturę logiczną strony Page1.java

9. Sprawdź zawartość strony Page1 w trybie JSP 10. Sprawdź zawartość strony Page1 w trybie JAVA 11. Kliknij prawym klawiszem myszy w oknie Project na Web Pages, New i

Visual Web JSF Page i utwórz stronę Page2.jsp. 12. Sprawdź zawartość okna Navigator w trybie Design dla strony Page2–

zawiera ono strukturę logiczną strony Page2.java 13. Sprawdź zawartość strony Page2 w trybie JAVA 14. Sprawdź zawartość strony Page2 w trybie JSP

15 Zaprojektuj stronę Page2 korzystając z Palette Basic, Layout i Composite 15.1 Przeciągnij kontrolkę Label i Text Filed. Połącz Label z TextField za

pomocą Ctrl-Shift-Drag. W oknach Properties obu kontrolek nazwy ich są standardowe:label1 i textField1. Nazwy te moŜna zmieniać

15.2 Przeciągnij kontrolkę Message i klawiszami Ctrl-Shift-Drag przeciągnąć ją na kontrolkę TextField. Pole for kontrolki Message w Properties jest powiązane z kontrolką typu TextField.

15.3 Przeciągnij kontrolkę Drop Down List; po kliknięciu prawym klawiszem myszy na tej kontrolce i wyborze opcji Configure Default nadać kolejnym pozycjom listy dowolne wartości w edytorze opcji Configure Default.

15.4 Przeciągnij kontrolkę Radio Button Group i nadaj przyciskom wartości i domyślny wybór pierwszego przycisku w opcji Configure Default, ustaw 3 kolumny w oknie Properties

15.5 Wybierz z wyskakującego menu po kliknięciu prawego klawisza myszy opcję Preview in Browser, aby zobaczyć widok wyjściowy okna.

15.6. Wykonaj połączenie miedzy stronami pierwszym sposobem: • Przejdź na stronę Page1 do trybu Design i przeciągnij HiperLink z Palette. • W oknie Properties kontrolki HiperLink wybierz pole url, kliknij na (…) i z

formularza HiperLink-url wybierz stronę Page2. • Wpisz tekst „Page2” na kontrolce typu HiperLink. • Uruchom aplikację: Kliknij prawym klawiszem myszy w oknie Project na

nazwę projektu, w ukazanym oknie uruchom kolejno Build Project, Deploy Project, Run Project. Po uruchomieniu aplikacji w oknie przeglądarki kliknij na link Page2 na stronie Page1, po kliknięciu ukaŜe się strona Page2.

15.7. Wykonaj kolejne połączenie między stronami drugim sposobem: • Wybierz stronę Page2 i przejdź do trybu Design. Przeciągnij z Palette

kontrolkę Button i wpisz na niej napis „Powrót” • Wybierz okno Page Navigation klikając w trybie Design na powierzchnię

strony Page2 prawym klawiszem myszy. Wybierz z listy opcję Projects (belka narzędziowa okna Page Navigation)

• Wykonanie połączenia Page1-Page2: Kliknij lewym klawiszem myszy na Page1.jsp. Kliknij lewym klawiszem myszy na kontrolkę Hiperlink i przeciągnij klawisz na stronę Page2.jsp. UkaŜe się połączenie case1- klikając lewym klawiszem myszy na case1 zmienić nazwę na Page2

• Wykonanie połączenia Page2-Page1: Kliknij lewym klawiszem myszy na Page2.jsp. Kliknij lewym klawiszem myszy na kontrolkę typu Button i przeciągnij klawisz na stronę Page1.jsp. UkaŜe się połączenie case1 - klikając lewym klawiszem myszy na case1 zmienić nazwę na Page1

• Uruchom aplikację (Kliknij prawym klawiszem myszy w oknie Project na nazwę projektu, w ukazanym oknie uruchom kolejno Build Project, Deploy Project, Run Project) i uruchom utworzone linki.

15.8. W trybie Design strony Page1 po kliknięciu lewym klawiszem myszy na kontrolkę typu HiperLink. Kod hyperlink1_action zwraca wartość róŜną od null (”Page2”) – null oznacza powrót do tej samej strony

15.9. W trybie Design strony Page2 po kliknięciu lewym klawiszem myszy na kontrolkę typu Buton. Kod button1_action zwraca wartość róŜną od null (”Page1”) – null oznacza powrót do tej samej strony.

15.10. Kontrola obecności danych wejściowych.

W trybie Design strony Page2 wybierz kontrolkę typu TextField. W oknie Properties dla pola required zaznaczyć checkbox. Kontrolka Label związana z polem typu TextField zostaje dodatkowo oznaczona gwiazdką, która podpowiada konieczność wpisania danych w polu tekstowym.

15.11. Walidacja danych Przeciągnij kontrolkę Double Range Validator z Palette na kontrolkę TextField. W okienku Navigator wybierz doubleRangeValidator1 i w okienku Properties tej kontrolki ustaw minimum na 1.0 i maximum na 10.0. W okienku Properties kontrolki TextField (widocznym po zaznaczeniu tej kontrolki) pole validatorExpression jest równe doubleRangeValidator1, czyli domyślnej nazwy kontrolki typu doubleRangeValidator1

15.12. Konwersja danych Przeciągnij kontrolkę Number Converter z Palette na kontrolkę TextField. Po ukazaniu się dialogu tej kontrolki naleŜy ustawić parametry formatu danych. W okienku Properties kontrolki TextField (widocznym po zaznaczeniu tej kontrolki) pole converter jest równe numberConverter1, czyli domyślnej nazwy kontrolki typu Number Converter.

15.13. Prezentacja komunikatów Przeciągnij kontrolkę Message Group. Uruchom aplikację (Kliknij prawym klawiszem myszy w oknie Project na nazwę projektu, w ukazanym oknie uruchom kolejno Build Project, Deploy Project, Run Project) i skontroluj działanie kontroli obecności danych, walidacji i formatu danych. Zaobserwuj zachowanie kontrolek typu Message i Message Group.

15.14. Przechowywanie danych W oknie Navigator wybierz obiekt Request Bean, prawym klawiszem kliknij na ten obiekt. W oknie edytora klasy RequestBean1, w ciele tej klasy np. za lewym nawiasem „{„ ciała klasy wstawić składową nadając jej nazwę dana1 typu double (private double dana1;).

Klikając prawym klawiszem myszy z wyskakującego menu wybrać opcję Refactor i następnie podopcję Encapsulate Fields. Zaznaczyć pola typu checkbox na pokazanym formularzu w kolumnach Create Setter i Create Getter i kliknij przycisk Refactor. W kodzie pojawia się metody: public double getDana1() { return dana1; } public void setDana1(double dana1) { this.dana1 = dana1; }

15.15. Przesyłanie danych między stronami Wybierz tryb Design dla strony Page2. Wybierz kontrolkę typu TextField i po naciśnięciu prawego klawisza myszy wybierz z menu opcję Bind To Data i zaznacz składową dana1

15.16. Wstaw kontrolkę typu StaticText na stronie Page1. Połącz ją ze składową typu dana1 z klasy RequestBean1 podobnie jak kontrolkę typu TextField na stronie Page2. Wybierz tryb Design dla strony Page2. Wybierz kontrolkę typu StaticText i po naciśnięciu prawego klawisza myszy wybierz z menu opcję Bind To Data i zaznacz składową dana1

15.17. Uruchom aplikację (Kliknij prawym klawiszem myszy w oknie Project na nazwę projektu, w ukazanym oknie uruchom kolejno Build Project, Deploy Project, Run Project) i skontroluj działanie kontroli obecności danych, walidacji i formatu danych. Zaobserwuj zachowanie kontrolek typu Message i Message Group i skontroluj przenoszenie danych.

Przypadek poprawnego wstawiania danych

Przypadek niepoprawnego wprowadzana danych

Table 1: Input Components

Component Description Palette

Section

Text Field An input field for a single line of text. Basic

Text Area An input field for multiple lines of text. Basic

Password Field An input field that echoes the input characters with a replacement character to mask the input.

Basic

Calendar An input field with a pop-up calendar that allows the user to select a date. Basic

Drop Down List

A drop-down menu, also referred to as a combo box. Basic

Listbox A list from which the user can select either one item or multiple items, depending on how the component is configured.

Basic

Checkbox A single-character box that the user can either select (check) or clear. Basic

Radio Button A single radio button that the user can select (check). Basic

Add Remove List

Two lists (one for available options, one for selected options) with buttons to move the options between the lists, and to order the selected options.

Composite

File Upload A component with a text input field and a Browse button that displays a file chooser for specifying a file to upload. The application uploads the specified file when the user submits the page.

Basic

Table 2: Display Components

Component Description Palette

Section

Static Text Field for displaying text. Basic

Label Text field that can be associated with an input field and for which you can specify a weak, medium, or strong font style.

Basic

Image Inline image. Basic

Message Text field that is linked to a specific component for displaying validation errors and other messages about that component.

Basic

Message Group

Text field for displaying runtime error messages, program generated error messages, and, optionally, validation errors and other messages about components that are on the page.

Basic

Alert Displays an icon and informational text such as a warning, an error, or the successful completion of some event.

Composite

Page Alert Similar to an Alert component, but is intended for displaying the icon and information on a separate page.

Layout

Table 3: Grouping Components

Component Description Palette

Section

Checkbox Group Displays two or more check boxes in a grid layout. Basic

Radio Button Group Displays two or more radio buttons in a grid layout and ensures that only one button can be selected at a time.

Basic

Table, Table Row Group, and Table Column

Displays data from a composite data type such as a database table or an array.

Basic

Tree and Tree Node Renders an expandable list in a tree structure. Basic

Tab Set and Tab Displays different layouts on the same page. Also can be used as a navigational tool.

Layout

Grid Panel Organizes the components within a layout of rows and columns.

Layout

Group Panel Groups a set of components in flow layout mode. Layout

Layout Panel Use to group a set of components in flow layout mode or grid layout mode.

Layout

Property Sheet, Property Sheet Section, and Property

Lays out a single column of labeled components quickly, and divides the components into sections.

Layout

Breadcrumbs Lays out a series of link components separated by right angle brackets (>).

Composite

Page Fragment Box Groups components that you want to consistently display on two or more pages.

Layout

Table 4: Action Components

Component Description Palette

Section

Button Button that submits the associated form. Basic

Hyperlink Text field that submits a URL or submits a form. Basic

Image Hyperlink Image that submits a URL or submits a form. Basic

Tree Node Subcomponent of a Tree or Tree Node. A leaf tree node can optionally submit a URL or submit a form.

Basic

Tab Subcomponent of a Tab Set or a Tab. A tab can optionally submit a URL or submit a form.

Composite