On Java Development

All things related to Java development, from the perspective of a caveman.

Display Pop-up Dialog on Table Record Select

without comments

Introduction

This post illustrates how to present a Rich Faces popup panel when a record in a Rich Faces data table is selected. There’s a lot going on in this process. This post will break down the events that occur to show it isn’t all that complicated.

 

The Table

Shown below is the table containing an “Action” column that has two icons. When the first icon is selected a popup panel is displayed containing detail information for the record displayed on that row. When the second icon is selected a similar popup panel is displayed that allows for certain values to be changed. The focus of this post will be about the first icon which simply displays the detail information. (The sensitive parts have been redacted.)
PopupPanel04

 

The Data Table Code and Events

The image presented below attempts to show the moving parts of the process evoked when the icon is selected.
PopupPanel05

  • A. The code here defines the information needed for each iteration of the collection of records to be displayed. This can be thought of as the “for()” segment of a “for-next-loop“. The records are pulled from the managed bean’s property containing the records to display using this entry:
    value=“#{page01ManagedBean.listOfRateFileXPolicies}”
    At the top of each loop, a record is being pulled from the collection and assigned to the variable “record“.

  • B. Each time the column containing the icons is rendered, the value of the whole record is attached. This provides the mechanism to isolate each column of the selected row for further processing. As an alternative, a designated column value could be assigned. For example, the assignment value=”#{record.policyName}” would attach the value for the policy name. This would then return only that value instead of the whole record to the method that is called when the icon is selected.
  • C. At this point in the timeline, all records have been processed by the loop and the table is displayed. This line links the icon in the column definition’s property action listener method that is called when the icon is selected. When called, it also passes the value in the record.
  • D. This is leading to the property action listener method, shown in the section below.

 

The Property Action Listener

Shown below is the property action listener that is called when the icon is selected. It receives one parameter for the row’s record. While the xhtml the table code referenced it as record, it is referenced as viewedRateFileXPolicyRecord by this method. The values are the same, of course. The record contains the column data display, without the actual values for the icons of the “Action” column. See the method’s comment header for details.

 

The JavaScript Execution

The method above has completed its processing by isolating the value in recordId, passing it to the stored procedure call and retrieving the record, now contained in the class-level property ratinc2sRecord . At this point, control is returned back to the table data code previously shown where the events described below take place.

  • E. This entry
    oncomplete=”#{rich:component(‘id-viewRateFileXPolicyRecordDialog’)}.show()”>
    assigns the JavaScript to be executed when the method above completes. The code is responsible for displaying the popup panel to show the record retrieved by the stored procedure to the user. The code for the popup panel is shown below.

  • F. This entry tells Rich Faces to render the data. Without this entry, the popup panel is displayed but the data is not.

 

The Popup Panel Code

This is the code for the popup panel. Note the referenced ID on line 7 and used to display the panel (depicted by Event E.). The
outputText lines such as the one shown on line 19 makes a reference to the class level property ratinc2sRecord to then reference each property within. This is the mechanism used to present the field data onto the popup panel.

 

The Popup Panel as Displayed

Finally, the popup panel displaying the information for the selected record.PopupPanel06

 
 

Display Pop-up Dialog to Allow Editing of Selected Records

Shown below is the pop-up dialog that allows editing of a record that has been selected from the table. Error messages are displayed to the right of the input-capable fields that require entries.
PopupPanel08

Shown below is the JSF/Rich Faces code required to display the dialog above. There are several design constraints being addressed.

  1. For the update button to cause the method in the managed bean to be called, the panel grid must be within a form.
  2. The fields are defined as inputText, otherwise nothing is sent back to the managed bean. CSS elements are used to gray out the input area to convey the idea the component is protected.
  3. To actually protect the fields to make them display only, the use of a JavaScript call to the component’s blur method causes the focus to be immediately lost. This mimics read only behavior for fields that cannot be changed while still allowing the data to be passed to the managed bean. The astute reader would be wondering why the component’s readonly attribute wasn’t used. This is because when it was employed, again, no data was sent back to the managed bean.
  4. To make them stand out a little more, styling is applied to the input-capable fields so that they are presented with a black border.

 
Much like the previous dialog that only displays the details of the selected table record, the design of this dialog uses a panelGrid (line 16) split into 3 columns with each column being defined with specific widths using CSS classes.

The left-most column contain the field literals (h:outputText), the middle contain the values (h:inputText) and the right-most column contain the error messages (rich:messages) for input-capable fields.

For the output-only fields, there are no error messages and since the column still has to be filled with something or the formatting goes all haywire, a h:panalGroup is used.

Written by admin

May 29th, 2014 at 5:02 am