GHANIFIED! examples - advanced searching with autoupdate

RIA goes more and more popular as people invent new stuff all the time. In this contribution I will take a focus on the famous auto updated searching. This Example shall give you an idea on how to solve this with a Uniface USP component.

Origins and where we use this

Well ... Google does is, Microsoft as well and many other toolkits have a capable widget too. But let us use Google as a example on how we use this very often.As you start typing, the first fitting results are brought back to you offering a possible search result. This is quiete fancy and very appreciated, because we don't need to type in the complete phrase of what we are searching for.

The technical aspect

With every character we type into the search field, a new request is launched into Uniface (or whatever BackEnd is on duty). The cheap trick is to modify a retrieve profile (stop laughing, I know this is not rocket science :) ) with every new character entered. This produces some traffic on the DBMS but well ... this is fancier than every trigger within Uniface forms and makes our software smarter :))

Live example

The example will pick the first 10 hits on what you type and put the result into an output container below the input field. Keep in mind, that these are only demo values and I dont keep a million occurences ready to proof my stuff (*big smile to George*). At the moment we have about 250 words in store :)
Sorry- ... please log-in or register to get this!

The details

Basicly we have a JavaScript function "ghan_seek()" waiting to pass the searched phrase over to Uniface. It delivers the phrase via AJAX. All the AJAX is done by GHANIFIED! which leaves time for you to bother with other things. Having finished that then calls another tiny JavaScript function "ghan_show()" to show the reply from Uniface in a DIV tag with the id "ghan_output".

To start those scripts, I choosed the onKEYUP event. It fires when the finger leaves the key. Unfortunatly it also fires when you use SHIFT, ALT, STRG etc. This would cause Uniface to be bombarded with parallel request, which obviously are unnecessary. To filter those events we buffer the last requested phrase in the JavaScript (global)variable called vLast_Request. If the phrase not differs, we take no action on this event. And thats all for the frontend. Just insert the following code somewhere in a html page.

SOURCE CODE

Sorry- ... please log-in or register to get this!

Uniface takes the request and builds a retrieve profile with the given phrase. Each occurence is buffered in a STRING with desired format. This could be html, json, xml or simple text. For my example I took plain text. You will have to put the output into $webinfo("output").

Consider to make an operation within your Uniface server page beginning with "ajax_". Naming those operations like that makes it easier to scope. I will here name it "ajax_get_phrase". Putting the code into an operation leaves us the option of adding more function to it, without having to many if-param-x-is-then-do statements in the EXEC() trigger!

SOURCE CODE

Sorry- ... please log-in or register to get this!

Further we need to tweak the READ trigger a bit, in order not to stress Uniface to much. We just want 10 occurences in each poll! Therefor we take a component var $MAX_OCCS$ (numeric) holding the amount of wanted occurences. If this is set to 0, the read trigger will do a normal read. If not, it will try to get a maximum of $MAX_OCCS$ occurences.

SOURCE CODE

Sorry- ... please log-in or register to get this!

In order to get the maximum speed out of this server page, whipe the GETSTATE and SETSTATE trigger! All this together finishes this example.

Thanks for reading!

Comments

on 2011-10-27 14:52:21 osie wrote:

I managed to extend my html knowledge with the above example but even better it all simply works.. wow.. html, ajax and a usp (called with input, data retrieve, and output RIA stylie).
I did it without Ghanified just to fully understand what is going on in the background.