This little demo delivers an ajax driven tab widget controlled by a plain USP 🙂
a simple TAB-Widget with 100 lines of code
This little demo is contributed to all of you after it was presented at the CBG summit in Hagen september 2009.
The main purpose is to open your eyes and make you think about RIA and if it has to be rocket science or not! HTML is NOT
rocket science, but it seems there’s a lot of strange voodoo needed to maintain the DSPs presented in the RIA releases of
As I show you this code, I wan’t you to take a sharp look behind the Idea of Dynamic Server Pages! Understanding this
demonstration aswell as my previous posts will make the DSP component more and more obsolete 😉 … but well … you will have to figure this on your own.
“HUB MACHT SCHUB!” as Deniz says, but … what is this demo anyway?
code will be less than 100(!) lines of code in the basic edition. It’s not EYECANDY but functional and effective. So feel
free to mix it to your personal flavour.
What we first of all need is a basic web page…
Now it’s time to define, how wide we want the widget to be. As we are skilled and well known for good code, we don’t just put a size
on the HTML tags. So, we start here with a DIV tag, containing the widget. It will have the class “mytab”. With that done the DIV tag looks
Why it has to use the named class will be explained a bit further down in this demo. At this moment take it as it is.
Next we need a some tabs. Tab are usually done by using the UNORDERED LIST widget (ul) while every tab is a LIST ITEM (li).
In order to click on the tabs and having space for some fanciness on that, we use the web anchor (a) to define, whats supposed
Okay, lets head on. In order to display something after we press the tab, we need an output container. Usually we use a DIV for that.
In this demo, we need to give it an ID so we can find that container again and put some data into it:
All this together makes a HTML code looking like:
at it though:
Assuming you to be a developer should make you capable of scoping the functionality in this brief code. But still I will
pay you some explanation on it.
First we grab the HTML Tag with the ID called “inhalt” and fill it with the text “wird geladen …” (… for those of you not capable of the german language: this phrase tells the user, “it’s loading …”)
Done with that we assemble a string containing OUR SERVER PAGE ($componentname), a dot “.” which indicates an Uniface operation and the name of the operation.
We want to have three different tabs and as we are lazy we simply have 3 operations in our server page called tab_1, tab_2 and tab_3.
DON’T come along now and blame me to be a retard just because I didn’t optimize the code to be one function…
ALLWAYS REMEMBER: it’s not me who needs to learn how HTML, AJAX and those things work out together! At this very moment, it’s you 😉
But let’s get back on track. We assembled the string to be fitting to our server page. Now we need the AJAX object to get it up’n running.
Since we work browser independant ( YES, WE DO …! this one will even do on an iPhone @ CPWR ^^ ) we have to figure what browser
is used at the very moment. In general we can choose from two groups:
The standard obeying ones and Microsoft!
That’s exactly how the code goes here. After the first lines, we have an instance of the XMLHTTP object in our variable “http”.
With that we request the String in xURL (e.g. our assembled string with the server page) with the method GET and define the request to
be async! Finally we send it and hope for a reply 😉
Hopefully the reply comes some 20-40ms after the request. Because, if it does, the response on our request will be taken to the container
Now we should take care of the presentation of our widget: Let’s shape it a bit, so it looks like a tab widget. We hereby grab the CSS
definitions for our widget and put it into the listing:
Place the CSS block within the HEAD tag (e.g. somewhere between <head> and </head>). Save it!
Then we are done here!
Heading over to Uniface for the final things to do.
We will make a USP and delete the following crap:
-Everything else … it’s simply obsolete 😉
Now create a dummy entity and kill those triggers, because without that we won’t be able to compile it 😉 …
Switch over to the operations and insert following code:
After having done this, try to compile it! … since this ain’t rocket science, it surely will do!
Starting the widget
Launch your Tomcat (WRD), and Try out the HTML page. Aslong all this resides on your pc, it should work. Be aware of
that some browsers (in this test Google Chrome and Mozilla Firefox refused) deny to AJAX a url not placed in the actual “domain”.
Since this is the cheap and dirty version of the widget, try to take Apple Safari or Internet Explorer. They apparently don’t care about
XSS (Cross site scripting) and do whatever they’re told! 😉
If it works for you in this point of development, then let’s conclude, what we have done now:
Uniface to handle the AJAX requests from that little HTML code!
THIS IS IN TOTALLY 98 lines of code … 🙂 … pretty nice, eh? … well you could try to do this in a DSP, but erhmmm … don’t get
confused by the generated code hehehe!
Background information on : XSS / “Error: uncaught exception: Permission denied to call method XMLHttpRequest.open”
If you want to do cross-domain scripting with XMLHttpRequest, e.g. fetching data from a remote location but you’re on a
local page or local XUL application (file:///), you need to tell Mozilla/Firefox about that, otherwise you get this infamous error 😉
This is called cross site scripting or just XSS. Often abused in the internet to show ads, load malware or doing other stupid things.
This could explain why Mozilla and Google build in some security in their browsers- … thanx guys! 😉
But of course there is a way around that. At this moment im not aware of how to switch the behavios with Chrome (… ok, u got me- i didn’t google it!)
so i will show you the fix for Firefox:
So this is it!
AJAX, Uniface and a little XSS! 😉 … My apologize for the missing CODE INDENTATION, but adding a source in here is a real pain in the … erhmm … stomach 😉
This demo was successfully tested on Uniface 9.4 CR before release and YOU have officially been GHANified!
Tell me, how you liked it and if it worked for you. Questions, suggests and critics are welcome aswell 😉
Straight from the department of digital propaganda and with kind regards,
HINT: find the updated article on http://www.udev.info/uniface/a-simple-tabwidget-with-100-lines-of-code/