Presenting Data Using ADF Faces

Exclusive offer: get 80% off this eBook here
Oracle ADF Faces Cookbook

Oracle ADF Faces Cookbook — Save 80%

Over 80 hands-on recipes covering a variety of ADF Faces components to help you create stunning user experiences with this book and ebook

₨1,649.99    ₨330.00
by Amr Gawish | March 2014 | Enterprise Articles

In this article, by Amr Gawish, the author of Oracle ADF Faces Cookbook, you will learn how to present a single record, multiple records, and master-details records on your page using different components and methodologies.

The article will cover the following topics:

  • Presenting single records on your page

  • Presenting multiple records using ADF Table

  • Presenting multiple records using ADF List View

(For more resources related to this topic, see here.)

In this article, you will learn how to present a single record, multiple records, and master-details records on your page using different components and methodologies.

You will also learn how to enable the internationalizing and localizing processes in your application by using a resource bundle and the different options of bundle you can have.

Starting from this article onward, we will not use the HR schema. We will rather use the FacerHR schema in the Git repository under the BookDatabaseSchema folder and read the README.txt file for information on how to create the database schema. This schema will be used for the whole book, so you need to do this only once.

Make sure you validate your database connection information for your recipes to work without problem.

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:

  1. Open the PresentingSingleRecord application.

  2. 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.

    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.

  3. Add a View activity inside of the task flow and name it singleEmployee.

  4. 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.

  5. 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.

  6. Check the Row Navigation option so that it has the first, previous, next, and last buttons for navigating through the task.

  7. Group attributes based on their category, so the Personal Information group should include the EmployeeId, FirstName, LastName, Email, and Phone Number attributes; the Job Information group should include HireDate, Job, Salary, and CommissionPct; and the last group will be Department Information that includes both ManagerId and DepartmentId attributes.

  8. 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:

  9. Change the Display Label values of the three groups to eInfo, jInfo, and dInfo respectively.

    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.

  10. 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 to true, which will make the input text non-updateable; however, it won't change the component type.

  11. 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:

  12. Finish by pressing the OK button.

    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.

  13. 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.

  14. 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.

    If you can't see the Structure or Properties pane, you can see them again by navigating to Window menu | Structure or Window menu | Properties.

  15. Save everything and run the page, placing it inside the adf-config task flow; 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; 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.

You can know more about each attribute by clicking on the gear icon that appears when you hover over an attribute and reading the information on the property's Help page.

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

Oracle ADF Faces Cookbook Over 80 hands-on recipes covering a variety of ADF Faces components to help you create stunning user experiences with this book and ebook
Published: March 2014
eBook Price: ₨1,649.99
Book Price: ₨2,749.99
See more
Select your format and quantity:

Presenting multiple records using ADF Table

In this recipe and the next two recipes, we will get to know how to present multiple records at once using three different components so that you can have control over what can be displayed and how you want to display it. In this recipe, you will learn how to do this using ADF Tables.

ADF Tables is one of the main components in the ADF Faces family, and it's commonly used, that is, you hardly find an enterprise application without one. ADF Tables provides great functionalities such as pagination, sorting, and filtering without compromising the ease of use for the application's user.

You can continue from the previous recipe, or you can grab this project's recipe by cloning the PresentingMultipleWithTable application from the Git repository.

How to do it...

In order to present multiple records using ADF Table, follow the ensuing steps:

  1. Create a task flow with a view like the previous recipe, but change the attributes as shown in the following steps:

    1. Task Flow name: Enter the value multiple-employees-info-table in this field.

    2. Create with Page Fragments: Check this option.

      This will create a task flow with page fragments instead of pages; it's good time to understand how this works. Create a view and double-click on it to create it and make sure it has the following properties:

    3. View name: Enter the value employeesTable in this field.

    4. Page Fragment Directory: Enter the value public_html\fragments in this field.

    5. Page Fragment Layout: Set this option as Create Blank Page.

  2. Navigate to Data Control pane | HrAppModuleDataControl, drag-and-drop EmployeesView1 inside the page fragment, select Table/List View from the list, and select ADF Table, as shown in the following screenshot:

    A dialog will open providing multiple options for row selection, sorting, filtering, and making the table read only.

  3. Check the Single Row option.

  4. Check the Enable Sorting, Enable Filtering, and Read-Only Table options.

    Notice how the Component to Use column changes when you check the Read-Only Table option.

  5. Create three groups exactly the same way as the previous recipe, but change the Display Labels option for Groups to Personal Information, Job Information, and Department Information respectively.

  6. Change the Display Label values for all attributes to have more human-readable column names as we did in the previous recipe; you should end up with the following screen:

  7. Click on OK to close the dialog window and return back to your screen, which should render the table successfully. You can see how the grouping looks like in the table, which looks like an Excel sheet.

  8. Surround the table with a panel collection by right-clicking on the table from the Structure pane, clicking on the Surround with... option (as shown in the following screenshot), selecting Panel Collection from the list, and then clicking on OK.

    Notice the new View menu and a Detach button above the table.

  9. Enable page pagination by changing the ADF Table's Scroll Policy property to Page from the Properties pane under Appearance.

    The Scroll Policy option is newly introduced in Oracle ADF since 11.1.1.7, 11.1.2.3, and 12c; changing this property will not affect how the table looks in the Design view of the page fragment.

  10. Surround the panel collection with the panel group layout as we did before, and now you are ready to run your page.

  11. Open the faces-config task flow from the WEB-INF folder.

  12. Drag-and-drop a view activity inside faces-config.

  13. Change the name to employeesTable.

  14. Double-click on the newly created activity to create the page and select Oracle Three Column Layout as the page template.

  15. Drag-and-drop the multiple-employees-info-table task flow from the application navigation inside the employeesTable.jsf page to the blank area of the page template (center facet); select Region from the dialog list as shown in the following screenshot:

  16. Run the page by clicking on the Run button (the green arrow) and run the employeesTable.jsf page, which looks like the following screenshot:

