Annotation of books/www/articles/future.html, revision 1.49

1.25      brian       1: <?php $title="The Future of Mozilla Application Development"; ?>
                      2: 
1.1       david       3: <h1>The Future of Mozilla Application Development</h1>
1.17      david       4: 
                      5: by <a href="http://www.oreillynet.com/pub/au/64">David Boswell</a> and <a
                      6: href="http://www.oreillynet.com/pub/au/81">Brian King</a>, coauthors of <a
                      7: href="http://www.oreilly.com/catalog/mozilla/">Creating Applications with
                      8: Mozilla</a>
                      9: 
                     10: <p>In April, <a href="http://mozilla.org">mozilla.org</a> announced a
                     11: major update to their <a
                     12: href="http://mozilla.org/roadmap.html">development roadmap</a>.  Some of
                     13: the changes in the new document represent a fundamental shift in the
                     14: direction and goals of the Mozilla community.  To help make sense of how
                     15: these changes will affect Mozilla application developers, this article
                     16: provides an analysis of the new roadmap and also demonstrates how to
                     17: convert an existing XPFE-based application into an application that uses
1.41      david      18: the new XUL toolkit. For the purposes of this article, the original
                     19: Mozilla applications will be referred to as the Mozilla suite, and the new
                     20: platform will be referred to as Mozilla Firebird.</p>
1.2       david      21: 
                     22: <h2>Stand-Alone Applications</h2>
                     23: 
1.17      david      24: <p>The biggest news in the roadmap update is that mozilla.org intends to
                     25: stop development of the application suite it currently produces in favor
                     26: of stand-alone applications.  When Netscape created the Mozilla open
                     27: source community, it released the code for their Communicator browser
                     28: suite that included a web browser, mail and news client, HTML editor and
1.40      brian      29: an address book. Over the past five years the community has re-written the code 
                     30: base and has added many new features and other applications to the suite. 
                     31: The community itself has changed over this time and
1.17      david      32: producing a single monolithic set of applications is no longer its main
                     33: goal.</p>
                     34: 
                     35: <p>In place of the browser suite, development will focus on a stand-alone
                     36: Mozilla Browser (based on the <a
1.27      david      37: href="http://www.mozilla.org/projects/firebird/">Mozilla Firebird</a>
1.29      david      38: project, formerly called project Phoenix) and a Mozilla Mail application
1.28      david      39: (based on the <a
                     40: href="http://www.mozilla.org/projects/thunderbird/">Thunderbird</a>
                     41: project, formerly called project Minotaur). Both of these applications
                     42: represent a second generation of Mozilla application development. For a
                     43: short period, the first generation application suite will be worked on in
                     44: parallel with these new applications but development will switch focus to
                     45: Mozilla Browser and Mozilla Mail once it has been decided that the
1.41      david      46: transition to the new projects has been completed.</p>
1.17      david      47: 
                     48: <p>The fate of the other applications in the suite is a little less
                     49: certain.  Development will continue on each, but there are questions about
                     50: how they will be maintained and how they will be released once the browser
                     51: suite has been divided up.  <a
1.30      david      52: href="http://www.mozillazine.org">MozillaZine</a> recently <a
                     53: href="http://www.mozillazine.org/talkback.html?article=3149">ran a
1.42      david      54: story</a> on the future of one of the other applications from the browser
1.36      david      55: suite, <a href="http://mozilla.org/editor/">Composer</a>, the HTML editing
                     56: tool. Daniel Glazman, a Netscape developer, has offered to maintain the
1.42      david      57: project going forward and to make it a stand-alone application so it can
                     58: be run separate from the browser.  Once that happens Composer will be just
                     59: like other independent Mozilla development projects such as the <a
                     60: href="http://www.oreillynet.com/pub/a/mozilla/2003/05/02/casestudy2.html">Mozilla
                     61: Amazon Browser</a> or <a
                     62: href="http://www.xulplanet.com/downloads/xabyl/">Xabyl</a>, a visual XBL
1.43      david      63: editor.</p>
1.17      david      64: 
                     65: <p>For end-users it will probably take some time to get used to these
                     66: changes. Currently when a new version of Mozilla is released (for
1.18      david      67: instance, the <a href="http://mozilla.org/releases/mozilla1.3.1/">1.3.1
                     68: release</a> that came out on May 7) people who download it get a number of
1.38      david      69: distinct applications that are tightly integrated with one another.  In
                     70: the future, the different applications that mozilla.org releases will have
1.39      david      71: separate development schedules, will likely not be released at that same
                     72: time and will not be integrated as closely as before.  For users who think
                     73: Mozilla is currently bloated with too many features and want just a
