Porting google.xul to the ZK Framework
Henri Chen, Principal Engineer, Potix Corporation
December 18, 2005
What is google.xul?
ZK is an open-source Ajax engine which allows you to design the web pages in XUL-like tags(components) and access these components by pure java codes.
Because ZK adapts the XUL language as one of its page design language, I decided to port the google.xul to ZK and experience what should be done in such a process. Then I have this ZK page, google.zul, in less than an hour. You can copy the source code onto the ZK's live demo source window; press the Try me! button and see how it works. In fact, this is also how I do the test during the porting. If you have setup a ZK server, you can copy the source code file into the server directory; then visit that page to see how it works.
The very first thing is to get the google.xul source code. This is easy. Visit the google.xul; view the source code; save as a file.
Then pull the file into the editor. The first thing to do is removing all Mozilla specific style-sheet, tags, and attributes. The ZK server would not be able to locate the resource of chrome://...etc. Some of tags used in google.xul are somehow too old and not used any more such as the <spring> tag that I simply delete them. Some attributes that might not be supported by the ZK (yet) can be implemented by some other ways. For example , in google.xul, the onload attribute of the Window tag is used to move focus to the q textbox. That I put a <zscript>q.focus()</zscript> at the end of the page to do the same thing. Some tags that ZK simply does not support can be replaced with some other tags that serve the same job such as implementing the tabs with ZK's <button> component(google.xul uses a combination of <box> and <text>).
The porting is not difficult and I can try my source code anytime by feeding them into the "Source" window of the ZK's live demo. It makes it an easy development cycle on designing a page. It is also quite a good tool in doing prototyping or in discussing the specifications with customers. To sum it up, when porting a Mozilla XUL pages into ZK, the following are what should be taken care:
- Remove style-sheets that are specific to the Mozilla browser(chrome://...).
- Remove unused components and attributes.
- Rewrite some XUL tags to suitable ZK's ZUL tags.(e.g. change <text> to <label>)
- Rename <script> tag to <zscript>
- Rename the component's id to follow the java variable naming rules.
- Remove getElementById() to use the component's id as the reference variable directly.
- Change single quote into double quote for specifying a string.
- Change string comparison from operator "==" into Java method "equals()".
- Change onxyz attribute from lower case to upper case onXyz. (e.g. change onclick to onClick)
|Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.