Plik Page1.jsp jest stroną startową napisaną w języku JSP

(1)

Lab1.

Zad.1.

1. Wybierz opcję File/New Project. Wybierz kategorię projektu Web, a rodzaj projektu Visual Web Application

2. Kliknij na Next

3. Podaj nazwę projektu (Project name), wybierz katalog (Project Location)

4. Wybierz serwer aplikacji (Server) oraz wersję Javy Enterprise (Java EE Version).

5. Okno projektu (Projects) zawiera układ plików typu BluePrints. Plik Page1.jsp jest stroną startową napisaną w języku JSP.

6. Okno Files zawiera układ fizyczny plików. Plik Page1.jsp oraz Page1.java stanowią całość- plik Page1.java obsługuje stronę jsp.

7. Kliknij prawym klawiszem myszy w oknie Project na Web Pages, New i Page i utwórz stronę Page2.jsp.

8. Sprawdź zawartość okna Navigator w trybie Java dla strony Page2 9. Sprawdź zawartość okna Outline w trybie Design dla strony Page2 10. Sprawdź zawartość pliku JSP dla strony Page2

11. Uzupełnij zawartośc strony Page1. Zaprojektuj stronę Page2 korzystając z Palette Basic, Layout i Composite

11.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ć

11.2 Przeciągnij kontrolkę Message Group połącz ją z textField1 za pomocą Ctrl-Shift-Drag

11.3 Przeciągnij kontrolkę Drop Down List, po kliknięciu prawym klawiszem myszy na tej kontrolce i kolejnym pozycjom listy wartości w opcji Configure Default.

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

11.5 Wybierz z wyskakującego menu po kliknięciu prawego klawisza myszy opcję Print Previous, aby zobaczyć widok wyjściowy tworzonego okna.

(2)

11.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, po kliknięciu ukaże się strona Page2.

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

 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

(3)

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.

(4)

11.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 – null oznacza powrót do tej samej strony

11.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 – null oznacza powrót do tej samej strony.

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

(5)

11.11. Walidacja danych

Przeciągnij kontrolkę Double Range Validator z Palette na kontrolkę TextField. W okienku Outline wybierz doubleRangeValidator1 i w okienku Properties tej kontrolki ustaw minimum na 1.0 i maximum na 10.0.

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

11.13. Prezentacja komunikatów

Przeciągnij kontrolkę Message i klawiszami Ctrl-Shift-Drag przeciągnąć ją na kontrolkę TextField. Pole for w Properties jest powiązane z kontrolką typu TextField. Usuń kontrolkę Message Group (kliknij prawym klawiszem myszy i kliknij lewym klawiszem opcję Delete) i zastąp ją nową kontrolkę Message Group bez połączenia z kontrolką TextField (bez przeciąnięcia klawiszami Ctrl- Shift-Drag na kontrolkę typu TextField). 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.

11.14. Przechowywanie danych

(6)

W oknie Outline wybierz obiekt Request Bean, prawym klawiszem kliknij na ten obiekt i w okienku Add wybrać Property nadając mu nazwę dana1 typu double.

11.15. Przesyłanie danych między stronami

11.16. Wstaw kontrolkę typu StaticText na stronie Page1. Połącz ją ze składową typu dana1 z klasy RequestBean podobnie jak kontrolkę typu TextField na stronie Page2.

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

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

(7)

11.6 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

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

Section

(8)

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

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