www.webOShelp.net

Get the latest on:webOS Developers' RSS FeedwebOS Facebook page webOS Twitter Feed

Home Getting Started with webOS The filterList widget

The filterList widget

A filterList widget is used to provide a list that is navigated with a search field; particularly one in which the list is filter in real-time as the user types characters into the search field. It displays a variable length list of objects that are built by a special callback function. This was the original interaction found on Google's homepage that launched the popularity of Ajax.

The widget is composed of a text field above a list, where the list generated by running the contents of the text field through an application-specific callback function against some off-screen data source.

The text field is hidden until key input is received. On the first keystroke, and every subsequent keystroke, the framework calls the function specified by filterFunction.

mojo filter list widget

filterFunction is similar to the itemsCallback function in the standard List widget, but in this case an additional argument is included: filterString. While the list is being built, the the the widget's noticeUpdatedItems() method can be called to update the list. This function can be called as often as you would like the updated list displayed to the user.

Since the data may take time to be filtered if the list is large, the filter list automatically displays a spinner while theh list is being built, then replaces it with an entry count when done.

Click here for an example of how to set up a filter list widget.

That's it for the filterList widget. Tomorrow we'll take a look at viewers - the ability to view web pages, images, audio and video in your application!

This is one of many daily development-related webOS articles. Grab the RSS feed to stay in the know!

Much of the information in this article was presented in Chapter 5 of Palm webOS by Mitch Allen.

 

0 Comments

    Add Comment


      • >:o
      • :-[
      • :'(
      • :-(
      • :-D
      • :-*
      • :-)
      • :P
      • :\
      • 8-)
      • ;-)