Annotation of books/www/docbook/de/ch03.xml, revision 1.2

1.1       halter      1: <chapter label="3" id="mozilla-CHP-3">
                      2: <title>XUL Elemente und Features</title>
                      3: 
                      4: <para>
                      5: Die XML basierte Userinterface Language (XUL) enth&auml;lt alle Basis-Widgets die verwendet
                      6: werden um eine Benutzerschnittstelle zu einer Applikation zu bauen. Diese Interfaces umfassen
                      7: Tabs, Textareas, Buttons und Menus aber auch handliche Dinge an die Sie vielleicht garnicht
                      8: gedacht haben, wie das <literal>&lt;stack&gt;</literal> Widget oder der <literal>&lt;colorpicker&gt;</literal>.
                      9: </para>
                     10: 
                     11: <para>
                     12: <link linkend="mozilla-CHP-2">Kapitel 2</link> zeigte ein paar XUL Elemente die ein Fenster und
                     13: eine Basisapplikation darstellen. Dieses Kapitel geht n&auml;her auf XUL und dessen Elemente und 
                     14: F&auml;higkeiten ein, beschreibt die &Uuml;berlegungen dahinter, das Aussehen und Verhalten und die
                     15: g&auml;ngige Anwendung. Obwohl nicht vollkommen komplett, sollte Ihnen dieses Kapitel gen&uuml;gend
                     16: Informationen geben, um Ihre eigenen Mozilla Applikation erstellen k&ouml;nnen, vorallem wenn
                     17: Sie dazu die XUL Referenz in <link linkend="mozilla-APP-C">Anhang C</link> konsultieren.
                     18: </para>
                     19: 
                     20: <para>
                     21: Die hier vorgestellten Elemente wie Menus, Buttons, Trees und Boxes werden
                     22: in fast jeder Applikation verwendet. Die meisten Beispiele sind deshalb generisch
                     23: gehalten und f&uuml;gen sich ohne viele &Auml;nderungen in Ihre Applikation ein. Dieses Kapitel
                     24: enth&auml;lt sehr viele Informationen und wird Ihnen deshalb als Referenz dienen wenn Sie
                     25: beginnen Ihre eigenen Applikationen zu entwickeln.
                     26: </para>
                     27: 
                     28: 
                     29: <sect1 role="" id="mozilla-CHP-3-SECT-1" label="3.1">
                     30: <title>Das XUL Document Objekt</title>
                     31: 
                     32: <para>
                     33: Im Herzen jeder XUL Datei befindet sich das Document Objekt. Wie in HTML, beschreibt
                     34: <literal>document</literal> das XUL Dokument selbst -- und nicht das Umgebende Fenster.
                     35: <literal>document</literal> stellt verschiedene Methoden zur Verf&uuml;gung um Elemente in der
                     36: Dokument-Struktur zu finden, sie zu manipulieren oder ihre Styles anzupassen.
                     37: </para>
                     38: 
                     39: <para>
                     40: Das <literal>document</literal> Objekt stellt Methoden,
                     41: wie <literal>getElementById</literal>, <literal>getElementsByTagName</literal>, <literal>createElement</literal>
                     42: und <literal>createTextNode</literal> um den DOM zu manipulieren oder abzufragen bereit. Weitere Informationen zum DOM finden
                     43: Sie in <link linkend="mozilla-CHP-5">Kapitel 5</link>.
                     44: </para>
                     45: 
                     46: <para>
                     47: Andere Eigenschften des <literal>document</literal> Objektes enthalten die Breite oder
                     48: die H&ouml;he des Fensters, ein <literal>popupNode</literal> Feld welches Zugriff auf
                     49: das Element bietet das im Moment als Popup angezeigt wird (ein XUL Widget das
                     50: an einem anderen Widget angeh&auml;ngt ist, und &uuml;ber ihm angezeigt wird), ein
                     51: <literal>tooltipNode</literal> Feld, das den Zugriff auf den angezeigten Tooltip
                     52: erlaubt und <literal>documentElement</literal> um damit auf den Body des Dokuments
                     53: zuzugreifen:
                     54: </para>
                     55: 
                     56: <programlisting>var docEl = document.documentElement;
                     57: var secondLevelNodes = new Array( );
                     58: for (var I=0; I&lt;docEl.childNodes.length;I++)  {
                     59:     secondLevelNodes[I] = docEl.childNodes[I];
                     60: }</programlisting>
                     61: 
                     62: <para>
                     63: Dieses Beispiel erstellt einen Array aller secondlevel Nodes des Dokuments,
                     64: und k&ouml;nnte so erweitert werden, dass es den ganzen Baum ber&uuml;cksichtigt. Nodes
                     65: in dieser Weise anzusprechen gibt Ihnen einen einfachen und schnellen Weg Teile
                     66: des Dokumentes mit einem Script zu manipulieren.
                     67: </para>
                     68: 
                     69: <para>
                     70: Das <literal>document</literal> Objekt ist im aktuellen Fenster global. Daraus
                     71: l&auml;sst sich schliessen, dass jedes Fenster, jeder Dialog und jede Page ihr eigenes
                     72: <literal>document</literal> Objekt enth&auml;lt. Um auf die Eigenschaften zuzugreifen, verwenden Sie
                     73: <literal>document</literal> als Prefix f&uuml;r den Namen des Feldes das Sie ansprechen wollen:
                     74: </para>
                     75: 
                     76: <programlisting>var title = document.getElementById("bookTitle");</programlisting>
                     77: 
                     78: <para>
                     79: Um auf das <literal>document</literal> Objekt ausserhalb zuzugreifen,
                     80: wird <literal>window.opener</literal> verwendet (ad&uuml;: hiermit wird auf das Dokument des Parent-Fensters zugegriffen)
                     81: </para>
                     82: 
                     83: <programlisting>var title = window.opener.document.getElementById("bookTitle");</programlisting>
                     84: 
                     85: <sect2 role="" id="mozilla-CHP-3-SECT-1.1" label="3.1.1">
                     86: <title>XUL Parsing und das Document Object Model</title>
                     87: 
                     88: <para>
                     89: Mozilla pr&uuml;ft die Struktur jeder XUL Datei mit dem Expat XML Parser. Expat
                     90:  - eine in C geschriebene XML Verarbeitungsbibliothek - wurde bereits zu einem
                     91: fr&uuml;hen Zeitpunkt in Mozilla integriert, als der Code als OpenSource ver&ouml;ffentlicht wurde.
                     92: </para>
                     93: 
                     94: <para>
                     95: W&auml;hrend dem Parsing wird ein Inhaltsmodell basierend auf dem Document
                     96: Object Model (DOM) erstellt, das den Zugriff auf die Inhalte erleichtert.
                     97: Sobald Mozilla festgestellt hat dass alle
                     98: XML Tags einer korrekten Namespaces zuordnen kann, liest er das Dokument ein zweites Mal
                     99: um zu pr&uuml;fen ob auch alle verwendeten Elemente g&uuml;ltig sind. Falls dies fehlschl&auml;gt,
                    100: oder das Dokument anderweitig nicht den syntaktischen Regeln entspricht, wird eine
                    101: Fehlermeldung ausgegeben die n&auml;her auf das Problem hinweist.
                    102: </para>
                    103: 
                    104: <para>
                    105: Die erstellte Baumstruktur kann danach abgefragt, ge&auml;ndert und kopiert werden. <link linkend="mozilla-CHP-5">Kapitel 5</link>
                    106: geht n&auml;her darauf ein, wie JavaScript (die Hauptscriptsprache in Mozilla) und der DOM
                    107: interagieren. Um den Baum anzuschauen k&uml;nnen Sie den DOM-Inspector benutzen,
                    108: der mit Mozilla geliefert wird und erlaubt das Document Object Model jeder XUL Datei oder Website
                    109: anzuschauen und zu manipulieren. Mehr Informationen zum DOM Inspector finden Sie in <link linkend="mozilla-APP-B">Anhang B</link>.
                    110: </para>
                    111: 
                    112: </sect2>
                    113: </sect1>
                    114: 
                    115: <sect1 role="" id="mozilla-CHP-3-SECT-2" label="3.2">
                    116: <title>Applikationsfenster</title>
                    117: 
                    118: <para>
                    119: <literal>&lt;window&gt;</literal> ist nur eines der m&ouml;glichen Root-Elemente eines XUL Dokuments,
                    120: weitere sind <literal>&lt;overlay&gt;</literal>, <literal>&lt;dialog&gt;</literal>, <literal>&lt;page&gt;</literal>
                    121: und <literal>&lt;wizard&gt;</literal>. Overlays spielen eine wichtige Rolle wenn es darum geht den Quellcode zu modularisieren,
                    122: deshalb geht der <link linkend="mozilla-CHP-3-SECT-11">Abschnitt 3.11</link> sp&auml;ter in diesem Kapitel n&auml;her darauf ein.
                    123: </para>
                    124: 
                    125: <para>
                    126: Diese Root-Elemente enthalten alle auch die XUL Namespace und die XUL Window Attribute und
                    127: Methoden. Alle haben ein XUL <literal>document</literal> Objekt. Dennoch existieren spezielle
                    128: m&ouml;glichkeiten f&uuml;r jedes dieser Elemente. Welches Sie f&uuml;r Ihr XUL Dokument w&auml;hlen h&auml;ngt davon ab wozu Sie
                    129: das Fenster benutzen wollen. Ein <literal>&lt;window&gt;</literal> ist typischerweise ein top-level
                    130: Fenster, ein <literal>&lt;dialog&gt;</literal> second-level, der &uuml;ber einem anderen Fenster erscheint,
                    131: eine <literal>&lt;page&gt;</literal> ist ein Dokument in einem Frame und <literal>&lt;wizard&gt;</literal>
                    132: enth&auml;lt eine Anzahl Abschnitte, die eine nach der anderen durchlaufen werden k&ouml;nnen.
                    133: </para>
                    134: 
                    135: <sect2 role="" id="mozilla-CHP-3-SECT-2.1" label="3.2.1">
                    136: <title>Dialoge</title>
                    137: 
                    138: <para>
                    139: Dialoge haben oft eine bestimmte Aufgabe, wie die Anzeige von Fehlermeldungen oder
                    140: um Informationen vom Benutzer zu erhalten. Das <literal>&lt;dialog&gt;</literal>
                    141: Element wurde ziemlich sp&auml;t im Entwicklungsprozess definiert und 
                    142: ist auf die speziellen Bed&uuml;rfnisse von Dialogen ausgerichtet, inklusive seiner
                    143: relativen Positionierung zu anderen Fenstern (vorallem dem top-level Fenster) und der
                    144: Existenz spezieller Buttons um eine Operation zu akzeptieren oder zu verwerfen. Ein
                    145: Dialog sieht in XUL aus wie in <link linkend="mozilla-CHP-3-EX-1">Beispiel 3-1</link> gezeigt.
                    146: </para>
                    147: 
                    148: <example id="mozilla-CHP-3-EX-1" label="3-1">
                    149: <title>XUL dialog </title>
                    150: <programlisting>&lt;dialog id="turboDialog" buttons="accept" buttonpack="center"
                    151:         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                    152:         title="Empty the Cache"
                    153:         onunload="SetTurboPref( );"&gt;</programlisting>
                    154: </example>
                    155: 
                    156: <para>
                    157: Wie Sie sehen k&ouml;nnen, enth&auml;lt der Dialog den XUL Namespace und die Attribute
                    158: <literal>id</literal> und <literal>title</literal>. Andere Attribute wie
                    159: <literal>buttons</literal> und <literal>buttonpack</literal> tauchen im
                    160: normalen window-Kontext nicht auf.
                    161: </para>
                    162: 
                    163: <para>
                    164: Dialoge werden oft verwendet damit der Benutzer eine Aktion ausl&ouml;sen oder eine
                    165: Entscheidung treffen kann. Dazu gibt es spezielle Button Attribute. Zus&auml;tzlich zu
                    166: <literal>buttons</literal> und <literal>buttonpack</literal> gibt es eigene
                    167: Eventhandler f&uuml;r das Dialog Element -- <literal>ondialogaccept</literal>, 
                    168: <literal>ondialogcancel</literal> und <literal>ondialoghelp</literal> --
                    169: die zu den Buttons geh&ouml;ren, die in einem Dialog typischerweise angezeigt werden und Aktionen
                    170: ausf&uuml;hren k&ouml;nnen wenn der Benutzer sie verwendet. Wie bei <literal>onunload</literal>
                    171: k&ouml;nnen Funktionen direkt aus <literal>ondialogaccept</literal> aufgerufen werden, die
                    172: Methode, die ausgef&uuml;hrt wird, wenn der 'OK' Button gedr&uuml;ckt wird:
                    173: </para>
                    174: 
                    175: <programlisting>&lt;dialog id="flush" buttons="accept" buttonpack="center"
                    176:         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                    177:         title="&amp;exitWarningTitle.label;"
                    178:         ondialogaccept="doCacheFlush( );"&gt;</programlisting>
                    179: 
                    180: </sect2>
                    181: <sect2 role="" id="mozilla-CHP-3-SECT-2.2" label="3.2.2">
                    182: <title>Pages / Seiten</title>
                    183: 
                    184: <para>
                    185: Das <literal>&lt;page&gt;</literal> Element ist konzipiert um in Frames eines high-level Dokuments
                    186: angezeigt zu werden. Alleine sind sie keine top-level Fenster. In Mozilla wird <literal>page</literal>
                    187: oft verwendet um in den Preferences/Einstellungen die Panels zu gestalten.
                    188: </para>
                    189: 
                    190: <para>
                    191: Wie der Dialog in <link linkend="mozilla-CHP-3-EX-1">Beispiel 3-1</link>, enth&auml;lt das
                    192: <literal>&lt;page&gt;</literal> Element in <link linkend="mozilla-CHP-3-EX-2">Beispiel 3-2</link>
                    193: das bekannte Namespace Attribut (<literal>xmlns</literal>) und den load-Eventhandler(<literal>onload</literal>).
                    194: Das <literal>headertitle</literal> Attribut wird benutzt, wenn die Seite in einem anderen Fenster mit
                    195: eigenem Titel geladen werden soll.
                    196: </para>
                    197: 
                    198: <example id="mozilla-CHP-3-EX-2" label="3-2">
                    199: <title>XUL page </title>
                    200: <programlisting>&lt;page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                    201:       onload="parent.initPanel('chrome://communicator/content/pref/pref-fonts.xul');"
                    202:       headertitle="&amp;lHeader;"&gt;</programlisting>
                    203: </example>
                    204: 
                    205: <para>
                    206: Ein Anwendungsbeispiel f&uuml;r das <literal>page</literal> Elements finden Sie in den globalen
                    207: Preferences/Einstellungen der Mozilla Suite. <link linkend="mozilla-CHP-3-FIG-1">Abbildung 3-1</link>
                    208: zeigt das Layout des Panels. In <link linkend="mozilla-CHP-3-EX-2">Beispiel 3-2</link>
                    209: wird die Entit&auml;t <literal>&amp;lHeader;</literal> im Titel zu "Languages" aufgel&ouml;st und oberhalb der
                    210: Eigenschaftspanel Page angezeigt.
                    211: </para>
                    212: 
                    213: <para>
                    214: Das Hauptfenster ist ein XUL Dialog, der Inhalt ist
                    215: zweigeteilt. Auf der linken Seite wird ein Overlay, das eine Baumstruktur enth&auml;lt,
                    216: ausgegeben, auf der rechten Seite eine XUL <literal>page</literal>, die in einem
                    217: <literal>&lt;iframe&gt;</literal> geladen wurde.
                    218: </para>
                    219: 
                    220: <programlisting>&lt;iframe id="panelFrame" name="panelFrame" style="width:0px" flex="1"/&gt;</programlisting>
                    221: 
                    222: <figure id="mozilla-CHP-3-FIG-1" label="3-1">
                    223: <title>Preferences/Eigenschaften-Dialog als Page.</title>
                    224: <graphic fileref="figs/moz_0301.png"/></figure>
                    225: 
                    226: <para>
                    227: Wie in <link linkend="mozilla-CHP-3-FIG-1">Abbildung 3-1</link> gezeigt, f&uuml;hrt die Selektion eines Topics
                    228: aus dem linken Panel dazu, dass die Ansicht auf der rechten Seite wechselt. Obwohl in Realit&auml;t mehrere Scripts
                    229: verwendet werden, w&uuml;rde es reichen, das <literal>src</literal> Attribut des Frames zu &auml;ndern:
                    230: </para>
                    231: 
                    232: <programlisting>document.getElementById("panelFrame").setAttribute("src", "chrome://communicator/content/pref/pref-navigator.xul" );</programlisting>
                    233: 
                    234: </sect2>
                    235: <sect2 role="" id="mozilla-CHP-3-SECT-2.3" label="3.2.3">
                    236: <title>Wizards</title>
                    237: 
                    238: <para>
                    239: Auch dieser Window-Typ wurde f&uuml;r eine bestimmte Funktionalit&auml;t entwickelt -- um
                    240: den Benutzer durch einen Schritt-f&uuml;r-Schritt Prozess zu leiten. Einfach ein <literal>window</literal>
                    241: nach dem anderen zu benutzen w&uuml;rde zu einer inkonsistenten Benutzerschnittstelle f&uuml;hren, weil die Fenster
                    242: verschiedene Gr&ouml;ssen h&auml;tten und die Performance tief w&auml;re. Dies kann st&ouml;hren, vorallem wenn Sie einen
                    243: Benutzer durch einen unbekannten Prozess, wie das einrichten eines neuen Benuterkontos f&uuml;hren wollen. Deshalb
                    244: wurde das bekannte Wizard-Prinzip mit dem <literal>wizard</literal> Element erm&ouml;glicht.
                    245: <link linkend="mozilla-CHP-3-EX-3">Beispiel 3-3</link> zeigt wie Mozilla Wizard Dialoge verarbeitet.
                    246: </para>
                    247: 
                    248: <example id="mozilla-CHP-3-EX-3" label="3-3">
                    249: <title>Ein XUL Wizard</title>
                    250: <programlisting><userinput>&lt;wizard</userinput> id="NewAccount" title="Account Set-up"
                    251:     onwizardcancel="return Cancel( );"
                    252:     onwizardfinish="return Finish( );"
                    253:     onload="onLoad( );"
                    254:     width="44em" height="30em"
                    255:     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                    256:     xmlns:nc="http://home.netscape.com/NC-rdf#"&gt;
                    257:   <userinput>&lt;wizardpage</userinput> id="wPage1" pageid="page-1" label="New Account"
                    258:       onpageshow="return acctNamePageInit( );"
                    259:       onpageadvanced="nextPage(this)"&gt;
                    260:     &lt;vbox flex="1"&gt;
                    261:       &lt;description&gt;Welcome and enjoy the wizardry&lt;/description&gt;
                    262:       &lt;image src="page1.png"/&gt;
                    263:     &lt;/vbox&gt;
                    264:   &lt;/wizardpage&gt;
                    265:   &lt;wizardpage id="wPage2"/&gt;
                    266:   &lt;wizardpage id="wPage3"/&gt;
                    267: &lt;/wizard&gt;</programlisting>
                    268: </example>
                    269: 
                    270: <para>
                    271: Eine <literal>wizardpage</literal> ist &auml;hnlich wie eine <literal>page</literal>, da auch sie in
                    272: ein Fenster geladen wird. Der Unterschied, wie in <link linkend="mozilla-CHP-3-EX-3">Beispiel 3-3</link>
                    273: ersichtlich, ist, dass sich die page innerhalb des <literal>&lt;wizard&gt;</literal> Elements befindet. Sie
                    274: k&ouml;nnen Wizardpages in der Reihenfolge anordnen in der sie aufgerufen werden. Wenn ein Benutzer eine Seite akzeptiert,
                    275: wird automatisch die n&auml;chste geladen. In <link linkend="mozilla-CHP-3-EX-3">Beispiel 3-3</link>,
                    276: ist der Inhalt der ersten Page ein Text und ein Bild und die anderen Seiten definieren nur <literal>id</literal>
                    277: Attribute (dies ist genau wie wenn Sie die Pages zur Laufzeit als Overlay laden m&ouml;chten). Sie k&ouml;nnen den Wizard-Code
                    278: aus <link linkend="mozilla-CHP-3-EX-3">Beispiel 3-3</link> anschauen, wenn Sie die <literal>&lt;?xml</literal> <literal>version="1.0"?&gt;</literal>
                    279: Pr&auml;ambel am Anfang des Dokuments notieren, den Pages zwei und drei ein <literal>label</literal> Attribut geben, und danach mit den Navigationsbuttons
                    280: im Wizard vor- und zur&uuml;ck springen nachdem Sie die Datei in Mozilla geladen haben.
                    281: </para>
                    282: 
                    283: </sect2>
                    284: </sect1>
                    285: 
                    286: <sect1 role="" id="mozilla-CHP-3-SECT-3" label="3.3">
                    287: <title>Applikations-Widgets</title>
                    288: 
                    289: <para>
                    290: Wie die meisten Applikation, k&ouml;nnte auch Ihre Menus und Toolbars als Teil der
                    291: Grundschnittstelle enthalten. Menus und Toolbars sind gebr&auml;uchliche mehrzweck Widgets
                    292: welche den meisten Benutzern bekannt sein sollten. Menus werden oft als Teil der Menuleiste
                    293: angezeigt, die alle Funktionalit&auml;ten der Applikation anbietet, oder als einfaches Menu um
                    294: eine Auswahl aus mehreren Elementen zu treffen. Buttons erlauben den schnellen Zugriff auf
                    295: die meistgebrauchten Funktionalit&auml;ten und geben dem Benutzer eine M&ouml;glichkeit auf die Applikation
                    296: einzuwirken. Nebst diesen einfachen Dingen, bietet XUL aber auch Widgets um fast alle Interfaces
                    297: zu kreieren (und dank Mozillas Flexibilit&auml;t steht es Ihnen frei selbst die n&uuml;chtersten Menus so
                    298: zu stylen wie sie es w&uuml;nschen.
                    299: </para>
                    300: 
                    301: <sect2 role="" id="mozilla-CHP-3-SECT-3.1" label="3.3.1">
                    302: <title>Die Toolbox</title>
                    303: 
                    304: <para>
                    305: Wenn Ihre Applikationen wachsen und an Komplexit&auml;t gewinnen, ist die Toolbox ein
                    306: netter Weg um Menus, Toolbars und andere Widgets zu plazieren. Eine <literal>&lt;toolbox&gt;</literal>
                    307: ist ein spezieller Container, der eine oder mehrere Tool- und/oder Menubars enth&auml;lt. Eine Mozilla Toolbar
                    308: implementiert ein <literal>toolbargrippy</literal> und eine Box, die die Kind-Elemente enth&auml;lt.
                    309: Das <literal>toolbargrippy</literal> ist eine Markierung auf der linken Seite der Toolbar und erlaubt
                    310: dem Benutzer die Toolbar ein- beziehungsweise wieder auszurollen. Dies hilft ihm den Raum auf seinem
                    311: Bildschirm besser Auszunutzen.
                    312: </para>
                    313: 
                    314: <sect3 role="" id="mozilla-CHP-3-SECT-3.1.1" label="3.3.1.1">
                    315: <title>Toolbars</title>
                    316: 
                    317: <para>
                    318: Das <literal>&lt;toolbar&gt;</literal> Element in <link linkend="mozilla-CHP-3-EX-4">Beispiel 3-4</link>
                    319: enth&auml;lt Buttons um verschiedene Applikationsfunktionen auszuf&uuml;hren. Buttons sind die gew&ouml;hnlichsten
                    320: Kind-Elemente einer Toolbar, jedoch bei weitem nicht die einzigen.
                    321: </para>
                    322: 
                    323: <example id="mozilla-CHP-3-EX-4" label="3-4">
                    324: <title>Toolbar mit Buttons und Spacing</title>
                    325: <programlisting>&lt;toolbox&gt;
                    326:   &lt;toolbar id="fixed-toolbar" class="toolbar-primary" 
                    327:       tbautostretch="always" persist="collapsed"&gt;
                    328:     &lt;toolbarbutton id="newfileBtn" label="New" oncommand="doNew( );" /&gt;
                    329:     &lt;toolbarseparator /&gt;
                    330:     &lt;toolbarbutton id="openfileBtn" label="Open" oncommand="doOpen( );" /&gt;
                    331:     <emphasis role="bold">&lt;spacer flex="1" /&gt;</emphasis>
                    332:   &lt;/toolbar&gt;
                    333: &lt;/toolbox&gt;</programlisting>
                    334: </example>
                    335: 
                    336: <para>
                    337: Um einen Leerraum zwischen zwei Elementen auszugeben wird das <literal>&lt;spacer&gt;</literal> Element verwendet.
                    338: In <link linkend="mozilla-CHP-3-EX-4">Beispiel 3-4</link>wird der ganze Leerraum der nach dem Zeichnen der Buttons
                    339: &uuml;brig bleibt, <emphasis>nach</emphasis> den Buttons ausgegeben. Dies ist weil der Spacer an dieser Stelle flexibel definiert
                    340: wurde, w&auml;hrend die Buttons eine feste Gr&ouml;sse haben. Leerr&auml;ume die an anderen Stellen eingef&uuml;gt werden, teilen sich
                    341: den Platz anhand der Flexibilit&auml;t die &uuml;ber das <literal>flex</literal> Attribut zugewiesen wird. Sie k&ouml;nnen die Toolbar
                    342: aus <link linkend="mozilla-CHP-3-EX-4">Beispiel 3-4</link> so erweitern, dass ein Buttons f&uuml;r die Druckfunktion ganz rechts ausgegeben wird:
                    343: </para>
                    344: 
                    345: <programlisting>&lt;toolbarbutton id="newfileBtn" label="New" oncommand="doNew( );" /&gt;
                    346: &lt;toolbarseparator /&gt;
                    347: &lt;toolbarbutton id="openfileBtn" label="Open" oncommand="doOpen( );" /&gt;
                    348: <userinput>&lt;spacer flex="1" /&gt;</userinput>
                    349: &lt;toolbarbutton id="printBtn" label="Print" oncommand="doPrint( );" /&gt;</programlisting>
                    350: 
                    351: <para>
                    352: Das <literal>&lt;toolbarseparator&gt;</literal> Element erzeugt keine neuen
                    353: Leerr&auml;ume zwischen den ersten beiden <literal>toolbarbuttons</literal>. Die angezeigten
                    354: Leerr&auml;ume zwischen den Buttons und dem Button f&uuml;r die Druckfunktion sind auf die
                    355: Definition des <literal>flex</literal> Attributes der spacer-Elemente als 1 zur&uuml;ckzuf&uuml;hren.
                    356: </para>
                    357: 
                    358: </sect3>
                    359: 
                    360: <sect3 role="" id="mozilla-CHP-3-SECT-3.1.2" label="3.3.1.2">
                    361: <title>Menubar</title>
                    362: 
                    363: <para>
                    364: Unter den anderen eingebetteten Elemente in einer Toolbox ist auch
                    365: die XUL <literal>&lt;menubar&gt;</literal>. <literal>&lt;menubar&gt;</literal> selbst ist
                    366: wiederum ein Container der ein oder mehrere Child-Elemente enthalten kann.
                    367: </para>
                    368: 
                    369: <programlisting>&lt;menubar id="fixed-menubar"&gt;
                    370:   &lt;menu label="Quantity" /&gt;
                    371:   &lt;menu label="Color" /&gt;
                    372: &lt;/menubar&gt;</programlisting>
                    373: 
                    374: <warning id="ch03-2-fm2xml" role="ora">
                    375: <para>
                    376: Es gibt einen Vorbehalt bei der Verwendung von <literal>menubar</literal> den Sie kennen sollten.
                    377: Auf Mac OS wird die Menubar an der Oberkante des Bildschrims angezeigt. Falls Ihre Menubar Elemente
                    378: enth&auml;lt die keine Menu-Elemente sind, werden diese nicht ausgegeben, da das Betriebssystem nicht weiss
                    379: wie die Widgets ausgegeben werden m&uuml;ssten.
                    380: </para>
                    381: </warning>
                    382: 
                    383: <para>
                    384: Wie <link linkend="mozilla-CHP-3-EX-5">Beispiel 3-5</link> zeigt, ist es sehr einfach eine
                    385: kleine Applikation mit einer typischen Menubar zu erstellen:
                    386: </para>
                    387: 
                    388: <example id="mozilla-CHP-3-EX-5" label="3-5">
                    389: <title>Menubar einer Applikation</title>
                    390: <programlisting>&lt;?xml version="1.0"?&gt;
                    391: &lt;window 
                    392:    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
                    393: &lt;menubar id="appbar"&gt;
                    394:   &lt;menu label="File"&gt;
                    395:      &lt;menupopup&gt;
                    396:        &lt;menuitem label="New"/&gt;
                    397:        &lt;menuitem label="Open"/&gt;
                    398:      &lt;/menupopup&gt;
                    399:   &lt;/menu&gt;
                    400:   &lt;menu label="Edit" /&gt;
                    401: &lt;/menubar&gt;
                    402: &lt;/window&gt;</programlisting>
                    403: </example>
                    404: 
                    405: <para>
                    406: Die komplette XUL Datei aus <link linkend="mozilla-CHP-3-EX-5">Beispiel 3-5</link> erzeugt die Menubar
                    407: die in <link linkend="mozilla-CHP-3-FIG-2">Abbildung 3-2</link> angezeigt wird.
                    408: </para>
                    409: 
                    410: <figure id="mozilla-CHP-3-FIG-2" label="3-2">
                    411: <title>Menubar einer Applikation</title>
                    412: <graphic fileref="figs/moz_0302.png"/></figure>
                    413: 
                    414: </sect3>
                    415: </sect2>
                    416: <sect2 role="" id="mozilla-CHP-3-SECT-3.2" label="3.3.2">
                    417: <title>Auswahllisten</title>
                    418: 
                    419: <para>
                    420: Es gibt verschiedene Wege um in Mozilla Listen zu erstellen. Dieser Abschnitt zeigt anhand eines
                    421: Beispiels drei Varianten um einem Benutzer eine Auswahlliste anzuzeigen. Die Optionen werden in
                    422: <link linkend="mozilla-CHP-3-FIG-3">Abbildung 3-3</link> gezeigt. Alle drei Representationsformen
                    423: -- <emphasis>Menus</emphasis>, <emphasis>Popups</emphasis> und <emphasis>Menulisten</emphasis> --
                    424: haben eine Gemeinsamkeit: sie alle verwenden Menuitems um die Auswahl anzuzeigen.
                    425: </para>
                    426: 
                    427: <programlisting>&lt;menuitem label="Tachinidae"   oncommand="changeF(1)"/&gt;
                    428: &lt;menuitem label="Tanyderidae"   oncommand="changeF(2)"/&gt;
                    429: &lt;menuitem label="Tipulidae"   oncommand="changeF(3)"/&gt;
                    430: &lt;menuitem label="Syrphidae"   oncommand="changeF(4)"/&gt;
                    431: &lt;menuitem label="Tephritidae"   oncommand="changeF(5)"/&gt;</programlisting>
                    432: 
                    433: <para>
                    434: Wenn Sie die <literal>menuitem</literal> Elemente oben in einem Menu, einer Menu List oder
                    435: einem Popup Window verpacken, ergeben sich die Variationen aus <link linkend="mozilla-CHP-3-FIG-3">
                    436: Abbildung 3-3</link>.
                    437: </para>
                    438: 
                    439: <figure id="mozilla-CHP-3-FIG-3" label="3-3">
                    440: <title>Visuelle Unterschiede von Menu Widgets</title>
                    441: <graphic fileref="figs/moz_0303.png"/></figure>
                    442: 
                    443: <sect3 role="" id="mozilla-CHP-3-SECT-3.2.1" label="3.3.2.1">
                    444: <title>Menus</title>
                    445: 
                    446: <para>
                    447: Menus sind wesentlich flexibler als auf den ersten Blick erwartet wird. Zum Beispiel k&ouml;nnen sie
                    448: &uuml;berall in der Benutzerschnittstelle vorkommen, und m&uuml;ssen nicht an der oberen Kante der Applikation
                    449: befestigt sein. Sie k&ouml;nnen in Buttons, Trees oder auch ganz alleine vorkommen.
                    450: <link linkend="mozilla-CHP-3-EX-6">Beispiel 3-6</link> zeigt die Basisstruktur eines Menus.
                    451: </para>
                    452: 
                    453: <example id="mozilla-CHP-3-EX-6" label="3-6">
                    454: <title>Ein Menu Beispiel</title>
                    455: <programlisting>&lt;menu label="Quantity"&gt;
                    456:   &lt;menupopup&gt;
                    457:     &lt;!-- menuitems here --&gt;
                    458:   &lt;/menupopup&gt;
                    459: &lt;/menu&gt;</programlisting>
                    460: </example>
                    461: 
                    462: <para>
                    463: Es gibt eine rigide Ordnung der eingebetteten Komponenten in einem Menu.
                    464: Ein Menu enth&auml;lt ein <literal>&lt;menupopup&gt;</literal>, das
                    465: seinerseits eines oder mehrere Menuitems enth&auml;lt. Optional k&ouml;nnen Sie
                    466: Gruppen von Menuitems mit Hilfe des <literal>&lt;menuseparator&gt;</literal>,
                    467: der eine Linie zwischen die Menu Items zeichnet, aufteilen.
                    468: </para>
                    469: 
                    470: </sect3>
                    471: 
                    472: <sect3 role="" id="mozilla-CHP-3-SECT-3.2.2" label="3.3.2.2">
                    473: <title>Popups</title>
                    474: 
                    475: <para>
                    476: Ein Popup ist entweder ein <literal>&lt;menupopup&gt;</literal> oder ein <literal>&lt;popup&gt;</literal>
                    477: Element. Letzteres kann auf verschiedene Arten verwendet werden, aber <link linkend="mozilla-CHP-3-EX-7">
                    478: Beispiel 3-7</link> konzentriert sich auf die Verwendung in Kontextmenus.
                    479: </para>
                    480: 
                    481: <example id="mozilla-CHP-3-EX-7" label="3-7">
                    482: <title>Kontextmenu mit einem Popup</title>
                    483: <programlisting>&lt;popup <userinput>id="FlyContext"</userinput>
                    484:     onpopupshowing="return doThis( );"
                    485:     onpopuphiding=" return doThat( );"&gt;
                    486:   &lt;!-- menuitems here --&gt;
                    487: &lt;/popup&gt;</programlisting>
                    488: </example>
                    489: 
                    490: <para>
                    491: Um ein Kontextpopup f&uuml;r dessen aktivierung bereit zu machen, sind ein
                    492: paar Vorkehrungen zu treffen. Als erstes m&uuml;ssen Sie das <literal>Popup</literal>
                    493: anhand der <literal>id</literal> mit einem anderen Element der Benutzerschnittstelle,
                    494: mit dem selben Kontext verbinden:
                    495: </para>
                    496: 
                    497: <programlisting>&lt;toolbar id="main-toolbar" <userinput>context="FlyContext"</userinput> /&gt;</programlisting>
                    498: 
                    499: <para>
                    500: Wenn die Toolbar angeklickt wird, &ouml;ffnet sich das verbundene Popup. Sie
                    501: k&ouml;nnen Skripts ausf&uuml;hren wenn das Popup angezeigt/geschlossen wird
                    502: indem Sie die Methoden <literal>onpopupshowing</literal> und
                    503: <literal>onpopuphiding</literal> verwenden, genau wie wenn Sie Eintr&auml;ge
                    504: in einem dynamischen Menu &auml;ndern.
                    505: </para>
                    506: 
                    507: <para>
                    508: Der zweite Schritt zeigt wie mehrere Popups durch ein <literal>&lt;popupset&gt;</literal>
                    509: verbunden werden. Obwohl es nicht unbedingt n&ouml;tig ist, Popup Sets zu verwenden,
                    510: ist es doch praktisch, da die Organisation dieser frei platzierten Elemente
                    511: einfacher wird. <footnote label="1"><para>frei platziert, weil die Position
                    512: nicht wie bei Menus und Buttons durch den Platz in der XUL Struktur vorgegeben wird.
                    513: </para></footnote>Weiter gibt es uns so die M&ouml;glichkeit die Popups einfacher mit
                    514: einem Overlay zu verwenden.
                    515: </para>
                    516: 
                    517: </sect3>
                    518: 
                    519: <sect3 role="" id="mozilla-CHP-3-SECT-3.2.3" label="3.3.2.3">
                    520: <title>Menulisten</title>
                    521: 
                    522: <para>
                    523: Eine andere Art vion Popup ist die Verwendung von Menu Listen. Eine Menu Liste ist
                    524: eine Auswahl von Optionen von denen nur eine einzige w&auml;hlbar ist, oft in der Form
1.2     ! halter    525: eine drop-down Menus - wof&uuml;r XUL das <literal>&lt;menulist&gt;</literal>  Element anbietet.
1.1       halter    526: <link linkend="mozilla-CHP-3-EX-8">Beispiel 3-8</link>zeigt eine Menuliste mit einer kleinen
                    527: Auswahl. Wie bei den anderen Popup Beispielen, wird der Code im <literal>oncommand</literal>
                    528: Eventhandler ausgef&uuml;hrt, wenn der Benutzer ein Menuitem ausw&auml;hlt.
                    529: </para>
                    530: 
                    531: <example id="mozilla-CHP-3-EX-8" label="3-8">
                    532: <title>Eine XUL Menuliste </title>
                    533: <programlisting>&lt;menulist id="FlyInput"&gt;
                    534:   &lt;menupopup&gt;
                    535:     &lt;!-- menuitems here --&gt;
                    536:   &lt;/menupopup&gt;
                    537: &lt;/menulist&gt;</programlisting>
                    538: </example>
                    539: 
                    540: <para>Das <literal>menulist</literal> Widget bietet Funktionailit&auml;t, die &uuml;ber die eines normalen Menus hinausgeht.
                    541: Die Menuliste kann editiert werden, wenn der Benutzer einen Eintrag hinzuf&uuml;gen will. In diesem Fall m&uuml;sste
                    542: die <literal>menulist</literal> Definition in <link linkend="mozilla-CHP-3-EX-8">Beispiel 3-8</link> wie folgt ge&auml;ndert werden:
                    543: </para>
                    544: 
                    545: <programlisting>&lt;menulist id="FlyInput" editable="true"
                    546:     oninput="onInputFly( );"
                    547:     onchange="onChangeFly( );"&gt;</programlisting>
                    548: 
                    549: <para>Der Wert <literal>true</literal> des <literal>editable</literal> Attributs erlaubt &Auml;nderungen an der Liste.
                    550: &Auml;nderungen k&ouml;nnen dabei w&auml;hrend der Eingabe dank des <literal>oninput</literal> Handlers direkt validiert werden. Das
                    551: Attribut <literal>onchange</literal> kann benutzt werden, um ein Script auszuf&uuml;hren, wenn die Selektion &auml;ndert.
                    552: </para>
                    553: 
                    554: </sect3>
                    555: </sect2>
                    556: </sect1>
                    557: 
                    558: <sect1 role="" id="mozilla-CHP-3-SECT-4" label="3.4">
                    559: <title>Tabellarische und hierarchische Informationen</title>
                    560: 
                    561: <para>
                    562: Es existieren viele M&ouml;glichkeiten, <indexterm class="startofrange" id="mozilla-IDXTERM-273"><primary> tabellarische </primary></indexterm>
                    563: oder <indexterm class="startofrange" id="mozilla-IDXTERM-274"><primary>hierarchische</primary></indexterm> Informationen anzuzeigen.
                    564: Meist werden dazu Baum- oder Tabellenartige Strukturen verwendet, welche beide (Tree/Table) in Mozilla's XPFE als Elemente existieren.
                    565: In diesem Abschnitt schauen wir uns List Boxes, Trees und Grids an. Mit der Ausnahme von Tree, sind diese Elemente eingeschr&auml;nkt
                    566: welche Inhalte sie aufnehmen k&ouml;nnen. Tree kann im Moment nur Texte und Bilder enthalten und Grids werden vorallem dazu eingesetzt
                    567: komplexere Inhalte zu gruppieren, wie wir in den folgenden Beispielen erl&auml;utern werden.
                    568: </para>
                    569: 
                    570: <sect2 role="" id="mozilla-CHP-3-SECT-4.1" label="3.4.1">
                    571: <title>List Boxes</title>
                    572: 
                    573: <para><literal>&lt;listbox&gt;</literal> wird eingesetzt, um tabellarische Informationen anzuzeigen.
                    574: <link linkend="mozilla-CHP-3-EX-9">Beispiel 3-9</link> zeigt ein <literal>listbox</literal> Widget
                    575: mit allen Basisfunktionen, inklusive der Definition der Anzahl Spalten (<literal>listcol</literal>),
                    576: der <literal>listbox</literal> Kopfzeile (<literal>listhead</literal>) und eines Listen Elements
                    577: (<literal>listitem</literal>).
                    578: </para>
                    579: 
                    580: <example id="mozilla-CHP-3-EX-9" label="3-9">
                    581: <title>Das Listbox Widget </title>
                    582: <programlisting>&lt;listbox rows="5" class="list" id="FlyTree" onselect="SelectFly( )"&gt;
                    583:   &lt;listcols&gt;
                    584:     &lt;listcol flex="1"/&gt;
                    585:     &lt;splitter class="tree-splitter"/&gt;
                    586:     &lt;listcol flex="1"/&gt;
                    587:   &lt;/listcols&gt;
                    588:   &lt;listhead&gt;
                    589:     &lt;listheader label="Name" /&gt;
                    590:     &lt;listheader label="Type" /&gt; 
                    591:   &lt;/listhead&gt;
                    592:   &lt;listitem id="type-d"&gt;
                    593:     &lt;listcell label="Syrphidae" /&gt;
                    594:     &lt;listcell label="flower" /&gt; 
                    595:   &lt;/listitem&gt;
                    596:   &lt;!-- More Items --&gt;
                    597: &lt;/listbox&gt;</programlisting>
                    598: </example>
                    599: 
                    600: <para>Den wichtigsten Punkt den wir uns in <link linkend="mozilla-CHP-3-EX-9">Beispiel 3-9</link>  merken sollten, ist die
                    601: Struktur der Verschachtelung in einem <literal>listbox</literal> Element. Die Anzahl Spalten wird mit <literal>&lt;listcol&gt;</literal>
                    602: Elementen angegeben, die von einem <literal>&lt;listcols&gt;</literal> Set umgeben sind. <link linkend="mozilla-CHP-3-EX-9">Beispiel 3-9</link>
                    603: hat zwei Spalten, die von einem verschiebbaren <literal>grippy</literal> getrennt werden, das auch als Trenner im Listenkopf verwendet wird.
                    604: Die Zellen dieser Spalten sind in einem einzelnen <literal>&lt;listitem&gt;</literal> gruppiert. Die Kopfzeile ist optional und hat die gleiche Struktur
                    605: wie ein Listitem. Wenn Sie diese Struktur einmal erstellt haben, k&ouml;nnen Sie Ihre Inhalte in eine tabellarischer Form anzeigen.
                    606: </para>
                    607: 
                    608: <tip id="ch03-4-fm2xml" role="ora">
                    609: <para>Eine <literal>listbox</literal> kann keine eingebetteten/multilevel Reihen enthalten. Weiter ist zu beachten,
                    610: dass das 'class'-Attribut oben, der Listbox ihr einzigartiges Aussehen verleiht. Listboxes und Trees verwenden
                    611: oft 'class'-basierte Styles um ihr Aussehen und ihre Positionierung zu definieren (bsp: der Column Splitter in
                    612: <link linkend="mozilla-CHP-3-EX-9">Beispiel 3-9</link>).
                    613: </para>
                    614: </tip>
                    615: 
                    616: <para><link linkend="mozilla-CHP-3-EX-9">Beispiel 3-9</link> enth&auml;lt den Sourcecode f&uuml;r die Listbox aus <link linkend="mozilla-CHP-3-FIG-4">Abbildung 3-4</link>. 
                    617: </para>
                    618: 
                    619: <figure id="mozilla-CHP-3-FIG-4" label="3-4">
                    620: <title>Listbox</title>
                    621: <graphic fileref="figs/moz_0304.png"/></figure>
                    622: 
                    623: </sect2>
                    624: <sect2 role="" id="mozilla-CHP-3-SECT-4.2" label="3.4.2">
                    625: <title>High Performance Trees</title>
                    626: 
                    627: <para>Eine <literal>&lt;listbox&gt;</literal> kann nur bestimmte Inhalte aufnehmen. Zur besseren Skalierung,
                    628: und f&uuml;r multilevel Eigenschaften, wurde das <literal>&lt;tree&gt;</literal> Element kreiert. <literal>&lt;tree&gt;</literal>
                    629: ist ein fortschrittliches Tree Widget, das urspr&uuml;nglich f&uuml;r die <indexterm id="IXT-3-576"><primary>Mail/News</primary></indexterm>
                    630: Komponente von Mozilla erfunden wurde. In seiner ersten Form nannte man es <literal>outliner</literal> Widget.
                    631: </para>
                    632: 
                    633: <para>
                    634: Tree wurde konzipiert um hohe Performance f&uuml;r grosse Listen zu erreichen. Beispiele
                    635: daf&uuml;r sind Newsgroups, Mail Ordner und andere Applikationen die grosse Datenmengen
                    636: verwalten sollen. Das Tree Widget hat ein einfacheres Layout, ist aber trotzdem etwas
                    637: komplizierter in der Anwendung, da es sogenannte 'Views' verwendet um geordnete Daten
                    638: anzuzeigen.
                    639: </para>
                    640: 
                    641: <sect3 role="" id="mozilla-CHP-3-SECT-4.2.1" label="3.4.2.1">
                    642: <title>Tree Funktionalit&auml;t</title>
                    643: 
                    644: <para>
                    645: Die Implementation des Tree Widgets unterscheidet sich von den anderen insofern, dass die Daten
                    646: immer erst angezeigt werden wenn der entsprechende Inhalt in den Sichtbereich des Benutzers kommt. Trees
                    647: sind deshalb besonders effizient um lange Listen von Daten anzuzeigen. <link linkend="mozilla-CHP-3-TABLE-1">Tabelle 3-1</link>
                    648: enth&auml;lt einige der Funktionalit&auml;ten des Trees:
                    649: </para>
                    650: 
                    651: <table id="mozilla-CHP-3-TABLE-1" label="3-1">
                    652: 
                    653: <title>Die wichtigsten Features von Tree</title>
                    654: <tgroup cols="3">
                    655: <colspec colnum="1" colname="col1"/>
                    656: <colspec colnum="2" colname="col2"/>
                    657: <colspec colnum="3" colname="col3"/>
                    658: <thead>
                    659: <row>
                    660: <entry>
                    661: <para>Reihen Features</para>
                    662: </entry>
                    663: <entry>
                    664: <para>Spalten Features</para>
                    665: </entry>
                    666: <entry>
                    667: <para>Visuelle Features</para>
                    668: </entry>
                    669: </row>
                    670: </thead>
                    671: <tbody>
                    672: <row>
                    673: <entry>
                    674: <para>Normale oder hierarchische Reihen</para>
                    675: </entry>
                    676: <entry>
                    677: <para>Mehrspaltig</para>
                    678: </entry>
                    679: <entry>
                    680: <para>Jede Zelle kann vor dem Text ein Bild enthalten</para>
                    681: </entry>
                    682: </row>
                    683: <row>
                    684: <entry>
                    685: <para>Multiselektion basierend auf Selektionsumfang</para>
                    686: </entry>
                    687: <entry>
                    688: <para>Gr&ouml;ssen&auml;nderung via Maus</para>
                    689: </entry>
                    690: <entry>
                    691: <para>Aussehen jedes Elements (row, cell, image, etc) kann &uuml;ber CSS definiert werden</para>
                    692: </entry>
                    693: </row>
                    694: <row>
                    695: <entry>
                    696: <para>Drag und drop, entweder auf Reihen, oder zwischen Reihen</para>
                    697: </entry>
                    698: <entry>
                    699: <para>Spaltenanzeige einstellbar &uuml;ber Popup Menu in der rechten, oberen Ecke</para>
                    700: </entry>
                    701: <entry>
                    702: <para>Aussehen des Drop-Feedbacks kann via CSS angepasst werden</para>
                    703: </entry>
                    704: </row>
                    705: <row>
                    706: <entry>
                    707: </entry>
                    708: <entry>
                    709: <para>Der Tree kann via Drag und Drop neu geordnet werden</para>
                    710: </entry>
                    711: <entry>
                    712: <para>Container &ouml;ffnen, nachdem mit der Maus eine bestimmte Zeit &uuml;ber dem geschlossenen Container gewartet wird
                    713: </para>
                    714: </entry>
                    715: </row>
                    716: <row>
                    717: <entry>
                    718: </entry>
                    719: <entry>
                    720: <para>Sortieren via Click auf die Kopfzeile, eigene Views k&ouml;nnen eigene Sortierreihenfolgen anbieten
                    721: </para>
                    722: </entry>
                    723: <entry>
                    724: 
                    725: </entry>
                    726: </row>
                    727: </tbody>
                    728: </tgroup>
                    729: </table>
                    730: 
                    731: <para>
                    732: Obwohl Trees eine breite Funktionalit&auml;t aufweisen, k&ouml;nnen nur Texte und Bilder
                    733: in den Zellen abgebildet werden. Die <literal>listbox</literal> ist in dieser Hinsicht
                    734: flexibler.
                    735: </para>
                    736: 
                    737: </sect3>
                    738: 
                    739: <sect3 role="" id="mozilla-CHP-3-SECT-4.2.2" label="3.4.2.2">
                    740: <title>Tree Views</title>
                    741: 
                    742: <para>
                    743: In einem Tree Widget ist eine <emphasis>view</emphasis> ein Modell der Anzeige der Daten. Views sind sehr flexibel und k&ouml;nnen
                    744: mit einfachen Daten (Content View) genausogut umgehen wie mit dynamischen Daten einer angepassten View (custom View) oder einer RDF Datenquelle (Builder View).
                    745: <link linkend="mozilla-CHP-3-TABLE-2">Tabelle 3-2</link> zeigt die wichtigsten Funktionen der verschiedenen Views unter Verwendung
                    746: der generellen Kategorien Datenquelle, Geschwindigkeit und Anwendungsfall.
                    747: </para>
                    748: 
                    749: <table id="mozilla-CHP-3-TABLE-2" label="3-2">
                    750: 
                    751: <title>Tree Views </title>
                    752: <tgroup cols="3">
                    753: <colspec colnum="1" colname="col1"/>
                    754: <colspec colnum="2" colname="col2"/>
                    755: <colspec colnum="3" colname="col3"/>
                    756: <thead>
                    757: <row>
                    758: <entry>
                    759: <para>Content view</para>
                    760: </entry>
                    761: <entry>
                    762: <para>Builder view</para>
                    763: </entry>
                    764: <entry>
                    765: <para>Custom view</para>
                    766: </entry>
                    767: </row>
                    768: </thead>
                    769: <tbody>
                    770: <row>
                    771: <entry>
                    772: <para>Die Reihen werden aus dem Inhaltsmodell generiert.</para>
                    773: </entry>
                    774: <entry>
                    775: <para>Die Reihen werden aus einer RDF Datenquelle generiert.</para>
                    776: </entry>
                    777: <entry>
                    778: <para>Der Benutzer definierte seine eigene View Implementation.</para>
                    779: </entry>
                    780: </row>
                    781: <row>
                    782: <entry>
                    783: <para>Schnell aber nicht sehr Speichereffizient (Footprint).</para>
                    784: </entry>
                    785: <entry>
                    786: <para>Schnell und effizient.</para>
                    787: </entry>
                    788: <entry>
                    789: <para>Am schnellsten und effizientesten.</para>
                    790: </entry>
                    791: </row>
                    792: <row>
                    793: <entry>
                    794: <para>F&uuml;r kleine Trees, einfach verwendbar.</para>
                    795: </entry>
                    796: <entry>
                    797: <para>Einigermassen einfach im Gebrauch.</para>
                    798: </entry>
                    799: <entry>
                    800: <para>Komplexe Implementation.</para>
                    801: </entry>
                    802: </row>
                    803: </tbody>
                    804: </tgroup>
                    805: </table>
                    806: 
                    807: <para>
                    808: Wie bereits erw&auml;hnt wird das <literal>tree</literal> Widget in der Anzeige von
                    809: Mail/News verwendet. Es gibt aber viele andere Orte an denen es ebenfalls eingesetzt
                    810: wird. Custom Views und Tree Widgets werden im Adressbuch, in JS Debugger, DOM Inspector,
                    811: Bookmarks und Auocomplete eingesetzt. Builder Views finden sich in der History und Content View
                    812: in den Preferences.
                    813: </para>
                    814: 
                    815: </sect3>
                    816: 
                    817: <sect3 role="" id="mozilla-CHP-3-SECT-4.2.3" label="3.4.2.3">
                    818: <title>Die Struktur von Tree</title>
                    819: 
                    820: <para>
                    821: Der Inhalt eines Trees wird mit von <literal>&lt;tree&gt;</literal>, <literal>&lt;treecols&gt;</literal>,
                    822: <literal>&lt;treecol&gt;</literal> und <literal>&lt;treechildren&gt;</literal> definiert. <link linkend="mozilla-CHP-3-EX-10">Beispiel 3-10</link>
                    823: enth&auml;lt eine Definition der Spalten (zwei in diesem Fall) und ein <literal>treechildren</literal> Platzhalter f&uuml;r den Treebody.
                    824: </para>
                    825: 
                    826: <example id="mozilla-CHP-3-EX-10" label="3-10">
                    827: <title>Ein Tree</title>
                    828: <programlisting>&lt;tree id="tree" flex="1"&gt;
                    829:   &lt;treecols&gt;
                    830:     &lt;treecol id="Col1" label="Col1" flex="1"/&gt;
                    831:     &lt;treecol id="Col2" label="Col1" flex="1"/&gt;
                    832:   &lt;/treecols&gt;
                    833:   &lt;treechildren/&gt;
                    834: &lt;/tree&gt;</programlisting>
                    835: </example>
                    836: 
                    837: <para>
                    838: Wie bei <literal>listbox</literal>, muss eine genaue Hierarchie der
                    839: Elemente ber&uuml;cksichtigt werden. Diese Hierarchie ist Teil des Inhaltsmodells
                    840: des Trees. Die Organisation der Inhalte eines Trees &uuml;ber die spezifischen
                    841: Elemente wird weiter unten gezeigt.
                    842: </para>
                    843: 
                    844: 
                    845: <tip id="ch03-6-fm2xml" role="ora">
                    846: <para>Im Gegensatz zu <literal>listbox</literal>, sind verschachtelte Reihen
                    847: bei Trees m&ouml;glich. Ein Beispiel solcher Verschachtelung zeigen wir sp&auml;ter
                    848: in diesem Kapitel, in <link linkend="mozilla-CHP-3-EX-11">Beispiel 3-11</link>.
                    849: </para>
                    850: </tip>
                    851: 
                    852: <variablelist>
                    853: <varlistentry><term><literal>&lt;treeitem&gt;</literal></term>
                    854: <listitem>
                    855: <para>
                    856: Dieses Element enth&auml;lt eine einzelne Reihe und all ihre Kinder-Reihen. Das <literal>container</literal>
                    857: Attribut wird verwendet um zu definieren ob eine Reihe als Container verwendet werden soll. Dieses Attribut
                    858: ist optional. Das Attribut <literal>open</literal> definiert den Zustand des Containers.
                    859: </para>
                    860: </listitem>
                    861: </varlistentry>
                    862: 
                    863: <varlistentry><term><literal>&lt;treerow&gt;</literal></term>
                    864: <listitem>
                    865: <para>
                    866: Die Reihe wird innerhalb des <literal>&lt;treeitem&gt;</literal> eingebettet. Sie k&ouml;nnen dem
                    867: <literal>properties</literal> Attribut eine durch Leerzeichen getrennte Liste zus&auml;tzlicher
                    868: Eigenschaften &uuml;bergeben.
                    869: </para>
                    870: </listitem>
                    871: </varlistentry>
                    872: 
                    873: <varlistentry><term><literal>&lt;treeseparator&gt;</literal></term>
                    874: <listitem>
                    875: <para>
                    876: Ein spezielles Element, das verwendet wird eine horizontale Trennlinie zu zeichnen. Das
                    877: <literal>properties</literal> Attribut wird verwendet wenn Sie weitere Eigenschaften
                    878: &uuml;bergeben m&ouml;chten.
                    879: </para>
                    880: </listitem>
                    881: </varlistentry>
                    882: 
                    883: <varlistentry><term><literal>&lt;treecell&gt;</literal></term>
                    884: <listitem>
                    885: <para>
                    886: Das <literal>&lt;treecell&gt;</literal> Element muss innerhalb einer <literal>&lt;treerow&gt;</literal>
                    887: verwendet werden. Es definiert den Text und die Eigenschaften einer Zelle. Das Attribut <literal>label</literal>
                    888: wird verwendet um den Text einer Zelle zu setzen. Das <literal>ref</literal> Attribut korreliert eine Zelle
                    889: einer <literal>&lt;treerow&gt;</literal> mit einer Spalte des Trees, und ist optional.
                    890: </para>
                    891: </listitem>
                    892: </varlistentry>
                    893: </variablelist>
                    894: 
                    895: <para>
                    896: In <link linkend="mozilla-CHP-3-EX-11">Beispiel 3-11</link> sehen wir, wie diese Elemente interagieren.
                    897: </para>
                    898: 
                    899: <example id="mozilla-CHP-3-EX-11" label="3-11">
                    900: <title>Multilevel Tree Content View </title>
                    901: <programlisting>&lt;tree id="tree" hidecolumnpicker="true" flex="1"&gt;
                    902:   &lt;treecols&gt;
                    903:     &lt;treecol id="type" label="Type" flex="1" primary="true"/&gt;
                    904:     &lt;treecol id="method" label="Method" flex="1"/&gt;
                    905:   &lt;/treecols&gt;
                    906:   <emphasis role="bold">&lt;treechildren&gt;</emphasis>
                    907:     &lt;treeitem&gt;
                    908:       &lt;treerow&gt;
                    909:         &lt;treecell label="Bike"/&gt;
                    910:         &lt;treecell label="Bicycle"/&gt;
                    911:       &lt;/treerow&gt;
                    912:     &lt;/treeitem&gt;
                    913:     &lt;treeitem container="true" open="true"&gt;
                    914:       &lt;treerow&gt;
                    915:         &lt;treecell label="Fly"/&gt;
                    916:         &lt;treecell label="Wings"/&gt;
                    917:       &lt;/treerow&gt;
                    918:       <emphasis role="bold">&lt;treechildren&gt;  &lt;! --  Second level row  -- &gt;</emphasis>
                    919:         &lt;treeitem&gt;
                    920:           &lt;treerow&gt;
                    921:             &lt;treecell label="Glide"/&gt;
                    922:             &lt;treecell label="Hand-Glider"/&gt;
                    923:           &lt;/treerow&gt;
                    924:         &lt;/treeitem&gt;
                    925:       &lt;/treechildren&gt;
                    926:     &lt;/treeitem&gt;
                    927:   &lt;/treechildren&gt;
                    928: &lt;/tree&gt;</programlisting>
                    929: </example>
                    930: 
                    931: <para>
                    932: Um ein neues Sublevel zu erzeugen, erstellen Sie ein weiteres <literal>&lt;treechildren&gt;</literal> Element und
                    933: setzen ein <literal>&lt;treeitem&gt;</literal> ein, das seinerseits eine oder mehrere Reihen oder Zellen
                    934: enth&auml;lt. <link linkend="mozilla-CHP-3-FIG-5">Abbildung 3-5</link> zeigt diese Hierarchie.
                    935: </para>
                    936: 
                    937: <figure id="mozilla-CHP-3-FIG-5" label="3-5">
                    938: <title>Multilevel Tree Hierarchie</title>
                    939: <graphic fileref="figs/moz_0305.png"/></figure>
                    940: 
                    941: </sect3>
                    942: 
                    943: <sect3 role="" id="mozilla-CHP-3-SECT-4.2.4" label="3.4.2.4">
                    944: <title>Trees in XUL Templates verwenden</title>
                    945: 
                    946: <para>
                    947: XUL Templates sind spezielle, eingebaute Strukturen, die erlauben, XUL Elemente
                    948: dynamisch zu aktualisieren und die oft innerhalb von Trees und Listboxes verwendet werden.
                    949: Templates benutzen die St&auml;rken des Resource Description Framework (RDF) um Daten aus
                    950: externen Datenquellen zu lesen und dynamisch XUL Inhalte zu erstellen bezw diese zu aktualisieren.
                    951: Der folgende Code zeigt die Struktur des Templates, das verwendet wird um die Browser History
                    952: in Mozilla anzuzeigen:
                    953: </para>
                    954: 
                    955: <programlisting>&lt;template&gt;
                    956:   &lt;rule&gt;
                    957:     &lt;treechildren&gt;
                    958:       &lt;treeitem uri="rdf:*" rdf:type="rdf:http://www.w3.org/1999/02/22-rdf-syntax-
                    959:             ns#type"&gt;
                    960:         &lt;treerow&gt;
                    961:           &lt;treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
                    962:           &lt;treecell label="rdf:http://home.netscape.com/NC-rdf#URL"/&gt;
                    963:           &lt;treecell label="rdf:http://home.netscape.com/NC-rdf#Date"/&gt;
                    964:           &lt;!-- further cells --&gt;
                    965:         &lt;/treerow&gt;
                    966:       &lt;/treeitem&gt;
                    967:     &lt;/treechildren&gt;
                    968:   &lt;/rule&gt;
                    969: &lt;/template&gt;</programlisting>
                    970: 
                    971: <para>
                    972: F&uuml;r jeden Eintrag in der Browser History extrahiert das Template Informationen aus der Datenquelle und rendert
                    973: diese in eine <literal>treecell</literal>. Danach aktualisiert sie diese bei jedem Besuch der Seite. F&uuml;r weitere Informationen
                    974: konsultieren Sie <link linkend="mozilla-CHP-9">Kapitel 9</link>.
                    975: </para>
                    976: 
                    977: </sect3>
                    978: 
                    979: <sect3 role="" id="mozilla-CHP-3-SECT-4.2.5" label="3.4.2.5">
                    980: <title>Custom Tree Views</title>
                    981: 
                    982: <para>
                    983: Custom Views erweitern die statische Pr&auml;sentation der Daten in einem Tree. Sie bieten
                    984: mehr Flexibilit&auml;t, verschiedene Arten die gleichen Daten anzuzeigen und Interfaces um
                    985: auf den Inhalten basierendes Verhalten zu definieren. Die Funktionen enthalten das
                    986: Abfangen einer Treeitem Selektion um danach Aktionen auszuf&uuml;hren, abfragen
                    987: und setzen von Werten des Trees und die Abfrage der Anzahl Reihen eines Trees.
                    988: </para>
                    989: 
                    990: <para>
                    991: Um eine Custom View zu erstellen, m&uuml;ssen Sie als erstes einen <literal>tree</literal>
                    992: instanzieren und danach ein <literal>view</literal> Object verbinden.
                    993: </para>
                    994: 
                    995: <programlisting>document.getElementById('main-tree').treeBoxObject.view=mainView;</programlisting>
                    996: 
                    997: <para>
                    998: In diesem Beispiel ist die View aus dem <literal>nsITreeView</literal> XPCOM Objekt
                    999: die Lebenslinie des Trees, da sie dessen Daten zur Verf&uuml;gung stellt. Die View wird
                   1000: dem Objekt zugewiesen, das alle Funktionen und die Implementation dessen was bei ihrem Aufruf geschehen soll, enth&auml;lt.
                   1001: </para>
                   1002: 
                   1003: <para>Funktionen die einem View Object zur Verf&uuml;gung stehen:</para>
                   1004: 
                   1005: <para><literal>setTree(tree)</literal></para>
                   1006: 
                   1007: <para>
                   1008: Wird w&auml;hrend der Initialisierung aufgerufen und verbindet die Tree View mit dem Frontend. Diese
                   1009: Verbindung garantiert dass der korrekte Tree mit der richtigen View assoziert bleibt.
                   1010: </para>
                   1011: 
                   1012: <variablelist>
                   1013: <varlistentry><term><literal>getCellText (row,column)</literal></term>
                   1014: <listitem>
                   1015: <para>
                   1016: Gibt den Text oder eine leere Zeichenkette einer bestimmten Zelle zur&uuml;ck.
                   1017: </para>
                   1018: </listitem>
                   1019: </varlistentry>
                   1020: 
                   1021: <varlistentry><term><literal>rowCount</literal></term>
                   1022: <listitem>
                   1023: <para>Legt die Anzahl Reihen fest die f&uuml;r den Tree erwartet werden.</para>
                   1024: </listitem>
                   1025: </varlistentry>
                   1026: 
                   1027: <varlistentry><term><literal>cycleHeader(index)</literal></term>
                   1028: <listitem>
                   1029: <para>Wird aufgerufen wenn auf die Kopfzeile einer Spalte geklickt wird.</para>
                   1030: </listitem>
                   1031: </varlistentry>
                   1032: 
                   1033: <varlistentry><term><literal>toggleOpenState</literal></term>
                   1034: <listitem>
                   1035: <para>Wird ausgef&uuml;hrt wenn eine View angezeigt/ausgeblendet wird.</para>
                   1036: </listitem>
                   1037: </varlistentry>
                   1038: 
                   1039: <varlistentry><term><literal>setCellText (row, colID, value)</literal></term>
                   1040: <listitem>
                   1041: <para>Wird aufgerufen um den Inhalt einer Zelle zu editieren.</para>
                   1042: </listitem>
                   1043: </varlistentry>
                   1044: 
                   1045: <varlistentry><term><literal>performAction (action)</literal></term>
                   1046: <listitem>
                   1047: <para>
                   1048: Der Tree ruft diese Methode auf wenn bestimmte Tasten gedr&uuml;ckt werden. Wenn zum Beispiel
                   1049: die ENTER Taste gedr&uuml;ckt wird, wird diese Methode mit der action 'enter' Aufgerufen.
                   1050: </para>
                   1051: </listitem>
                   1052: </varlistentry>
                   1053: </variablelist>
                   1054: 
                   1055: <para>Es gibt dar&uuml;ber hinaus noch weitere, lokale Methoden wie
                   1056: <literal>performActionOnRow</literal> und
                   1057: <literal>performActionOnCell</literal>.
                   1058: </para>
                   1059: 
                   1060: <variablelist>
                   1061: <varlistentry><term><literal>selectionChanged</literal></term>
                   1062: <listitem>
                   1063: <para>Sollte im <literal>&lt;tree&gt;</literal> Element mit dem <literal>onselect</literal> Handler verbunden werden.
                   1064: </para>
                   1065: </listitem>
                   1066: </varlistentry>
                   1067: </variablelist>
                   1068: 
                   1069: </sect3>
                   1070: </sect2>
                   1071: <sect2 role="" id="mozilla-CHP-3-SECT-4.3" label="3.4.3">
                   1072: <title>Grid</title>
                   1073: 
                   1074: <para>
                   1075: Ein <literal>&lt;grid&gt;</literal> ist eine andere XUL Tabellenart, die jedoch sehr flexibel
                   1076: mit Inhalten umgehen kann. <link linkend="mozilla-CHP-3-EX-12">Beispiel 3-12</link> zeigt ein
                   1077: 2-Spalten Grid, das Textboxes und Labels enth&auml;lt.
                   1078: </para>
                   1079: 
                   1080: <example id="mozilla-CHP-3-EX-12" label="3-12">
                   1081: <title>XUL Grid </title>
                   1082: <programlisting>&lt;grid&gt;
                   1083:   &lt;columns&gt;&lt;column flex="1"/&gt;&lt;column flex="2"/&gt;&lt;/columns&gt;
                   1084:   &lt;rows&gt;
                   1085:     &lt;row align="center"&gt;
                   1086:       &lt;label value="Title"/&gt;
                   1087:       &lt;textbox id="title-text" oninput="TextboxInput(this.id)"/&gt;
                   1088:     &lt;/row&gt;
                   1089:     &lt;row align="center"&gt;
                   1090:       &lt;label value="Author"/&gt;
                   1091:       &lt;textbox id="author-text" oninput=" TextboxInput(this.id)"/&gt;
                   1092:     &lt;/row&gt;
                   1093:     &lt;row align="center"&gt;
                   1094:       &lt;label value="About"/&gt;
                   1095:       &lt;textbox id="about-text" oninput=" TextboxInput(this.id)"/&gt;
                   1096:     &lt;/row&gt;
                   1097:   &lt;/rows&gt;
                   1098: &lt;/grid&gt;</programlisting>
                   1099: </example>
                   1100: 
                   1101: <para>
                   1102: In einem Grid m&uuml;ssen die Spalten in einem <literal>&lt;columns&gt;</literal> Set definiert und gruppiert werden. In <link linkend="mozilla-CHP-3-EX-12">Beispiel 3-12</link>,
                   1103: enth&auml;lt die erste Spalte die Labels und die zweite Spalte die Textboxes. Diese zwei Spalten sind horizontal zueinander angeordnet. Der Flex ist bei der zweiten Spalte gr&ouml;sser,
                   1104: um mehr Platz f&uuml;r die Textboxes zu haben. Wie alle Beispiele in diesem Kapitel, k&ouml;nnen Sie <link linkend="mozilla-CHP-3-EX-12">Beispiel 3-12</link> ausprobieren, wenn
                   1105: Sie die XML Processing Instructions und ein umgebendes <literal>window</literal> Root-Element hinzuf&uuml;gen.
                   1106: </para>
                   1107: 
                   1108: </sect2>
                   1109: </sect1>
                   1110: 
                   1111: <sect1 role="" id="mozilla-CHP-3-SECT-5" label="3.5">
                   1112: <title>Worte und Bilder</title>
                   1113: 
                   1114: <para>
                   1115: Die Text Widgetsi, die nachfolgend beschrieben werden, sind f&uuml;r die Beschriftung
                   1116: anderer Widgets, oder Contexthilfen f&uuml;r den Benutzer, zust&auml;ndig. Bilder k&ouml;nnen
                   1117: entweder mit dem <literal>image</literal> Element oder verschiedenen
                   1118: inline Notationen bei Buttons oder Menus angezeigt werden.
                   1119: </para>
                   1120: 
                   1121: <sect2 role="" id="mozilla-CHP-3-SECT-5.1" label="3.5.1">
                   1122: <title>Texteingabe</title>
                   1123: 
                   1124: <para>
                   1125: Das <literal>&lt;textbox&gt;</literal> Element ist ein Feld um Texteingaben zu verarbeiten, und
                   1126: funktioniert &auml;hnlich wie das <literal>&lt;textarea&gt;</literal> Element in HTML. Das normale
                   1127: <literal>&lt;textbox&gt;</literal> Element hat 1 Zeile.
                   1128: </para>
                   1129: 
                   1130: <programlisting>&lt;textbox id="singleFlyInput" /&gt;</programlisting>
                   1131: 
                   1132: <para>Wenn Sie das <literal>multiline</literal> Attribut verwenden, k&ouml;nnen Sie auch gr&ouml;ssere Felder anzeigen.
                   1133: </para>
                   1134: 
                   1135: <programlisting>&lt;textbox id="multiFlyInput" value="Fly Name" multiline="true" rows="4" /&gt;</programlisting>
                   1136: 
                   1137: <para>
                   1138: Eine multiline Textbox besteht aus 3 Zeilen, kann aber &uuml;ber das <literal>rows</literal>
                   1139: Attribut vergr&ouml;ssert oder verkleinert werden (Bis auf den Einsatz in einem Container, oder
                   1140: unter Verwendung eines Flex). Um die Anzahl Zeichen bei der Eingabe zu beschr&auml;nken k&ouml;nnen
                   1141: Sie das <literal>size</literal> Attribut verwenden.
                   1142: </para>
                   1143: 
                   1144: <programlisting>&lt;textbox id="holdtheFlyInput" <userinput>cols="3" rows="2"</userinput> /&gt;</programlisting>
                   1145: 
                   1146: <para>
                   1147: Wenn kein <literal>value</literal> &uuml;bergeben wird, ist das Textfeld zu Beginn leer. Indem Sie <literal>readonly</literal>
                   1148: auf <literal>true</literal> oder <literal>false</literal> setzen, k&ouml;nnen Sie zudem definieren, ob der Inhalt des Textfeldes editiert werden kann.
                   1149: </para>
                   1150: 
                   1151: <sect3 role="" id="mozilla-CHP-3-SECT-5.1.1" label="3.5.1.1">
                   1152: <title>Autocomplete</title>
                   1153: 
                   1154: <para>
                   1155: Autocompletion nennt man den Prozess, die Eingabe des Benutzers automatisch fertigzustellen. In 
                   1156: Mozilla wird dieser Vorgang einfach <emphasis>autocomplete</emphasis> genannt. In der Addressbar
                   1157: des Browsers und der Mail Komponente, werden zum Beispiel Textboxes mit Autocomplete verwendet.
                   1158: <link linkend="mozilla-CHP-3-EX-13">Beispiel 3-13</link> zeigt den Code des 'Webseite &ouml;ffnen'
                   1159: Dialogs, welcher Autocompletion unterst&uuml;tzt.
                   1160: </para>
                   1161: 
                   1162: <example id="mozilla-CHP-3-EX-13" label="3-13">
                   1163: <title>Text Autocomplete </title>
                   1164: <programlisting>&lt;textbox id="dialog.input" flex="1" type="autocomplete"
                   1165:     searchSessions="history" timeout="50" maxrows="6"
                   1166:     disablehistory="false"
                   1167:     oninput="doEnabling( );"&gt;
                   1168:   &lt;menupopup id="ubhist-popup" class="autocomplete-history-popup"
                   1169:       popupalign="topleft" popupanchor="bottomleft"
                   1170:       onpopupshowing="createUBHistoryMenu(event.target);"
                   1171:       oncommand="useUBHistoryItem(event.target)"/&gt;
                   1172: &lt;/textbox&gt;</programlisting>
                   1173: </example>
                   1174: 
                   1175: <para>
                   1176: Das eingebettete <literal>&lt;menupopup&gt;</literal> enth&auml;lt eine
                   1177: Auswahl im drop-down Format. Das relevante Attribut in diesem Beispiel
                   1178: ist <literal>type</literal>, innerhalb von <literal>&lt;textbox&gt;</literal>,
                   1179: das den Wert <literal>autocomplete</literal> hat.
                   1180: </para>
                   1181: 
                   1182: <para><link linkend="mozilla-CHP-3-FIG-6">Abbildung 3-6</link> zeigt ein
                   1183: <literal>autocomplete</literal> Widget. W&auml;hrend dem der Benutzer die
                   1184: URL in die Textbox eingibt, springt das Autocomplete Feature ein
                   1185: und zeigt ihm eine Auswahl fr&uuml;her verwendeter URLs zur Wahl an.
                   1186: </para>
                   1187: 
                   1188: <figure id="mozilla-CHP-3-FIG-6" label="3-6">
                   1189: <title>Autocomplete in 'Webseite &ouml;ffnen'</title>
                   1190: <graphic fileref="figs/moz_0306.png"/></figure>
                   1191: 
                   1192: </sect3>
                   1193: </sect2>
                   1194: <sect2 role="" id="mozilla-CHP-3-SECT-5.2" label="3.5.2">
                   1195: <title>Text Anzeige</title>
                   1196: 
                   1197: <para>
                   1198: In XUL werden 3 Tags eingesetzt, von denen jedes seinen Kontext hat, Textausgaben im Interface zu erm&ouml;glichen.
                   1199: Diese Tags lauten <literal>&lt;caption&gt;</literal>, <literal>&lt;label&gt;</literal> und <literal>&lt;description&gt;</literal>.
                   1200: </para>
                   1201: 
                   1202: <para>
                   1203: <literal>caption</literal> wird prim&auml;r benutzt um Texte anzuzeigen, die inline
                   1204: im Rand einer Groupbox erscheinen. Um zu definieren an welcher Stelle die
                   1205: Anzeige steht, kann das Tag oberhalb oder unterhalb der Groupbox eingef&uuml;gt werden:
                   1206: </para>
                   1207: 
                   1208: <programlisting>&lt;groupbox id="textWidgetsBox"&gt;
                   1209:     &lt;caption id="textTitle" label="Text Widgets"/&gt;
                   1210:     &lt;!-- content here --&gt;
                   1211: &lt;/groupbox&gt;</programlisting>
                   1212: 
                   1213: <para><literal>label</literal> ist flexibler als <literal>caption</literal> weil es
                   1214: &uuml;berall verwendet werden kann, und nicht an eine Struktur gebunden ist.
                   1215: </para>
                   1216: 
                   1217: <para>F&uuml;r l&auml;ngere Texte wird das <literal>&lt;description&gt;</literal> Element eingesetzt. Sie
                   1218: k&ouml;nnen beliebigen Text einsetzen, der danach an entsprechender Stelle umgebrochen wird.
                   1219: </para>
                   1220: 
                   1221: <programlisting>&lt;description&gt;
                   1222: The mozdev.org site provides free project hosting for the Mozilla community. You are welcome to take a look at the more than 60 projects hosted on the site or to start your own development project. 
                   1223: &lt;/description&gt;</programlisting>
                   1224: 
                   1225: <para>Sie k&ouml;nnen auch das <literal>value</literal> Attribut verwenden wenn Sie sicher sind, dass der Text nicht umgebrochen werden muss. In diesem Fall ist <literal>&lt;description&gt;</literal> identisch mit <literal>&lt;label&gt;</literal>:
                   1226: </para>
                   1227: 
                   1228: <programlisting>&lt;description value="Start a project today." /&gt;</programlisting>
                   1229: 
                   1230: </sect2>
                   1231: <sect2 role="" id="mozilla-CHP-3-SECT-5.3" label="3.5.3">
                   1232: <title>Bilder</title>
                   1233: 
                   1234: <para>XUL unterst&uuml;tzt die Anzeige von Bildern in den g&auml;ngigen Webformaten JPEG, PNG und GIF. Die meisten Bilder
                   1235: die Sie im Interface von Mozilla finden sind im GIF Format abgelegt, weil dessen Qualit&auml;t oft am besten ist.
                   1236: <link linkend="mozilla-CHP-4">Kapitel 4</link> geht n&auml;her auf solche Theme-Angelegenheiten ein. Die einfachste
                   1237: Syntax zur Anzeige eines Bildes ist:
                   1238: </para>
                   1239: 
                   1240: <programlisting>&lt;image src="myImage.png" /&gt;</programlisting>
                   1241: 
                   1242: <para>
                   1243: Das <literal>&lt;image&gt;</literal> Element wird gleich angewendet wie das HTML <literal>&lt;img&gt;</literal> Element.
                   1244: Das Bild, das angezeigt werden soll wird direkt im <literal>src</literal> Attribut angegeben. Sie k&ouml;nnen auch 
                   1245: das CSS2 Property <literal>list-style-image</literal> eines Elements verwenden, um dies zu tun, setzen Sie einen Style
                   1246: <emphasis>Selektor</emphasis>, in unserem Fall setzen wir die <literal>id</literal>.
                   1247: </para>
                   1248: 
                   1249: <programlisting>&lt;image id="foo" /&gt;</programlisting>
                   1250: 
                   1251: <para>
                   1252: Das Style Property kennt einen Parameter, <literal>src</literal>, der auf
                   1253: das Bild, oder eine Ressource mit dem Bild, verweist.
                   1254: </para>
                   1255: 
                   1256: <programlisting>#foo  {
                   1257:     list-style-image: url("myImage.png");
                   1258: }</programlisting>
                   1259: 
                   1260: <para>
                   1261: <literal>src</literal> kann verwendet werden, wenn einzelne Bilder 
                   1262: angezeigt werden sollen. Wir empfehlen der Gebrauch des CSS Properties, da
                   1263: dies dem Prinzip der Trennung von Logik und Inhalt entspricht und Themes zum Beispiel
                   1264: einfacher ausgewechselt werden k&ouml;nnen.
                   1265: </para>
                   1266: 
                   1267: <tip id="ch03-8-fm2xml" role="ora">
                   1268: <para>
                   1269: Viele Leute in der OpenSource Bewegung finden, dass ein offenes Format wie PNG
                   1270: besser geeignet w&auml;re. Ein offener Bug mit gamma-korrigierten CSS Farben in CSS1 und CSS2 h&auml;lt
                   1271: die Entwicklung dieser Idee im Moment leider noch auf.
                   1272: </para>
                   1273: </tip>
                   1274: 
                   1275: <sect3 role="" id="mozilla-CHP-3-SECT-5.3.1" label="3.5.3.1">
                   1276: <title>Bilder in anderen XUL Elementen</title>
                   1277: 
                   1278: <para>
                   1279: Anhand des <literal>list-style-image</literal> Properties k&ouml;nnen Sie fast jedem
                   1280: Element ein Bild zuordnen. Tree zum Beispiel verf&uuml;gt &uuml;ber einige dieser Properties,
                   1281: die erlauben <literal>list-style-image</literal> zu definieren. <literal>-moz-tree-image</literal>
                   1282: definiert die Bilder einer Zelle und &uuml;ber den <literal>id</literal> Parameter kann definiert werden in welcher
                   1283: Reihe/Spalte das Bild angezeigt werden soll:
                   1284: </para>
                   1285: 
                   1286: <programlisting>treechildren:-moz-tree-image(col-id,row-id) {
                   1287:      list-style-image: url("chrome://xfly/skin/images/outliner.gif");
                   1288: }</programlisting>
                   1289: 
                   1290: <para>&Uuml;ber <literal>-moz-tree-twisty</literal> k&ouml;nnen Sie definieren, wie das <literal>twisty</literal> aussehen soll, das verwendet wird um Treelevels zu &ouml;ffnen/schliessen.
                   1291: </para>
                   1292: 
                   1293: <programlisting>treechildren:-moz-tree-twisty(open) {
                   1294:      list-style-image: url("chrome://xfly/skin/images/twisty.gif");
                   1295: }</programlisting>
                   1296: 
                   1297: <para>
                   1298: Das Beispiel oben verwendet den Parameter <literal>open</literal>, wenn kein
                   1299: Parameter angegeben wird, ist der Status 'closed' - somit k&ouml;nnen Sie f&uuml;r beide Stati
                   1300: ein Bild angeben.
                   1301: </para>
                   1302: 
                   1303: <para>Auch das <literal>&lt;tab&gt;</literal> Widget kennt ein
                   1304: <literal>list-style-image</literal> CSS Property.
                   1305: </para>
                   1306: 
                   1307: <programlisting>&lt;tab id="TabOne" class="tabbies" selected="1" label="Click Me!"  oncommand="SelectTab(1);" /&gt;</programlisting>
                   1308: 
                   1309: <para>
                   1310: In diesem Fall ist das <literal>class</literal> Attribut der Selektor um die Style Regel
                   1311: mit dem Element zu verbinden:
                   1312: </para>
                   1313: 
                   1314: <programlisting>.tabbies {
                   1315:      list-style-image: url("chrome://xfly/skin/images/tab.gif");
                   1316: }</programlisting>
                   1317: 
                   1318: </sect3>
                   1319: </sect2>
                   1320: </sect1>
                   1321: 
                   1322: <sect1 role="" id="mozilla-CHP-3-SECT-6" label="3.6">
                   1323: <title>Form Controls</title>
                   1324: 
                   1325: <para>
                   1326: In der HTML Welt ist das Textarea eines der wichtigsten Elemente im Formularen. Obwohl das XPFE Toolkit
                   1327: 'Formulare' als solche nicht kennt, l&auml;sst es den Benuter in begrenzten Masse HTML Elemente benutzen. Da jedoch
                   1328: Widgets wie Textbox, Checkbox oder Radiogroup zur Verf&uuml;gung stehen, sollte darauf weitgehend verzichtet werden.
                   1329: </para>
                   1330: 
                   1331: <sect2 role="" id="mozilla-CHP-3-SECT-6.1" label="3.6.1">
                   1332: <title>Radio</title>
                   1333: 
                   1334: <para>
                   1335: Radiogroups sind n&uuml;tzliche Interface Elemente, da sie den Benutzer aus einer Reihe von M&ouml;glichkeiten w&auml;hlen l&auml;sst. In HTML wird das
                   1336: Element mit einem <literal>&lt;INPUT&gt;</literal> Tag mit dem <literal>type</literal> Attribut <literal>radio</literal> verwendet.
                   1337: <link linkend="mozilla-CHP-3-EX-14">Beispiel 3-14</link> zeigt, wie man Radiogroups in XUL erstellt.
                   1338: </para>
                   1339: 
                   1340: <example id="mozilla-CHP-3-EX-14" label="3-14">
                   1341: <title>Eine Radiogroup</title>
                   1342: <programlisting>&lt;radiogroup id="flyTypes" orient="vertical"&gt;
                   1343:   &lt;radio id="tachina" group="flyTypes" label="Tachinidae"
                   1344:     oncommand="chooseType(this);"/&gt;
                   1345:   &lt;radio id="primitive-crane" group="flyTypes" label="Tanyderidae" 
                   1346:     oncommand="chooseType(this);"/&gt;
                   1347:   &lt;radio id="crane" group="flyTypes" label="Tipulidae" 
                   1348:     oncommand="chooseType(this);"/&gt;
                   1349:   &lt;radio id="flower" group="flyTypes" label="Syrphidae" 
                   1350:     oncommand="chooseType(this);"/&gt;
                   1351:   &lt;radio id="fruit" group="flyTypes" label="Tephritidae" 
                   1352:     oncommand="chooseType(this);"/&gt;
                   1353: &lt;/radiogroup&gt;</programlisting>
                   1354: </example>
                   1355: 
                   1356: <para>
                   1357: Die Optionen m&uuml;ssen von einem <literal>&lt;radiogroup&gt;</literal> Element umgeben sein,
                   1358: und werden mit einem <literal>&lt;radio&gt;</literal> Tag dargestellt. Wichtig sind die
                   1359: <literal>id</literal> Attribute der <literal>&lt;radiogroup&gt;</literal> und die
                   1360: <literal>group</literal> Attribute der <literal>&lt;radio&gt;</literal> Elemente. Diese
                   1361: Attribute sollten identisch sein, um sicherzustellen dass nur eine der Optionen
                   1362: ausgew&auml;hlt sein kann. Das <literal>this</literal> Schl&uuml;sselwort in JavaScript
                   1363: l&auml;sst Sie das ausgew&auml;hlte Element direkt ansprechen. Im Beispiel wird also jedesmal die Node-id
                   1364: an das Script gesendet wenn, eine Option ausgew&auml;hlt wird.
                   1365: </para>
                   1366: 
                   1367: </sect2>
                   1368: <sect2 role="" id="mozilla-CHP-3-SECT-6.2" label="3.6.2">
                   1369: <title>Checkbox</title>
                   1370: 
                   1371: <para>
                   1372: Eine Checkbox ist ein einfacheres Widget, das keiner Gruppe zugeordnet werden muss. Meist
                   1373: wird es benutzt, um festzulegen ob eine bestimmte Funktionalit&auml;t ein- oder ausgeschaltet werden
                   1374: soll. Sehen Sie dazu <link linkend="mozilla-CHP-3-FIG-7">Abbildung 3-7</link>.
                   1375: </para>
                   1376: 
                   1377: <programlisting>&lt;checkbox id="closeWindow" 
                   1378:     label="Close this window when download is complete"
                   1379:     checked="true" /&gt;</programlisting>
                   1380: 
                   1381: <figure id="mozilla-CHP-3-FIG-7" label="3-7">
                   1382: <title>Checkbox Widget</title>
                   1383: <graphic fileref="figs/moz_0307.png"/></figure>
                   1384: 
                   1385: <para>
                   1386: Wenn die Box angeklickt wird, wird das <literal>checked</literal> Attribut
                   1387: aktiviert, das einen positiven Wert andeutet. Sie k&ouml;nnen dieses Attribut
                   1388: selber setzen um der Checkbox einen Initialwert zu geben.
                   1389: </para>
                   1390: 
                   1391: </sect2>
                   1392: <sect2 role="" id="mozilla-CHP-3-SECT-6.3" label="3.6.3">
                   1393: <title>Buttons</title>
                   1394: 
                   1395: <para>
                   1396: Ein Button ist ein Mehrzweck-Widget, das normalerweise in Toolbars und Dialogen
                   1397: verwendet wird. Die zwei Button Elemente <literal>&lt;button&gt;</literal> und 
                   1398: <literal>&lt;toolbarbutton&gt;</literal> sind im Grunde gleich. Meist unterscheidet
                   1399: nur das <literal>class</literal> Attribut die beiden. Sie k&ouml;nnen 
                   1400: <literal>&lt;toolbarbutton&gt;</literal> deshalb ausser- und <literal>&lt;button&gt;</literal>
                   1401: innerhalb von Toolbars verwenden - obwohl man in der Praxis gleiche Elemente normalerweise
                   1402: gruppiert. Diese Flexibilit&auml;t hat den positiven Effekt, dass die Buttons in einem
                   1403: bestimmten Bereich mittels <literal>getElementsByTagName</literal> angesprochen
                   1404: werden k&ouml;nnen.
                   1405: </para>
                   1406: 
                   1407: <para>
                   1408: Eine g&auml;ngige Version des Buttons enth&auml;lt einen Text und ein Bild, wobei das Bild
                   1409: meist rechts oder links des Textes angezeigt wird. M&ouml;glicherweise m&ouml;chten Sie
                   1410: jedoch vordefinierte Klassen aus Mozilla selber &uuml;bernehmen, oder gar eigene Style Regeln
                   1411: definieren um die Anzeige zu beinflussen.
                   1412: <footnote label="2"> <para>Leider &auml;ndern sich die Klassennamen innerhalb von Mozilla
                   1413: zu oft, als dass man sie hier alle auff&uuml;hren k&ouml;nnte. "toolbar-primary" wird oft wiederverwendet.
                   1414: Um weitere Klassen zu finden, sollten Sie sich direkt im Sourcecode umsehen.</para> </footnote>
                   1415: Der Text auf dem Button wird durch das <literal>label</literal> Attribut definiert:
                   1416: </para>
                   1417: 
                   1418: <programlisting>&lt;button id="newfileBtn"
                   1419:     tooltiptext="New File"
                   1420:     oncommand="doNew( )"
                   1421:     label="New"/&gt;</programlisting>
                   1422: 
                   1423: <para>
                   1424: Sie k&ouml;nnen das Bild mit dem Button verkn&uuml;pfen in dem Sie das <literal>src</literal>
                   1425: Attribut oder das CSS Element <literal>list-style-image</literal> benutzen, wie
                   1426: folgendes Beispiel zeigt:
                   1427: </para>
                   1428: 
                   1429: <programlisting>#newfileBtn
                   1430: {
                   1431:     list-style-image:    url("chrome://editor/skin/images/newfile.gif"); 
                   1432: }</programlisting>
                   1433: 
                   1434: <sect3 role="" id="mozilla-CHP-3-SECT-6.3.1" label="3.6.3.1">
                   1435: <title>Button Typen</title>
                   1436: 
                   1437: <para>
                   1438: Mozilla enth&auml;lt mehr als die normalen "click" und "go" Buttons des Toolkits. <link linkend="mozilla-CHP-3-TABLE-3">Tabelle</link> bietet eine &Uuml;bersicht.
                   1439: </para>
                   1440: 
                   1441: <table id="mozilla-CHP-3-TABLE-3" label="3-3">
                   1442: 
                   1443: <title>Button Typen </title>
                   1444: <tgroup cols="3">
                   1445: <colspec colnum="1" colname="col1"/>
                   1446: <colspec colnum="2" colname="col2"/>
                   1447: <colspec colnum="3" colname="col3"/>
                   1448: <thead>
                   1449: <row>
                   1450: <entry>
                   1451: <para>Typ</para>
                   1452: </entry>
                   1453: <entry>
                   1454: <para>Gebrauch</para>
                   1455: </entry>
                   1456: <entry>
                   1457: <para>Beschreibung</para>
                   1458: </entry>
                   1459: </row>
                   1460: </thead>
                   1461: <tbody>
                   1462: <row>
                   1463: <entry>
                   1464: <para>Menu</para>
                   1465: </entry>
                   1466: <entry>
                   1467: <para>type= "menu"</para>
                   1468: </entry>
                   1469: <entry>
                   1470: <para>Button enth&auml;lt eingebettetes Menu, das durch einen kleinen Pfeil Icon angezeigt wird</para>
                   1471: </entry>
                   1472: </row>
                   1473: <row>
                   1474: <entry>
                   1475: <para>Dual Menu</para>
                   1476: </entry>
                   1477: <entry>
                   1478: <para>type= "menu-button"</para>
                   1479: </entry>
                   1480: <entry>
                   1481: <para>Das Menu wird in einem eigenen klickbaren Gebiet im Button angezeigt</para>
                   1482: </entry>
                   1483: </row>
                   1484: <row>
                   1485: <entry>
                   1486: <para>Checkbox</para>
                   1487: </entry>
                   1488: <entry>
                   1489: <para>type= "checkbox"</para>
                   1490: </entry>
                   1491: <entry>
                   1492: <para>
                   1493: Verbleibt im definierte Zustand wenn angeklickt, springt bei erneuten anklicken in den Originalzustand zur&uuml;ck.
                   1494: </para>
                   1495: </entry>
                   1496: </row>
                   1497: <row>
                   1498: <entry>
                   1499: <para>Radio</para>
                   1500: </entry>
                   1501: <entry>
                   1502: <para>type= "radio"</para>
                   1503: </entry>
                   1504: <entry>
                   1505: <para>
                   1506: Sollte Teil einer Gruppe sein, in der jeweils nur eine der Optionen w&auml;hlbar ist.
                   1507: </para>
                   1508: </entry>
                   1509: </row>
                   1510: <row>
                   1511: <entry>
                   1512: <para>Disclosure</para>
                   1513: </entry>
                   1514: <entry>
                   1515: <para>dlgtype= "disclosure"</para>
                   1516: </entry>
                   1517: <entry>
                   1518: <para>Zeigt einen Teil eines Dialog an, bezw blendet diesen aus.</para>
                   1519: </entry>
                   1520: </row>
                   1521: <row>
                   1522: <entry>
                   1523: <para>Default</para>
                   1524: </entry>
                   1525: <entry>
                   1526: <para>dlgtype= "accept"</para>
                   1527: </entry>
                   1528: <entry>
                   1529: <para>F&uuml;hrt die definierte Aktion f&uuml;r einen Dialog aus</para>
                   1530: </entry>
                   1531: </row>
                   1532: <row>
                   1533: <entry>
                   1534: <para>Cancel</para>
                   1535: </entry>
                   1536: <entry>
                   1537: <para>dlgtype= "cancel"</para>
                   1538: </entry>
                   1539: <entry>
                   1540: <para>Schliesst den Dialog und f&uuml;hrt keine weiteren Aktionen aus.</para>
                   1541: </entry>
                   1542: </row>
                   1543: <row>
                   1544: <entry>
                   1545: <para>Help</para>
                   1546: </entry>
                   1547: <entry>
                   1548: <para>dlgtype= "help"</para>
                   1549: </entry>
                   1550: <entry>
                   1551: <para>Aktiviert kontextsensitive Hilfe</para>
                   1552: </entry>
                   1553: </row>
                   1554: </tbody>
                   1555: </tgroup>
                   1556: </table>
                   1557: 
                   1558: <para>
                   1559: Wenn einer der Button Typen aus <link linkend="mozilla-CHP-3-TABLE-3">Tabelle 3-3</link> als Beispiel verwendet werden soll,
                   1560: kann der Typ <literal>menu-button</literal> benutzt werden. Dieser Button erlaubt es, mehr als eine Option anzuzeigen. Mozilla
                   1561: verwendet diese Art zum Beispiel bei den Back/Forward Buttons, bei denen die zuletzt besuchten Seiten aufgelistet werden.
                   1562: <link linkend="mozilla-CHP-3-FIG-8">Abbildung 3-8</link> zeigt das Aussehen des 'back' Buttons nachdem mehrere Seiten
                   1563: betrachtet wurden.
                   1564: </para>
                   1565: 
                   1566: <figure id="mozilla-CHP-3-FIG-8" label="3-8">
                   1567: <title>menu-button in Mozilla</title>
                   1568: <graphic fileref="figs/moz_0308.png"/></figure>
                   1569: 
                   1570: <para>
                   1571: Andere Anwendungsfelder sind zum Beispiel 'new' Buttons, welche verschiedene
                   1572: Optionen zur Verf&uuml;gung stellen (new File, new Project, ...) - und bei denen
                   1573: die Standardaktion das erstellen einer neuen Datei ist.
                   1574: </para>
                   1575: 
                   1576: </sect3>
                   1577: 
                   1578: <sect3 role="" id="mozilla-CHP-3-SECT-6.3.2" label="3.6.3.2">
                   1579: <title>Dialog Buttons</title>
                   1580: 
                   1581: <para>
                   1582: Die letzten vier Elemente in <link linkend="mozilla-CHP-3-TABLE-3">Tabelle 3-3</link>
                   1583: sind Buttons, die vorallem f&uuml;r Dialoge konzipiert wurden. Der einfachste Weg, sie
                   1584: in Dialogen zu verwenden, ist, sie im <literal>buttons</literal> Attribut des
                   1585: <literal>&lt;dialog&gt;</literal> Elements zu notieren:
                   1586: </para>
                   1587: 
                   1588: <programlisting>&lt;dialog
                   1589:   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                   1590:     buttons="accept,cancel,help"
                   1591:     buttonpack="center"
                   1592:     ondialogaccept="return onAccept( );"
                   1593:     ondialogcancel="return onCancel( );"
                   1594:     ondialoghelp="return doHelpButton( );"&gt;</programlisting>
                   1595: 
                   1596: <para>
                   1597: Die Funktionen die aufgerufen werden wenn diese Buttons angeklickt werden,
                   1598: werden in den <literal>ondialogaccept</literal>, <literal>ondialogcancel</literal>
                   1599: und <literal>ondialoghelp</literal> Eventhandler-Attributen definiert. Diese
                   1600: Eventhandler sind am einfachsten, wenn Sie die normalen Buttontexte (Ok,Cancel und Help)
                   1601: verwenden wollen. Falls Sie eigene Texte definieren oder mehr Kontrolle &uuml;ber die Buttons
                   1602: m&ouml;chten, k&ouml;nnen Sie dies im <literal>dlgtype</literal> Attribut notieren:
                   1603: </para>
                   1604: 
                   1605: <programlisting>&lt;button dlgtype="accept"
                   1606:     label="Go For It!"
                   1607:     oncommand="doExtraFunction( )"/&gt;</programlisting>
                   1608: 
                   1609: <para>
                   1610: Das <literal>buttonpack</literal> Attribut bestimmt ob die Buttons rechts, links
                   1611: oder in der Mitte des Fensters angezeigt werden sollen. Wenn kein Wert &uuml;bergeben wird,
                   1612: werden die Buttons anhand der Plattformdefinition positioniert. Bei Windows rechts, bei
                   1613: Unix in der Mitte.
                   1614: </para>
                   1615: 
                   1616: </sect3>
                   1617: </sect2>
                   1618: </sect1>
                   1619: 
                   1620: <sect1 role="" id="mozilla-CHP-3-SECT-7" label="3.7">
                   1621: <title>Widget Interaction</title>
                   1622: 
                   1623: <para>
                   1624: Nebst dem Gebrauch von Widgets um einzelne Funktionalit&auml;ten im Interface
                   1625: zug&auml;nglich zu machen, stellt Mozilla Funktionen zur Verf&uuml;gung Elemente zusammenzuh&auml;ngen
                   1626: und so komplexere Aufgaben zu &uuml;bernehmen. Wenn Sie zum Beispiel mehrere Widgets 
                   1627: haben, die die gleiche Funktion aufrufen, k&ouml;nnen Sie das Command- und Oberserver-System
                   1628: verwenden um die Wiederverwendbarkeit zu steigern. Oder Sie k&ouml;nnen Command-Sets zusammenstellen
                   1629: und in verschiedenen Teilen Ihrer Applikation &uuml;berlagern. Ein Beispiel daf&uuml;r ist die
                   1630: Cut- and Paste-Funktion in Mozillas Interface.
                   1631: </para>
                   1632: 
                   1633: <sect2 role="" id="mozilla-CHP-3-SECT-7.1" label="3.7.1">
                   1634: <title>Broadcaster und Observer</title>
                   1635: 
                   1636: <para>
                   1637: Broadcaster und Observer ist ein Mechanismus um eine Anzahl Elemente
                   1638: &uuml;ber den Zustand eines anderen Elements zu informieren. Dieses 'broadcasting' Element
                   1639: kann ein <literal>&lt;broadcaster&gt;</literal> oder jedes andere Element sein, das seinen
                   1640: Status &uuml;ber ein spezielles Attribut verbreiten kann. Ein Beispiel daf&uuml;r, ist das ausschalten
                   1641: eines 'View Source' Buttons und eines Menuitems, wenn die Webseite noch nicht verf&uuml;gbar ist.
                   1642: </para>
                   1643: 
                   1644: <para>
                   1645: Der Status eines Broadcasters muss explizit ge&auml;ndert werden, um die Oberserver zu
                   1646: aktualisieren.
                   1647: </para>
                   1648: 
                   1649: <programlisting>&lt;broadcasterset&gt;
                   1650:   &lt;broadcaster id="save_command" disabled="false"/&gt;
                   1651: &lt;/broadcasterset&gt;</programlisting>
                   1652: 
                   1653: <para>
                   1654: Wenn ein Broadcaster Set definiert ist, k&ouml;nnen in einer XUL Datei die Elemente
                   1655: definiert werden, die diese Broadcasts &uuml;berwachen.
                   1656: </para>
                   1657: 
                   1658: <programlisting>&lt;button id="new" label="Save File" observes="save_command"/&gt;
                   1659: &lt;key id="key_new" xulkey="true" key="s" observes="save_command" /&gt;
                   1660: &lt;menuitem id="new_menuitem" label="New" observes="save_command"/&gt;</programlisting>
                   1661: 
                   1662: <para>
                   1663: Observierende Elemente k&ouml;nnen auch &uuml;ber einzelne Attributs&auml;nderungen wachen, dies wird
                   1664: mit dem <literal>&lt;observes&gt;</literal> Element definiert:
                   1665: </para>
                   1666: 
                   1667: <programlisting>&lt;menuitem id="new_menuitem" value="New" observes="open_new"/&gt;
                   1668:  &lt;observes element="open_new" attribute="disabled"/&gt;
                   1669: &lt;/menu&gt;</programlisting>
                   1670: 
                   1671: <para>
                   1672: Das <literal>Element</literal> Attribut verbindet den Broadcaster und <literal>Attribut</literal>
                   1673: definiert, dass er auf Status&auml;nderungen von <literal>&lt;menuitem&gt;</literal> reagieren soll, indem er die
                   1674: gleiche Status&auml;nderung vollzieht.
                   1675: </para>
                   1676: 
                   1677: </sect2>
                   1678: <sect2 role="" id="mozilla-CHP-3-SECT-7.2" label="3.7.2">
                   1679: <title>Commands / Befehle</title>
                   1680: 
                   1681: <para>
                   1682: In einem <literal>&lt;commandset&gt;</literal> k&ouml;nnen unbeschr&auml;nkt viele andere
                   1683: Commands eingebettet werden, und verschiedene Sets k&ouml;nnen f&uuml;r verschiedene Events
                   1684: benutzt werden. Weiter ist es m&ouml;glich, dass Commandsets weitere Commandsets enthalten.
                   1685: Die Idee dahinter ist die, dass ein Basis-Set existiert, von dem alle
                   1686: anderen ausgehen; dieses Set wird meist in der obersten XUL Datei Ihrer Applikation
                   1687: abgelegt. Der folgende Code enth&auml;lt ein Commandset und bindet ein weiteres Commandset
                   1688: mit ein (<literal>moreEditItems</literal>).
                   1689: </para>
                   1690: 
                   1691: <programlisting>&lt;commandset id="EditItems"
                   1692:         <userinput>oncommandupdate</userinput>="updateCommandsetItems(this)"
                   1693:         <userinput>commandupdater</userinput>="true" <userinput>events</userinput>="select"&gt;
                   1694:     &lt;commandset id="moreEditItems" /&gt;
                   1695:     &lt;command id="cmd_cut" oncommand="goDoCommand('cmd_cut');"/&gt;
                   1696:     &lt;command id="cmd_copy" oncommand="goDoCommand('cmd_copy');"/&gt;
                   1697:     &lt;command id="cmd_delete" oncommand="goDoCommand('cmd_delete');"/&gt;
                   1698: &lt;/commandset&gt;</programlisting>
                   1699: 
                   1700: <para>
                   1701: Der Command Updater ist ein Mechanismus der verwendet wird um Command Events zwischen
                   1702: den Widgets zu verteilen. Wenn ein Event ausgef&uuml;hrt wird, wird es durch die Commandsets
                   1703: weitergereicht. Wenn im Beispiel oben, das <literal>select</literal> <literal>event</literal>
                   1704: aktiviert wird, werden alle Elemente dieses Sets aktiv. So k&ouml;nnen durch das setzen des
                   1705: <literal>disabled</literal> Attributs, alle angeschlossenen Widgets ausgeschaltet werden.
                   1706: </para>
                   1707: 
                   1708: <para>
                   1709: Es gibt verschiedene Wege den Command Updater zu starten. Erstens, assozieren des Widgets
                   1710: mit einem Command unter der Verwendung des <literal>command</literal> Attributs:
                   1711: </para>
                   1712: 
                   1713: <programlisting>&lt;button id="cut-item" label="Cut" <userinput>command="cmd_cut"</userinput> enabled="true"/&gt;</programlisting>
                   1714: 
                   1715: <para>
                   1716: Wenn der Button angeklickt wird, wird das Command (<literal>cmd_cut</literal>) gesucht und ausgef&uuml;hrt indem die
                   1717: <literal>goDoCommand</literal> Routine f&uuml;r das entsprechende Command aufgerufen wird.
                   1718: </para>
                   1719: 
                   1720: <para>
                   1721: Alternativ kann Ihre Applikation ein 'select' Event f&uuml;r einen Text oder ein Bild
                   1722: enthalten. Wenn dieses Event ausgel&ouml;st wird, l&auml;uft es durch das Commandset, das
                   1723: seinerseits mittels <literal>oncommandupdate</literal> die anderen Widgets aktualisiert.
                   1724: </para>
                   1725: 
                   1726: <para>
                   1727: Das Keyset Element wird benutzt, um Aktionen bei Tastendruck auszul&ouml;sen.
                   1728: Die Tastenkomination Ctrl-Shift-s kann so zum Beispiel als 'Speichern' definiert werden.
                   1729: </para>
                   1730: 
                   1731: <programlisting>&lt;key id="key_saveas" key="s" modifiers="control,shift" command="cmd_saveas"/&gt;</programlisting>
                   1732: 
                   1733: <para>
                   1734: Das Key Element kennt verschiedene Attribute, wie <literal>key</literal>, das 
                   1735: die Taste definiert, die den Aufruf ausl&ouml;sen soll. <literal>modifiers="accel</literal>"
                   1736: definiert, dass bei Windows und Unix Plattformen die Ctrl-Taste und bei Macintosh
                   1737: der Command Button gedr&uuml;ckt werden m&uuml;ssen.
                   1738: </para>
                   1739: 
                   1740: <para><link linkend="mozilla-CHP-3-EX-15">Beispiel 3-15</link> zeigt ein einfaches Fenster, das alle Sets enth&auml;lt: Commands, Broadcasters und Keys.
                   1741: </para>
                   1742: 
                   1743: <example id="mozilla-CHP-3-EX-15" label="3-15">
                   1744: <title>Shortcut Keys mit Command Observer</title>
                   1745: <programlisting>&lt;?xml version="1.0"?&gt;
                   1746: &lt;window id="hello-goodbye"
                   1747:     title="Hello Goodbye"
                   1748:     xmlns:html="http://www.w3.org/1999/xhtml"
                   1749:     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                   1750:     style="min-width:100px;min-height:100px;background-color:white;"&gt;
                   1751:   &lt;broadcasterset id="broadcasterset"&gt;
                   1752:     &lt;broadcaster id="cmd_hello" oncommand="alert('Hello There!');" /&gt;
                   1753:   &lt;/broadcasterset&gt;
                   1754:   &lt;keyset id="keyset"&gt;
                   1755:     &lt;key id="key_h" key="H" observes="cmd_hello" modifiers="accel,shift" /&gt;
                   1756:     &lt;key id="key_g" key="G" command="cmd_goodbye" modifiers="accel,shift" /&gt;
                   1757:   &lt;/keyset&gt;
                   1758:   &lt;commandset id="commandset"&gt;
                   1759:     &lt;command id="cmd_goodbye" oncommand="alert('Goodbye!');" /&gt;
                   1760:   &lt;/commandset&gt;
                   1761:   &lt;spacer flex="1"/&gt;
                   1762:   &lt;label value="hello/goodbye"/&gt;
                   1763:   &lt;textbox value="type ctl+shft+h"/&gt;
                   1764:   &lt;textbox value="type ctl+shft+g"/&gt;
                   1765:   &lt;spacer flex="1"/&gt;
                   1766: &lt;/window&gt;</programlisting>
                   1767: </example>
                   1768: 
                   1769: </sect2>
                   1770: </sect1>
                   1771: 
                   1772: <sect1 role="" id="mozilla-CHP-3-SECT-8" label="3.8">
                   1773: <title>Content Panels</title>
                   1774: 
                   1775: <para>
                   1776: Content Widgets erlauben es Ihnen, Inhalte in einem Fenster zu laden. Diese Widgets -- <literal>browser</literal> und <literal>editor</literal> --
                   1777: k&ouml;nnen entsprechende Inhalte laden. Zum Beispiel HTML, XML oder text.
                   1778: </para>
                   1779: 
                   1780: <sect2 role="" id="mozilla-CHP-3-SECT-8.1" label="3.8.1">
                   1781: <title>Browser und IFrame</title>
                   1782: 
                   1783: <para>
                   1784: Das <literal>&lt;browser&gt;</literal> Element bietet Ihrer Applikation komplette Browser-Eigenschaften, inklusive
                   1785: Navigation und History.
                   1786: </para>
                   1787: 
                   1788: <programlisting>&lt;browser id="content" type="content-primary" src="ch3.html"/&gt;</programlisting>
                   1789: 
                   1790: <para>
                   1791: <literal>browser</literal> bietet folgende Interfaces die in Ihren Scripts verwendet werden k&ouml;nnen:
                   1792: </para>
                   1793: 
                   1794: <itemizedlist><listitem>
                   1795: <para>nsIDocShell</para>
                   1796: </listitem><listitem>
                   1797: <para>nsIWebNavigation</para>
                   1798: </listitem><listitem>
                   1799: <para>nsIMarkupDocumentViewer</para>
                   1800: </listitem><listitem>
                   1801: <para>nsIContentViewerEdit</para>
                   1802: </listitem><listitem>
                   1803: <para>nsIContentViewerFile</para>
                   1804: </listitem><listitem>
                   1805: <para>nsIWebBrowserFind</para>
                   1806: </listitem><listitem>
                   1807: <para>nsIDocumentCharsetInfo</para>
                   1808: </listitem></itemizedlist>
                   1809: <para>
                   1810: Ohne weiter in die Details zu gehen sei gesagt, dass diese Interfaces komplexe Funktionalit&auml;t
                   1811: im Umgang mit webbrowsing und anderen browserspezifischen Dingen  erm&ouml;glichen und durch Javascript
                   1812: ansprechbar sind. Weitere Informationen dazu finden Sie in den IDL Dateien mit dem selben Namen
                   1813: im Mozilla Source Tree.
                   1814: </para>
                   1815: 
                   1816: <tip id="ch03-10-fm2xml" role="ora">
                   1817: <para>
                   1818: Wenn Sie mehr zu diesen Interfaces erfahren wollen, ist der beste Ort dazu der Sourcecode
                   1819: von Mozilla. Die zwei wichtigsten Dateien sind <filename>browser.xml</filename>, die zeigt
                   1820: welche Interfaces benutzt werden k&ouml;nnen und <filename>navigator.js</filename>, die aufzeigt
                   1821: wie diese Interfaces verwendet werden. Beide Dateien k&ouml;nnen in der online Mozilla
                   1822: Cross Reference, unter <systemitem role="url">http://lxr.mozilla.org</systemitem> eingesehen werden.
                   1823: </para>
                   1824: </tip>
                   1825: 
                   1826: <para>
                   1827: Eine Alternative zu <literal>&lt;browser&gt;</literal> ist <literal>&lt;iframe&gt;</literal>. Da
                   1828: es dem Browser im Aussehen sehr &auml;hnlich ist, ist es sehr gut f&uuml;r kurzlebige Inhalte verwenbar, zum Beispiel
                   1829: als Vorschau-Fenster in einem HTML/XML Editor oder anderen WYSIWYG Applikationen. IFrames sind auch
                   1830: sehr gut dazu geeignet Dokumente dynamisch zu editieren:
                   1831: </para>
                   1832: 
                   1833: <programlisting>&lt;iframe id="simple-content" /&gt;</programlisting>
                   1834: 
                   1835: <para>
                   1836: Die Methoden <literal>open( )</literal>, <literal>write( )</literal> und
                   1837: <literal>close( )</literal> werden benutzt um ein Dokument zu editieren:
                   1838: </para>
                   1839: 
                   1840: <programlisting>var doc = window.frames[1].document;
                   1841: doc.open( );
                   1842: doc.write("&lt;html&gt;&lt;body&gt;Come fly with me ...&lt;/body&gt;&lt;/html&gt;");
                   1843: doc.close( );</programlisting>
                   1844: 
                   1845: <para>
                   1846: In diesem Beispiel greifen wir auf das Dokument zu, indem wir es &uuml;ber <literal>window.frames</literal>
                   1847: ansprechen, dem Objekt, das alle Frames enth&auml;lt. Wenn mehrere Frames vorkommen werden diese numeriert. Im
                   1848: Beispiel verwenden wir das zweite Frame (Element 1 in einem 0-basierten Array Index). Die
                   1849: <literal>doc</literal> Variable h&auml;lt eine Referenz zum Inhalt und verwendet die Methoden
                   1850: des <literal>document</literal> um es zu editieren.
                   1851: </para>
                   1852: 
                   1853: <para>
                   1854: Ideen f&uuml;r Control Panel sind:<footnote label="3"> <para>Diese Beispiele dienen
                   1855: nicht dazu aufzuzeigen wie Sie die Gecko Engine in einer eigenen Applikation
                   1856: integrieren, daf&uuml;r sind ein anderes Toolkit und ein Set von APIs verf&uuml;gbar.
                   1857: </para></footnote>
                   1858: </para>
                   1859: 
                   1860: <itemizedlist><listitem>
                   1861: <para>
                   1862: HTML oder XML Helpseiten, die in der Applikation durch den Browser geladen werden.
                   1863: </para>
                   1864: </listitem><listitem>
                   1865: <para>
                   1866: Vorschau Fenster: testen Sie Ihr XML, HTML oder CSS Layout und Styling in Gecko.
                   1867: </para>
                   1868: </listitem><listitem>
                   1869: <para>
                   1870: Eine Font-Vorschau, &auml;hnlich wie im vorhergehenden Beispiel, aber mit mehreren
                   1871: verschiedenen Elementen, die sich je nach Auswahl des Benutzers &auml;ndern.
                   1872: </para>
                   1873: </listitem><listitem>
                   1874: <para>Kleine Fenster, die Webinhalte anzeigen</para>
                   1875: </listitem></itemizedlist>
                   1876: </sect2>
                   1877: <sect2 role="" id="mozilla-CHP-3-SECT-8.2" label="3.8.2">
                   1878: <title>Editor</title>
                   1879: 
                   1880: <para>
                   1881: Das <literal>&lt;editor&gt;</literal> Element l&auml;dt editierbare Inhalte und
                   1882: kann mit Text und HTML umgehen. Ein gutes Beispiel daf&uuml;r ist der Mozilla Composer,
                   1883: der HTML Editor, der in Mozilla enthalten ist.
                   1884: </para>
                   1885: 
                   1886: <para>
                   1887: Das <literal>&lt;editor&gt;</literal> Tag erstellt eine Instanz von
                   1888: <emphasis>nsEditorBoxObject</emphasis>. Von diesem Punkt an, k&ouml;nnen
                   1889: Sie via Javascript (<literal>element.editorShell</literal>) auf die
                   1890: <literal>editorShell</literal> Methoden zugreifen.
                   1891: </para>
                   1892: 
                   1893: <para>
                   1894: Der Editor wird an verschiedenen Orten in Mozilla eingesetzt. Zum Beispiel
                   1895: in einer <literal>textbox</literal> in HTML Forumlaren und um Nachrichten
                   1896: in Mail/News zu schreiben. Reine Text-Widgets unterscheiden sich insofern, als
                   1897: dass sie nur limitierte Editiereigenschaften zur Verf&uuml;gung stellen.
                   1898: </para>
                   1899: 
                   1900: <para>Anwendungen des Editors, sowohl praktisch als auch spekaultiv:</para>
                   1901: 
                   1902: <itemizedlist><listitem>
                   1903: <para>Plaintext Editor</para>
                   1904: </listitem><listitem>
                   1905: <para>HTML Formular Editor</para>
                   1906: </listitem><listitem>
                   1907: <para>
                   1908: Ein Bulletin Board das mit HTML arbeitet, ein G&auml;stebuch Formular oder ein Wiki Interface um Kommentare zu posten.
                   1909: </para>
                   1910: </listitem><listitem>
                   1911: <para>Instant Messaging</para>
                   1912: </listitem></itemizedlist>
                   1913: <sidebar id="mozilla-CHP-3-SIDEBAR-1">
                   1914: <title>Dokumente mit mehreren Frames verarbeiten</title>
                   1915: 
                   1916: <para>
                   1917: Die Inhalte in einem <literal>&lt;browser&gt;</literal>, <literal>&lt;iframe&gt;</literal>
                   1918: und <literal>&lt;editor&gt;</literal> werden als einzelne Dokumente behandelt. Wie k&ouml;nnen
                   1919: Sie also auf spezifische Inhalte zugreifen?
                   1920: </para>
                   1921: 
                   1922: <para>Um auf alle Frames eines Dokuments zuzugreifen benutzen Sie:</para>
                   1923: 
                   1924: <programlisting>var contentAreas = content.frames;</programlisting>
                   1925: 
                   1926: <para>
                   1927: Um ein Frame auszuw&auml;hlen, k&ouml;nnen Sie entweder dessen <literal>id</literal> oder
                   1928: den Index verwenden.
                   1929: </para>
                   1930: 
                   1931: <para>Nach Index, Start 0:</para>
                   1932: 
                   1933: <programlisting>var content = window.frames[ 1 ];</programlisting>
                   1934: 
                   1935: <para>Nach <literal>id</literal>:</para>
                   1936: 
                   1937: <programlisting>var content = window.frames[ contentId ];</programlisting>
                   1938: 
                   1939: <para>Dieser Code gibt das zweite Frame zur&uuml;ck.</para>
                   1940: 
                   1941: <para>
                   1942: Um ein IFrame als Standard zu definieren, setzen Sie dessen Attribut <literal>type</literal> und geben ihm einen eindeutigen Wert.
                   1943: </para>
                   1944: 
                   1945: <programlisting>&lt;iframe id="print-panel" type="content-primary" src="about:blank" flex="1""/&gt;</programlisting>
                   1946: 
                   1947: <para>Danach k&ouml;nnen Sie so auf den Inhalt zugreifen:
                   1948: </para>
                   1949: 
                   1950: <programlisting>window.content.print( );</programlisting>
                   1951: </sidebar>
                   1952: 
                   1953: </sect2>
                   1954: </sect1>
                   1955: 
                   1956: <sect1 role="" id="mozilla-CHP-3-SECT-9" label="3.9">
                   1957: <title>Das Box Modell</title>
                   1958: 
                   1959: <para>
                   1960: Das <emphasis>box model</emphasis> ist der einfachste Weg, Elemente in einem
                   1961: Fenster zu positionieren. Obwohl dies auch &uuml;ber Layout-Attribute des
                   1962: <literal>window</literal> Elements (ein Box basierter Container) m&ouml;glich ist,
                   1963: k&ouml;nnen Sie mit Boxes Widgets verschachteln, ausrichten und positionieren
                   1964: wie Sie w&uuml;nschen. Das Box Modell definiert:
                   1965: </para>
                   1966: 
                   1967: <itemizedlist><listitem>
                   1968: <para>
                   1969: Wieviel Platz ein Element in Relation zu seiner Umgebung einnehmen darf.
                   1970: </para>
                   1971: </listitem><listitem>
                   1972: <para>Die Ausrichtung der Elemente</para>
                   1973: </listitem><listitem>
                   1974: <para>Die Verbindung der Elemente untereinander</para>
                   1975: </listitem></itemizedlist>
                   1976: <para>
                   1977: Raum kann auf verschiedene Weisen definiert werden. Sie k&ouml;nnen den 
                   1978: Fenstern zum Beispiel fixe Gr&ouml;ssen geben, oder den Widgets, die in
                   1979: dem Fenster enthalten sind. Oder Sie k&ouml;nnen die Elemente sich selbst
                   1980: an die Platzverh&auml;ltnisse anpassen lassen. Boxes zu verwenden optimiert das Layout
                   1981: Ihrer XUL Fenster und Dialoge.
                   1982: </para>
                   1983: 
                   1984: <sect2 role="" id="mozilla-CHP-3-SECT-9.1" label="3.9.1">
                   1985: <title>Box Attribute</title>
                   1986: 
                   1987: <para>
                   1988: &Uuml;ber das XUL Element <literal>&lt;box&gt;</literal> k&ouml;nnen verschiedene Attribute
                   1989: gesetzt werden, die sich auf das Layout auswirken. Boxes k&ouml;nnen verschachtelt werden
                   1990: um das Layout des Interfaces zu definieren. Dabei belegen einige Boxes den gesamten, ihnen
                   1991: zur Verf&uuml;gung stehenden Platz, andere nur genug um die eigenen Inhalte darzustellen.
                   1992: </para>
                   1993: 
                   1994: <para>
                   1995: Attribute der Box und derer Kindelemente definieren wie die Inhalte in einer Box
                   1996: angezeigt werden, die Art wie die Fenstergr&ouml;sse ge&auml;ndert werden kann und
                   1997: die Ausrichtung der Elemente, wie <link linkend="mozilla-CHP-3-TABLE-4">Tabelle 3-4</link> beschreibt.
                   1998: </para>
                   1999: 
                   2000: <table id="mozilla-CHP-3-TABLE-4" label="3-4">
                   2001: 
                   2002: <title>Normale Box Attribute</title>
                   2003: <tgroup cols="4">
                   2004: <colspec colnum="1" colname="col1"/>
                   2005: <colspec colnum="2" colname="col2"/>
                   2006: <colspec colnum="3" colname="col3"/>
                   2007: <colspec colnum="4" colname="col4"/>
                   2008: <thead>
                   2009: <row>
                   2010: <entry>
                   2011: <para>Attribut</para>
                   2012: </entry>
                   2013: <entry>
                   2014: <para>Wert</para>
                   2015: </entry>
                   2016: <entry>
                   2017: <para>Standardwert</para>
                   2018: </entry>
                   2019: <entry>
                   2020: <para>Beschreibung</para>
                   2021: </entry>
                   2022: </row>
                   2023: </thead>
                   2024: <tbody>
                   2025: <row>
                   2026: <entry>
                   2027: <para>align</para>
                   2028: </entry>
                   2029: <entry>
                   2030: <para>start | end | center | baseline | stretch | inherit</para>
                   2031: </entry>
                   2032: <entry>
                   2033: <para>stretch</para>
                   2034: </entry>
                   2035: <entry>
                   2036: <para>
                   2037: Definiert wie die Kinder ausgerichtet werden.
                   2038: </para>
                   2039: </entry>
                   2040: </row>
                   2041: <row>
                   2042: <entry>
                   2043: <para>flex</para>
                   2044: </entry>
                   2045: <entry>
                   2046: <para>&lt;number&gt; | inherit</para>
                   2047: </entry>
                   2048: <entry>
                   2049: <para>0.0</para>
                   2050: </entry>
                   2051: <entry>
                   2052: <para>
                   2053: Definiert die Flexibilit&auml;t eines Elements
                   2054: </para>
                   2055: </entry>
                   2056: </row>
                   2057: <row>
                   2058: <entry>
                   2059: <para>style</para>
                   2060: </entry>
                   2061: <entry>
                   2062: <para>CSS Property oder Wert</para>
                   2063: </entry>
                   2064: <entry>
                   2065: <para>N/A</para>
                   2066: </entry>
                   2067: <entry>
                   2068: <para>F&uuml;gt der Box CSS Style Regeln hinzu</para>
                   2069: </entry>
                   2070: </row>
                   2071: <row>
                   2072: <entry>
                   2073: <para>orient</para>
                   2074: </entry>
                   2075: <entry>
                   2076: <para>horizontal | vertical | inline-axis | block-axis | inherit</para>
                   2077: </entry>
                   2078: <entry>
                   2079: <para>inline-axis</para>
                   2080: </entry>
                   2081: <entry>
                   2082: <para>Definiert die Ausrichtung der Kindelemente innerhalb der Box</para>
                   2083: </entry>
                   2084: </row>
                   2085: <row>
                   2086: <entry>
                   2087: <para>pack</para>
                   2088: </entry>
                   2089: <entry>
                   2090: <para>start | end | center | justify | inherit</para>
                   2091: </entry>
                   2092: <entry>
                   2093: <para>start</para>
                   2094: </entry>
                   2095: <entry>
                   2096: <para>
                   2097: Definiert was mit dem &uuml;brigbleibenden Raum gemacht werden soll, wenn alle Objekte in
                   2098: Ihrer vollen Gr&ouml;sse angezeigt werden.
                   2099: </para>
                   2100: </entry>
                   2101: </row>
                   2102: <row>
                   2103: <entry>
                   2104: <para>direction</para>
                   2105: </entry>
                   2106: <entry>
                   2107: <para>normal | reverse | inherit</para>
                   2108: </entry>
                   2109: <entry>
                   2110: <para>normal</para>
                   2111: </entry>
                   2112: <entry>
                   2113: <para>Definiert die Richtung der Kindelemente</para>
                   2114: </entry>
                   2115: </row>
                   2116: <row>
                   2117: <entry>
                   2118: <para>ordinal-group</para>
                   2119: </entry>
                   2120: <entry>
                   2121: <para>&lt;integer&gt; | inherit</para>
                   2122: </entry>
                   2123: <entry>
                   2124: <para>1</para>
                   2125: </entry>
                   2126: <entry>
                   2127: <para>Kontrolliert die Reihenfolge in der die Widget erscheinen.</para>
                   2128: </entry>
                   2129: </row>
                   2130: </tbody>
                   2131: </tgroup>
                   2132: </table>
