InternetInternet EngineeringEngineering

Tomasz BabczyTomasz Babczyńński, ski, ZofiaZofia KruczkiewiczKruczkiewiczTomasz KubikTomasz Kubik

InformationInformation systems systems modellingmodelling–– UML and UML and service description languagesservice description languagesLaboratory 3Laboratory 3

Applicat ionBean1 Application Service

Sun pattern

SessionBean1

Session Facade

Sun pattern

JSF Page JSF Page JSF Page

Client1 Client2 C lient3

Data Base

Library Directory

Object Model Gof Patterns:

Facade: TFacade Factory: TFactory Flyweight: TTitle_book

Integration Layer (EntityManager,…) TopLink Gof and Sun Patterns: Domain Store Transfer Object

Facade (XXXController) Factory

SessionBean1

Session Facade

Sun pattern

SessionBean1

Session Facade

Sun pattern

Resource

Tier

Integration

Tier

Business

Tier

Presentation

Tier

Client

Tier

Example of the architecture of web application based on

synchronization data by application

Architecture of web application based on

synchronization data by application

• many clients of the Client Tier as the www pages

• many JSF pages of the Presentation Tier – each clienthas own pages

• common Application Service Component of theBusiness Tier (ApplicationBean1) as the remotefacade of the Business Service Subtier (Java Application project) based on the POJO objects –each client uses the common ApplicationBean1

Installation the Visual Web JSF

• Download the Netbeans 6.7.1. http://netbeans.org/downloads/6.7.1/index.html - version all

Note: During the customization step set the installation option of the Apache Tomcat 6.0.18 server

• Install the UML plugin:

– Chose the Tools from the Menu Bar

– Click the Plugins item from the pop menu

– Click the Available Plugins tab

– Set the check box of the UML item

– Click the Install button for installing the UML plugin

– Execute the final tasks of the installing process

You can see the result of the plugin installation at the Installed tab

– Click the Installed tab

– Set the Show details check box - the shown list now includes the UML item

• Install the Visual JSF plugin

– Chose the Tools from the Menu Bar

– Click the Plugins item from the pop menu

– Click the Available Plugins tab

– Set the check boxes of the Visual JSF and VisualJSF Runtime items

– Click the Install button for installing the Visual JSF plugins

– Execute the final tasks of the installing process

You can see the result of the plugin installation at the Installed tab

– Click the Installed tab

– Set the Show details check box - the shown list now includes the Visual JSF items

Steps for building the presentation tier of a multitier web application

1. Create the LibraryWeb1 copy of Java Web project made during the second laboratory

2. Create new Visual Web JSF pages

3. Adding Fragments to a Second Page

4. Add Binding Attributies – for all new hyperlinks of the Menu Page Fragment

5. Disabling the Link for the Current Page

6. An implementation of the web page of the Add title in DataBase service

7. An implementation of the web page of the Add titles in DataBase s service

8. An implementation of the web page of the Add books in DataBase service

9. Create the Library1 copy of Java Application project, made during the first laboratory

10. Linking the Projects together: LibraryWeb1 and Library1 (see: INEA_102_Laboratory2.pdf)

1.Create the libraryWeb1 copy of Java Web project made during the second

laboratory (see: INEA_102_laboratory2 instruction)

To copy a project:

• Right-click the project's node

in the Projects window and

choose command:

– Copy Project

Notes:

• When copying a project to a

new location, the new folder

must already exist on the

computer. You can create the

folder with the Browse button.

2. Create new Visual Web JSF pagesYou will design the three new pages – it is the other way to add a new file to project than in ten INEA_102_Laboratyory2

instruction.

2.1. To create a new file type:

Right-click a module project and choose New > File Type.

In the File Recognition page, you have to select the Visual Web JSF Page.. item

2.2. Name the new page DataBaseTitles and click Finish.

2.3. After creating

DataBaseTitles, DataBaseBooks

