Riyad AlRihieli 

The instructor: Professor. Bill Hankley 

CIS 764­ Buliding a Web Application 

Kansas State University 

Is part of my project 

Tutorial: Building a Web Application with Developer by Using JPA, Java Server Faces and EJB 

These the follwing the step that you should follow in order to get a result of this tutorial: 

Building a Web Application by Using these Technologies 

EJB  JPA  Java Server Faces

First:  You have to have Jdeveloper Program for more information click this here for more information ( http://www.oracle.com/technology/software/products/jdev/htdocs/soft11tp.html) 

Second, open your Jdeveloper from windows. 

1‐  Third, Create Data Base Connection. Click here‐è  Go to the connection navigator by clicking connection tab on the application navigator. 

If the connection tab is not appeared as it supposed to be please do the following steps in order to make 

a connection  Click‐‐‐> View > Connection navigator.

1‐  Click right click on the Data base node and choose New Data Base connection 

2‐  In the Creating data base connection Wizard, Check the information and click Next. 

In the step 1: Enter the Name of connection in the connection field,”Data_Base_Connection”

In the step 2 of 4: Enter The Username in the Username field ,and your password  Field  ( Username : “Riyad “and the password: CIS 764  )

Click Next

In the step 3 of 4: on the creating page, type this information in each field: 

­àDriver: thin 

àHost name: oracle.cis.ksu.edu 

­àJDBC Port: 1521 

àSID: Oracle “avoid spilling error” 

And then, Click Next 

In the step 4of 4: on the creating page, Click on the Test Connection: 

To make sure that the complete connection details are correct. Otherwise, check your connection details again.

And then, click next in to finish the data base connection. 

4‐ Create a New Application and Projects:

Right click the Application node and selectNew application 

In the Create application page: 

Type the Application Name, choose the Direction Name, and do not forget to type oracle 

in the Application Package Prefix filed. 

Also, Choose theWeb Application [JSF, EJB] value from the Application Template; and then click the 

Manage Templates(button). 

In the Application Templates tree, for the Web Application [JSF, EJB, Top link] node You have to change two things : 

This the application name 

Where is the project  saved 

Enter oracle as the 

Application Package Prefix 

Whicjh kind of appication do you have

1­  Choose View and Controller, and rename Project Name to UserInterface.jpr and Default Package to view. 

2­  Choose Data Model, and rename  Project Name to DataModel.jpr and Default Package to data model. 

Select the view control here 

Rename Project Name to UserInterface.jpr . and Default Package to view.

After that, click o.k. (back in the creating application dialog )and Click save all 

The application navigator should be looked like this : 

Rename Project Name to DataModel.jpr and Default Package to data model.

How to create Creating the Persistence Model? 

1‐  In the application navigator, right click the EJBModel node and choose the new application or option. 

2‐  In the New Gallery dialog box, expand the Business Tier nodeàthen Click EJB from the Items list,à and then choose Entities from Tables.  And then click O.k.

3‐  On the Welcome page of the wizard click Next to skip the page. 

4‐  In Step 1 of 4 of the Create Entities from Tables wizard, select as the connection name. 

5‐  In the next step which is step 2 of 4: click the Query button. Then select the Department and

Employee tables from the Available list and shuttle them to the selected list. And then Click Next to go to the next step. 

6‐  The next step, which is 3 of 4, would be just double check that the package name is datamodel. And then Click Next 

7­  In the next step, which is the final step 4 of 4, just click Next in order to finish the creating entity beans.  Click the Save All icon  to save your work. 

The Applications Navigator should look like this

9‐ This is source editor of the department Java will be shown like this. 

8‐ In the step 8, Click or Double‐click the Department. java node, which is in the Applications Navigator, in order to open it in the source editor.  T o see the annotations, which are using to identify them as EJB entities here. It mentioned in the Oracle website that A key feature of EJB 3.0 and JPA is the ability to create entities that contain object‐relational mappings by using metadata annotations rather than deployment descriptors as in earlier versions. Click here to see the most ( ignore10 and put the schedule)

How to create the Data Model: 

1­  Right­click the EJBModel project node , in the Applications Navigator, and select the New option from the context menu. 

2­  After that Expand the Business Tierà Select EJB category and select the Session Bean item Click O.K. 

10­ In the step 10, do not forget to Right­click the EJBModel node, which is in the Applications Navigator, and selects the Make option in order to compile your Java classes. Also , Please make sure that does not report any error

3­  Click Next to ignore the Welcome page of the Create Enterprise Java Bean wizard. After that in order to create the Data Model you will be required to go through 4 steps which are: 

a)  In the First step, step 1 of 4,  type the EJB name, HRFacade in our case.( in our case­­­ changed look it again). Leave the options unchanged, and then click Next.

