Layout: Page Fragment Box

(1)

Programowanie komponentowe 4, Zofia Kruczkiewicz

1

Przykłady zastosowania komponentów typu

Layout: Page Fragment Box

Programowanie

komponentowe 4

(2)

2

1. Utworzenie projektu - zastosowanie komponentu Page Fragment Box

1) Z głównego menu wybierz opcję File > New Project.

2) W New Project, wybierz Java Web listy kategorii (Categories) i wybierz Web Application z listy projektów (Projects). Kliknij Next.

3) Nazwij projekt AplikacjaInternetowa7 (Project Name) i wybierz katalog (Browse dla Project Location). Kliknij Next.

4) Wybierz serwer aplikacji GlassFish V2 z listy Server oraz wersję Java EE z listy Java EE Version – domyślne wartości. Kliknij na Next

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

(3)

3

Zastosowanie komponentu Page Fragment Box

(4)

4

Zastosowanie komponentu Page Fragment Box

(5)

5

Zastosowanie komponentu Page Fragment Box

(6)

6

Zastosowanie komponentu Page Fragment Box

(7)

7

(8)

8

Wstawienie komponentu Page Fragment Box z palety Layout: nadanie mu nazwy

Logofirmy i wybór Create New Page Fragment

(9)

9

(10)

10

(11)

11

Wstawienie drugiego komponentu Page Fragment Box z palety Layout: nadanie mu nazwy Nawigacja i wybór Create New Page Fragment (kolejne kroki jak przy

tworzeniu Logpfirmy.jspf)

(12)

12

(13)

13

Nadanie tytułu Firma 1 stronie głównej – w okienku Properties

należy wstawić do właściwości Title łańcuch Firma 1

(14)

14

Wstawienie komponentu StaticText na stronę Page1, poza

komponentami typu Fragment Box

(15)

15

Wywołanie z okna Properties komponentu staticText1 właściwości style i w edytorze kaskadowego arkusza stylu ustawienie Text Block w poziomie na center i w pionie na

middle

(16)

16

(17)

17

Wstawienie komponentu Image do fragmentu strony Logofirmy i nadanie w oknie Properties właściwości url za pomocą edytora (...) adresu wybranego pliku o formacie

graficznym

(18)

18

(19)

19

Wstawienie komponentu HyperLink do fragmentu strony Nawigacja i nadanie w oknie

Properties właściwości url za pomocą edytora (...) adresu strony Page1.

(20)

20

Wstawienie drugiej strony Nowosci.jsp.

(21)

21

(22)

22

(23)

23

Wstawienie komponentu HyperLink do fragmentu strony Nawigacja i nadanie w oknie Properties właściwości url za pomocą edytora (...) adresu strony Nowosci.jsp, która

została wstawiona jako druga strona podrzędna.

(24)

24

(25)

25

Strona startowa Page1.jsp.

(26)

26

Kopiowanie fragmentu Logofirmy ze strony Page1.jsp przez kopiowanie do notatnika

za pomocą znacznika div, dostępnego w oknie Navigator

(27)

27

Wstawianie do strony Nowosci.jsp fragmentu Logofirmy przez wklejenie z notatnika

(28)

28

Wstawiony do strony Nowosci.jsp fragmentu Logofirmy z notatnika

(29)

29

Kopiowanie ze strony Page1.jsp fragmentu Nawigacja - przez kopiowanie do notatnika

za pomocą znacznika div fragmentu Nawigacja w oknie Navigator

(30)

30

Wstawianie do strony Nowosci.jsp fragmentu Nawigacja z notatnika

(31)

31

Wstawiony fragment Nawigacja do strony Nowosci.jsp z notatnika

(32)

32

Wstawienie do drugiej strony Nowosci.jsp pola Static Text i nadanie mu napisu

Nowosci

(33)

33

Ustawienie nieaktywnego połączenia Strona główna dla strony Page1.jsp we

fragmencie Nawigacja

(34)

34

Ustawienie nieaktywnego połączenia Nowosci dla strony Nowosci.jsp we

fragmencie Nawigacja

(35)

35

Uruchomienie aplikacji - (Kliknij prawym klawiszem myszy w oknie Project na nazwę projektu, w ukazanym oknie uruchom kolejno Build Project, Deploy

Project, Run Project – można wywołać Run, wtedy zostaną uruchomione

automatycznie Build Project, Deploy Project

(36)

36