Diff for /books/www/articles/xpfe_dhtml.html between versions 1.2 and 1.26

version 1.2, 2001/08/07 20:15:50 version 1.26, 2001/08/14 18:47:07
Line 4 Line 4
 </head>  </head>
 <body bgcolor="#FFFFFF">  <body bgcolor="#FFFFFF">
   
<h2>XPFE vs. DHTML</h2><font size="+1"><b>XPFE vs. DHTML</b></font>
   
<p>'In the beginning, there were 3 front ends: Mac, Windows and Unix.  Each took a suite of developers to maintain.<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
Adding a new feature (even just a button) required 3 engineers to waste at least a day (more often a week) slaving 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.' 
away until the feature was complete.  This had to change.'  This is an 
<a href="http://www.mozilla.org/xpfe/ElevatorTouchyFeely.html">explanation posted</a> on mozilla.org describing <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
how the Netscape 4.x browsers required a different set of engineers to create and maintain the interface code forrequired a different set of engineers to create and maintain the code for the user interface, even though the browser looked nearly identical on each
Netscape on each different platform, even though each version looked nearly identical.different supported platform.
<p>For an organization committed to creating an application that runs on a range of <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
<a href="http://www.mozilla.org/ports/">different platforms</a> this 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
system of using platform specific code was a huge investment and a big waste of time.  XPFE, Mozilla's any operating system.  
cross-platform front end, was designed to fix this by allowing engineers to be able to create one interface that would then
 work on any operating system.  This new technology started out as a time-saving technique and then turned into one<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
 of Mozilla's most powerful innovations.application.  For example, Netscape 6 does use XPFE to allow for the creation of <a href="http://www.netscape.com/themes/">different themes</a> for
their browser suite, but the browser suite itself is created using XPFE as well.
<p>Mozilla engineers were trying to create a more efficient process that would save them time and effort when
they started work on XPFE, but this technology ended up having the unintended consequence of lowering the barriers<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
to entry for application developers.  Mike Cornall, in href="http://linuxtoday.com/news_story.php3?ltsn=2000-07-25-001-07-OP-SM-0036">an article</a> published on LinuxToday, summarizes the history of XPFE
<a href="http://linuxtoday.com/news_story.php3?ltsn=2000-07-25-001-07-OP-SM-0036">an article</a> about Mozilla well when he says: 'The application platform capabilities of Mozilla came about through a happy coincidence of Open Source development, good design, and
published on LinuxToday, summarizes the history of XPFE well when he says: 'The application platform capabilitiesfar-sighted developers who were paying attention.'
of Mozilla came about through a happy coincidence of Open Source development, good design, and far-sighted
developers who were paying attention.'<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
unintended consequence of lowering the barriers to entry to application development.  To better understand this happy coincidence and why it can be so
<p>All browsers allow people using any type of computer to access applications on the useful for developers it is necessary to take a closer look at what XPFE is made of.
Web, such as Yahoo! Mail, Amazon and Ebay. Mozilla is simply building on this idea.   
Using new technologies in conjunction with existing Web standards Mozilla enables the creation of  
more powerful applications, so instead of using Opera, Netscape 4.x or Internet Explorer  
to access a Web page you can use a full-featured application with Mozilla. 
   
 <p><b>Understanding XPFE</b>  <p><b>Understanding XPFE</b>
   
