By Duncan Mills on Jul 14, 2012
For a while now I've been playing with techniques in ADF applications which will produce a user experience that is more webby (if I can use that term) and less business application like. Some of this work can be seen if you look back on my postings on animation.
A recent challenge, in this vein, from one of the internal teams within Oracle, was to provide a search facility that would auto-reduce the results list in situe without the user having to press a button or link to trigger the search.
Now hopefully you're familiar with the component behaviour <af:autoSuggestBehavior> that will provide a drop down list below a test input that revises as you type. For example:
But that's not what I wanted here. In this case, I wanted the main search results to update as I typed - a feature you will find on certain popular search engines. As part of the process of putting this together, I found myself combining code and patterns from other prototypes that I've worked on and came to the conclusion that I could wrap all of this into a nice little demo application that actually shows several interesting techniques and patterns as well as the aforementioned auto-reduce.
Here's the screen, it's a simple search against ALL_OBJECTS in the database, and the features of it that I thought were interesting.
- The screen uses a fixed width centered display area, a fairly popular layout pattern for a lot of sites, including this blog.
- The images displayed by each row use a technique called the ImageMap Pattern to derive the correct image to display. I'll be talking about two variants on this pattern, the more interesting one of which using image sprites as a way to reduce your network traffic.
- Typing in the search field will (after a configurable delay) cause the query to be re-executed and a revised list displayed.
- We have a dynamic record count which shows the records shown out of the total.
- The list view here has a smart pagination bar which allows the user access to the start and end of the list without printing out every option in between.
- You can change how many records are displayed and hence the size of the pagination.
- Finally you can switch between row and icon views. This latter function is interesting because it's carried out client side to minimize the switch time.
The results of typing into the search screen would look something like this:
As you type, not only will the list reduce, but of course the pagination bar etc. will be updated to reflect the current result set size.
The icon view mentioned in (7) looks like this:
Over the next couple of weeks I'll be writing detailed articles on these various features, but if you can't wait to get started, you can download the sample from the ADF Samples project on Java.net: DRM004 - AutoReduce and Pagination screen