 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUI Tutorial 16 - The VegUI Bridge
written by vegu on 23 Dec, 2006 01:09:28
A live example of this tutorial can be found here.The vegUI bridge allows the communication of the vegUI application with the server. It is a simple ajax framework that provides functions to send requests, handle server responses and even handles connection timeouts.
Our example will be simple, we will have a php page that echos the current server time in a human readable date string. We ill then send a request from our vegUI application to retrieve that date string and update it on the screen in the browser - live, without the page ever reloading :)
These are the contents of the php file we will use:
Code: PHP<?
echo date('d M, Y H:i:s', time());
?>
Fairly simple :)
Now lets create our manager element and also add a node that will serve as a label which we will use to display the time.
Code: JavascriptManager = new VegUIManager('Manager');
Manager.set(800,600,0,0);
Manager.T.Css.backgroundColor = '#b2b2b2';
Manager.build(document.body);
Manager.init_bridge();
Notice the call to init_bridge(). Init bridge initializes the common vegUI bridge object that can be access by all elements over the Manager's Bridge property.
The css class for our time label:
Code: CSS.lbl_time {
background-color: #838383;
font: bold 10px Verdana, Arial, Helvetica;
color: #fff;
} Code: JavascriptLblTime = Manager.get_new(VUI_NODE);
LblTime.set('div', 300, 18, 50, 50);
LblTime.T.className = 'lbl_time';
Manager.build_element(LblTime);
Okay, we want to update the label every second, in order to accomplish that we will need two functions. First a function to update the label and then a function that fetches the current time string from our server by accessing the php file we created.
The function that will fetch the time will be called fetch_time, this is the function that will utilize the vegUI bridge to communicate with the server.
Code: Javascriptfunction fetch_time() {
Manager.Bridge.send(
'tutorial_16_echo.php',
null,
'GET',
function() { update_time(this.request.responseText); }
);
}Definition: VegUIBridge.send()
The first argument we pass to the send method is the path that we want to send the request to. This can be a relative path or a url, if it is a URL it needs to be on the same host, as browser security will block any xmlhttprequests that go to a different host.
The second argument is skipped in this example but could hold parameters in the form of '?myvar=123&mysecondvar=123". Argument 3 is the request method, the two most common methods are GET and POST. You use post if you want to send a lot of data, else GET is sufficient. The method is case sensitive it wont work if you submit it as 'get' or 'post'. The last argument is optional and is the function to be executed when the server has send a positive response to the request.
A positive response requires that the submitted path exists and can be accessed.
If no function is submitted then the bridge's execute event is called.
Our function calls the update_time function, and the responseText property of the request is passed to it as the first argument. The responseText property holds the data sent back by the server in our case the date string we echo'd with our php script.
Code: Javascriptfunction update_time(timeStr) {
LblTime.clear(document.createTextNode('Server Time: '+timeStr));
}The function update time will update our time label with the new time string.
Now the only thing left to do for us is to create a timer that calls fetch_time every second.
Code: JavascriptsetInterval(fetch_time, 1000);
Handling Timeouts
The vegUI bridge has several properties to work with connection timeouts. There is the maxSendTime property which can be set to how long a request can take before it is seen as a timeout by the bridge and canceled. The conTimeouts property holds the current amount of continuous timeouts. maxTimeouts defines how many timeouts can happen in a row before the onmaxtimeouts event is fired. The resend property will try to resend any requests that have timed out. There are some other properties which you can read about in the API Documentation.
There are two events that can help you handle timeouts. The ontimeout event which will fire on every timeout and the onmaxtimeouts event which will only fire if there have been n continues timeouts.
For example you could do something like this:
Code: JavascriptManager.Bridge.onmaxtimeouts = function() { window.document.location.href = 'timeout.html'; }Related Posts
- vegUI Tutorial 15 - The Window Element
- vegUI Tutorial 17 - The FX Engine
- vegUISiteKit - Using the VegUIBridge
Your Comment
Comments
No comments yet.