b)  In the Second step: make certain all entity methods are selected, after that click Next Post a picture here

c)  In the third step: step 3 of 4, make certain that the full name for Bean Class is oracle.datamodel.HRFacadeBean, and then click

d)  In the Forth step: have interfaces implementations, which are: Remote and Local selected. 

3‐‐ The Applications Navigator should look like this:

4 ‐ Then we are going to expose the EJB as a data control for the Oracle ADF framework. Right‐click the HRFacadeBean node, which is in the Applications Navigator,  and choose Create Data Controls from context.

4‐  Click Local, and OK in the Choose EJB Interface dialog.

Notice that do not miss to Click the Save All icon  in order to save all your work. 

6­ After that Right­click the EJBModel project and select the Make option to compile your project. Make sure that Log window does not report any error. 

8‐  Finally, The Applications Navigator should be looked like this: 

I reachhere please finish it later Thank you so much 

How to  Creating the Page Flow: 

1­  In the next few steps, we are going to use JDeveloper's JSF Navigation Modeler to diagrammatically plan and create your application's pages, and the navigation between them. Notice that once we created the application for this tutorial, we created it with two projects which are: 

I.  First, the EJBModel project contains the data controls that serve as the business model for 

your application. 

II.  Second, the UserInterface project will include the View portion of your application, which 

defines the User Interface components.

2 ‐ After that Right‐Click the User Interface Node, in the Applications Navigator, and Select Open JSF Navigation. 

5­  After that the empty diagram will open like this. 

6­  In the JSF Navigation Diagram page of the Component Palette, choose JSF Page, and click where you want the page to be shown in the diagram. Also do not forget to rename the page to deptEmployee. 

As we see in this picture 

Pay attention that the Component Palette on the right of the diagram editor.    You will need this to make components for the JSF Navigation Model later on.

7­  In the following step, Drag and drop a JSF Page, this is a new page close to the earlier one, from the Component Palette. Notice that do not forget to rename the new one to the edit Employee./////change/// 

8­  From the Component Palette, choose JSF Navigation Case in order to link between the two pages by Clicking //deptEmployee// ,the icon for the source JSF page, and (editEmployee) ,the icon for the destination JSF page , for the navigation case.  And then change the default label to success by clicking it and typing edit again. 

9­  In this step we are going to repeat 8 step. However, we are going to change JSF Navigation Case, which is opposite from the previous one, from edit employee to deptEmployee. Also,  do not forget to modify the default label from success to comment.

10­ At the end the diagram is supposed to be looked like this .Notice that do not forget to save your work, diagram. 

How to Creating a Master‐Detail JavaServer Faces Page 

In this stage, we are going to generate an ADF Faces for the Department Employee Master Detail page. 

2 ­ In the Create JSF JSP page, Skip the welcome page in the step 1 to 4,and select the JSP Document (*.jspx) button. And then Click Next to continue.//post some pictures//. 

First, we have Double‐click the  deptEmployee  icon  to launch  the  Create  JSF  JSP wizard  on  the  pervious page, view diagram.

3 ­ In the step 2 of 4, Component Binding, select the Automatically Expose UI Components option, and click Next. 

In the step 3 of 4, Tag libraries, choose some libraries from the available libraries window and 

click the right arrow button to shuttle them in the Selected Libraries section. After that click Next 

and go on to the next step. 

Click the JSP Document (*.jspx) button. 

And then Click Next in order to continue 

Please select this button. 

Please select this button.

4 – In this step, we have an empty deptEmployee.jspx page and  we are  required  to create a data‐ bound ADF Faces component to the page In order to show the a department along with the employees belonging to this department. Therefore, drag and drop the panelPage component onto the page design from the component palette. Notice that we need to modify the Title value for the panelPage to Department/Employee. 

In this picture you will see all the libraries, which are JSF Core 1.0, JSF HTML 1.0, ADF Faces Components, and ADF Faces HTML. 

The page will be shown like this when we drag and drop the panelPage. Notice that we need to modify the Title value for the panel Page to Department/Em ployee. 

Panel page: ‐ it is the tool that we used to 

show this page

5‐  After that, try to open the Data Control palette (View Data Control Palette), and then expand the HRFacadeLocal                 queryDepartmentFindAll()          Department and choose the employeesList node. 

\\\\ change the pitcher in the bottom\\\ 

Notice that ((( The employeesList node represents the set of records in a master­ detail relationship with the department)))) 