1.19      david      74: browser, this is great news.  Of course there will still be a rich set of
1.17      david      75: extensions and add-ons for these applications that will allow you to
                     76: customize them however you like.</p>
1.4       david      77: 
                     78: <h2>XPFE and the New Toolkit</h2>
                     79: 
1.20      david      80: <p>Developers who have been using Mozilla as a platform for creating their
1.22      david      81: own XUL-based applications or add-ons will also have some changes to get
                     82: used to.  Although there will most likely be some pain in the transition,
1.40      brian      83: the changes in the roadmap represent positive steps that mozilla.org
                     84: is taking to encourage Mozilla application development.  The new 
1.31      david      85: roadmap is a strong endorsement of the concept of XUL and of Mozilla 
                     86: application development in general.</p>
1.17      david      87: 
1.48      david      88: <p>There is a possibility for confusion when you take a closer look at
1.17      david      89: what exactly the roadmap is talking about changing.  In the transition
                     90: from Mozilla as an application suite to Mozilla as a platform for
1.32      david      91: application development, the specific XUL-based toolkit that has been in
1.33      david      92: use to date is being replaced with a new XUL-based toolkit taken from the
1.48      david      93: Phoenix project.  XUL itself is not being replaced though, just upgraded. 
                     94: The following quote from the roadmap clarifies this point:</p>
1.17      david      95: 
                     96: <blockquote>Note: the Phoenix toolkit is a compatible reimplementation of
                     97: the XPFE toolkit, with added features such as customizable toolbars. We
                     98: are not starting a new C++ GUI toolkit, we are simply moving to the next
                     99: generation XUL toolkit.</blockquote>
                    100: 
                    101: <p>Previously the application framework side of Mozilla was seen as
                    102: largely secondary to the original goal of creating an open source version
                    103: of the Communicator browser suite.  It's a testament to the developers in
                    104: the Mozilla community that they were able to create a high quality,
1.40      brian     105: web-oriented, cross-platform application framework that a number of
1.17      david     106: companies and many individual developers are already using without that
                    107: having been their primary focus.  Now that Mozilla as platform is becoming
1.26      david     108: the new focus for the community, changes are inevitable but these should
1.45      david     109: all be changes that ultimately make life easier for developers.</p>
1.17      david     110: 
1.26      david     111: <p>The rest of this article provides details about how the <a
                    112: href="http://xfly.mozdev.org">xFly</a> application has been converted from
                    113: the old toolkit to the new one.  There is good news and there is bad news
                    114: about the work involved in the transition from a Mozilla package to a
                    115: Firebird extension.  The good news is that the basic architecture of the
1.44      david     116: application does not change -- XUL is still used in conjuction with other
                    117: technologies such as JavaScript, CSS and XBL.  The bad news is that there
                    118: are some changes to be aware of -- there are minimal changes in XUL and
                    119: XBL, but the biggest changes involve how things are packaged, registered
                    120: and launched.</p>
1.26      david     121: 
                    122: <p>The xFly example application has been taken from the <a
                    123: href="http://www.oreilly.com/catalog/mozilla/">Creating Applications with
                    124: Mozilla</a> book that deals with Mozilla development using the original
                    125: Mozilla browser suite.  Another purpose of this article was to examine how
1.45      david     126: relevant the book will remain when the new roadmap changes are fully in
                    127: place.  It is our opinion that other than the changes mentioned here, the
                    128: book will still be a very useful resource for application and extension
1.34      david     129: developers targeting the new Mozilla platform.</p>
1.24      brian     130: 
1.40      brian     131: <h2>Packaging Your Extension</h2>
1.24      brian     132: 
                    133: <p>
1.26      david     134: A package in this context refers to software that was installed on top
                    135: of an existing Mozilla installation, and typically launched from that
                    136: environment. Examples include the <a
1.40      brian     137: href="http://googlebar.mozdev.org">Google toolbar</a> or 
1.46      david     138: <a href="http://optimoz.mozdev.org">Optimoz</a>. As
1.26      david     139: already mentioned, the changes to your XUL and XBL code should be minimal
                    140: at the moment. However, the real fun begins when you want to register your
1.46      david     141: application and integrate it with the Firebird platform. This section will
1.26      david     142: cover the installation, the application settings, and the launch options
1.46      david     143: available to your extension once it is installed. 
                    144: 
                    145: <p>
                    146: To follow along with these examples, you will need to install the <a
                    147: href="http://www.mozilla.org/projects/firebird/release-notes.html">Firebird
                    148: 0.6</a> release (available for Windows, Linux and Mac OS X) and the <a
                    149: href="http://xfly.mozdev.org/installation.html">xFly extension</a>.  Once 
                    150: installed and launched you'll notice there's not much to the xFly 
                    151: application.  It is currently suffering from bit-rot, but it still serves 
                    152: as a useful example for our discussion here.
