1 Architecting Web Applications using JSF & Struts ASSIGNMENT GUIDELINE

1

Architecting Web Applications using JSF & Struts

ASSIGNMENT GUIDELINE

Objectives

Assignment Guideline 1Assignment Guideline 2Assignment Guideline 3Assignment Guideline 4Assignment Guideline 5Assignment Guideline 6

2

Assignment Guideline 1

3

Application’s Name

View: -Shows all products in DB-Allows to add Product to Cart

Supported class: a Cart’s Item

Model: process and store Cart

Controller: dispatcher

View Cart with add more Products and Order function

Transfer store current cart request to order object in DB

Transfer OrderID request to show order object from DB

View order object details from DB

Assignment Guideline 1 (cont)

4

Assignment Guideline 1 (cont)

5

index.jsp (input View) “Add to Cart”: “add” action with form “View Cart”: “view” action “Show Order”: “show” action Load data from DB and present

as the right picture. cartObj.java (supported Object)

Properties: productID, productName, price, amount

Constructor with 3 parameters except amount (default with 1)

Define method equals to compare input Object with cartObj

Assignment Guideline 1 (cont)

6

cartBean.java (Model) Properties: customerID, customerName, contents (Vector data

type – use store added Products) No parameter constructor: initial Vector and generate random

customerID in [0, 999] The properties’ getter and setter The addProduct method: add product Item to cart (Notes: if

product is existed, it’s amount is increased automatically) The removeProduct method: remove product Item from cart

(Hint: should you productID as input parameter) The storeCart method: create order object in DB from the Cart

Create a new row in Order table (The customerID is a orderID field) Create new rows in Order details table relating with Cart’s data Update the Total field in Order table

Assignment Guideline 1 (cont)

7

view.jsp (display View) “Remove”: “remove” action “Add more Product”: “more” action “Order Products”: “order” action Present current Cart’s information

as the right picture. Hint: the “Remove” link should use

a URL-Rewriting technology to send input parameter to server.

Assignment Guideline 1 (cont)

8

order.jsp (input View) “Order”: “store” action with form “Add more Product”: “more” action “View cart”: “view” action Allow to input Customer Name

viewOrder.jsp (display View) Display date from DB as the

template “New shopping”: “more” action “Show order”: “show” action

show.jsp (input View) “Main page”: “more” action “View Order Details”: “detail”

action in form.

Assignment Guideline 1 (cont)

9

ControllerServlet.java (Controller) Initial HttpSession and get “cart” Object in session Get actions from client and implement actions

“add”: add product Item to cart and forward index.jsp page “view”: forward view.jsp page “more”: forward index.jsp page “order”: forward order.jsp page “remove”: remove product Item from cart and forward view.jsp page “show”: forward show.jsp page “detail”: forward viewOrder.jsp page “store”: set CustomerName value to cart, store cart to DB, forward

viewOrder.jsp, and remove cart from session Update “cart” state in session excepting show, store, and

detail action Execute and test the application.

Assignment Guideline 2

10

Application’s Name

Shows all books in DB. Link to searchBook.jsp

Form Bean

Form View: input control to get information to search

Struts Configuration File

Action class

Represent the Searching result

Assignment Guideline 2 (cont)

11

Assignment Guideline 2 (cont)

12

index.jsp “Search Book”: forward

searchBook.jsp (searchBook.do) searchBook.jsp

Input text “name” Radio control “type” Submit control Form with “displaySearch” action

FormBean: SearchBookForm.java Properties: name, type

Action class: SearchAction Set formBean’s properties to

request’s Attribute Forward “success”

Assignment Guideline 2 (cont)

13

display.jsp (input View) “Return main page”: action

“mainPage.do” Configure struts-config.xml

Define form-bean “SearchBookForm” mapping SearchBookForm.class

Mapping Action “displaySearch” with SearchAction

Define forward “searchBook” and “mainPage” in global-forwards

Assignment Guideline 3

14

Application’s Name

Get Book Information to search in DB

Process download

List Searching Result and Download button on each result

Struts Configuration File inside WEB-INF directory

Inputting reader’s information form

Inform success message after storing book information which is inputted by readers

Inform error by stored occurring

Action Form

Action

Assignment Guideline 3 (cont)

15

Assignment Guideline 3 (cont)

16

index.jsp “Search”: form with “search” action Book Name: input text “name”

FormBean: SearchActionForm.java Properties: name

Action class: SearchAction Find on DB Set “name” attribute to request If found, Forward “found” Otherwise, forward “notfound”

Assignment Guideline 3 (cont)

17

found.jsp List Searching Result “Download File”: form with

“download” action Book Name: hidden input text

“fileName” “Return main page”: “main.do”

FormBean: DownloadActionForm.java Properties: fileName