<p>The technologies that XPFE uses are all existing Web standards, such as Cascading Style Sheets, JavaScript and<p>XPFE uses a number of existing Web standards, such as <a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets</a>, <a
 XML (the XML component is a new language called XUL, the XML-based User Interface Language).  Since well understoodhref="http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM">JavaScript</a> and <a href="http://www.w3.org/XML/">XML</a> (the XML component is a new language
 Web standards are being used to create applications instead of platform-specific C code, a whole new group of peoplecalled 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.
 now have the ability to create their own applications using Mozilla.Viewed together these can be seen forming XPFE in Figure 1 below.
<p>In the sense that XPFE uses some of the same standards that are used to create Web pages, Mozilla-based<center>
 applications can even be thought of as Web pages.  Gecko, the HTML rendering engine that Mozilla uses, also draws<p><img src="http://books.mozdev.org/screenshots/moz_0101.gif"><br>
 all XPFE content, so a Web page and an application created with XPFE are on one level treated the same way by <font size="-1"><i>Figure 1: XPFE Framework</i></font>
Mozilla itself.</center>
<p>Web developers and designers who use Mozilla are naturally attracted to the fact that they can create<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
 applications using the same skills and techniques that they used to create Web pages in the past.  The specificsMozilla-based application, Cascading Style Sheets are used for formatting the look and feel, and XUL is used for creating the application's
 involved with creating Mozilla applications are different but should seem very familiar to anyone who has createdstructure.
 for the Web before.
<p>Instead of using platform-specific C code to create an application, XPFE uses these well understood Web standards that are by design inherently
<p>When talking about front ends it is important to clarify what this means.  In this context a front end is moreplatform independent.  Since the framework of XPFE is inherently platform independent, so are the applications that are created with it.  Since the
 than the look and feel of a Mozilla-based application, but includes the functionality and structure of that applicationframework 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
 as well.  More simply put, XPFE allows users to do more than just create a skin for an application.  For example,create a cross-platform application.
 Netscape 6 does use this functionality to allow for the creation of 
<a href="http://www.netscape.com/themes/">different themes</a> for their browser suite, but the browser suite itself<p>Although the actual creation of Mozilla-based applications can be much more complicated than building a Web page, XPFE allows developers to create
 is also created out of these same technologies.applications in the same way they would create a Web page.  Or to put it another way, the application is now a Web page.  
 
<img src="http://books.mozdev.org/screenshots/moz_0101.gif"><br> 
<i>Figure 1: XPFE Framework</i> 
 
<!-- 
<pre> 
                XUL 
               /  \ 
              /    \ 
             /      \ 
            /        \ 
           JS ------ CSS 
 
      Figure 1: XPFE Framework 
</pre> 
--> 
 
<p>To understand all of the capabilities of XPFE, we can look at how the different components of it fit together.   
JavaScript is used to create the functionality for a Mozilla-based application, Cascading Style Sheets are used for  
formatting the look and feel, and XUL is used for creating the application's structure.  Viewed together these three  
standards can be seen forming the triangle in Figure 1 above. 
   
 <p><b>Comparing XPFE and DHTML</b>  <p><b>Comparing XPFE and DHTML</b>
   
<p>In many ways XPFE is very similar to <a href="http://www.webreference.com/dhtml/">DHTML</a>.  Dynamic HTML is <p>In many ways XPFE is very similar to <a href="http://www.webreference.com/dhtml/">DHTML</a>.  Dynamic HTML is a combination of HTML with
a combination of HTML with JavaScript and CSS that allows a developer to create a Web application that is containedJavaScript and CSS that allows a developer to create an application that is contained within the content area of a browser.  XPFE provides a logical
 within the content area of a browser.  XPFE provides a logical evolution to this idea by allowing the creation ofevolution to this idea by allowing the creation of applications that are more powerful, more flexible and that can live outside of the browser window
 applications that are more powerful, more flexible and that can live outside of the browser window as stand-aloneas stand-alone programs.
 programs.
<p>Figure 2 below illustrates the similarities between XPFE and DHTML.  Both use JavaScript to create functionality, both use CSS to format design and
<p>Figure 2 below illustrates the similarities between XPFE and DHTML.  Both use JavaScript to create functionality, bothlayout, 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
 use CSS to format the design and layout, and both use a fairly simple mark-up language to describe content.  The and the other is XUL.
difference between the two is that one of these mark-up languages is HTML and the other is XUL.
<center>
<pre><p><img src="http://books.mozdev.org/screenshots/moz_0102.gif"><br>
        HTML                     XUL<font size="-1"><i>Figure 2: Comparison of DHTML and XPFE</i></font>
        /  \                    /  \</center>
       /    \                  /    \
      /      \                /      \<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
     /        \              /        \link together separate text documents on the Internet.  Later additions to the HTML standard have extended its functionality, but even these enhancements
    JS ----- CSS            JS ----- CSScan't make it an appropriate language to use for developing applications.  XUL is a language specifically designed for creating user interfaces, so it
makes sense that XPFE is more suited for application development than DHTML.
    Figure 2: Comparison of DHTML and XPFE
</pre><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
Mozilla-based applications.  Even if you have never used HTML before, XUL uses a straight-forward <a
<p>Although HTML has been put to many different uses, it was <a href="http://www.w3.org/MarkUp/#historical">originally designed</a>href="http://www.mozilla.org/xpfe/xulref/">collection of tags</a> that makes it easy to get comfortable with it in a short time.  Once you become
 as a simple system to link together separate text documents on the Internet.  Later additions to the HTML standard accustomed to using XUL you will be ready to start using XPFE to create your own applications.
have extended its functionality, but even these enhancements can't make it an appropriate language to use for developing 
applications.  XUL is a language specifically designed for creating user interfaces, so it makes sense that XPFE is more <p><b>Oversimplifying Things</b>
suited for application development than DHTML.
<p>Describing XPFE as a more sophisticated version of DHTML is an oversimplification and deliberately leaves out much important information.  These
<p>Fortunately since XUL as a language is structurally similar to HTML it is simple enough to learn if you are alreadydetails 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
 familiar with the basic language of the Web.  Even if you have never used HTML before, XUL uses a straight-forward back and talk about the rest of the functionality available with Mozilla that makes it such a powerful framework for creating applications.
<a href="http://www.mozilla.org/xpfe/xulref/">collection of tags</a> 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 your own applications.<p>At the <a href="http://meetzilla.mozdev.org/second_meeting.html">Second Mozilla Developer Meeting</a>, Rob Ginda, the creator of ChatZilla, led a
discussion group about Mozilla as Platform.  In this session he listed all of the following as components of a Mozilla-based application:
<p><b>Oversimplifying in the Metaphor</b> 
 
<p>This overview of XPFE as a simple evolution of DHTML is an oversimplification of the story and deliberately leaves  
out much important information.  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 basics, we can go back and talk about the rest of the  
functionality available with using Mozilla to create applications. 
 
<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 discussion group about Mozilla as Platform.  In this session he listed all of the following  
as components of a Mozilla-based application:</P> 
   
 <FONT COLOR="#800000">  
 <UL>  <UL>
 <LI>XUL (XML-based User Interface Language) - Used to create the structure and content of an application.<br><br>  <LI>XUL (XML-based User Interface Language) - Used to create the structure and content of an application.<br><br>
 <LI>CSS (Cascading Style Sheets) - Used to create the look and feel of an application.<br><br>  <LI>CSS (Cascading Style Sheets) - Used to create the look and feel of an application.<br><br>
<LI>JavaScript - Used to create the functionality of an application.<br><br><LI>JavaScript - Used to create the functionality of an application, although other scripting languages, such as Python, Perl or Ruby, can be used in 
 place of Javascript.<br><br>
 <LI>XPInstall (Cross-Platform Install) - Used to package applications so that they can be installed on any platform.<br><br>  <LI>XPInstall (Cross-Platform Install) - Used to package applications so that they can be installed on any platform.<br><br>
<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><LI>RDF (Resource Description Framework) - Used to store data and transmit information.  Generally regarded to be one of the most complicated 
<LI>DTD (Document Type Definition) - Used for localization and internationalization, more commonly referred to in short-hand as L12N and I18N respectively.<br><br>aspects of XPFE.<br><br>
<LI>XBL (eXtensible Binding Language) - Used to create reusable widgets using a combination of XUL and JavaScript.<br><br><LI>DTD (Document Type Definition) - Used for localization and internationalization, more commonly referred to in short-hand as L12N and I18N 
 respectively.<br><br>
 <LI>XBL (eXtensible Binding Language) - Used to create reusable widgets with a combination of XUL and JavaScript.<br><br>
 <LI>XUL templates - Used to create a framework for importing data into an application with a combination of RDF and XUL.<br><br>  <LI>XUL templates - Used to create a framework for importing data into an application with a combination of RDF and XUL.<br><br>
 <LI>XPCOM/XPConnect - Used to allow JavaScript, or potentially any other scripting language, to access and utilize C and C++ libraries.  <LI>XPCOM/XPConnect - Used to allow JavaScript, or potentially any other scripting language, to access and utilize C and C++ libraries.
 </UL>  </UL>
 </FONT>  
   
<p>Each of these technologies is important and several of these deserve to have whole books devoted to them.  Although<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
 each of these technologies is important there is a distinction to be made among them.  Some of these are essential to 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
the creation of a Mozilla application and some of them provide powerful extra features that can be used in addition to powerful extra features to the application developer.
the basic functionality.
<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
<p>For example, <a href="http://www.mozilla.org/rdf/doc/">RDF</a> is an extremely powerful technology forcreate an application without it.  <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great amount of
 using data in Mozilla but it is possible to create an application without using it.  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
<a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great amount XUL though.
of flexibility and usability but there are many existing applications that don't take advantage of this feature.   
It wouldn't be possible to create an application without XUL though. 
   
 <p><b>Judge For Yourself</b>  <p><b>Judge For Yourself</b>
   
<p>XPFE is a new technology that has yet to prove itself to the Web community and many people are skeptical <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
about the need for an application framework such as this.  Before you make up your mind about XPFE, you should 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
take a look at the many different applications that have already been created using Mozilla so you can judge for have already been created using Mozilla so you can judge for yourself.
yourself.  
<p>The first place to start would be to try using the latest version of <a href="http://mozilla.org/releases/">Mozilla</a> or <a
<p>If you are interested in trying out some of these, there are currently over 30 different Mozilla-based href="http://www.netscape.com/browsers/6/index.html">Netscape 6.1</a> if you haven't already, since these are the most well known applications that
applications being hosted on <a href="http://www.mozdev.org/projects.html">mozdev.org</a> that have been created using XPFE.  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
Other applications using the same technology include ActiveState's href="http://www.mozdev.org/projects.html">mozdev.org</a>.  Other applications using the same technology include ActiveState's <a
<a href="http://www.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE,  Rob Ginda's href="http://www.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE, Rob Ginda's <a
<a href="http://www.hacksrus.com/~ginda/chatzilla/">ChatZilla</a> IRC client, and Zope's href="http://www.hacksrus.com/~ginda/chatzilla/">ChatZilla</a> IRC client, and Zope's <a href="http://www.zope.org/Resources/Mozilla/">Mozilla
<a href="http://www.zope.org/Resources/Mozilla/">Mozilla Initiative</a>.Initiative</a>.
 
 <br><br>
 
 <p><i>Thanks to Julia Kleyman for creating the illustrations used in this article.</i>
   
 </body>  </body>
 </html>  </html>

Removed from v.1.2  
changed lines
  Added in v.1.26


FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>