Rapide provides a number of options for enhancing the look and feel of listboxes:
- Graphical Data - listboxes can contain graphical data, either from bitmaps or BLOB views
- Tree Controls and Checkboxes - standard Gen listboxes can be easily displayed as a tree control
- Overlay Controls - allow in-cell editing of listbox data
- HTML Markup -format cell data using HTML
- Row Templates - sophisticated layout
- Grid Layout - use a dynamic grid
- Fixed Columns - useful when the listbox has horizontal scrolling
- Enterable Listboxes - type new rows directly into a listbox
- Pull to Refresh control
- User interaction to allow column resize, re-position, visibility and sorting
- Methods for changing column headings in action diagram code
Graphical Data
In the example below, bitmaps have been used in listbox columns to show a picture of the selected resource. The image is dynamically loaded based on the data in the Gen group view. The image can either come from a static resources file containing the images or from a BLOB view with Gen 8.5 or higher.
A simple Y/N column has also been converted to display a checkbox, which is much more intuitive to the user indicating that the cell can be clicked to tick/un-tick the checkbox.
Column sizes can be changed with a simple mouse drag on the heading and rearranged by dragging the column to a new position. The user can also sort on columns by clicking on the column heading.
Tree Controls and Checkboxes
With Rapide, listboxes can also be displayed as tree controls and also have a selectable checkbox as shown below.
Overlay Controls
Rapide's overlay control option allows you to 'overlay' the contents of a cell with an editable control. This could be a simple text field, a push button, drop-down, date picker, slider, spinner, etc.
In the example below, various columns contain editable controls, for example a spinner, checkbox, date picker and drop-down.
The above example used the same overlay control for each cell in the column. In the example below, the overlay control in the cell is dynamically defined, allowing different cells in the same column to use a different control. This is especially useful for property sheets.
HTML Markup
Another feature for Rapide listboxes is the ability to use HTML markup to format the data in a cell. The listbox below is a standard Gen listbox which has been enhanced with Rapide. The data in the Model column contains HTML code that displays the picture and text with formatting markup which is then rendered. The data in the Retailer column is a simple HTML link which will open the link in a separate tab of the browser when clicked.
Row Templates
Row Templates provide a mechanism for sophisticated layout of listboxes on browser platforms.
With the row template style, each row consists of a single column with the Gen listbox attributes placed as cells within the row. Click events are supported on each cell and for browser platforms the cells can also contain HTML markup.
The example below shows a row template layout. Each of the cells is specified in a separate attribute of the group view and the layout defined using the Rapide Designer.
Grid Layout
A listbox can be displayed as a grid instead of a simple row-based listbox.
With a grid layout, the Rapide runtime automatically displays the listbox rows in cells, with multiple cells per line, according to the overall width of the listbox.
As with other types of listboxes, column data may be enhanced as images and sophisticated layout within the cell is accommodated with the same approach as row templates.
In the example below note how the layout adjusts automatically when the device is rotated and also the use of a pagination control to indicate how many pages are available.
 |
 |
Fixed Columns
When you have a listbox that contains many columns and the user has to scroll sideways to see all of the data, it is often useful to be able to fix the position of one of more 'identifier' columns on the left of the listbox so that these do not scroll, and hence the user is able to relate the data in the right most columns to the row identifier. Rapide now allows you to fix the position of one or more columns so that these do not scroll horizontally.
After scrolling to the right, notice that the Type and Resource columns are fixed in position:
Enterable Listboxes
This feature allows the developer to specify that listboxes on desktop and browser platforms have an additional blank row to enable the user to easily add new records into a listbox. In the example below, there are four rows in the group view, with a blank row available for the user to enter data into.
