OpenXUL

About OpenXUL:

Ever wondered how to create rich web applications that look and behave like traditional client-server applications? OpenXUL is the answer!

OpenXUL is a javascript engine that renders rich UIs defined in XML and "runs" on the latest builds of:

FireFox 1.5+
MS Internet Explorer 6.0+
Safari 2.0+
Opera 9.0+

OpenXUL is a light-weight Front-end Framework. OpenXUL's design is modular, minimizing bandwidth usage. The core files contain the base widget implementation, the XUL parser and the server communication module (XML-RPC).

OpenXUL is compatible with any Back-end language that can handle with XML-RPC or JSON. C, C#, PHP, ASP, Ruby Rails, JAVA Velocity, Python Django, and others can do that. It's very easy to make any Back-end working with OpenXUL.

The summed size of the uncompressed core version files is about 50KB making OpenXUL suitable even for internet deployments.

Apart from the core files, OpenXUL also includes the modules, which usually implement a group of relevant UI widgets. These uncompressed javascript modules are tiny - no more than 12KB - and they are loaded only if an XML UI definition references one of the widgets contained in them. There is also a small java applet, which is used for file uploads, providing an exceptional end user experience.

OpenXUL comes with a familiar DOM-like API and full CSS2 support. This allows web developers to get familiar with it almost instantly.

Some of the widgets implemented are: window, dialog, icon, label, button, splitter, toolbars, tree, splitter, tab pane, menu bar, menu, list view, a simple data grid etc. See all of them on the Demonstration Section.

This project is based on QuiX premier engine from inno:script www.innoscript.org.

PS: I'm working on this project (framework, demo apps, website, everything) by myself at my free-time, so I hope to update this page every week.

Status and News:

2008-01-18

This project is going to be Beta on v0.1.1.
The version published on the SourceForge CVS are version 0.1.0 and I will commit the v0.1.1 very soon.

2007-10-05

At now, this project is at Alpha stage.
The version published here is v0.0.5 but I'm working on v0.1.0 to be stable.

2007-10-02

I have called the version 0.0.5 as myXUL.
Because that, you will find myXUL many times on the examples section.
But I have decided to call the version 0.1.1 as OpenXUL and this will be the official name of this project.

2007-06-26

I have created OpenXUL at SourceForge and i will update that as soon as possible.
Sourceforge.net Link: http://sourceforge.net/projects/openxul/

2007-02-12

By now, we can test some codes and meet this project.
Be welcome to contribute with anything. My wish is: OpenXUL will be the fastest AJAX framework in the world.

It's Free?:

OpenXUL is currently available for free use in all personal or commercial projects under both MIT and LGPL licenses. You can choose the license that best suits your project, and use it accordingly.

The short version is: you can use it, free of charge, for anything you like (which includes commercial applications); just don't remove the copyright remarks.

If you find you are using it a lot, would like more features added, and so on, a donation would be greatly appreciated.
A lot of time and effort has been put into OpenXUL, and I would love to continue improving it and making it a better framework.

Licenses:

Download:

Soon I will publish a Download section here.
Sorry.

You can try the anonymous CVS checkout at Sourceforge.net: http://sourceforge.net/projects/openxul/

Planned Features:

I of course have a million things I'd like to do for this framework, but for now I can only do so much. However, there are certain features I would definitly like to have at least in the next major version or two.

Here they are in no particular order:

More Mozilla's XUL RFC compatibility
RTE - Rich Text Editor Widget
JSon Support to fast send and receive massive data to Back-end.

Bug Report:

List of Known Bugs for version 0.0.5:

MS Internet Explorer:

Sometimes when the core are reloaded, it is stalled and nothing happens.
Scrolled contents appear even out of bounds.

Resolved Bugs:

If you are interested in the resolved bugs so far, see the DeadBugList.

Do you found a bug? Let me know:

Please send me an email in the Contact Section and add some information like:

Your name and email.
The SO name and the internet browser name.
The description about the bug and how can I reproduce it.

OpenXUL Demonstration:

I have made some applications to show basic features that can be possible with this framework.

It works fine in my tests with IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+. All these browsers can run XUL apps with OpenXUL!!!

OpenXUL Sampler Application - Alpha.
A Sampler application to show some widgets.
OpenXUL Source Code Editor - Alpha.
An Editor to create, view and change some code examples.
OpenXUL IDE - Alpha.
A simple IDE to fast create some XUL code. (Work only in FireFox or Mozzila).

References:

Detailed reference of all XUL elements, attributes and properties. (from XUL Planet)
Important: The actual version of OpenXUL Alpha do not have runs all features and specification related on this documentation. In the future it will be 100% compatible with Mozilla XUL RFC.
See here: XUL Element Reference

Code Examples:

This is very cool becouse you will see the code examples and you can run all these codes with your browser.

And more: you can change the code sources becouse I decide to run this with The On-The-Fly XUL Source Code Editor

No instalation are needed... just your browser! OpenXUL is very fast and simple to run.

Example 1:

This code example shows a simple button with an image from OpenXUL Image Set called check16.gif

<?xml version="1.0" encoding="utf-8"?>
<rect xmlns="http://www.myxul.org/" width="100%" height="100%" overflow="auto" padding="8,8,8,8">
   <button img="myXULimg:check16.gif" caption="Button 2" top="50" left="80" width="140" height="32"></button>
</rect>

Run this source

Example 2:

