Thursday, January 6, 2011

XUL controls on Web Page

XUL (XML user interface markup language)

XUL contains XML markup which is intrepreted by the XULRunner and renders User Interface controls. It's similar to what HTML is to Browsers and WPF in DotNet.
If you have Firefox or Thunderbird, then XUL will run directly without any special installs. It's mainly used for creating Mozilla applications and extensions.

XUL has some extra controls like: calender, color-picker, Progressbar, Trackbar etc. which are not present in HTML. We can use these special control in our webpages using the trick i explained here.
To achieve using HTML for these type of controls, we have to add/write extra javascript or html in our page, with XUL we get, less code and clean separation. But one disadvantage is, it runs only on firefox browser (and its related products).

Here i will explain, how to use these controls in our webpage, using the iframe as popup(XUL holder):
  • Point iframe source to the XUL file.
  • Based on the actions on webpage, iframe shows either Calender or Color-Picker.
  • whenever we select Date/Color, values are passed from iFrame to container page to set elements.

Below XUL calendar control in action:

Below XUL color-picker control in action:


Files:
XUL page has its own CSS & javascript files separately.
For (parent)webpage, I embedded CSS & javascript within page.

Download the files from this location and have a try.

Reference:
>https://developer.mozilla.org/En/XUL_Tutorial
>http://en.wikipedia.org/wiki/XUL

HTML5: Cross-Document Messaging

What cross-document messaging?

It's a communication mechanism between iFrame and it's contianer page.
We use iframes to sustain features offered by different domains, to be usable in our webpage.
Developers had been using different hard solutions like: server-side proxy, url-hashing (which are complex and are workaround solutions) to communicate between iframe and it's parent container page.
HTML5 now offers a direct solution to this scenario, using the postMessage().

Below is the sample example:

Below is the code for container page:

<html>
<head>
<title>Parent-window</title>
<script type="text/javascript">
(window.attachEvent)? window.attachEvent('onmessage',gotMessage) : window.addEventListener('onmessage',gotMessage,true);

function gotMessage(e)
{
document.getElementById("childData").value="Domain:"+ e.domain+"\nData: "+e.data;
}
function UpdateData()
{
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage(document.getElementById("childData").value, "*");
}
</script>
<style type="text/css">
#childData{
border:1px solid blue;
width:250px;
height:80px;
}
IFRAME{
width:300px;
height:200px;
}
BODY{
margin:20px;
}
</style>
</head>
<body>
<b>PostMessage Testing: This is a Parent window</b><br/>
<iframe id="ifrm" src="IFrame_Child4PostMessage.html"></iframe>
<br/>
Fill the data below and click send.
<br/>
<textarea id="childData"></textarea>
<button onclick="UpdateData()">send</button>
<br/>
<br/>
<i>ref: http://msdn.microsoft.com/en-us/library/cc197015(v=vs.85).aspx</i>
</body>
</html>


Below is the code for iFrame page:

<html>
<head>
<title>Child-IFrame</title>
<script type="text/javascript">
(window.attachEvent)? window.attachEvent('onmessage',gotMessage) : window.addEventListener('onmessage',gotMessage,true);

function gotMessage(e)
{
if (e.data == 'Hello World')
{ document.getElementById("parentData").value="Domain:"+ e.domain+"\nData: "+e.data;
e.source.postMessage('Ping: Received Hello!',"*");
//Here e.source=parent.window; so u can try like this: alert(e.source.location);
} else
{
document.getElementById("parentData").value="Domain:"+ e.domain+"\nData: "+e.data;
}
}
</script>
<style type="text/css">
#parentData{
border:1px solid blue;
width:250px;
height:80px;
}
BODY{
background-color:#ccaa99;
}
</style>
</head>
<body>
<b>PostMessage Testing: This is (IFrame) child window.</b><br/>
Below u will see the data from (cross-domain) parent.<i>HTML5, IE8</i>.
<br/>
<textarea id="parentData"></textarea>
<br/>
<br/>
<i>ref: http://msdn.microsoft.com/en-us/library/cc197015(v=vs.85).aspx</i>
</body>
</html>

we can even pass JSON as parameter.
EX:
parent -> o.contentWindow.postMessage(['one','two'],"*");
child(iframe) -> document.getElementById("parentData").value=e.data[1];

In the above sample codes, in place of "*" we should use, "http://<<remoteDomainName>>" for security purpose.

This feature supported in HTML5 offering browsers: ie8+, opera11 etc.

Download sample code files from this location.
Reference:
http://msdn.microsoft.com/en-us/library/cc197015(v=vs.85).aspx