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

Uniface Entity Lister 2 - Multiple outputs

Direct link http://www.udev.info/uniface/uniface-entity-lister-2-multiple-outputs
Written by -GHAN- // Tags: ghanweb uniface ghanified! entity lister output ucgoup ucfield dict usp

Welcome back to part 4 oth the Uniface frontend templating series. By now we've had a whole lot of code to be placed, tested and tried out. This might scare you but let me tell you, that those codes are to be seen as the foundation of your freedom. Shape the entries to your personal flavour and reuse them.
So did I and what came out of that was GHANweb. The Service speeds up the development and so I find more time for more sophisticated stuff like C++ or the GHANFIED! JavaScript ToolKit.

In this contribution, we will take advantages of the GHANweb service boost the Uniface Entity Lister to do multiple outputs with the same code.

The main job is to put your data into html- ... not to type thousands of lines with proc code! As a matter of fact I do more coding for the application instead of the foundation. And it pleases me to be in control of what happens every second the system is running. The outputs are easy to look through as the template files are marked, from where they are loaded.

"erhm, could you please send me the source code from the browser, please?"

Usually this is enough and I do see whats wrong "in there". I do not need a wild test set- this is as easy as it can be for the customer and myself. This ensures me to react fast on the wishes of my customers and leaves the positiv impression for him.

Todays topic: Multiple outputs

Multiple outputs with Uniface USP
Multiple outputs with Uniface USP
As promised long time ago, I will show you how flexy a USP can be. Looking at the Image shows, what we are about to do. We will take some data from our entities and use only ONE Uniface Server Page to just transform the output into a desired format.

The new Entity Lister uses a bunch of things and as I wanted to proof that it really does work, I made a complete package of it. Entity Lister 2 works with a USP, takes some advanteges of AJAX and is supported by the GHANFIED! JavaScript ToolKit while all the default reuseable stuff comes with the use of the GHANweb Service v0.2. All this together is how I work and deal with Uniface and the web.

I have chosen four pretty common output formats, which easily can be extended or enhanced to you personal need. Further, we wont have to modify the source code of the usp in order to change to outputs! I promise :) But its necessary to understand, what happens inside the USP. Therefore we will dig a bit.

HTML, JSON, XML and plain TEXT

The above has different rules on how to be build and yet every type of output follows a description or ruleset. As long as we obey those rules, we will be fine.
As always we need two parts for every output format: The head and the (row)element(s)!

This is surely the first rule. Every Table has a header and possibly multiple rows! Every XML has a root element and a bunch of children. A JSON consists of an object with properties or nodes. And finally a plain text has a start and for every repeating element a line.

All in all its just a head and some elements, which are connected.

No matter what - It's only text!

And text is in fact easy to produce, right? Don't get the creeps by hearing those data formats. Not even Uniface will act as the show stopper here, as we are in control! And we want to put that generated text into $webinfo("output") to stay happy.

Templating

Templating is our way through this. We will make different types of template files to change the shape of the output. Of course, we could make a new MASTER CONTAINER or even a new server page for every thing but that would be to much work for such a job. Here we simply need some template files. The rest is done with GHANweb and templates.

Note:
Making whole new MASTER CONTAINER files and designs for a set of basic templates would be called skins because it covers the output seamless just like the skin covers your bones (a Template set is a skin).
Uniface wont care about what the output type is. This seems ignorant but a big advantage for us as we stay in control.

But back to our needed template files. We will now start to make those one after another. First is ...

1. The HTML template files

We start off with the output templates. All these templates should be stored in the template directory under the folder ENTITY_LISTER (or more detailed: $componentname).
You've seen that already in the previous episode of Uniface frontend templating. We have a Table and within that, there are rows.
HTML HEAD SOURCE CODE
Sorry- ... please log-in or register to get this!
Let us call it : "output_html_head.htm"
Nothing special here, I guess. Next we make the element file:
HTML ELEMENT SOURCE CODE
Sorry- ... please log-in or register to get this!
And this is : "output_html_element.htm".
Those two guys will be connected by replacing !ELEMENT_DATA! in the head with all occurences made usind the element template. Both together will form the HTML output in a fine way.
Save those files in the directory, where your server page can load them.

2. The XML template files

If you expect any ridiculous here, then think again. I will make a very simple structur and you may modify it of course.
So here, the head will be the root element and all the things you will put in there:
XML HEAD SOURCE CODE
Sorry- ... please log-in or register to get this!
Save it as : "output_xml_head.htm"
Again ... no rocket science here. Same goes with the elements ...
XML ELEMENT SOURCE CODE
Sorry- ... please log-in or register to get this!
Save it as : "output_xml_element.htm"

3. The JSON template files

Now JSON seems a bit more lightweight ... I could nearly say, the code isn't worth it :) But, ok, I'll make it
JSON HEAD SOURCE CODE
Sorry- ... please log-in or register to get this!
Save it as : "output_json_head.htm".
The element(s) on that thing do have a special tag. As JSON elements are separated by a "," we will replace "!DATA_SEPARATOR!" with a "," for every element BUT THE LAST ONE!
JSON ELEMENT SOURCE CODE
Sorry- ... please log-in or register to get this!
Save it as : "output_json_element.htm"
I do know, that JSON and XML are NOT HTML ... so you may wish to change the extensions to whatever fits your need. But please, let them have the same extensions. This will make it a bit easier for those lazy ones like myself ;)

4. The TEXT template files