1.2     ! halter   2133: 
1.1       halter   2134: <para>
                   2135: Die Attribute in <link linkend="mozilla-CHP-3-TABLE-4">Tabelle 3-4</link> (mit Ausnahme von
                   2136: <literal>style</literal>), werden direkt an der Box definiert. Es gibt dazu aber auch CSS Properties,
                   2137: die den Prefix <literal>box-</literal> tragen. <literal>pack</literal> wird zum Beispiel zu <literal>box-pack</literal>.
                   2138: Da diese Properties nicht Teil der CSS Spezifikation sind, m&uuml;ssen wir noch einen Schritt weiter gehen und
                   2139: das Format <literal>-moz-box-pack</literal> verwenden. Diese speziellen Erweiterungen werden in <link linkend="mozilla-CHP-4-SECT-2.3">Abschnitt</link>
                   2140: in <link linkend="mozilla-CHP-4">Kapitel 4</link> n&auml;her erl&auml;utert.
                   2141: </para>
                   2142: 
                   2143: <para>
                   2144: Die meistgebrauchten Attribute sind <literal>orient</literal>, <literal>align</literal>
                   2145: und <literal>pack</literal>. Die Ausrichtung der Elemente kann entweder horizontal
                   2146: oder vertikal erfolgen. Der Standardwert ist horizontal f&uuml;r eine normale <literal>&lt;box&gt;</literal>.
                   2147: Andere Box-Typen (wie <literal>&lt;groupbox&gt;</literal>) sind vertikal ausgerichtet.
                   2148: <literal>&lt;vbox&gt;</literal> und <literal>&lt;hbox&gt;</literal> wurden zur
                   2149: Vereinfachung entwickelt, einerseits, um dieses Attribut zu umgehen, aber auch um die Renderzeit zu senken.
                   2150: </para>
                   2151: 
                   2152: <para>
                   2153: Folgend, ein Beispiel davon, wie 'pack' und 'align' das Layout beinflussen. Zuerst ein bisschen Code:
                   2154: </para>
                   2155: 
                   2156: <programlisting>&lt;vbox style="width: 90px; height: 90px"&gt;
                   2157:   &lt;button label="Pack Me!" /&gt;
                   2158:   &lt;label value="This text is naturally aligned to the left" /&gt;
                   2159: &lt;/vbox&gt;</programlisting>
                   2160: 
                   2161: <para>
                   2162: Dieser Code weist dem Button keine Position zu. Deshalb wird er an der Standardposition angezeigt: <link linkend="mozilla-CHP-3-FIG-9">Abbildung 3-9</link>.
                   2163: </para>
                   2164: 
                   2165: <figure id="mozilla-CHP-3-FIG-9" label="3-9">
                   2166: <title>Standardpositionierung</title>
                   2167: <graphic fileref="figs/moz_0309.png"/></figure>
                   2168: 
                   2169: <para>
                   2170: Hier eine angepasste Version mit gesetzten <literal>align</literal> und <literal>pack</literal> Attributen:
                   2171: </para>
                   2172: 
                   2173: <programlisting>&lt;vbox style="width: 90px; height: 90px" align="right" pack="center"&gt;</programlisting>
                   2174: 
                   2175: <para>Wie Sie sehen, &auml;ndert dies die Anzeige ziemlich: <link linkend="mozilla-CHP-3-FIG-10">Abbildung 3-10</link>. 
                   2176: </para>
                   2177: 
                   2178: <figure id="mozilla-CHP-3-FIG-10" label="3-10">
                   2179: <title>Box Alignment und Packing</title>
                   2180: <graphic fileref="figs/moz_0310.png"/></figure>
                   2181: 
                   2182: <para>
                   2183: Der Wert von <literal>align</literal> positioniert beide Elemente rechts in der Box,
                   2184: beschr&auml;nkt die Gr&ouml;sse des Buttons auf das notwendigste und gibt dem <literal>label</literal>
                   2185: den ben&ouml;tigten Platz. <literal>pack</literal> zentriert danach beide Elemente horizontal.
                   2186: </para>
                   2187: 
                   2188: </sect2>
                   2189: <sect2 role="" id="mozilla-CHP-3-SECT-9.2" label="3.9.2">
                   2190: <title>Boxartige Container</title>
                   2191: 
                   2192: <para>
                   2193: Eine normale XUL Box wird vorallem durch <literal>&lt;box&gt;</literal>, <literal>&lt;vbox&gt;</literal>
                   2194: und <literal>&lt;hbox&gt;</literal> gestaltet, es gibt aber noch weitere, Box-&auml;hnliche
                   2195: Container:
                   2196: </para>
                   2197: 
                   2198: <itemizedlist><listitem>
                   2199: <para><literal>&lt;radiogroup&gt;</literal><indexterm id="IXT-3-670"><primary>Radiogroup
                   2200: Element, XUL</primary></indexterm>
                   2201: </para>
                   2202: </listitem><listitem>
                   2203: <para><literal>&lt;scrollbox&gt;</literal><indexterm id="IXT-3-671"><primary>Scrollbox
                   2204: Element, XUL</primary></indexterm>
                   2205: </para>
                   2206: </listitem><listitem>
                   2207: <para><literal>&lt;tabbox&gt;</literal><indexterm id="IXT-3-672"><primary>Tabbox element,
                   2208: EUL</primary></indexterm>
                   2209: </para>
                   2210: </listitem><listitem>
                   2211: <para><literal>&lt;groupbox&gt;</literal><indexterm id="IXT-3-673"><primary>Groupbox
                   2212: Element, XUL</primary></indexterm>
                   2213: </para>
                   2214: </listitem><listitem>
                   2215: <para><literal>&lt;toolbox&gt;</literal><indexterm id="IXT-3-674"><primary>Toolbox
                   2216: Element, XUL</primary></indexterm>
                   2217: </para>
                   2218: </listitem><listitem>
                   2219: <para><literal>&lt;stack&gt;</literal><indexterm id="IXT-3-675"><primary>Stack Element,
                   2220: XUL</primary></indexterm>
                   2221: </para>
                   2222: </listitem><listitem>
                   2223: <para><literal>&lt;deck&gt;</literal><indexterm id="IXT-3-676"><primary>Deck Element,
                   2224: XUL</primary></indexterm>
                   2225: </para>
                   2226: </listitem><listitem>
                   2227: <para><literal>&lt;listbox&gt;</literal><indexterm id="IXT-3-677"><primary>Listbox
                   2228: Element, XUL</primary></indexterm>
                   2229: </para>
                   2230: </listitem><listitem>
                   2231: <para><literal>&lt;popup&gt;</literal><indexterm id="IXT-3-678"><primary>Popup Element,
                   2232: XUL</primary></indexterm>
                   2233: </para>
                   2234: </listitem><listitem>
                   2235: <para><literal>&lt;statusbar&gt;</literal><indexterm id="IXT-3-679"><primary>Statusbar
                   2236: Element, XUL</primary></indexterm>
                   2237: </para>
                   2238: </listitem></itemizedlist>
                   2239: <para>
                   2240: Weitere Informationen zu Box Widgets finden Sie in der Referenz in
                   2241: <link linkend="mozilla-APP-C">Anhang C</link>. Hier noch ein paar Beschreibungen
                   2242: zu Tabbed-Boxes:
                   2243: </para>
                   2244: 
                   2245: <sect3 role="" id="mozilla-CHP-3-SECT-9.2.1" label="3.9.2.1">
                   2246: <title>Tab Box</title>
                   2247: 
                   2248: <para>Tab Boxes k&ouml;nnen nur <literal>&lt;tabs&gt;</literal> und <literal>&lt;tabpanels&gt;</literal> enthalten, wie in <link linkend="mozilla-CHP-3-EX-16">Beispiel 3-16</link>
                   2249: gezeigt wird. Dar&uuml;ber hinaus gibt es keine Einschr&auml;nkungen welche Inhalte Panels enthalten d&uuml;rfen. Um eine korrekte Anzeige zu garantieren sollten Sie immer gleich
                   2250: viele Tabpanels wie Tabs benutzen.
                   2251: </para>
                   2252: 
                   2253: <example id="mozilla-CHP-3-EX-16" label="3-16">
                   2254: <title>Tabbed Panels </title>
                   2255: <programlisting>&lt;tabbox orient="vertical" flex="1"&gt; 
                   2256:   &lt;tabs&gt; 
                   2257:     &lt;tab label="Fish" /&gt; 
                   2258:     &lt;tab label="Birds" /&gt; 
                   2259:     &lt;tab label="Coders" /&gt;
                   2260:   &lt;/tabs&gt;
                   2261:   &lt;tabpanels flex="1"&gt; 
                   2262:     &lt;button label="Swim"/&gt; 
                   2263:     &lt;button label="Fly"/&gt; 
                   2264:     &lt;button label="Hack"/&gt;
                   2265:   &lt;/tabpanels&gt; 
                   2266: &lt;/tabbox&gt;</programlisting>
                   2267: </example>
                   2268: 
                   2269: <para>
                   2270: <link linkend="mozilla-CHP-3-EX-16">Beispiel 3-16</link> zeigt, wie einfache Tab-Panels erstellt werden, die
                   2271: Tabs werden mit den Panels anhand der Reihenfolge im Code assoziert.
                   2272: </para>
                   2273: 
                   2274: </sect3>
                   2275: 
                   2276: <sect3 role="" id="mozilla-CHP-3-SECT-9.2.2" label="3.9.2.2">
                   2277: <title>Status Bar</title>
                   2278: 
                   2279: <para>
                   2280: Eine Statusbar ist eine horizontale Box, die am unteren Rand einer Apllikation
                   2281: angezeigt wird. Die <literal>&lt;statusbar&gt;</literal> enth&auml;lt normalerweise
                   2282: Icons und Text in einem oder mehreren <literal>&lt;statusbarpanel&gt;</literal> Elementen.
                   2283: </para>
                   2284: 
                   2285: <programlisting>&lt;statusbar id="ch3-bar" persist="collapsed"&gt;
                   2286:   &lt;statusbarpanel class="statusbarpanel-iconic" id="book-icon"/&gt;
                   2287:   &lt;statusbarpanel id="status-text" label="Thanks for reading chapter 3"
                   2288:       flex="1" crop="right"/&gt;
                   2289:   &lt;statusbarpanel class="statusbarpanel-iconic" id="book-icon-2"/&gt;
                   2290: &lt;/statusbar&gt;</programlisting>
                   2291: 
                   2292: <para>
                   2293: Als Box verh&auml;lt sich die Statusbar wie jedes andere Widget. Die Panels begrenzen
                   2294: ihre Gr&ouml;sse auf den ihnen zugewiesenen Platz und Flex. In diesem Beispiel erscheinen die
                   2295: Icons links und rechts der Statusbar, w&auml;hrend dem das Textpanel mit dem Flex den
                   2296: &uuml;brigen Platz beansprucht.
                   2297: </para>
                   2298: 
                   2299: </sect3>
                   2300: </sect2>
                   2301: <sect2 role="" id="mozilla-CHP-3-SECT-9.3" label="3.9.3">
                   2302: <title>Weitere Box Features</title>
                   2303: 
                   2304: <para>
                   2305: Boxes arbeiten mit <literal>&lt;separator&gt;</literal> und <literal>&lt;spacer&gt;</literal> zusammen.
                   2306: Diese beiden Elemente kreieren Platz zwischen Widgets in einer Box und k&ouml;nnen
                   2307: horizontal oder vertikal ausgerichtet werden. Der Separator ist ein sichtbarer Trenner und der
                   2308: Spacer bleibt unsichtbar. Die Standardgr&ouml;sse von beiden ist klein, kann aber, wie bei anderen Elementen, durch die <literal>flex</literal>, <literal>width</literal>
                   2309: und <literal>height</literal> Werte beeinflusst werden. Korrekt angewandt haben sie grossen
                   2310: Einfluss auf das Aussehen Ihrer Interfaces.
                   2311: </para>
                   2312: 
                   2313: <sect3 role="" id="mozilla-CHP-3-SECT-9.3.1" label="3.9.3.1">
                   2314: <title>Visibility / Sichtbarkeit</title>
                   2315: 
                   2316: <para>
                   2317: Sie k&ouml;nnen die Sichtbarkeit einer Box nach Wunsch &auml;ndern, zum Beispiel
                   2318: wenn Sie Dialoge machen m&ouml;chten die man aufklappen kann, oder Text anzeigen
                   2319: wollen, nachdem der Benutzer eine Auswahl getroffen hat. Ein Weg dies zu kontrollieren
                   2320: ist &uuml;ber das <literal>collapsed</literal> Attribut:
                   2321: </para>
                   2322: 
                   2323: <programlisting>&lt;box flex="1" collapsed="true" /&gt;</programlisting>
                   2324: 
                   2325: <para>Sie k&ouml;nnen auch das CSS Property <literal>display</literal> auf <literal>none</literal> setzen:
                   2326: </para>
                   2327: 
                   2328: <programlisting>&lt;box flex="1" style="display: none;" /&gt;</programlisting>
                   2329: 
                   2330: <para>
                   2331: Das Dokument wird gerendered als ob es nicht existieren w&uuml;rde. Wenn Sie den Leerraum zwischen den
                   2332: Elementen erhalten wollen, k&ouml;nnen Sie dazu das CSS <literal>visibility</literal> Property verwenden:
                   2333: </para>
                   2334: 
                   2335: <programlisting>&lt;box flex="1" style="visibility: hidden;" /&gt;</programlisting>
                   2336: 
                   2337: <para>
                   2338: Den Leerraum anzuzeigen verhindert, dass das Interface flackert wenn Teile angezeigt und wieder
                   2339: ausgeblendet werden.
                   2340: </para>
                   2341: 
                   2342: </sect3>
                   2343: 
                   2344: <sect3 role="" id="mozilla-CHP-3-SECT-9.3.2" label="3.9.3.2">
                   2345: <title>Overflow / Overflow Verhalten</title>
                   2346: 
                   2347: <para>
                   2348: Die Werte <literal>scroll</literal> und <literal>auto</literal> f&uuml;r das
                   2349: CSS <literal>overflow</literal> Property stellen sicher, dass Scrollbalken angezeigt werden
                   2350: wenn der Inhalt ansonsten unzug&auml;nglich w&auml;re. Der Wert <literal>hidden</literal>
                   2351: versteckt den Inhalt ausserhalb der Box. Der Inhalt wird nicht abgeschnitten wenn dieser
                   2352: Wert auf <literal>visible</literal> gesetzt wird, dann wird der Inhalt ausserhalb der Box
                   2353: angezeigt.
                   2354: </para>
                   2355: 
                   2356: <programlisting>&lt;vbox flex="1" style="height:39px;overflow: auto;"&gt;</programlisting>
                   2357: 
                   2358: <para>
                   2359: Dieses Codeschnipsel beschr&auml;nkt die H&ouml;he der Box, zeigt aber einen Scrollbalken an, wenn der Inhalt
                   2360: den verf&uuml;gbaren Platz &uuml;bersteigt.
                   2361: </para>
                   2362: 
                   2363: </sect3>
                   2364: </sect2>
                   2365: <sect2 role="" id="mozilla-CHP-3-SECT-9.4" label="3.9.4">
                   2366: <title>Stacks und Decks</title>
                   2367: 
                   2368: <para>
                   2369: Spezielle Varianten von <literal>box</literal> sind mit <literal>stack</literal> und <literal>deck</literal>
                   2370: verf&uuml;gbar. Beides sind auch Boxes, zeigen jedoch die Kind-Elemente, einem Kartenstapel &auml;hnlich, &uuml;bereinander an.
                   2371: </para>
                   2372: 
                   2373: <para>
                   2374: Ein <literal>stack</literal> zeigt alle Level gleichzeitig an. Wenn Sie Transparenz oder zus&auml;tzlichen, freien Platz auf einem
                   2375: Level haben, sehen Sie die darunter liegenden Elemente. Somit k&ouml;nnen Stacks auch verwendet werden, wenn Sie Schatten oder
                   2376: transparente Layer-Effekte verwenden wollen. <link linkend="mozilla-CHP-3-FIG-11">Abbildung 3-11</link> zeigt ein Beispiel eines Stacks.
                   2377: </para>
                   2378: 
                   2379: <programlisting>&lt;stack&gt;
                   2380:   &lt;image src="logo5.gif"/&gt;
                   2381:   &lt;label value="BUZZ ..." 
                   2382:       style="font-weight:bold; font-size: large" top="70px" left="140px"/&gt;
                   2383: &lt;/stack&gt;</programlisting>
                   2384: 
                   2385: <figure id="mozilla-CHP-3-FIG-11" label="3-11">
                   2386: <title>Text auf einem Bild</title>
                   2387: <graphic fileref="figs/moz_0311.png"/></figure>
                   2388: 
                   2389: <para>Decks zeigen nur ein Level an. In <link linkend="mozilla-CHP-3-EX-17">Beispiel 3-17</link> wird <emphasis>logo3.gif</emphasis> zuoberst angezeigt, weil
                   2390: das Attribut <literal>selectedIndex</literal> des Decks auf 2 gesetzt ist.
                   2391: </para>
                   2392: 
                   2393: <example id="mozilla-CHP-3-EX-17" label="3-17">
                   2394: <title>Ein Deck mit 3 Bild-Layern</title>
                   2395: <programlisting>&lt;deck id="fly-deck" selectedIndex="2"&gt;
                   2396:   &lt;image src="logo1.gif" /&gt;
                   2397:   &lt;image src="logo2.gif" /&gt;
                   2398:   &lt;image src="logo3.gif" /&gt;
                   2399: &lt;/deck&gt;</programlisting>
                   2400: </example>
                   2401: 
                   2402: <para>
                   2403: Wie <link linkend="mozilla-CHP-3-EX-18">Beispiel 3-18</link> zeigt, ist es m&ouml;glich, durch DOM Manipluation die Anzeige
                   2404: zu ändern, indem der Index des Decks ge&auml;ndert wird. Die Methode <literal>setAttribute</literal> &auml;ndert das
                   2405: <literal>selectedIndex</literal> Attribut des Deck <literal>element</literal> im Script, und kann zum Beispiel
                   2406: ausgef&uuml;hrt werden, wenn der Benutzer einen Button anklickt.
                   2407: </para>
                   2408: 
                   2409: <example id="mozilla-CHP-3-EX-18" label="3-18">
                   2410: <title>Deck Layer umschalten</title>
                   2411: <programlisting>var deck = document.getElementById("fly-deck");
                   2412: var selected = deck.getAttribute("selectedIndex");
                   2413: if (!selected)
                   2414:     selected = 0;
                   2415: if (selected &lt; 2)  {
                   2416:     selected = parseInt(selected) + 1;
                   2417:     deck.setAttribute("selectedIndex", selected);
                   2418: }
                   2419: else  {
                   2420:     selected = 0;
                   2421:     deck.setAttribute("selectedIndex", selected);
                   2422: }</programlisting>
                   2423: </example>
                   2424: 
                   2425: <para>
                   2426: Wenn Sie dieses Script mit dem Code aus <link linkend="mozilla-CHP-3-EX-17">Beispiel 3-17</link>
                   2427: verwenden, sorgt er daf&uuml;r, dass unaufh&ouml;rlich das n&auml;chste Bild im Deck-Stapel angezeigt wird, wenn Sie den Button
                   2428: bet&auml;tigten.
                   2429: </para>
                   2430: 
                   2431: <sect3 role="" id="mozilla-CHP-3-SECT-9.4.1" label="3.9.4.1">
                   2432: <title>Bewegbare Inhalte</title>
                   2433: 
                   2434: <para>
                   2435: Fr&uuml;her gab es das <literal>bulletinboard</literal> Element, welches zuliess dass Elemente
                   2436: &uuml;bereinander gestapelt und anhand der left und top Attribute positioniert werden konnten.
                   2437: Als <literal>stack</literal> entwickelt wurde und immer mehr dieser Funktionalit&auml;t &uuml;bernahm,
                   2438: wurde <literal>bulletinboard</literal> entfernt und die &uuml;brigen Features in das <literal>stack</literal>
                   2439: Element eingebaut. Wie <link linkend="mozilla-CHP-3-EX-19">Beispiel 3-19</link> zeigt, war dies f&uuml;r das <literal>stack</literal>
                   2440: Element von Vorteil. Die zwei Boxes im Beispiel werden anhand ihres Abstands zur oberen linken Ecke des Stacks positioniert.
                   2441: </para>
                   2442: 
                   2443: <example id="mozilla-CHP-3-EX-19" label="3-19">
                   2444: <title>Positionierung in einem Stack </title>
                   2445: <programlisting>&lt;stack&gt; 
                   2446:  &lt;box id="box1" top="20px" left="40px"&gt; 
                   2447:   &lt;image src="logo1.gif" /&gt;
                   2448:  &lt;/box&gt;
                   2449:  &lt;box id="box2" top="40px" left="50px"&gt; 
                   2450:   &lt;image src="logo2.gif" /&gt; 
                   2451:  &lt;/box&gt; 
                   2452: &lt;/stack&gt;</programlisting>
                   2453: </example>
                   2454: 
                   2455: <para>
                   2456: Sie k&ouml;nnen die Position der Boxes wie folgt &auml;ndern:
                   2457: </para>
                   2458: 
                   2459: <itemizedlist><listitem>
                   2460: <para>Indem Sie die <literal>top</literal> und <literal>left</literal> Attribute innerhalb des Tags definieren.
                   2461: </para>
                   2462: </listitem><listitem>
                   2463: <para>
                   2464: Indem Sie die CSS Properties <literal>top</literal> und <literal>left</literal> benutzen
                   2465: </para>
                   2466: </listitem><listitem>
                   2467: <para>Oder durch DOM Manipulation</para>
                   2468: </listitem></itemizedlist>
                   2469: <para>Folgendes Script &auml;ndert die Positionierung durch die &Auml;nderung der Attribute <literal>top</literal> und <literal>left</literal>:
                   2470: </para>
                   2471: 
                   2472: <programlisting>Box1=document.getElementById("box1")
                   2473: Box1.setAttribute("top","40px")
                   2474: Box1.setAttribute("left","50px")
                   2475: Box2=document.getElementById("box2")
                   2476: Box2.setAttribute("top","20px")
                   2477: Box2.setAttribute("left","40px")</programlisting>
                   2478: 
                   2479: </sect3>
                   2480: </sect2>
                   2481: </sect1>
                   2482: 
                   2483: <sect1 role="" id="mozilla-CHP-3-SECT-10" label="3.10">
                   2484: <title>XUL Attribute</title>
                   2485: 
                   2486: <para>
                   2487: Jedes XUL Element hat ein <literal>attributes</literal> Property, das einen Array aller seiner Attribute enth&auml;lt. Dieser Abschnitt geht auf ein paar Attribute (unter anderem <literal>debug</literal>) ein, die in der Entwicklung hilfreich sind.
                   2488: </para>
                   2489: 
                   2490: <sect2 role="" id="mozilla-CHP-3-SECT-10.1" label="3.10.1">
                   2491: <title>FlexibilitĂt von Elementen</title>
                   2492: 
                   2493: <para>
                   2494: Ein Objekt wird anhand des <literal>flex</literal> Attributes als flexibel definiert. Flexible Objekte
                   2495: k&ouml;nnen ihre Gr&ouml;sse &auml;ndern, wenn die umgebende Box ihre Gr&ouml;sse &auml;ndert. Wann immer freier Platz im Layout
                   2496: verf&uuml;gbar ist, &auml;ndert sich die Gr&ouml;sse flexibler Objekte um diesen Platz optimal auszunutzen. Die FlexibilitĂt wird
                   2497: mit einem numerischen Wert definiert und ist relativ. Wenn ein Kindobjekt den Flex 2 hat, ist es zweimal so
                   2498: flexibel wie ein Kindobjekt mit Flex 1, wie <link linkend="mozilla-CHP-3-EX-20">Beispiel 3-20</link> zeigt.
                   2499: Das <literal>flex</literal> Attribut ist unabdingbar f&uuml;r die Positionierung im Box Modell.
                   2500: </para>
                   2501: 
                   2502: <example id="mozilla-CHP-3-EX-20" label="3-20">
                   2503: <title>Flexible Buttons</title>
                   2504: <programlisting>&lt;?xml version="1.0"?&gt;
                   2505: &lt;?xml-stylesheet href="chrome://global/skin" type="text/css"?&gt;
                   2506: &lt;window 
                   2507:    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
                   2508: &lt;box id="parent" style="margin: 50px;"&gt;
                   2509:   &lt;button flex="2" label="flex2" /&gt;
                   2510:   &lt;button flex="1" label="flex1" /&gt;
                   2511: &lt;/box&gt;
                   2512: &lt;/window&gt;</programlisting>
                   2513: </example>
                   2514: 
                   2515: </sect2>
                   2516: <sect2 role="" id="mozilla-CHP-3-SECT-10.2" label="3.10.2">
                   2517: <title>Style</title>
                   2518: 
                   2519: <para>
                   2520: Das <literal>style</literal> Attribut erlaubt es Ihnen, dem Element CSS Style Regeln zuzuweisen. Sie k&ouml;nnen so
                   2521: die Werte f&uuml;r <literal>width</literal>, <literal>height</literal>, <literal>min-width</literal>,
                   2522: <literal>min-height</literal>, <literal>max-width</literal> und <literal>max-height</literal> inline definieren, womit Sie mehr Kontrolle &uuml;ber das Layout haben.
                   2523: </para>
                   2524: 
                   2525: <programlisting>&lt;button style="height: 20px; background-color: blue;" /&gt;</programlisting>
                   2526: 
                   2527: <para>
                   2528: Wenn Sie mehr als ein Theme f&uuml;r Ihre Applikation anbieten wollen, sollten Sie das <literal>style</literal>  Attribut nicht
                   2529: zu oft verwenden. Konsultieren Sie <link linkend="mozilla-CHP-4-SECT-2.1.3">Abschnitt 4.2.1.3</link> in <link linkend="mozilla-CHP-4">Kapitel 4</link> f&uuml;r mehr Informationen &uuml;ber Attribute, und wie Sie Ihre Applikation modularer machen k&ouml;nnen. Nebst einem anderen, f&uuml;r manche besseren, Weg einem XUL Dokument Styles zuzuweisen.
                   2530: </para>
                   2531: 
                   2532: </sect2>
                   2533: <sect2 role="" id="mozilla-CHP-3-SECT-10.3" label="3.10.3">
                   2534: <title>Persistenz</title>
                   2535: 
                   2536: <para>
                   2537: Das <literal>persist</literal> Attribut speichert den Zustand von Elementen und
                   2538: Fenstern auf einer Attribut-f&uuml;r-Attribut Basis. Dieses Feature ist sinnvoll, wenn der Benutzer
                   2539: Einstellungen an der Applikation verĂndern kann, die bei einem Neustart erhalten bleiben sollen.
                   2540: Beispiele davon sind die Fenstergr&ouml;sse,
                   2541: der Splitter Status und die Sichtbarkeit einzelner Elemente.
                   2542: </para>
                   2543: 
                   2544: <programlisting>&lt;splitter id="sidebar-splitter" collapse="before" 
                   2545:     <userinput>persist="state hidden" </userinput>align="center" orient="vertical"&gt;</programlisting>
                   2546: 
                   2547: <para>
                   2548: Wenn der Status eines Splitters &auml;ndert -- wenn der Benutzer also das <literal>&lt;grippy&gt;</literal>
                   2549: bewegt, oder den Splitter schliesst -- und danach die Applikation verl&auml;sst, wird der Zustand des Splitters
                   2550: erhalten.
                   2551: </para>
                   2552: 
                   2553: </sect2>
                   2554: <sect2 role="" id="mozilla-CHP-3-SECT-10.4" label="3.10.4">
                   2555: <title>Das debug Attribut</title>
                   2556: 
                   2557: <para>
                   2558: Viele XUL Elemente, vorallem Container-Elemente wie Box und Toolbar,
                   2559: unterst&uuml;tzen das Attribut <literal>debug</literal>, das dem Entwickler n&uuml;tzliche
                   2560: Informationen verschaffen kann. Wenn <literal>debug</literal> auf <literal>true</literal>
                   2561: gesetzt ist, werden um das Element und dessen Kinder spezielle R&auml;nder gezogen, die je
                   2562: nach Level eine andere F&auml;rbung aufweisen. Dieses Attribut wird benutzt, um die Ausrichtung und
                   2563: die Flexibilit&auml;t eines Elementes zu pr&uuml;fen. <literal>debug</literal> zeigt horizontale Boxes
                   2564: in blau, vertikale in rot an. Der Rand ist gewellt wenn es sich um ein flexibles Element handelt
                   2565: und durchzogen wenn es ein fixes Element ist.
                   2566: </para>
                   2567: 
                   2568: </sect2>
                   2569: </sect1>
                   2570: 
                   2571: <sect1 role="" id="mozilla-CHP-3-SECT-11" label="3.11">
                   2572: <title>Overlays</title>
                   2573: 
                   2574: <para>
                   2575: Ein Overlay ist eine separate Datei, die XUL enthält und zur Laufzeit
                   2576: eingebunden wird. Overlays werden somit oft f&uuml;r Menus verwendet die an
                   2577: mehreren Orten in der Applikation angezeigt werden sollen.
                   2578: </para>
                   2579: 
                   2580: <para>
                   2581: Wenn Sie eine grosse Applikation entwickeln, kann es sein, dass Ihr Quellcode
                   2582: sehr gross wird. Obwohl die Gr&ouml;sse selber kein Problem bei der Performance mit
                   2583: sich bringt, wird es f&uuml;r den Entwickler schnell schwierig &Auml;nderungen vorzunehmen.
                   2584: Der einfachste Weg dies zu umgehen, ist, Overlays zu verwenden. Ein weiterer Grund ist
                   2585: die modularisierung der Codebasis, was einer erh&ouml;hten Wiederverwendbarkeit gleichkommt.
                   2586: </para>
                   2587: 
                   2588: <sect2 role="" id="mozilla-CHP-3-SECT-11.1" label="3.11.1">
                   2589: <title>Wie Overlays verwendet werden</title>
                   2590: 
                   2591: <para>
                   2592: Die folgende Deklaration ist die haupts&auml;chliche Methode um Inhalte einzubinden:
                   2593: </para>
                   2594: 
                   2595: <programlisting>&lt;?xul-overlay href="chrome://global/content/globalOverlay.xul"?&gt;</programlisting>
                   2596: 
                   2597: <para>
                   2598: Diese Deklaration folgt der Syntax von CSS Instruktionen. Wie andere XML
                   2599: basierende Instruktionssprachen (a.d.Ă: xslt,..) wird ein <literal>?</literal> Zeichen
                   2600: an Anfang und Ende einer Instruktion erwartet. Das <literal>href</literal> Attribut verweist auf
                   2601: den Ort an dem das Overlay abgelegt ist und verwendet Mozillas <emphasis>chrome://</emphasis> URL.
                   2602: </para>
                   2603: 
                   2604: <para>
                   2605: Um Inhalte aus einem Overlay einzuf&uuml;gen, verwenden Sie die selbe <literal>id</literal>
                   2606: eines Elements in der Basisdatei, bei einem Element im Overlay. Das Overlay wird danach
                   2607: an dieser Stelle eingef&uuml;gt / zusammengef&uuml;gt. Weitere Informationen dazu finden Sie in
                   2608: <link linkend="mozilla-CHP-3-SECT-11.2">Abschnitt 3.11.2</link>
                   2609: </para>
                   2610: 
                   2611: <para>
                   2612: Wenn das Basiselement leer ist, wird der Inhalt des Overlays an dieser Stelle eingef&uuml;gt.
                   2613: Folgendes Beispiel zeigt wie die Toolbar in einer Basisdatei referenziert wird.
                   2614: </para>
                   2615: 
                   2616: <programlisting>&lt;toolbar id="main-toolbar" /&gt;</programlisting>
                   2617: 
                   2618: <para>
                   2619: Wenn ein Overlay mit diesem Inhalt gelesen wird, wird die vorhergehende Zeile dadurch ersetzt:
                   2620: </para>
                   2621: 
                   2622: <programlisting>&lt;toolbar id="main-menubar" persist="collapsed"&gt;
                   2623:   &lt;toolbarbutton id="new-button" label="New" observes="cmd_new"/&gt;
                   2624:   &lt;toolbarbutton id="open-button" label="Open" observes="cmd_open"/&gt;
                   2625:   &lt;toolbarbutton id="save-button" label="Save" observes="cmd_save"/&gt;
                   2626: &lt;/toolbar&gt;</programlisting>
                   2627: 
                   2628: <para>
                   2629: Overlay-Datein sind XUL-Dateien mit einer <filename>.xul</filename> Endung. Der Inhalt der Datei muss in einem
                   2630: <literal>&lt;overlay&gt;</literal> Element enthalten sein, das als Root des Dokuments dient. Die Toolbar also
                   2631: in diesem Fall ein Kind-Element von Overlay:
                   2632: </para>
                   2633: 
                   2634: <programlisting>&lt;overlay id="xflyOverlay"&gt;
                   2635:   &lt;toolbar id="main-toolbar" /&gt;
                   2636:   &lt;!-- more overlay content --&gt;
                   2637: &lt;/overlay&gt;</programlisting>
                   2638: <warning role="ora">
                   2639: <para></para>
                   2640: </warning>
                   2641: <warning id="ch03-12-fm2xml" role="ora">
                   2642: <para>Styles von Oberlays &uuml;berschreiben die Styles die in der Basisdatei angegeben wurden,
                   2643: stellen Sie deshalb sicher, dass Sie in Overlays keine Masterstyles laden.
                   2644: </para>
                   2645: </warning>
                   2646: 
                   2647: <sect3 role="" id="mozilla-CHP-3-SECT-11.1.1" label="3.11.1.1">
                   2648: <title>Dynamic loading / dynamisches laden von Inhalten</title>
                   2649: 
                   2650: <para>Normalerweise werden Inhalte &uuml;ber Overlays geladen, wie im vorhergehenden Abschnitt erl&auml;utert wurde. Dynamisch neue Inhalte zu laden ist etwas subtiler.
                   2651: Mozilla unterh&auml;lt ein Registry aller Overlays in seinem <filename>chrome</filename> Verzeichnis. Diese Overlays sind in einem Verzeichnis namens 
                   2652: <emphasis>overlayinfo</emphasis> abgelegt. <footnote label="4"> <para><link linkend="mozilla-CHP-9">Kapitel 9</link> hat mehr Informationen zu RDF
                   2653: Datenquellen. Um mehr Informationen zum Chrome Layout und Installationsvorg&auml;ngen zu erhalten, schlagen Sie <link linkend="mozilla-CHP-6">Kapitel 6</link> auf.
                   2654: </para> </footnote> Wenn ein neues Packet registriert wird, werden dessen Overlays automatisch geladen.
                   2655: </para>
                   2656: 
                   2657: <para>
                   2658: Dynamische Oberlays werden benutzt, um bestimmte Teile der Applikation
                   2659: zu erweitern. Themes und Language Packs benutzen diese Schnittstelle beispielsweise. Einige Menus
                   2660: des Interfaces sind offen f&uuml;r andere Benutzer, die somit zum Beispiel dem Task-Menu weitere
                   2661: Optionen hinzuf&uuml;gen k&ouml;nnen. <link linkend="mozilla-CHP-6">Kapitel 6</link> hat weitere Informationen
                   2662: zu diesem Gebiet, in <link linkend="mozilla-CHP-6-SECT-2.3.3">Abschnitt 6.2.3.3</link>.
                   2663: </para>
                   2664: 
                   2665: </sect3>
                   2666: </sect2>
                   2667: <sect2 role="" id="mozilla-CHP-3-SECT-11.2" label="3.11.2">
                   2668: <title>Positionierung von Inhalten</title>
                   2669: 
                   2670: <para>
                   2671: Die Positionierung der Inhalte wird normalerweise &uuml;ber die Reihenfolge gesteuert, in der die
                   2672: Elemente in der XUL-Datei definiert wurden. Es gibt jedoch verschiedene Wege, diese Platzierung
                   2673: zu &uuml;berschreiben.
                   2674: </para>
                   2675: 
                   2676: <para>
