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

GHANIFIED! ... a JavaScript ToolKit

Direct link http://www.udev.info/uniface/ghanified-a-javascript-toolkit
Written by -GHAN- // Tags: ghanified javascript ajax toolkit html example usp lightbox

Sorry- ... please log-in or register to get this!
Doing web stuff with plain Html is not as bad as it sounds. Starting off with a piece of paper, a pen and a bunch of ideas will do a nice presentation. But nowadays, this is not enough. In my former postings I introduced you to Html in combination with Uniface and of course some JavaScript doing AJAX and content replacement.

In order to do some nifty stuff with Uniface, this is enough. But, as we evolve to be web-aware, IT should make life some easier (atleast it's suppossed to, hehe). I hereby want to introduce you to a little ToolKit called

GHANIFIED!

Some like DOJO, others prefer JQuery and again others use YUI, QOOXDOO,.... ! It's the personal flavour which makes the choice. Allthough there are enough (very) good toolkits out there, I felt like I needed my own one to cover my needs, no matter which back-end is in control. Aside from Uniface, I do my stuff in Perl, C++ and even PHP. And as it was me who made this, I named it after what I did: I GHANIFIED it! pretty obvious, huh! ;)

I focused on the most used feature, coming with web 2.0 which I define to be the async communication with the back-end. (BACK-END = Uniface, Perl, C++, PHP, ASP or whatever holds your code while FRONT-END allways is the browser stuff like (X)HTML, XML, CSS and JavaScript). So it's mainly all about AJAX and how to handle this in a smart way.

All Ajax and Stuff on uDEV.info is done with GHANIFIED!

Implementation

First download it and copy it to your desired folder. If the link opens the file directly, press the right mouse button and choose "SAVE AS...".
Then copy the file into the desired place on the server oder directory, reachable for the browser. After that put the following code somewhere in the html head:
SOURCE CODE
Sorry- ... please log-in or register to get this!


Functions and object reference

- GHANIFIED! LightBox
- GHANIFIED! BusyBox
- GHANIFIED! Form2Param
- GHANIFIED! AddClass and RemoveClass
- GHANIFIED! Subfield *** NEW ***

Have a look at the functions. They should be pretty handy to work with.

Example #1 : loading data and showing the result!

Sorry- ... please log-in or register to get this!
The most used functionality is to load additional data from the server(page) and do something with it. This could be any kind of data: pure text, html or data in JSON.

I've build the example in the demo box for you to proof the function. Enter a value in the input field and press SEND. The Server will reply this with the alert widget. Further, the reply will be embedded below the input field.
SOURCE CODE
Sorry- ... please log-in or register to get this!

The above html is pretty simple. Next take a look at the JavaScript code below
SOURCE CODE
Sorry- ... please log-in or register to get this!

Example #1 does a standard http GET request. The loopback server (/cgi-bin/loopback.cgi) can be replaced by any Uniface USP or DSP (and of cause every other kind of backend) do server your needs. Just try this in your environment.

Changing GET to POST

Sometimes its better to have a http POST request instead of using GET. This is no problem to GHANIFIED! as we only need to change one line in the example script:
SOURCE CODE
Sorry- ... please log-in or register to get this!

Easy, isn't it?

And another one for simple requests : FETCH

I've often stumbled upon the fact, that defining a complete reuseable request takes some lines. And sometimes you don't want to make all this for just getting something from the backend. So lately I made a little requestor, to set up the pace in all this:
SOURCE CODE
Sorry- ... please log-in or register to get this!

Now that's what I would call "minimalistic" :) ... like it? This feature is available from version 0.32 and later.

Further Examples:

-GHANIFIED! examples - advanced searching with autoupdate

Comments

on 2010-04-29 16:28:38 -GHAN- wrote:

Object REF is available ABOVE in the beginning of the doc and the MAIL notification and visual feedback is on schedule. :D

on 2010-04-29 16:26:29 RichardGill wrote:

Well, thiss quiet near from what I made with the help of jQuery. Maybe it could be usefull to have a lighter alternative (5.8Kb instead of 17Kb). Ill give a try, but Im sure it would be better to have a reference documentation (all available objects and methods), or to have a non-obfuscated code :) Ill try that tomorrow. PS : it would be good to have a flag near the mailbox icon to know we have unread messages :-) Cheers

on 2010-04-27 11:26:03 -GHAN- wrote:

Definitely, Richard. This Part will give examples and how to solve several cases. I will have to set up a loop-back server so you can get your hands on here in the demo. It will solve the need of dynamic updates. Thats what it mainly does in the productive environment where it is tested. Ill try to make the Tab-widget demo work inbound as well as how to make multiple updates, request and changes on a single static page. As an example the Editor of the contributions work with it. Youll get a Mail here when its done Thx for the note :)

on 2010-04-26 14:14:44 RichardGill wrote:

Hi, seems to be a good complement for Uniface RIA, but whould it be possible to have more info on its possibilities ? Here we would like to dynamically update content to Uniface/dojo generated pages, with some Ajax (auto-complete, lightboxes), and maybe this library could be usefull for this stuff ? Best regards Richard

2093 view(s) / 2010-03-07 14:16:22 / LAST UPDATED: 2011-07-13 15:25:14