Do not forget to Change the value from the Text1 to

6­ In the 6 th step, just we are going to drag and drop the department Collection on the page. As you see in the picture below. 

Click OK on the Client Project Libraries Added dialog. The page should now look like this 

We are dragging now the employee list to this place and from there we are going to select the Create Master­ Details                 ADF Master Form, Detail Table from the dynamic menu. 

The picture will be appeared like this

The Master form is populated with default navigation buttons and the Detail table has a default Submit button 

7­ In the7th  step, we should change the modify two things: 

8­ Go to the Structure pane, expand the af:panelGroup in the Structure pane and select the first af:panelHeader component and in the Property pane set the Text attribute to Department. Also, do not forget to repeat the operation by selecting the second af:panelHeader component and in the Property pane set the Text attribute to Department Employees List. 

1­  Text value : modify the text value to the Edit 

2­  The Action : Modify to Edit By using the dropdown list for and select edit

11‐ Now you completed the JSF page that is databound to your FacadeBean. So that go  back on the page flow diagram, and run the deptEmployee.jspx  by right click this  icon and select Run from the context menu.

12‐ The master details should be shown like this: 

Also, see the Navigation buttons to navigate to different rows. Then close your browser window 

•  Creating an Employee Edit Java Server Faces Page; 

In this stage, we use you use ADF Faces to build the Employees Edit page.

1‐  Go  back to the Page Flow diagram, and double‐click the edit Employee icon. 

2­  Click Next to ignore the Welcome page of the creating the Employees Edit page. After that in order to create Employee Edit Page you will be required to go through 4 steps which are: 

1‐  In the first step , step 1 of 4, just click Next to ignore the Welcome page of the creating the Employees Edit page 

2‐  In the step 2 of 4, On the Component Binding page, select the Automatically Expose UI Components option and click Next. 

3­  In the step 3 of 4  , Selected Libraries section, make certain that  some libraries are included , such as JSF Core 1.0,JSF HTML 1.0,ADF Faces Components ,and ADF Faces HTML . 

4­  In the step 4 of 4, do not forget to click Next.  Also Click Next then Finish to agree to the default HTML options and create the new JSPX. 

13 – Right now we have an empty editEmployee.jspx page shown in the design editor 

3‐  – After having this empty page, just go to the Component palette, and drag and drop the panel Page component from ADF Faces Core library onto this empty page.

4‐ After that we should change the title value of the panel page from title to Employee Details. 

5 ­ Open the Data Control palette (View | Data Control Palette) and select the employeesList node expanding the HRFacadeLocal              QueryDepartmentsFindAll()          Department nodes. 

Click the page panel from the ADF faces core and drop it here.

6 ‐  Drag and drop the employeesList on the page and, from the dynamic menu, select the Create Forms                            ADF Form. 

In the Edit Form Fields dialog, click the Include Submit button check box and click OK.

7 – The page should be looks like this after this step : 

I stopped here please continue later 

8 ­ In the Data Controls palette, select the mergeEntity(Object) node corresponding to a commit action performed on an updated row. Also. Do not forget Drag and drop the mergeEntity on the Submit button and in the dialog select the Bind Existing CommandButton option.

9 ­ In the Action Binding Editor, double­click the Value field to display the edit button. 

Click the edit Button to open the Variables dialog. 

10  ­ In the Variables dialog, expand the ADF Bindings | bindings | employeesListIterator | currentRow and select dataProvider. Then use the arrow to shuttle it into the expression pane. 

11  In the Variables dialog, expand the ADF Bindings | bindings | employeesListIterator | currentRow and select dataProvider. Then use the arrow to shuttle it into the expression pane.

Click OK. 

Back in the Action Binding Editor, click OK.

13­ Back on the page, select the button and in the property pane, change the Text to Commit and the Action to commit from the dropdown list. 

14­ Your page should now look like this: 

Finally the last step is Running the JSF Pages:

Show the pictures of the your applications that’s it. 

Now we need just to run the programe and we are going to run it like :this :

2‐The program will be shown like this in the Firefox , the explore. If we need to change any of the Employees just choose the one who we need to modify his information and then Click Edit button. 

Once we select which employee we have to Edit. And then we Click Edit

4‐  After this process we will have this Picture. An 

Now we are going to change the old number to any number we would like to. 

So will change  it right now and we will click commit to put in the employee profiles

This the end of the program 

The Reference 

Oracle tecnology network  : ( http://www.oracle.com/technology/obe/obe1013jdev/10131/ejb_and_jpa/master‐ detail_pagewith_ejb.htm#t7.) 

We are already changed it.