1.2     ! halter   2677: Wie gesagt ist es erlaubt, dass sowohl das Overlay Element in der Basisdatei, als auch das Overlay
1.1       halter   2678: selbst, weitere Elemente enthalten kann. In diesem Fall wird der Inhalt zusammengef&uuml;gt, wobei
                   2679: der Originalinhalt vor dem des Overlays erscheint.
                   2680: </para>
                   2681: 
                   2682: <programlisting>&lt;toolbar id="main-toolbar"&gt;
                   2683:   &lt;toolbarbutton id="print-button" label="Print" observes="cmd_print"/&gt;
                   2684: &lt;/toolbar&gt;</programlisting>
                   2685: 
                   2686: <para>
                   2687: Wenn <literal>toolbarbutton</literal> in der Basisdatei enthalten ist, sollte die Reihenfolge
                   2688: der Buttons Print, New, Open, und Save sein. Es ist jedoch m&ouml;glich diese Reihenfolge, mit Hilfe von <literal>insertbefore</literal>
                   2689: zu unterbrechen, wie in <link linkend="mozilla-CHP-3-EX-21">Beispiel 3-21</link> gezeigt wird.
                   2690: </para>
                   2691: 
                   2692: <example id="mozilla-CHP-3-EX-21" label="3-21">
                   2693: <title>Positionierende Attribute</title>
                   2694: <programlisting>&lt;toolbar id="main-toolbar" persist="collapsed"&gt;
                   2695:   &lt;toolbarbutton id="new-button" label="New" observes="cmd_new" 
                   2696:       <emphasis role="bold">insertbefore="print-button"/&gt;</emphasis>
                   2697:   &lt;toolbarbutton id="open-button" label="Open" observes="cmd_open"/&gt;
                   2698: <userinput>  </userinput>&lt;toolbarbutton id="save-button" label="Save" observes="cmd_save"
                   2699:       <userinput>position="2"</userinput>/&gt;
                   2700: &lt;/toolbar&gt;</programlisting>
                   2701: </example>
                   2702: 
                   2703: <para>
                   2704: Das Attribut <literal>insertbefore</literal> weist ein Kind-Element an, sich
                   2705: vor dem n&auml;chstfolgenden in der Basisdatei einzufĂgen. <literal>insertbefore</literal>
                   2706: verwendet die <literal>id</literal> eines Elements und definiert in diesem Fall, dass der New Button
                   2707: vor dem Print Button sein soll. Um ein Element nach einem anderen Element anzuzeigen, k&ouml;nnen Sie
                   2708: <literal>insertafter</literal> verwenden. Anhand des <literal>position</literal> Attributs k&ouml;nnen Sie
                   2709: die absolute Position eines Elements angeben, was zur Folge hat, dass in <link linkend="mozilla-CHP-3-EX-21">Beispiel 3-21</link>
                   2710: die Reihenfolge am Ende New, Save, Print und Open anzeigt.
                   2711: </para>
                   2712: 
                   2713: </sect2>
                   2714: </sect1>
                   2715: 
                   2716: <sect1 role="" id="mozilla-CHP-3-SECT-12" label="3.12">
                   2717: <title>Extras</title>
                   2718: 
                   2719: <para>
                   2720: Einige weniger bekannte Elemente sind unabdingbar f&uuml;r den cleveren XUL Entwickler, da mit ihnen einer Mozilla
                   2721: Applikation das spezielle Etwas verliehen werden kann.
                   2722: </para>
                   2723: 
                   2724: <sect2 role="" id="mozilla-CHP-3-SECT-12.1" label="3.12.1">
                   2725: <title>Tooltips</title>
                   2726: 
                   2727: <para>
                   2728: Tooltips sind visuelle Popups die erscheinen, wenn der Cursor &uuml;ber einem Teil des Interfaces f&uuml;r l&auml;ngere Zeit verweilt.
                   2729: Dieses Verhalten ist an verschiedenen Orten n&uuml;tzlich, zum Beispiel um Hilfen anzuzeigen, oder Texte vollst&auml;ndig auszugeben
                   2730: die sonst zu lang w&auml;ren. In einer Mozilla Applikation werden sie vorallem bei Toolbar Buttons und Splitter Grippies benutzt,
                   2731: die Panels innterhalb des Fensters teilen.
                   2732: </para>
                   2733: 
                   2734: <para>
                   2735: Um einen Tooltip hinzuzuf&uuml;gen, setzen Sie einfach das Attribut <literal>tooltiptext</literal>.
                   2736: </para>
                   2737: 
                   2738: <programlisting>&lt;button id="printButton" label="Print" tooltiptext="Print this page" /&gt;</programlisting>
                   2739: 
                   2740: <para>
                   2741: Dieses Attribut zu definieren reicht aus, um einen generischen Tooltip anziegen zu lassen, wenn
                   2742: der Benutzer mit der Maus &uuml;ber dem Element verweilt.
                   2743: </para>
                   2744: 
                   2745: <para>
                   2746: Tooltips sind als XBL-Binding implementiert. Als Basis dient ein Popup Fenster mit einem 'description' Element
                   2747: das den Text anzeigt. Sie k&ouml;nnen auch eigene Tooltips entwerfen.
                   2748: </para>
                   2749: 
                   2750: <para>So erstellen Sie einen eigenen Tooltip:</para>
                   2751: 
                   2752: <orderedlist><listitem>
                   2753: <para>Erstellen Sie den Inhalt.</para>
                   2754: </listitem><listitem>
                   2755: <para>Verbinden Sie ihn mit dem Popup Element das Sie verwenden wollen.</para>
                   2756: </listitem><listitem>
                   2757: <para>Geben Sie dem Popup eine einzigartige ID.</para>
                   2758: </listitem></orderedlist>
                   2759: <para>Folgenden Code k&ouml;nnen Sie in Ihrer Applikation verwenden:
                   2760: </para>
                   2761: 
                   2762: <programlisting>&lt;popupset id="aTooltipSet"&gt;
                   2763:     &lt;popup id="myTooltip" 
                   2764:           class="tooltip" 
                   2765:           onpopupshowing="return FillInTooltip(document.tooltipNode);" &gt; 
                   2766:       &lt;description id="TOOLTIP-tooltipText" 
                   2767:           class="my-tooltip-label" flex="1"/&gt;
                   2768:     &lt;/popup&gt;
                   2769: &lt;/popupset&gt;</programlisting>
                   2770: 
                   2771: <para>
                   2772: Verbinden Sie das neue Widget, indem Sie dessen <literal>id</literal>
                   2773: dem <literal>tooltip</literal> Attribut eines Elements &uuml;bergeben.
                   2774: </para>
                   2775: 
                   2776: <programlisting>&lt;treeitem id="FlyDescription" tooltip="myTooltip" tooltiptext="" /&gt;</programlisting>
                   2777: 
                   2778: <para>
                   2779: Achtung, gehen Sie davon aus dass der Text in diesem Beispiel dynamisch dem <literal>tooltiptext</literal> Attribut hinzugef&uuml;gt wird.
                   2780: Dies ist in vielen Situationen sinnvoll, zum Beispiel, wenn Sie Informationen in einem Tree anzeigen wollen.
                   2781: </para>
                   2782: 
                   2783: <para>
                   2784: Der Vorteil eigene Tooltips zu erstellen liegt darin, dass Sie auch eigene
                   2785: Styles daf&uuml;r definieren k&ouml;nnen. Eine Variation von <literal>tooltip</literal>
                   2786: ist &uuml;brigens <literal>contenttooltip</literal> das in Content Panels
                   2787: verwendet wird.
                   2788: </para>
                   2789: 
                   2790: </sect2>
                   2791: <sect2 role="" id="mozilla-CHP-3-SECT-12.2" label="3.12.2">
                   2792: <title>Fortschrittsanzeige</title>
                   2793: 
                   2794: <para>
                   2795: Manchmal ben&ouml;tigen Sie f&uuml;r eine Applikation eine Anzeige die den Benutzer &uuml;ber den Fortschritt eines Prozesses
                   2796: informiert. Das beste Beispiel ist die Ladeanzeige eines Browsers die verwendet wird, um dem Benutzer anzuzeigen,
                   2797: dass eine Seite geladen wird.
                   2798: </para>
                   2799: 
                   2800: <para>
                   2801: Bei Aktivit&auml;ten wie Dateidownloads wird der determinierte Typ von
                   2802: Fortschrittsanzeigen verwendet, da errechnet werden kann, wie lange der 
                   2803: Download dauern wird. Bei Anwendungen bei denen im Voraus nicht sicher
                   2804: ist, wie lange sie dauern werden, wird eine undeterminierte Anzeige
                   2805: empfohlen, die dem zweiten Modus f&uuml;r Fortschrittsanzeigen entspricht. Der dritte
                   2806: Modus ist 'normal', wobei ein leerer Balken angezeigt wird. Sie k&ouml;nnen den Modus
                   2807: &uuml;ber das <literal>mode</literal> Attribut festlegen.
                   2808: </para>
                   2809: 
                   2810: <para>Hier der XUL Code f&uuml;r eine einfache Fortschrittsanzeige:</para>
                   2811: 
                   2812: <programlisting>&lt;progressmeter id="progressTask" mode="normal" value="0" onclick="alert(`Task is in progress')"/&gt;</programlisting>
                   2813: 
                   2814: <para>Und hier das Script dazu:</para>
                   2815: 
                   2816: <programlisting>var meter = document.getElementById('progressTask');
                   2817: meter.setAttribute('mode', 'undetermined');
                   2818: sometask( );
                   2819: meter.setAttribute('mode', 'determined');
                   2820: meter.setAttribute('value', '100%');</programlisting>
                   2821: 
                   2822: <para>
                   2823: Der Modus wechselt kurz bevor die Operation <literal>sometask()</literal> ausgef&uuml;hrt wird zu 'undetermined'. Der Javascript
                   2824: Code ist synchron und wird somit die Kontrolle nicht vor Erledigung der Funktion zur&uuml;ckgeben.
                   2825: </para>
                   2826: 
                   2827: </sect2>
                   2828: <sect2 role="" id="mozilla-CHP-3-SECT-12.3" label="3.12.3">
                   2829: <title>Links</title>
                   2830: 
                   2831: <para>
                   2832: Mozilla ist eine Webapplikation und viele Betriebssysteme (wie Windows XP) bewegen
                   2833: sich auf eine vollst&auml;ndige Webintegration zu. Links sind somit fundamental und werden
                   2834: von Mozilla auf verschiedene Arten unterst&uuml;tzt.
                   2835: </para>
                   2836: 
                   2837: <sect3 role="" id="mozilla-CHP-3-SECT-12.3.1" label="3.12.3.1">
                   2838: <title>Verwendung des &lt;html:a&gt; Elements</title>
                   2839: 
                   2840: <para>
                   2841: Um HTML in Ihrer XUL Datei direkt benutzen zu k&ouml;nnen, m&uuml;ssen Sie dies am Anfang des Dokuments deklarieren:
                   2842: </para>
                   2843: 
                   2844: <programlisting>&lt;window id="MyOverlay"
                   2845:      <emphasis role="bold">xmlns:html="http://www.w3.org/1999/xhtml</emphasis>"
                   2846:      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;</programlisting>
                   2847: 
                   2848: <para>
                   2849: Danach k&ouml;nnen Sie HTML Element genau wie auf einer Website verwenden, wenn Sie die Namespace
                   2850: voranstellen:
                   2851: </para>
                   2852: 
                   2853: <programlisting>&lt;vbox&gt;
                   2854:   &lt;html:a href="myOverlay.html"&gt;Go to Help page&lt;/html:a&gt;
                   2855: &lt;/vbox&gt;</programlisting>
                   2856: 
                   2857: <para>
                   2858: Wenn Sie eine Seite mit Links in Ihrer Applikation verwenden, kann der Benutzer diese Links anklicken
                   2859: und den Mozilla Browser zur Ansicht benutzen.
                   2860: </para>
                   2861: 
                   2862: </sect3>
                   2863: 
                   2864: <sect3 role="" id="mozilla-CHP-3-SECT-12.3.2" label="3.12.3.2">
                   2865: <title>Einfache XLinks</title>
                   2866: 
                   2867: <para>
                   2868: Wenn Sie die korrekte Namespace verwenden, k&ouml;nnen Sie auch XLinks gebrauchen, die erweiterte
                   2869: XML Funktionalit&auml;t bereitstellen:
                   2870: </para>
                   2871: 
                   2872: <programlisting>&lt;window xmlns:xlink=http://www.w3.org/1999/xlink ...&gt;</programlisting>
                   2873: 
                   2874: <para>Danach k&ouml;nnen Sie Links wie folgt notieren:</para>
                   2875: 
                   2876: <programlisting>&lt;xlink:link xlink:type="simple" xlink:href="c.xml"&gt;c.xml&lt;/xlink:link&gt;</programlisting>
                   2877: 
                   2878: <para>
                   2879: Das Element ist <literal>link</literal>, der <literal>type</literal> ist 'simple' und <literal>href</literal> ist der Locator.
                   2880: </para>
                   2881: 
                   2882: </sect3>
                   2883: </sect2>
                   2884: </sect1>
                   2885: 
                   2886: <sect1 role="" id="mozilla-CHP-3-SECT-13" label="3.13">
                   2887: <title>Ein Applikationsger&uuml;st</title>
                   2888: 
                   2889: <para>
                   2890: Nun, da Sie einen ersten &Uuml;berblick &uuml;ber die XUL Elemente und das Box-Model gewinnen konnten,
                   2891: wird es Zeit das gelernte umzusetzen und ein <emphasis>Applikationsger&uuml;st</emphasis> zu bauen
                   2892: das zwar (noch) nicht mit Applikationscode verbunden ist, aber in verschiedenen Anwendungen
                   2893: benutzt werden kann.
                   2894: </para>
                   2895: 
                   2896: <para>
                   2897: Der Code in <link linkend="mozilla-CHP-3-EX-22">Beispiel 3-22</link> erweitert die xFly
                   2898: Applikation die Sie bereits aus <link linkend="mozilla-CHP-2">Kapitel 2</link>
                   2899: kennen. Er definiert das Interface eines Viewers, der Ihnen erlaubt, durch die Beispiele
                   2900: aus diesem Buch zu browsen. Studieren Sie den Code genau, um zu sehen wie die verschiedenen
                   2901: Elemente interagieren. Speziell die anwendung von <literal>vbox</literal>,
                   2902: <literal>hbox</literal>, <literal>tabbox</literal> und <literal>statusbar</literal> sollte beachtet werden.
                   2903: </para>
                   2904: 
                   2905: <example id="mozilla-CHP-3-EX-22" label="3-22">
                   2906: <title>xFly Applikation, Arbeitsoberfl&auml;che</title>
                   2907: <programlisting>&lt;?xml version="1.0"?&gt;
                   2908: &lt;?xml-stylesheet href="chrome://global/skin" type="text/css"?&gt;
                   2909: &lt;?xml-stylesheet href="chrome://xfly/skin" type="text/css"?&gt;
                   2910: &lt;?xul-overlay href="chrome://xfly/content/xflyoverlay.xul"?&gt;
                   2911: &lt;!DOCTYPE window SYSTEM "chrome://xfly/locale/xfly.dtd"&gt;
                   2912: &lt;window title="&amp;window.title;"
                   2913:   xmlns:html="http://www.w3.org/1999/xhtml"
                   2914:   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                   2915:   type="xfly:main"
                   2916:   width="800"
                   2917:   height="600"
                   2918:   onload="onLoad( )"&gt;
                   2919: &lt;script type="application/x-javascript" src="chrome://xfly/content/xfly.js" /&gt;
                   2920: &lt;stringbundle id="bundle_xfly" src="chrome://xfly/locale/xfly.properties"/&gt;
                   2921: &lt;toolbox&gt;
                   2922:   &lt;menubar id="appbar"&gt;
                   2923:     &lt;menu label="xFly"&gt;
                   2924:       &lt;menupopup&gt;
                   2925:         &lt;menuitem label="Close" oncommand="exitxFly( )"/&gt;
                   2926:       &lt;/menupopup&gt;
                   2927:     &lt;/menu&gt;
                   2928:     &lt;menu label="Examples"&gt;
                   2929:       &lt;menupopup&gt;
                   2930:         &lt;!-- items to go here --&gt;
                   2931:       &lt;/menupopup&gt;
                   2932:     &lt;/menu&gt;
                   2933:     &lt;menu label="Help"&gt;
                   2934:       &lt;menupopup&gt;
                   2935:         &lt;menuitem label="About" oncommand="doAbout( )"/&gt;
                   2936:       &lt;/menupopup&gt;
                   2937:     &lt;/menu&gt;
                   2938:   &lt;/menubar&gt;
                   2939: &lt;/toolbox&gt;
                   2940: &lt;hbox flex="1"&gt;
                   2941:   &lt;vbox id="left-frame"&gt;
                   2942:     &lt;tree id="example-tree" /&gt;
                   2943:     &lt;hbox align="start"&gt;
                   2944:       &lt;image src="chrome://xfly/skin/images/logo5.gif" /&gt;
                   2945:     &lt;/hbox&gt;
                   2946:   &lt;/vbox&gt;
                   2947:   &lt;splitter collapse="before" resizeafter="grow" persist="state"&gt;
                   2948:     &lt;grippy /&gt;
                   2949:   &lt;/splitter&gt;
                   2950:   &lt;tabbox id="raven-main-tabcontent" flex="1" orient="vertical"&gt;
                   2951:     &lt;tabs orient="horizontal"&gt;
                   2952:       &lt;tab id="tab-view" label="View Example"/&gt;
                   2953:       &lt;tab id="tab-source" label="View Example Source"/&gt;
                   2954:     &lt;/tabs&gt;
                   2955:     &lt;tabpanels flex="1"&gt;
                   2956:       &lt;iframe id="right-frame" name="right-frame"
                   2957:       flex="3" src="chrome://xfly/content/examples/2-1.xul"/&gt;
                   2958:       &lt;iframe id="right-frame-source" name="right-frame-source" 
                   2959:           flex="3" src="view-source:chrome://xfly/content/examples/2-1.xul"/&gt;
                   2960:     &lt;/tabpanels&gt;
                   2961:   &lt;/tabbox&gt;
                   2962: &lt;/hbox&gt;
                   2963: &lt;statusbar id="ch3-bar" persist="collapsed"&gt;
                   2964:   &lt;statusbarpanel class="statusbarpanel-iconic" id="book-icon"/&gt;
                   2965:   &lt;statusbarpanel id="status-text" label="Thanks for reading the book!"
                   2966:       flex="4" crop="right"/&gt;
                   2967:   &lt;statusbarpanel class="statusbarpanel-iconic" id="example-status" flex="1"/&gt;
                   2968: &lt;/statusbar&gt;
                   2969: &lt;/window&gt;</programlisting>
                   2970: </example>
                   2971: 
                   2972: <para>
                   2973: Das Hauptfenster der Applikation besteht aus einer Menubar, zwei Frames und einer Statusbar. Die Menus
                   2974: bieten Zugriff auf Applikationsfunktionen wie dem Schliessen des Fensters und dem &Ouml;ffnen eines 'About' Fensters. Die Statusbar
                   2975: zeigt das Buch-Icon und die Statusmeldungen der Applikation. Zwischen Menubar und Statusbar sind zwei Panel: ein vertikales auf
                   2976: der linken Seite, das einen Tree zur Wahl der Beispiele und ein xFly Logo enth&auml;lt. Daneben ist ein <literal>&lt;iframe&gt;</literal>
                   2977: Element, in dem die Beispiele geladen werden sollen. Weiter gibt es 2 Tabs im Beispiel-Panel, eines um den Quellcode und eines um
                   2978: die Anwendung anzusehen.
                   2979: </para>
                   2980: 
                   2981: <figure id="mozilla-CHP-3-FIG-12" label="3-12">
                   2982: <title>xFly Beispiel-Viewer</title>
                   2983: <graphic fileref="figs/moz_0312.png"/></figure>
                   2984: 
                   2985: <para>
                   2986: Der Code in <link linkend="mozilla-CHP-3-EX-22">Beispiel 3-22</link> ist nicht der finale Code f&uuml;r unsere Applikation, zeigt jedoch
                   2987: auf, welche Widgets eingesetzt werden, um das Hauptfenster anzuzeigen. Das Layout enth&auml;lt aber bereits die <literal>&lt;toolbox&gt;</literal>
                   2988: mit Menus, eine <literal>&lt;statusbar&gt;</literal> zeigt die Meldunge an und das Box-Model wird verwendet, um die Elemente anzuordnen. Somit
                   2989: kann er gut als Vorlage f&uuml;r Ihre eigene Applikation verwendet werden.
                   2990: </para>
                   2991: 
                   2992: <para>
                   2993: Uns bleibt nur noch, die Tree-Struktur zu definieren, die die verschiedenen Beispiele enthalten wird. In
                   2994: <link linkend="mozilla-CHP-3-EX-22">Beispiel 3-22</link> hat der Tree eine ID die benutzt werden soll, um
                   2995: ein Overlay dar&uuml;berzulegen. <link linkend="mozilla-CHP-3-EX-23">Beispiel 3-23</link> zeigt wie ein solches
                   2996: Overlay aussehen k&ouml;nnte. Wenn Sie m&ouml;chten, k&ouml;nnen Sie diese Inhalte nat&uuml;rlich auch direkt im Code notieren.
                   2997: Mehr Informationen zu Overlays finden Sie in <link linkend="mozilla-CHP-3-SECT-11">Abschnitt 3.11</link> in
                   2998: diesem Kapitel. Wenn Sie das Beispiel ausf&uuml;hren, sehen Sie <link linkend="mozilla-CHP-3-FIG-12">Abbildung 3-12</link>.
                   2999: </para>
                   3000: 
                   3001: <example id="mozilla-CHP-3-EX-23" label="3-23">
                   3002: <title>Beispiel Tree f&uuml;r die xFly Applikation</title>
                   3003: <programlisting>&lt;?xml version="1.0"?&gt;
                   3004: &lt;overlay id="xflyOverlay"
                   3005:     xmlns:html="http://www.w3.org/1999/xhtml"
                   3006:     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
                   3007: &lt;tree id="example-tree" onselect="onExampleSelect( );" seltype="single" 
                   3008:     hidecolumnpicker="false" 
                   3009:     enableColumnDrag="true" flex="1"&gt;
                   3010:   &lt;treecols&gt;
                   3011:     &lt;treecol id="type" label="Title" flex="1" primary="true" 
                   3012:         persist="width ordinal hidden"/&gt;
                   3013:     &lt;splitter class="tree-splitter"/&gt;
                   3014:     &lt;treecol id="method" label="Example" flex="1" 
                   3015:         persist="width ordinal hidden"/&gt;
                   3016:   &lt;/treecols&gt;
                   3017:   &lt;treechildren&gt;
                   3018:     &lt;treeitem container="true" open="true"&gt;
                   3019:       &lt;treerow&gt;
                   3020:         &lt;treecell label="Chapter 2"/&gt;
                   3021:       &lt;/treerow&gt;
                   3022:       &lt;treechildren&gt;  &lt;!-- Second level row --&gt;
                   3023:         &lt;treeitem&gt;
                   3024:           &lt;treerow&gt;
                   3025:             &lt;treecell label="Hello xFly" 
                   3026:                 url="chrome://xfly/content/examples/2-1.xul"/&gt;
                   3027:             &lt;treecell label="2-1"/&gt;
                   3028:           &lt;/treerow&gt;
                   3029:         &lt;/treeitem&gt;
                   3030:       &lt;/treechildren&gt;
                   3031:     &lt;/treeitem&gt;
                   3032:     &lt;treeitem container="true" open="true"&gt;
                   3033:       &lt;treerow&gt;
                   3034:         &lt;treecell label="Chapter 3"/&gt;
                   3035:       &lt;/treerow&gt;
                   3036:       &lt;treechildren&gt;  &lt;!-- Second level row --&gt;
                   3037:         &lt;treeitem&gt;
                   3038:           &lt;treerow&gt;
                   3039:             &lt;treecell label="Menu Bar" 
                   3040:                 url="chrome://xfly/content/examples/3-5.xul"/&gt;
                   3041:             &lt;treecell label="3-5"/&gt;
                   3042:           &lt;/treerow&gt;
                   3043:         &lt;/treeitem&gt;
                   3044:         &lt;treeitem&gt;
                   3045:           &lt;treerow&gt;
                   3046:             &lt;treecell label="Listbox" 
                   3047:                 url="chrome://xfly/content/examples/3-9.xul"/&gt;
                   3048:             &lt;treecell label="3-9"/&gt;
                   3049:           &lt;/treerow&gt;
                   3050:         &lt;/treeitem&gt;
                   3051:         &lt;treeitem&gt;
                   3052:           &lt;treerow&gt;
                   3053:             &lt;treecell label="Grid" url="chrome://xfly/content/examples/3-12.xul"/&gt;
                   3054:             &lt;treecell label="3-12"/&gt;
                   3055:           &lt;/treerow&gt;
                   3056:         &lt;/treeitem&gt;
                   3057:       &lt;/treechildren&gt;
                   3058:     &lt;/treeitem&gt;
                   3059:   &lt;/treechildren&gt;
                   3060: &lt;/tree&gt;
                   3061: &lt;/overlay&gt;</programlisting>
                   3062: </example>
                   3063: 
                   3064: </sect1>
                   3065: </chapter>

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