You can see from the layout that you have multiple options, such as filtering and sorting, which are used to hide columns from the View menu or detach the table to view it in a pop up that consumes the whole screen; you can try changing different properties in the Appearance section of the ADF Table to see how they effect its display.

How it works...

To understand how ADF Table works, let's view the source code of the employeesTable.jsff page fragment; you will find the structure is different from what the form is about. You can see the value attribute of the ADF Table referencing to the expression #{bindings.EmployeesView1.collectionModel}. The var attribute equals to row. These two attributes provide important information, but they also make you wonder: where are these rows? How are they resembled by the value attribute? How to represent multiple rows inside the table?

There are also other values such as Row Selection, Empty Text, Selection Listener, Selected Rows, Fetch Size, Filter Model, Query Listener, and Scroll Policy, which are optional properties.

To answer these questions, let's look at the structure of the table. The ADF Table component has multiple Column components inside of it, and you can see nested columns that represent the Groups feature of the table. So, you can find a column inside a column. The uppermost will be the group column, and the one inside will be the subgroup until you end up with innermost column that represents an actual column. Inside the innermost column, you will find the output text with a value, something like #{row.EmployeeId} or #{row.FirstName}. By opening the page definition, you can see that there are no row bindings inside the Bindings section, which means there is something else happening.

First, let's take a step back to understand the value attribute of the table, and to do that, let's go to the bindings view of the page and see what #{bindings.EmployeesView1.collectionModel} means. As you can see, there is something called EmployeesView1 in the Bindings section, and if you double-click on it, you can see that this binding is called a tree binding, which represents a table, tree, or basically any collection of rows inside a page.

You can also see that Tree Level Rules is pointing to the EmployeesView view object, and there is Display Attributes, which has all the attributes of the view object inside of ADF Table. Also, this tree binding is referencing EmployeesView1Iterator. If you have selected this, you can see on the Properties pane that it has range size of 25, which represents the number of records that you saw on a single page of the table. Also, the iterator points to the EmployeesView1 view object under the application module, which gives you the indication that this tree binding has a property called CollectionModel that corresponds to the attributes under the Display Attributes section of the tree binding.

Go back to the page source; now we can understand what the table's value attribute means; however, how can we target a specific column inside this CollectionModel? This is the role of the var attribute. It represents a single variable (row) inside the table, which means whatever the value of the var attribute is, you can use it to represent a single row value; if you want to display a specific column inside this row, you can just use #{varValue.columnName}, which is what the output text component is displaying.

The following are the attributes that the table uses:

  • emptyText – This attribute tells the table what to display in case there are no records.

  • rowSelection – This attribute represents the type of selection this table should have; you have three options: None, Single, or Multiple.

  • selectedRowKeys – This attribute indicates selected rows inside the collection model that indicates the selected row(s) if rowSelection is either Single or Multiple.

  • selectionListener – This attribute indicates an event that gets triggered every time you select a new record from the table and the selection listener, which by default executes a method called makeCurrent. This method changes the current row of the collectionModel inside the iterator, which means if you have a form and a table that point to the same iterator and select a record inside the table, the form should display the same record.

  • fetchSize – This attribute represents the number of rows in the data fetch block.

  • filterModel – This attribute is responsible for the inline filtering feature that you see when you enable the filter. This is the query that gets executed when you enter some text in the filter's textbox and hit Enter. This points to #{bindings.EmployeesView1Query.queryDescriptor} in the Executables section in the Bindings view.

  • queryListener – This attribute indicates an event such as selectionListener, but the filter executes every time you hit Enter on your filter textboxes.

  • scrollPolicy – This attribute indicates how the pagination in the table should work; there are two policies, either Scroll or Page, and you have to have a non-stretchable parent in order for page's scrollPolicy to work effectively.

  • varStatus – This attribute indicates the status of the var attribute which focuses on getting the status of the current row and not the row data, that is, information such as index number, count, and step.

