http://www.udev.info
Mail/Login: Password : forgot my password!
[UPDATE MODE]
Back

Handling Inputs from the web with Uniface

Direct link http://www.udev.info/uniface/handling-inputs-from-the-web-with-uniface
Written by -GHAN- // Tags: uniface input html widget select dropdown checkbox

In this contribution we will take a look at the inputs coming from the web into Uniface.

Input types and widgets

HTML offers not that wide spectrum of input types at this time. Only seven basic types are given. We will take a walk through those in a minute.
But before that, I want to mention that everything else is customized. Tree-widgets, Drag-and-Drop, moveable windows ... all that is derived from the basic set mentioned above. The difference is, that these special widgets have additional triggers, functions and features which are handled in JavaScript.
If you one day need a special widget, then don't go looking for it. Just do it! ;)

What they have in common

Every type of input field needs a FORM that it belongs to. Remember that! Without a form the input is obsolete and senseless as nothing can be transmitted with it ( ... allthough this rule can be overridden, but don't do that!)

Simple Text Input

Sorry- ... please log-in or register to get this!
Each of us knows those because nearby every input field is using this. Sometimes they are made eyecandy or a bit more plain than the default defined in your browser.
The text input is defined by an input tag. The type attribute tells the browser to render it into a editable text field. Within Uniface this would be some kind of Editbox.
SOURCE CODE
Sorry- ... please log-in or register to get this!

As you can see, there are some attributes on that input there. I defined a name and an id in order to stay flexy with that. It's an good idea to let the name and id be the same. Then there is no dought in what to call or use. Keep in mind that names doesn't have to be unique but the id has to!

When we get this text field in Uniface, then it is in the $webinfo("input") list as a normal list id. Simply pick it out of the list and do what ever you have in mind with it:
SOURCE CODE
Sorry- ... please log-in or register to get this!


The select widget

Sorry- ... please log-in or register to get this!
This is the same as the DropDownList in Uniface. Within HTML we call that a select widget. It contain Options instead of Valreps. But aside from the wording this is the same.
The select widget is defined with a select tag having one or more option tags in it.
SOURCE CODE
Sorry- ... please log-in or register to get this!

The option which is picked in the select widget will give the value. choosing "first Valrep" will deliver the value "1". In Uniface, we get the value in the same way as already before. Our friend $webinfo("input") has a list entry on that ...
SOURCE CODE
Sorry- ... please log-in or register to get this!


The checkbox widget

Sorry- ... please log-in or register to get this!
Checkboxes are nice. These tiny ones can only hold two states: checked or unchecked. Within Uniface there is one more state, but the html can't serve this. So we take checked and unchecked as is. Like the other widgets, a checkbox can hold values. But these are only delivered when the checkbox is checked, of course. If the a checkbox isn't checked, it will not deliver a value to us.
But there is more about this one. You can group many checkboxes with different values and check or uncheck as many as you want. Sounds like total anarchy to you? Perhaps, but we do need them in the way they are. Let's have a look at, how they are defined within the HTML code:
SOURCE CODE
Sorry- ... please log-in or register to get this!

Having said, that there can be multiple values on one NAME / checkbox gets us into a special situation. Uniface is not willing to make this easy for us, so we need to give it a hand on that. What we know is (... or should know ...) the NAME of the checkbox, as it is identified by that. As usual its values are held in $webinfo("input") but due to the multiple values in multiple list items. The following code will solve this for you and put it together to separated list which makes it easy to deal with:
SOURCE CODE
Sorry- ... please log-in or register to get this!

This should help you out :)

The radio widget

Sorry- ... please log-in or register to get this!
The radio follows the checkbox almost completely. The only difference is, that only ONE element can be checked or selected. Ergo is only one value returned. Try to change the type checkbox in the previous checkbox example to radio and look how it behaves.

The file widget

Time to get more sophisticated as we take a look at the file widget now. This will let you understand, how to get files loaded into Uniface via the browser.

The file widget adds to elements to the form. First is a field wherein the filepath and name will be listet. Next comes a button (sadly a standard one) which opens a file-picker dialog.
Sorry- ... please log-in or register to get this!
Thats nearly all from the web setup. We will have to take a close look on the Uniface side of that. This is a bit crappy as we have to do some workarounds to get this running. And yet, we will like it afterwards :)

Let's add a file-widget in the component editor...

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

As you see, the code is reduced to the absolute minimum. We need this definition of the file widget, because else Uniface will not map the transmitted file into the right buffers (or in other words: You won't get the raw file data as desired!).
Having done that, we need to pass the stuff from $webinfo("input") to the file widget in Uniface!
SOURCE CODE
Sorry- ... please log-in or register to get this!

Uniface needs this procedure in order to handle incoming files. I did try several other methods like a filedump/raw vMyFile, $item("myfile", $webinfo("input") ) and failed. In theory this should be possible somehow as the browser sends the form data completely with the encoded file. But I assume we won't get our hands on that, so we will take the workaround to solve this.

Guess that's it for now ... questions and comments are very welcome.

/EDIT: some corrections on the checkbox code (THX Chriss)

Comments

916 view(s) / 2010-02-22 14:11:54 / LAST UPDATED: 2011-07-13 16:07:05