Mail/Login: Password : forgot my password!

Triggering pressed keys on elements

Direct link
Written by -GHAN- // Tags: triggger key press uniface dsp usp

Today i stumbled upon a new wish, hoping to get extra triggers into the DSP component. Those desired triggers were "onKeyPressed". As Uniface doesn't offer this in the normal environment, we need to fix that delta individually.

What Uniface has

is at the moment a "start-modify-trigger" (at least as I know). This is fired, when you start to edit in a field. The event is only fired once at the moment. Every next modification won't get recognized (in a fair way). Apparently we can't change this in the forms. BUT ... we can while doing web!

Adding a Trigger

Compared to the forms, web techniques offer a limited set of triggers. While talking web, triggers will be called events, as they simply happen. Sounds simple, is simple. Allthough JavaScript is supposed to be primitive it offers some comfort. Every Element (node) in the html-code can have a bunch of triggers attached. I will skip the deep-down-below details on that and head over to straight business. We need to attach an event.
What event we need depends a bit. Let me introduce you to three of those, who takes care of the keys we press:

- keydown : fires, when you push the key DOWN
- keypress : fires, WHILE the key is PRESSED
- keyup : fires, when you STOP PUSHING the key

Which one you want to use may be up to you. My advice is to choose the keyup, because it fits the best. And still this is only an advice.
Next we need to declare, that we want do catch this event an react on that. We can do so with bunch of functions but in my demo we will take a very basic on from back in the days and one called MyElement.addEventListener(_event, function-to-handle-that, false); for standard browsers.

IE has its own way *sigh*: MyElement.attachEvent("on"+_event, function-to-handle-that);

The Scenario - quick and dirty

Let's say we have that special element in our server page and want to react on a keypress on that. That element need to have an ID in order to know what to assign and catch. I will call this field order.dummy.
Sorry- ... please log-in or register to get this!

As you can see, the tag has an attribute called onkeyup which points to a JavaScript function called do_what_ever() and delivers a parameter called this.value. We will take a close look at the function a bit later, but first some words about the parameter. this.value points to the value of order.dummy because it is witten within the element. So this.value equals document.getElementById('order.dummy').value. The lazy bastard in me prefers the shorter version of course :)

Defining a function handling "onkeyup"

What does it have to do?! Hmm... actually this depends upon you. My demo will be cross-browser stable and a good point to start at.
embedded JavaScript SOURCE CODE
Sorry- ... please log-in or register to get this!

Sorry- ... please log-in or register to get this!
So this little code takes the value of the field and puts it to the title (or ToolTip) AFTER having pushed the button! To show the timing, I placed an alert("NOW!"); after we enter the function. If you like this, head on and modify it to your own needs while I prepare to get a bit more sophisticated.

Variation II: all the features of the event

It's Time to evolve to the level of an real webworker. Take a sharp look at the source, that I've modified a bit.
Sorry- ... please log-in or register to get this!

I did test this on my FireFox and an IE (8, in Quirksmode, IE7 mode) so this should do. If your IE6 bails out then shame on you! Go update that damn thing! NOW!

Besides the testing there are some more words to say here. At step 1) we shortcut our field to stay handy with it. This is an option and not mandatory.
Sorry- ... please log-in or register to get this!
Step 2) attaches the event keyup on the element order.dummy to get handled in the function do_what_ever2(). As stated in the source, be aware of this time it won't transmit the value of the field but all the other informations about the event.

Step 3) finally tries to figure, what kind of browser we have. The standards are clear but IE needs an extra hand to solve it. Having done that, we build up a string containing the data of the event. This is transportet to the div-tag below the order.dummy as an output.

Now we are capable of attaching events to any element in our source. It doesn't matter if it is USP, DSP or just Html. To use it, you'll have to copy the stuff into your (html) source.

What happens next!?

Well, as i said: it's up to you. Maybe you want to transfer some stuff in to Uniface or get some from there?! Then you will need Ajax. How this works is demonstratet in my other tutorials here. Take a look at Part 3 What is Ajax. It takes a standard USP and shows how to do simple Ajax transfers forth and back.

Happy testing!


2089 view(s) / 2010-03-16 22:33:03 / LAST UPDATED: 2011-07-13 15:26:03