Ted Patrick - Demos & MAX @ Adobe Systems


Note: This is the personal blog of Ted Patrick. The opinions and statements voiced here are my own.



Filtering UI Data in Flex

DIGG IT!     4 Comments Published Friday, July 14, 2006 at 8:42 AM .

There is a very useful UI pattern emerging for RIA applications in terms of filtering results. Basically as a user enters data and results are filtered in real time. I have seen many cases of this recently in several applications and thought highlighting a few would be useful.

Slider Based Filtering:


HomeLocator by ASFusion

Flex Store(view Products)


Text Input Filtering:

YouTube.com Live Search by Kirk Ballou

FlexJax Search (php/mysql) $$

Search Grid Component by Uday M. Shankar

Apollo Tunes by Mike Chambers


What I find interesting about these examples is that filtering simplifies the amount of visible data. Filtering removes irrelevant data from view and allows the end user to focus and work within the remaining data. The slider model allows you to set high and low bounds on the viewed dataset and the text input provides search results. It will be interesting to see changes to this pattern as we see many Flex applications appear publicly.

More to come!

Next post is "Custom Pre-loaders for Flex 2"!

Ted :)

4 Responses to “Filtering UI Data in Flex”

  1. # Anonymous James Edmunds

    I have done this in Prototype (which has the handy formobserver class), and am poking around with tying to to Spry master/detail regions, now that Spry is compatible with Prototype:

    http://www.pasa-online.org/volunteers/p1.cfm  

  2. # Anonymous Bjorn Schultheiss

    Hi Ted,

    We found that this filter data process was a big help even in Flash.

    Especially with managing complex data transactions with the server it was easier to take a snapshot of an area of the model and push it to the server for evaluation.
    By filtering the data straight to the model using component's change handler you knew that the model already had the most up-to-date values.

    I have been contemplating how this process can be enhanced with FDS. Perhaps we can remove the client side model and communicate straight from the component event to the back-end. Maybe we can avoid having to translate server data to a client side model.

    Is there a way of easily setting up dataBinding between a ui component and a server Value Object?


    Regards,

    Bjorn  

  3. # Anonymous udayms

    Hi Ted,
    In this post, you had quoted my component and that was very much inspiring and encouraging.

    I have updated the searchgrid with a few bells and whistles. :) . its available at http://flexed.wordpress.com/2006/12/26/customgrid-v10-or-searchgrid-v20/ and the demo is @ http://udayms.com/flex/cgrid/UseCustomGrid.html

    Cheers.  

  4. # Blogger Fabien

    Hey,
    i created a Flex Library (DataFilterLib) that take care of all the filtering process, completly in MXML.
    This library is free, you can find the project details there:
    http://code.google.com/p/flex-datafilterlib/
    If you want to have a look at the examples, they are all there (source available):
    http://www.flex-tutorial.fr/DataFilterLib/examples/
    Using a few tags, you can easily get rid of the AS3 code of your example.
    Check the examples online if you want to see how to filter on multiple criterias, using different Flex UI Components (CheckBox, Slider, List, ...).

    Thanks,
    Fabien
    http://www.flex-tutorial.fr  

Post a Comment

Where to find me:

Ted on Twitter - @AdobeTed
Ted on Adobe Groups
Ted on LinkedIn
Ted on Facebook
Ted at Adobe


Latest

Lists

Links

Jobs

Flex Jobs
city, state, zip

Archives