1.24      brian     153: </p>
                    154: 
1.35      david     155: <p> 
1.26      david     156: <i>Note: Keep in mind that the new roadmap just recently came out and
                    157: that many of the changes that it discusses have not been made yet. This
                    158: example should still give you a good idea about how you can go about
1.35      david     159: converting your existing application or extension, but be aware that
1.46      david     160: additional changes may come up as the toolkit continues to evolve.</i> 
1.26      david     161: </p>
                    162: 
                    163: <p>
                    164: Let's start at the end of the story, with the installation script, and
1.40      brian     165: work back from there. xFly is packaged and distributed as a JAR file, 
                    166: contained beside an installation script in the XPInstall file.
1.24      brian     167: 
                    168: <xmp>
                    169:     addFile("We're on our way ...", 
                    170:             "xfly.jar",           // jar source folder
                    171:             getFolder("chrome"),  // target folder
                    172:             "");                  // target subdir
                    173: 
                    174:     registerChrome(PACKAGE | DELAYED_CHROME, getFolder("chrome", "xfly.jar"), "content/");
                    175:     registerChrome(SKIN | DELAYED_CHROME, getFolder("chrome", "xfly.jar"), "skin/");
1.47      brian     176:     registerChrome(LOCALE | DELAYED_CHROME, getFolder("chrome", "xfly.jar"), "locale/en-US/");
1.24      brian     177: </xmp>
                    178: 
                    179: The code snippet above is taken from the <i>install.js</i> file, the full version of which 
                    180: <a href="http://www.mozdev.org/source/browse/xfly/appsrc/install.js?rev=1.2&content-type=text/x-cvsweb-markup">can 
                    181: be found here</a>. First of all the JAR file, <i>xfly.jar</i>, is added to 
                    182: the chrome folder, then the chrome folders contained within it are 
                    183: registered with the chrome registry. There is nothing new here, 
                    184: and therefore this script is backwards compatible with the Mozilla 
1.40      brian     185: suite. This is important to remember, because if you have a will to do 
                    186: so, your extension will still work with the Mozilla suite as well as 
1.25      brian     187: with Mozilla Firebird. Now let's examine some of the files contained 
                    188: in the chrome folders.
1.24      brian     189: </p>
                    190: 
1.40      brian     191: <h2>Registering with Mozilla Firebird</h2>
1.24      brian     192: 
                    193: <p>
