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:

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.


1 comment:

  1. Note: It seems XUL support in Latest Firefox browsers is disabled, as HTML5 specification need to be implemented in them. Try the code if you have Firefox 3.6 or older.