File:  [mozdev] / books / www / docbook / de / ch03.xml
Revision 1.2: download - view: text, annotated - select for diffs - revision graph
Thu Apr 1 07:30:55 2004 UTC (15 years, 8 months ago) by halter
Branches: MAIN
CVS tags: HEAD
- minor updates

    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
  525: eine drop-down Menus - wof&uuml;r XUL das <literal>&lt;menulist&gt;</literal>  Element anbietet.
  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>
 2133: 
 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>
 2677: Wie gesagt ist es erlaubt, dass sowohl das Overlay Element in der Basisdatei, als auch das Overlay
 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>