File:  [mozdev] / books / www / chapters / ch01.html
Revision 1.16: download - view: text, annotated - select for diffs - revision graph
Fri Apr 4 16:18:27 2003 UTC (17 years ago) by cdn
Branches: MAIN
CVS tags: HEAD

    1:     <link rel="prev" href="" />
    2:     <link rel="next" href="" />
    4:     <style type="text/css">
    5:       div.c6 {text-align: center}
    6:     </style>
    8:     <h2>Chapter 1</h2>
    9:     <h1><a name="77011"></a> Mozilla as Platform</h1>
   10:     <p>The Mozilla project was started in March 1998 with 
   11:     <!--INDEX Mozilla:as a platform --> the goal of developing the
   12:     successor to Netscape's Communicator 4.x browser suite. Today
   13:     Mozilla is used by developers as a platform for creating
   14:     applications that can be installed locally or run remotely over
   15:     the Internet.</p>
   16:     <p>The difference between the Mozilla project's original goal
   17:     of creating a browser suite and its current use as a
   18:     cross-platform development framework is not as strange as it
   19:     may sound at first. A web browser might not seem like an
   20:     application development framework, but it is. Browsers allow
   21:     people using any type of computer to access applications such
   22:     as Yahoo! Mail to send and receive email, Amazon's book
   23:     ordering service, or eBay's online auction house.</p>
   24:     <p>Mozilla has expanded the idea of using a browser to access
   25:     applications by building on some of the technologies that are
   26:     used to create web sites, such as CSS and JavaScript. A
   27:     comparison of web technologies to Mozilla technologies is
   28:     presented in this chapter and is helpful in explaining how the
   29:     Mozilla project has turned into a platform for creating
   30:     cross-platform applications.</p>
   31:     <h2><a name="77012"></a> Visualizing Mozilla's Front End</h2>
   32:     <blockquote>
   33:       In the beginning, there were 3 front ends: Mac, Windows and
   34:       Unix. Each took a suite of developers to maintain. Adding a
   35:       new feature (even just a button) required 3 engineers to
   36:       waste at least a day (more often a week) slaving away until
   37:       the feature was complete. This had to change.
   38:     </blockquote>
   39:     <p>This quote is posted on and describes how the
   40:     Netscape 4.x browsers required a different set of engineers to
   41:     create and maintain the code for the user interface, even
   42:     though the browser looked nearly identical on each different
   43:     supported platform.</p>
   44:     <p>For a company committed to creating an application that runs
   45:     on a wide range of different systems, using platform-specific
   46:     code <!--INDEX XPFE --> was a big waste of time. XPFE,
   47:     Mozilla's cross-platform front end, was designed to solve this
   48:     problem by enabling engineers to create one interface that
   49:     would work on any operating system.</p>
   50:     <blockquote>
   51:       <hr>
   52:       <b>Extreme Portability</b> 
   53:       <p>Perhaps the biggest advantage Mozilla has 
   54:       <!--INDEX portability --> for a developer is that
   55:       Mozilla-based applications are cross-platform, which means
   56:       that these programs work the same on Windows as they do on
   57:       Unix or the Mac OS. It's possible to have applications run
   58:       across different platforms because Mozilla acts as an
   59:       interpretation layer between the operating system and the
   60:       application.</p>
   61:       <p>As long as Mozilla runs on a given computer, most
   62:       Mozilla-based applications also run on that computer,
   63:       regardless of what operating system it uses. Not all Mozilla
   64:       applications are cross-platform however, since it is possible
   65:       to create an application with platform-specific code that
   66:       runs only on certain operating <!--INDEX Camino --> systems,
   67:       like Camino (an ultra-fast browser that works only on Mac OS
   68:       X).</p>
   69:       <p>The number of different operating system 
   70:       <!--INDEX operating system ports;ports, operating system ports -->
   71:       ports of Mozilla gives you an idea of the full range of
   72:       Mozilla applications. Mozilla runs on Windows, Macintosh
   73:       (Classic Mac and Mac OS X), and Linux, as well as most types
   74:       of Unix, including Solaris, FreeBSD, HP-UX, and Irix. Porting
   75:       projects are under way to bring Mozilla to BeOS, OS/2, Open
   76:       VMS, Amiga, and other operating systems. More information
   77:       about most projects is available at <i><a href=
   78:       ""></a></i>/.</p>
   79:       <hr>
   80:     </blockquote>
   81:     <p>In this context, a front end is more than the look and feel
   82:     of an application, since it also includes the functionality and
   83:     structure of that application. For example, the Netscape 6.x
   84:     and 7.x browser suites use XPFE to allow the creation of
   85:     different themes, but the browser suites are created by using
   86:     XPFE as well.</p>
   87:     <p>This new technology started out as a time-saving technique
   88:     and turned into one of Mozilla's most powerful innovations.
   89:     Mike Cornall, in an article published in LinuxToday, summarizes
   90:     the history of XPFE well when he states, "The application
   91:     platform capabilities of Mozilla came about through a happy
   92:     coincidence of open source development, good design, and
   93:     far-sighted developers who were paying attention."</p>
   94:     <p>Mozilla engineers were trying to create a more efficient
   95:     process that would save them time and effort, but this
   96:     technology had the unintended advantage of lowering the
   97:     barriers to entry to application development. To better
   98:     understand this happy coincidence and why it can be so useful
   99:     for developers, it is necessary to take a closer look at what
  100:     XPFE is made of.</p>
  101:     <h3><a name="77013"></a> XPFE Framework</h3>
  102:     <p>XPFE uses a number of existing <!--INDEX XPFE --> 
  103:     <!--INDEX XUL (XML-based User-interface Language) --> 
  104:     <!--INDEX XML (Extensible Markup Language) --> 
  105:     <!--INDEX Cascading Style Sheets;JavaScript:Cascading Style Sheets and;Cascading Style Sheets:(see CSS);CSS (Cascading Style Sheets):XPFE and, -->
  106:     web standards, such as Cascading Style Sheets, JavaScript, and
  107:     XML (the XML component is a new language called XUL, the
  108:     XML-based User-interface Language). In its most simple form,
  109:     XPFE can be thought of as the union of each technology. Viewed
  110:     together, these technologies can be seen forming the XPFE
  111:     framework in <a href="#77002">Figure 1-1</a>.</p>
  112:     <div class="c6">
  113:       <img src="foo.gif">
  114:     </div>
  115:     <p><i>Figure 1-1: <a name="77002"></a></i> <i>XPFE
  116:     framework</i></p>
  117:     <p>To understand how XPFE works, we can look at how these
  118:     different components fit together. JavaScript creates the
  119:     functionality for a Mozilla-based application, Cascading Style
  120:     Sheets format the look and feel, and XUL creates the
  121:     application's structure.</p>
  122:     <p>Instead of using platform-specific code in languages like C
  123:     or C++ to create an application, XPFE uses well-understood web
  124:     standards that are platform-independent by design. Because the
  125:     framework of XPFE is platform-independent, so are the
  126:     applications created with it. Since the framework is also made
  127:     up of some of the technologies used to create web pages, people
  128:     familiar with creating a web page can learn how to use XPFE to
  129:     create a cross-platform application.</p>
  130:     <h3><a name="77014"></a> Comparing XPFE and DHTML</h3>
  131:     <p>In many ways, XPFE is similar to 
  132:     <!--INDEX XPFE:DHTML comparison;DHTML (Dynamic HTML), XPFE comparison -->
  133:     DHTML. Dynamic HTML is a combination of HTML, JavaScript, and
  134:     CSS that allows a developer to create an application that is
  135:     contained within the content area of a browser. XPFE provides a
  136:     logical evolution to this idea by allowing the creation of
  137:     applications that are more powerful, more flexible, and that
  138:     can live outside the browser window as standalone programs.</p>
  139:     <p><a href="#77004">Figure 1-2</a> illustrates the similarities
  140:     between XPFE and DHTML. Both use JavaScript to create
  141:     functionality, CSS to specify design and layout, and a simple
  142:     markup language to describe content. The difference between the
  143:     two is that one of the markup languages is HTML and the other
  144:     is XUL.</p>
  145:     <div class="c6">
  146:       <img src="foo.gif">
  147:     </div>
  148:     <p><i>Figure 1-2: <a name="77004"></a></i> <i>Comparison of
  149:     DHTML and XPFE</i></p>
  150:     <p>Although HTML has been put 
  151:     <!--INDEX XUL (XML-based User-interface Language):XPFE and -->
  152:     to <!--INDEX XPFE:XUL and --> many different uses, it was
  153:     originally designed as a simple system to link separate
  154:     documents on the Internet. Later additions to the HTML standard
  155:     have extended its functionality, but even these enhancements
  156:     can't make it an appropriate language to use for developing
  157:     applications. XUL is a language specifically designed for
  158:     creating user interfaces, so it makes sense that XPFE is better
  159:     suited for application development than is DHTML.</p>
  160:     <p>Since XUL is structurally similar to HTML, knowledge of
  161:     building web pages will give you a boost in learning how to
  162:     create Mozilla applications. Even if you never used HTML, XUL
  163:     uses a straightforward collection of tags that makes it easy to
  164:     become comfortable with it in a short period of time. Once you
  165:     become accustomed to using XUL, you will be ready to start
  166:     using XPFE to create your own applications.</p>
  167:     <h3><a name="77015"></a> Components of a Mozilla
  168:     Application</h3>
  169:     <p>There is quite a bit more to XPFE 
  170:     <!--INDEX Mozilla:applications:components --> 
  171:     <!--INDEX applications:components --> than just XUL, CSS, and
  172:     JavaScript. Now that we've gotten past the basics, we can talk
  173:     about the rest of the available functionality that makes
  174:     Mozilla such a powerful framework for creating
  175:     applications.</p>
  176:     <p>At the Second Mozilla Developer Meeting, Rob Ginda, the
  177:     creator of ChatZilla, led a discussion group 
  178:     <!--INDEX Mozilla:as Platform discussion group --> about
  179:     Mozilla as Platform. In this session, he listed all of the
  180:     following components of a Mozilla application:</p>
  181:     <dl>
  182:       <dt>XML-based User-interface Language (XUL)</dt>
  183:       <dd>Used to create 
  184:       <!--INDEX XUL (XML-based User-interface Language) --> the
  185:       structure and content of an application.</dd>
  186:       <dt>Cascading Style Sheets (CSS)</dt>
  187:       <dd>Used to create <!--INDEX CSS (Cascading Style Sheets) -->
  188:       the look and feel of an application.</dd>
  189:       <dt>JavaScript</dt>
  190:       <dd>Used to create <!--INDEX JavaScript --> the functionality
  191:       of an application, although other scripting languages, such
  192:       as Python, Perl, or Ruby, can be used in place of
  193:       JavaScript.</dd>
  194:       <dt>Cross-Platform Install (XPInstall)</dt>
  195:       <dd>Used to package 
  196:       <!--INDEX Cross-Platform:Install (XPInstall) --> 
  197:       <!--INDEX XPInstall --> applications so they can be installed
  198:       on any platform.</dd>
  199:       <dt>eXtensible Binding Language (XBL)</dt>
  200:       <dd>Used to create reusable 
  201:       <!--INDEX XBL (eXtensible Binding Language) --> widgets with
  202:       a combination of XUL and JavaScript.</dd>
  203:       <dt>XPCOM/XPConnect</dt>
  204:       <dd>Used to allow JavaScript, or potentially 
  205:       <!--INDEX XPCOM/XPConnect --> any other scripting language,
  206:       to access and utilize C and C++ libraries.</dd>
  207:       <dt>XUL Templates</dt>
  208:       <dd>Used to create a framework for importing 
  209:       <!--INDEX XUL templates --> 
  210:       <!--INDEX templates:XUL templates --> data into an
  211:       application with a combination of RDF and XUL.</dd>
  212:       <dt>Resource Description Framework (RDF)</dt>
  213:       <dd>Used to store data and transmit 
  214:       <!--INDEX RDF (Resource Description Framework) -->
  215:       information. Generally regarded as one of the most
  216:       complicated aspects of XPFE.</dd>
  217:       <dt>Document Type Definition (DTD)</dt>
  218:       <dd>Used for localization and <!--INDEX DTD -->
  219:       internationalization; more commonly referred to as L10N and
  220:       I18N, respectively.</dd>
  221:     </dl>
  222:     <p>Some of these new technologies are in the process of
  223:     becoming approved standards. For instance, in 2001, AOL
  224:     submitted the XBL specification to the W3C on behalf of
  225: Although the W3C has not endorsed or approved the
  226:     submission, this is the first step that is required to make XBL
  227:     an official standard. The CSS Working Group within the W3C will
  228:     now have a chance to evaluate the XBL proposal and may create
  229:     an official recommendation based on it.</p>
  230:     <p>Each technology is important and several deserve to have
  231:     whole books devoted to them. However, a distinction should be
  232:     made among them. Some are essential to the creation of a
  233:     Mozilla application and others provide powerful extra features
  234:     to the application developer.</p>
  235:     <p>For example, it is possible to write an application that
  236:     does not use DTDs (although a nonlocalized application would
  237:     have limited usefulness for users around the world). It would
  238:     be much more difficult to create an application without XUL
  239:     though, since without XUL, your program wouldn't have a user
  240:     interface!</p>
  241:     <h2><a name="77016"></a> Setting Up Your System</h2>
  242:     <p>Before we look at our first example 
  243:     <!--INDEX system setup --> of a Mozilla application, let's make
  244:     sure you have everything you need to get Mozilla running on
  245:     your system along with the tools you need to create your own
  246:     applications. Every Mozilla application developer will need two
  247:     main tools: Mozilla itself and a text editor.</p>
  248:     <p>If you don't already have Mozilla installed on your
  249:     computer, it can be easily downloaded from You
  250:     have two main choices when picking what to download. You can
  251:     choose between a precompiled binary or you can grab the source.
  252:     Either option will work with the examples in this book. <a
  253:     href="appa.html#90096">Appendix A</a> provides more information
  254:     about the different available options.</p>
  255:     <p>You will also need access to a text editor. Any editor that
  256:     can save as plain text will do. HTML editors will also work
  257:     fine. If you normally use HomeSite, BBEdit, or another editor
  258:     to create HTML files, these programs are suitable for working
  259:     with the examples in this book as long as they can save files
  260:     in plain text.</p>
  261:     <p>Although there are other tools such as debuggers and
  262:     specialized editors that you can use to assist with your
  263:     application development (several of these programs are
  264:     described in <a href="appb.html#77021">Appendix B</a>), the
  265:     core tools that you will need are simply Mozilla and a text
  266:     editor. Once you have these tools up and running, you can start
  267:     working with the examples in the rest of the book.</p>
  268:     <h2><a name="77017"></a> Mozilla Applications</h2>
  269:     <p>The most well-known Mozilla <!--INDEX applications --> 
  270:     <!--INDEX Mozilla:applications --> applications are those
  271:     bundled with Netscape's latest browser suite-including a
  272:     browser, mail and newsgroup client, an HTML editor, and an
  273:     Instant Messenger chat program. However, these are just a few
  274:     of the applications that are already built with Mozilla.</p>
  275:     <p>The site hosts the 
  276:     <!--INDEX web site;web -->
  277:     development of several applications, but Mozilla applications
  278:     can be developed and hosted anywhere. Other locations where
  279:     Mozilla applications can be found include <i><a href=
  280:     ""></a></i> (which
  281:     hosts over 70 different applications at the time of this
  282:     writing) as well as the web sites for companies that use
  283:     Mozilla as a part of their products.</p>
  284:     <p>Our first look at Mozilla <!--INDEX ChatZilla -->
  285:     applications entails three different chat clients. In <a href=
  286:     "#77006">Figure 1-3</a>, you can see an example of ChatZilla, a
  287:     program that allows you to chat with other users on Internet
  288:     Relay Chat (IRC) servers (such as <i></i>, where
  289:     Mozilla developers gather on the <i>#mozilla</i> channel).
  290:     ChatZilla can be installed using the standard Mozilla installer
  291:     from or installed separately. If it is already
  292:     installed in your copy of Mozilla, you can launch it by going
  293:     to Window &gt; IRC Chat. The two other chat clients are AOL's
  294:     Instant Messenger, which comes bundled with Netscape 7 and
  295:     JabberZilla (a cross-platform Jabber client).</p>
  296:     <div class="c6">
  297:       <img src="foo.gif">
  298:     </div>
  299:     <p><i>Figure 1-3: <a name="77006"></a></i> <i>ChatZilla, an IRC
  300:     chat client created by using Mozilla</i></p>
  301:     <p>Browser suites and chat clients are only some possibilities.
  302:     In the following chapters, you will learn how to use each
  303:     Mozilla technology to create your own applications. You will
  304:     find out how to use XUL, CSS, JavaScript, and other
  305:     technologies and concepts to build your own browser, chat
  306:     client, blog editor, word processor, adventure game, music
  307:     player, FTP client, recipe organizer, trip planner, personal
  308:     calendar, or whatever type of application you are interested in
  309:     creating.</p>
  310:     <blockquote>
  311:       <hr>
  312:       <b>Let a Hundred Browsers Bloom</b> 
  313:       <p>Because Mozilla can be used to create any sort of
  314:       application, there's no reason why it can't be used to create
  315:       different types of browsers. Several projects are currently
  316:       under development independently from the work being done on
  317:       the default Mozilla browser. This variety is a huge asset
  318:       because the Mozilla community doesn't have to try to create
  319:       one browser that is all things to all people.</p>
  320:       <p>A few of these projects are working on improving the basic
  321:       Mozilla browser interface. One of the first Mozilla
  322:       applications, Aphrodite (<i><a href=
  323:       ""></a></i>),
  324:       has an interface designed and created by members of the
  325:       Mozilla community. Another project, called m/b (short for
  326:       mozilla/browser), addresses shortcomings that some people see
  327:       with the default browser interface. In many ways, these
  328:       projects are similar to themes, but they take this idea one
  329:       step further and use XUL, CSS, and JavaScript to change the
  330:       layout of the browser interface and not just the look of the
  331:       browser.</p>
  332:       <p>Additional projects are creating different types of
  333:       alternative browsers, but instead of using Mozilla itself to
  334:       create the application, they use the native user interface
  335:       toolkits for different platforms. These projects create
  336:       stripped-down browsers that use just Gecko, Mozilla's layout
  337:       engine. Because these projects use platform-specific code,
  338:       they work only on a specific operating system. Some examples
  339:       include Camino (<i><a href=
  340:       ""></a></i>)
  341:       for Mac OS X, Galeon (<i><a href=
  342:       ""></a></i>)
  343:       for Unix, and K-Meleon (<i><a href=
  344:       ""></a></i>)
  345:       for Windows.</p>
  346:       <p>These projects are just a few examples of the different
  347:       available browsers. Others include Dino!, Beonex, SkipStone,
  348:       and BrowserG!. If you are interested in learning more about
  349:       any of these browsers, links to many of them can be found at
  350:       <i><a href=
  351:       ""></a></i>.
  352:       If you think of a type of browser that is needed but that is
  353:       not being developed right now, use Mozilla to create your own
  354:       browser.</p>
  355:       <hr>
  356:     </blockquote>
  357:     <h3><a name="77018"></a> Applications as Web Pages</h3>
  358:     <p>Mozilla deals with applications 
  359:     <!--INDEX applications:as web pages --> built 
  360:     <!--INDEX web pages, applications as --> using XPFE the same
  361:     way that it handles ordinary web pages. This is not very
  362:     surprising considering that Mozilla applications are
  363:     conceptually similar to web pages (both use markup languages in
  364:     conjunction with stylesheets, JavaScript, and other
  365:     technologies).</p>
  366:     <p>The same rendering engine that lays out a web page inside
  367:     the content area of the Mozilla browser also lays out Mozilla
  368:     applications. This concept is usually not apparent since most
  369:     Mozilla applications are contained inside their own windows
  370:     instead of inside the browser's content area.</p>
  371:     <p>Gecko, the name of Mozilla's rendering 
  372:     <!--INDEX Gecko rendering engine --> engine, doesn't draw a
  373:     distinction between Mozilla applications and web pages, so it
  374:     is necessary for application developers to specifically tell
  375:     Gecko to do something different when rendering a Mozilla
  376:     application.</p>
  377:     <p>As an example of how Gecko renders 
  378:     <!--INDEX applications:Gecko rendering engine --> applications,
  379:     you can have the Mozilla browser render itself inside its own
  380:     content area as seen in <a href="#77008">Figure 1-4</a>. To do
  381:     this, launch the Mozilla browser and in the location bar where
  382:     you would type the URL of a web page, type
  383:     chrome://navigator/content. In a sense, the browser itself is
  384:     now a web page.</p>
  385:     <div class="c6">
  386:       <img src="foo.gif">
  387:     </div>
  388:     <p><i>Figure 1-4: <a name="77008"></a></i> <i>The Mozilla
  389:     browser rendering itself</i></p>
  390:     <p>It is perfectly acceptable to create an application that
  391:     lives inside of the browser window, but most developers don't
  392:     want the extra browser interface surrounding their own
  393:     application.</p>
  394:     <p>In the next chapter, we show you how to create your own
  395:     custom XUL file that you can display inside of the browser
  396:     window. Then we show you how to break out of the browser and
  397:     have your example launch as a standalone window that can serve
  398:     as the beginning of your own Mozilla application.</p>
  399:     <hr>
  400:     <br>
  401:     <br>
  402:     File a <a href=
  403:     "">Bug</a>
  404:     for chapter 1. 
  405:     <?php $hide_text_control=1; $post_to_list=NO; $author=''; // require(NOTES); ?>
  406:   </body>
  407: </html>

FreeBSD-CVSweb <>