we shall be using images in this section so as to encourage clarity.

These are the steps we will be following in this section:

- Creating the Database
- Creating the Web Application Project
- Generating the Entity Classes from the Database
- Generating JSF Pages From Entity Classes

- Creating Database:

We already have a ready made postgres database named postgresDB, in case you have not created yours. Refer to the previous sections.

- Creating Web Application Project:

Choose File > New Project from the main menu.
Select Web Application from the Java Web category. Click Next.
Type InventoryBeer-JSF for the project name and set the project location. Click Next.
Set the server to wildfly application server, leave the contextual path as default and set the Java EE Version to Java EE 6 Web or Java EE 7 Web. Click Next.
In the Frameworks panel, select the JavaServer Faces option. Click Finish.
When you click Finish, the IDE generates the web application project and opens index.xhtml in the editor.

- Generating the Entity Classes from the Database

-After connecting to a database in the IDE, you can use the Entity Classes from Database wizard to quickly generate entity classes based on the tables in the database. The IDE can generate entity classes for each table that you select, and can also generate any necessary entity classes for related tables.

-In the Projects window, right-click the InventoryBeer-JSF project node, and choose New > Entity Classes from Database. (If this option is not listed, choose Other. Then, in the File wizard, select the Persistence category, then Entity Classes from Database.)

-For datasource select the jdbc:postgresl://localhost:5432/postgresdb connection as the Database source from the drop down menu.

-The tables in the postgresdb database appear in the Available Tables listbox.

-Highlight the beers table, Click the Add button to select the table. Click Next.

-Type com.entity as the Package name.

-Confirm that the checkboxes to generate named queries and create a persistence unit are selected. Click Finish.
-
When you click Finish, the IDE generates the entity class in the com.entity package of the project.

- Generating JSF Pages From Entity Classes

Now that the entity class have been created, we can now create the web interface for displaying and modifying the data. You will use the JSF Pages from Entity Classes wizard to generate JavaServer Faces pages. The code generated by the wizard is based on persistence annotations contained in the entity classes.

For each entity class the wizard generates the following files.
-a stateless session bean that extends AbstractFacade.java
-a JSF session-scoped, managed bean
-a directory containing four Facelets files for CRUD capabilities (Create.xhtml, Edit.xhtml, List.xhtml, and View.xhtml)

The wizard also generates the following files.
-the AbstractFacade.java class that contains the business logic for creation, retrieval, modification and removal of entity instances utility classes used by the JSF managed beans (JsfUtil, PaginationHelper)
-a properties bundle for localized messages, and a corresponding entry in the project's Faces configuration file (A faces-config.xml file is created if one does not already exist.)
-auxiliary web files, including a default stylesheet for rendered components, and a Facelets template file

To generate the JSF pages:
In the Projects window, right-click the project node and choose New > JSF Pages from Entity Classes to open the wizard. (If this option is not listed, choose Other. Then, in the File wizard, select the JavaServer Faces category, then JSF Pages from Entity Classes.)

-The Available Entity Classes box lists the entity class contained in the project.
-Click Add All to move all the classes to the Selected Entity Classes box.

Click Next.
In Step 3 of the wizard, Generate JSF Pages and Classes, type com.session for the JPA Session Bean Package.