Instead of having the inline filter of ADF Table, you could replace it to have another component called search form. You can learn all about it from http://docs.oracle.com/middleware/1212/adf/ADFFD/web_search_bc.htm.

You might wonder where sorting is occurring in the table attributes, but sorting is something up to the column itself not for the table as a whole. So inside the column, you will find properties such as sortable and sortProperty that tell the column what is the name of this column field in order to sort it; also, inside the column, you can change the headerText attribute or change other properties such as the alignment attribute of the column.

Surrounding the table with the Panel Collection component—which can surround any collection of components such as tables, trees, and tree tables—will provide a container for these components. It can also provide more functionalities to interact with the table, such as detaching the table to view it fullscreen, removing the filter, hiding columns, or reordering columns inside the table. You have the option to add more to the toolbar or the menu by using the Panel Collection facets.

See also

To know more about ADF Tables, check the reference documentation at http://docs.oracle.com/middleware/1212/adf/ADFFD/web_tables_forms.htm.

Oracle ADF Faces Cookbook Over 80 hands-on recipes covering a variety of ADF Faces components to help you create stunning user experiences with this book and ebook
Published: March 2014
eBook Price: ₨1,649.99
Book Price: ₨2,749.99
See more
Select your format and quantity:

Presenting multiple records using ADF List View

In this recipe, we will get to know how to present multiple records at once using the ADF List View component, which is pretty similar to ADF Table with some minor differences.

If you don't care about sorting or filtering and you want to have more control of how the rows look, ADF List View is the component to use.

ADF List View is a newly introduced component starting from release 11.1.1.7 in the 11gR1 release stack and 12c.

You can continue from the previous recipe or you can grab this project's recipe by cloning the PresentingMultipleWithListView application from the Git repository.

How to do it...

To present multiple records using ADF List View, follow the ensuing steps:

  1. Create a task flow and a view page fragment like the previous recipe, but this time, change the following attributes:

    1. Task Flow name: multiple-employees-info-list.

    2. Create with Page Fragments: Checked.

    3. View name: employeesList.

    4. Page Fragment Directory: public_html\fragments.

    5. Page Fragment Layout: Create Blank Page.

  2. Navigate to Data Control pane | HrAppModuleDataControl, drag-and-drop EmployeesView1 inside the page fragment, select Table/List View from the list, and select ADF List View... as shown in the following screenshot:

  3. A dialog will open up asking about the list view layout; this is really important as it depends on how you want to present your data. If the attributes of the row are stacked vertically, you should choose Panel Group Layout (as shown in the following screenshot); if they are taking the whole width of the page, choose Panel Grid Layout; if you have a master-details view object, you may want to choose the last option.

  4. Select the Panel Grid Layout option for this recipe, as it'll give you a good introduction to the panel grid layout component that is newly added to Oracle ADF Faces and is great to work with.

  5. Click on Next to specify how the panel grid will look and how many columns and rows you want; arrange it in three columns: Personal Information, Job Information, and Department Information. Choose four rows to display up to four attributes inside the same column. Leave the margin between columns as is.

  6. Click on Next to identify how much space each column should have. Change the value of the first column to 50% and 25% for the other two. Specify the span which can be useful; because the last column only has two attributes, so create a span from gc2,3 (grid cell (2,3)) to gc4,3 so that you end up with only two rows inside the last column as shown in the following screenshot:

  7. Click on Next to bind your cells to your attributes by changing the Value Binding attribute. In the first column, select First Name, Last Name, Email, and Phone Number in gc1,1, gc2,1, gc3,1, and gc4,1 respectively, which have the gcn,1 form.

    In the second column, select Job, Hire Date, and Salary & Commission Pct in gc1,2, gc2,2, gc3,2, and gc4,2 respectively, which have the gcn,2 form.

    In the last column, select Manager Id and Department Id in gc1,3 and gc2,3 respectively, which have the gcn,3 form. You should end up with the following screen:

  8. Click on Finish to close the dialog.

  9. Examine the Structure pane; you can notice that the list view consists of a list item that represents a single row inside the panel grid layout; you can easily spot the similarity between list views and tables, as is evident from the following screenshot:

  10. Surround the ADF List View with the panel accordion by right-clicking on the list view from the Structure pane; then, click on the Surround with… option, select Panel Accordion from the list, and click on OK.

  11. Drag-and-drop af:ListView inside af:showDetailItem from the Structure pane.

  12. Select af:showDetailItem from the Structure pane and change the text attribute value to ADF List View.

  13. Surround the ADF List View again, but this time with the panel group layout, by right-clicking on the list view from the Structure pane, clicking on the Surround with... option, selecting Panel Group Layout from the list, and then clicking on OK.

  14. Select af:panelGroupLayout from the Structure pane and change the layout attribute value to scroll; this will enable the ADF List View to have scroll inside the panel accordion.

    Now we have finished creating the list view; let's go and put the task flow under a JSF page to run and test it.

  15. Open the faces-config task flow under the WEB-INF folder.

  16. Drag-and-drop a view activity inside faces-config.

  17. Change the name to employeesList.

  18. Double-click on the newly created activity to create the page and select Oracle Three Column Layout as the page template.

  19. Drag-and-drop the multiple-employees-info-list task flow from the application navigation inside the employeesList.jsf page, which is inside the white area of the page template (center facet), and select Region from the dialog list.

  20. Run the page by clicking on the Run button (the green arrow) and run the employeesList.jsf page, which looks like the following screenshot.

  21. When you run the page, you will notice a link at the end that displays Load more items; this is the pagination option. When you click on it, you can display the next 25 records or the number of records mentioned in the fetchSize attribute.

