In this lesson, you use the DataGrid widget to create a table. The DataGrid widget has advanced capabilities for interaction and visual presentation that make it preferable to the GridLayout widget for displaying an array of records.
In lesson 4, you dragged a record variable onto the editor to create a GridLayout widget. In this lesson, you drag an array of records onto the editor, which by default creates a DataGrid widget.
historyResults



selectionMode = DataGridLib.SINGLE_SELECTION,
The
specified value ensures that the user can select only one row of the
grid rather than multiple rows. selectionListeners ::= cellClicked,
You just updated a listener property, which takes an array of functions that run in array-element order. In particular, you appended a function to the array of functions associated with the selectionListeners property. You will code the new function later in this lesson.
The listener functions run in response to a user action, such as a click or, in some cases, in response to a function call that selects or deselects a row or that updates a check box.
, alignment = DataGridLib.ALIGN_RIGHT
For
example, the declaration for the Principal column now looks like the
following code:new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
alignment = DataGridLib.ALIGN_RIGHT},
, formatters = [ formatDollars ]
The
entire declaration now looks like the following code:new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
alignment = DataGridLib.ALIGN_RIGHT, formatters = [ formatDollars ]},
, formatters = [ DataGridFormatters.percentage ]
, formatters = [ formatDollars ]
The
code now has the following content:
In general, the formatters property takes an array of function names. The functions can be predefined, or you can write custom functions. For example, the percentage function is provided in the DataGridFormatters library that is included in the com.ibm.egl.rui.widgets project.
InfoBus.subscribe("mortgageApplication.mortgageCalculated", addResultRecord);
As
before, you use the InfoBus to invoke a function when the service
returns a new calculation.// Update the grid to include the latest mortgage calculation
function addResultRecord(eventName STRING in, dataObject ANY in)
resultRecord MortgageCalculationResult = dataObject as MortgageCalculationResult;
historyResults.appendElement(resultRecord);
historyResults_ui.data = historyResults as ANY[];
end
Here, you cast an incoming value to a MortgageCalculationResult
record. You then append the new results to array of results and update
the data property. That update causes the
widget to refresh.// Publish an event to the InfoBus whenever the user selects an old calculation
function cellClicked(myGrid DataGrid in)
updateRec MortgageCalculationResult = myGrid.getSelection()[1]
as MortgageCalculationResult;
InfoBus.publish("mortgageApplication.mortgageResultSelected", updateRec);
end
The function retrieves the data-grid row selected by
the user and provides that row to the Infobus. The Infobus in turn
invokes a function in any handler that has subscribed to the event
named “mortgageApplication.mortgageResultSelected.”function formatDollars(class string, value string, rowData any in)
value = mortgageLib.formatMoney(value);
end
The value of the second parameter is available to the
EGL runtime code because the parameter modifier is InOut by
default. Note that you are reusing the formatMoney function from the mortgageLib library.
In the next lesson, you integrate this handler with the rest of the application.