Lists

Some applications need to organize various types of information into lists. The HP webOS platform contains many design options from which to build lists, including the use of many UI widgets. Some lists allow the user to select only one item, and others allow multiple selections. Also available are filter controls that sort the entries in the list according to what the user types in the text field.

The following table provides additional information with image examples.

Type Description Example
Filter

This control includes a text entry field with a list. The user does not need to tap the text field – the text field opens with the first typed character. Start typing to filter the list to show only the items that match. The match is against any text in the list, not just the first word in each line. The number of found matches is noted to the right of the field. Use attributes in the FilterList widget to specify how to display the results. Implemented by using the Mojo.Widget.FilterList API..

Example: In Contacts, with a full list of contacts displayed, begin typing on the keyboard. The list is filtered based on the typed entry.

Filter field This control accepts text input and passes it to any specified list. Implemented by using the Mojo.Widget.FilterField API with the palm-group attribute. Use the filter field to process the text the user enters, and display the results however you want.
Group box list Surrounds the list with a border. Most group boxes have titles, but they are optional. Commonly implemented by using the Mojo.Widget.List API with the palm-group attribute.
List Displays a set of available choices where the user can select only one item by tapping it. In a simple list, tapping anywhere in the row leads to a scene displaying details (e.g., the first scene in the Tasks 1.0 app). In more complex lists, each row can contain several different elements, each of which processes a tap differently.

Example: At a movie website, each row might contain a thumbnail of the movie (tap it to watch the trailer), followed by two lines of information to the right (i.e., the movie name on line one, rating on line two, which are not tapable for easy scrolling) and a button to the right, which the user taps to read more details.

Implemented by using the Mojo.Widget.List API, with contents in palm-rows, and by using various options including:
  • Add another item to the list
  • Alphabetical dividers
  • Drag to reorder items
  • Static or expandable/collapsible dividers
  • Swipe to delete items
Multiple selection list This list displays a set of available choices. The user can select muliptle items by tapping them. Implemented by using the Mojo.Widget.List API with the palm-list attribute, with a check box in each palm-row.