Annotation of books/www/articles/xpfe_dhtml.html, revision 1.9
1.1 david 1: <html>
3: <title>XPFE vs. DHTML</title>
5: <body bgcolor="#FFFFFF">
1.6 david 7: <font size="+1"><b>XPFE vs. DHTML</b></font>
1.1 david 8:
1.7 david 9: <p>'In the beginning, there were 3 front ends: Mac, Windows and Unix. Each took a suite of developers to maintain. Adding a new feature (even just a
1.9 ! david 10: button) required 3 engineers to waste at least a day (more often a week) slaving away until the feature was complete. This had to change.'
! 12: <p>This <a href="http://mozilla.org/xpfe/ElevatorTouchyFeely.html">quote</a> is posted on mozilla.org and describes how the Netscape 4.x browsers
! 13: required a different set of engineers to create and maintain the code for the user interface, even though the browser looked nearly identical on each
! 14: different supported platform.
1.8 david 15:
16: <p>For a company committed to creating an application that runs on a wide range of different systems, using platform specific code was a big waste of
17: time. XPFE, Mozilla's cross-platform front end, was designed to solve this problem by enabling engineers to create one interface that would then work on
18: any operating system.
20: <p>This new technology started out as a time-saving technique and turned into one of Mozilla's most powerful innovations. When they started work on XPFE
21: Mozilla engineers were trying to create a more efficient process that would save them time and effort, but this technology ended up having the unintended
22: consequence of lowering the barriers to entry for application developers.
1.7 david 23:
24: <p>Mike Cornall, in an article about Mozilla published on LinuxToday, summarizes the history of XPFE well when he says: 'The application platform
25: capabilities of Mozilla came about through a happy coincidence of Open Source development, good design, and far-sighted developers who were paying
1.8 david 26: attention.' To better understand this happy coincidence it is necessary to take a closer look at what XPFE is made of.
1.7 david 27:
1.1 david 29:
30: <p><b>Understanding XPFE</b>
33: language called XUL, the XML-based User Interface Language). Since well understood Web standards are being used to create applications instead of
34: platform-specific C code, a whole new group of people now have the ability to create their own applications using Mozilla.
36: <p>In the sense that XPFE uses some of the same standards that are used to create Web pages, Mozilla-based applications can even be thought of as Web
37: pages. Gecko, the HTML rendering engine that Mozilla uses, also draws all XPFE content, so a Web page and an application created with XPFE are on one
38: level treated the same way by Mozilla itself.
40: <p>Web developers and designers who use Mozilla are naturally attracted to the fact that they can create applications using the same skills and
41: techniques that they used to create Web pages in the past. The specifics involved with creating Mozilla applications are different but should seem very
42: familiar to anyone who has created for the Web before.
44: <p>When talking about front ends it is important to clarify what this means. In this context a front end is more than the look and feel of a
45: Mozilla-based application, but includes the functionality and structure of that application as well. More simply put, XPFE allows users to do more than
46: just create a skin for an application. For example, Netscape 6 does use this functionality to allow for the creation of <a
47: href="http://www.netscape.com/themes/">different themes</a> for their browser suite, but the browser suite itself is also created out of these same
1.1 david 49:
1.5 david 50: <center>
1.3 david 51: <p><img src="http://books.mozdev.org/screenshots/moz_0101.gif"><br>
1.5 david 52: <font size="-1"><i>Figure 1: XPFE Framework</i></font>
1.2 david 54:
56: functionality for a Mozilla-based application, Cascading Style Sheets are used for formatting the look and feel, and XUL is used for creating the
57: application's structure. Viewed together these three standards can be seen forming the triangle in Figure 1 above.
1.1 david 58:
59: <p><b>Comparing XPFE and DHTML</b>
62: and CSS that allows a developer to create a Web application that is contained within the content area of a browser. XPFE provides a logical evolution to
63: this idea by allowing the creation of applications that are more powerful, more flexible and that can live outside of the browser window as stand-alone
67: and layout, and both use a fairly simple mark-up language to describe content. The difference between the two is that one of these mark-up languages is
68: HTML and the other is XUL.
1.1 david 69:
1.5 david 70: <center>
1.4 david 71: <p><img src="http://books.mozdev.org/screenshots/moz_0102.gif"><br>
1.5 david 72: <font size="-1"><i>Figure 2: Comparison of DHTML and XPFE</i></font>
1.1 david 74:
1.5 david 75: <p>Although HTML has been put to many different uses, it was <a href="http://www.w3.org/MarkUp/#historical">originally designed</a> as a simple system to
76: link together separate text documents on the Internet. Later additions to the HTML standard have extended its functionality, but even these enhancements
77: can't make it an appropriate language to use for developing applications. XUL is a language specifically designed for creating user interfaces, so it
78: makes sense that XPFE is more suited for application development than DHTML.
80: <p>Fortunately since XUL as a language is structurally similar to HTML it is simple enough to learn if you are already familiar with the basic language
81: of the Web. Even if you have never used HTML before, XUL uses a straight-forward <a href="http://www.mozilla.org/xpfe/xulref/">collection of tags</a>
82: that makes it easy to get comfortable with it in a short time. Once you become accustomed to using XUL you will be ready to start using XPFE to create
83: your own applications.
1.1 david 84:
85: <p><b>Oversimplifying in the Metaphor</b>
1.5 david 87: <p>This overview of XPFE as a simple evolution of DHTML is an oversimplification of the story and deliberately leaves out much important information.
88: These details were ignored at first to give a conceptual framework for understanding the new ideas that XPFE represent. Now that we've gotten past the
89: basics, we can go back and talk about the rest of the functionality available with using Mozilla to create applications.
91: <p>At the <a href="http://meetzilla.mozdev.org/second_meeting.html">Second Mozilla Developer Meeting</a>, Rob Ginda, the creator of ChatZilla, lead a
92: discussion group about Mozilla as Platform. In this session he listed all of the following as components of a Mozilla-based application:
1.1 david 93:
94: <FONT COLOR="#800000">
96: <LI>XUL (XML-based User Interface Language) - Used to create the structure and content of an application.<br><br>
97: <LI>CSS (Cascading Style Sheets) - Used to create the look and feel of an application.<br><br>
99: <LI>XPInstall (Cross-Platform Install) - Used to package applications so that they can be installed on any platform.<br><br>
100: <LI>RDF (Resource Description Framework) - Used to store data and transmit information. Generally regarded to be one of the most complicated aspects of XPFE.<br><br>
101: <LI>DTD (Document Type Definition) - Used for localization and internationalization, more commonly referred to in short-hand as L12N and I18N respectively.<br><br>
103: <LI>XUL templates - Used to create a framework for importing data into an application with a combination of RDF and XUL.<br><br>
1.5 david 108: <p>Each of these technologies is important and several of these deserve to have whole books devoted to them. Although each of these technologies is
109: important there is a distinction to be made among them. Some of these are essential to the creation of a Mozilla application and some of them provide
110: powerful extra features that can be used in addition to the basic functionality.
112: <p>For example, <a href="http://www.mozilla.org/rdf/doc/">RDF</a> is an extremely powerful technology for using data in Mozilla but it is possible to
113: create an application without using it. <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great
114: amount of flexibility and usability but there are many existing applications that don't take advantage of this feature. It wouldn't be possible to
115: create an application without XUL though.
1.1 david 116:
117: <p><b>Judge For Yourself</b>
1.5 david 119: <p>XPFE is a new technology that has yet to prove itself to the Web community and many people are skeptical about the need for an application framework
120: such as this. Before you make up your mind about XPFE, you should take a look at the many different applications that have already been created using
121: Mozilla so you can judge for yourself.
123: <p>If you are interested in trying out some of these, there are currently over 40 different Mozilla-based applications being hosted on <a
124: href="http://www.mozdev.org/projects.html">mozdev.org</a> that have been created using XPFE. Other applications using the same technology include
125: ActiveState's <a href="http://www.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE, Rob Ginda's <a
126: href="http://www.hacksrus.com/~ginda/chatzilla/">ChatZilla</a> IRC client, and Zope's <a href="http://www.zope.org/Resources/Mozilla/">Mozilla
1.1 david 128: