Tab widget : PART I (UPDATED)

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
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…

<html>
<head>
<title>USP instead!</title>
</head>
<body>
<h1>AJAX TAB Widget (AHP TECH DEMO)</h1>
</body>
</html>

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:

<div class=”mytab”> </div>

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.

<ul>
<li><a href=”javascript: ahp_load_tab(1);”>TAB 1</a></li>
<li><a href=”javascript: ahp_load_tab(2);”>TAB 2</a></li>
<li><a href=”javascript: ahp_load_tab(3);”>TAB 3</a></li>
</ul>

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:

<div id=”inhalt”>
Inhalt von Tab
</div>

All this together makes a HTML code looking like:

<html>
<head>
<title>accept no imitations- … USP instead!</title>
</head>
<body>
<h1>AJAX TAB Widget (AHP TECH DEMO)</h1>
<div class=”mytab”>
<ul>
<li><a href=”javascript: ahp_load_tab(1);”>TAB 1</a></li>
<li><a href=”javascript: ahp_load_tab(2);”>TAB 2</a></li>
<li><a href=”javascript: ahp_load_tab(3);”>TAB 3</a></li>
</ul>
<div id=”inhalt”>
Inhalt von Tab
</div>
</div>
</body>
</html>

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:

<script>
//###############################################################
function ahp_load_tab(xtab) {
//###############################################################// ### Benutzer ΓΌber AktivitΓ€t informieren ###
document.getElementById(‘inhalt’).innerHTML = “wird geladen …”;

// ### Aufrufparameter bestimmen ###
var xURL = “http://localhost:8080/uniface/wrd/run/MYUSP.tab_”+xtab;
var http = null;

if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject(“Microsoft.XMLHTTP”);
}

if (http != null) {
http.open(“GET”, xURL,true);

http.onreadystatechange = function () {
if (http.readyState == 4)
document.getElementById(‘inhalt’).innerHTML = http.responseText;
}

http.send(null);
}
}
</script>

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.

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
defined by the id “inhalt”. So far for JavaScript at this very moment.

 

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:

<style type=”text/css”>
#inhalt {
border: 1px dotted #303030;
clear: left;
width: 500px;
padding: 5px;
}
.mytab ul {
margin: 0;
padding: 0;
border: 1px solid transparent; /* FIX: ONLY FOR IE, ELSE OBSOLETE! */
}
.mytab ul li {
display: inline-block;
width: 100px;
padding: 0;
padding-right: 3px;
margin: 0;
list-style: none;
float: left;
}
.mytab li a {
border: 1px solid #101010;
border-bottom: none;
text-decoration: none;
display: block;
padding-left: 5px;
background-color: #aaaaff;
color: #eee;
height: 22px;
line-height: 22px;
}
.mytab li a:hover {
background-color: blue;
color: #FFF;
}
</style>

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:

-GetState Trigger
-SetState Trigger
-Exec Trigger
-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:

;###################################################################
operation tab_1
;###################################################################
$webinfo(“OUTPUT”) = “This is TAB 1”
end
;###################################################################
operation tab_2
;###################################################################
$webinfo(“OUTPUT”) = “You clicked TAB 2”
end
;###################################################################
operation tab_3
;###################################################################
$webinfo(“OUTPUT”) = “TAB 3, Sir, it’s TAB 3!”
end

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:

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!

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:

try {
netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”);
} catch (e) {
alert(“Permission UniversalBrowserRead denied.”);
}

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! πŸ˜‰ … 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,

-GHAN-

HINT: find the updated article on http://www.udev.info/uniface/a-simple-tabwidget-with-100-lines-of-code/

0 thoughts on “Tab widget : PART I (UPDATED)”

Leave a Reply