1.40      brian     194: The first thing you will probably want is to add your application to 
1.24      brian     195: the list of extensions in the Firebird Options (<i>Tools->Options</i> 
                    196: menu) window. All that is required for this is one line. In the extension 
                    197: manifest, the main <i>contents.rdf</i> file, add the following to 
                    198: the package description:
                    199: </p>
                    200: 
                    201: <p>
                    202: <code>
                    203: chrome:extension="true"
                    204: </code>
                    205: </p>
                    206: 
                    207: <p>
                    208: This tells Firebird to list the program in the list of extensions once 
                    209: it is registered. Here is the full description, which includes some other 
                    210: useful information such as the author, name, project URL, and a 
                    211: description of the extenstion which appears in the listing:
                    212: 
                    213: <xmp>
                    214:   <!-- package information -->
                    215:   <RDF:Description about="urn:mozilla:package:xfly"
                    216:         chrome:displayName="xFly"
                    217:         chrome:author="Frillies"
                    218:         chrome:authorURL="http://xfly.mozdev.org/"
                    219:         chrome:name="xfly"
                    220:         chrome:description="[2003-05-04] Adds xFly application for viewing examples contained in
                    221:         'Creating Applications with Mozilla' [http://books.mozdev.org]"
                    222:         chrome:extension="true"
                    223:         chrome:settingsURL="chrome://xfly/content/xflysettings.xul">
                    224:   </RDF:Description>
                    225: </xmp>
                    226: 
                    227: </p>
                    228: 
                    229: <p>
                    230: <img src="http://xfly.mozdev.org/screenshots/extension.png" border=0 alt="xFly listed as a Firebird Extension">
                    231: <br>
                    232: <em>xFly listed as an extension in the Options window</em>
                    233: </p>
                    234: 
1.40      brian     235: <p>
                    236: Another new description property is <code>chrome:settingsURL</code>. This 
                    237: enables the 'Settings' button which opens a window, the definition is which 
                    238: is contained in the file pointed to by the property. 
                    239: For most applications, the <i>contents.rdf</i> file resides in the 
                    240: <i>contents/</i> folder, or wherever you main XUL files are.
                    241: </p>
                    242: 
1.24      brian     243: <h2>Launching Your Extension</h2>
                    244: 
1.46      david     245: <p> 
                    246: There are many different ways that you can launch your application
                    247: from within Mozilla Firebird. These include via a menu item, or a toolbar
                    248: button.  It is the latter of these two that is discussed here. The
                    249: toolbars of Mozilla Firebird are highly customizable, much more so than in
                    250: the Mozilla suite. You can add and remove buttons which represent
                    251: application functionality via Drag&Drop, switch between text only/text and
                    252: images/images only, and add new toolbars. 
1.40      brian     253: </p>
                    254: 
                    255: <p>
                    256: <img src="http://xfly.mozdev.org/screenshots/customise.png" border=0 alt="xFly D&D button">
                    257: <br>
                    258: <em>xFly D&D button on palette</em>
1.25      brian     259: </p>
                    260: 
                    261: <p>
1.40      brian     262: There are several steps you have to take to get this working. The first 
                    263: thing to do is to create your buttons. Note that to be effective you need 
                    264: to create 2 different size buttons, 20x20px and 32x32px. Firebird is 
                    265: capable of having small and large button icons. Next up is to write 
                    266: the XUL for the button:
1.25      brian     267: 
                    268: <xmp>
                    269:   <toolbarpalette id="BrowserToolbarPalette">
                    270:     <toolbarbutton class="toolbarbutton-1" 
                    271:                    id="xfly-button" 
                    272:                    label="&xflyButton.label;" 
                    273:                    oncommand="toxFly();" 
                    274:                    tooltiptext="&xflyButton.tooltip;" />
                    275:   </toolbarpalette>
                    276: </xmp>
                    277: 
                    278: The <code>&lt;toolbarbutton&gt;</code> is contained in a <code>&lt;toolbarpalette&gt;</code>, 
1.40      brian     279: the id of which (<b>BrowserToolbarPalette</b>) corresponds to the palette that contains the Drag&Drop 
                    280: buttons for the toolbar. The original XUL for this palette lives in the file 
                    281: <a href="http://lxr.mozilla.org/mozilla/source/browser/base/content/browser.xul"><i>browser.xul</i></a>, 
                    282: which is the main window for the Mozilla Firebird application
1.25      brian     283: </p>
                    284: 
                    285: <p>
                    286: More modifications are needed to the main <i>contents.rdf</i> file, which as well as 
                    287: having the extension information, it contains the overlay information. More specifically, 
1.40      brian     288: it contains information on chunks of XUL in files in your JAR file that you want to be 
                    289: added into some of the main Mozilla Firebird application files. So the following is added to 
1.25      brian     290: the list of files to overlay:
                    291: 
                    292: <p>
                    293: <code>
                    294: &lt;RDF:li resource="chrome://browser/content/browser.xul"/&gt;
                    295: </code>
                    296: </p>
                    297: 
                    298: <p>
1.40      brian     299: Then the list of files (in this case the <i>toolbarbutton</i> definition 
                    300: is contained in the file <i>xflyextensionsoverlay.xul</i>) is added to the sequence for this file. 
                    301: What is essentially being instructed is that this is the file that you will 
                    302: be overlaying (the file where the button will be going).
1.25      brian     303: 
                    304: <xmp>
                    305:   <!-- Firebird -->
                    306:   <RDF:Seq about="chrome://browser/content/browser.xul">
                    307:     <RDF:li>chrome://xfly/content/xflyextensionsoverlay.xul</RDF:li>
                    308:   </RDF:Seq>
                    309: </xmp>
                    310: </p>
                    311: 
                    312: <p>
1.40      brian     313: If you 
                    314: <a href="http://www.mozdev.org/source/browse/xfly/appsrc/content/contents.rdf?rev=1.5&content-type=text/x-cvsweb-markup">explore 
                    315: fully the mainifest file</a>, you will notice a 
                    316: description is still left in to overlay the Mozilla suite. A <i>menuitem</i> 
                    317: definition is contained in <i>xflymenuoverlay_moz.xul</i>, which overlays 
1.47      brian     318: <a href="http://lxr.mozilla.org/seamonkey/source/xpfe/communicator/resources/content/tasksOverlay.xul"><i>tasksOverlay.xul</i></a> -- 
                    319: the file that contains the original 'Tools' menu definition for Mozilla.
1.40      brian     320: Once again this illustrates that your extension can be backwards compatible with the Mozilla suite.
                    321: </p>
1.25      brian     322: 
                    323: <p>
                    324: Finally, you need to get the styles right for your button, related to the appearance of the image you created. 
                    325: Here is some of the code for the large and small buttons contained in the overlay CSS file, 
                    326: <a href="http://www.mozdev.org/source/browse/xfly/appsrc/skin/xflyextensionsoverlay.css?rev=1.4&content-type=text/x-cvsweb-markup"><i>xflyextensionsoverlay.css</i></a>.
                    327: 
                    328: <xmp>
                    329: #xfly-button {
1.40      brian     330:   list-style-image: url("chrome://xfly/skin/images/xflyButton32.png");
1.25      brian     331: }
                    332: ...
                    333: toolbar[iconsize="small"] #xfly-button {
