Software Developments in JSF

A brief Introduction

I will guide through as how to make a JSF project with default features of Netbeans and gradually do the fine tuning.

A step by step process as how to make a Shopping Cart project in Netbeans 8.0 using Jsf2.2, Primefaces 5.2, MySql 5.2 and Glassfish Server.

I will start with the introduction and features of the modules and will gradually develop each and every component. In the subsequent slides/videos I will fine-tune the project to make it more presentable.

Here the idea is to start the project with minimum coding by using the default features of Netbeans for faster application development. Do the amendments in tables where ever required and regenerate the pages. Get ready with a working prototype and show it to customers and developers for integration and reviews.

Next step is to identify the issues, remedies taken and enhancements required to complete the application for deployment.

This process shown can be applied for any application development, here I have taken a shopping cart project to explain the development process with minimum coding, minimize development errors and debugging and for better understanding.

To start with I will explain the features of the module.

     1. The Home Page used for advertisements.

2.       Template used.

a.       The Header Layout options Like My Account, Feedback, My Cart  and Tracking.

b.      The Left Layout unit showing filter criteria for Shopping Cart.

c.       The Right Layout unit to show all offers.

d.      Footer to show details like About us, contact us, site map and FAQ.

3.       The Login Page that will define the role after the user and password is validated.

4.       Roles defined are as Customer, Administrator and Supplier.

5.       Process to buy an Item.

a.       Items are entered by administrator which will be shown on customer page.

b.      Supplier will enter the items with value that will be purchased by customer.

c.       Customer choose an item to buy.

d.      Items are added to customer cart.

e.      On Payments the delivery is scheduled based on predefined schedule activities.

6.       Logout as user and Quit Option.

a.       This option will invalidate the user and session variables are set to null.

Let us first understand a basic design for the software to be developed.

Platform used.

1. Netbeans 8.0 as integrated development environment (IDE)
2. JavaServerFace 2.2
3. Primefaces 5.2
4. MySql 5.2
5. Glassfish Server.

The Home Page

The Home page have images. First sections is for advertisement of products and are switchable. The next section is scrollable and clickable. On Click on scroll able image it will move to items page for selection of items.

The Template

The Template is created with following layout units and is linked to each page. The Template is the most important part as it is linked with all the pages. The template has five sections – top, bottom, left, right and centre. All pages are displayed at centre section. They are briefly defined below.

Part	Layout Units	Position	Description
1 / 4	North	Header	Header  Panel with Module Name  and Option Buttons.
2  /  4	North	Header	Create Generalized MenuBar based on Role.
3  /  4	West	Left	Add Page to select  Categories.
3  /  4	East	Right	Add Page for Offers.
4  /  4	South	Footer	Footer  Panel with dialog for  About us, Site Map, Contact Us and FAQ.

Session Variables
The session variables like session role, session category used to filter items, session user and session items code used to filter items. These session variable are linked to template variables to show the active session variable or invalidated.

Define Roles
Based on user and password entered and validated at login dialog, the role is associated to session role variable. And the menu option will change based on role. There are three roles as customer, administrator and supplier.

This role will work as follows.

For Customer role following activities can be performed.

1. The items page options is provided and displayed.

2. This option will enable the customer to buy an item.

3. Add to cart and view cart details.

4. Track orders based on predefined schedule activities for delivery after payments.

For Administration role following activities can be performed.
1. Perform administration operation like edit generalized menu.

2. Add users for first time.

3. Add/Modify offers details

4. Add/Modify payment options

5. Define schedule activities for delivery with expected date of time taken for each activity.

6. Add/Modify delivery by pin code options for items.

For supplier role following activities can be performed.

1. Add items with price to be sold and displayed to customer.

2. Supplier details.

The Login Page

The Login Page will have user name and password. Once validated role is set as session role variable and linked to template variable and displayed. New user and forgot user option is provided. These options have data for hints and answer for hints to validate the user and all user details.

Menu Bar