Action class: DownloadAction Set “fileName” attribute to request Forward “success”

Assignment Guideline 3 (cont)

18

download.jsp Download file from Server Hint: DB stores relative path Tip code

Assignment Guideline 3 (cont)

19

notfound.jsp “Send Information”: form with

“store” action input texts with “title”, “author”,

“publication”, “subject” Select control “rating” ([1, 5]) “Return main page”: “main.do”

FormBean: StoreActionForm.java Properties:same above controls name

Action class: StoreAction Insert information to DB If success, forward “success” Otherwise, forward “fail”

Assignment Guideline 3 (cont)

20

success.jsp and error.page “Return main page”: “main.do”

Assignment Guideline 4

21

Application’s Name

Struts-config.xml, validation.xml inside

Form View: -Shows all products in DB-Allows to add Product to Cart

Supported class: a Cart’s Item

Model: process and store Cart

Action with DynaActionForm

View Cart with add more Products and Order function

Transfer store current cart request to order object in DB

Transfer OrderID request to show order object from DB

View order object details from DB

Assignment Guideline 4 (cont)

22

Assignment Guideline 4 (cont)

23

index.jsp (input View) “Add to Cart”: “add” action with form “View Cart”: “view” action “Show Order”: “show” action Load data from DB into hidden text

“productID”, “productName”, “unit”, “price” and present as the right picture.

cartObj.java (supported Object) Properties: productID, productName,

productUnit, price, amount Constructor with 4 parameters except

amount (default with 1) Define method equals to compare input

Object with cartObj

Assignment Guideline 4 (cont)

24

cartBean.java (Model) Properties: customerID, contents (Vector data type – use store

added Products) No parameter constructor: initial Vector and generate random

customerID in [0, 99999] The properties’ getter and setter The addProduct method: add product Item to cart (Notes: if

product is existed, it’s amount is increased automatically) The removeProduct method: remove product Item from cart

(Hint: should you productID as input parameter) The storeCart method: create order object in DB from the Cart

Create a new row in Order table (The customerID is a orderID field) Create new rows in Order details table relating with Cart’s data Update the GiftTotal, Extra, OrderTotal field in Order table

Assignment Guideline 4 (cont)

25

FormBean: declare DynaActionForm with properties Properties: productID, productName, unit, price

Action class: AddAction Get “cart” attribute from Session (if null, create new) Create cartObj with retrieved values from FormBean Call addProduct into cart Update “cart” attribute into Session Forward “success”

Assignment Guideline 4 (cont)

26

view.jsp (display View) “Remove”: “remove” action “Add more Product”: “more” action “Order Products”: “order” action Present current Cart’s information as

the right picture. Hidden text “productID” in “remove”

form

FormBean: DynaActionForm with properties productID

Action: RemoveAction Get “cart” attribute from session Call remove(productID) with cart Update “cart” attribute into session Forward “success”

Assignment Guideline 4 (cont)

27

order.jsp (input View) “Order”: “store” action with form “Add more Product”: “more” action “View cart”: “view” action Input text “customerName”,“customerEmail”,

“customerAddress”, “creditCard” Select control “nDate” [1, 4]

FormBean: DynaValidatorForm with above properties. Action: StoreAction

Get “cart” attribute from Session Call store() with above properties Set “custID” attribute with customerID into request Remove “cart” attribute from Session Forward “success”

Assignment Guideline 4 (cont)

28

Define Validation Rule in orderForm properties in validation.xml

customerName: required customerID: required, email customerAddress: required,

minlength [10] creditCard: required, creditCard

Assignment Guideline 4 (cont)

29

viewOrder.jsp (display View) Display data from DB as the template “New shopping”: “more” action “Show order”: “show” action

show.jsp (input View) “Main page”: “more” action “View Order Details”: “detail” action in

form. Input text “custID”

FormBean: DynaActionForm with “custID” property

Action: ShowAction Set “custID” attribute into request Send forward “success”

Assignment Guideline 4 (cont)

30

Configure struts-config.xml with forward action show, order, more, and view

Run and Test program Demo of DynaActionForm which are not created ActionForm class

Assignment Guideline 5

31

Application’s Name

Error messages

Form Bean

JSF managed Bean: car Information

JSF Configuration File

Input rental Information

Confirm Information

Faces root pageList car pages

Supported class for Car

JSF managed Bean: car Information Collection

JSF managed Bean: rental Information

Supported class for Rental

Assignment Guideline 5 (cont)

32

Assignment Guideline 5 (cont)

33

index.jsp Forward to rental.jsp

rental.jsp JSF Form shows car Information Get car information from CarBean Transfer param carID on Rental link

Hint

Click Rental link, the rentalForm.jsp is show

This form should be used the dataTable component of JSF

Assignment Guideline 5 (cont)