and DataBaseTitle Visual Web

JSF pages

3. Adding Fragments to a Second Page3.1. Click the Page1 tab. You will copy the Page Fragment component from this page to the DatabasesTitles page.

3.2. From the Page 1 - Navigator window, hold down the Control key and select both div elements. Be sure you select the

div elements themselves and not just their jsp:directive.include child elements.

3.3. Right-click the selection and choose Copy from the pop-up menu.

3.4. Click the DataBaseTitles tab.

3.5. In the Navigator window, expand the DataBaseTitles> page1 > html1 > body1 node. Right-click form1 and select Paste.

3.6. The components you copied from Page1.jsp appear in the Visual Designer.

3.7. Repeat these activities for the DataBaseBooks and DataBaseTitle pages

3.8. Adding and setting the url Properties of the hyperlink components of Menu Page Fragment Component

3.8.1. Open the Menu fragment by double-clicking the component in the Visual Designer.

3.8.2. From the Basic section of the Palette, drag a Hyperlink component and drop it in the page fragment. Set the text of

the Hyperlink to Add title in DataBase.

3.8.3. In the Properties window of the hyperlink1, set the url property to /faces/DataBaseTitle.jsp.

3.8.4. Repeat two times these steps for inserting and configuring hyperlinks into the page Menu to DataBaseTitles.jsp and

DataBaseTitle.jsp pages.

3.9. The figure shows links after setttings their url properties

3.10. Click the Run Main Project button to run the application.

Verify that new links work correctly.

4. Add Binding Attributies – for all new hyperlinks of the Menu Page Fragment(If we plan to scrip the component in Java code we must manually add a binding attribute to the component. To do so, right-

click the component and choose Add Binding Attribute.)

5. Disabling the Link for the Current Page5.1. Add code to disable the Add title in DataBase link on the DataBaseTitle page -add the following code to the prerender

method (shown in the figure below)

5.2. Right-click in the Java Editor and choose Fix Imports. The IDE adds the following import statement:

import com.sun.webui.jsf.component.Hyperlink;

5.3. Repeat two times these steps for disabling hyperlinks on the DataBaseTitles.jsp and DataBaseBooks.jsp pages.

5.4. Click the Run Main Project button to run the application.

5.5. Verify that links work correctly – run the project.

Note: You must clean and build project after changes in code and therefore you must to restart the GlassFish v2.1

server. In the Services window, right-click the Sun Java System Application Server/GlassFish node and choose Start /

Stop Server. Alternatively, click the Start the Server button in the server log tab in the Output window.

6. An implementation of the web page of the Add title in DataBase service.You define the content of the DataBaseTitle page shown in figure below

FormTitle

6.1. From the Basic section of the Palette, drag Button component and drop to the right side of the DataBaseTitle page.

6.2. Add a binding attribute to the button component - hold down the Control key and select the Button component. Right-click the

selection and choose Add Binding Attribute from the pop-up menu.

6.3.Set the text property of the Button component to addtitle_DataBase. Next, set the id property of the Button component to

addtitle_database

6.4. From the Basic section of the Palette, drag Message Group component and drop to the right on the DataBaseTitle page.

6.5. Copy the div component with FormTitle.jspf subpage from the Titles page and paste it on the right of the Menu Page Fragment

Box component (see p.3).

6.6 . Now you create the new TitleDataBase Page Fragment component (see p.2 of the laboratory 2 instruction).

6.6. Next you define the content of the TitlesDataBase fragment as shown in the figure. Any changes you make to a fragment

must be made in the fragment itself, and not in the page. Open the TitleDataBase fragment by double-clicking the component in

the Visual Designer.

6.7. The white background shows the size of the page fragment. In the Properties window, set the Width property to 600px and

the Height property to 250px (default size: Width property is 400px and the Height prop property is 200px)

6.8. From the Basic of the Palette, drag the Table component as in the figure, shown below.

6.9. Set the text property of the Table component to Titles in DataBase

6.10. Set the paginateButton property of the Table component by selecting its checkbox If selected, displays table pagination

controls that enable users to change which page is displayed. The controls include an input field for specifying the page number,

a Go button to go to the specified page, and buttons for going to the first, last, previous, and next page.

7. An implementation of the web page of the Add titles to Database service.You define the content of the DataBaseTitles page shown in figure below

TitlesDataBase

7.1. From the Basic section of the Palette, drag Button component to the rigth side of the DataBaseTitles page.

7.2. Add a binding attribute to the button component - hold down the Control key and select the Button

component. Right-click the selection and choose Add Binding Attribute from the pop-up menu.

7.3.Set the text property of the Button component to addtitles_DataBase. Next, set the id property of Button

component to addtitles_database

7.4. From the Basic section of the Palette, drag Message Group component and drop to the right on the

DataBaseTitle page.

7.5. Copy the div component with TitlesDataBase.jspf subpage from the DataBaseTitle page and paste it on the

right of the Menu Page Fragment Box component (see p.3).

8. An implementation of the web page of the Add books to Database service. You define the content of the DataBaseBooks page shown in figure below

8.1. From the Basic section of the Palette, drag Button component to the right side of the DataBaseBooks page.

8.2. Add a binding attribute to the Button component - hold down the Control key and select the Button component. Right-click

the selection and choose Add Binding Attribute from the pop-up menu.

8.3.Set the text property of the Button component to addbooks_DataBase. Next, set the id property of Button component to

addbooks_database.

8.4. From the Basic section of the Palette, drag Message Group component and drop to the right on the DataBaseTitle page.

8.5. Now you create the new BooksDataBase Page Fragment component (see p.2 of the laboratory 2 instruction).

8.6 Next you define the content of the BooksDataBase fragment as shown in the figure. Any changes you make to a fragment

must be made in the fragment itself, and not in the page. Open the TitleDataBase fragment by double-clicking the component in

the Visual Designer.

8.7. The white background shows the size of the page fragment. In the Properties window, set the Width property to 600px and

the Height property to 250px (default size: Width property is 400px and the Height prop property is 200px)

8.8. From the Basic of the Palette, drag the Table component as in the figure shown below.

8.9. Set the text property of the Table component to Books in DataBase

8.10. Set the paginateButton property of the Table component by selecting its checkbox. If selected, displays table pagination

controls that enable users to change which page is displayed. The controls include an input field for specifying the page number,

a Go button to go to the specified page, and buttons for going to the first, last, previous, and next page.

9. Create the Library1 copy of Java Application project, made during the first

laboratory (INEA_102_laboratory1 instruction)

To copy a project:

Right-click the project's node in the Projects

window and choose command:

Copy Project

Notes:

When copying a project to a new location, the

new folder must already exist on the

computer. You can create the folder with the

Browse button.

10. Linking the

Projects together:

LibraryWeb1 and

Library1 (see:

INEA_102_Laboratory

1.pdf)

10.1. In the Projects window,

right Click the LibraryWeb1

project node and select

Properties from its context menu.

10.2. In the Project Properties dialog, click the Libraries node in the Categories section on the left. Then, select the

BT_Library1-dist/BT_Library1.jar item in the Compile-time Libraries Window, click Remove for removing the old library.

10.3. Then, click Add Project.

10.4. In the Add

Project window,

browse to the location

with the Library1

project and select it.

10.5. Then click Add

Project JAR Files.

Next, you can see the

new Library1 –

dist/Library1.jar item in

the Compile-time

Libraries Window

10.6. Verify that links work correctly – run the project. Next you click the Add title in the DataBase link – you can see

the view of the DataBaseTitle page.

10.7. Next you click the Add

titles in the DataBase link –

you can see the view of the

DataBaseTitles page.

10.8. Next you click the Add

books in DataBase link –

you can see the view of the

DataBaseBooks page.