HTML is the new HTML5

Few days ago Ian Hickson wrote a blog: HTML is the new HTML5, he referred “we moved to a new development model“, and comes with two major changes:

1. The HTML specification will henceforth just be known as “HTML”, with the URL http://whatwg.org/html.
2. The WHATWG HTML spec now became “living standard“, “It’s more mature than any version of the HTML specification”. I took a screenshot below:

So, in a simple sentence: HTML is going to “unversioned model“, according to this there is definitely a concern: OK, living standard? Does this mean the standard could be changed/updated/revised at anytime? I saw one person asked posted this question and Ian Hickson replied, he emphasized WHATWG worked hard on backward-capability, and they worked tightly with browser vendors to make sure they do not change things that most people depend on, this is good and really important!

So, things is getting more and more interesting with HTML 5 (should I just call HTML?), few days before (18 January 2011) W3 just “unveiled” the HTML 5 logo: http://www.w3.org/News/2011#entry-8992, I bet there could be more or less confusion:)

Investigation on XUL

Due to my working requirement I spent several hours on Mozilla XUL, as I have many years experience on HTML, XML, CSS and JavaScript, the learning process is not very painful, I record my effort in this post, FMFI (for my future information~~).

Definition

XUL (pronounced /?zu?l/ “zool”), the XML User Interface Language, is an XML user interface markup language developed by the Mozilla project. XUL operates in Mozilla cross-platform applications such as Firefox and Flock. The Mozilla Gecko layout engine provides an implementation of XUL used in the Firefox browser.^[1]

I mainly learnt from Mozilla MDC and I summarized useful links below:

Wiki page: http://en.wikipedia.org/wiki/XUL
XULRunner MDC https://developer.mozilla.org/en/XULRunner
Getting started with XULRunner https://developer.mozilla.org/en/Getting_started_with_XULRunner
XUL References https://developer.mozilla.org/en/XUL_Reference
Debugging a XULRunner Application https://developer.mozilla.org/en/Debugging_a_XULRunner_Application

Hello World step by step

I am using Windows 7 Ultimate 64 Bit so I took Windows as example, XUL is definitely cross-platform (Mac, Linux).

1. Download XULRunner for Windows from here: http://releases.mozilla.org/pub/mozilla.org/xulrunner/releases/
2. Unzip the package to anywhere you want, I take “%UserProfile%\Desktop\XUL\XULRunner” for example.
3. Follow this Guide and download “myapp” under %UserProfile%\Desktop\XUL, screenshot below:
   
4. Use any text editor open “%UserProfile%\Desktop\XUL\myapp\chrome\content\main.xul” and “%UserProfile%\Desktop\XUL\myapp\chrome\content\main.js”.
5. Run XULRunner with parameter pointing to your application.ini to run this XUL instance.
   

   Invoke XULRunner from command line

All done, I show my simple demo code below:

Main.xul:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="style.css" type="text/css"?>

<window id="main" title="Login Demo" width="400" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/javascript" src="chrome://myapp/content/main.js"/>

  <caption label="Login Demo"/>
  <vbox>
    <lable value="User Name: "/>
    <textbox id="txtUid" maxwidth="400" maxlength="10" />
    <separator/>
    <lable value="Password: "/>
    <textbox type="password" id="txtPwd" maxlength="10" />
    <separator/>
    <button id="btnLogin" label="Login" oncommand="doLogin();" width="300" />
    <separator/>
    <label id="lbl" value=""  />
  </vbox>

  <separator />
</window>

main.js

function $(id) {
return document.getElementById(id);
}

function doLogin() {
var lbl = $("lbl");

lbl.value = "Your user name: " + $("txtUid").value + ", your password: " + $("txtPwd").value;
}

My XUL Demo

My XUL Demo

Happy coding:)