This code example shows two list widgets with some rows. When you run this code, the first one is read only but you can edit each row values from the other one.

The onload="examples.filllists" code is to fire filllists() method from examples class provided from a javascript file called exaples.js. This is the business code of your software... is the only thing that you need to carry about.

<?xml version="1.0" encoding="utf-8"?>
<rect xmlns="http://www.myxul.org/" width="100%" height="100%" overflow="auto" padding="8,8,8,8" onload="examples.filllists">
   <script name="Sampler v0.2 Script" src="/js/examples.js"></script>
   <label caption="List view" style="font-weight:bolder;font-size:10pt"></label>
   <listview id="list1" top="24" multiple="true" width="100%" height="100">
      <listheader>
         <column width="24" caption="" type="bool" name="isSystem" sortable="true"></column>
         <column width="140" caption="Name" name="displayName" bgcolor="#EFEFEF" sortable="true"></column>
         <column width="80" caption="Size" name="size" xform="examples.computeSize" sortable="true"></column>
         <column width="160" caption="Date" type="date" name="modified" sortable="true"></column>
      </listheader>
   </listview>
   <hr top="148" width="100%"></hr>
   <label top="156" caption="Data grid" style="font-weight:bolder;font-size:10pt"></label>
   <datagrid id="grid1" top="182" width="100%" height="100">
      <listheader>
         <column width="24" caption="" type="bool" name="isSystem" sortable="true"></column>
         <column width="140" caption="Name" name="displayName" sortable="true"></column>
         <column width="140" caption="Option" name="role" type="optionlist" sortable="true">
            <option value="1" caption="a"></option>
            <option value="2" caption="b"></option>
            <option value="4" caption="c"></option>
            <option value="8" caption="d"></option>
         </column>
      </listheader>
   </datagrid>
   <label top="292" caption="currently supporting booleans, strings and option lists"></label>
</rect>

Run this source

Example 3:

This code example shows a virtual window with some widgets

<?xml version="1.0" encoding="utf-8"?>
<window xmlns="http://www.myxul.org/" title="Example 3" resizable="true" close="true" minimize="true" maximize="true" 
img="myXULimg:about16.gif" width="350" height="250" left="center" top="center">
   <wbody>
      <button img="myXULimg:check16.gif" caption="Button 2" top="50" left="80" width="140" height="32"></button>
   </wbody>
</window>

Run this source

Example 4:

This code example shows a virtual window with various form widgets

<?xml version="1.0" encoding="utf-8"?>
<window xmlns="http://www.myxul.org/" title="Example 4" resizable="true" close="true" minimize="true" maximize="true" 
img="myXULimg:about16.gif" width="560" height="450" left="center" top="center">
   <wbody>
      <label caption="Text" style="font-weight:bolder;font-size:10pt"></label>
      <label top="24" caption="A simple text box:"></label>
      <field left="100" top="22" width="200" id="text1"></field>
      <label top="56" caption="A multiline text box:"></label>
      <field top="56" left="100" width="200" height="100" type="textarea" id="text2"></field>
      <hr top="164" width="100%"></hr>
      <label caption="Select" top="172" style="font-weight:bolder;font-size:10pt"></label>
      <label top="196" caption="A single select list box:"></label>
      <selectlist id="select1" top="194" left="120" width="120" height="60">
         <option caption="Option 1" img="myXULimg:about16.gif"></option>
         <option caption="Option 2" img="myXULimg:about16.gif"></option>
      </selectlist>
      <label top="196" left="280" caption="A multi select list box:"></label>
      <selectlist id="select1" top="194" left="390" width="120" height="60" multiple="true">
         <option caption="Option 1" img="myXULimg:about16.gif"></option>
         <option caption="Option 2" img="myXULimg:about16.gif"></option>
      </selectlist>
      <label top="264" caption="Combo:" width="120" align="right"></label>
      <combo id="combo1" top="262" left="120" width="120" menuheight="60">
         <option caption="Option 1" value="1" selected="true"></option>
         <option caption="Option 2" value="2"></option>
      </combo>
      <label top="264" left="280" caption="Editable combo:" width="100" align="right"></label>
      <combo id="combo2" top="262" left="390" width="120" menuheight="60" editable="true">
         <option caption="Option 1" selected="true"></option>
         <option caption="Option 2"></option>
      </combo>
      <hr top="294" width="100%"></hr>
      <label top="302" caption="On/Off" style="font-weight:bolder;font-size:10pt"></label>
      <field top="326" id="check1" type="checkbox" caption="Checkbox"></field>
      <field top="326" left="120" id="radiogroup1" type="radio" caption="Radio 1"></field>
      <field top="346" left="120" id="radiogroup1" type="radio" caption="Radio 2"></field>
      <hr top="368" width="100%"></hr>
      <label top="376" caption="Special" style="font-weight:bolder;font-size:10pt"></label>
      <label top="398" width="100" align="right" caption="Date picker:"></label>
      <datepicker top="396" left="100" width="160"></datepicker>
      <label top="398" left="320" width="100" align="right" caption="Spin button:"></label>
      <spinbutton top="396" left="420" width="60" editable="true" max="100" value="50"></spinbutton>
   </wbody>
</window>

Run this source

Contact:

Hi, my name is Carlos Alberto Pires Correia.
Thank you for visiting this website.

To contact me, send an email to capc@megadrom.eti.br.
To know more about my other works and portfolio, please visit www.megadrom.eti.br.