Presenting single records on your page
In this recipe, we will address the need for presenting a single record in a page, which is useful specifically when you want to focus on a specific record in the table of your database; for example, a user's profile can be represented by a single record in an employee's table.
The application and its model have been created for you; you can see it by cloning the PresentingSingleRecord
application from the Git repository.
How to do it...
In order to present a single record in pages, follow the ensuing steps:
- Open the
PresentingSingleRecord
application. - Create a bounded task flow by right-clicking on ViewController and navigating to New | ADF Task Flow. Name the task flow
single-employee-info
and uncheck the Create with Page Fragments option.Tip
You can create a task flow with a page fragment, but you will need a page to host it at the end; alternatively, you can create a whole page if the task flow holds only one activity and is not reusable. However, in this case, I prefer to create a page-based task flow for fast deployment cycles and train you to always start from task flow.
- Add a View activity inside of the task flow and name it
singleEmployee
. - Double-click on the newly created activity to create the page; this page will be based on the Oracle Three Column layout. Close the dialog by pressing the OK button.
- Navigate to Data Controls pane | HrAppModuleDataControl, drag-and-drop
EmployeesView1
into the white area of the page template, and select ADF Form from the drop-down list that appears as you drop the view object. - Check the Row Navigation option so that it has the first, previous, next, and last buttons for navigating through the task.
- Group attributes based on their category, so the
Personal Information
group should include theEmployeeId
,FirstName
,LastName
,Email
, andPhone Number
attributes; theJob Information
group should includeHireDate
,Job
,Salary
, andCommissionPct
; and the last group will beDepartment Information
that includes bothManagerId
andDepartmentId
attributes. - Select multiple components by holding the Ctrl key and click on the Group button at the top-right corner, as shown in the following screenshot:
- Change the Display Label values of the three groups to
eInfo
,jInfo
, anddInfo
respectively.Tip
The Display Label option is a little misleading when it comes to groups in a form as groups don't have titles. Due to this, Display Label will be assigned to the Id attribute of the
af:group
component that will wrap the components, which can't have space and should be reasonably small; however, Input Text w/Label or Output Text w/Label will end up in the Label attribute in the panelLabelAndMessage component. - Change the Component to Use option of all attributes from ADF Input Text w/Label to ADF Output Text w/Label. You might think that if you check the Read-Only Form option, it will have the same effect, but it won't. What will happen is that the
readOnly
attribute of the input text will change totrue
, which will make the input text non-updateable; however, it won't change the component type. - Change the Display Label option for the attributes to have more human-readable labels to the end user; you should end up with the following screen:
- Finish by pressing the OK button.
Tip
You can save yourself the trouble of editing the Display Label option every time you create a component that is based on a view object by changing the
Label
attribute in UI Hints from the entity object or view object. More information can be found in the documentation at http://docs.oracle.com/middleware/1212/adf/ADFFD/bcentities.htm#sm0140. - Examine the page structure from the Structure pane in the bottom-left corner as shown in the following screenshot. A panel form layout can be found inside the center facet of the page template. This panel form layout represents an ADF form, and inside of it, there are three group components; each group has a panel label and message for each field of the view object.
At the bottom of the panel form layout, you can locate a footer facet; expand it to see a panel group layout that has all the navigation buttons. The footer facet identifies the locations of the buttons, which will be at the bottom of this panel form layout even if some components appear inside the page markup after this facet.
- Examine the panel form layout properties by clicking on the Properties pane, which is usually located in the bottom-right corner. It allows you to change attributes such as Max Columns, Rows, Field Width, or Label Width. Change these attributes to change the form and to have more than one column.
- Save everything and run the page, placing it inside the
adf-config
task flow like we did in Chapter 2, Getting Started with ADF Faces and JDeveloper; to see this in action, refer to the following screenshot:
How it works...
The best component to represent a single record is a panel form layout, which presents the user with an organized form layout for different input/output components.
If you examine the page source code, you can see an expression like #{bindings.FirstName.inputValue}
, which is related to the FirstName
binding inside the Bindings
section of the page definition where it points to EmployeesView1Iterator
. However, iterator means multiple records, then why FirstName
is only presenting a single record? It's because the iterator is aware of the current row that represents the row in focus, and this row will always point to the first row of the view object's select
statement when you render the page. By pressing different buttons on the form, the Current Row
value changes and thus the point of focus changes to reflect a different row based on the button you pressed.
When you are dealing with a single record, you can show it as the input text or any of the user input's components as we did in the previous chapter; alternatively, you can change it as the output text if you are just viewing it.
In this recipe, you can see that the Group component is represented as a line in the user interface when you run the page.
If you were to change the panel form layout's attributes, such as Max Columns or Rows, you would see a different view. Max Columns represents the maximum number of columns to show in a form, which defaults to 3 in case of desktops and 2 in case of PDAs; however, if this panel form layout is inside another panel form layout, the Max Columns value will always be 1. The Rows attribute represents the numbers of rows after which we should start a new column; it has a default value of 231-1.
The benefit of having a panel form layout is that all labels are aligned properly; this organizes everything for you similar to the HTML table
component.
See also
Check the following reference for more information about arranging content in forms:
http://docs.oracle.com/middleware/1212/adf/ADFUI/af_orgpage.htm#CDEHDJEA