Diff for /books/www/articles/xpfe_dhtml.html between versions 1.16 and 1.20

version 1.16, 2001/08/09 20:57:18 version 1.20, 2001/08/10 17:59:27
Line 17  different supported platform. Line 17  different supported platform.
 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  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
 any operating system.    any operating system.  
   
   <p>In this context a front end is more than the look and feel of a Mozilla-based application, but can also include the functionality and structure of
   that 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 also created using XPFE.
   
 <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  <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
 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  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
 well when he says: 'The application platform capabilities of Mozilla came about through a happy coincidence of Open Source development, good design, and  well when he says: 'The application platform capabilities of Mozilla came about through a happy coincidence of Open Source development, good design, and
Line 28  useful for developers it is necessary to Line 32  useful for developers it is necessary to
   
 <p><b>Understanding XPFE</b>  <p><b>Understanding XPFE</b>
   
<p>The technologies that XPFE uses are all existing Web standards, such as <a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets</a>, <p>XPFE uses a number of existing Web standards, such as <a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets</a>, <a
<a href="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 newhref="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
language 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 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.
standards. 
   
 <center>  <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>
Line 51  application. Line 54  application.
 applications in the same way they would create a Web page.  Or to put it another way, the application is now a Web page.  Gecko, the rendering engine  applications in the same way they would create a Web page.  Or to put it another way, the application is now a Web page.  Gecko, the rendering engine
 that Mozilla uses to draw a Web page in the browser, even draws the Mozilla application on the desktop.  that Mozilla uses to draw a Web page in the browser, even draws the Mozilla application on the desktop.
   
 <hr>  
   
 <p>/*** extra content  
   
 <p>Mozilla itself certainly doesn't distinguish between a Web page and an XPFE application.  
   
 <p>Since well understood Web standards are being used to create applications instead of platform-specific C code, a whole new group of people now have the  
 ability to create their own applications using Mozilla.  
   
 <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  
 familiar to anyone who has created for the Web before.  
   
 <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  
 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  
 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.  
   
 <p>***/  
   
 <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 a combination of HTML with JavaScript  <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
Line 79  and CSS that allows a developer to creat Line 61  and CSS that allows a developer to creat
 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  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
 programs.  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, both use CSS to format design and
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 islayout, 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
HTML and the other is XUL.and the other is XUL.
   
 <center>  <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>
Line 93  link together separate text documents on Line 75  link together separate text documents on
 can't make it an appropriate language to use for developing applications.  XUL is a language specifically designed for creating user interfaces, so it  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 suited for application development than DHTML.  makes sense that XPFE is more 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>Since XUL is structurally similar to HTML, knowledge of building Web pages will give you a boost in learning how to create cross-platform
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>Mozilla-based applications.  Even if you have never used HTML before, XUL uses a straight-forward <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 createhref="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
your own applications.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 Things</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.  <p>Describing XPFE as a more sophisticated version of DHTML is an oversimplification and deliberately leaves out much important information.  These
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 thedetails 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
basics, we can go back and talk about the rest of the functionality available with using Mozilla to create applications.back and talk about the rest of the functionality available with Mozilla that makes it such a powerful framework for creating 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, 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:  discussion group about Mozilla as Platform.  In this session he listed all of the following as components of a Mozilla-based application:
   
 <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 to create functionality for an application.<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>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 using a combination of XUL and JavaScript.<br><br>  <LI>XBL (eXtensible Binding Language) - Used to create reusable widgets using 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 each of these technologies is  <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
 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  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
 powerful extra features that can be used in addition to the basic functionality.  powerful extra features that can be used in addition to 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 for using data in Mozilla but it is possible to
create an application without using it.  <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a greatcreate an application without it.  <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great amount of
amount of flexibility and usability but there are many existing applications that don't take advantage of this feature.  It wouldn't be possible toflexibility but there are many existing applications that don't take advantage of this feature.  It wouldn't be possible to create an application without
create an application without XUL though.XUL though.
 
 <hr>
   
 <p><b>Judge For Yourself</b>  <p><b>Judge For Yourself</b>
   

Removed from v.1.16  
changed lines
  Added in v.1.20


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