Annotation of books/www/articles/xpfe_dhtml.html, revision 1.25

1.1       david       1: <html>
                      2: <head>
                      3: <title>XPFE vs. DHTML</title>
                      4: </head>
                      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="">quote</a> is posted on 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
1.18      david      18: any operating system.  
1.21      david      20: <p>In this context a front end is more than the look and feel of the application, but can also include the functionality and structure of that
                     21: application.  For example, Netscape 6 does use XPFE to allow for the creation of <a href="">different themes</a> for
                     22: their browser suite, but the browser suite itself is created using XPFE as well.
1.8       david      23: 
1.15      david      24: <p>This new technology started out as a time-saving technique and turned into one of Mozilla's most powerful innovations.  Mike Cornall, in <a
                     25: href="">an article</a> published on LinuxToday, summarizes the history of XPFE
                     26: well when he says: 'The application platform capabilities of Mozilla came about through a happy coincidence of Open Source development, good design, and
                     27: far-sighted developers who were paying attention.'
1.7       david      28: 
1.11      david      29: <p>Mozilla engineers were trying to create a more efficient process that would save them time and effort, but this technology ended up having the
1.15      david      30: unintended consequence of lowering the barriers to entry to application development.  To better understand this happy coincidence and why it can be so
1.11      david      31: useful for developers it is necessary to take a closer look at what XPFE is made of.
1.7       david      32: 
1.12      david      33: <p><b>Understanding XPFE</b>
1.20      david      35: <p>XPFE uses a number of existing Web standards, such as <a href="">Cascading Style Sheets</a>, <a
                     36: href="">JavaScript</a> and <a href="">XML</a> (the XML component is a new language
                     37: called XUL, the XML-based User Interface Language).  In it's most simple form, XPFE can be thought of as simply the union of each of these standards.
1.23      david      38: Viewed together these can be seen forming XPFE in Figure 1 below.
1.12      david      39: 
                     40: <center>
                     41: <p><img src=""><br>
                     42: <font size="-1"><i>Figure 1: XPFE Framework</i></font>
                     43: </center>
1.21      david      45: <p>To understand how XPFE works, we can look at how these different components fit together.  JavaScript is used to create the functionality for a
                     46: Mozilla-based application, Cascading Style Sheets are used for formatting the look and feel, and XUL is used for creating the application's
                     47: structure.
1.13      david      48: 
1.16      david      49: <p>Instead of using platform-specific C code to create an application, XPFE uses these well understood Web standards that are by design inherently
                     50: platform independent.  Since the framework of XPFE is inherently platform independent, so are the applications that are created with it.  Since the
1.21      david      51: framework is also made up of tools that are used to create Web pages, people familiar with creating a Web page can quickly learn how to use XPFE to
                     52: create a cross-platform application.
1.16      david      53: 
                     54: <p>Although the actual creation of Mozilla-based applications can be much more complicated than building a Web page, XPFE allows developers to create
1.21      david      55: applications in the same way they would create a Web page.  Or to put it another way, the application is now a Web page.  
1.1       david      57: <p><b>Comparing XPFE and DHTML</b>
1.24      david      59: <p>In many ways XPFE is very similar to <a href="">DHTML</a>.  Dynamic HTML is a combination of HTML with
                     60: JavaScript and CSS that allows a developer to create an application that is contained within the content area of a browser.  XPFE provides a logical
                     61: evolution to this idea by allowing the creation of applications that are more powerful, more flexible and that can live outside of the browser window
                     62: as stand-alone programs.
1.5       david      63: 
1.17      david      64: <p>Figure 2 below illustrates the similarities between XPFE and DHTML.  Both use JavaScript to create functionality, both use CSS to format design and
                     65: 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 HTML
                     66: and the other is XUL.
1.1       david      67: 
1.5       david      68: <center>
1.4       david      69: <p><img src=""><br>
1.5       david      70: <font size="-1"><i>Figure 2: Comparison of DHTML and XPFE</i></font>
                     71: </center>
1.1       david      72: 
1.5       david      73: <p>Although HTML has been put to many different uses, it was <a href="">originally designed</a> as a simple system to
                     74: link together separate text documents on the Internet.  Later additions to the HTML standard have extended its functionality, but even these enhancements
                     75: can't make it an appropriate language to use for developing applications.  XUL is a language specifically designed for creating user interfaces, so it
                     76: makes sense that XPFE is more suited for application development than DHTML.