How it works...

Under the hood, the ADF List View behaves exactly like ADF Table, except that it looks different. So, if you opened the source view, you would see that the same attributes are in ADF List View. Attributes such as value, var, emptyText, and fetchSize look and act similar to ADF Table; however, this time, instead of having a column, we have a list, so you get the data from an item instead of a row.

As you know, rows and items are irrelevant. You can use any keyword to represent a single record; however, in ADF List View, item suits the context more, while in a table, row suits the context more.

Also, having panel grid layout is totally irrelevant; you can add any ADF Faces component and organize it the way you see best fit, but panel grid layout can make sure that everything looks nice inside the list view component.

We surrounded the ADF List View with panel accordion and panel group layout. The panel group layout is necessary to provide scrolling capabilities of rows inside the panel accordion.

You haven't seen the panel accordion in action yet. In the next recipe, we will see how panel accordion works in more detail.

Summary

In this article you have learned how to enable the internationalizing and localizing processes in your application by using a resource bundle and the different options of bundle you can have.

Resources for Article:


Further resources on this subject:


About the Author :


Amr Gawish

Amr Gawish began his career at the age of 18, working as a web designer before entering college. He is very passionate about technology and always tries to push the limits of the technologies he uses.

He completed his bachelor's degree in Math and Computer Sciences from Al-Azhar University in Egypt and is currently persuing his master's at the University of Liverpool. He is currently employed as an Oracle Fusion Middleware consultant and is certified in Java SE 7, Oracle ADF, WebCenter Portal, and Oracle SOA Suite. He has worked with all these products and the rest of the Oracle middleware stack for more than six years.

He has also gained a fair amount of experience in various other topics such as Gamification, Scala programming, and Akka and is currently working on microcontroller programming with Raspberry Pi and Arduino and robotics.

You can learn more about him by visiting his website, www.amr-gawish.com, or follow him on Twitter (@agawish).

He is currently working with infoMENTUM (www.infomentum.com), which is an Oracle Platinum Partner; a leading company in Oracle Fusion Middleware; and the first company to specialize in WebCenter (both content and portal), Oracle SOA, ADF, and Java in the EMEA region.

Books From Packt


Oracle Enterprise Manager 12c Administration Cookbook
Oracle Enterprise Manager 12c Administration Cookbook

Oracle E-Business Suite R12 Integration and OA Framework Development and Extension Cookbook
Oracle E-Business Suite R12 Integration and OA Framework Development and Extension Cookbook

 Oracle ADF Enterprise Application Development – Made Simple: Second Edition
Oracle ADF Enterprise Application Development – Made Simple: Second Edition

 Oracle ADF Real World Developer’s Guide
Oracle ADF Real World Developer’s Guide

Developing Web Applications with Oracle ADF Essentials
Developing Web Applications with Oracle ADF Essentials

Oracle ADF 11gR2 Development Beginner's Guide
Oracle ADF 11gR2 Development Beginner's Guide

Oracle ADF Enterprise Application Development—Made Simple
Oracle ADF Enterprise Application Development—Made Simple

Oracle SOA Suite 11g Developer's Cookbook
Oracle SOA Suite 11g Developer's Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software