Annotation of books/www/articles/xpfe_dhtml.html, revision 1.2
1.1 david 1: <html>
3: <title>XPFE vs. DHTML</title>
5: <body bgcolor="#FFFFFF">
7: <h2>XPFE vs. DHTML</h2>
9: <p>'In the beginning, there were 3 front ends: Mac, Windows and Unix. Each took a suite of developers to maintain.
10: Adding a new feature (even just a button) required 3 engineers to waste at least a day (more often a week) slaving
11: away until the feature was complete. This had to change.' This is an
12: <a href="http://www.mozilla.org/xpfe/ElevatorTouchyFeely.html">explanation posted</a> on mozilla.org describing
13: how the Netscape 4.x browsers required a different set of engineers to create and maintain the interface code for
14: Netscape on each different platform, even though each version looked nearly identical.
16: <p>For an organization committed to creating an application that runs on a range of
17: <a href="http://www.mozilla.org/ports/">different platforms</a> this
18: system of using platform specific code was a huge investment and a big waste of time. XPFE, Mozilla's
19: cross-platform front end, was designed to fix this by allowing engineers to be able to create one interface that would then
20: work on any operating system. This new technology started out as a time-saving technique and then turned into one
21: of Mozilla's most powerful innovations.
23: <p>Mozilla engineers were trying to create a more efficient process that would save them time and effort when
24: they started work on XPFE, but this technology ended up having the unintended consequence of lowering the barriers
25: to entry for application developers. Mike Cornall, in
26: <a href="http://linuxtoday.com/news_story.php3?ltsn=2000-07-25-001-07-OP-SM-0036">an article</a> about Mozilla
27: published on LinuxToday, summarizes the history of XPFE well when he says: 'The application platform capabilities
28: of Mozilla came about through a happy coincidence of Open Source development, good design, and far-sighted
29: developers who were paying attention.'
31: <p>All browsers allow people using any type of computer to access applications on the
32: Web, such as Yahoo! Mail, Amazon and Ebay. Mozilla is simply building on this idea.
33: Using new technologies in conjunction with existing Web standards Mozilla enables the creation of
34: more powerful applications, so instead of using Opera, Netscape 4.x or Internet Explorer
35: to access a Web page you can use a full-featured application with Mozilla.
37: <p><b>Understanding XPFE</b>
40: XML (the XML component is a new language called XUL, the XML-based User Interface Language). Since well understood
41: Web standards are being used to create applications instead of platform-specific C code, a whole new group of people
42: now have the ability to create their own applications using Mozilla.
44: <p>In the sense that XPFE uses some of the same standards that are used to create Web pages, Mozilla-based
45: applications can even be thought of as Web pages. Gecko, the HTML rendering engine that Mozilla uses, also draws
46: all XPFE content, so a Web page and an application created with XPFE are on one level treated the same way by
47: Mozilla itself.
49: <p>Web developers and designers who use Mozilla are naturally attracted to the fact that they can create
50: applications using the same skills and techniques that they used to create Web pages in the past. The specifics
51: involved with creating Mozilla applications are different but should seem very familiar to anyone who has created
52: for the Web before.
54: <p>When talking about front ends it is important to clarify what this means. In this context a front end is more
55: than the look and feel of a Mozilla-based application, but includes the functionality and structure of that application
56: as well. More simply put, XPFE allows users to do more than just create a skin for an application. For example,
57: Netscape 6 does use this functionality to allow for the creation of
58: <a href="http://www.netscape.com/themes/">different themes</a> for their browser suite, but the browser suite itself
59: is also created out of these same technologies.
1.2 ! david 61: <img src="http://books.mozdev.org/screenshots/moz_0101.gif"><br>
! 62: <i>Figure 1: XPFE Framework</i>
! 64: <!--
1.1 david 65: <pre>
67: / \
68: / \
69: / \
70: / \
71: JS ------ CSS
73: Figure 1: XPFE Framework
1.2 ! david 75: -->
1.1 david 76:
77: <p>To understand all of the capabilities of XPFE, we can look at how the different components of it fit together.
79: formatting the look and feel, and XUL is used for creating the application's structure. Viewed together these three
80: standards can be seen forming the triangle in Figure 1 above.
82: <p><b>Comparing XPFE and DHTML</b>
84: <p>In many ways XPFE is very similar to <a href="http://www.webreference.com/dhtml/">DHTML</a>. Dynamic HTML is
86: within the content area of a browser. XPFE provides a logical evolution to this idea by allowing the creation of
87: applications that are more powerful, more flexible and that can live outside of the browser window as stand-alone
91: use CSS to format the design and layout, and both use a fairly simple mark-up language to describe content. The
92: difference between the two is that one of these mark-up languages is HTML and the other is XUL.
95: HTML XUL
96: / \ / \
97: / \ / \
98: / \ / \
99: / \ / \
100: JS ----- CSS JS ----- CSS
102: Figure 2: Comparison of DHTML and XPFE
105: <p>Although HTML has been put to many different uses, it was <a href="http://www.w3.org/MarkUp/#historical">originally designed</a>
106: as a simple system to link together separate text documents on the Internet. Later additions to the HTML standard
107: have extended its functionality, but even these enhancements can't make it an appropriate language to use for developing
108: applications. XUL is a language specifically designed for creating user interfaces, so it makes sense that XPFE is more
109: suited for application development than DHTML.
111: <p>Fortunately since XUL as a language is structurally similar to HTML it is simple enough to learn if you are already
112: familiar with the basic language of the Web. Even if you have never used HTML before, XUL uses a straight-forward
113: <a href="http://www.mozilla.org/xpfe/xulref/">collection of tags</a> that makes it easy to get comfortable with it in
114: a short time. Once you become accustomed to using XUL you will be ready to start using XPFE to create your own applications.
116: <p><b>Oversimplifying in the Metaphor</b>
118: <p>This overview of XPFE as a simple evolution of DHTML is an oversimplification of the story and deliberately leaves
119: out much important information. These details were ignored at first to give a conceptual framework for understanding
120: the new ideas that XPFE represent. Now that we've gotten past the basics, we can go back and talk about the rest of the
121: functionality available with using Mozilla to create applications.
123: <p>At the <a href="http://meetzilla.mozdev.org/second_meeting.html">Second Mozilla Developer Meeting</a>, Rob Ginda,
124: the creator of ChatZilla, lead a discussion group about Mozilla as Platform. In this session he listed all of the following
125: as components of a Mozilla-based application:</P>
127: <FONT COLOR="#800000">
129: <LI>XUL (XML-based User Interface Language) - Used to create the structure and content of an application.<br><br>
130: <LI>CSS (Cascading Style Sheets) - Used to create the look and feel of an application.<br><br>
132: <LI>XPInstall (Cross-Platform Install) - Used to package applications so that they can be installed on any platform.<br><br>
133: <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>
134: <LI>DTD (Document Type Definition) - Used for localization and internationalization, more commonly referred to in short-hand as L12N and I18N respectively.<br><br>
136: <LI>XUL templates - Used to create a framework for importing data into an application with a combination of RDF and XUL.<br><br>
141: <p>Each of these technologies is important and several of these deserve to have whole books devoted to them. Although
142: each of these technologies is important there is a distinction to be made among them. Some of these are essential to
143: the creation of a Mozilla application and some of them provide powerful extra features that can be used in addition to
144: the basic functionality.
146: <p>For example, <a href="http://www.mozilla.org/rdf/doc/">RDF</a> is an extremely powerful technology for
147: using data in Mozilla but it is possible to create an application without using it.
148: <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great amount
149: of flexibility and usability but there are many existing applications that don't take advantage of this feature.
150: It wouldn't be possible to create an application without XUL though.
152: <p><b>Judge For Yourself</b>
154: <p>XPFE is a new technology that has yet to prove itself to the Web community and many people are skeptical
155: about the need for an application framework such as this. Before you make up your mind about XPFE, you should
156: take a look at the many different applications that have already been created using Mozilla so you can judge for
159: <p>If you are interested in trying out some of these, there are currently over 30 different Mozilla-based
160: applications being hosted on <a href="http://www.mozdev.org/projects.html">mozdev.org</a> that have been created using XPFE.
161: Other applications using the same technology include ActiveState's
162: <a href="http://www.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE, Rob Ginda's
163: <a href="http://www.hacksrus.com/~ginda/chatzilla/">ChatZilla</a> IRC client, and Zope's
164: <a href="http://www.zope.org/Resources/Mozilla/">Mozilla Initiative</a>.