34

JSF managed bean: carBean Car’s information: id, name, seatAmount,

status Supported Car’s information class

Load car’s information to collection data to view on dataTable

To transfer the parameter from the rental.jsp to rentalForm.jsp, actually the parameter is transferred to bean (Rental Bean)

The code hint support to transfer the parameter is JSF supported through faces-config.xml as

Assignment Guideline 5 (cont)

35

rentalForm.jsp JSF Form with JSF controls Confirm to show information in the

confirm.jsp Cancel to go the rental.jsp Hint: in this form, the hidden form field is

applied

JSF managed bean: rentalBean Information: custName, custAddress,

custYear, custPhone, rentalType, carID Checking constraint with Name (at least 5

chars), Address (at least 10 chars), Phone (number and at least 8 digits)

Process data Temp in session Process storing data to DB in confirm.jsp and

set status to not available in Car table rentalDB is a supported class

Support store rental information to session

Assignment Guideline 5 (cont)

36

fail.jsp Show message as figure

confirm.jsp JSF Form shows rental Information Submit to store all information into

DB Go Back to rentalForm.jsp/

rental.jsp

Assignment Guideline 6

37

Assignment Guideline 6 (cont)

38

Assignment Guideline 6 (cont)

Assignment Guideline 6 (cont)

Assignment Guideline 6 (cont)

Click View Schedule button

Assignment Guideline 6 (cont)

Click Accept button

Assignment Guideline 6 (cont)

43

Design the application forms as

Label (Basic)

Label (Basic)

TextField (Basic) with required attribute true

Button (Basic), the reset button is create with reset attribute set true (checked)

Message (Basic), constraint order with username and password

Assignment Guideline 6 (cont)

44

Design the application forms as

Label (Basic)

Static text bound to username of Login Bean

Table (Basic)

Calendar (Basic)

Message (Basic)

Button (Basic)

Text Field (Basic)

Assignment Guideline 6 (cont)

The control same as the previous slide

Assignment Guideline 6 (cont)

Design the application forms as

HyperLink (Basic) with url attribute set to login.jsp

Label (Basic)

Navigation page as

Assignment Guideline 6 (cont)

Design the DB as

Assignment Guideline 6 (cont)

Generate the LoginBean with session scope as

public class LoginBean extends AbstractSessionBean {

private String username;

private boolean roles;//true is manage, false is employee

private String tmpUser="";

Building the get/set method for properties

}

Assignment Guideline 6 (cont)

In login.jsp page, generate the action for login button aspublic String btLogin_action () {

Connect DB

String strSQL = "Select * from JSF_Account where username=? and password=?";

stm = con.prepareStatement (strSQL);

stm.setString (1, uname);

stm.setString (2, pword);

ResultSet rs = stm.executeQuery ();

if(rs.next ()){

status = "manager";

LoginBean tmp = getLoginBean ();

tmp.setUsername (rs.getString (1));

boolean roles = rs.getBoolean (3);

tmp.setRoles (roles);

if(!roles){status = "employee";}

}

}

Assignment Guideline 6 (cont)

Create DataSource in Netbeans to connect DB On tab Runtime on NetBeans, choose Databases, choose Drivers,

click “New Driver…”

Click Add button to choose the lib jar file

Click Find Button or choose the correspondent Drivers

Naming the Name of Driver

Click Ok Button the New Drivers is add Drivers Item

Assignment Guideline 6 (cont)

Create DataSource in Netbeans to connect DB (cont) Right click on the corresponding Driver, click “Connect Using …”

Typing connection String to connect DB

Typing username and password that connect DB

Click Ok button the Datasource is automatically created

Assignment Guideline 6 (cont)

Connect DataSource to DB Right click the corresponding DataSource, Click Connect, Fill username and password Notes: if the Datasource is connected the above step omited

Connect table control with Datasource Choose the corresponding connected Datasource, choose the

corresponding table, then drag and drop to the title of table control The DataProvider and RowSet is automatically is created. Notes: If

DataProvider is existed, the Netbeans show the Dialog presented to choose one

Assignment Guideline 6 (cont)

On the refresh page or isPostBack properties of DotNet, the event is activated as prerender method

getLoginBean ().getJsf_scheduleRowSet ().setObject (1, getLoginBean ().getUsername ());

jsf_scheduleDataProvider.refresh ();

getLoginBean ().getJsf_leavesRowSet ().setObject (1, getLoginBean ().getUsername ());

jsf_leavesDataProvider.refresh ();

Assignment Guideline 6 (cont) Add the parameter to DataProvider Choose the corresponding RowSet, double click on it On the SQL screen, add the parameter with the “?” characters in the Where clause. Or click right mouse the field and choose Add Query

Criteria … Choose the parameter, then click Ok Coding all the button in pages