Wykonanie połączenia Page1-Page2: Kliknij lewym klawiszem myszy na Page1.jsp. Kliknij lewym klawiszem myszy na kontrolkę Hiperlink i przeciągnij

Transkrypt

1 Lab1. Zad 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

2 15 Zaprojektuj stronę Page2 korzystając z Palette, 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 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 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 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 Page 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)

3 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

4 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 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

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

6 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 W okienku Properties kontrolki TextField (widocznym po zaznaczeniu tej kontrolki) pole validatorexpression jest równe doublerangevalidator1, czyli domyślnej nazwy kontrolki typu doublerangevalidator 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.

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

8 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; }

9 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ą dana 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

10 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

11 Przypadek niepoprawnego wprowadzana danych

12 Table 1: Input Components Component Description Palette Section Text Field An input field for a single line of text. Text Area An input field for multiple lines of text. Password Field An input field that echoes the input characters with a replacement character to mask the input. Calendar An input field with a pop-up calendar that allows the user to select a date. Drop Down List Listbox A drop-down menu, also referred to as a combo box. A list from which the user can select either one item or multiple items, depending on how the component is configured. Checkbox A single-character box that the user can either select (check) or clear. Radio Button A single radio button that the user can select (check). Add Remove List File Upload 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. 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. Composite Table 2: Display Components Component Description Palette Section Static Text Field for displaying text. Label Text field that can be associated with an input field and for which you can specify a weak, medium, or strong font style. Image Inline image. Message Message Group Alert Page Alert Text field that is linked to a specific component for displaying validation errors and other messages about that component. 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. Displays an icon and informational text such as a warning, an error, or the successful completion of some event. Similar to an Alert component, but is intended for displaying the icon and information on a separate page. Composite Layout

13 Table 3: Grouping Components Component Description Palette Section Checkbox Group Displays two or more check boxes in a grid layout. Radio Button Group Table, Table Row Group, and Table Column Displays two or more radio buttons in a grid layout and ensures that only one button can be selected at a time. Displays data from a composite data type such as a database table or an array. Tree and Tree Node Renders an expandable list in a tree structure. Tab Set and Tab Grid Panel Displays different layouts on the same page. Also can be used as a navigational tool. Organizes the components within a layout of rows and columns. Layout Layout Group Panel Groups a set of components in flow layout mode. Layout Layout Panel Property Sheet, Property Sheet Section, and Property Breadcrumbs Page Fragment Box Use to group a set of components in flow layout mode or grid layout mode. Lays out a single column of labeled components quickly, and divides the components into sections. Lays out a series of link components separated by right angle brackets (>). Groups components that you want to consistently display on two or more pages. Layout Layout Composite Layout Table 4: Action Components Component Description Palette Section Button Button that submits the associated form. Hyperlink Text field that submits a URL or submits a form. Image Hyperlink Image that submits a URL or submits a form. Tree Node Tab Subcomponent of a Tree or Tree Node. A leaf tree node can optionally submit a URL or submit a form. Subcomponent of a Tab Set or a Tab. A tab can optionally submit a URL or submit a form. Composite