Type jsf for the JSF Classes Package.
Enter 'resources/Bundle' into the Localization Bundle Name field. This will generate a package named resources which the Bundle.properties file will reside in. (If you leave this blank, the properties bundle will be created in the project's default package.)

TIP: To let the IDE better accommodate your project conventions, you can customize any files generated by the wizard. Click the Customize Template link to modify the file templates used by the wizard.

In general, you can access and make changes to all templates maintained by the IDE using the Template Manager (Tools > Templates).
Click Finish.

The IDE generates the stateless session beans in the com.session package, and the JSF session-scoped, managed beans in the jsf package. Each stateless session bean handles the operations for the corresponding entity class, including creating, editing, and destroying instances of the entity class via the Java Persistence API. Each JSF managed bean implements the javax.faces.convert.Converter interface and performs the work of converting instances of the corresponding entity class to String objects and vice versa.
If you expand the Web Pages node, you can see that the IDE generated a folder for each of the entity classes. Each folder contains the files Create.xhtml, Edit.xhtml, List.xhtml and View.xhtml. The IDE also modified the index.xhtml file by inserting links to each of the List.xhtml pages.

Each JSF managed bean is specific to the four corresponding Facelets files and includes code that invokes methods in the appropriate session bean.
Expand the resources folder node to locate the default jsfcrud.css stylesheet that was generated by the wizard. If you open the application welcome page (index.xhtml) or the Facelets template file (template.xhtml) in the editor, you will see that it contains a reference to the stylesheet.

<h:outputStylesheet name="css/jsfcrud.css"/>

The Facelets template file is used by each of the four Facelets files for each entity class.

If you expand the Source Packages node you can see the session beans, JSF managed beans, utility classes, and properties bundle that the wizard generated.

The wizard also generated a Faces Configuration file (faces-config.xml) in order to register the location of the properties bundle. If you expand the Configuration Files node and open faces-config.xml in the XML editor, you can see that the following entry is included.

<application>
<resource-bundle>
<base-name>/resources/Bundle</base-name>
<var>bundle</var>
</resource-bundle>
</application>

Also, if you expand the new resources package, you'll find the Bundle.properties file that contains messages for the client's default language. The messages have been derived from the entity class properties.

TIP: To add a new property bundle, right-click the Bundle.properties file and choose Customize. The Customizer dialog enables you to add new locales to your application.

-Create a new folder in InventoryBeer-JSF project folder named setup, add the jboss datasource file (jboss-ds.xml) which we have been using in the previous examples.
-Add jboss-client.jar to the project's library and finally click on run.

The server will generate the url for the web application: http://localhost:8050/InventoryBeer-JSF

-Netbeans IDE took away alot of stress and hassles here.

-Remember, the database generates id field automatically so endeavor to leave the field blank to avoid throwing exceptions.

-open create.xhmtl, change the id field: required="false"


the SOURCE CODE is hosted on Github

if you love fancy UI, you can edit the css/jsfcrud.css to suit your taste.

In order to digest all we have done, I will start a new project:

- The application will simulate a banking system, all the operations performed in the bank which I know of (deposit, withdraw, balance, transfer, update account information, create new account, email notification etc).

It will be divided into three units:
- Customer Care Unit
- teller unit
- ATM unit

- Customer Care Unit:

In this unit, the following operations will be performed:

- create new accounts for customers
- update customer's account
- delete customer's acoount
- retrieve customer's account details and account balance.
- send an email notification to the customer on each operation.

I will be proposing the following business methods for this unit:
- createNewAcct (customer)
- deleteAcct (account number)
- updateAcct (account number, customer)
- acctDetails (account number)

if you have any other business method in mind, please let me know.

-Teller Unit

In this unit, the bank staff performs the necessary operations:
-credit/deposit money to customer's account
-debit/withdraw from customer's account
-transfer money between customers

I will be proposing the following business methods for this unit:
- depositMoney (account number, amount)
- withdrawMoney (account number, amount)
- transferMoney (sender's account number, receiver's account number, amount)

if you have any other business method in mind, please let me know.

- ATM unit

In this unit, the customer has control over it. operations are authenticated with unique pins:
-withdrawMoney (pin, amount)
-transferMoney (pin, receiver's account number, amount)
-changePIN (old pin, new pin)
-viewBalance (pin)

if you have any other business method in mind, please let me know.

other proposed business methods:

-generateBVN
the generated BVN will be ten digits (123567890)

-generateAcctNumber
the generated account number will be six digits and four characters. The last two characters will MA if male and FE if female.
123456GKMA - male
123456CGFE - female

-saveImage

-returnImage

-sendEmail

I will be uploading the source code for this project at GITHUB.

-Create new database and table named Customer and data respectively.
-create the following columns from the image below (id = int, balance = int, dod = date, image = byte others are varchar: BVN, acctnum and pin are unique)
-create a sequence for the database table (refer to the tutorial above on how to do that)
-create a datasource in the wildfly server from the database (refer to the tutorial above on how to do that).

From Netbeans create new project wizard, create a new Enterprise Application. Netbeans will automatically create an EJB Module (JAR) and web application module (WAR) alongside the new project.

Also create another java application project for the client application.

use Create Entity from database, don't forget to add the necessary libraries.



See the image below for the projects structure.

Note: The application sends out an email after persisting. if the email is not pushed out or throws an exception while sending the email, all the previous transactions will be rolled back (still working on a way around that).

the first commit i made to github is only the register new Account UI, others are on the way. I am working on a more fanciful UI with javafx.

continued:

Still on the Customer Care unit, I added another business method to it. The method will find customer account using the account number either for updating, deleting or performing transactions.

I had to employ javafx for the UI design, the design is still in its virgin form without beautification.

The UI is divided into three panes:
- search pane
- Preview pane
- Update pane

- if the customer care staff inputs the correct account number in the search box, the customer details will up in the preview in order to confirm it is the correct account.

- the update pane will take inputs and update the customer's record. The updated record can still be previewed using the search and preview pane.

ISSUES:

-the image view is still showing blank, i think the issue is from how i stored the image in the database. it will be reviewed later.

-leaving the image textfield blank will cause the application to throw a exception.

Kudos bro. You've done a lot. No difference if I use Glassfish server instead of Wildfly, right?

aminOvansa:
Kudos bro. You've done a lot. No difference if I use Glassfish server instead of Wildfly, right?

wildfly server configuration for JNDI Name bindings are quite different from that glassfish. so you have to take notice of that.

I have added another UI for deleting customer's account. The UI has three panes as usual:


- search pane:
This Pane consist of a textfield and a button. the textfield takes in the customer's account number so as to find the particular customer's record from the database. Clicking the search button calls the search business method of the bean class.

- Preview pane:
This pane contains the information returned from the search, the staff authenticates if it is the right account to be deleted.

- Delete pane:
This pane consists of a button and a label to notify the user about the success of the operation. This button calls the delete business method of the bean class.


Issues:
-The imageView is still blank and it will be resolved soon. I have to change the image column data type in the database to varchar so as to store the file path instead of storing the images as bytea data type.
-Converting date from javafx datepicker to java.util.Date is still not all that soon.

The recent changes are still availablehere

I have added another UI for handling depositing and view customer account Details.

- To view account details, I had to reuse the codes inside the search method, the only difference is that it now retrieves account balance

- The deposit UI just contains a search button to find the entity (customer record), the deposit amount textfield and other controls to relay the necessary information.

Issues:
- the imageview is still blank, that will be resolved soon.
- I had to change the data type of the balance column from int to double.

the latest commit can be found here

I added the withdraw UI to the project today, I tried shortening the code by writing an email sending library although i did test the library and it work well with an example but it keeps throwing a ClassNotFoundException. If you know how to retify that, I am open to that help.
Although, I found a way of sending out the email by creating a helper class.

The deposit UI consist of a search textfield and the search button. The button on clicked finds the entity (customer record) where the money will be debited from. After the transactions, the entity is updated through the entity manager merge method.
Necessary validations were also put in place to avoid using withdrawing invalid amounts as shown by the image below.
The latest commit to this project can be found HERE.

The EmailSender class is called to send out Email Alert to the customer concerning the debited money. What I like about this class is that with only five lines of codes, you can send out the email. The github repository for this email sender library is HERE. i also upload an example to test run it. It can only send plain text for now. I will upload the maven build version tomorrow.

I will have to delete the sendEmail business method in the bean class.

I just added the transfer UI this afternoon to the project:

How it works:
when the user inputs the customer's account number in the search textfield, the search business method is called from the bean class which is retrieved during the context lookup and two parameters (an instance of the Customer Entity and account number from the search textfield).

The search business method uses the createnamedquery from the entitymanager class to create a query using the acctnum column and the String value of the account number from the search textfield as parameters of the setparameter of the Query Class.

The search returns a Customer Entity class, and in this case only the Sender's account balance is retrieved from Customer Entity Class.

The transfer amount is deducted from sender's account number and added to the reciever's account balance (Another search is performed to find the record for the reciever where the email, account balance and account name is retrieved.

Merge method of the entitymanager class is called to update each customer records respectively or accordingly. Email alert is sent out to each customer.

Check the git repository for the updated source code of this project

more images

I just finished the UI for the ATM side of the work.

The front or first pane is the dashboard that contains buttons (navigates to other panes or UI). Withdraw Pane, transfer pane and change pin pane can be accessed from the dashboard pane.

The dashboard on coming up retrieves and shows the number of customers or clients the bank have by calling the getAllCustomer business method which returns the size of the list of customers. I had to run that on a separate thread to encourage responsiveness and fluidity.
The ATM pane makes use of the pin instead of account number for retrieving customer records.

The javafx UI is really nice, I think i have to dump java swing.

Clicking on the Dasboard's withdraw button opens the Withdraw Pane or UI.

Pin is used to search for Entity (Customer's record), the withdraw amount is passed as a parameter to the withdraw business method of the bean (i used the concept of method overload so as not to use the same withdraw method from the teller unit).

the withdraw business finds the entity through the entity manager business, returns the balance, deducts the amount from the balance and then merges or updates the entity with the new balance.

I said earlier about the problems i accounted whenever the emails failed to send either owing to network issues. the problem was solved by sending the email through a separate thread.

Clicking on the Dasboard's transfer button opens the Transfer Pane or UI.

Pin is used to search for Entity (Customer's record), the transfer amount, sender's pin and reciever's account number is passed as a parameter to the transfer business method of the bean (i used the concept of method overload so as not to use the same transfer method from the teller unit).

the transfer business finds the sender's and reciever's record through the entity manager business, deducts the amount from the sender, adds the amount to the reciever and merges the records.

I said earlier about the problems i accounted whenever the emails failed to send either owing to network issues. the problem was solved by sending the email through a separate thread.

Click on the Change pin button will open the Change pin UI:

In this UI, the customer can retrieve his/her pin by email if forgotten. The search business method of the bean is invoked and the email gotten from the textfield is passed as parameter to it. The email is retrieved and sent to the customer's email.

Also in the UI, the customer can change his/her pin. If you recall, the pins were automatically generated earlier and unique so as not to conflict or mess things up. The changed pin have to be minimum of 6 digits.

I have tried as much to keep any serious work or functions away from the client side which is the essence of enterprise application. I also update to design of the customer unit with Javafx.
You can check out the latest commit at my github page.

Next, we will add chat functionality to the project using websockets. You may ask why the chat functionality:

Websockets is one of the technologies supported by Java EE 7 so am trying to access as much of those technologies as possible.
A customer may need to chat with the customer care staff about his account, You see why it is needed.

Maybe, I will open another thread to talk about javafx. The framework is meant to replace java swing and it is doing a good job at that. so far I am impressed.

Before moving on to websockets, let us talk about one important thing......SECURITY

Wildfly offers two Realms (ManagementRealm and ApplicationRealm)

A realm is a security policy domain defined for a web or application server. A realm contains a collection of users, who may or may not be assigned to a group or A realm is a complete database of users and groups identified as valid users of one or more applications and controlled by the same authentication policy.
The managementRealm in wildfly server has a collection of users that have levels of adminstrative privleges on the server. example: the user steinacoz we have been using in our examples since is actually a superUser in my own installation of server.
The applicationRealm which is a security domain for remote clients connecting to the server.

An application will often prompt for a user name and password before allowing access to a protected resource. After the user name and password have been entered, that information is passed to the server, which either authenticates the user and sends the protected resource or does not authenticate the user, in which case access to the protected resource is denied.

A user is an individual or application program identity that has been defined in Server. A user can have associated with that identity a set of roles that entitle the user to access all resources protected by those roles. Users can be associated with a group.

A role is an abstract name for the permission to access a particular set of resources in an application. A role can be compared to a key that can open a lock. Many people might have a copy of the key. The lock doesn't care who you are, only that you have the right key. example: our user steinacoz is assigned to a role of superuser.

in this our project/example, our bean is remote. So we are going to create three users in the applicationRealm and assign tellerUnit,customerCareUnit and atmUnit roles respectively to them.

You can use add-user script in the bin folder of your wildfly installation home.

you can choose to leave the add group option empty when using the script to add users.

open the application-roles.properities file and find your users with their roles if you added the roles from the add-user script. if not just type the roles as you see from the image.

open the application-users.properties file to see the added users with hex md5 codes.

the two files can be found under wildfly home/standalone/configuration folder

An Enterprise bean can be secured either Declaratively or programmaticaly.

Declarative method makes use of annotations or deployment descriptor or both. For the purpose of this context, we use only annotations of the declarative method.

Declarative security enables the application developer to specify which users are authorized to access which methods of the enterprise beans and to authenticate these users with basic, or user name/password, authentication.

Security roles are meant to be logical roles, representing a type of user. You can define method permissions for each security role. A method permission is a permission to invoke a specified group of methods of an enterprise bean's business interface, home interface, component interface, and/or web service endpoints. After method permissions are defined, user name/password authentication will be used to verify the identity of the user.

Method permissions can be specified on the class, the business methods of the class, or both. Method permissions can be specified on a method of the bean class to override the method permissions value specified on the entire bean class. The following annotations are used to specify method permissions.

@DeclareRoles: Specifies all the roles that the application will use, including roles not specifically named in a @RolesAllowed annotation. The set of security roles the application uses is the total of the security roles defined in the @DeclareRoles and @RolesAllowed annotations. In our case, we are making use of tellerUnit, atmUnit and customerCareUnit. The syntax of this declaration is like this:
@DeclareRoles({"tellerUnit","customerCareUnit","atmUnit"})

The @DeclareRoles annotation is specified on a bean class, where it serves to declare roles that can be tested (for example, by calling isCallerInRole) from within the methods of the annotated class. When declaring the name of a role used as a parameter to the isCallerInRole(String roleName) method, the declared name must be the same as the parameter value.

@RolesAllowed("list-of-roles": Specifies the security roles permitted to access methods in an application. This annotation can be specified on a class or on one or more methods. When specified at the class level, the annotation applies to all methods in the class. When specified on a method, the annotation applies to that method only and overrides any values specified at the class level.
To specify that no roles are authorized to access methods in an application, use the @DenyAll annotation. To specify that a user in any role is authorized to access the application, use the @PermitAll annotation.
These pattern was used for our search business method:

@Override
@RolesAllowed({"atmUnit","tellerUnit","customerCareUnit"})
public void searchByAcct(Customer cu,String acctNumber) {


You will ask why didn't I use @PermitAll. I found out that with @permitAll, every user even the users in managementRealm can access the method.

[b]NOTE: [/b]if the application client is on the same system with the server, the server will silently accept connection from it if no security is specified.