1.17      david      78: <p>Since XUL is structurally similar to HTML, knowledge of building Web pages will give you a boost in learning how to create cross-platform
                     79: Mozilla-based applications.  Even if you have never used HTML before, XUL uses a straight-forward <a
                     80: href="">collection of tags</a> that makes it easy to get comfortable with it in a short time.  Once you become
                     81: accustomed to using XUL you will be ready to start using XPFE to create your own applications.
                     83: <p><b>Oversimplifying Things</b>
                     85: <p>Describing XPFE as a more sophisticated version of DHTML is an oversimplification and deliberately leaves out much important information.  These
                     86: details were ignored in the comparison to give a better understanding of the basic framework of XPFE.  Now that we've gotten past the basics, we can go
                     87: back and talk about the rest of the functionality available with Mozilla that makes it such a powerful framework for creating applications.
1.5       david      88: 
1.21      david      89: <p>At the <a href="">Second Mozilla Developer Meeting</a>, Rob Ginda, the creator of ChatZilla, led a
1.5       david      90: 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      91: 
                     92: <UL>
                     93: <LI>XUL (XML-based User Interface Language) - Used to create the structure and content of an application.<br><br>
                     94: <LI>CSS (Cascading Style Sheets) - Used to create the look and feel of an application.<br><br>
1.19      david      95: <LI>JavaScript - Used to create the functionality of an application, although other scripting languages, such as Python, Perl or Ruby, can be used in 
1.21      david      96: place of Javascript.<br><br>
1.1       david      97: <LI>XPInstall (Cross-Platform Install) - Used to package applications so that they can be installed on any platform.<br><br>
1.17      david      98: <LI>RDF (Resource Description Framework) - Used to store data and transmit information.  Generally regarded to be one of the most complicated 
                     99: aspects of XPFE.<br><br>
                    100: <LI>DTD (Document Type Definition) - Used for localization and internationalization, more commonly referred to in short-hand as L12N and I18N 
                    101: respectively.<br><br>
1.21      david     102: <LI>XBL (eXtensible Binding Language) - Used to create reusable widgets with a combination of XUL and JavaScript.<br><br>
1.1       david     103: <LI>XUL templates - Used to create a framework for importing data into an application with a combination of RDF and XUL.<br><br>
                    104: <LI>XPCOM/XPConnect - Used to allow JavaScript, or potentially any other scripting language, to access and utilize C and C++ libraries.
                    105: </UL>
1.5       david     107: <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
1.21      david     108: important there is a distinction to be made among them.  Some of these are essential to the creation of a Mozilla application and some provide
                    109: powerful extra features.
1.5       david     110: 
                    111: <p>For example, <a href="">RDF</a> is an extremely powerful technology for using data in Mozilla but it is possible to
1.17      david     112: create an application without it.  <a href="">Localization</a> also provides Mozilla with a great amount of
                    113: flexibility but there are many existing applications that don't take advantage of this feature.  It wouldn't be possible to create an application without
                    114: XUL though.
1.1       david     116: <p><b>Judge For Yourself</b>
1.21      david     118: <p>XPFE is a new technology and has yet to prove itself to the Web community.  Many people are also skeptical about the need for an application
                    119: development framework such as this.  Before you make up your mind about XPFE though, you should take a look at the many different applications that
                    120: have already been created using Mozilla so you can judge for yourself.
                    122: <p>The first place to start would be to try using the latest version of <a href="">Mozilla</a> or <a
                    123: href="">Netscape 6.1</a> if you haven't already, since these are the most well known applications that
1.22      david     124: use XPFE.  If you want to try out other projects using XPFE, there are currently over 40 different Mozilla-based applications being hosted on <a
1.21      david     125: href=""></a>.  Other applications using the same technology include ActiveState's <a
                    126: href="">Komodo</a> IDE, Rob Ginda's <a
1.5       david     127: href="">ChatZilla</a> IRC client, and Zope's <a href="">Mozilla
                    128: Initiative</a>.
1.13      david     129: 
                    130: <br><br>
                    132: <p><i>Thanks to Julia Kleyman for creating the illustrations used in this article.</i>
1.1       david     133: 
                    134: </body>
                    135: </html>

FreeBSD-CVSweb <>