File:  [mozdev] / books / www / docbook / de / ch02.xml
Revision 1.1: download - view: text, annotated - select for diffs - revision graph
Mon Nov 24 21:20:47 2003 UTC (16 years ago) by halter
Branches: MAIN
CVS tags: HEAD
- initial upload of german docs up to chapter 3

    1: <chapter label="2" id="mozilla-CHP-2">
    2: 
    3: <title>Erste Schritte</title>
    4: 
    5: <para>
    6: Um Ihnen einen m&ouml;glichst schnellen Einstieg in das Thema zu erm&ouml;glichen,
    7: pr&auml;sentiert dieses Kapitel zwei 'Hello World' Beispiele, die demonstrieren
    8: wie man die Entwicklung einer neue Applikation beginnt.
    9: </para>
   10: 
   11: <para>
   12: Das erste Beispiel ist eine einfache XUL Datei die im Browser Fenster geladen
   13: wird. Dieses Beispiel wird danach durch Stylesheets
   14: und JavaScript Funktionen erweitert. Das zweite Beispiel geht darauf
   15: ein, wie man die Applikations-Dateien in einem Paket zusammenfasst, das die modularen,
   16: geb&uuml;ndelten Sets der Dateien enth&auml;lt, die zusammen die Mozilla Applikation oder
   17: die neuen Module, f&uuml;r den Mozilla Browser ausmachen.
   18: </para>
   19: 
   20: <para>
   21: Diese Beispiele geben einen Kontext um die Applikationsentwicklung mit Mozilla
   22: zu diskutieren. Das erste Beispiel fokussiert vor allem auf das erstellen und
   23: editieren der Basisdateien, das zweite vor allem auf die Organisation und Verteilung
   24: der Applikation auf der Mozilla Platform.
   25: </para>
   26: 
   27: <sect1 role="" id="mozilla-CHP-2-SECT-1" label="2.1">
   28: <title>Ein einfaches Beispiel in XUL</title>
   29: 
   30: <para>
   31: Wie alle guten 'Hello World' Applikationen, zeigt das <link linkend="mozilla-CHP-2-EX-1">Beispiel 2-1</link>
   32: eine der einfachsten Anwendugen von XUL. Obwohl es sehr klein ist, demonstriert das Beispiel einige wichtige Aspekte
   33: der XUL Programmierung, inklusive der Verwendung von Event-Handlern um der Applikation Interaktionsm&ouml;glichkeiten
   34: hinzuzuf&uuml;gen und der Verwendung einer <literal>box</literal> um die Elemente korrekt im Fenster auszurichten.
   35: Dieses Beispiel dient auch dazu, einen Kontext f&uuml;r andere, generellere Features der Sprache, wie dem Dateiformat,
   36: die Namespace und ein paar Programmierregeln, zu schaffen.
   37: </para>
   38: 
   39: <example id="mozilla-CHP-2-EX-1" label="2-1">
   40: <title>Hallo xFly </title>
   41: <programlisting>&lt;?xml version="1.0"?&gt;
   42: &lt;!-- Beispiel XUL Datei --&gt;
   43: &lt;window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
   44: &lt;box align="center"&gt;
   45:   &lt;button label="hello xFly" onclick="alert('Hello World');" /&gt;
   46: &lt;/box&gt;
   47: &lt;/window&gt;</programlisting>
   48: </example>
   49: 
   50: <para>
   51: Verwenden Sie einen Texteditor um den Code aus <link linkend="mozilla-CHP-2-EX-1">Beispiel 2-1</link>
   52: in einer Datei namens <filename>hello.xul</filename> abzuspeichern, und laden Sie es in Mozilla
   53: (via Datei &gt; Datei &ouml;ffnen, danach die Datei aus dem Dateisystem ausw&auml;hlen).
   54: Sie sollten danach in der oberen linken Ecke des Browser-Fensters einen Button sehen, der, bei Bet&auml;tigung
   55: ein kleines Warnfenster &ouml;ffnet. <link linkend="mozilla-CHP-2-FIG-1">Abbildung 2-1</link> zeigt ein
   56: Beispiel des Warnfensters das angezeigt werden sollte.
   57: </para>
   58: 
   59: <figure id="mozilla-CHP-2-FIG-1" label="2-1">
   60: <title>Das erste 'Hello World' Beispiel</title>
   61: <graphic fileref="figs/moz_0201.png"/></figure>
   62: 
   63: <para>
   64: Die n&auml;chsten Abschnitte beschreiben die Beispieldatei etwas genauer. Die
   65: Themen umfassen die Datei selbst, die Syntax der Markupsprache, XUL Namespaces
   66: und das Basislayout einer XUL Datei.
   67: </para>
   68: 
   69: <sidebar id="mozilla-CHP-2-SIDEBAR-1">
   70: <title>Die xFly Beispiele</title>
   71: 
   72: <para>
   73: Der beste Weg die m&ouml;glichen Anwendungsgebiete des Mozilla Frameworks zu verstehen,
   74: ist, einige existierende Applikationen etwas genauer zu betrachten. Dieses Buch
   75: zeigt einige Mozilla Projekte, wie ChatZilla und JSLib als Beispiele von Leuten
   76: die bereits begonnen haben Mozilla's XPFE Technologien zu nutzen.
   77: </para>
   78: 
   79: <para>
   80: Nebst diesen Applikationen werden Sie den Namen 'xFly' in vielen Beispielen
   81: in diesem Kapitel und durch das ganze Buch finden. Die xFly Beispiele werden von
   82: <link linkend="mozilla-CHP-2">Kapitel 2</link> bis <link linkend="mozilla-CHP-6">Kapitel 6</link>
   83: verwendet um Ihnen zu zeigen wie eine einfache Mozilla Applikation erstellt und verpackt wird.
   84: Eine installierbare Version der gesamten xFly Applikation kann unter <systemitem role="url">http://xfly.mozdev.org</systemitem>
   85: bezogen werden.
   86: </para>
   87: 
   88: <para>
   89: Diese einfache Applikation ist hilfreich, da sie Ihnen einen Platz bietet um die
   90: neuen Informationen die Sie in diesem Buch lernen zu erforschen. W&auml;hrend Sie
   91: mehr &uuml;ber XUL, CSS, JavaScript und die anderen Teile von Mozilla's Entwicklungsumgebung
   92: lernen, k&ouml;nnen Sie die xFly Dateien anpassen um zu sehen, wie sich die Technologie
   93: in der Praxis verh&auml;lt.
   94: </para>
   95: </sidebar>
   96: 
   97: </sect1>
   98: 
   99: <sect1 role="" id="mozilla-CHP-2-SECT-2" label="2.2">
  100: <title>XUL Basiskonzept</title>
  101: 
  102: <para>
  103: Sie haben bereits verschiedene XUL Features im Einsatz gesehen. Wenn Sie
  104: das Beispiel aus dem vorhergehenden Paragraph in Ihrem Browser &ouml;ffnen,
  105: identifiziert dieser die Datei als XUL, parsed die Daten, &ouml;ffnet ein neues
  106: Fenster und zeichnet das Button Widget darauf. Weiter f&uuml;hrt er die von Ihnen definierte
  107: Funktion aus, sobald der Button angeklickt wird.
  108: </para>
  109: 
  110: <para>
  111: Diese Aktivit&auml;ten sind Teil der Interaktionen zwischen Ihren Applikationsdateien
  112: und Mozilla. Dazu werden jedoch gewisse Grundvoraussetzungen wie das
  113: Format der XUL Dateien, deren Syntax oder Namespace, das XUL Layout und
  114: das Windowing-System ben&ouml;tigt.
  115: </para>
  116: 
  117: <sect2 role="" id="mozilla-CHP-2-SECT-2.1" label="2.2.1">
  118: <title>Das XUL Dateiformat</title>
  119: 
  120: <para>
  121: Eine XUL Datei ist eine normale Textdatei welche saubere XML Syntax und eine <filename>.xul</filename> Endung aufweist.
  122: Mozilla erwartet, dass Userinterface Widgets gezeichnet werden sollen wenn eine Datei mit der
  123: Endung <filename>.xul</filename> geladen wird oder wenn in einer Datei die XUL Namespace gefunden wird. Dies
  124: gilt ebenfalls f&uuml;r XML und HTML Dateien.
  125: </para>
  126: 
  127: <para>
  128: Der Mime Typ der f&uuml;r XUL Dateien verwendet wird, ist <filename>application/vnd.mozilla.xul+xml</filename>.
  129: Wenn Sie XUL Dateien lokal editieren, sollten Sie sich um diese Einstellungen keine Gedanken machen
  130: m&uuml;ssen. Wenn Sie XUL Dateien jedoch auf einem Webserver anbieten wollen, ben&ouml;tigen Sie diesen Mime Typ.
  131: Weitere Informationen wie Sie den korrekten Mime Type in Ihrem System konfigurieren k&ouml;nnen, finden Sie
  132: in <link linkend="mozilla-CHP-12">Kapitel 12</link>.
  133: </para>
  134: 
  135: </sect2>
  136: <sect2 role="" id="mozilla-CHP-2-SECT-2.2" label="2.2.2">
  137: <title>Richtlinien</title>
  138: 
  139: <para>
  140: XUL muss ein paar grunds&auml;tzliche Richtlinien einhalten (wie XHTML, oder jede andere XML
  141: basierte Datei) um g&uuml;ltig zu sein. Mozilla generiert eine Fehlermeldung wenn eine ung&uuml;ltige XUL Datei
  142: geladen werden soll.
  143: </para>
  144: 
  145: <para>Als erstes wird eine g&uuml;ltige XML Deklaration erwartet.</para>
  146: 
  147: <programlisting>&lt;?xml version="1.0"?&gt;</programlisting>
  148: 
  149: <para>
  150: Alle Kommentare die Sie verwenden um die XML Datei zu dokumentieren, k&ouml;nnen nach der Deklaration
  151: verwendet werden. Kommentare in XUL folgen dem gleichen Standard wie die von HTML und XML und werden von
  152: <literal>&lt;!--</literal> und <literal>--&gt;</literal> umschlossen.
  153: </para>
  154: 
  155: <para>
  156: Alle Tags m&uuml;ssen abgeschlossen werden. Leere Tags wie <literal>&lt;label&gt;</literal>
  157: m&uuml;ssen mit einem schliessenden Slash versehen werden.
  158: </para>
  159: 
  160: <programlisting>&lt;label value="Getting Started" /&gt;</programlisting>
  161: 
  162: <para>
  163: Ein weiterer, wichtiger Punkt an den Sie sich erinnern sollten ist die Gross-/Kleinschreibung. Wie bei allen
  164: XML basierten Sprachen ist ein <literal>&lt;window&gt;</literal> Tag nicht das gleiche wie <literal>&lt;Window&gt;</literal>.
  165: Sie k&ouml;nnen dahier ein <literal>&lt;window&gt;</literal> Tag nicht durch ein <literal>&lt;/Window&gt;</literal>
  166: Tag schliessen.
  167: </para>
  168: 
  169: <para>
  170: Diese Richtlinien gew&auml;hrleisten, dass die Render-Engine die XUL Datei erfolgreich verarbeiten kann
  171: und die definierten Elemente darstellt. Mozilla validiert keine XML (oder auch XUL) Dateien
  172: und verarbeitet auch keine extern deklarierten Entit&auml;ten, &uuml;berpr&uuml;ft jedoch die G&uuml;ltigkeit der XML Struktur.
  173: </para>
  174: 
  175: <para>
  176: Der XML Spezifikation folgend, werden Tags die nicht erkannt werden ignoriert.
  177: Dies kann Ihrer Applikation zu einer erh&ouml;hten Flexibilit&auml;t verhelfen, vor allem wenn Sie
  178: beginnen Technologien wie XBL einzusetzen. Nat&uuml;rlich kann dies auch den Debugging Prozess
  179: erschweren, zum Beispiel wenn Sie ein Element <literal>&lt;botton&gt;</literal> nennen
  180: und danach nicht erkennen, wieso der XUL button keine der typischen Eigenschaften eines Knopfes
  181: aufweist.
  182: </para>
  183: 
  184: <para>
  185: Es hat sich als hilfreich erwiesen innerhalb von XUL Dateien Kommentare, ausgiebig Leerzeichen
  186: und Einr&uuml;ckungen (nicht via Tabulator) und bekannte XUL Widgets zu verwenden.
  187: </para>
  188: 
  189: </sect2>
  190: <sect2 role="" id="mozilla-CHP-2-SECT-2.3" label="2.2.3">
  191: <title>Die XUL Namespace</title>
  192: 
  193: <para>
  194: Wie andere Markup Sprachen verwendet XUL eine Namespace Deklaration um auszuzeichnen welche Elemente
  195: in einem Dokument als g&uuml;ltig angesehen werden sollen. <link linkend="mozilla-CHP-2-EX-2">Beispiel 2-2</link> zeigt
  196: die verwendete Namespace Deklaration. Die Namespace ist ein Attribut des <literal>window</literal>
  197: Elements. Da kein Suffix angegeben wurde (bsp: <literal>xmlns:xul</literal>), wird XUL als Standard Namespace
  198: f&uuml;r das folgende Dokument verwendet.
  199: </para>
  200: 
  201: <example id="mozilla-CHP-2-EX-2" label="2-2">
  202: <title>Die XUL Namespace Deklaration</title>
  203: <programlisting>&lt;window
  204:   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
  205:     &lt;description&gt;Illustrating the XUL namespace&lt;/description&gt;
  206:     &lt;/window&gt;</programlisting>
  207: </example>
  208: 
  209: <para>
  210: Wenn Sie XUL Inhalte in anderen Markup-Dokumenten verwenden wollen, m&uuml;ssen Sie mehr als
  211: eine Namespace deklarieren. &Uuml;blicherweise werden Namespaces wie HTML und RDF deklariert
  212: um weitere Elemente verwenden zu k&ouml;nnen, aber Sie k&ouml;nnen auch Ihre eigene erfinden. Wenn
  213: Sie den Button aus <link linkend="mozilla-CHP-2-EX-1">Beispiel 2-1</link> in einer normalen
  214: XML Datei haben m&ouml;chten, k&ouml;nnen Sie dies tun, indem Sie das <literal>xmlns:xul</literal> Attribut
  215: wie in <link linkend="mozilla-CHP-2-EX-3">Beispiel 2-3</link> verwenden.
  216: </para>
  217: 
  218: <example id="mozilla-CHP-2-EX-3" label="2-3">
  219: <title>Verschiedene Namespaces in einem XML Dokument</title>
  220: <programlisting>&lt;flies:flies 
  221:   xmlns:flies="http://www.flies.com/come.fly.with.me.xml#" 
  222:   xmlns:html="http://www.w3.org/1999/xhtml"
  223:   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
  224:   &lt;flies:wings&gt;
  225:     &lt;xul:box align="center"&gt;
  226:       &lt;xul:button label="hello xFly" onclick="alert('hello.');" /&gt;
  227:     &lt;/xul:box&gt;
  228:     &lt;html:img src="wings.jpg" /&gt;
  229:   &lt;/flies:wings&gt;
  230: &lt;/flies:flies&gt;</programlisting>
  231: </example>
  232: 
  233: <para>
  234: Diese Datei hat drei verschiedene Arten von Inhalt: XUL, HTML und eine angepasste Markupsprache
  235: namens <literal>flies</literal>. Wenn Sie gemischte Namespaces verwenden, m&uuml;ssen Sie den XUL Elementen
  236: <literal>xul:</literal> voranstellen, um sie von anderen Markup Elementen zu unterscheiden. Ein Beispiel
  237: sehen Sie anhand von <literal>xul:box</literal> und <literal>xul:button</literal> im <link linkend="mozilla-CHP-2-EX-3">Beispiel 2-3</link>.
  238: </para>
  239: 
  240: </sect2>
  241: <sect2 role="" id="mozilla-CHP-2-SECT-2.4" label="2.2.4">
  242: <title>Basis XUL Layout</title>
  243: 
  244: <para>
  245: <link linkend="mozilla-CHP-2-EX-1">Beispiel 2-1</link> zeigt ein paar oft verwendete XUL Elemente.
  246: In diesem Abschnitt nehmen wir jedes Element auseinander, um zu sehen was es bewirkt und welche
  247: Interaktionen es mit anderen Elementen aufweist. Das <literal>&lt;window&gt;</literal> Element
  248: ist die Wurzel eigenst&auml;ndiger, prim&auml;rer XUL Dokumente (im Gegensatz zu Popups welche <literal>&lt;dialog&gt;</literal>
  249: und Subdokumenten welche <literal>&lt;page&gt;</literal> verwenden).
  250: </para>
  251: 
  252: <para>
  253: Wie in HTML definiert das Root-Element das Dokument, in das alle anderen
  254: Elemente gezeichnet werden sollen, wobei das Dokument bei XUL ein Teil einer Applikationsschnittstelle
  255: und nicht einer Webseite ist. Wir werden die weiteren Eigenschaften von 'window' sp&auml;ter noch genauer
  256: anschauen.
  257: </para>
  258: 
  259: <para>
  260: <link linkend="mozilla-CHP-2-EX-1">Beispiel 2-1</link> zeigt ein <literal>&lt;box&gt;</literal> Element,
  261: das ein <literal>&lt;button&gt;</literal> Element enth&auml;lt. Obwohl man Attribute des Window Elements
  262: verwenden kann um das Layout zu definieren, ist es eine gute idee <literal>&lt;box&gt;</literal> als Container
  263: zu verwenden. Dies ist vor allem sinnvoll wenn Sie neue Layout Elemente wie Button-Reihen, Grids, Tabs oder andere
  264: Elemente die genau angeordnet werden m&uuml;ssen verwenden. <literal>box</literal> ist das Basiselement um Layouts
  265: in XUL zu erstellen.
  266: </para>
  267: 
  268: <para>
  269: Das <literal>align</literal> Attribut des Box Elements definiert, dass Kind-Elemente nicht
  270: gestreckt oder zentriert werden sollen. Wenn die Box nicht verwendet wird und mehr als ein
  271: Kind-Element des Grundfensters existieren, w&uuml;rden sie normalerweise vertikal aliniert
  272: angezeigt. Diese Einstellung kann mit dem <literal>orient</literal> Attribut von <literal>&lt;window&gt;</literal>
  273: &uuml;berschrieben werden indem es als 'horizontal' definiert wird.
  274: </para>
  275: 
  276: </sect2>
  277: <sect2 role="" id="mozilla-CHP-2-SECT-2.5" label="2.2.5">
  278: <title>XUL Fenster verwenden</title>
  279: 
  280: <para>
  281: Die Basis jeder XPFE Applikation ist ein XUL Fenster. Jedes XUL Dokument muss mindestens ein (1)
  282: <literal>&lt;window&gt;</literal> Element enthalten, welches an der Wurzel des Dokuments sein muss
  283: und alle anderen XML Elemente umschliesst (nebst der XML Deklaration und den Verarbeitungspr&auml;ambeln).
  284: Ein einfaches Fenster ohne Inhalte sieht wie folgt aus:
  285: </para>
  286: 
  287: <programlisting>&lt;?xml version="1.0"?&gt;
  288: &lt;!DOCTYPE window&gt;
  289: &lt;window 
  290:     xmlns:html="http://www.w3.org/1999/xhtml"
  291:     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
  292: &lt;/window&gt;</programlisting>
  293: 
  294: <para>
  295: &Uuml;blicherweise hat eine Applikation mehrere Fenster, Dialoge und
  296: Sekund&auml;rfenster. Jedes Fenster ist ebenfalls durch ein <literal>&lt;window&gt;</literal>
  297: Element ausgezeichnet (obwohl seit kurzem auch die Elemente <literal>dialog</literal>
  298: und <literal>page</literal> als Root Elemente einer XUL Datei unterst&uuml;tzt werden.
  299: </para>
  300: 
  301: <para>
  302: Mit dem Wachstum Ihrer Applikation ben&ouml;tigen Sie Mittel, die Fenster zu verfolgen und ihre Kommunikation
  303: sicherzustellen. In Mozilla kann dies mit der <indexterm id="IXT-2-379"><primary>toOpenWindowByType( ) Funktion</primary></indexterm>
  304: erreicht werden indem Sie Fenster eines bestimmten Typs damit &ouml;ffnen.
  305: </para>
  306: 
  307: 
  308: <tip id="ch02-4-fm2xml" role="ora">
  309: <para>
  310: Wie alle anderen Funktionen die in diesem Buch erw&auml;hnt werden, k&ouml;nnen Sie
  311: <literal>toOpenWindowByType</literal> mit LXR nachschlagen.
  312: Der Web basierte Sourcecode Viewer wird in <link linkend="mozilla-APP-A">Anhang A</link>
  313: n&auml;her beschrieben und ist unter <systemitem role="url">http://lxr.mozilla.org/</systemitem>
  314: verf&uuml;gbar.
  315: </para>
  316: </tip>
  317: 
  318: <sect3 role="" id="mozilla-CHP-2-SECT-2.5.1" label="2.2.5.1">
  319: <title>window Features</title>
  320: 
  321: <para>
  322: Jedes <literal>&lt;window&gt;</literal> Element verf&uuml;gt &uuml;ber ein <literal>id</literal>
  323: Attribut. Dieses Attribut muss nicht angegeben werden, erleichtert jedoch das
  324: auffinden einzelner Fenster/Nodes aus dem Skript (siehe die DOM Methoden
  325: <literal>getElementByID</literal> in <link linkend="mozilla-CHP-5">Kapitel 5</link>
  326: um mehr dar&uuml;ber zu erfahren wie Elemente anhand ihres Identifiers ausgew&auml;hlt
  327: werden k&ouml;nnen.) Das ID Attribut wird wie folgt verwendet:
  328: </para>
  329: 
  330: <programlisting>&lt;window 
  331:     xmlns:html="http://www.w3.org/1999/xhtml"
  332:     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  333:     id="xflyMain"&gt;</programlisting>
  334: 
  335: <para>
  336: Eventhandler wie <literal>onload</literal> und <literal>onunload</literal> sind
  337: n&uuml;tzlich wenn Sie die Inhalte eines Fensters &auml;ndern wollen, oder die Eingabe auf
  338: ein bestimmtes Fenster umleiten m&ouml;chten:
  339: </para>
  340: 
  341: <programlisting>&lt;window 
  342:     xmlns:html="http://www.w3.org/1999/xhtml"
  343:     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  344:     id="xfly-main"
  345:     onload="startUp( )"
  346:     onunload="shutdown( )"
  347:     onclose="onClose( )"&gt;</programlisting>
  348: 
  349: <para>
  350: Wenn Sie eine XUL Datei laden, die wie das obige Beispiel beginnt, f&uuml;hren
  351: die Eventhandler Attribute <literal>onload</literal> und <literal>onunload</literal>
  352: deren Werte (<literal>startUp( )</literal> und <literal>shutdown( )</literal>) aus.
  353: Zus&auml;tzlich bietet Mozilla einen <literal>onclose</literal> Eventhandler
  354: welcher vor dem schliessen des Fensters aufgrufen wird, damit letzte Verarbeitungsschritte
  355: ausgef&uuml;hrt werden k&ouml;nnen. Das 'close' Event wird vor dem <literal>unload</literal>
  356: Event ausgef&uuml;hrt, womit Sie das Fenster &uuml;ber <literal>onclose</literal> am schliessen hindern k&ouml;nnten.
  357: Um das Schliessen des Fensters zu verhindern muss das 'close' Event als R&uuml;ckgabewert <filename>false</filename>
  358: liefern.
  359: </para>
  360: 
  361: <para>
  362: Dialogfenster enthalten weitere Eventhandlers die unter <link linkend="mozilla-CHP-3-SECT-2">Abschnitt 3.2</link> in
  363: <link linkend="mozilla-CHP-3">Kapitel 3</link> erkl&auml;rt werden.
  364: </para>
  365: 
  366: </sect3>
  367: 
  368: <sect3 role="" id="mozilla-CHP-2-SECT-2.5.2" label="2.2.5.2">
  369: <title>window Eigenschaften</title>
  370: 
  371: <para>
  372: Die window Implementierung wird st&auml;ndig erweitert und l&auml;sst Raum f&uuml;r unz&auml;hlige neue Features.
  373: Nebst den <emphasis>Attributen</emphasis> -- den Eventhandlern, der ID und der Namespace
  374: die innerhalb eines <literal>&lt;window&gt;</literal> Tags vorkommen -- hat ein XUL Window
  375: die gleichen DOM Eigenschaften wie ein HTML <literal>window</literal> Objekt. Diese Eigenschaften
  376: werden unten aufgelistet, zusammen mit zus&auml;tzlichen Eigeschaften f&uuml;r applikationsspezifische Arbeiten.
  377: </para>
  378: 
  379: <informaltable id="ch02-5-fm2xml">
  380: <tgroup cols="4">
  381: <colspec colnum="1" colname="col1"/>
  382: <colspec colnum="2" colname="col2"/>
  383: <colspec colnum="3" colname="col3"/>
  384: <colspec colnum="4" colname="col4"/>
  385: <thead>
  386: <row>
  387: <entry>
  388: <programlisting>Navigator</programlisting>
  389: </entry>
  390: <entry>
  391: <programlisting>Document</programlisting>
  392: </entry>
  393: <entry>
  394: <programlisting>window</programlisting>
  395: </entry>
  396: <entry>
  397: <programlisting>Parent</programlisting>
  398: </entry>
  399: </row>
  400: </thead>
  401: <tbody>
  402: <row>
  403: <entry>
  404: <programlisting>Top</programlisting>
  405: </entry>
  406: <entry>
  407: <programlisting>Scrollbars</programlisting>
  408: </entry>
  409: <entry>
  410: <programlisting>name</programlisting>
  411: </entry>
  412: <entry>
  413: <programlisting>ScrollX</programlisting>
  414: </entry>
  415: </row>
  416: <row>
  417: <entry>
  418: <programlisting>ScrollY</programlisting>
  419: </entry>
  420: <entry>
  421: <programlisting>ScrollTo</programlisting>
  422: </entry>
  423: <entry>
  424: <programlisting>scrollBy</programlisting>
  425: </entry>
  426: <entry>
  427: <programlisting>GetSelection</programlisting>
  428: </entry>
  429: </row>
  430: <row>
  431: <entry>
  432: <programlisting>ScrollByLines</programlisting>
  433: </entry>
  434: <entry>
  435: <programlisting>ScrollByPages</programlisting>
  436: </entry>
  437: <entry>
  438: <programlisting>Size
  439: ToContent</programlisting>
  440: </entry>
  441: <entry>
  442: <programlisting>Dump</programlisting>
  443: </entry>
  444: </row>
  445: <row>
  446: <entry>
  447: <programlisting>SetTimeout</programlisting>
  448: </entry>
  449: <entry>
  450: <programlisting>SetInterval</programlisting>
  451: </entry>
  452: <entry>
  453: <programlisting>Clear
  454: Timeout</programlisting>
  455: </entry>
  456: <entry>
  457: <programlisting>ClearInterval</programlisting>
  458: </entry>
  459: </row>
  460: <row>
  461: <entry>
  462: <programlisting>SetResizable</programlisting>
  463: </entry>
  464: <entry>
  465: <programlisting>CaptureEvents</programlisting>
  466: </entry>
  467: <entry>
  468: <programlisting>Release
  469: Events</programlisting>
  470: </entry>
  471: <entry>
  472: <programlisting>RouteEvent</programlisting>
  473: </entry>
  474: </row>
  475: <row>
  476: <entry>
  477: <programlisting>Enable
  478: External
  479: Capture</programlisting>
  480: </entry>
  481: <entry>
  482: <programlisting>DisableExternal
  483: Capture</programlisting>
  484: </entry>
  485: <entry>
  486: <programlisting>prompt</programlisting>
  487: </entry>
  488: <entry>
  489: <programlisting>Open</programlisting>
  490: </entry>
  491: </row>
  492: <row>
  493: <entry>
  494: <programlisting>OpenDialog</programlisting>
  495: </entry>
  496: <entry>
  497: <programlisting>Frames</programlisting>
  498: </entry>
  499: <entry>
  500: <programlisting>find</programlisting>
  501: </entry>
  502: <entry>
  503: <programlisting>self</programlisting>
  504: </entry>
  505: </row>
  506: <row>
  507: <entry>
  508: <programlisting>Screen</programlisting>
  509: </entry>
  510: <entry>
  511: <programlisting>History</programlisting>
  512: </entry>
  513: <entry>
  514: <programlisting>content</programlisting>
  515: </entry>
  516: <entry>
  517: <programlisting>Sidebar</programlisting>
  518: </entry>
  519: </row>
  520: <row>
  521: <entry>
  522: <programlisting>Menubar</programlisting>
  523: </entry>
  524: <entry>
  525: <programlisting>Toolbar</programlisting>
  526: </entry>
  527: <entry>
  528: <programlisting>Locationbar</programlisting>
  529: </entry>
  530: <entry>
  531: <programlisting>Personalbar</programlisting>
  532: </entry>
  533: </row>
  534: <row>
  535: <entry>
  536: <programlisting>Statusbar</programlisting>
  537: </entry>
  538: <entry>
  539: <programlisting>Directories</programlisting>
  540: </entry>
  541: <entry>
  542: <programlisting>closed</programlisting>
  543: </entry>
  544: <entry>
  545: <programlisting>Crypto</programlisting>
  546: </entry>
  547: </row>
  548: <row>
  549: <entry>
  550: <programlisting>pkcs11</programlisting>
  551: </entry>
  552: <entry>
  553: <programlisting>Controllers</programlisting>
  554: </entry>
  555: <entry>
  556: <programlisting>opener</programlisting>
  557: </entry>
  558: <entry>
  559: <programlisting>Status</programlisting>
  560: </entry>
  561: </row>
  562: <row>
  563: <entry>
  564: <programlisting>defaultStatus</programlisting>
  565: </entry>
  566: <entry>
  567: <programlisting>Location</programlisting>
  568: </entry>
  569: <entry>
  570: <programlisting>innerWidth</programlisting>
  571: </entry>
  572: <entry>
  573: <programlisting>InnerHeight</programlisting>
  574: </entry>
  575: </row>
  576: <row>
  577: <entry>
  578: <programlisting>outerWidth</programlisting>
  579: </entry>
  580: <entry>
  581: <programlisting>OuterHeight</programlisting>
  582: </entry>
  583: <entry>
  584: <programlisting>screenX</programlisting>
  585: </entry>
  586: <entry>
  587: <programlisting>ScreenY</programlisting>
  588: </entry>
  589: </row>
  590: <row>
  591: <entry>
  592: <programlisting>pageXOffset</programlisting>
  593: </entry>
  594: <entry>
  595: <programlisting>PageYOffset</programlisting>
  596: </entry>
  597: <entry>
  598: <programlisting>length</programlisting>
  599: </entry>
  600: <entry>
  601: <programlisting>FullScreen</programlisting>
  602: </entry>
  603: </row>
  604: <row>
  605: <entry>
  606: <programlisting>alert</programlisting>
  607: </entry>
  608: <entry>
  609: <programlisting>Confirm</programlisting>
  610: </entry>
  611: <entry>
  612: <programlisting>focus</programlisting>
  613: </entry>
  614: <entry>
  615: <programlisting>Blur</programlisting>
  616: </entry>
  617: </row>
  618: <row>
  619: <entry>
  620: <programlisting>back</programlisting>
  621: </entry>
  622: <entry>
  623: <programlisting>Forward</programlisting>
  624: </entry>
  625: <entry>
  626: <programlisting>home</programlisting>
  627: </entry>
  628: <entry>
  629: <programlisting>Stop</programlisting>
  630: </entry>
  631: </row>
  632: <row>
  633: <entry>
  634: <programlisting>print</programlisting>
  635: </entry>
  636: <entry>
  637: <programlisting>MoveTo</programlisting>
  638: </entry>
  639: <entry>
  640: <programlisting>moveBy</programlisting>
  641: </entry>
  642: <entry>
  643: <programlisting>ResizeTo</programlisting>
  644: </entry>
  645: </row>
  646: <row>
  647: <entry>
  648: <programlisting>resizeBy</programlisting>
  649: </entry>
  650: <entry>
  651: <programlisting>Scroll</programlisting>
  652: </entry>
  653: <entry>
  654: <programlisting>close</programlisting>
  655: </entry>
  656: <entry>
  657: <programlisting>UpdateCommands</programlisting>
  658: </entry>
  659: </row>
  660: <row>
  661: <entry>
  662: <programlisting>escape</programlisting>
  663: </entry>
  664: <entry>
  665: <programlisting>Unescape</programlisting>
  666: </entry>
  667: <entry>
  668: <programlisting>atob</programlisting>
  669: </entry>
  670: <entry>
  671: <programlisting>Btoa</programlisting>
  672: </entry>
  673: </row>
  674: <row>
  675: <entry>
  676: <programlisting>AddEvent Listener</programlisting>
  677: </entry>
  678: <entry>
  679: <programlisting>RemoveEvent Listener</programlisting>
  680: </entry>
  681: <entry>
  682: <programlisting>Dispatch Event</programlisting>
  683: </entry>
  684: <entry>
  685: <programlisting>GetComputed Style</programlisting>
  686: </entry>
  687: </row>
  688: </tbody>
  689: </tgroup>
  690: </informaltable>
  691: 
  692: <para>Spezielle XUL-Fenster Eigenschaften:</para>
  693: 
  694: <variablelist>
  695: <varlistentry><term>window.content</term>
  696: <listitem>
  697: <para>
  698: Dieses Property kann verwendet werden um einfach auf den Inhalt des Fensters zuzugreifen, falls einer 
  699: existiert. Dies ist nur sinnvoll wenn eines der Content-Elemente verwendet wurde, namentlich:
  700: <literal>&lt;iframe&gt;</literal>,
  701: <literal>&lt;browser&gt;</literal> und
  702: <literal>&lt;editor&gt;</literal>.
  703: <link linkend="mozilla-CHP-3-SECT-8">Abschnitt 3.8</link> in <link linkend="mozilla-CHP-3">Kapitel 3</link>
  704: bietet zus&auml;tzliche Informationen zum Thema. Das <literal>content</literal>-Property bezieht sich nur auf ein
  705: explizit als 'primary area' deklariertes Frame
  706: </para>
  707: </listitem>
  708: </varlistentry>
  709: </variablelist>
  710: 
  711: <programlisting>&lt;browser type="content-primary" ...&gt;</programlisting>
  712: 
  713: <para>So k&ouml;nnen Sie den Inhalt manipulieren.</para>
  714: 
  715: <programlisting>window.content.focus( );</programlisting>
  716: 
  717: <variablelist>
  718: <varlistentry><term>window.sizeToContent( )</term>
  719: <listitem>
  720: <para>
  721: Diese Methode wird verwendet um die Fenstergr&ouml;sse an die tats&auml;chliche Gr&ouml;sse der Inhalte
  722: anzupassen. Dies wird bei der Entwicklung mit XUL vor allem f&uuml;r Dialoge verwendet. Sie
  723: sollten vorzugsweise diesen Ansatz verwenden, anstatt den Fenstern eine fixe Breite und H&ouml;he
  724: zu geben wenn die Inhalte Ihres Fensters &auml;ndern k&ouml;nnten (<literal>onload</literal> &Auml;nderungen,
  725: input eines anderen Fensters, ..). Der Colorpicker im Mozilla Editor verwendet diese Eigenschaft
  726: um sein Fenster an die angezeigte Farbpalette anzupassen:
  727: </para>
  728: </listitem>
  729: </varlistentry>
  730: </variablelist>
  731: 
  732: <programlisting>function ChangePalette(palette)
  733: {
  734:   gDialog.ColorPicker.setAttribute("palettename", palette);
  735:   window.sizeToContent( );
  736: }</programlisting>
  737: 
  738: </sect3>
  739: 
  740: <sect3 role="" id="mozilla-CHP-2-SECT-2.5.3" label="2.2.5.3">
  741: <title>Interaktion zwischen Fenstern</title>
  742: 
  743: <para>
  744: Die <literal>nsIWindowMediator</literal> XPCOM Komponente bietet einige M&ouml;glichkeiten um
  745: verschiedene Fenster interagieren zu lassen. Obwohl es ein bisschen zu fr&uuml;h ist, in diesem
  746: Hello World Beispiel auf Komponenten einzugehen, umfasst sie folgende Routinen:
  747: </para>
  748: 
  749: <itemizedlist><listitem>
  750: <para>R&uuml;ckgabe des zuletzt ge&ouml;ffneten Fensters eines bestimmten Typs</para>
  751: </listitem><listitem>
  752: <para>R&uuml;ckgabe der Anzahl Fenster</para>
  753: </listitem><listitem>
  754: <para>Un-/registrierung von Fenstern</para>
  755: </listitem><listitem>
  756: <para>Aktualisieren der Fenster-Timestamp</para>
  757: </listitem><listitem>
  758: <para>Aktualisieren des Fenster-Titels</para>
  759: </listitem><listitem>
  760: <para>Anpassen der Z-Order Position</para>
  761: </listitem></itemizedlist>
  762: <para>
  763: <link linkend="mozilla-CHP-8">Kapitel 8</link> bietet viele Details um XPCOM besser zu verstehen.
  764: </para>
  765: 
  766: </sect3>
  767: 
  768: <sect3 role="" id="mozilla-CHP-2-SECT-2.5.4" label="2.2.5.4">
  769: <title>Fenster Verhalten</title>
  770: 
  771: <para>
  772: Mozilla unterst&uuml;tzt die Javascript Standardfunktion <literal>window.open</literal>, die ihren
  773: Ursprung im Browser-Scripting hat und verwendet wird um Fenster zu &ouml;ffnen. Mozilla erweitert diese
  774: Funktion um ein Paar Features f&uuml;r die Applikationsentwicklung. Weiter wird <literal>window.openDialog</literal>
  775: zur Verf&uuml;gung gestellt, um Fenster in der XPFE Scripting Umgebung zu &ouml;ffnen. Heutzutags wird vor allem die zweite Funktion
  776: eingesetzt um XUL Fenster zu &ouml;ffnen, obwohl beide Funktionen austauschbar sind.
  777: </para>
  778: 
  779: <para>Die Verwendung von <literal>window.open</literal>:</para>
  780: 
  781: <programlisting>window.open (url, name, features);</programlisting>
  782: 
  783: <para><literal>window.openDialog</literal> erweitert diese Funktionalit&auml;t mit einer
  784: erweiterten Argumentliste, welche optional ist und eine unbegrenzte Anzahl von Argumenten
  785: enthalten kann:
  786: </para>
  787: 
  788: <programlisting>window.openDialog (url, type, features, argument1, argument2);</programlisting>
  789: 
  790: <para>Folgend eine Liste einiger Features eines XUL Windows welche mit <literal>window.openDialog</literal> ge&ouml;ffnet wurde:
  791: </para>
  792: 
  793: <variablelist>
  794: <varlistentry><term>close</term>
  795: <listitem>
  796: <para>Dieses Widget kann mit oder ohne Close-Widget erstellt werden.</para>
  797: </listitem>
  798: </varlistentry>
  799: 
  800: <varlistentry><term>chrome</term>
  801: <listitem>
  802: <para>
  803: Das neue Fenster muss im chrome-Kontext und nicht im Browser-Kontext verwendet werden. Es hat ein
  804: eigenes top-level Fenster. Das Fenster selbst wird mit der chrome-URL &uuml;bergeben und wird nicht
  805: im Browser-Fenster geladen.
  806: </para>
  807: </listitem>
  808: </varlistentry>
  809: 
  810: <varlistentry><term>dependent</term>
  811: <listitem>
  812: <para>
  813: Das neue Fenster geh&ouml;rt zum aufrufenden Fenster wenn das Betriebssystem dies unterst&uuml;tzt. Es befindet sich
  814: &uuml;ber dem parent-Fenster welches immernoch zug&auml;nglich ist. Beide Fenster werden zusammen minimiert.
  815: </para>
  816: </listitem>
  817: </varlistentry>
  818: 
  819: <varlistentry><term>modal</term>
  820: <listitem>
  821: <para>
  822: Das Fenster wird modal angezeigt. Die Kontrolle wird erst an das Parent-Fenster zur&uuml;ckgegeben
  823: wenn das Fenster geschlossen wurde.
  824: </para>
  825: </listitem>
  826: </varlistentry>
  827: 
  828: <varlistentry><term>titlebar</term>
  829: <listitem>
  830: <para>
  831: Das Fenster wird mit oder ohne Titelleiste erzeugt.
  832: </para>
  833: </listitem>
  834: </varlistentry>
  835: 
  836: <varlistentry><term>centerscreen</term>
  837: <listitem>
  838: <para>
  839: &Ouml;ffnet das Fenster zentriert auf dem Bildschirm.
  840: </para>
  841: </listitem>
  842: </varlistentry>
  843: </variablelist>
  844: 
  845: <para>
  846: Kommata umschliessen die Features in der Liste, und die gesamte Liste muss
  847: von Anf&uuml;hrungszeichen umschlossen sein. Das Skript welches das neue
  848: Fenster verwaltet, kann auf die Argumentliste zugreifen:
  849: </para>
  850: 
  851: <programlisting>window.openDialog("chrome://xfly/content/utils/prompt.xul",
  852:                   "xFly_prompt",
  853:                   "chrome,dialog,modal",
  854:                   message);</programlisting>
  855: 
  856: <para>
  857: Das Fenster, das in diesem Beispiel erstellt wurde, ist modal und verwendet
  858: eine Nachricht aus der Vairable <emphasis>message</emphasis>, die ihm &uuml;bergeben wurde.
  859: Normalerweise geht Mozilla davon aus, dass <literal>chrome</literal> verwendet
  860: werden soll, wenn Sie <literal>window.open</literal> oder <literal>window.openDialog</literal>
  861: in einer chrome-Umgebung verwenden.
  862: </para>
  863: 
  864: </sect3>
  865: </sect2>
  866: </sect1>
  867: 
  868: <sect1 role="" id="mozilla-CHP-2-SECT-3" label="2.3">
  869: <title>Mozilla arbeitet f&uuml;r uns</title>
  870: 
  871: <para>
  872: Das zweite "Hello World" Beispiel in <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link>,
  873: f&uuml;gt ein paar wichtige Applikationseigenschaften hinzu und beginnt Mozillas Ressourcen
  874: aktiv zu nutzen. Dieser Abschnitt handelt davon, wie Sie Stylesheets und Skripts in Ihre Applikation
  875: importieren k&ouml;nnen um diese modularer und ausgereifter zu machen. Weiter bereitet es Sie darauf
  876: vor, eine vollst&auml;ndige Applikation zu entwickeln.
  877: </para>
  878: 
  879: <para>
  880: Sie k&ouml;nnen dieses Beispiel anschauen, wenn Sie den code aus <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link>
  881: in einer Datei namens <filename>hello2.xul</filename> speichern, Mozilla starten und 'File'-&gt;'Open File' im Browsermenu
  882: ausw&auml;hlen. Dies zeigt das Beispiel als Inhalt im Mozilla Browser an, wie in <link linkend="mozilla-CHP-2-FIG-2">Abbildung 2-2</link>.
  883: </para>
  884: 
  885: <example id="mozilla-CHP-2-EX-4" label="2-4">
  886: <title>XUL Beispielfenster </title>
  887: <programlisting>&lt;?xml version="1.0"?&gt;
  888: &lt;?xml-stylesheet href="chrome://global/skin" type="text/css"?&gt;
  889: &lt;!DOCTYPE window&gt;
  890: &lt;window title="Hello xFly"
  891:   xmlns:html="http://www.w3.org/1999/xhtml"
  892:   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  893:   style="background-color: white;"
  894:   width="300"
  895:   height="215"
  896:   onload="centerWindowOnScreen( )"&gt;
  897: &lt;script type="application/x-javascript"   
  898:   src="chrome://global/content/dialogOverlay.js" /&gt;
  899: &lt;vbox align="left"&gt;
  900:   &lt;label style="font-weight: bold;"
  901:       value="Hello, Welcome to the xFly" /&gt;
  902:   &lt;image src="http://books.mozdev.org/xfly.gif" /&gt;
  903:   &lt;button label="hello xFly" oncommand="alert('Hello World');" /&gt;
  904: &lt;/vbox&gt;
  905: &lt;/window&gt;</programlisting>
  906: </example>
  907: 
  908: <para>
  909: Der Unterschied zwischen <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link> und dem ersten
  910: Beispiel sind die neuen Elemente. Das <literal>script</literal> Element,
  911: das in Mozilla JavaScript verf&uuml;gbar macht, weitere Box-Layout Eigenschaften, inline Style
  912: Definitionen und Verarbeitungs-Instruktionen um Stylesheets zu importieren und die
  913: <literal>DOCTYPE</literal> Deklaration, die wir sp&auml;ter in diesem Kapitel in <link linkend="mozilla-CHP-2-SECT-5.5.3">Abschnitt
  914: 2.5.5.3</link> genauer anschauen werden.
  915: </para>
  916: 
  917: <para>
  918: Diese Extras f&uuml;hren dazu dass Ihre XUL Datei jetzt eher wie eine Applikation aussieht.
  919: Weiter hilft Ihnen dieser Ansatz, Ihre Applikation in wiederverwendbare Teile wie Stylesheets, Widgets
  920: und Skript Bibliotheken aufzuteilen, wie in <link linkend="mozilla-CHP-2-SECT-5">Abschnitt 2.5</link>
  921: gezeigt wird.
  922: </para>
  923: 
  924: <figure id="mozilla-CHP-2-FIG-2" label="2-2">
  925: <title>Das zweite Hello xFly Beispiel - im Browser geladen</title>
  926: <graphic fileref="figs/moz_0202.png"/></figure>
  927: 
  928: <sect2 role="" id="mozilla-CHP-2-SECT-3.1" label="2.3.1">
  929: <title>Ressourcen aus Mozilla importieren</title>
  930: 
  931: <para>
  932: Der Code in <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link> verwendet Skripts und
  933: Styles die bereits in Mozilla definiert sind. Wie Sie in den Beispielen in diesem Buch
  934: sehen werden ist global.css das Stylesheet, das Styledefinitionen f&uuml;r XUL Widgets
  935: enth&auml;lt. Die meisten Widgets haben einen Basis-Style. Wie Sie in <link linkend="mozilla-CHP-2-EX-1">Beispiel 2-1</link>
  936: sehen k&ouml;nnen, sieht ein Button bereits wie ein Button aus, ohne dass zus&auml;tzliche Styles importiert werden m&uuml;ssten.
  937: </para>
  938: 
  939: <para>
  940: Als sich XPFE entwickelte wurden mehr und mehr Styledefinitionen in XBL
  941: definiert um diese Basis-Styles zu erhalten. Dies enthob <filename>global.css</filename>
  942: und andere CSS Dateien von einen Teil der Verantwortung.
  943: Dennoch enth&auml;lt dieses Stylesheet wichtige Informationen um XUL Widgets anzeigen
  944: zu k&ouml;nnen. Deshalb ist es normalerweise eine gute Idee es zu
  945: importieren und zu sehen wie die Applikation danach aussieht. Wenn Sie <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link>
  946: mit oder ohne <filename>global.css</filename> Zeile starten, sehen Sie welchen Einfluss
  947: auf die XUL Widgets ausge&uuml;bt wird.
  948: </para>
  949: 
  950: <para>
  951: Die Sktipts <filename>globalOverlay.js</filename>, <filename>tasksOverlay.js</filename> und <filename>dialogOverlay.js</filename>
  952: die in <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link> importiert werden, stellen ihrerseits Funktionalit&auml;t f&uuml;r die Applikation
  953: zur Verf&uuml;gung.
  954: </para>
  955: 
  956: <sect3 role="" id="mozilla-CHP-2-SECT-3.1.1" label="2.3.1.1">
  957: <title>Stylesheets laden</title>
  958: 
  959: <para>
  960: In der zweiten Zeile von <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link>, verwendet die Stylesheet
  961: Deklaration eine <filename>chrome://</filename> URL um die Datei <filename>global.css</filename> zu laden.
  962: Die Styleinformationen in dieser Datei geben dem Button Widget sein Look&amp;Feel. Sie k&ouml;nnen diese Deklaration
  963: verwenden um andere Mozilla Stylesheets wie <filename>global.css</filename>, <filename>navigator.css</filename>
  964: und <filename>toolbar.css</filename> oder Ihr eigenes Stylesheet zu laden. In beiden F&auml;llen wird die URL <filename>chrome://</filename>
  965: verwendet um auf verpackte Dateien auf eine flexible Art zuzugreifen.
  966: </para>
  967: 
  968: <programlisting>&lt;!--import the navigator.css stylesheet 
  969:     from the Mozilla navigator component--&gt;
  970: &lt;?xml-stylesheet href="chrome://navigator/skin" type="text/css"?&gt;
  971: &lt;!--import xfly.css stylesheet from the xFly package--&gt;
  972: &lt;?xml-stylesheet href="chrome://xfly/skin" type="text/css"?&gt;</programlisting>
  973: 
  974: <para>
  975: Weiter sollten Sie sich merken wie in <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link> inline Styles
  976: verwendet werden. Die Eigenschaft <literal>style</literal> des <literal>label</literal> Widgets bietet
  977: einen Platz um Styleinformationen unterzubringen. In unserem Beispiel setzen wir den Text des Labels FETT.
  978: Sie k&ouml;nnten diese Information auch in einem externen Stylesheet ablegen und dieses danach mitsamt Ihrer
  979: Applikation verpacken, dies machen wir sp&auml;ter in diesem Kapitel in <link linkend="mozilla-CHP-2-SECT-5.5">Abschnitt 2.5.5</link> auch noch.
  980: </para>
  981: 
  982: </sect3>
  983: 
  984: <sect3 role="" id="mozilla-CHP-2-SECT-3.1.2" label="2.3.1.2">
  985: <title>Skripts aus XUL aufrufen</title>
  986: 
  987: <para>
  988: Um ein Skript aus XUL anzusprechen verwenden Sie das <literal>script</literal> Element
  989: und eine URL f&uuml;r dessen <literal>src</literal> Attribut:
  990: </para>
  991: 
  992: <programlisting>&lt;script type="application/x-javascript"
  993:    src="chrome://xfly/content/xfly.js" /&gt;</programlisting>
  994: 
  995: <para>
  996: Die Datei <literal>dialogOverlay.js</literal>, die in <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link> verwendet
  997: wird, bietet Zugang zur Funktion <literal>CenterWindowOnScreen( )</literal>. Diese Funktion wird wie folgt zug&auml;nglich gemacht:
  998: </para>
  999: 
 1000: <programlisting>&lt;script type="application/x-javascript"   
 1001:   src="chrome://global/content/dialogOverlay.js" /&gt;</programlisting>
 1002: 
 1003: <para>
 1004: Alle Funktionen die in der Datei <filename>dialogOverlay.js</filename> gefunden
 1005: werden, werden in den Scope der aktuellen XUL Datei geladen und k&ouml;nnen somit
 1006: direkt aufgerufen werden. <literal>CenterWindowOnScreen( )</literal> wird zum Beispiel
 1007: im <literal>onload</literal> EventHandler des XUL Windows verwendet. Die Funktionen aus einer
 1008: JavaScript Datei machen sich nicht bemerkbar, sind aber via JavaScritp Debugger zu sehen.
 1009: Um die passende Funktion f&uuml;r Ihr Problem zu finden, schauen Sie sich den SourceCode der
 1010: Funktionsdatei oder einer Applikation an; die Chance ist gross, dass f&uuml;r Ihr Problem
 1011: bereits eine L&ouml;sung existiert.
 1012: <footnote label="1">
 1013: <para>
 1014: Leider gibt es im Moment keine gute Referenz aller Skripte die importiert werden k&ouml;nnen
 1015: und der Funktionalit&auml;t die Sie zur Verf&uuml;gung stellen. Deshalb ist es oft eine Frage von
 1016: Gl&uuml;ck, wen man kennt, testen, Willensst&auml;rke und Geduld um die korrekten Datein zu finden.
 1017: </para> </footnote>
 1018: </para>
 1019: 
 1020: </sect3>
 1021: </sect2>
 1022: </sect1>
 1023: 
 1024: <sect1 role="" id="mozilla-CHP-2-SECT-4" label="2.4">
 1025: <title>XUL Dateien als Chrome anzeigen</title>
 1026: 
 1027: <para>
 1028: <link linkend="mozilla-CHP-2-FIG-2">Darstellung 2-2</link> zeigt die XUL Datei aus
 1029: <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link> im Hauptfenster des Browsers. Das Beispiel
 1030: enth&auml;lt ein <literal>label</literal> Widget und ein <literal>image</literal>, die beide
 1031: innerhalb einer <literal>vbox</literal> ausgerichtet werden. Diese Widgets machen das 'Chrome'
 1032: ihrer Applikation aus, die M&ouml;glichkeit f&uuml;r Mozilla via <emphasis>chrome://</emphasis> URL auf
 1033: seine eigenen Ressourcen zuzugreifen.
 1034: </para>
 1035: 
 1036: <para>
 1037: Das Beispiel zeigt zwar einige interessante Konzepte um mit XPFE zu arbeiten,
 1038: ist aber noch keine Applikation. Unter anderem m&ouml;chten Sie sicher, dass Ihr Programm
 1039: ausserhalb des Browsers l&auml;uft. Je gr&ouml;sser das Projekt wird, desto mehr m&ouml;chten Sie
 1040: verschiedene Teile trennen -- zum Beispiel in eine XUL Datei, ein eigenes Stylesheet und ein Skript.
 1041: Der Rest dieses Kapitels geht darauf ein, wie man den Code aus <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link>
 1042: verpacken kann und wie man ihn standalone starten kann, indem man die <literal>-chrome</literal> Option beim starten
 1043: von Mozilla angibt.
 1044: </para>
 1045: 
 1046: <para>
 1047: Um eine Applikation mit der -chrome Option zu starten, muss diese zuerst 
 1048: korrekt in Mozillas Registry eingetragen werden. <link linkend="mozilla-CHP-2-SECT-5.6">Abschnitt 2.5.6</link>
 1049: geht n&auml;her auf die chrome-Umgebung ein und zeigt, wie Applikationen registriert werden.
 1050: </para>
 1051: 
 1052: <para>
 1053: Obwohl das Beispiel noch nicht registriert wurde, m&ouml;chten wir Ihnen zeigen wie die Applikation aussieht,
 1054: wenn sie in einem eigenen Fenster geladen wurde, und wie sie im Browser dargestellt wird. Wenn Sie das Beispiel
 1055: mit der <literal>-chrome</literal> Option (wie sp&auml;ter in diesem Kapitel, in <link linkend="mozilla-CHP-2-SECT-6">Abschnitt 2.6</link>
 1056: beschrieben) starten, sehen Sie das Fenster aus <link linkend="mozilla-CHP-2-FIG-3">Darstellung 2-3</link>.
 1057: </para>
 1058: 
 1059: <figure id="mozilla-CHP-2-FIG-3" label="2-3">
 1060: <title>Das zweite Hello xFly Beispiel in seinem eigenen Fenster</title>
 1061: <graphic fileref="figs/moz_0203.png"/></figure>
 1062: 
 1063: <para>
 1064: Die Verwendung der <literal>-chrome</literal> Option weist Mozilla an, die angegebene
 1065: Datei (in unserem Fall der Code aus <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link>)
 1066: in einem eigenen Fenster anstatt dem Browserfenster zu laden. Die Datei selbst ist genau die
 1067: gleiche, unabh&auml;ngig davon, wie sie geladen wird. Die Resultate unterscheiden sich je nachdem
 1068: was Sie Mozilla instruieren zu tun.
 1069: </para>
 1070: 
 1071: <para>
 1072: Die XUL Datei in einem eigenen chrome Window anzuzeigen macht die Applikation
 1073: unabh&auml;ngiger und unterbricht die Verbindung zum Browser die durch die File &gt; Open File
 1074: Methode erzeugt wird. Eigene Fenster mit der JavaScript Funktion <literal>window.openDialog</literal> 
 1075: zu starten, gibt der Applikation weit flexiblere Anzeigem&ouml;glichkeiten.
 1076: </para>
 1077: 
 1078: </sect1>
 1079: 
 1080: <sect1 role="" id="mozilla-CHP-2-SECT-5" label="2.5">
 1081: <title>Ein Paket erstellen</title>
 1082: 
 1083: <para>
 1084: Die zwei vorhergehenden Abschnitte handelten von chrome und der M&ouml;glichkeit
 1085: Applikationen in einem eigenen Fenster laufen zu lassen. Der n&auml;chste Schritt
 1086: ist, das Beispiel in ein Paket umzuwandeln -- eine modularen Sammlung der
 1087: Dateien, die in Mozilla als neue Applikation installiert werden k&ouml;nnen.
 1088: </para>
 1089: 
 1090: <para>
 1091: Im vorhergehenden <link linkend="mozilla-CHP-2-SECT-3">Abschnitt 2.3</link>,
 1092: haben Sie der XUL Datei zus&auml;tzliche Features und Komplexit&auml;t hinzugef&uuml;gt. In diesem
 1093: Abschnitt verteilen wir diese in einzelne Dateien -- einer CSS Datei, einer JS Datei
 1094: und einer DTD Datei -- registrieren dieses Dateien und machen Sie als
 1095: einziges Paket installierbar.
 1096: </para>
 1097: 
 1098: <para>
 1099: Nur wenn Sie Ihre Applikation verpacken, haben deren Dateien Zugriff auf Mozilla Dateien
 1100: wie CSS und Skripts, sind &uuml;ber die spezielle <filename>chrome://</filename> URL verf&uuml;gbar,
 1101: akzeptieren neue Themes und k&ouml;nnen auf die XPCOM Objekte zugreifen in denen der gr&ouml;sste Teil
 1102: der Mozilla Applikation definiert ist.
 1103: </para>
 1104: 
 1105: <para>
 1106: Um ein neues Paket zu erstellen sind verschiedene Werkzeuge verf&uuml;gbar. <link linkend="mozilla-APP-B">Anhang B</link>
 1107: enth&auml;lt Informationen &uuml;ber XULKit einer Handvoll Skripts die einen Teil der Paket-Erstellung &uuml;bernehmen. Es wird jedoch
 1108: empfohlen, zuerst ein paar Pakete von Hand zu machen um zu verstehen wie sie funktionieren bevor man XULKit verwendet.
 1109: </para>
 1110: 
 1111: <sect2 role="" id="mozilla-CHP-2-SECT-5.1" label="2.5.1">
 1112: <title>Architektur eines Chrome Pakets</title>
 1113: 
 1114: <para>
 1115: Die Architektur von Mozilla XPFE ist Komponenten- beziehungsweise Layer- basiert.
 1116: Eines der wichtiges Ziele bei diesem Design ist die klare Trennung der verschiedenen Komponenten
 1117: einer Applikation. Namentlich Inhalte, Funktionalit&auml;t und Layout. Dieses Design hat eine gr&ouml;ssere
 1118: Modularisierung zur Folge, die es einfach macht eine Benutzerschnittstelle zu &auml;ndern. Um zum Beispiel
 1119: die Skin Ihrer Applikation zu &auml;ndern, k&ouml;nnen Sie die Sprachdateien anpassen oder weitere Script Elemente
 1120: hinzuf&uuml;gen.
 1121: </para>
 1122: 
 1123: <para>
 1124: Wenn ein Paket so modular aufgebaut sein kann wie in Mozilla, k&ouml;nnen
 1125: Design-Entscheidungen von Designer, die Sprache der Benutzerschnittstelle
 1126: von einem Author und das Applikationsframework von einem Programmierer unterhalten werden
 1127: (obwohl der Programmierer in vielen kleinen Projekten wohl all diese Positionen selber belegt). Die n&auml;chsten
 1128: Abschnitte gehen n&auml;her auf die verschiedenen Komponenten, deren Inhalte und Dateitypen ein.
 1129: Die Art wie Komponenten zusammengestellt werden, kann als Inspiration f&uuml;r Ihre
 1130: eigenen Entwicklungen dienen.
 1131: </para>
 1132: 
 1133: <para>
 1134: Ein Paket ist eine Gruppe von Verzeichnissen und dazugeh&ouml;rigen Dateien, welche
 1135: zusammen 'die Mozilla Applikation' ausmachen. Ein kleines, typisches Paket enth&auml;t
 1136: normalerweise eine XUL Datei, eine Skript Datei (im Moment JavaScript, w&auml;hrend
 1137: Implementationen f&uuml;r Perl, Python, Ruby und andere Sprachen entwickelt werden)
 1138: und einer CSS Datei. Ein ausgewachsenes Paket kann weiter XBL Dateien, Bilder (PNG, JPG, GIF),
 1139: DTD, HTML und RDF Dateien enthalten. Jede davon hat eine wichtige Rolle in der Applikation.
 1140: </para>
 1141: 
 1142: </sect2>
 1143: <sect2 role="" id="mozilla-CHP-2-SECT-5.2" label="2.5.2">
 1144: <title>Paket Komponenten</title>
 1145: 
 1146: <para>
 1147: Sie werden feststellen, dass jede Komponente in einem Paket unabh&auml;ngig ist. Es ist m&ouml;glich mit
 1148: einer oder zwei Komponenten eine Applikation zu erstellen. Alle Komponenten wirken jedoch zusammen,
 1149: wenn eine ausgewachsene Applikation erstellt werden soll und stehen zu Ihrem Vorteil zur Verf&uuml;gung.
 1150: </para>
 1151: 
 1152: <sect3 role="" id="mozilla-CHP-2-SECT-5.2.1" label="2.5.2.1">
 1153: <title>Chrome Inhalt</title>
 1154: 
 1155: <para>
 1156: Der Inhalt setzt sich aus XUL und XBL Daten aus einer oder mehreren Dateien zusammen. Diese
 1157: Inhalte werden zur Laufzeit aus den Dateien, Overlays und Bindings gelesen um im Window System
 1158: wiedergegeben zu werden. Die plattform&uuml;bergreifende Architektur garantiert Konsistenz und passt
 1159: in den Leitgedanken 'write once, run everywhere'. XUL definiert ein einziges Widget Set, das 
 1160: f&uuml;r alle Plattformen g&uuml;ltig ist. Der XUL Parser ist jedoch nicht so tolerant wie mancher HTML Parser,
 1161: besser gesagt ist er sogar komplett intolerant. Dies muss auch so sein, da jedes XUL Element die umliegenden
 1162: Elemente beinflusst -- speziell im Kontext des Box Modells welches in <link linkend="mozilla-CHP-3">Kapitel 3</link>
 1163: n&auml;her beschrieben wird.
 1164: </para>
 1165: 
 1166: <para>
 1167: Das Widget Set besteht aus einfachen Widgets, die dargestellt werden
 1168: indem sie sich, im ihnen zugemessenen Raum, zeichnen. Komplexere Widgets, die
 1169: als Container benutzt werden bis zu Widgets die ihre Inhalte stapeln, oder Eingaben
 1170: verarbeiten.  Ein <literal>&lt;label&gt;</literal> Widget ist ein
 1171: Beispiel des erstgenannten, <literal>&lt;stack&gt;</literal> geh&ouml;rt zur letzteren,
 1172: komplexen Gruppe. Wenn der Parser ein Element nicht laden kann l&ouml;st er einen Fehler aus.
 1173: Die Fehler unterscheiden sich im Typ. XML Syntax-bedingte Fehler werden im Fenster anstelle
 1174: des erwarteten Inhalts ausgegeben. Angezeigt wird der Name der fehlerhaften Datei und
 1175: die Position (Zeile/Reihe) des fehlerhaften Abschnitts.
 1176: </para>
 1177: 
 1178: <para>
 1179: Als Erweiterung wird die XBL (eXtensible Binding Language) benutzt, eine
 1180: Beschreibungssprache zu XUL. XBL erlaubt dem Benutzer, eigene Widgets zu definieren,
 1181: oder einem bestehenden Widget neue Funktionalit&auml;t hinzuzuf&uuml;gen. Sie k&ouml;nnen f&uuml;r ein
 1182: Binding Scripte und Inhalte definieren. Mit einem bisschen Vorstellungskraft k&ouml;nnen
 1183: Sie unendlich viele Inhalte in Ihrer Applikation verwalten indem Sie
 1184: eigene Widgets, Styles und Verhalten in XBL erfassen.
 1185: </para>
 1186: 
 1187: </sect3>
 1188: 
 1189: <sect3 role="" id="mozilla-CHP-2-SECT-5.2.2" label="2.5.2.2">
 1190: <title>Chrome Aussehen</title>
 1191: 
 1192: <para>
 1193: Wenn man eine XUL Datei l&auml;dt, werden die XUL Elemente als einfache, unproportionierte
 1194: Widgets ausgegeben. W&auml;hrend einfacher Text f&uuml;r eine Webseite ein effizientes Mittel sein kann
 1195: um Informationen weiterzugeben, ist diese Situation mit Benutzerschnittstellen 
 1196: nicht der Fall.
 1197: </para>
 1198: 
 1199: <para>
 1200: Mozilla Benutzerschnittstellen ohne Styles sind nicht sehr brauchbar. Selbst um
 1201: das traditionelle Look&amp;Feel des grauen Interfaces, das viele Applikationen verwenden,
 1202: zu erhalten, muss CSS verwendet werden. Subtile Effekte wie Farbt&ouml;nungen und 3D Buttons
 1203: lassen sogar einfachste Benutzerschnittstellen besser aussehen.
 1204: </para>
 1205: 
 1206: <para>
 1207: Themes und die M&ouml;glichkeit das Look&amp;Feel einer Applikation auf ein Unternehmen anzupassen
 1208: werden immer wichtiger. Mozilla Entwickler realisierten dies w&auml;hrend der Design Phase, was sich
 1209: auf die Architektur auswirkte: das Aussehen der Schnittstelle ist fast komplett unabh&auml;ngig
 1210: von deren strukturellem Aufbau.
 1211: </para>
 1212: 
 1213: </sect3>
 1214: 
 1215: <sect3 role="" id="mozilla-CHP-2-SECT-5.2.3" label="2.5.2.3">
 1216: <title>Chrome Verhalten</title>
 1217: 
 1218: <para>
 1219: Mozilla unterst&uuml;tzt im Moment nur JavaScript als Br&uuml;cke zwischen Benutzerschnittstelle
 1220: und Applikationscode. JavaScript ist der Kleber zwischen dem Interface und dem
 1221: fast vollst&auml;ndig in C++ geschriebenen Backend.
 1222: </para>
 1223: 
 1224: <para>
 1225: Ein grosser Teil der Infrastruktur f&uuml;r die Unterst&uuml;tzung weiterer Skriptsprachen
 1226: wie Perl und Python existiert bereits, deshalb wurden beide Sprachen zur eingliederung
 1227: in das Framework vorgeschlagen.  Im Moment erkennen Sie Inhalte die mit JavaScript
 1228: verbunden sind anhand der folgenden Deklaration:
 1229: </para>
 1230: 
 1231: <programlisting>&lt;script type="application/x-javascript" src="xfly.js" /&gt;</programlisting>
 1232: 
 1233: <para>
 1234: <literal>type</literal> dient als Ersatz zum abgel&ouml;sten <literal>language</literal>
 1235: Attribut und erwartet einen MIME-Type als Wert. So kann, wenn weitere Sprachen
 1236: hinzugef&uuml;gt werden einfach der Wert ge&auml;ndert werden -- was sehr gut in die Philosphie von
 1237: 'There's More Than One Way To Do It' passt. Die Funktionellen Komponenten einer Mozilla Applikation
 1238: werden meist im <filename>content</filename> Unterverzeichnis abgelegt, wie in <link linkend="mozilla-CHP-2-SECT-5.3">Abschnitt 2.5.3</link>
 1239: erkl&auml;rt wird.
 1240: </para>
 1241: 
 1242: </sect3>
 1243: 
 1244: <sect3 role="" id="mozilla-CHP-2-SECT-5.2.4" label="2.5.2.4">
 1245: <title>Chrome Lokalisierung</title>
 1246: 
 1247: <para>
 1248: Lokalisierung ist der Prozess in dem eine Software an lokale Gegebenheiten
 1249: angepasst wird, indem zum Beispiel die Sprache f&uuml;r eine bestimmte Region ge&auml;ndert wird.
 1250: Widgets wie MenuItems, Buttons, Window TitleBars und Alert-Dialoge m&uuml;ssen zumeist
 1251: nicht angepasst werden. Nebst dessen k&ouml;nnen jedoch verschiedene Dinge lokalisiert
 1252: werden, von HTML Seiten bis zu Installationspaketen.
 1253: </para>
 1254: 
 1255: <para>Die unterst&uuml;tzten Formate sind:</para>
 1256: 
 1257: <itemizedlist><listitem>
 1258: <para>DTD (<filename>.dtd</filename>) Dateien, die Entities mit dem Inhalt der Zeichenkette
 1259: enthalten die im XUL Teil verwendet wird.
 1260: </para>
 1261: </listitem><listitem>
 1262: <para>
 1263: Property-Dateien (<filename>.properties</filename>), die Zeichenketten
 1264: enthalten und dynamisch via JavaScript oder C++ ausgelesen werden.
 1265: </para>
 1266: </listitem><listitem>
 1267: <para>
 1268: HTML Dateien sind f&uuml;r bestimmte Seiten die mit der Applikation installiert werden,
 1269: wie zum Beispiel About:Mozilla.
 1270: </para>
 1271: </listitem><listitem>
 1272: <para>RDF Dateien.</para>
 1273: </listitem></itemizedlist>
 1274: </sect3>
 1275: </sect2>
 1276: <sect2 role="" id="mozilla-CHP-2-SECT-5.3" label="2.5.3">
 1277: <title>Verzeichnisstruktur</title>
 1278: 
 1279: <para>
 1280: Dateien k&ouml;nnen auf verschiedene Arten organisiert werden. Wenn Ihre Applikation klein ist,
 1281: und nur aus einer einfachen Strukur besteht, nur in einer Sprache verf&uuml;gbar sein muss -- dann ist
 1282: es m&ouml;glicherweise einfacher, alle Dateien in einem einzigen Verzeichnis abzulegen. Wenn die Applikation
 1283: jedoch eine gewisse Gr&ouml;sse ereicht, ist es sinnvoller die Dateien logisch in Unterverzeichnissen abzulegen.
 1284: </para>
 1285: 
 1286: <para>
 1287: Die meisten Applikationen verwenden einen Verzeichnisstruktur die den Inhalt des Software Paketes
 1288: wiederspiegelt: XUL und JavaScript in einem <filename>content</filename> Unterverzeichnis, CSS und Bilder
 1289: in einem <filename>skin</filename> Unterverzeichnis und DTDs und andere Ressourcen f&uuml;r die Lokalisierung
 1290: in einem Unterverzeichnis namens <emphasis>locale</emphasis>. <link linkend="mozilla-CHP-2-FIG-4">Abbildung 2-4</link>
 1291: zeigt diese Anordnung.
 1292: </para>
 1293: 
 1294: <figure id="mozilla-CHP-2-FIG-4" label="2-4">
 1295: <title>Ein Beispiel Verzeichnis-Layout f&uuml;r ein Paket</title>
 1296: <graphic fileref="figs/moz_0204.png"/></figure>
 1297: 
 1298: <para>
 1299: Diese drei verschiedenen Verzeichnisse enthalten meist die folgenden Dateitypen:
 1300: </para>
 1301: 
 1302: <variablelist>
 1303: <varlistentry><term>content</term>
 1304: <listitem>
 1305: <para>
 1306: Das <filename>content</filename> Verzeichnis enth&auml;lt die XUL Dateien, das die Widgets
 1307: f&uuml;r die Applikation enth&auml;lt. Es ist g&auml;ngige Praxis ebenfalls JavaScript Dateien in diesem Verzeichnis
 1308: abzulegen.
 1309: </para>
 1310: </listitem>
 1311: </varlistentry>
 1312: 
 1313: <varlistentry><term>locale</term>
 1314: <listitem>
 1315: <para>
 1316: Dieses Verzeichnis enth&auml;lt Dateien, die Zeichenketten enthalten, welche f&uuml;r die
 1317: Lokalisierung Ihrer Applikation ben&ouml;tigt werden. Die meisten dieser Dateien sind
 1318: DTDs, die die Entit&auml;ten enthalten die in der XUL Datei referenziert werden. Darunter
 1319: gibt es ein Unterverzeichnis pro angebotene <emphasis>code-region</emphasis>, wie
 1320: zum Beispiel <literal>de-CH</literal>.
 1321: </para>
 1322: </listitem>
 1323: </varlistentry>
 1324: 
 1325: <varlistentry><term>skin</term>
 1326: <listitem>
 1327: <para>
 1328: Der name 'Skin' ist eine interne Bezeichnung f&uuml;r ein Theme. Das <filename>skin</filename>
 1329: Verzeichnis enth&auml;lt alle CSS Dateien und Bilder, die f&uuml;r das Aussehen der Fenster
 1330: zust&auml;ndig sind. Dies ist gleichzeitig ein guter Ort um die Applikationsicons aufzubewahren - in
 1331: einem eigenen Unterverzeichnis.
 1332: </para>
 1333: </listitem>
 1334: </varlistentry>
 1335: </variablelist>
 1336: 
 1337: <sect3 role="" id="mozilla-CHP-2-SECT-5.3.1" label="2.5.3.1">
 1338: <title> Die Verzeichnisstruktur der xFly Applikation</title>
 1339: 
 1340: <para>
 1341: Die Verzeichnisstruktur in der die Applikation definiert ist (egal ob es
 1342: sich um Dateisystem Verzeichnisse oder um Ordner in einem JAR-Archiv handelt),
 1343: ist ein wichtiger Teil des Applikations Designs und dem Zusammenhang zu Mozilla.
 1344: Verwenden Sie die folgenden Schritte um Ihr xFly Paket zusammenzufassen,
 1345: registrier- und anpassbar zu machen.
 1346: </para>
 1347: 
 1348: <itemizedlist><listitem>
 1349: <para>
 1350: Suchen Sie auf Ihrem Computer das Installationverzeichnis von Mozilla und
 1351: erstellen Sie unterhalb des <filename>chrome</filename> Verzeichnisses ein
 1352: neues Verzeichnis namens "<filename>xfly</filename>."
 1353: </para>
 1354: 
 1355: <para>
 1356: Alle Mozilla Applikationen werden im <filename>chrome</filename> Verzeichnis abgelegt.
 1357: </para>
 1358: </listitem><listitem>
 1359: <para>
 1360: Unter diesem Verzeichnis m&uuml;ssen Sie 3 weitere erstellen. <filename>content</filename>, <filename>locale</filename> und
 1361: <filename>skin</filename>, wie in <link linkend="mozilla-CHP-2-FIG-5">Abbildung 2-5</link> gezeigt wird. Das <filename>locale</filename>
 1362: Verzeichnis muss ein Unterverzeichnis namens 'en-US' enthalten um das Sprachpaket abzulegen.
 1363: </para>
 1364: </listitem></itemizedlist>
 1365: <figure id="mozilla-CHP-2-FIG-5" label="2-5">
 1366: <title>xFly Paket Verzeichnisstruktur</title>
 1367: <graphic fileref="figs/moz_0205.png"/></figure>
 1368: 
 1369: </sect3>
 1370: </sect2>
 1371: <sect2 role="" id="mozilla-CHP-2-SECT-5.4" label="2.5.4">
 1372: <title>Paket Manifeste</title>
 1373: 
 1374: <para>
 1375: Nun, nachdem wir die Verzeichnisse f&uuml;r unser Paket eingerichtet haben, m&uuml;ssen wir
 1376: Mozilla informieren, welche Dateien verwendet werden sollen. Alle Mozilla Pakete
 1377: m&uuml;ssen ein Manifest enthalten, das dessen Inhalt beschreibt und verwendet werden kann,
 1378: um das Paket zu registrieren. Manifeste sind ein oder mehrere RDF Dateien, die im Paket
 1379: enthalten sind, und mit Mozillas <filename>chrome</filename> Verzeichnis interagieren. RDF Dateien
 1380: sind XML Dateien die Daten in maschinenlesbarer Form beschreiben.
 1381: </para>
 1382: 
 1383: <para>
 1384: Jedes xFly Paket ben&ouml;tigt sein eigenes Manifest. Mozilla verwendet diese Dateien (in diesem
 1385: Fall <filename>contents.rdf</filename>) um eine Applikation zu registrieren. Diese Dateien werden
 1386: in <link linkend="mozilla-CHP-2-EX-5">Beispiel 2-5</link>, <link linkend="mozilla-CHP-2-EX-6">Beispiel 2-6</link>
 1387: und <link linkend="mozilla-CHP-2-EX-7">Beispiel 2-7</link> aufgelistet. Erstellen Sie diese Dateien in deren
 1388: <filename>content</filename>, <filename>skin</filename> und <filename>locale</filename> Unterverzeichnissen.
 1389: </para>
 1390: 
 1391: <example id="mozilla-CHP-2-EX-5" label="2-5">
 1392: <title>chrome/xfly/content/contents.rdf file </title>
 1393: <programlisting>&lt;?xml version="1.0"?&gt;
 1394: &lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 1395:          xmlns:chrome="http://www.mozilla.org/rdf/chrome#"&gt;
 1396:   &lt;!-- list all the packages being supplied --&gt;
 1397:   &lt;RDF:Seq about="urn:mozilla:package:root"&gt;
 1398:     <emphasis role="bold">&lt;RDF:li resource="urn:mozilla:package:xfly"/&gt;</emphasis>
 1399:   &lt;/RDF:Seq&gt;
 1400:   &lt;!-- package information --&gt;
 1401:   &lt;RDF:Description about="urn:mozilla:package:xfly"
 1402:         chrome:displayName="xFly"
 1403:         chrome:author="xfly.mozdev.org"
 1404:         chrome:name="xfly"&gt;
 1405:   &lt;/RDF:Description&gt;
 1406:  <emphasis role="bold">&lt;/RDF:RDF&gt;</emphasis></programlisting>
 1407: </example>
 1408: 
 1409: <para>
 1410: Im content-Manifest in <link linkend="mozilla-CHP-2-EX-5">Beispiel 2-5</link> finden Sie
 1411: Metadaten wie <literal>chrome:name</literal> und <literal>chrome:author</literal>, die
 1412: das Manifest Mozilla zur Verf&uuml;gung stellt. Diese Information kann von anderen Leuten verwendet
 1413: werden um herauszufinden um was f&uuml;r eine Applikation es sich handelt und wer sie geschrieben hat.
 1414: Der Name, Author und Beschreibung eines Themes sind zum Beispiel in den Einstellungen
 1415: sichtbar, wenn Sie Appearance &gt; Themes w&auml;hlen.
 1416: </para>
 1417: 
 1418: <para>
 1419: In <link linkend="mozilla-CHP-2-EX-6">Beispiel 2-6</link> sehen Sie, dass das xFly Paket
 1420: nur die Skin Resource Classic erweitert, wie in <literal>RDF:Seq</literal> notiert, das
 1421: nur <literal>classic</literal> als betroffenes Paket auflistet.
 1422: </para>
 1423: 
 1424: <example id="mozilla-CHP-2-EX-6" label="2-6">
 1425: <title>chrome/xfly/skin/contents.rdf file </title>
 1426: <programlisting>&lt;?xml version="1.0"?&gt;
 1427: &lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 1428:          xmlns:chrome="http://www.mozilla.org/rdf/chrome#"&gt;
 1429:   &lt;RDF:Seq about="urn:mozilla:skin:root"&gt;
 1430:     &lt;RDF:li resource="urn:mozilla:skin:classic/1.0" /&gt;
 1431:   &lt;/RDF:Seq&gt;
 1432:   &lt;RDF:Description about="urn:mozilla:skin:classic/1.0"&gt;
 1433:     &lt;chrome:packages&gt;
 1434:       &lt;RDF:Seq about="urn:mozilla:skin:classic/1.0:packages"&gt;
 1435:         <emphasis role="bold">&lt;RDF:li resource="urn:mozilla:skin:classic/1.0:xfly"/&gt;</emphasis>
 1436:       &lt;/RDF:Seq&gt;
 1437:     &lt;/chrome:packages&gt;
 1438:   &lt;/RDF:Description&gt;
 1439: &lt;/RDF:RDF&gt;</programlisting>
 1440: </example>
 1441: 
 1442: <para>
 1443: In <link linkend="mozilla-CHP-2-EX-7">Beispiel 2-7</link> wird gezeigt wie die dritte Art von
 1444: Manifest verwendet wird, um das englische Language Pack (<literal>en-US</literal>) als Ressource
 1445: im xFly Paket zu deklarieren. Die <literal>RDF:Seq</literal> Struktur in einem Manifest besagt
 1446: 'diesem Paket folgendes Language Pack (bsp: das <literal>en-US</literal> Language Pack), hinzuf&uuml;gen.'
 1447: </para>
 1448: 
 1449: <example id="mozilla-CHP-2-EX-7" label="2-7">
 1450: <title>chrome/xfly/locale/contents.rdf file </title>
 1451: <programlisting>&lt;?xml version="1.0"?&gt;
 1452: &lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 1453:          xmlns:chrome="http://www.mozilla.org/rdf/chrome#"&gt;
 1454:   &lt;RDF:Seq about="urn:mozilla:locale:root"&gt;
 1455:     &lt;RDF:li resource="urn:mozilla:locale:en-US"/&gt;
 1456:   &lt;/RDF:Seq&gt;
 1457:   &lt;!-- locale information --&gt;
 1458:   <emphasis role="bold">&lt;RDF:Description about="urn:mozilla:locale:en-US</emphasis>"
 1459:         <emphasis role="bold">chrome:displayName="English(US)</emphasis>"
 1460:         <emphasis role="bold">chrome:author="xfly.mozdev.org</emphasis>"
 1461:         <emphasis role="bold">chrome:name="en-US</emphasis>"
 1462:         <emphasis role="bold">chrome:previewURL="http://www.mozilla.org/locales/en-US.gif"&gt;</emphasis>
 1463:     &lt;chrome:packages&gt;
 1464:       &lt;RDF:Seq about="urn:mozilla:locale:en-US:packages"&gt;
 1465:         <emphasis role="bold">&lt;RDF:li resource="urn:mozilla:locale:en-US:xfly"/&gt;</emphasis>
 1466:       &lt;/RDF:Seq&gt;
 1467:     &lt;/chrome:packages&gt;
 1468:   &lt;/RDF:Description&gt;
 1469: &lt;/RDF:RDF&gt;</programlisting>
 1470: </example>
 1471: 
 1472: <para>
 1473: Manifeste werden in <link linkend="mozilla-CHP-6">Kapitel 6</link> n&auml;her erl&auml;utert. F&uuml;r den Moment
 1474: reicht es, zu verstehen, dass jedes Manifest das Unterverzeichnis in dem es abgelegt ist beschreibt,
 1475: und dass die Inhalte dieser Unterverzeichnisse zusammen den Inhalt des Pakets ausmachen.
 1476: </para>
 1477: 
 1478: <para>
 1479: Content beschreibt den Inhalt des xFly Pakets, XUL und JavaScript.
 1480: Skin beschreibt das Theme oder CSS und Images welche in der XUL Struktur verwendet wurden.
 1481: Der dritte Teil beschreibt die Locale oder die Zeichenketten in der Benutzerschnittstelle
 1482: welche an verschiedene Sprachen und lokale Gegebenheiten angepasst werden kann.
 1483: </para>
 1484: 
 1485: </sect2>
 1486: <sect2 role="" id="mozilla-CHP-2-SECT-5.5" label="2.5.5">
 1487: <title>Aufteilen der Dateien</title>
 1488: 
 1489: <para>
 1490: Wenn Sie die Unterverzeichnis Struktur f&uuml;r Ihre Applikation
 1491: eingerichtet haben, k&ouml;nnen Sie diese Teile Ihrer Applikation aus den
 1492: Dateien extrahieren und in eigenen Dateien ablegen. Diese separaten
 1493: Dateien - die XUL Datei, CSS, JS und DTD Dateien -- werden danach als
 1494: einziges Paket registriert und k&ouml;nnen somit als Applikation gestartet
 1495: werden.
 1496: </para>
 1497: 
 1498: <para>
 1499: Obwohl wir bereits in <link linkend="mozilla-CHP-2-EX-4">Beispiel 2-4</link> gesehen haben, wie
 1500: unser "Hello World" Beispiel funktioniert, zeigt deren Integration, wie ein Paket 
 1501: mit Mozilla zusammenarbeiten kann. Jeder Schritt um die Komponenten zu separieren
 1502: f&uuml;hrt dazu, dass die Basis-Datei angepasst werden muss.
 1503: </para>
 1504: 
 1505: <sect3 role="" id="mozilla-CHP-2-SECT-5.5.1" label="2.5.5.1">
 1506: <title>Die xFly CSS Datei</title>
 1507: 
 1508: <para>
 1509: Die Inline Style Definition des Label Widgets kann fast direkt in einer separaten Datei
 1510: namens <filename>xfly.css</filename> abgelegt werden. Speichern sie den Code aus <link linkend="mozilla-CHP-2-EX-8">Beispiel 2-8</link>
 1511: im Unterverzeichnis <filename>chrome/xfly/skin/</filename>.
 1512: </para>
 1513: 
 1514: <example id="mozilla-CHP-2-EX-8" label="2-8">
 1515: <title>Der Inhalt von xfly.css </title>
 1516: <programlisting>#xlabel { font-weight: bold; }
 1517: window  { background-color: white; }</programlisting>
 1518: </example>
 1519: 
 1520: <para>
 1521: Style Definitionen aus einer externen Datei zu verwenden ist anders als sie direkt
 1522: Inline zu notieren, da man einen Weg haben muss, um den Style mit einem Element
 1523: zu verbinden. CSS verf&uuml;gt &uuml;ber eine breite Anzahl solcher sogenannter Selektoren,
 1524: die Elemente mit Styles verkn&uuml;pfen. In diesem Fall, in dem Sie zwei verschiedene
 1525: Elemente haben, die einen Style verwenden sollen, wird das <literal>id</literal> Attribut
 1526: benutzt um das Element zu referenzieren, auf das der Style angewendet werden soll, der zweite
 1527: Weg ist, dies direkt via Elementname zu erledigen. <link linkend="mozilla-CHP-2-EX-8">Beispiel 2-8</link>
 1528: enth&auml;lt die Selektoren f&uuml;r diese zwei Elemente und <link linkend="mozilla-CHP-2-EX-9">Beispiel 2-9</link>
 1529: zeigt die aktualisierte Version von <filename>xfly.css</filename>.
 1530: </para>
 1531: 
 1532: <example id="mozilla-CHP-2-EX-9" label="2-9">
 1533: <title>Externe Styledefinitionen verwenden</title>
 1534: <programlisting>&lt;?xml version="1.0"?&gt;
 1535: &lt;?xml-stylesheet href="chrome://global/skin" type="text/css"?&gt;
 1536: <emphasis role="bold">&lt;?xml-stylesheet href="chrome://xfly/skin" type="text/css"?&gt;</emphasis>
 1537: &lt;!DOCTYPE window&gt;
 1538: &lt;window title="Hello xFly"
 1539:   xmlns:html="http://www.w3.org/1999/xhtml"
 1540:   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 1541:   width="300"
 1542:   height="215"
 1543:   onload="centerWindowOnScreen( )"&gt;
 1544:  &lt;script type="application/x-javascript"   
 1545:   src="chrome://global/content/dialogOverlay.js" /&gt;
 1546:  &lt;vbox align="left" <userinput>id="vb"</userinput>&gt;
 1547:   &lt;label <userinput>id="xlabel"</userinput>
 1548:       value="Hello, Welcome to the xFly" /&gt;
 1549:   &lt;image src="http://books.mozdev.org/xfly.gif" /&gt;
 1550:   &lt;button label="hello xFly" oncommand="alert('hello.');" /&gt;
 1551:  &lt;/vbox&gt;
 1552: &lt;/window&gt;</programlisting>
 1553: </example>
 1554: 
 1555: <para>
 1556: Beachten Sie das neue Stylesheet 'import'-Statement am Anfang der Datei und
 1557: die Verwendung des <literal>id</literal> Attributs im Label. Wenn Sie Dateien
 1558: mit Ihrem Paket registrieren wollen, deutet das <filename>xfly</filename> Verzeichnis
 1559: auf den Ort in der Verzeichnisstruktur an dem Ihre Applikation abgelegt wurde. (Das <filename>skin</filename>
 1560: Unterverzeichnis, und dessen Inhalt <filename>xfly.css</filename>). Das Label wird
 1561: danach die Style Informationen von der Stelle laden die mit dem <literal>style</literal>
 1562: Attribut angegeben wurde.
 1563: </para>
 1564: 
 1565: </sect3>
 1566: 
 1567: <sect3 role="" id="mozilla-CHP-2-SECT-5.5.2" label="2.5.5.2">
 1568: <title>Die xFly Script Datei</title>
 1569: 
 1570: <para>
 1571: Als erstes entfernen wir den Script Teil aus unserer XUL Datei und
 1572: legen ihn in einer JavaScript Datei ab. <link linkend="mozilla-CHP-2-EX-10">Beispiel 2-10</link>
 1573: zeigt eine XUL Datei welche eine Funktion f&uuml;r den Button aus der externen Script Datei <filename>xfly.js</filename>
 1574: l&auml;dt.
 1575: </para>
 1576: 
 1577: <example id="mozilla-CHP-2-EX-10" label="2-10">
 1578: <title>Verwendung von externen Scripts</title>
 1579: <programlisting>&lt;?xml version="1.0"?&gt;
 1580: &lt;?xml-stylesheet href="chrome://global/skin" type="text/css"?&gt;
 1581: &lt;?xml-stylesheet href="chrome://xfly/skin" type="text/css"?&gt;
 1582: &lt;!DOCTYPE window&gt;
 1583: &lt;window title="Hello xFly"
 1584:   xmlns:html="http://www.w3.org/1999/xhtml"
 1585:   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 1586:   width="300"
 1587:   height="215"
 1588:   onload="centerWindowOnScreen( )"&gt;
 1589: &lt;script type="application/x-javascript"   
 1590:   src="chrome://global/content/dialogOverlay.js" /&gt;
 1591: <emphasis role="bold">&lt;script type="application/x-javascript</emphasis>"   
 1592:   <emphasis role="bold">src="chrome://xfly/content/xfly.js" /&gt;</emphasis>
 1593:  &lt;vbox align="left" id="vb"&gt;
 1594:   &lt;label id="xlabel" 
 1595:       value="Hello, Welcome to the xFly" /&gt;
 1596:   &lt;image src="http://books.mozdev.org/xfly.gif" /&gt;
 1597:   &lt;button label="hello xFly" oncommand="greet( );" /&gt;
 1598:  &lt;/vbox&gt;
 1599: &lt;/window&gt;</programlisting>
 1600: </example>
 1601: 
 1602: <para>
 1603: Die Funktion <literal>greet( )</literal> benennt die Aktion die
 1604: durchgef&uuml;hrt wird, wenn der Button angeklickt wird. Die <literal>greet( )</literal>
 1605: Funktion ist nun in der Script Datei <filename>xfly.js</filename> abgelegt, die via
 1606: 'import'-Statement hinzugebunden wurde:
 1607: </para>
 1608: 
 1609: <programlisting><emphasis role="bold">&lt;script type="application/x-javascript</emphasis>"   
 1610:   <emphasis role="bold">src="chrome://xfly/content/xfly.js" /&gt;</emphasis></programlisting>
 1611: 
 1612: <para>
 1613: <link linkend="mozilla-CHP-2-EX-11">Beispiel 2-11</link> enth&auml;lt den Code f&uuml;r die
 1614: <filename>xfly.js</filename> Datei den Sie ben&ouml;tigen.
 1615: </para>
 1616: 
 1617: <example id="mozilla-CHP-2-EX-11" label="2-11">
 1618: <title>Der Inhalt der xfly.js Datei</title>
 1619: <programlisting>function greet( ) {
 1620:   alert("Hello World");
 1621: }</programlisting>
 1622: </example>
 1623: 
 1624: <para>
 1625: Speichern Sie die Datei <filename>xfly.js</filename> in das <filename>content</filename>
 1626: Unterverzeichnis der xFly Applikation (<filename>chrome/xfly/content/</filename>). Das oben
 1627: benutzte 'import'-Statement verwendet eine <filename>chrome://</filename> URL um die Skripte und
 1628: die Verzeichnisse die registriert wurden aufzufinden.
 1629: </para>
 1630: 
 1631: </sect3>
 1632: 
 1633: <sect3 role="" id="mozilla-CHP-2-SECT-5.5.3" label="2.5.5.3">
 1634: <title>Das xFly DTD</title>
 1635: 
 1636: <para>
 1637: Der letzte Schritt ist, die sprachabh&auml;ngigen Teile der Applikation
 1638: zu generalisieren. Wenn Sie ein Unterverzeichnis namens <filename>locale</filename>
 1639: erstellen, und darin Ihre englische DTD Datei ablegen, k&ouml;nnen Sie sie genau gleich
 1640: wie CSS Dateien einbinden.
 1641: </para>
 1642: 
 1643: <para>
 1644: Um Mozilla anzuweisen f&uuml;r Label und Button Elemente in unserem xFly Beispiel
 1645: den Text anzupassen, k&ouml;nnen Sie Entit&auml;ten anstelle von Zeichenketten
 1646: zur Ausgabe dieser Texte verwenden. Da sich diese Entit&auml;ten in einer <filename>xfly.dtd</filename>
 1647: Datei in einem Unterverzeichnis befinden, kann somit sehr einfach ein anderes Sprachpaket verwendet
 1648: werden um die Sprache umzuschalten.
 1649: </para>
 1650: 
 1651: <para>
 1652: Auch diese Datei kann sehr einfach gehalten werden. <link linkend="mozilla-CHP-2-EX-12">Beispiel 2-12</link>
 1653: enth&auml;lt den Code f&uuml;r die <filename>xfly.dtd</filename> Datei, die Sie erstellen und im <filename>locale</filename>
 1654: Unterverzeichnis speichern sollten.
 1655: </para>
 1656: 
 1657: <example id="mozilla-CHP-2-EX-12" label="2-12">
 1658: <title>Der Inhalt der xfly.dtd Datei</title>
 1659: <programlisting>&lt;!ENTITY label.val       "Hello, Welcome to the xFly " &gt;
 1660: &lt;!ENTITY btn.lbl         "hello xFly " &gt;</programlisting>
 1661: </example>
 1662: 
 1663: <para>
 1664: Die aktualisierte XUL Datei, die das externe DTD verwendet wird in <link linkend="mozilla-CHP-2-EX-13">Beispiel 2-13</link>
 1665: ausgegeben. Wenn Sie die ben&ouml;tigten &Auml;nderungen an der XUL Datei vorgenommen haben, speichern Sie den Code aus <link linkend="mozilla-CHP-2-EX-13">Beispiel 2-13</link>
 1666: als <filename>xfly.xul</filename> im <filename>chrome/xfly/content/</filename> Verzeichnis.
 1667: </para>
 1668: 
 1669: <example id="mozilla-CHP-2-EX-13" label="2-13">
 1670: <title>XUL mit einem externen DTD</title>
 1671: <programlisting>&lt;?xml version="1.0"?&gt;
 1672: &lt;?xml-stylesheet href="chrome://global/skin" type="text/css"?&gt;
 1673: &lt;?xml-stylesheet href="chrome://xfly/skin" type="text/css"?&gt;
 1674: &lt;!DOCTYPE window SYSTEM "chrome://xfly/locale/xfly.dtd" &gt;
 1675: &lt;window title="Hello xFly"
 1676:   xmlns:html="http://www.w3.org/1999/xhtml"
 1677:   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 1678:   width="300"
 1679:   height="215"
 1680:   onload="centerWindowOnScreen( )"&gt;
 1681: &lt;script type="application/x-javascript"   
 1682:   src="chrome://global/content/dialogOverlay.js" /&gt;
 1683: &lt;script type="application/x-javascript"   
 1684:   src="chrome://xfly/content/xfly.js" /&gt;
 1685:  &lt;vbox align="left" id="vb"&gt;
 1686:   &lt;label id="xlabel" 
 1687:       <userinput>value="&amp;label.val;"</userinput> /&gt;
 1688:   &lt;image src="http://books.mozdev.org/xfly.gif" /&gt;
 1689:   &lt;button <userinput>label="&amp;btn.lbl;"</userinput> oncommand="greet( );" /&gt;
 1690:  &lt;/vbox&gt;
 1691: &lt;/window&gt;</programlisting>
 1692: </example>
 1693: 
 1694: <para>
 1695: Wie bei CSS und Scripts ein 'import'-Statement, weist die aktualisierte <literal>DOCTYPE</literal>
 1696: Definition am Anfang der Datei, Mozilla an, zus&auml;tzliche Entit&auml;ten als Teil des xFly
 1697: Pakets zu laden. Diese Entit&auml;ten -- englische Zeichenketten die in der Benutzerschnittstelle
 1698: ausgegeben werden -- k&ouml;nnen also ohne die Applikationsstruktur zu beinflussen
 1699: lokalisiert und internationalisiert werden.
 1700: </para>
 1701: 
 1702: <para>
 1703: Alle drei 'import'-Statements verwenden die <filename>chrome://</filename> URL
 1704: um xFly interne Ressourcen zu referenzieren. Dieser URL Type kann auch verwendet
 1705: werden, um auf andere Ressourcen wie Bilder, bereits definierte Zeichenketten und
 1706: Skript Funktionen wie <literal>centerWindowOnScreen( )</literal> innerhalb von Mozilla zuzugreifen.
 1707: </para>
 1708: 
 1709: <para>
 1710: Wenn Sie fertig sind das Paket Verzeichnis aufzusetzen, sollten Sie eine Struktur wie die
 1711: in <link linkend="mozilla-CHP-2-EX-14">Beispiel 2-14</link> haben:
 1712: </para>
 1713: 
 1714: <example id="mozilla-CHP-2-EX-14" label="2-14">
 1715: <title>Die Struktur des xFly Pakets</title>
 1716: <programlisting>chrome/
 1717:        xfly/
 1718:            content/
 1719:                   xfly.xul
 1720:                   xfly.js
 1721:                   contents.rdf
 1722:            locale/
 1723:                  en-US/
 1724:                       xfly.dtd
 1725:                       contents.rdf
 1726:            skin/
 1727:                   xfly.css
 1728:                   contents.rdf</programlisting>
 1729: </example>
 1730: 
 1731: </sect3>
 1732: </sect2>
 1733: <sect2 role="" id="mozilla-CHP-2-SECT-5.6" label="2.5.6">
 1734: <title>Ein Paket registrieren</title>
 1735: 
 1736: <para>
 1737: Pakete in Mozilla zu registrieren kann anfangs etwas verwirrend sein, deshalb sollten Sie sich
 1738: keine Sorgen machen, wenn Sie an diesem Punkt nicht alles auf Anhieb verstehen. Sp&auml;tere Kapitel
 1739: gehen genauer auf Verpackung und Registrierung ein, und Sie k&ouml;nnen jederzeit die Beispiel aus
 1740: diesem Buch verwenden um Ihre eigene Applikation zu installieren. Generell ben&ouml;tigt Mozilla
 1741: Manifeste eines Paketes um diese zu registrieren.
 1742: </para>
 1743: 
 1744: <para>
 1745: Obwohl die Registration normalerweise Teil der Installation ist und mit dem XPInstall API
 1746: vorgenommen wird, brauchen Sie einen schnellen Weg um Pakete zu installieren damit Sie
 1747: die xFly Applikation testen k&ouml;nnen. Deshalb werden wir einfach die Datei <filename>installed-chrome.txt</filename>
 1748: in Mozillas <filename>chrome</filename> Verzeichnis direkt anpassen.
 1749: </para>
 1750: 
 1751: <para>
 1752: Die Datei <filename>installed-chrome.txt</filename> enth&auml;lt eine Liste aller
 1753: Pakete die von Mozilla beim aufstarten registriert werden sollen. Wenn Sie
 1754: dieser Datei Eintr&auml;ge hinzuf&uuml;gen weisen Sie Mozilla an, dieses Paket beim
 1755: Aufstarten zu laden.
 1756: </para>
 1757: 
 1758: <para>
 1759: H&auml;ngen Sie die Eintr&auml;ge von <link linkend="mozilla-CHP-2-EX-15">Beispiel 2-15</link> am Ende der
 1760: <filename>installed-chrome.txt</filename> Datei im chrome Verzeichnis an.
 1761: </para>
 1762: 
 1763: <example id="mozilla-CHP-2-EX-15" label="2-15">
 1764: <title>Zus&auml;tzliche Eintr&auml;ge f&uuml;r installed-chrome.txt</title>
 1765: <programlisting>content,install,url,resource:/chrome/xfly/content/
 1766: skin,install,url,resource:/chrome/xfly/skin/
 1767: locale,install,url,resource:/chrome/xfly/locale/en-US/</programlisting>
 1768: </example>
 1769: 
 1770: <para>
 1771: Wenn Mozilla aufstartet sucht er die Paket-Manifeste, liest sie und
 1772: registriert das xFly Paket.
 1773: </para>
 1774: 
 1775: <para>
 1776: Wenn andere Benutzer Ihre Applikation installieren m&ouml;chten ohne dabei
 1777: <filename>installed-chrome.txt</filename> anzupassen, k&ouml;nnen Sie eine
 1778: JavaScript Installations-Datei erstellen, die das Paket herunterl&auml;dt
 1779: und registriert. Konsultieren Sie <link linkend="mozilla-CHP-6">Kapitel 6</link>
 1780: f&uuml;r zus&auml;tzliche Informationen &uuml;ber diesen Vorgang und die Verwendung von XPInstall.
 1781: </para>
 1782: 
 1783: </sect2>
 1784: </sect1>
 1785: 
 1786: <sect1 role="" id="mozilla-CHP-2-SECT-6" label="2.6">
 1787: <title>Die Applikation starten</title>
 1788: 
 1789: <para>
 1790: Wenn Ihr Paket registriert ist, k&ouml;nnen Sie folgende Optionen verwenden um sie zu starten.
 1791: </para>
 1792: 
 1793: <sect2 role="" id="mozilla-CHP-2-SECT-6.1" label="2.6.1">
 1794: <title>Windows start</title>
 1795: 
 1796: <para>
 1797: Wechseln Sie in das Mozilla Installations-Verzeichnis und starten Sie xFly
 1798: &uuml;ber die Kommandozeile:
 1799: </para>
 1800: 
 1801: <programlisting>mozilla -chrome chrome://xfly/content/</programlisting>
 1802: 
 1803: <para>
 1804: Sie k&ouml;nnen die xFly Applikation auch anhand eines Shortcuts auf Ihrem Desktop
 1805: starten indem Sie den Icon mit der rechten Maustaste anklicken und 'Eigenschaften'
 1806: ausw&auml;hlen. F&uuml;gen Sie folgenden Text in das 'Ziel' Feld ein:
 1807: </para>
 1808: 
 1809: <programlisting> -chrome chrome://xfly/content/</programlisting>
 1810: 
 1811: <para><link linkend="mozilla-CHP-2-FIG-6">Abbildung 2-6</link> zeigt den neuen 'Eigenschaften'-Dialog
 1812: nach der &Auml;nderung.
 1813: </para>
 1814: 
 1815: <figure id="mozilla-CHP-2-FIG-6" label="2-6">
 1816: <title>Ge&auml;nderte Shortcut Eigenschaften</title>
 1817: <graphic fileref="figs/moz_0206.png"/></figure>
 1818: 
 1819: <sect3 role="" id="mozilla-CHP-2-SECT-6.1.1" label="2.6.1.1">
 1820: <title>Unix start</title>
 1821: 
 1822: <para>
 1823: Wechseln Sie in das Mozilla Installations-Verzeichnis von Mozilla, und
 1824: starten Sie xFly mit:
 1825: </para>
 1826: 
 1827: <programlisting><userinput>./mozilla -chrome chrome://xfly/content/</userinput></programlisting>
 1828: 
 1829: </sect3>
 1830: 
 1831: <sect3 role="" id="mozilla-CHP-2-SECT-6.1.2" label="2.6.1.2">
 1832: <title>Macintosh start</title>
 1833: 
 1834: <para>
 1835: Starten Sie xFly indem Sie auf dem Desktop eine neue Datei mit folgendem Inhalt
 1836: erstellen:
 1837: </para>
 1838: 
 1839: <programlisting><userinput>-chrome chrome://xfly/content/</userinput></programlisting>
 1840: 
 1841: <para>
 1842: Um die Applikation zu starten k&ouml;nnen Sie entweder die Textdatei &uuml;ber das Mozilla Icon
 1843: ziehen, oder den CreatorType der Datei auf <literal>MOZZ</literal> setzen. Wenn Sie den
 1844: CreatorType &auml;ndern, sollte es m&ouml;glich sein die Applikation mit Doppelklick zu starten.
 1845: </para>
 1846: 
 1847: <para>
 1848: Sobald Sie die Applikation registriert haben, steht es Ihnen frei, Ihre Applikation
 1849: so weiterzuentwickeln, wie Sie es f&uuml;r richtig halten. Legen Sie die neuen
 1850: Komponenten in die entsprechenden Verzeichnisse und starten Sie die Applikation
 1851: neu. Sie k&ouml;nnen im <filename>content</filename> Verzeichnis zum Beispiel neue
 1852: XUL Dateien ablegen, die danach mit der Funktion <literal>window.openDialog( )</literal>
 1853: ge&ouml;ffnet werden.
 1854: </para>
 1855: 
 1856: <para>
 1857: Sie k&ouml;nnen <filename>xfly.xul</filename> auch neue Widgets hinzuf&uuml;gen, neue
 1858: Styles f&uuml;r <filename>xfly.css</filename> definieren, neue Funktionen f&uuml;r
 1859: <filename>xfly.js</filename> schreiben oder existierende Funktionen von
 1860: Mozillas SourceCode verwenden.
 1861: </para>
 1862: 
 1863: <warning role="ora"><para>Wenn Sie Probleme haben die xFly Applikation zu &auml;ndern und neu zu starten, gibt es ein paar
 1864: plattformspezifische Dinge die beachtet werden sollten. Wenn Sie auf Windows das QuickLaunch Feature
 1865: verwenden, kann dies dazu f&uuml;hren, dass &Auml;nderungen nicht &uuml;bernommen werden. Wenn auf UNIX die Dateirechte
 1866: nicht korrekt gesetzt sind, kann die ebenfalls zu Problemen f&uuml;hren. Stellen Sie also sicher, dass
 1867: QuickLaunch ausgeschaltet ist und &uuml;berpr&uuml;fen Sie die Dateirechte um m&ouml;gliche Probleme mit xFly zu l&ouml;sen.</para></warning>
 1868: 
 1869: <para>
 1870: Die Schritte, die in diesem Kapitel erkl&auml;rt wurden -- erstellen einer XUL Datei,
 1871: neue Features hinzuf&uuml;gen, die Applikation standalone anzeigen, aufteilen des
 1872: Codes in separate Dateien und die Paket-Struktur und das Registrieren und Starten des
 1873: Pakets -- sind die wichtigsten Teile einer Mozilla Applikation. Wenn Sie diese Teile verstehen,
 1874: werden Sie die weiteren Kapitel in diesem Buch einfacher nachvollziehen k&ouml;nnen.
 1875: </para>
 1876: 
 1877: </sect3>
 1878: </sect2>
 1879: </sect1>
 1880: </chapter>

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