Upload
buidan
View
225
Download
0
Embed Size (px)
Citation preview
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 )
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 Rightclick 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 Rightclick 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.
Notice that do not miss to Click the Save All icon in order to save all your work.
6 After that Rightclick 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, doubleclick 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.
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.