Diff for /books/www/articles/xpfe_dhtml.html between versions 1.4 and 1.5

version 1.4, 2001/08/07 20:17:30 version 1.5, 2001/08/07 20:20:48
Line 6 Line 6
   
 <h2>XPFE vs. DHTML</h2>  <h2>XPFE vs. DHTML</h2>
   
<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.' This is an <a
away until the feature was complete.  This had to change.'  This is an href="http://www.mozilla.org/xpfe/ElevatorTouchyFeely.html">explanation posted</a> on mozilla.org describing how the Netscape 4.x browsers required a
<a href="http://www.mozilla.org/xpfe/ElevatorTouchyFeely.html">explanation posted</a> on mozilla.org describing different set of engineers to create and maintain the interface code for Netscape on each different platform, even though each version looked nearly
how the Netscape 4.x browsers required a different set of engineers to create and maintain the interface code foridentical.
Netscape on each different platform, even though each version looked nearly identical.
<p>For an organization committed to creating an application that runs on a range of <a href="http://www.mozilla.org/ports/">different platforms</a> this
<p>For an organization committed to creating an application that runs on a range of system of using platform specific code was a huge investment and a big waste of time.  XPFE, Mozilla's cross-platform front end, was designed to fix this
<a href="http://www.mozilla.org/ports/">different platforms</a> 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
system of using platform specific code was a huge investment and a big waste of time.  XPFE, Mozilla's technique and then turned into one of Mozilla's most powerful innovations.
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>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
 of Mozilla's most powerful innovations.technology ended up having the unintended consequence of lowering the barriers to entry for application developers.  Mike Cornall, in <a
href="http://linuxtoday.com/news_story.php3?ltsn=2000-07-25-001-07-OP-SM-0036">an article</a> about Mozilla published on LinuxToday, summarizes the
<p>Mozilla engineers were trying to create a more efficient process that would save them time and effort whenhistory of XPFE well when he says: 'The application platform capabilities of Mozilla came about through a happy coincidence of Open Source development,
they started work on XPFE, but this technology ended up having the unintended consequence of lowering the barriersgood design, and far-sighted developers who were paying attention.'
to entry for application developers.  Mike Cornall, in 
<a href="http://linuxtoday.com/news_story.php3?ltsn=2000-07-25-001-07-OP-SM-0036">an article</a> about Mozilla <p>All browsers allow people using any type of computer to access applications on the Web, such as Yahoo! Mail, Amazon and Ebay. Mozilla is simply
published on LinuxToday, summarizes the history of XPFE well when he says: 'The application platform capabilitiesbuilding on this idea.  Using new technologies in conjunction with existing Web standards Mozilla enables the creation of more powerful applications, so
of Mozilla came about through a happy coincidence of Open Source development, good design, and far-sightedinstead of using Opera, Netscape 4.x or Internet Explorer to access a Web page you can use a full-featured application with Mozilla.
developers who were paying attention.' 
 
<p>All browsers allow people using any type of computer to access applications on the  
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>The technologies that XPFE uses are all existing Web standards, such as Cascading Style Sheets, JavaScript and XML (the XML component is a new
 XML (the XML component is a new language called XUL, the XML-based User Interface Language).  Since well understoodlanguage called XUL, the XML-based User Interface Language).  Since well understood Web standards are being used to create applications instead of
 Web standards are being used to create applications instead of platform-specific C code, a whole new group of peopleplatform-specific C code, a whole new group of people now have the ability to create their own applications using Mozilla.
 now have the ability to create their own applications using Mozilla.
<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
<p>In the sense that XPFE uses some of the same standards that are used to create Web pages, Mozilla-basedpages.  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
 applications can even be thought of as Web pages.  Gecko, the HTML rendering engine that Mozilla uses, also drawslevel treated the same way by Mozilla itself.
 all XPFE content, so a Web page and an application created with XPFE are on one level treated the same way by 
Mozilla itself.<p>Web developers and designers who use Mozilla are naturally attracted to the fact that they can create applications using the same skills and
techniques that they used to create Web pages in the past.  The specifics involved with creating Mozilla applications are different but should seem very
<p>Web developers and designers who use Mozilla are naturally attracted to the fact that they can createfamiliar to anyone who has created for the Web before.
 applications using the same skills and techniques that they used to create Web pages in the past.  The specifics
 involved with creating Mozilla applications are different but should seem very familiar to anyone who has created<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
 for the Web before.Mozilla-based application, but includes the functionality and structure of that application as well.  More simply put, XPFE allows users to do more than
just create a skin for an application.  For example, Netscape 6 does use this functionality to allow for the creation of <a
<p>When talking about front ends it is important to clarify what this means.  In this context a front end is morehref="http://www.netscape.com/themes/">different themes</a> for their browser suite, but the browser suite itself is also created out of these same
 than the look and feel of a Mozilla-based application, but includes the functionality and structure of that applicationtechnologies.
 as well.  More simply put, XPFE allows users to do more than just create a skin for an application.  For example, 
 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 
 is also created out of these same technologies. 
   
   <center>
 <p><img src="http://books.mozdev.org/screenshots/moz_0101.gif"><br>  <p><img src="http://books.mozdev.org/screenshots/moz_0101.gif"><br>
