Erste Schritte Um Ihnen einen möglichst schnellen Einstieg in das Thema zu ermöglichen, präsentiert dieses Kapitel zwei 'Hello World' Beispiele, die demonstrieren wie man die Entwicklung einer neue Applikation beginnt. Das erste Beispiel ist eine einfache XUL Datei die im Browser Fenster geladen wird. Dieses Beispiel wird danach durch Stylesheets und JavaScript Funktionen erweitert. Das zweite Beispiel geht darauf ein, wie man die Applikations-Dateien in einem Paket zusammenfasst, das die modularen, gebündelten Sets der Dateien enthält, die zusammen die Mozilla Applikation oder die neuen Module, für den Mozilla Browser ausmachen. Diese Beispiele geben einen Kontext um die Applikationsentwicklung mit Mozilla zu diskutieren. Das erste Beispiel fokussiert vor allem auf das erstellen und editieren der Basisdateien, das zweite vor allem auf die Organisation und Verteilung der Applikation auf der Mozilla Platform. Ein einfaches Beispiel in XUL Wie alle guten 'Hello World' Applikationen, zeigt das Beispiel 2-1 eine der einfachsten Anwendugen von XUL. Obwohl es sehr klein ist, demonstriert das Beispiel einige wichtige Aspekte der XUL Programmierung, inklusive der Verwendung von Event-Handlern um der Applikation Interaktionsmöglichkeiten hinzuzufügen und der Verwendung einer box um die Elemente korrekt im Fenster auszurichten. Dieses Beispiel dient auch dazu, einen Kontext für andere, generellere Features der Sprache, wie dem Dateiformat, die Namespace und ein paar Programmierregeln, zu schaffen. Hallo xFly <?xml version="1.0"?> <!-- Beispiel XUL Datei --> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="center"> <button label="hello xFly" onclick="alert('Hello World');" /> </box> </window> Verwenden Sie einen Texteditor um den Code aus Beispiel 2-1 in einer Datei namens hello.xul abzuspeichern, und laden Sie es in Mozilla (via Datei > Datei öffnen, danach die Datei aus dem Dateisystem auswählen). Sie sollten danach in der oberen linken Ecke des Browser-Fensters einen Button sehen, der, bei Betätigung ein kleines Warnfenster öffnet. Abbildung 2-1 zeigt ein Beispiel des Warnfensters das angezeigt werden sollte.
Das erste 'Hello World' Beispiel
Die nächsten Abschnitte beschreiben die Beispieldatei etwas genauer. Die Themen umfassen die Datei selbst, die Syntax der Markupsprache, XUL Namespaces und das Basislayout einer XUL Datei. Die xFly Beispiele Der beste Weg die möglichen Anwendungsgebiete des Mozilla Frameworks zu verstehen, ist, einige existierende Applikationen etwas genauer zu betrachten. Dieses Buch zeigt einige Mozilla Projekte, wie ChatZilla und JSLib als Beispiele von Leuten die bereits begonnen haben Mozilla's XPFE Technologien zu nutzen. Nebst diesen Applikationen werden Sie den Namen 'xFly' in vielen Beispielen in diesem Kapitel und durch das ganze Buch finden. Die xFly Beispiele werden von Kapitel 2 bis Kapitel 6 verwendet um Ihnen zu zeigen wie eine einfache Mozilla Applikation erstellt und verpackt wird. Eine installierbare Version der gesamten xFly Applikation kann unter http://xfly.mozdev.org bezogen werden. Diese einfache Applikation ist hilfreich, da sie Ihnen einen Platz bietet um die neuen Informationen die Sie in diesem Buch lernen zu erforschen. Während Sie mehr über XUL, CSS, JavaScript und die anderen Teile von Mozilla's Entwicklungsumgebung lernen, können Sie die xFly Dateien anpassen um zu sehen, wie sich die Technologie in der Praxis verhält.
XUL Basiskonzept Sie haben bereits verschiedene XUL Features im Einsatz gesehen. Wenn Sie das Beispiel aus dem vorhergehenden Paragraph in Ihrem Browser öffnen, identifiziert dieser die Datei als XUL, parsed die Daten, öffnet ein neues Fenster und zeichnet das Button Widget darauf. Weiter führt er die von Ihnen definierte Funktion aus, sobald der Button angeklickt wird. Diese Aktivitäten sind Teil der Interaktionen zwischen Ihren Applikationsdateien und Mozilla. Dazu werden jedoch gewisse Grundvoraussetzungen wie das Format der XUL Dateien, deren Syntax oder Namespace, das XUL Layout und das Windowing-System benötigt. Das XUL Dateiformat Eine XUL Datei ist eine normale Textdatei welche saubere XML Syntax und eine .xul Endung aufweist. Mozilla erwartet, dass Userinterface Widgets gezeichnet werden sollen wenn eine Datei mit der Endung .xul geladen wird oder wenn in einer Datei die XUL Namespace gefunden wird. Dies gilt ebenfalls für XML und HTML Dateien. Der Mime Typ der für XUL Dateien verwendet wird, ist application/vnd.mozilla.xul+xml. Wenn Sie XUL Dateien lokal editieren, sollten Sie sich um diese Einstellungen keine Gedanken machen müssen. Wenn Sie XUL Dateien jedoch auf einem Webserver anbieten wollen, benötigen Sie diesen Mime Typ. Weitere Informationen wie Sie den korrekten Mime Type in Ihrem System konfigurieren können, finden Sie in Kapitel 12. Richtlinien XUL muss ein paar grundsätzliche Richtlinien einhalten (wie XHTML, oder jede andere XML basierte Datei) um gültig zu sein. Mozilla generiert eine Fehlermeldung wenn eine ungültige XUL Datei geladen werden soll. Als erstes wird eine gültige XML Deklaration erwartet. <?xml version="1.0"?> Alle Kommentare die Sie verwenden um die XML Datei zu dokumentieren, können nach der Deklaration verwendet werden. Kommentare in XUL folgen dem gleichen Standard wie die von HTML und XML und werden von <!-- und --> umschlossen. Alle Tags müssen abgeschlossen werden. Leere Tags wie <label> müssen mit einem schliessenden Slash versehen werden. <label value="Getting Started" /> Ein weiterer, wichtiger Punkt an den Sie sich erinnern sollten ist die Gross-/Kleinschreibung. Wie bei allen XML basierten Sprachen ist ein <window> Tag nicht das gleiche wie <Window>. Sie können dahier ein <window> Tag nicht durch ein </Window> Tag schliessen. Diese Richtlinien gewährleisten, dass die Render-Engine die XUL Datei erfolgreich verarbeiten kann und die definierten Elemente darstellt. Mozilla validiert keine XML (oder auch XUL) Dateien und verarbeitet auch keine extern deklarierten Entitäten, überprüft jedoch die Gültigkeit der XML Struktur. Der XML Spezifikation folgend, werden Tags die nicht erkannt werden ignoriert. Dies kann Ihrer Applikation zu einer erhöhten Flexibilität verhelfen, vor allem wenn Sie beginnen Technologien wie XBL einzusetzen. Natürlich kann dies auch den Debugging Prozess erschweren, zum Beispiel wenn Sie ein Element <botton> nennen und danach nicht erkennen, wieso der XUL button keine der typischen Eigenschaften eines Knopfes aufweist. Es hat sich als hilfreich erwiesen innerhalb von XUL Dateien Kommentare, ausgiebig Leerzeichen und Einrückungen (nicht via Tabulator) und bekannte XUL Widgets zu verwenden. Die XUL Namespace Wie andere Markup Sprachen verwendet XUL eine Namespace Deklaration um auszuzeichnen welche Elemente in einem Dokument als gültig angesehen werden sollen. Beispiel 2-2 zeigt die verwendete Namespace Deklaration. Die Namespace ist ein Attribut des window Elements. Da kein Suffix angegeben wurde (bsp: xmlns:xul), wird XUL als Standard Namespace für das folgende Dokument verwendet. Die XUL Namespace Deklaration <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <description>Illustrating the XUL namespace</description> </window> Wenn Sie XUL Inhalte in anderen Markup-Dokumenten verwenden wollen, müssen Sie mehr als eine Namespace deklarieren. Üblicherweise werden Namespaces wie HTML und RDF deklariert um weitere Elemente verwenden zu können, aber Sie können auch Ihre eigene erfinden. Wenn Sie den Button aus Beispiel 2-1 in einer normalen XML Datei haben möchten, können Sie dies tun, indem Sie das xmlns:xul Attribut wie in Beispiel 2-3 verwenden. Verschiedene Namespaces in einem XML Dokument <flies:flies xmlns:flies="http://www.flies.com/come.fly.with.me.xml#" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <flies:wings> <xul:box align="center"> <xul:button label="hello xFly" onclick="alert('hello.');" /> </xul:box> <html:img src="wings.jpg" /> </flies:wings> </flies:flies> Diese Datei hat drei verschiedene Arten von Inhalt: XUL, HTML und eine angepasste Markupsprache namens flies. Wenn Sie gemischte Namespaces verwenden, müssen Sie den XUL Elementen xul: voranstellen, um sie von anderen Markup Elementen zu unterscheiden. Ein Beispiel sehen Sie anhand von xul:box und xul:button im Beispiel 2-3. Basis XUL Layout Beispiel 2-1 zeigt ein paar oft verwendete XUL Elemente. In diesem Abschnitt nehmen wir jedes Element auseinander, um zu sehen was es bewirkt und welche Interaktionen es mit anderen Elementen aufweist. Das <window> Element ist die Wurzel eigenständiger, primärer XUL Dokumente (im Gegensatz zu Popups welche <dialog> und Subdokumenten welche <page> verwenden). Wie in HTML definiert das Root-Element das Dokument, in das alle anderen Elemente gezeichnet werden sollen, wobei das Dokument bei XUL ein Teil einer Applikationsschnittstelle und nicht einer Webseite ist. Wir werden die weiteren Eigenschaften von 'window' später noch genauer anschauen. Beispiel 2-1 zeigt ein <box> Element, das ein <button> Element enthält. Obwohl man Attribute des Window Elements verwenden kann um das Layout zu definieren, ist es eine gute idee <box> als Container zu verwenden. Dies ist vor allem sinnvoll wenn Sie neue Layout Elemente wie Button-Reihen, Grids, Tabs oder andere Elemente die genau angeordnet werden müssen verwenden. box ist das Basiselement um Layouts in XUL zu erstellen. Das align Attribut des Box Elements definiert, dass Kind-Elemente nicht gestreckt oder zentriert werden sollen. Wenn die Box nicht verwendet wird und mehr als ein Kind-Element des Grundfensters existieren, würden sie normalerweise vertikal aliniert angezeigt. Diese Einstellung kann mit dem orient Attribut von <window> überschrieben werden indem es als 'horizontal' definiert wird. XUL Fenster verwenden Die Basis jeder XPFE Applikation ist ein XUL Fenster. Jedes XUL Dokument muss mindestens ein (1) <window> Element enthalten, welches an der Wurzel des Dokuments sein muss und alle anderen XML Elemente umschliesst (nebst der XML Deklaration und den Verarbeitungspräambeln). Ein einfaches Fenster ohne Inhalte sieht wie folgt aus: <?xml version="1.0"?> <!DOCTYPE window> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> </window> Üblicherweise hat eine Applikation mehrere Fenster, Dialoge und Sekundärfenster. Jedes Fenster ist ebenfalls durch ein <window> Element ausgezeichnet (obwohl seit kurzem auch die Elemente dialog und page als Root Elemente einer XUL Datei unterstützt werden. Mit dem Wachstum Ihrer Applikation benötigen Sie Mittel, die Fenster zu verfolgen und ihre Kommunikation sicherzustellen. In Mozilla kann dies mit der toOpenWindowByType( ) Funktion erreicht werden indem Sie Fenster eines bestimmten Typs damit öffnen. Wie alle anderen Funktionen die in diesem Buch erwähnt werden, können Sie toOpenWindowByType mit LXR nachschlagen. Der Web basierte Sourcecode Viewer wird in Anhang A näher beschrieben und ist unter http://lxr.mozilla.org/ verfügbar. window Features Jedes <window> Element verfügt über ein id Attribut. Dieses Attribut muss nicht angegeben werden, erleichtert jedoch das auffinden einzelner Fenster/Nodes aus dem Skript (siehe die DOM Methoden getElementByID in Kapitel 5 um mehr darüber zu erfahren wie Elemente anhand ihres Identifiers ausgewählt werden können.) Das ID Attribut wird wie folgt verwendet: <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="xflyMain"> Eventhandler wie onload und onunload sind nützlich wenn Sie die Inhalte eines Fensters ändern wollen, oder die Eingabe auf ein bestimmtes Fenster umleiten möchten: <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="xfly-main" onload="startUp( )" onunload="shutdown( )" onclose="onClose( )"> Wenn Sie eine XUL Datei laden, die wie das obige Beispiel beginnt, führen die Eventhandler Attribute onload und onunload deren Werte (startUp( ) und shutdown( )) aus. Zusätzlich bietet Mozilla einen onclose Eventhandler welcher vor dem schliessen des Fensters aufgrufen wird, damit letzte Verarbeitungsschritte ausgeführt werden können. Das 'close' Event wird vor dem unload Event ausgeführt, womit Sie das Fenster über onclose am schliessen hindern könnten. Um das Schliessen des Fensters zu verhindern muss das 'close' Event als Rückgabewert false liefern. Dialogfenster enthalten weitere Eventhandlers die unter Abschnitt 3.2 in Kapitel 3 erklärt werden. window Eigenschaften Die window Implementierung wird ständig erweitert und lässt Raum für unzählige neue Features. Nebst den Attributen -- den Eventhandlern, der ID und der Namespace die innerhalb eines <window> Tags vorkommen -- hat ein XUL Window die gleichen DOM Eigenschaften wie ein HTML window Objekt. Diese Eigenschaften werden unten aufgelistet, zusammen mit zusätzlichen Eigeschaften für applikationsspezifische Arbeiten. Navigator Document window Parent Top Scrollbars name ScrollX ScrollY ScrollTo scrollBy GetSelection ScrollByLines ScrollByPages Size ToContent Dump SetTimeout SetInterval Clear Timeout ClearInterval SetResizable CaptureEvents Release Events RouteEvent Enable External Capture DisableExternal Capture prompt Open OpenDialog Frames find self Screen History content Sidebar Menubar Toolbar Locationbar Personalbar Statusbar Directories closed Crypto pkcs11 Controllers opener Status defaultStatus Location innerWidth InnerHeight outerWidth OuterHeight screenX ScreenY pageXOffset PageYOffset length FullScreen alert Confirm focus Blur back Forward home Stop print MoveTo moveBy ResizeTo resizeBy Scroll close UpdateCommands escape Unescape atob Btoa AddEvent Listener RemoveEvent Listener Dispatch Event GetComputed Style Spezielle XUL-Fenster Eigenschaften: window.content Dieses Property kann verwendet werden um einfach auf den Inhalt des Fensters zuzugreifen, falls einer existiert. Dies ist nur sinnvoll wenn eines der Content-Elemente verwendet wurde, namentlich: <iframe>, <browser> und <editor>. Abschnitt 3.8 in Kapitel 3 bietet zusätzliche Informationen zum Thema. Das content-Property bezieht sich nur auf ein explizit als 'primary area' deklariertes Frame <browser type="content-primary" ...> So können Sie den Inhalt manipulieren. window.content.focus( ); window.sizeToContent( ) Diese Methode wird verwendet um die Fenstergrösse an die tatsächliche Grösse der Inhalte anzupassen. Dies wird bei der Entwicklung mit XUL vor allem für Dialoge verwendet. Sie sollten vorzugsweise diesen Ansatz verwenden, anstatt den Fenstern eine fixe Breite und Höhe zu geben wenn die Inhalte Ihres Fensters ändern könnten (onload Änderungen, input eines anderen Fensters, ..). Der Colorpicker im Mozilla Editor verwendet diese Eigenschaft um sein Fenster an die angezeigte Farbpalette anzupassen: function ChangePalette(palette) { gDialog.ColorPicker.setAttribute("palettename", palette); window.sizeToContent( ); } Interaktion zwischen Fenstern Die nsIWindowMediator XPCOM Komponente bietet einige Möglichkeiten um verschiedene Fenster interagieren zu lassen. Obwohl es ein bisschen zu früh ist, in diesem Hello World Beispiel auf Komponenten einzugehen, umfasst sie folgende Routinen: Rückgabe des zuletzt geöffneten Fensters eines bestimmten Typs Rückgabe der Anzahl Fenster Un-/registrierung von Fenstern Aktualisieren der Fenster-Timestamp Aktualisieren des Fenster-Titels Anpassen der Z-Order Position Kapitel 8 bietet viele Details um XPCOM besser zu verstehen. Fenster Verhalten Mozilla unterstützt die Javascript Standardfunktion window.open, die ihren Ursprung im Browser-Scripting hat und verwendet wird um Fenster zu öffnen. Mozilla erweitert diese Funktion um ein Paar Features für die Applikationsentwicklung. Weiter wird window.openDialog zur Verfügung gestellt, um Fenster in der XPFE Scripting Umgebung zu öffnen. Heutzutags wird vor allem die zweite Funktion eingesetzt um XUL Fenster zu öffnen, obwohl beide Funktionen austauschbar sind. Die Verwendung von window.open: window.open (url, name, features); window.openDialog erweitert diese Funktionalität mit einer erweiterten Argumentliste, welche optional ist und eine unbegrenzte Anzahl von Argumenten enthalten kann: window.openDialog (url, type, features, argument1, argument2); Folgend eine Liste einiger Features eines XUL Windows welche mit window.openDialog geöffnet wurde: close Dieses Widget kann mit oder ohne Close-Widget erstellt werden. chrome Das neue Fenster muss im chrome-Kontext und nicht im Browser-Kontext verwendet werden. Es hat ein eigenes top-level Fenster. Das Fenster selbst wird mit der chrome-URL übergeben und wird nicht im Browser-Fenster geladen. dependent Das neue Fenster gehört zum aufrufenden Fenster wenn das Betriebssystem dies unterstützt. Es befindet sich über dem parent-Fenster welches immernoch zugänglich ist. Beide Fenster werden zusammen minimiert. modal Das Fenster wird modal angezeigt. Die Kontrolle wird erst an das Parent-Fenster zurückgegeben wenn das Fenster geschlossen wurde. titlebar Das Fenster wird mit oder ohne Titelleiste erzeugt. centerscreen Öffnet das Fenster zentriert auf dem Bildschirm. Kommata umschliessen die Features in der Liste, und die gesamte Liste muss von Anführungszeichen umschlossen sein. Das Skript welches das neue Fenster verwaltet, kann auf die Argumentliste zugreifen: window.openDialog("chrome://xfly/content/utils/prompt.xul", "xFly_prompt", "chrome,dialog,modal", message); Das Fenster, das in diesem Beispiel erstellt wurde, ist modal und verwendet eine Nachricht aus der Vairable message, die ihm übergeben wurde. Normalerweise geht Mozilla davon aus, dass chrome verwendet werden soll, wenn Sie window.open oder window.openDialog in einer chrome-Umgebung verwenden. Mozilla arbeitet für uns Das zweite "Hello World" Beispiel in Beispiel 2-4, fügt ein paar wichtige Applikationseigenschaften hinzu und beginnt Mozillas Ressourcen aktiv zu nutzen. Dieser Abschnitt handelt davon, wie Sie Stylesheets und Skripts in Ihre Applikation importieren können um diese modularer und ausgereifter zu machen. Weiter bereitet es Sie darauf vor, eine vollständige Applikation zu entwickeln. Sie können dieses Beispiel anschauen, wenn Sie den code aus Beispiel 2-4 in einer Datei namens hello2.xul speichern, Mozilla starten und 'File'->'Open File' im Browsermenu auswählen. Dies zeigt das Beispiel als Inhalt im Mozilla Browser an, wie in Abbildung 2-2. XUL Beispielfenster <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <!DOCTYPE window> <window title="Hello xFly" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" style="background-color: white;" width="300" height="215" onload="centerWindowOnScreen( )"> <script type="application/x-javascript" src="chrome://global/content/dialogOverlay.js" /> <vbox align="left"> <label style="font-weight: bold;" value="Hello, Welcome to the xFly" /> <image src="http://books.mozdev.org/xfly.gif" /> <button label="hello xFly" oncommand="alert('Hello World');" /> </vbox> </window> Der Unterschied zwischen Beispiel 2-4 und dem ersten Beispiel sind die neuen Elemente. Das script Element, das in Mozilla JavaScript verfügbar macht, weitere Box-Layout Eigenschaften, inline Style Definitionen und Verarbeitungs-Instruktionen um Stylesheets zu importieren und die DOCTYPE Deklaration, die wir später in diesem Kapitel in Abschnitt 2.5.5.3 genauer anschauen werden. Diese Extras führen dazu dass Ihre XUL Datei jetzt eher wie eine Applikation aussieht. Weiter hilft Ihnen dieser Ansatz, Ihre Applikation in wiederverwendbare Teile wie Stylesheets, Widgets und Skript Bibliotheken aufzuteilen, wie in Abschnitt 2.5 gezeigt wird.
Das zweite Hello xFly Beispiel - im Browser geladen
Ressourcen aus Mozilla importieren Der Code in Beispiel 2-4 verwendet Skripts und Styles die bereits in Mozilla definiert sind. Wie Sie in den Beispielen in diesem Buch sehen werden ist global.css das Stylesheet, das Styledefinitionen für XUL Widgets enthält. Die meisten Widgets haben einen Basis-Style. Wie Sie in Beispiel 2-1 sehen können, sieht ein Button bereits wie ein Button aus, ohne dass zusätzliche Styles importiert werden müssten. Als sich XPFE entwickelte wurden mehr und mehr Styledefinitionen in XBL definiert um diese Basis-Styles zu erhalten. Dies enthob global.css und andere CSS Dateien von einen Teil der Verantwortung. Dennoch enthält dieses Stylesheet wichtige Informationen um XUL Widgets anzeigen zu können. Deshalb ist es normalerweise eine gute Idee es zu importieren und zu sehen wie die Applikation danach aussieht. Wenn Sie Beispiel 2-4 mit oder ohne global.css Zeile starten, sehen Sie welchen Einfluss auf die XUL Widgets ausgeübt wird. Die Sktipts globalOverlay.js, tasksOverlay.js und dialogOverlay.js die in Beispiel 2-4 importiert werden, stellen ihrerseits Funktionalität für die Applikation zur Verfügung. Stylesheets laden In der zweiten Zeile von Beispiel 2-4, verwendet die Stylesheet Deklaration eine chrome:// URL um die Datei global.css zu laden. Die Styleinformationen in dieser Datei geben dem Button Widget sein Look&Feel. Sie können diese Deklaration verwenden um andere Mozilla Stylesheets wie global.css, navigator.css und toolbar.css oder Ihr eigenes Stylesheet zu laden. In beiden Fällen wird die URL chrome:// verwendet um auf verpackte Dateien auf eine flexible Art zuzugreifen. <!--import the navigator.css stylesheet from the Mozilla navigator component--> <?xml-stylesheet href="chrome://navigator/skin" type="text/css"?> <!--import xfly.css stylesheet from the xFly package--> <?xml-stylesheet href="chrome://xfly/skin" type="text/css"?> Weiter sollten Sie sich merken wie in Beispiel 2-4 inline Styles verwendet werden. Die Eigenschaft style des label Widgets bietet einen Platz um Styleinformationen unterzubringen. In unserem Beispiel setzen wir den Text des Labels FETT. Sie könnten diese Information auch in einem externen Stylesheet ablegen und dieses danach mitsamt Ihrer Applikation verpacken, dies machen wir später in diesem Kapitel in Abschnitt 2.5.5 auch noch. Skripts aus XUL aufrufen Um ein Skript aus XUL anzusprechen verwenden Sie das script Element und eine URL für dessen src Attribut: <script type="application/x-javascript" src="chrome://xfly/content/xfly.js" /> Die Datei dialogOverlay.js, die in Beispiel 2-4 verwendet wird, bietet Zugang zur Funktion CenterWindowOnScreen( ). Diese Funktion wird wie folgt zugänglich gemacht: <script type="application/x-javascript" src="chrome://global/content/dialogOverlay.js" /> Alle Funktionen die in der Datei dialogOverlay.js gefunden werden, werden in den Scope der aktuellen XUL Datei geladen und können somit direkt aufgerufen werden. CenterWindowOnScreen( ) wird zum Beispiel im onload EventHandler des XUL Windows verwendet. Die Funktionen aus einer JavaScript Datei machen sich nicht bemerkbar, sind aber via JavaScritp Debugger zu sehen. Um die passende Funktion für Ihr Problem zu finden, schauen Sie sich den SourceCode der Funktionsdatei oder einer Applikation an; die Chance ist gross, dass für Ihr Problem bereits eine Lösung existiert. Leider gibt es im Moment keine gute Referenz aller Skripte die importiert werden können und der Funktionalität die Sie zur Verfügung stellen. Deshalb ist es oft eine Frage von Glück, wen man kennt, testen, Willensstärke und Geduld um die korrekten Datein zu finden.
XUL Dateien als Chrome anzeigen Darstellung 2-2 zeigt die XUL Datei aus Beispiel 2-4 im Hauptfenster des Browsers. Das Beispiel enthält ein label Widget und ein image, die beide innerhalb einer vbox ausgerichtet werden. Diese Widgets machen das 'Chrome' ihrer Applikation aus, die Möglichkeit für Mozilla via chrome:// URL auf seine eigenen Ressourcen zuzugreifen. Das Beispiel zeigt zwar einige interessante Konzepte um mit XPFE zu arbeiten, ist aber noch keine Applikation. Unter anderem möchten Sie sicher, dass Ihr Programm ausserhalb des Browsers läuft. Je grösser das Projekt wird, desto mehr möchten Sie verschiedene Teile trennen -- zum Beispiel in eine XUL Datei, ein eigenes Stylesheet und ein Skript. Der Rest dieses Kapitels geht darauf ein, wie man den Code aus Beispiel 2-4 verpacken kann und wie man ihn standalone starten kann, indem man die -chrome Option beim starten von Mozilla angibt. Um eine Applikation mit der -chrome Option zu starten, muss diese zuerst korrekt in Mozillas Registry eingetragen werden. Abschnitt 2.5.6 geht näher auf die chrome-Umgebung ein und zeigt, wie Applikationen registriert werden. Obwohl das Beispiel noch nicht registriert wurde, möchten wir Ihnen zeigen wie die Applikation aussieht, wenn sie in einem eigenen Fenster geladen wurde, und wie sie im Browser dargestellt wird. Wenn Sie das Beispiel mit der -chrome Option (wie später in diesem Kapitel, in Abschnitt 2.6 beschrieben) starten, sehen Sie das Fenster aus Darstellung 2-3.
Das zweite Hello xFly Beispiel in seinem eigenen Fenster
Die Verwendung der -chrome Option weist Mozilla an, die angegebene Datei (in unserem Fall der Code aus Beispiel 2-4) in einem eigenen Fenster anstatt dem Browserfenster zu laden. Die Datei selbst ist genau die gleiche, unabhängig davon, wie sie geladen wird. Die Resultate unterscheiden sich je nachdem was Sie Mozilla instruieren zu tun. Die XUL Datei in einem eigenen chrome Window anzuzeigen macht die Applikation unabhängiger und unterbricht die Verbindung zum Browser die durch die File > Open File Methode erzeugt wird. Eigene Fenster mit der JavaScript Funktion window.openDialog zu starten, gibt der Applikation weit flexiblere Anzeigemöglichkeiten.
Ein Paket erstellen Die zwei vorhergehenden Abschnitte handelten von chrome und der Möglichkeit Applikationen in einem eigenen Fenster laufen zu lassen. Der nächste Schritt ist, das Beispiel in ein Paket umzuwandeln -- eine modularen Sammlung der Dateien, die in Mozilla als neue Applikation installiert werden können. Im vorhergehenden Abschnitt 2.3, haben Sie der XUL Datei zusätzliche Features und Komplexität hinzugefügt. In diesem Abschnitt verteilen wir diese in einzelne Dateien -- einer CSS Datei, einer JS Datei und einer DTD Datei -- registrieren dieses Dateien und machen Sie als einziges Paket installierbar. Nur wenn Sie Ihre Applikation verpacken, haben deren Dateien Zugriff auf Mozilla Dateien wie CSS und Skripts, sind über die spezielle chrome:// URL verfügbar, akzeptieren neue Themes und können auf die XPCOM Objekte zugreifen in denen der grösste Teil der Mozilla Applikation definiert ist. Um ein neues Paket zu erstellen sind verschiedene Werkzeuge verfügbar. Anhang B enthält Informationen über XULKit einer Handvoll Skripts die einen Teil der Paket-Erstellung übernehmen. Es wird jedoch empfohlen, zuerst ein paar Pakete von Hand zu machen um zu verstehen wie sie funktionieren bevor man XULKit verwendet. Architektur eines Chrome Pakets Die Architektur von Mozilla XPFE ist Komponenten- beziehungsweise Layer- basiert. Eines der wichtiges Ziele bei diesem Design ist die klare Trennung der verschiedenen Komponenten einer Applikation. Namentlich Inhalte, Funktionalität und Layout. Dieses Design hat eine grössere Modularisierung zur Folge, die es einfach macht eine Benutzerschnittstelle zu ändern. Um zum Beispiel die Skin Ihrer Applikation zu ändern, können Sie die Sprachdateien anpassen oder weitere Script Elemente hinzufügen. Wenn ein Paket so modular aufgebaut sein kann wie in Mozilla, können Design-Entscheidungen von Designer, die Sprache der Benutzerschnittstelle von einem Author und das Applikationsframework von einem Programmierer unterhalten werden (obwohl der Programmierer in vielen kleinen Projekten wohl all diese Positionen selber belegt). Die nächsten Abschnitte gehen näher auf die verschiedenen Komponenten, deren Inhalte und Dateitypen ein. Die Art wie Komponenten zusammengestellt werden, kann als Inspiration für Ihre eigenen Entwicklungen dienen. Ein Paket ist eine Gruppe von Verzeichnissen und dazugehörigen Dateien, welche zusammen 'die Mozilla Applikation' ausmachen. Ein kleines, typisches Paket enthät normalerweise eine XUL Datei, eine Skript Datei (im Moment JavaScript, während Implementationen für Perl, Python, Ruby und andere Sprachen entwickelt werden) und einer CSS Datei. Ein ausgewachsenes Paket kann weiter XBL Dateien, Bilder (PNG, JPG, GIF), DTD, HTML und RDF Dateien enthalten. Jede davon hat eine wichtige Rolle in der Applikation. Paket Komponenten Sie werden feststellen, dass jede Komponente in einem Paket unabhängig ist. Es ist möglich mit einer oder zwei Komponenten eine Applikation zu erstellen. Alle Komponenten wirken jedoch zusammen, wenn eine ausgewachsene Applikation erstellt werden soll und stehen zu Ihrem Vorteil zur Verfügung. Chrome Inhalt Der Inhalt setzt sich aus XUL und XBL Daten aus einer oder mehreren Dateien zusammen. Diese Inhalte werden zur Laufzeit aus den Dateien, Overlays und Bindings gelesen um im Window System wiedergegeben zu werden. Die plattformübergreifende Architektur garantiert Konsistenz und passt in den Leitgedanken 'write once, run everywhere'. XUL definiert ein einziges Widget Set, das für alle Plattformen gültig ist. Der XUL Parser ist jedoch nicht so tolerant wie mancher HTML Parser, besser gesagt ist er sogar komplett intolerant. Dies muss auch so sein, da jedes XUL Element die umliegenden Elemente beinflusst -- speziell im Kontext des Box Modells welches in Kapitel 3 näher beschrieben wird. Das Widget Set besteht aus einfachen Widgets, die dargestellt werden indem sie sich, im ihnen zugemessenen Raum, zeichnen. Komplexere Widgets, die als Container benutzt werden bis zu Widgets die ihre Inhalte stapeln, oder Eingaben verarbeiten. Ein <label> Widget ist ein Beispiel des erstgenannten, <stack> gehört zur letzteren, komplexen Gruppe. Wenn der Parser ein Element nicht laden kann löst er einen Fehler aus. Die Fehler unterscheiden sich im Typ. XML Syntax-bedingte Fehler werden im Fenster anstelle des erwarteten Inhalts ausgegeben. Angezeigt wird der Name der fehlerhaften Datei und die Position (Zeile/Reihe) des fehlerhaften Abschnitts. Als Erweiterung wird die XBL (eXtensible Binding Language) benutzt, eine Beschreibungssprache zu XUL. XBL erlaubt dem Benutzer, eigene Widgets zu definieren, oder einem bestehenden Widget neue Funktionalität hinzuzufügen. Sie können für ein Binding Scripte und Inhalte definieren. Mit einem bisschen Vorstellungskraft können Sie unendlich viele Inhalte in Ihrer Applikation verwalten indem Sie eigene Widgets, Styles und Verhalten in XBL erfassen. Chrome Aussehen Wenn man eine XUL Datei lädt, werden die XUL Elemente als einfache, unproportionierte Widgets ausgegeben. Während einfacher Text für eine Webseite ein effizientes Mittel sein kann um Informationen weiterzugeben, ist diese Situation mit Benutzerschnittstellen nicht der Fall. Mozilla Benutzerschnittstellen ohne Styles sind nicht sehr brauchbar. Selbst um das traditionelle Look&Feel des grauen Interfaces, das viele Applikationen verwenden, zu erhalten, muss CSS verwendet werden. Subtile Effekte wie Farbtönungen und 3D Buttons lassen sogar einfachste Benutzerschnittstellen besser aussehen. Themes und die Möglichkeit das Look&Feel einer Applikation auf ein Unternehmen anzupassen werden immer wichtiger. Mozilla Entwickler realisierten dies während der Design Phase, was sich auf die Architektur auswirkte: das Aussehen der Schnittstelle ist fast komplett unabhängig von deren strukturellem Aufbau. Chrome Verhalten Mozilla unterstützt im Moment nur JavaScript als Brücke zwischen Benutzerschnittstelle und Applikationscode. JavaScript ist der Kleber zwischen dem Interface und dem fast vollständig in C++ geschriebenen Backend. Ein grosser Teil der Infrastruktur für die Unterstützung weiterer Skriptsprachen wie Perl und Python existiert bereits, deshalb wurden beide Sprachen zur eingliederung in das Framework vorgeschlagen. Im Moment erkennen Sie Inhalte die mit JavaScript verbunden sind anhand der folgenden Deklaration: <script type="application/x-javascript" src="xfly.js" /> type dient als Ersatz zum abgelösten language Attribut und erwartet einen MIME-Type als Wert. So kann, wenn weitere Sprachen hinzugefügt werden einfach der Wert geändert werden -- was sehr gut in die Philosphie von 'There's More Than One Way To Do It' passt. Die Funktionellen Komponenten einer Mozilla Applikation werden meist im content Unterverzeichnis abgelegt, wie in Abschnitt 2.5.3 erklärt wird. Chrome Lokalisierung Lokalisierung ist der Prozess in dem eine Software an lokale Gegebenheiten angepasst wird, indem zum Beispiel die Sprache für eine bestimmte Region geändert wird. Widgets wie MenuItems, Buttons, Window TitleBars und Alert-Dialoge müssen zumeist nicht angepasst werden. Nebst dessen können jedoch verschiedene Dinge lokalisiert werden, von HTML Seiten bis zu Installationspaketen. Die unterstützten Formate sind: DTD (.dtd) Dateien, die Entities mit dem Inhalt der Zeichenkette enthalten die im XUL Teil verwendet wird. Property-Dateien (.properties), die Zeichenketten enthalten und dynamisch via JavaScript oder C++ ausgelesen werden. HTML Dateien sind für bestimmte Seiten die mit der Applikation installiert werden, wie zum Beispiel About:Mozilla. RDF Dateien. Verzeichnisstruktur Dateien können auf verschiedene Arten organisiert werden. Wenn Ihre Applikation klein ist, und nur aus einer einfachen Strukur besteht, nur in einer Sprache verfügbar sein muss -- dann ist es möglicherweise einfacher, alle Dateien in einem einzigen Verzeichnis abzulegen. Wenn die Applikation jedoch eine gewisse Grösse ereicht, ist es sinnvoller die Dateien logisch in Unterverzeichnissen abzulegen. Die meisten Applikationen verwenden einen Verzeichnisstruktur die den Inhalt des Software Paketes wiederspiegelt: XUL und JavaScript in einem content Unterverzeichnis, CSS und Bilder in einem skin Unterverzeichnis und DTDs und andere Ressourcen für die Lokalisierung in einem Unterverzeichnis namens locale. Abbildung 2-4 zeigt diese Anordnung.
Ein Beispiel Verzeichnis-Layout für ein Paket
Diese drei verschiedenen Verzeichnisse enthalten meist die folgenden Dateitypen: content Das content Verzeichnis enthält die XUL Dateien, das die Widgets für die Applikation enthält. Es ist gängige Praxis ebenfalls JavaScript Dateien in diesem Verzeichnis abzulegen. locale Dieses Verzeichnis enthält Dateien, die Zeichenketten enthalten, welche für die Lokalisierung Ihrer Applikation benötigt werden. Die meisten dieser Dateien sind DTDs, die die Entitäten enthalten die in der XUL Datei referenziert werden. Darunter gibt es ein Unterverzeichnis pro angebotene code-region, wie zum Beispiel de-CH. skin Der name 'Skin' ist eine interne Bezeichnung für ein Theme. Das skin Verzeichnis enthält alle CSS Dateien und Bilder, die für das Aussehen der Fenster zuständig sind. Dies ist gleichzeitig ein guter Ort um die Applikationsicons aufzubewahren - in einem eigenen Unterverzeichnis. Die Verzeichnisstruktur der xFly Applikation Die Verzeichnisstruktur in der die Applikation definiert ist (egal ob es sich um Dateisystem Verzeichnisse oder um Ordner in einem JAR-Archiv handelt), ist ein wichtiger Teil des Applikations Designs und dem Zusammenhang zu Mozilla. Verwenden Sie die folgenden Schritte um Ihr xFly Paket zusammenzufassen, registrier- und anpassbar zu machen. Suchen Sie auf Ihrem Computer das Installationverzeichnis von Mozilla und erstellen Sie unterhalb des chrome Verzeichnisses ein neues Verzeichnis namens "xfly." Alle Mozilla Applikationen werden im chrome Verzeichnis abgelegt. Unter diesem Verzeichnis müssen Sie 3 weitere erstellen. content, locale und skin, wie in Abbildung 2-5 gezeigt wird. Das locale Verzeichnis muss ein Unterverzeichnis namens 'en-US' enthalten um das Sprachpaket abzulegen.
xFly Paket Verzeichnisstruktur
Paket Manifeste Nun, nachdem wir die Verzeichnisse für unser Paket eingerichtet haben, müssen wir Mozilla informieren, welche Dateien verwendet werden sollen. Alle Mozilla Pakete müssen ein Manifest enthalten, das dessen Inhalt beschreibt und verwendet werden kann, um das Paket zu registrieren. Manifeste sind ein oder mehrere RDF Dateien, die im Paket enthalten sind, und mit Mozillas chrome Verzeichnis interagieren. RDF Dateien sind XML Dateien die Daten in maschinenlesbarer Form beschreiben. Jedes xFly Paket benötigt sein eigenes Manifest. Mozilla verwendet diese Dateien (in diesem Fall contents.rdf) um eine Applikation zu registrieren. Diese Dateien werden in Beispiel 2-5, Beispiel 2-6 und Beispiel 2-7 aufgelistet. Erstellen Sie diese Dateien in deren content, skin und locale Unterverzeichnissen. chrome/xfly/content/contents.rdf file <?xml version="1.0"?> <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the packages being supplied --> <RDF:Seq about="urn:mozilla:package:root"> <RDF:li resource="urn:mozilla:package:xfly"/> </RDF:Seq> <!-- package information --> <RDF:Description about="urn:mozilla:package:xfly" chrome:displayName="xFly" chrome:author="xfly.mozdev.org" chrome:name="xfly"> </RDF:Description> </RDF:RDF> Im content-Manifest in Beispiel 2-5 finden Sie Metadaten wie chrome:name und chrome:author, die das Manifest Mozilla zur Verfügung stellt. Diese Information kann von anderen Leuten verwendet werden um herauszufinden um was für eine Applikation es sich handelt und wer sie geschrieben hat. Der Name, Author und Beschreibung eines Themes sind zum Beispiel in den Einstellungen sichtbar, wenn Sie Appearance > Themes wählen. In Beispiel 2-6 sehen Sie, dass das xFly Paket nur die Skin Resource Classic erweitert, wie in RDF:Seq notiert, das nur classic als betroffenes Paket auflistet. chrome/xfly/skin/contents.rdf file <?xml version="1.0"?> <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <RDF:Seq about="urn:mozilla:skin:root"> <RDF:li resource="urn:mozilla:skin:classic/1.0" /> </RDF:Seq> <RDF:Description about="urn:mozilla:skin:classic/1.0"> <chrome:packages> <RDF:Seq about="urn:mozilla:skin:classic/1.0:packages"> <RDF:li resource="urn:mozilla:skin:classic/1.0:xfly"/> </RDF:Seq> </chrome:packages> </RDF:Description> </RDF:RDF> In Beispiel 2-7 wird gezeigt wie die dritte Art von Manifest verwendet wird, um das englische Language Pack (en-US) als Ressource im xFly Paket zu deklarieren. Die RDF:Seq Struktur in einem Manifest besagt 'diesem Paket folgendes Language Pack (bsp: das en-US Language Pack), hinzufügen.' chrome/xfly/locale/contents.rdf file <?xml version="1.0"?> <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <RDF:Seq about="urn:mozilla:locale:root"> <RDF:li resource="urn:mozilla:locale:en-US"/> </RDF:Seq> <!-- locale information --> <RDF:Description about="urn:mozilla:locale:en-US" chrome:displayName="English(US)" chrome:author="xfly.mozdev.org" chrome:name="en-US" chrome:previewURL="http://www.mozilla.org/locales/en-US.gif"> <chrome:packages> <RDF:Seq about="urn:mozilla:locale:en-US:packages"> <RDF:li resource="urn:mozilla:locale:en-US:xfly"/> </RDF:Seq> </chrome:packages> </RDF:Description> </RDF:RDF> Manifeste werden in Kapitel 6 näher erläutert. Für den Moment reicht es, zu verstehen, dass jedes Manifest das Unterverzeichnis in dem es abgelegt ist beschreibt, und dass die Inhalte dieser Unterverzeichnisse zusammen den Inhalt des Pakets ausmachen. Content beschreibt den Inhalt des xFly Pakets, XUL und JavaScript. Skin beschreibt das Theme oder CSS und Images welche in der XUL Struktur verwendet wurden. Der dritte Teil beschreibt die Locale oder die Zeichenketten in der Benutzerschnittstelle welche an verschiedene Sprachen und lokale Gegebenheiten angepasst werden kann. Aufteilen der Dateien Wenn Sie die Unterverzeichnis Struktur für Ihre Applikation eingerichtet haben, können Sie diese Teile Ihrer Applikation aus den Dateien extrahieren und in eigenen Dateien ablegen. Diese separaten Dateien - die XUL Datei, CSS, JS und DTD Dateien -- werden danach als einziges Paket registriert und können somit als Applikation gestartet werden. Obwohl wir bereits in Beispiel 2-4 gesehen haben, wie unser "Hello World" Beispiel funktioniert, zeigt deren Integration, wie ein Paket mit Mozilla zusammenarbeiten kann. Jeder Schritt um die Komponenten zu separieren führt dazu, dass die Basis-Datei angepasst werden muss. Die xFly CSS Datei Die Inline Style Definition des Label Widgets kann fast direkt in einer separaten Datei namens xfly.css abgelegt werden. Speichern sie den Code aus Beispiel 2-8 im Unterverzeichnis chrome/xfly/skin/. Der Inhalt von xfly.css #xlabel { font-weight: bold; } window { background-color: white; } Style Definitionen aus einer externen Datei zu verwenden ist anders als sie direkt Inline zu notieren, da man einen Weg haben muss, um den Style mit einem Element zu verbinden. CSS verfügt über eine breite Anzahl solcher sogenannter Selektoren, die Elemente mit Styles verknüpfen. In diesem Fall, in dem Sie zwei verschiedene Elemente haben, die einen Style verwenden sollen, wird das id Attribut benutzt um das Element zu referenzieren, auf das der Style angewendet werden soll, der zweite Weg ist, dies direkt via Elementname zu erledigen. Beispiel 2-8 enthält die Selektoren für diese zwei Elemente und Beispiel 2-9 zeigt die aktualisierte Version von xfly.css. Externe Styledefinitionen verwenden <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <?xml-stylesheet href="chrome://xfly/skin" type="text/css"?> <!DOCTYPE window> <window title="Hello xFly" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="215" onload="centerWindowOnScreen( )"> <script type="application/x-javascript" src="chrome://global/content/dialogOverlay.js" /> <vbox align="left" id="vb"> <label id="xlabel" value="Hello, Welcome to the xFly" /> <image src="http://books.mozdev.org/xfly.gif" /> <button label="hello xFly" oncommand="alert('hello.');" /> </vbox> </window> Beachten Sie das neue Stylesheet 'import'-Statement am Anfang der Datei und die Verwendung des id Attributs im Label. Wenn Sie Dateien mit Ihrem Paket registrieren wollen, deutet das xfly Verzeichnis auf den Ort in der Verzeichnisstruktur an dem Ihre Applikation abgelegt wurde. (Das skin Unterverzeichnis, und dessen Inhalt xfly.css). Das Label wird danach die Style Informationen von der Stelle laden die mit dem style Attribut angegeben wurde. Die xFly Script Datei Als erstes entfernen wir den Script Teil aus unserer XUL Datei und legen ihn in einer JavaScript Datei ab. Beispiel 2-10 zeigt eine XUL Datei welche eine Funktion für den Button aus der externen Script Datei xfly.js lädt. Verwendung von externen Scripts <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <?xml-stylesheet href="chrome://xfly/skin" type="text/css"?> <!DOCTYPE window> <window title="Hello xFly" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="215" onload="centerWindowOnScreen( )"> <script type="application/x-javascript" src="chrome://global/content/dialogOverlay.js" /> <script type="application/x-javascript" src="chrome://xfly/content/xfly.js" /> <vbox align="left" id="vb"> <label id="xlabel" value="Hello, Welcome to the xFly" /> <image src="http://books.mozdev.org/xfly.gif" /> <button label="hello xFly" oncommand="greet( );" /> </vbox> </window> Die Funktion greet( ) benennt die Aktion die durchgeführt wird, wenn der Button angeklickt wird. Die greet( ) Funktion ist nun in der Script Datei xfly.js abgelegt, die via 'import'-Statement hinzugebunden wurde: <script type="application/x-javascript" src="chrome://xfly/content/xfly.js" /> Beispiel 2-11 enthält den Code für die xfly.js Datei den Sie benötigen. Der Inhalt der xfly.js Datei function greet( ) { alert("Hello World"); } Speichern Sie die Datei xfly.js in das content Unterverzeichnis der xFly Applikation (chrome/xfly/content/). Das oben benutzte 'import'-Statement verwendet eine chrome:// URL um die Skripte und die Verzeichnisse die registriert wurden aufzufinden. Das xFly DTD Der letzte Schritt ist, die sprachabhängigen Teile der Applikation zu generalisieren. Wenn Sie ein Unterverzeichnis namens locale erstellen, und darin Ihre englische DTD Datei ablegen, können Sie sie genau gleich wie CSS Dateien einbinden. Um Mozilla anzuweisen für Label und Button Elemente in unserem xFly Beispiel den Text anzupassen, können Sie Entitäten anstelle von Zeichenketten zur Ausgabe dieser Texte verwenden. Da sich diese Entitäten in einer xfly.dtd Datei in einem Unterverzeichnis befinden, kann somit sehr einfach ein anderes Sprachpaket verwendet werden um die Sprache umzuschalten. Auch diese Datei kann sehr einfach gehalten werden. Beispiel 2-12 enthält den Code für die xfly.dtd Datei, die Sie erstellen und im locale Unterverzeichnis speichern sollten. Der Inhalt der xfly.dtd Datei <!ENTITY label.val "Hello, Welcome to the xFly " > <!ENTITY btn.lbl "hello xFly " > Die aktualisierte XUL Datei, die das externe DTD verwendet wird in Beispiel 2-13 ausgegeben. Wenn Sie die benötigten Änderungen an der XUL Datei vorgenommen haben, speichern Sie den Code aus Beispiel 2-13 als xfly.xul im chrome/xfly/content/ Verzeichnis. XUL mit einem externen DTD <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <?xml-stylesheet href="chrome://xfly/skin" type="text/css"?> <!DOCTYPE window SYSTEM "chrome://xfly/locale/xfly.dtd" > <window title="Hello xFly" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="215" onload="centerWindowOnScreen( )"> <script type="application/x-javascript" src="chrome://global/content/dialogOverlay.js" /> <script type="application/x-javascript" src="chrome://xfly/content/xfly.js" /> <vbox align="left" id="vb"> <label id="xlabel" value="&label.val;" /> <image src="http://books.mozdev.org/xfly.gif" /> <button label="&btn.lbl;" oncommand="greet( );" /> </vbox> </window> Wie bei CSS und Scripts ein 'import'-Statement, weist die aktualisierte DOCTYPE Definition am Anfang der Datei, Mozilla an, zusätzliche Entitäten als Teil des xFly Pakets zu laden. Diese Entitäten -- englische Zeichenketten die in der Benutzerschnittstelle ausgegeben werden -- können also ohne die Applikationsstruktur zu beinflussen lokalisiert und internationalisiert werden. Alle drei 'import'-Statements verwenden die chrome:// URL um xFly interne Ressourcen zu referenzieren. Dieser URL Type kann auch verwendet werden, um auf andere Ressourcen wie Bilder, bereits definierte Zeichenketten und Skript Funktionen wie centerWindowOnScreen( ) innerhalb von Mozilla zuzugreifen. Wenn Sie fertig sind das Paket Verzeichnis aufzusetzen, sollten Sie eine Struktur wie die in Beispiel 2-14 haben: Die Struktur des xFly Pakets chrome/ xfly/ content/ xfly.xul xfly.js contents.rdf locale/ en-US/ xfly.dtd contents.rdf skin/ xfly.css contents.rdf Ein Paket registrieren Pakete in Mozilla zu registrieren kann anfangs etwas verwirrend sein, deshalb sollten Sie sich keine Sorgen machen, wenn Sie an diesem Punkt nicht alles auf Anhieb verstehen. Spätere Kapitel gehen genauer auf Verpackung und Registrierung ein, und Sie können jederzeit die Beispiel aus diesem Buch verwenden um Ihre eigene Applikation zu installieren. Generell benötigt Mozilla Manifeste eines Paketes um diese zu registrieren. Obwohl die Registration normalerweise Teil der Installation ist und mit dem XPInstall API vorgenommen wird, brauchen Sie einen schnellen Weg um Pakete zu installieren damit Sie die xFly Applikation testen können. Deshalb werden wir einfach die Datei installed-chrome.txt in Mozillas chrome Verzeichnis direkt anpassen. Die Datei installed-chrome.txt enthält eine Liste aller Pakete die von Mozilla beim aufstarten registriert werden sollen. Wenn Sie dieser Datei Einträge hinzufügen weisen Sie Mozilla an, dieses Paket beim Aufstarten zu laden. Hängen Sie die Einträge von Beispiel 2-15 am Ende der installed-chrome.txt Datei im chrome Verzeichnis an. Zusätzliche Einträge für installed-chrome.txt content,install,url,resource:/chrome/xfly/content/ skin,install,url,resource:/chrome/xfly/skin/ locale,install,url,resource:/chrome/xfly/locale/en-US/ Wenn Mozilla aufstartet sucht er die Paket-Manifeste, liest sie und registriert das xFly Paket. Wenn andere Benutzer Ihre Applikation installieren möchten ohne dabei installed-chrome.txt anzupassen, können Sie eine JavaScript Installations-Datei erstellen, die das Paket herunterlädt und registriert. Konsultieren Sie Kapitel 6 für zusätzliche Informationen über diesen Vorgang und die Verwendung von XPInstall.
Die Applikation starten Wenn Ihr Paket registriert ist, können Sie folgende Optionen verwenden um sie zu starten. Windows start Wechseln Sie in das Mozilla Installations-Verzeichnis und starten Sie xFly über die Kommandozeile: mozilla -chrome chrome://xfly/content/ Sie können die xFly Applikation auch anhand eines Shortcuts auf Ihrem Desktop starten indem Sie den Icon mit der rechten Maustaste anklicken und 'Eigenschaften' auswählen. Fügen Sie folgenden Text in das 'Ziel' Feld ein: -chrome chrome://xfly/content/ Abbildung 2-6 zeigt den neuen 'Eigenschaften'-Dialog nach der Änderung.
Geänderte Shortcut Eigenschaften
Unix start Wechseln Sie in das Mozilla Installations-Verzeichnis von Mozilla, und starten Sie xFly mit: ./mozilla -chrome chrome://xfly/content/ Macintosh start Starten Sie xFly indem Sie auf dem Desktop eine neue Datei mit folgendem Inhalt erstellen: -chrome chrome://xfly/content/ Um die Applikation zu starten können Sie entweder die Textdatei über das Mozilla Icon ziehen, oder den CreatorType der Datei auf MOZZ setzen. Wenn Sie den CreatorType ändern, sollte es möglich sein die Applikation mit Doppelklick zu starten. Sobald Sie die Applikation registriert haben, steht es Ihnen frei, Ihre Applikation so weiterzuentwickeln, wie Sie es für richtig halten. Legen Sie die neuen Komponenten in die entsprechenden Verzeichnisse und starten Sie die Applikation neu. Sie können im content Verzeichnis zum Beispiel neue XUL Dateien ablegen, die danach mit der Funktion window.openDialog( ) geöffnet werden. Sie können xfly.xul auch neue Widgets hinzufügen, neue Styles für xfly.css definieren, neue Funktionen für xfly.js schreiben oder existierende Funktionen von Mozillas SourceCode verwenden. Wenn Sie Probleme haben die xFly Applikation zu ändern und neu zu starten, gibt es ein paar plattformspezifische Dinge die beachtet werden sollten. Wenn Sie auf Windows das QuickLaunch Feature verwenden, kann dies dazu führen, dass Änderungen nicht übernommen werden. Wenn auf UNIX die Dateirechte nicht korrekt gesetzt sind, kann die ebenfalls zu Problemen führen. Stellen Sie also sicher, dass QuickLaunch ausgeschaltet ist und überprüfen Sie die Dateirechte um mögliche Probleme mit xFly zu lösen. Die Schritte, die in diesem Kapitel erklärt wurden -- erstellen einer XUL Datei, neue Features hinzufügen, die Applikation standalone anzeigen, aufteilen des Codes in separate Dateien und die Paket-Struktur und das Registrieren und Starten des Pakets -- sind die wichtigsten Teile einer Mozilla Applikation. Wenn Sie diese Teile verstehen, werden Sie die weiteren Kapitel in diesem Buch einfacher nachvollziehen können.