The generalized menu options show the menu name, sub menu name based on role. The menu options are defined in database and are editable by administrator. Same gets reflected in menu when template is loaded. The pages can be added to system and role can be customized. A new page can be added with page reference as path and page name. It can be associated to role to display for specific role.

Database Creation More Details..

Database is created with script dbcreate.txt and master data is inserted through script dbinsert.txt. Mysql is loaded with mysql command as c:>mysql –u root –p . Once in mysql loaded password is entered as root.

One can check for tables with following commands.

1. Use source command to load the script.

2. Use Cart – To change database to cart.

3. Show tables -- To show list of tables created.

4. Describe usernm – show the table structure user table usernm.


Glassfish Server Creation More Details..

Following steps are involved.

1. Start the glassfish server from netbeans.

2. Load the glassfish server administration server as http://localhost:4848.

3. JDBC connection pools

4. JDBC resource

Establish the connection in Netbeans.
1. Services->databases->new connection

2. Jdbc: mysql://localhost:3306/cart where 3306 is the port and cart is the database name.

3. Once can check the tables for database cart in netbeans on click on above link in netbeans (point 2).

Netbeans project creation.

1. Once the tables are created, one can start creating new project in netbeans.

2. Create New Project->Java Web->Web Application.

3. Perform the following steps to create default pages in netbeans.

4. During the new application creation framework select is JavaServerFaces and Components as primefaces.

Sl	Steps	Description
1	Persistence->Entity Classes from Database.	Create Model , Create classes from tables.
2.	Persistence->JSF pages from entity Classes.	Create default  jsf pages from entity classes.
3.	Creation of Database source	Create JNDI and New Database Connection as CART.
4	Create Image Directory	Store all Images in this directory

The issues faced while software development and its remedy.
What issues one normally come across and should be ready with remedy for large scale application and integrated application.

A Few could be highlighted as

	Issues	Remedy
1.	Application is not saving the data	In such application the table don’t have id field, which could be possible cause of data not saved. Id field is not properly handled such as auto increment or unique is not associated with id field.
		A JavaScript function has error and is neither saving nor showing error. Need to debug JavaScript function.
		/Bundle property not specified with respective message.
2.	Application not responding for long.	Possible reason could be recursive use of template. Template is called with template.

How to debug an application. Few are steps are highlighted here
Possible debugging steps.

1. Start a Debugger as right of file and start ‘ Debug File’ in Netbeans. Use function keys F5,F7,F8. For line by line execution of code.

2. Set Breakpoint for debugger.

3. For debugging beans, use statement as Debug.println(,) and check the message in log. Import required library for debug.

4. Check for the entire error message at first line of glassfish server log in netbeans. Output->Glassfishserver windows. Possible error could be null pointer error at respective field.

5. Check for the entire error message on browser for web page error like end tag not specified for tag at line/columns.

6. Use try catch to trap an error where every required.

Best Practice for software developments in Netbeans. Few practices are highlighted here...

1. Have an error page and set a flag to show customer errors or Development errors. In error page have session variable, if set for development then show development errors or if set for customer show errors for customers with possible remedy. That is trap an error string and look for remedy in database( created by you in database) and show the possible remedy. Redirect all error to this page.

2. Leave all default pages and beans intact that is created by netbeans. Do not change them. Better copy and create new page and do amendments in xhtml page. For beans, create a common bean for new methods. This helps for faster development and reduces error.

3. In case the amendments are done and are not working properly or repeated throwing errors and want to go back to old code. Right click a file and go to History and check for changes done or revert back the code.

Short keys used in Netbeans
1. Alt-Insert : Generate code like getter and setters

2. Ctrl-Shift-I: Fix all class imports

3. Alt-Shift-F : Format selection

4. Ctrl-/ : Add/remove comment lines

5. Ctrl F : Find a string

6. Ctrl H : Find and replace a string.

Client Side Validation
Using Primefaces along with ajax is a better option. Add JavaScript functions which are called from Primefaces.

Change Look and Feel of application with cascading style sheet after the application is at completion stage.

Build a library for standard library function of JavaScript and cascading style sheet which can be used across all applications. This is for faster development.