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

a simple TAB-Widget with 100 lines of code

Direct link http://www.udev.info/uniface/a-simple-tabwidget-with-100-lines-of-code
Written by -GHAN- // Tags: tab widget 100 lines javascript ajax html css usp ghanified

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 Uniface.

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?

My demo delivers a simple ajax driven tab widget controlled by a USP! HTML, CSS, JavaScript and Uniface 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.

Ingredients

What we first of all need is a basic web page...
SOURCE CODE
Sorry- ... please log-in or register to get this!

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 like:
SOURCE CODE
Sorry- ... please log-in or register to get this!

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 to happen, if a tab is clicked. Here we will add 3 tabs which will call a JavaScript code with a parameter delivered by the tab.
SOURCE CODE
Sorry- ... please log-in or register to get this!

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:
SOURCE CODE
Sorry- ... please log-in or register to get this!

All this together makes a HTML code looking like:
SOURCE CODE
Sorry- ... please log-in or register to get this!


Adding JavaScript

What's next ... ahh ... yes, the JavaScript function with the AJAX voodoo :) ... it's pretty obvious actually, but take a close look
at it though:
SOURCE CODE
Sorry- ... please log-in or register to get this!

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.

Looking at the HTML code we call the JavaScript with the params 1, 2 and 3. So our assembled string will represent the wanted operation. By now 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 defined by the id "inhalt". So far for JavaScript at this very moment.

Alternative JavaScript code with GHANIFIED! Toolkit
After updating this text, i thought, you would liek to see, how to make this even more slick. With GHANIFIED! this is pretty easy. Allthough we could shorten the code below, I assume this to be more readable.
SOURCE CODE
Sorry- ... please log-in or register to get this!


Showing style with CSS

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:
SOURCE CODE
Sorry- ... please log-in or register to get this!

Place the CSS block within the HEAD tag (e.g. somewhere between <head> and </head>). Save it and we are done for now!

Heading over to Uniface for the final steps

We will start a blank USP and delete the following stuff:
- GetState Trigger
- SetState Trigger
- Exec Trigger
- Everything else ... it's simply obsolete ;)

Aftwards create a dummy entity, because without that we won't be able to compile it ;) ...

Select the operations in the component editor and insert following code:
SOURCE CODE
Sorry- ... please log-in or register to get this!

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! ;)
Sorry- ... please log-in or register to get this!
If it works for you in this point of development, then let's conclude, what we have done now:

We made a HTML page ourselves with Stylesheets, JavaScript and some little tags. Furthermore we made 3 redundant operations in Uniface to handle the AJAX requests from that little HTML code! Obviously this is crap but it should bolden, how easy it is.

This gets us 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.

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 behaviors with Chrome (... ok, u got me- i didn't google it!) so i will show you the fix for Firefox:
SOURCE CODE
Sorry- ... please log-in or register to get this!

Add this in front of the code in the JavaScript function and Firefox will obey ;)

So this is it!

And that's the end of my little demo. Hope you enjoyed the trip so far and didn't get frustrated by doing HTML, JavaScript, CSS, AJAX, Uniface and a little XSS!

This demo was successfully tested on Uniface 9.4 CR before release and is heavily used on Uniface 9.2.x at the moment. Tell me, how you liked it and if it worked for you. Questions, suggests and critics are welcome aswell.

In the next part, I'll show, how to make this functional example look great. You'll find it at this URL : Making the tab widget eyecandy

Comments

1176 view(s) / 2010-03-12 19:12:08 / LAST UPDATED: 2011-07-13 16:09:43