Yeah, well this one is supposed to be the most tricky one, I guess (yes, that's a joke). We will make it a CSV file with headlines in the first row. Excel will easily load this and this is a common user wish. We obey to it and this then looks like the following listings.
TEXT Header SOURCE CODE
Sorry- ... please log-in or register to get this!
Save it as : "output_text_head.htm"
TEXT ELEMENT SOURCE CODE
Sorry- ... please log-in or register to get this!
Save it as : "output_text_element.htm"

Finally we have defined our output formats and are ready to head to the next step. Of course we need some more Templates, but those are only the screens for the serverpage. I will put them into the download, as templating should have been pointed out clear by now.

5. UCFIELD (again)

If you haven't guessed it by now, then let me tell you, that we will work with the Entity UCFIELD in this tutorial. It's one of those, we all have, so this makes it a good choice. And since this should be the Uniface entity lister 2, no other entity would do better :)

What we want to do:
We will pick one entity with an input field and then export the data in any kind of output.

In order to do so, I've defined the UCFIELD.DICT entity within a new Uniface server Page and configured it to have ALL FIELDS. Further, I've done the same with UCGROUP.DICT to be able to get a little more information about the chosen entity. Switch over to the paint tableau and replace ALL against this:
Paint Tableau SOURCE CODE
Sorry- ... please log-in or register to get this!

Now we head over to the heart of the server page: the Exec trigger. It contains the main control of the Entity Lister.
As we run the Entity Lister, it will show you a screen, where you can enter an entity of yours. After filling the field, you can hit ENTER or just click the "go" button.

The Entity Lister will now try to load the entity data from ucfield.dict and list all fields in a table.

Further the screen is extended to let you export the fields into an output format. These are the ones, we have defined above. I've tried to make this pretty easy to extend :) Further, I added a little undocumented goody for you!!! If you find it, please write a comment in the bottom of this contribution just to let me know.

Checkboxes
As you will see, there is a checkbox in front of every field. This decides, which fields will be exported.
If none is checked, all will be taken. If you check some fields, then only those will be taken. Further you can use the checkbox in the table header to switch between ALL or NONE.
After having picked some fields, you can chose the format and then click on the button "export data". We will dive in to this in a minute, but first you'll need to have a look at the source.
I've tried to place many comments in the code to make it better to understand.
Uniface EXEC trigger SOURCE CODE
Sorry- ... please log-in or register to get this!

When you hit the "export data" button, a lightbox will open and show the export data. A close description of the Lightbox can be found in the contribution.

The exec trigger uses only two templates for showing those things. I've called them "overview.htm" and "overview_element.htm".

The only Operation: ajax

The export starts a request to the operation "ajax" in the server page. Remember my first contributions about operations doing different stuff within a server page? This is a very classic example of how to use it. The operation determines, what is to be done by a param called MODE. I've made this a bit flexy so you can extend it to your own stuff.
After checking the MODE, it will load the marked fields and build some html or text for you. All this will be delivered back to the operation which again places it in $webinfo("output") and then just exits.
And now somebody comes along and states AJAX is tricky? :D Well, fine, then look at the code and go figure :) This is the operation "ajax":
Operation ajax SOURCE CODE
Sorry- ... please log-in or register to get this!
... scary! :)))

The local proc

Operation ajax calls the entry en_build_ouput. It picks the params coming from the web (this is $webinfo("input")) and exports the fields to the wanted format. All in all very basic stuff. Run through an entity and work with some fields. Depending on the output format, some things have to be taken care of.
If exporting to JSON, you need a seperator which is a comma. None of the other formats need that in my example. But well, lets give JSON the comma and it will do ;)

The entry itself uses one main HTML template called "widget.htm" and additional two called "output_x_head.htm" and "output_x_element.htm" to generate the output where x is the name of the chosen output format. As all the other templates for this component, they are stored in the component dir below the main template dir (look in the defines of the GHANweb service).
entry en_build_output SOURCE CODE
Sorry- ... please log-in or register to get this!

As we pick the params from the web, we need to shape one param in a special way. That special one is the param "UFIELD". In HTML you can do multiple values to one param. This is managed by just placing another identifier with the next values. This looks strange and makes it stupid to manage in Uniface ;) If we only wanted to have one field exported, then the params in the URL would look like this:

ENTITY_LISTER.ajax?MODE=BUILD_OUTPUT&UFIELD=myfield

But now we want two or more fields! This turns the url into this:

ENTITY_LISTER.ajax?MODE=BUILD_OUTPUT&UFIELD=myfield&UFIELD=my_other_field&UFIELD=and_another_field ...

If we try to pick that with $item("UFIELD",$webinfo("input")) we only get the first value. Crap! So what the next little entry does is simply to look for one identifier (in this case: UFIELD) and make a uniface liste out of it. And then again, this is fine to work with ;)

So instead of doing lv_para_fields = $item("UFIELD",$webinfo("input")) we let an entry do this for us and so its ok with lv_para_fields = en_chkbox2list("UFIELD").
entry en_chkbox2list SOURCE CODE
Sorry- ... please log-in or register to get this!

And this is all code, I have in store here while we talk Uniface. Of course there is a lot to take a look at in the HTML templates for the component.
Sorry- ... please log-in or register to get this!

Comments

on 2011-09-22 10:43:13 -GHAN- wrote:

did u already try it, rafa?

on 2011-09-22 08:46:39 uniface8 wrote:

Great, Ty.

1188 view(s) / 2011-09-19 16:22:28 / LAST UPDATED: 2012-02-20 14:01:36