<i>Figure 1: XPFE Framework</i><font size="-1"><i>Figure 1: XPFE Framework</i></font>
 </center>
   
<p>To understand all of the capabilities of XPFE, we can look at how the different components of it fit together.  <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
JavaScript is used to create the functionality for a Mozilla-based application, Cascading Style Sheets are used for functionality for a Mozilla-based application, Cascading Style Sheets are used for formatting the look and feel, and XUL is used for creating the
formatting the look and feel, and XUL is used for creating the application's structure.  Viewed together these three application's structure.  Viewed together these three standards can be seen forming the triangle in Figure 1 above.
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 JavaScript
a combination of HTML with JavaScript and CSS that allows a developer to create a Web application that is containedand 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
 within the content area of a browser.  XPFE provides a logical evolution to this idea by allowing the creation ofthis 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
 applications that are more powerful, more flexible and that can live outside of the browser window as stand-aloneprograms.
 programs.
<p>Figure 2 below illustrates the similarities between XPFE and DHTML.  Both use JavaScript to create functionality, both use CSS to format the design
<p>Figure 2 below illustrates the similarities between XPFE and DHTML.  Both use JavaScript to create functionality, bothand 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
 use CSS to format the design and layout, and both use a fairly simple mark-up language to describe content.  The HTML 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>
 <p><img src="http://books.mozdev.org/screenshots/moz_0102.gif"><br>  <p><img src="http://books.mozdev.org/screenshots/moz_0102.gif"><br>
<i>Figure 2: Comparison of DHTML and XPFE</i><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><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
 as a simple system to link together separate text documents on the Internet.  Later additions to the HTML standard link together separate text documents on the Internet.  Later additions to the HTML standard have extended its functionality, but even these enhancements
have extended its functionality, but even these enhancements can't make it an appropriate language to use for developing can't make it an appropriate language to use for developing applications.  XUL is a language specifically designed for creating user interfaces, so it
applications.  XUL is a language specifically designed for creating user interfaces, so it makes sense that XPFE is more makes sense that XPFE is more suited for application development than DHTML.
suited for application development than DHTML.
<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
<p>Fortunately since XUL as a language is structurally similar to HTML it is simple enough to learn if you are alreadyof 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>
 familiar with the basic language of the Web.  Even if you have never used HTML before, XUL uses a straight-forward 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
<a href="http://www.mozilla.org/xpfe/xulref/">collection of tags</a> that makes it easy to get comfortable with it in your own applications.
a short time.  Once you become accustomed to using XUL you will be ready to start using XPFE to create your own applications. 
   
 <p><b>Oversimplifying in the Metaphor</b>  <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 <p>This overview of XPFE as a simple evolution of DHTML is an oversimplification of the story and deliberately leaves out much important information.  
out much important information.  These details were ignored at first to give a conceptual framework for understanding 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
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 basics, we can go back and talk about the rest of the functionality available with using Mozilla to create applications.
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
<p>At the <a href="http://meetzilla.mozdev.org/second_meeting.html">Second Mozilla Developer Meeting</a>, Rob Ginda, discussion group about Mozilla as Platform.  In this session he listed all of the following as components of a Mozilla-based application:
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">  <FONT COLOR="#800000">
 <UL>  <UL>
Line 117  as components of a Mozilla-based applica Line 105  as components of a Mozilla-based applica
 </UL>  </UL>
 </FONT>  </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 of them 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 that can be used in addition to the basic functionality.
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 using it.  <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great
 using data in Mozilla but it is possible to create an application without using it.  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
<a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great amount create an application without 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 that has yet to prove itself to the Web community and many people are skeptical about the need for an application framework
about the need for an application framework such as this.  Before you make up your mind about XPFE, you should 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
take a look at the many different applications that have already been created using Mozilla so you can judge for Mozilla so you can judge for yourself.
yourself.  
<p>If you are interested in trying out some of these, there are currently over 40 different Mozilla-based applications being hosted on <a
<p>If you are interested in trying out some of these, there are currently over 30 different Mozilla-based href="http://www.mozdev.org/projects.html">mozdev.org</a> that have been created using XPFE.  Other applications using the same technology include
applications being hosted on <a href="http://www.mozdev.org/projects.html">mozdev.org</a> that have been created using XPFE.  ActiveState's <a href="http://www.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE, Rob Ginda's <a
Other applications using the same technology include ActiveState'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.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE,  Rob Ginda's Initiative</a>.
<a href="http://www.hacksrus.com/~ginda/chatzilla/">ChatZilla</a> IRC client, and Zope's  
<a href="http://www.zope.org/Resources/Mozilla/">Mozilla Initiative</a>. 
   
 </body>  </body>
 </html>  </html>

Removed from v.1.4  
changed lines
  Added in v.1.5


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