1.40      brian     334:   list-style-image: url("chrome://xfly/skin/images/xflyButton20.png");
1.25      brian     335: }
                    336: </xmp>
1.40      brian     337: You will fall at the last hurdle unless you register your stylesheet, similar to the registering of your overlay XUL file 
                    338: outlined previously, but this time in the 
1.25      brian     339: <a href="http://www.mozdev.org/source/browse/xfly/appsrc/skin/contents.rdf?rev=1.2&content-type=text/x-cvsweb-markup">skin 
                    340: contents.rdf file</a>.
                    341: 
                    342: <xmp>
                    343:   <RDF:Seq about="urn:mozilla:stylesheets">
                    344:     <RDF:li resource="chrome://browser/content/browser.xul"/>
                    345:     <RDF:li resource="chrome://global/content/customizeToolbar.xul"/>
                    346:   </RDF:Seq>
                    347: 
                    348:   <RDF:Seq about="chrome://global/content/customizeToolbar.xul">
                    349:     <RDF:li>chrome://xfly/skin/xflyextensionsoverlay.css</RDF:li>
                    350:   </RDF:Seq>
                    351: 
                    352:   <RDF:Seq about="chrome://browser/content/browser.xul">
                    353:     <RDF:li>chrome://xfly/skin/xflyextensionsoverlay.css</RDF:li>
                    354:   </RDF:Seq>
                    355: </xmp>
                    356: 
                    357: This convinces the two Firebird application XUL files to recognise the stylesheet that contains the image properties and values for 
1.47      brian     358: your images. Something that we experienced during our testing was the icon not appearing correctly on the palette, 
                    359: instead as a group of unrelated icons. It was resolved by deleting your Mozilla Firebird user profile, something that is recommended 
                    360: in the <a href="http://mozilla.org/projects/firebird/release-notes.html#install">0.6 release notes</a>. 
                    361: Now everything should be in place, and you can grab your button and move onto one of your Firebird toolbars 
                    362: in the position that you wish.
1.24      brian     363: </p>
                    364: 
                    365: <p>
1.40      brian     366: <img src="http://xfly.mozdev.org/screenshots/toolbar.png" border=0 alt="xFly button on toolbar">
1.24      brian     367: <br>
1.40      brian     368: <em>xFly button on toolbar</em>
1.24      brian     369: </p>
                    370: 
                    371: <p>
1.49    ! david     372: Hopefully this article has clarified some of the issues raised in the new
        !           373: roadmap, and given you the information needed to create a new Mozilla
        !           374: Firebird extension, or convert you Mozilla package to one. While the new
        !           375: toolkit is by no means mature, the aspect concerning installation and
        !           376: registering provides a standard mechanism for developers to distribute
        !           377: their Mozilla applications and add-ons.  If you are interested in 
        !           378: learning more, the following links should be a good place to start doing 
        !           379: more research.
1.24      brian     380: </p>
                    381: 
                    382: <p>
1.40      brian     383: <ul>
                    384:     <li>Releases Page<br/>
                    385: <a href="http://mozilla.org/projects/firebird/releases.html">http://mozilla.org/projects/firebird/releases.html</a>
                    386:     <li>Firebird Help, a comprehensive site with a lot of good information, including Themes, Extensions and Tips&Tricks<br/>
                    387: <a href="http://texturizer.net/firebird/">http://texturizer.net/firebird/</a>
                    388:     <li>Various projects at mozdev.org hosting Firebird Extensions:<br/>
                    389: <a href="http://cdn.mozdev.org/">http://cdn.mozdev.org/</a><br/>
                    390: <a href="http://themes.mozdev.org/">http://themes.mozdev.org/</a><br/>
                    391: <a href="http://extensionroom.mozdev.org/">http://extensionroom.mozdev.org/</a>
                    392: </ul>
1.24      brian     393: 
                    394: </p>

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