13. Enter the application module package as com.empdirectory.model.am and
name it as EmpDirectoryModule.
14. The Add to Application Module checkbox is checked to add the view object to
the application module.
15. Click Next > to create a business component diagram for the components that are
created. The diagram is helpful in visualizing the relationship between the business
components. We can create new entities and view objects from the business
component diagram. This is added only for reference and is not used further in
the book.
16. Check the Add to Business Components Diagram checkbox to add EmpEO, EmpVO,
and EmpDirectoryModule to the diagram.
17. Type the package name as com.empdirectory.model.diagram and the name
of the diagram as EmployeeDirectoryDiagram.
18. Select the default selection to include entity objects, view objects, and the
application module.
19. Click on the Next > button to check for the summary, and click on the Finish button
to create the components.
What just happened?
Since ADF is a metadata-driven framework, most of the components created will be
represented as a .xml file.
We have created the basic business components for our sample application. They are
as follows:
‹ EmpEO.xml: This is an entity object that will represent the EMP table in HRSchema.
Click on the EMPEO.xml file to open the .xml file. In the Attributes section, you will
find all the column information for the EMP table.
‹ EmpVO.xml: This is a view object based on EmpEO that is used to manipulate the
Employee table through the entity object.
The EmpVO.xml file will have the data that was retrieved from the data source
using the SQL query. The query section will display the query for the view object
EmpDirectoryModule.xml: This is the application module that we have created
through the view object to accomplish the create, update, and remove operations
for a record in the Employee table.
The Data Model section of the EmpDirectoryModule.xml file will show the usage
of the EmpVO view object.
----
The bc4j.xcfg file will have the metadata information about the
database connection used by the application module. This file also
defines the runtime parameters configured for the application module.
---
The next step is to run the application module using the AM tester to check if everything
is working fine.
The Data Controls panel will expose the following controls:
‹ The view object
‹ The view object attributes
‹ The view object operations
‹ The view object criteria
‹ The application module operations
------
To expose the data to the UI layer, you need to create a page where you will bind the data
from the data control that is exposed from the model layer.
1. In the Create Page section, click on Create JSF Page. This will open a Select a Project
for Action pop-up window, that will ask you to select the project where you want to
create the page. Click on OK to proceed.
2. The Create JSF Page pop-up window opens up to create the page.
3. Provide the name of the file as index.jspx.
4. The directory is defaulted to the public_html folder in your ViewController
project directory—this is the place where you store all the pages. You have an
option to select a different directory by clicking the magnifying glass icon.
5. The next step is to select the Document Type option as JSP XML to create a .jspx
file. Facelets will have a .jsf extension.
Select the page layout as Blank Page. You can select a different page template or
create your own template as needed.
7. Click on the OK button to create the index.jspx page. This creates a page for our UI layer. This will be of the .jspx extension, with only the root tag.
This page will contain the basic tags and elements that are used to display a blank page on the website. We will include these components in this page to add more dynamic content to the page.
8. Refresh the data controls using the Refresh button in the Data Controls panel. Filter out EmpDirectoryModuleDataControl using the filter option from the Data Controls panel and open the data controls.
9. You will have a view object listed; drag this view object and drop it onto the Design view of the page.
11. A pop-up window will be displayed to select the display behavior of the content.
You can choose it to be displayed in ADF Table in a grid-like layout with rows and
columns, and the user can edit the data in it.
The ADF Read-only Table option will have a read-only table displayed and will
not allow the user to edit the content. The other two options displayed will be
explained later.
12. The Edit Table Columns page will let you choose from the options available to
customize the table displayed in the UI page as follows:
‰ The row selection can be single or multiple rows
‰ The sorting and filtering in the table can be selected
‰ You can add and delete columns, and customize the components to
display the desired column data
‰ The Value Binding section will display the binding of the data layer to
the UI components
13. Click on the OK button to accept the settings and to create the table for your page,
which will bind the UI component to the underlying model data.
What just happened?
You will have the following setup in the Design View pane of the index.jspx page.
In the source view, you will have some of the tags that correspond to the table view
and the components will have the value bindings for the attributes representing the
underlying data
Each page will have a corresponding page definition file that will hold the bindings mentioned
in your page. In this case, we will have the indexPageDef.xml file created for the index.
jspx file. This is because we have an ADF binding for the UI components defined in our
index.jspx page
When we use the Data Control panel for the first time, a control palette XML file named
DataBindings.cpx is created to define the binding context for the entire application.
This file will have the following references:
‹ Reference to the page definition file used for each page in the entire application
Reference to the data control from which the binding objects are created at runtime
The adfm.xml file will hold the reference to the DataBindings.
cpx file. Apart from this, the file will also hold a reference to the
.dcx,.xcfg, and .jpx files. This file is located in the adfmsrc/
META-INF folder of your project.
Since you have your UI-related artifacts, it is time for you to do some exercises based on the
previous action.
1. List down all the artifacts created as part of the action.
2. Learn how the index.jspx page and the corresponding page definition file
are mapped to render the data
3. Try to understand the components and the properties that were added to the
index.jspx file.
Let us see how to run the ADF application using the following steps:
1. To run the page, we will have to right-click on the index.jspx page and select the
Run option.
2. The page that we have created will be displayed in the default browser as shown
here in the following URL:
http://127.0.0.1:7101/EmpDirectoryApplication-ViewControllercontext-
root/faces/index.jspx
EmpDirectoryApplicaion-viewcontrollercontext-
root is the context root for the application.
This can be changed from Project Properties and Java EE
application of the ViewController project. Java EE
web context root will hold the context root for the project.
3. Verify the contents of the page. It will display the content of the EMP table in a grid layout with all the information bound to the UI components. The layout of the page will be ugly with a lot of spaces and will have a horizontal scroll bar. This will be fixed in the Chapter 6, Displaying the Data.
What just happened?
The integrated WebLogic server will be started when you run the index.jspx page. If it is the
first time a user starts WebLogic, the user will be asked to provide an administrator usernamepassword
pair. You can also set the server to listen to a single host such as localhost. You will
see the console log of the server in the log window. You will see the highlighted statement in
the console when the server is started.
The deployment of the application follows immediately after the server is started.
The application is deployed as a WAR file, and the user is provided with a target URL
to access the page.
The web application module and enterprise application module are
written to the $USER_DIR/o.j2ee/drs folder. In Windows,
$USER_DIR will be in C:\Users\{username}\ AppData\
Roaming\Jdeveloper\ system11.1.2.3.39.62.76.1.
Now let us see what happens behind the browser when the URL is accessed:
‹ When the first request for the ADF page occurs, the application invokes both the
ADF life cycles; they are a superset of the JSF life cycle. The JSF lifecycle will be
responsible for request processing using the FacesServlet servlet. This servlet
will filter the request that comes after the /faces/ section of the URL.
‹ This servlet is responsible for registering ADFBindingFilter defined in the web.
xml file. The filter will first look for the binding context in the HTTP session. If it's
not available, the binding context is created in the session.
‹ The binding context will then look for the indexPageDef.xml file that is
associated with the index.jspx page. This page definition file can be found
in the DataBindings.cpx file, which has already been loaded by adfm.xml.
Summary
Let us recap what we have learned in this chapter. We started by learning about the
Model-View-Controller architecture and understood how ADF implements this architecture.
We understood the building blocks of the ADF architecture: ADF Model, ADF Controller,
and ADF Faces.
We started by creating a simple ADF application with an entity object, view object, and
application module in the Model project. We verified the application module using the
BC4j tester.
After that, we started creating the UI page in the ViewController project. We bound
the data to the UI components and displayed the information in a table. Finally, we ran
and verified the application.
In the next chapter, we will learn more about the business components involved with
developing the sample application.
name it as EmpDirectoryModule.
14. The Add to Application Module checkbox is checked to add the view object to
the application module.
15. Click Next > to create a business component diagram for the components that are
created. The diagram is helpful in visualizing the relationship between the business
components. We can create new entities and view objects from the business
component diagram. This is added only for reference and is not used further in
the book.
16. Check the Add to Business Components Diagram checkbox to add EmpEO, EmpVO,
and EmpDirectoryModule to the diagram.
17. Type the package name as com.empdirectory.model.diagram and the name
of the diagram as EmployeeDirectoryDiagram.
18. Select the default selection to include entity objects, view objects, and the
application module.
19. Click on the Next > button to check for the summary, and click on the Finish button
to create the components.
What just happened?
Since ADF is a metadata-driven framework, most of the components created will be
represented as a .xml file.
We have created the basic business components for our sample application. They are
as follows:
‹ EmpEO.xml: This is an entity object that will represent the EMP table in HRSchema.
Click on the EMPEO.xml file to open the .xml file. In the Attributes section, you will
find all the column information for the EMP table.
‹ EmpVO.xml: This is a view object based on EmpEO that is used to manipulate the
Employee table through the entity object.
The EmpVO.xml file will have the data that was retrieved from the data source
using the SQL query. The query section will display the query for the view object
EmpDirectoryModule.xml: This is the application module that we have created
through the view object to accomplish the create, update, and remove operations
for a record in the Employee table.
The Data Model section of the EmpDirectoryModule.xml file will show the usage
of the EmpVO view object.
----
The bc4j.xcfg file will have the metadata information about the
database connection used by the application module. This file also
defines the runtime parameters configured for the application module.
---
The next step is to run the application module using the AM tester to check if everything
is working fine.
The Data Controls panel will expose the following controls:
‹ The view object
‹ The view object attributes
‹ The view object operations
‹ The view object criteria
‹ The application module operations
------
To expose the data to the UI layer, you need to create a page where you will bind the data
from the data control that is exposed from the model layer.
1. In the Create Page section, click on Create JSF Page. This will open a Select a Project
for Action pop-up window, that will ask you to select the project where you want to
create the page. Click on OK to proceed.
2. The Create JSF Page pop-up window opens up to create the page.
3. Provide the name of the file as index.jspx.
4. The directory is defaulted to the public_html folder in your ViewController
project directory—this is the place where you store all the pages. You have an
option to select a different directory by clicking the magnifying glass icon.
5. The next step is to select the Document Type option as JSP XML to create a .jspx
file. Facelets will have a .jsf extension.
Select the page layout as Blank Page. You can select a different page template or
create your own template as needed.
7. Click on the OK button to create the index.jspx page. This creates a page for our UI layer. This will be of the .jspx extension, with only the root tag.
This page will contain the basic tags and elements that are used to display a blank page on the website. We will include these components in this page to add more dynamic content to the page.
8. Refresh the data controls using the Refresh button in the Data Controls panel. Filter out EmpDirectoryModuleDataControl using the filter option from the Data Controls panel and open the data controls.
9. You will have a view object listed; drag this view object and drop it onto the Design view of the page.
11. A pop-up window will be displayed to select the display behavior of the content.
You can choose it to be displayed in ADF Table in a grid-like layout with rows and
columns, and the user can edit the data in it.
The ADF Read-only Table option will have a read-only table displayed and will
not allow the user to edit the content. The other two options displayed will be
explained later.
12. The Edit Table Columns page will let you choose from the options available to
customize the table displayed in the UI page as follows:
‰ The row selection can be single or multiple rows
‰ The sorting and filtering in the table can be selected
‰ You can add and delete columns, and customize the components to
display the desired column data
‰ The Value Binding section will display the binding of the data layer to
the UI components
13. Click on the OK button to accept the settings and to create the table for your page,
which will bind the UI component to the underlying model data.
What just happened?
You will have the following setup in the Design View pane of the index.jspx page.
In the source view, you will have some of the tags that correspond to the table view
and the components will have the value bindings for the attributes representing the
underlying data
Each page will have a corresponding page definition file that will hold the bindings mentioned
in your page. In this case, we will have the indexPageDef.xml file created for the index.
jspx file. This is because we have an ADF binding for the UI components defined in our
index.jspx page
When we use the Data Control panel for the first time, a control palette XML file named
DataBindings.cpx is created to define the binding context for the entire application.
This file will have the following references:
‹ Reference to the page definition file used for each page in the entire application
Reference to the data control from which the binding objects are created at runtime
The adfm.xml file will hold the reference to the DataBindings.
cpx file. Apart from this, the file will also hold a reference to the
.dcx,.xcfg, and .jpx files. This file is located in the adfmsrc/
META-INF folder of your project.
Since you have your UI-related artifacts, it is time for you to do some exercises based on the
previous action.
1. List down all the artifacts created as part of the action.
2. Learn how the index.jspx page and the corresponding page definition file
are mapped to render the data
3. Try to understand the components and the properties that were added to the
index.jspx file.
Let us see how to run the ADF application using the following steps:
1. To run the page, we will have to right-click on the index.jspx page and select the
Run option.
2. The page that we have created will be displayed in the default browser as shown
here in the following URL:
http://127.0.0.1:7101/EmpDirectoryApplication-ViewControllercontext-
root/faces/index.jspx
EmpDirectoryApplicaion-viewcontrollercontext-
root is the context root for the application.
This can be changed from Project Properties and Java EE
application of the ViewController project. Java EE
web context root will hold the context root for the project.
3. Verify the contents of the page. It will display the content of the EMP table in a grid layout with all the information bound to the UI components. The layout of the page will be ugly with a lot of spaces and will have a horizontal scroll bar. This will be fixed in the Chapter 6, Displaying the Data.
What just happened?
The integrated WebLogic server will be started when you run the index.jspx page. If it is the
first time a user starts WebLogic, the user will be asked to provide an administrator usernamepassword
pair. You can also set the server to listen to a single host such as localhost. You will
see the console log of the server in the log window. You will see the highlighted statement in
the console when the server is started.
The deployment of the application follows immediately after the server is started.
The application is deployed as a WAR file, and the user is provided with a target URL
to access the page.
The web application module and enterprise application module are
written to the $USER_DIR/o.j2ee/drs folder. In Windows,
$USER_DIR will be in C:\Users\{username}\ AppData\
Roaming\Jdeveloper\ system11.1.2.3.39.62.76.1.
Now let us see what happens behind the browser when the URL is accessed:
‹ When the first request for the ADF page occurs, the application invokes both the
ADF life cycles; they are a superset of the JSF life cycle. The JSF lifecycle will be
responsible for request processing using the FacesServlet servlet. This servlet
will filter the request that comes after the /faces/ section of the URL.
‹ This servlet is responsible for registering ADFBindingFilter defined in the web.
xml file. The filter will first look for the binding context in the HTTP session. If it's
not available, the binding context is created in the session.
‹ The binding context will then look for the indexPageDef.xml file that is
associated with the index.jspx page. This page definition file can be found
in the DataBindings.cpx file, which has already been loaded by adfm.xml.
Summary
Let us recap what we have learned in this chapter. We started by learning about the
Model-View-Controller architecture and understood how ADF implements this architecture.
We understood the building blocks of the ADF architecture: ADF Model, ADF Controller,
and ADF Faces.
We started by creating a simple ADF application with an entity object, view object, and
application module in the Model project. We verified the application module using the
BC4j tester.
After that, we started creating the UI page in the ViewController project. We bound
the data to the UI components and displayed the information in a table. Finally, we ran
and verified the application.
In the next chapter, we will learn more about the business components involved with
developing the sample application.
No comments:
Post a Comment