From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/archive/mozilla/xul/action/index.html | 86 ++++ .../archive/mozilla/xul/arrowscrollbox/index.html | 134 ++++++ files/de/archive/mozilla/xul/assign/index.html | 115 +++++ .../mozilla/xul/attribute/accesskey/index.html | 24 ++ .../xul/attribute/activetitlebarcolor/index.html | 14 + .../archive/mozilla/xul/attribute/align/index.html | 37 ++ .../mozilla/xul/attribute/allowevents/index.html | 17 + .../attribute/allownegativeassertions/index.html | 11 + .../archive/mozilla/xul/attribute/color/index.html | 14 + .../archive/mozilla/xul/attribute/cols/index.html | 14 + .../mozilla/xul/attribute/decimalplaces/index.html | 14 + .../mozilla/xul/attribute/disabled/index.html | 28 ++ .../archive/mozilla/xul/attribute/empty/index.html | 14 + .../mozilla/xul/attribute/emptytext/index.html | 14 + .../archive/mozilla/xul/attribute/expr/index.html | 14 + .../xul/attribute/hidespinbuttons/index.html | 10 + files/de/archive/mozilla/xul/attribute/index.html | 11 + .../archive/mozilla/xul/attribute/label/index.html | 32 ++ .../mozilla/xul/attribute/onchange/index.html | 14 + .../mozilla/xul/attribute/prefpane.src/index.html | 25 ++ .../archive/mozilla/xul/attribute/src/index.html | 34 ++ .../mozilla/xul/attribute/treecell.src/index.html | 17 + .../mozilla/xul/attribute/treecol.src/index.html | 17 + .../archive/mozilla/xul/attribute/var/index.html | 14 + files/de/archive/mozilla/xul/bbox/index.html | 87 ++++ files/de/archive/mozilla/xul/binding/index.html | 89 ++++ files/de/archive/mozilla/xul/box/index.html | 101 +++++ .../de/archive/mozilla/xul/colorpicker/index.html | 77 ++++ .../archive/mozilla/xul/eigenschaften/index.html | 14 + files/de/archive/mozilla/xul/events/index.html | 464 +++++++++++++++++++++ files/de/archive/mozilla/xul/grippy/index.html | 88 ++++ files/de/archive/mozilla/xul/iframe/index.html | 161 +++++++ files/de/archive/mozilla/xul/index.html | 83 ++++ .../archive/mozilla/xul/method/geticon/index.html | 15 + .../mozilla/xul/method/gettabforbrowser/index.html | 15 + files/de/archive/mozilla/xul/method/index.html | 14 + .../adding_menus_and_submenus/index.html | 99 +++++ .../die_grundlagen_einer_erweiterung/index.html | 454 ++++++++++++++++++++ .../index.html | 161 +++++++ .../xul/school_tutorial/einleitung/index.html | 44 ++ .../index.html | 75 ++++ .../archive/mozilla/xul/school_tutorial/index.html | 70 ++++ files/de/archive/mozilla/xul/separator/index.html | 123 ++++++ files/de/archive/mozilla/xul/spacer/index.html | 94 +++++ files/de/archive/mozilla/xul/splitter/index.html | 173 ++++++++ files/de/archive/mozilla/xul/style/index.html | 11 + .../mozilla/xul/style/treecol-image/index.html | 13 + files/de/archive/mozilla/xul/tab/index.html | 195 +++++++++ files/de/archive/mozilla/xul/tabbox/index.html | 77 ++++ files/de/archive/mozilla/xul/tabpanels/index.html | 100 +++++ files/de/archive/mozilla/xul/tabs/index.html | 123 ++++++ files/de/archive/mozilla/xul/textbox/index.html | 334 +++++++++++++++ files/de/archive/mozilla/xul/treecol/index.html | 262 ++++++++++++ files/de/archive/mozilla/xul/vbox/index.html | 100 +++++ files/de/archive/mozilla/xul/window/index.html | 209 ++++++++++ .../de/archive/mozilla/xul/xul_referenz/index.html | 15 + .../xul/xul_tutorial/die_chrome_url/index.html | 39 ++ .../xul_tutorial/ein_fenster_erzeugen/index.html | 111 +++++ .../xul/xul_tutorial/einfuehrung/index.html | 33 ++ .../de/archive/mozilla/xul/xul_tutorial/index.html | 57 +++ .../xul_tutorial/installations-skripte/index.html | 96 +++++ .../xul/xul_tutorial/lokalisierung/index.html | 270 ++++++++++++ .../positionierung_von_elementen/index.html | 259 ++++++++++++ .../xul/xul_tutorial/xul_struktur/index.html | 154 +++++++ .../index.html" | 44 ++ 65 files changed, 5727 insertions(+) create mode 100644 files/de/archive/mozilla/xul/action/index.html create mode 100644 files/de/archive/mozilla/xul/arrowscrollbox/index.html create mode 100644 files/de/archive/mozilla/xul/assign/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/accesskey/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/align/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/allowevents/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/color/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/cols/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/decimalplaces/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/disabled/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/empty/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/emptytext/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/expr/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/label/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/onchange/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/prefpane.src/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/src/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/treecell.src/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/treecol.src/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/var/index.html create mode 100644 files/de/archive/mozilla/xul/bbox/index.html create mode 100644 files/de/archive/mozilla/xul/binding/index.html create mode 100644 files/de/archive/mozilla/xul/box/index.html create mode 100644 files/de/archive/mozilla/xul/colorpicker/index.html create mode 100644 files/de/archive/mozilla/xul/eigenschaften/index.html create mode 100644 files/de/archive/mozilla/xul/events/index.html create mode 100644 files/de/archive/mozilla/xul/grippy/index.html create mode 100644 files/de/archive/mozilla/xul/iframe/index.html create mode 100644 files/de/archive/mozilla/xul/index.html create mode 100644 files/de/archive/mozilla/xul/method/geticon/index.html create mode 100644 files/de/archive/mozilla/xul/method/gettabforbrowser/index.html create mode 100644 files/de/archive/mozilla/xul/method/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/index.html create mode 100644 files/de/archive/mozilla/xul/separator/index.html create mode 100644 files/de/archive/mozilla/xul/spacer/index.html create mode 100644 files/de/archive/mozilla/xul/splitter/index.html create mode 100644 files/de/archive/mozilla/xul/style/index.html create mode 100644 files/de/archive/mozilla/xul/style/treecol-image/index.html create mode 100644 files/de/archive/mozilla/xul/tab/index.html create mode 100644 files/de/archive/mozilla/xul/tabbox/index.html create mode 100644 files/de/archive/mozilla/xul/tabpanels/index.html create mode 100644 files/de/archive/mozilla/xul/tabs/index.html create mode 100644 files/de/archive/mozilla/xul/textbox/index.html create mode 100644 files/de/archive/mozilla/xul/treecol/index.html create mode 100644 files/de/archive/mozilla/xul/vbox/index.html create mode 100644 files/de/archive/mozilla/xul/window/index.html create mode 100644 files/de/archive/mozilla/xul/xul_referenz/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html create mode 100644 "files/de/archive/mozilla/xul/\303\244nderungen_an_xul_f\303\274r_firefox_1.5/index.html" (limited to 'files/de/archive/mozilla/xul') diff --git a/files/de/archive/mozilla/xul/action/index.html b/files/de/archive/mozilla/xul/action/index.html new file mode 100644 index 0000000000..5492305611 --- /dev/null +++ b/files/de/archive/mozilla/xul/action/index.html @@ -0,0 +1,86 @@ +--- +title: action +slug: Archive/Mozilla/XUL/action +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/action +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Das action Element wird verwendet, um den Inhalt festzulegen, welcher für jedes zutreffende Ergebnis einer Abfrage passt. Dieses Element sollte in den Elementen query oder rule enthalten sein.

+

Für weitere Informationen, siehe Aktionen.

+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
diff --git a/files/de/archive/mozilla/xul/arrowscrollbox/index.html b/files/de/archive/mozilla/xul/arrowscrollbox/index.html new file mode 100644 index 0000000000..d1785f82b6 --- /dev/null +++ b/files/de/archive/mozilla/xul/arrowscrollbox/index.html @@ -0,0 +1,134 @@ +--- +title: arrowscrollbox +slug: Archive/Mozilla/XUL/Arrowscrollbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/arrowscrollbox +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Eine Box, die entlang den Kanten Scrollpfeile bereitstellt, um die Box zu scrollen. Der Benutzer muss die Maus dazu nur über die Pfeile bewegen. Dieses Element wird typischerweise bei langen Popup-Menüs verwendet.

+

Wenn die Maus über einen (aktiven) Pfeil bewegt wird, wird ein Scroll-Event ausgelöst.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
disabled, smoothscroll, tabindex
+
+
Eigenschaften
disabled, scrollBoxObject, scrollIncrement, smoothScroll, tabIndex
+
+
Methoden
ensureElementIsVisible, scrollByIndex, scrollByPixels
+
+

Beispiele

+
Image:menuscroll1.jpg
+
<arrowscrollbox orient="vertical" flex="1">
+  <button label="Red"/>
+  <button label="Blue"/>
+  <button label="Green"/>
+  <button label="Yellow"/>
+  <button label="Orange"/>
+  <button label="Silver"/>
+  <button label="Lavender"/>
+  <button label="Gold"/>
+  <button label="Turquoise"/>
+  <button label="Peach"/>
+  <button label="Maroon"/>
+  <button label="Black"/>
+</arrowscrollbox>
+
+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ +
+
+ smoothscroll
+
+ Type: boolean
+
+ true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it. Currently, smooth scrolling supports horizontal arrowscrollboxes only.
+
+
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+

+

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+ +

TBD

diff --git a/files/de/archive/mozilla/xul/assign/index.html b/files/de/archive/mozilla/xul/assign/index.html new file mode 100644 index 0000000000..a08496f06a --- /dev/null +++ b/files/de/archive/mozilla/xul/assign/index.html @@ -0,0 +1,115 @@ +--- +title: assign +slug: Archive/Mozilla/XUL/Assign +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/assign +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Erstellt eine zusätzliche Variable für XML Templates, deren Wert mittels XPath bestimmt werden kann.

+
Weitere Informationen sind unter XML_Assignments verfügbar.
+
Attribute

expr, var

+
+

Beispiele

+
<vbox datasources="people.xml" ref="*" querytype="xml">
+  <template>
+    <query expr="person">
+      <assign var="?namelength" expr="string-length(@name)"/>
+      <assign var="?siblings" expr="count(../*) - 1"/>
+    </query>
+    <action>
+      <hbox uri="?" align="center">
+        <button label="?name"/>
+        <label value="?gender"/>
+        <label value="?namelength"/>
+        <label value="?siblings"/>
+      </hbox>
+    </action>
+  </template>
+</vbox>
+
+

Attribute

+
+ +
expr
Typ: string
Ein XPath Ausdruck für XML Abfragen, der Ergebnisse zurückliefert. Innerhalb des Ausdrucks kann jeder Namespace Präfix verwendet werden, der für ein Element deklariert wurde.
+
+ +
+ +
var
Typ: string
Dient der Variablenzuweisung innerhalb assign Tags; ansonsten wird es als Referenz zu einer Template Variable wie beispielsweise "?name" verwendet.
+
+ + +
+ + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
diff --git a/files/de/archive/mozilla/xul/attribute/accesskey/index.html b/files/de/archive/mozilla/xul/attribute/accesskey/index.html new file mode 100644 index 0000000000..5f223df6c4 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/accesskey/index.html @@ -0,0 +1,24 @@ +--- +title: accesskey +slug: Archive/Mozilla/XUL/Attribute/accesskey +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/accesskey +--- +
« XUL-Referenz Startseite
+
accesskey
Attribut von: button, checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton, textbox (Firefox autocomplete)
Typ: character
Dem Attribut wird der Buchstabe zugewiesen, der als Tastenkürzel für das Element dienen soll. Dieser Buchstabe sollte sinnvollerweise innerhalb des Textes des Attributs label des Elements vorkommen.
Typischerweise wird dieser Buchstabe visuell durch Unterstreichung hervorgehoben. Dies ist jedoch plattform- und themenspezifisch. Betätigt der Benutzer gleichzeitig die Alt-Taste (oder eine ähnliche Taste; variiert je nach Betriebssystem) und die durch dieses Attribut angegebene Taste, wird das Element im Fenster von überall aus aktiviert. Auch wenn Groß-/Kleinschreibung des Wertes irrelevant ist, wird die dem Attribut accesskey entsprechende Variante benutzt, sollten beide Schreibweisen innerhalb der Beschriftung vorkommen.
+
+
+

Beispiel

+
<vbox>
+  <label value="Namen eingeben" accesskey="e" control="myName"/>
+  <textbox id="myName"/>
+  <button label="Abbrechen" accesskey="b"/>
+  <button label="Ok" accesskey="O"/>
+</vbox>
+
+

Siehe auch

+

Attribut label, Attribut acceltext

+ +
diff --git a/files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html b/files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html new file mode 100644 index 0000000000..95f6be0346 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html @@ -0,0 +1,14 @@ +--- +title: Activetitlebarcolor +slug: Archive/Mozilla/XUL/Attribute/Activetitlebarcolor +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/activetitlebarcolor +--- +
« XUL-Referenz Startseite
+
activetitlebarcolor
Typ: color string
Bestimmt die Hintergrundfarbe der Titelleiste eines Fensters, wenn es aktiv ist (Vordergrund). Außerdem versteckt dies die Trennlinie zwischen Titelleiste und Fensterinhalt. Dies trifft nur auf Mac OS Systeme zu.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/align/index.html b/files/de/archive/mozilla/xul/attribute/align/index.html new file mode 100644 index 0000000000..fe97a3c6c4 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/align/index.html @@ -0,0 +1,37 @@ +--- +title: align +slug: Archive/Mozilla/XUL/Attribute/align +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/align +--- +
+ « XUL-Referenz Startseite
+
+
+ align
+
+
+
+ Typ: einer der unten angegebenen Werte
+
+
+
+ Das Attribut align gibt die Ausrichtung der Kindelemente des Kastens (Box) an, wenn die Größe des Kastens größer als die Gesamtgröße seiner Kindelemente ist. Für Kästen horizontaler Orientierung gibt es die vertikale Ausrichtung der Kindelemente an. Im Falle vertikaler Orientierung legt es entsprechend die horizontale Ausrichtung der Kindelemente fest. Das Attribut pack bezieht sich auf die Ausrichtung, wird jedoch zur Angabe der Position in entgegengesetzter Richtung benutzt. Der Wert von align kann auch mittels der Stileigenschaft -moz-box-align angeben werden.
+
+ +
+

Siehe auch

+

Attribut pack

+ +
+

 

diff --git a/files/de/archive/mozilla/xul/attribute/allowevents/index.html b/files/de/archive/mozilla/xul/attribute/allowevents/index.html new file mode 100644 index 0000000000..63dc160f9e --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/allowevents/index.html @@ -0,0 +1,17 @@ +--- +title: allowevents +slug: Archive/Mozilla/XUL/Attribute/allowevents +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/allowevents +--- +
« XUL-Referenz Startseite
+
allowevents
Typ: boolean
Falls true, werden Ereignisse an die Kindelemente des Elements weitergereicht. Anderenfalls erhält nur das Element Ereignisse.
+
+
+

Bei listitem und titlebar Elementen werden Maus-Ereignisse normalerweise nicht an deren Kindelemente gesendet. Stattdessen werden sie zurück auf das listitem und titlebar Element selbst geschickt. Das bedeutet, dass Elemente innerhalb eines listitem Elements nicht auf auf Ereignisse reagieren und stattdessen nur ein Item in der Liste ausgewählt wird. Wird das allowevents Attribut auf true gesetzt, wird dieses spezielle Verhalten deaktiviert und Ereignisse werden wie bei anderen Elementen behandelt.

+

Bei menu, menuseparator, menuitem und treecol Elementen, sowie Menü-Buttons, und beim datepicker Popup werden Maus-Ereignisse ebenfalls auf das Element selbst gerichtet. Das allowevents Attribut wird jedoch in einer anderen Art verwendet. Das Attribut allowevents kann hier im Kindelement auf true gesetzt werden. Das hat die gleichen Auswirkungen, wie bei normal gerichteten Ereignissen, erlaubt aber unterschiedliche Einstellungen für jedes Kindelement.
+Dieses Verhalten wird für Menüs verwendet, um zum Beispiel einem Menü-Button zu erlauben sich so zu verhalten wie das Menü, wenn man darauf klickt.

+ +
diff --git a/files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html b/files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html new file mode 100644 index 0000000000..83634ca471 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html @@ -0,0 +1,11 @@ +--- +title: allownegativeassertions +slug: Archive/Mozilla/XUL/Attribute/allownegativeassertions +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/allownegativeassertions +--- +
« XUL-Referenz Startseite
+
allownegativeassertions
Typ: boolean
Gültig für jedes Element mit einem Attribut datasources. Werden mehrere Datenquellen benutzt, wird die Aussage eventuell von einer anderen überschrieben. Wenn dieses Attribut true ist (was die Vorgabe ist), kann eine Datenquelle eine frühere Aussage negieren.
+
diff --git a/files/de/archive/mozilla/xul/attribute/color/index.html b/files/de/archive/mozilla/xul/attribute/color/index.html new file mode 100644 index 0000000000..50902e7afe --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/color/index.html @@ -0,0 +1,14 @@ +--- +title: color +slug: Archive/Mozilla/XUL/Attribute/Color +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/color +--- +
« XUL-Referenz Startseite
+
color
Typ: color string
Die aktuell ausgewählte Farbe. Diese wird geändert, sobald der Anwender eine Farbe auswählt. Man kann einen String in der Form #RRGGBB der Eigenschaft zuweisen, um die gewählte Farbe zu ändern.
+
+
+

 

+
diff --git a/files/de/archive/mozilla/xul/attribute/cols/index.html b/files/de/archive/mozilla/xul/attribute/cols/index.html new file mode 100644 index 0000000000..1f2ea0a4d6 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/cols/index.html @@ -0,0 +1,14 @@ +--- +title: cols +slug: Archive/Mozilla/XUL/Attribute/Cols +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/cols +--- +
« XUL-Referenz Startseite
+
cols
Typ: integer
Stellt die Anzahl an Spalten für mehrzeilige Textboxen dar.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/decimalplaces/index.html b/files/de/archive/mozilla/xul/attribute/decimalplaces/index.html new file mode 100644 index 0000000000..bea62c69a2 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/decimalplaces/index.html @@ -0,0 +1,14 @@ +--- +title: decimalplaces +slug: Archive/Mozilla/XUL/Attribute/Decimalplaces +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/decimalplaces +--- +
« XUL-Referenz Startseite
+
decimalplaces
Typ: integer
Die Anzahl an Dezimalstellen, die angezeigt werden sollen. Der Standardwert ist 0, was bedeutet, dass keine Dezimalstellen angezeigt werden. Der Wert infinity kann dazu verwendet werden, keine Begrenzung der Dezimalstellen bei Zahlen anzuzeigen. Hinweis: Dezimalzahlen werden als Floats gespeichert.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/disabled/index.html b/files/de/archive/mozilla/xul/attribute/disabled/index.html new file mode 100644 index 0000000000..0b296a38ea --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/disabled/index.html @@ -0,0 +1,28 @@ +--- +title: Disabled +slug: Archive/Mozilla/XUL/Attribute/Disabled +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/disabled +--- +
« XUL-Referenz Startseite
+
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+
+
// Deaktiviere ein Element.
+document.getElementById('buttRemove').setAttribute("disabled", "true");
+
+// Reaktiviere ein Element, während das "disabled" Attribute beibehalten wird.
+document.getElementById('buttRemove').setAttribute("disabled", "");
+
+// Reaktiviere ein Element, in dem das "disabled" Attribut entfernt wird.
+document.getElementById('buttRemove').removeAttribute("disabled");
+
+
+

Hinweis zu Firefox 3.5

+

Seit Firefox 3.5 wird dieses Attribut für Keyset Elemente unterstützt.

+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/empty/index.html b/files/de/archive/mozilla/xul/attribute/empty/index.html new file mode 100644 index 0000000000..f1a3d0071b --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/empty/index.html @@ -0,0 +1,14 @@ +--- +title: empty +slug: Archive/Mozilla/XUL/Attribute/Empty +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/textbox.empty +--- +
« XUL-Referenz Startseite
+
empty
Typ: boolean
Gibt an, ob emptyText angezeigt werden soll. Kann zur Gestaltung des Elements verwendet werden.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/emptytext/index.html b/files/de/archive/mozilla/xul/attribute/emptytext/index.html new file mode 100644 index 0000000000..9631bea08c --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/emptytext/index.html @@ -0,0 +1,14 @@ +--- +title: emptytext +slug: Archive/Mozilla/XUL/Attribute/Emptytext +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/emptytext +--- +
« XUL-Referenz Startseite
+
emptytext Unerwünscht Gecko 2
Typ: string
Ein String, der in der Textbox angezeigt wird, falls diese keinen Wert besitzt. Dieses Attribut wurde vom placeholder Attribut in Gecko 2 ersetzt. Der alte Name bleibt zur Kompatibilität bestehen, aber Sie sollten Ihren Code aktualisieren.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/expr/index.html b/files/de/archive/mozilla/xul/attribute/expr/index.html new file mode 100644 index 0000000000..1448277f5c --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/expr/index.html @@ -0,0 +1,14 @@ +--- +title: Expr +slug: Archive/Mozilla/XUL/Attribute/Expr +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/expr +--- +
« XUL-Referenz Startseite
+
expr
Typ: string
Ein XPath Ausdruck für XML Abfragen, der Ergebnisse zurückliefert. Innerhalb des Ausdrucks kann jeder Namespace Präfix verwendet werden, der für ein Element deklariert wurde.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html b/files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html new file mode 100644 index 0000000000..37b86f1f3f --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html @@ -0,0 +1,10 @@ +--- +title: hidespinbuttons +slug: Archive/Mozilla/XUL/Attribute/Hidespinbuttons +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/hidespinbuttons +--- +
« XUL-Referenz Startseite
+
hidespinbuttons
Typ: boolean
Falls der Wert auf true gesetzt wird, werden keine Buttons mit Pfeilen angezeigt, um den Wert des Feldes anzupassen. Der Wert kann dann ausschließlich per Tastatur eingegeben werden. Standardmäßig ist der Wert false.
diff --git a/files/de/archive/mozilla/xul/attribute/index.html b/files/de/archive/mozilla/xul/attribute/index.html new file mode 100644 index 0000000000..2bc9d70f0d --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/index.html @@ -0,0 +1,11 @@ +--- +title: Attribute +slug: Archive/Mozilla/XUL/Attribute +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute +--- +

« XUL-Referenz Startseite

+ diff --git a/files/de/archive/mozilla/xul/attribute/label/index.html b/files/de/archive/mozilla/xul/attribute/label/index.html new file mode 100644 index 0000000000..d1bde8c8b8 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/label/index.html @@ -0,0 +1,32 @@ +--- +title: label +slug: Archive/Mozilla/XUL/Attribute/label +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/label +--- +
« XUL-Referenz Startseite
+
label
Typ: string
Die Beschriftung für das Element. Wird das Attribut nicht angegeben, so erscheint auch kein Beschriftungstext.
+
+
+

Siehe auch

+ +

Beispiele in JavaScript

+
<label value="Whaw" id="the-big-label" command="the-big-button"/>
+<button id="the-big-button" label="Klick mich"
+	oncommand="alert(document.getElementById('the-big-label').value)"/>
+
+<label id="myLabel" value="Meine Beschriftung"/>
+<button label="Klick mich"
+	oncommand="document.getElementById('myLabel').setAttribute('value','Wert geändert');" />
+
+<checkbox label="my Checkbox" id="myCheckboX"/>
+<button label="Weiterer Klick"
+	oncommand="document.getElementById('myCheckboX').setAttribute('label','Noch nicht angekreuzt');"/>
+<button label="Beschriftung des Ankreuzfeldes"
+	oncommand="alert( document.getElementById('myCheckboX').getAttribute('label') )"/>
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/onchange/index.html b/files/de/archive/mozilla/xul/attribute/onchange/index.html new file mode 100644 index 0000000000..ef1f0e8bd8 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/onchange/index.html @@ -0,0 +1,14 @@ +--- +title: onchange +slug: Archive/Mozilla/XUL/Attribute/Onchange +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/onchange +--- +
« XUL-Referenz Startseite
+
onchange
Typ: script code
Der Code im onchange Attribut wird aufgerufen, wenn sich der Wert des Elements geändert hat.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/prefpane.src/index.html b/files/de/archive/mozilla/xul/attribute/prefpane.src/index.html new file mode 100644 index 0000000000..14c934c98f --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/prefpane.src/index.html @@ -0,0 +1,25 @@ +--- +title: prefpane.src +slug: Archive/Mozilla/XUL/Attribute/prefpane.src +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/prefpane.src +--- +
+ « XUL-Referenz Startseite
+
+
+ src
+
+ Typ: Überlagerungs-URL
+
+ Die URL des Inhalts des prefpane. Sofern nicht angegeben, wird der Inhalt des prefpane Elements dargestellt.
+
+ +
+

Siehe auch

+ +
diff --git a/files/de/archive/mozilla/xul/attribute/src/index.html b/files/de/archive/mozilla/xul/attribute/src/index.html new file mode 100644 index 0000000000..875fa55f2d --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/src/index.html @@ -0,0 +1,34 @@ +--- +title: src +slug: Archive/Mozilla/XUL/Attribute/src +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/src +--- +
+ « XUL-Referenz Startseite
+
+
+ src
+
+ Typ: URL
+
+ Die URL des im Element anzuzeigenden Inhalts.
+
+
+

Beispiele

+ 
<iframe id="content-body" src="http://www.mozilla.org/"/>
+<browser src="http://www.mozilla.org" flex="1"/>
+<image src='Firefoxlogo.png' width='135' height='130'/>
+
+

Siehe auch

+ +
diff --git a/files/de/archive/mozilla/xul/attribute/treecell.src/index.html b/files/de/archive/mozilla/xul/attribute/treecell.src/index.html new file mode 100644 index 0000000000..0c1a44cd34 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/treecell.src/index.html @@ -0,0 +1,17 @@ +--- +title: treecell.src +slug: Archive/Mozilla/XUL/Attribute/treecell.src +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/treecell.src +--- +
« XUL-Referenz Startseite
+
src
Typ: Bild-URL
URL des Bildes, welches in der Zelle des Baums angezeigt werden soll. Sofern nicht angegeben, erscheint auch kein Bild. In der Zelle können sowohl Bild als auch Beschriftung angezeigt werden.
+
+
+

Siehe auch

+ + +
diff --git a/files/de/archive/mozilla/xul/attribute/treecol.src/index.html b/files/de/archive/mozilla/xul/attribute/treecol.src/index.html new file mode 100644 index 0000000000..e94d0f7cbb --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/treecol.src/index.html @@ -0,0 +1,17 @@ +--- +title: treecol.src +slug: Archive/Mozilla/XUL/Attribute/treecol.src +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/treecol.src +--- +
« XUL-Referenz Startseite
+
src
Typ: Bild-URL
Um für das treecol Element ein Bild für den Kopf, statt eines label Attribut zu benutzen, kann dieses Attribut gesetzt werden. Im Kopf können nicht gleichzeitig Bild und Beschriftung angezeigt werden. Die URL eines Bildes, das als Spaltenkopf des Baums angezeigt wird, kann mit diesem Attribut festgelegt werden. Wird das Attribut nicht angegeben, erscheint kein Bild und es wird stattdessen die Beschriftung angezeigt. Damit das Bild erscheint, muss die Klasse treecol-image für das treecol Element gesetzt werden. Ein label sollte dennoch für die Benutzung im Spaltenwähler angegeben werden, falls ignoreincolumnpicker nicht true ist und hidecolumnpicker für den tree ebenfalls nicht true ist .
+
+
+

Siehe auch

+ + +
diff --git a/files/de/archive/mozilla/xul/attribute/var/index.html b/files/de/archive/mozilla/xul/attribute/var/index.html new file mode 100644 index 0000000000..1ed49683ea --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/var/index.html @@ -0,0 +1,14 @@ +--- +title: var +slug: Archive/Mozilla/XUL/Attribute/Var +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/var +--- +
« XUL-Referenz Startseite
+
var
Typ: string
Dient der Variablenzuweisung innerhalb assign Tags; ansonsten wird es als Referenz zu einer Template Variable wie beispielsweise "?name" verwendet.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/bbox/index.html b/files/de/archive/mozilla/xul/bbox/index.html new file mode 100644 index 0000000000..35dc11a250 --- /dev/null +++ b/files/de/archive/mozilla/xul/bbox/index.html @@ -0,0 +1,87 @@ +--- +title: Bbox +slug: Archive/Mozilla/XUL/Bbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/bbox +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Eine horizontale Box, die an der Grundlinie ausgerichtet ist. Gleichwertig zum hbox Element mit einem align Attribut mit dem Wert baseline.

+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+

TBD

diff --git a/files/de/archive/mozilla/xul/binding/index.html b/files/de/archive/mozilla/xul/binding/index.html new file mode 100644 index 0000000000..bc3dbe2daf --- /dev/null +++ b/files/de/archive/mozilla/xul/binding/index.html @@ -0,0 +1,89 @@ +--- +title: binding +slug: Archive/Mozilla/XUL/Binding +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/binding +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Sollte in einem bindings Element enthalten sein. Ein binding wird benutzt, um eine Variable an einen Node zu binden. Ähnlich zum Syntax des triple Elements, können die Eigenschaften eines entsprechenden Nodes an einen Variablennamen gebunden werden. Dieser Name kann innerhalb einer Aktion einer Regel benutzt werden.

+
Eigenschaften
object, predicate, subject
+
+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+
+

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+

TBD

diff --git a/files/de/archive/mozilla/xul/box/index.html b/files/de/archive/mozilla/xul/box/index.html new file mode 100644 index 0000000000..b479153f5c --- /dev/null +++ b/files/de/archive/mozilla/xul/box/index.html @@ -0,0 +1,101 @@ +--- +title: box +slug: Archive/Mozilla/XUL/Box +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/box +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Containerelement, welches eine beliebige Anzahl an Kindelementen enthalten kann. Falls das box Element ein orient Attribut besitzt, das auf horizontal gesetzt ist, werden die Kindelemente von links nach rechts, in der Reihenfolge, in der sie in im box Element erscheinen, angelegt. Falls orient auf vertical gesetzt ist, werden die Kindelemente von oben nach unten angelegt. Kindelemente überlappen sich dabei nicht. Die standardmäßige Ausrichtung ist horizontal.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+

Beispiele

+
Image:XUL_ref_box.png
+
<box orient="horizontal">
+  <label value="Zero"/>
+  <box orient="vertical">
+    <label value="One"/>
+    <label value="Two"/>
+  </box>
+  <box orient="horizontal">
+    <label value="Three"/>
+    <label value="Four"/>
+  </box>
+</box>
+
+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+ +
Elemente
vbox, hbox
+
diff --git a/files/de/archive/mozilla/xul/colorpicker/index.html b/files/de/archive/mozilla/xul/colorpicker/index.html new file mode 100644 index 0000000000..fa6c6bf533 --- /dev/null +++ b/files/de/archive/mozilla/xul/colorpicker/index.html @@ -0,0 +1,77 @@ +--- +title: colorpicker +slug: Archive/Mozilla/XUL/Colorpicker +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/colorpicker +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Eine Farbpalette aus der ein Anwender durch Anklicken auf eine der Gitterzellen wählen kann.

+
Attribute
disabled, color, onchange, preference, tabindex, type
+
+
Eigenschaften
accessibleType, color, disabled, open, tabIndex
+
+

Beispiele

+

Image:XUL_REF_rgb.gif

+
<colorpicker/>
+
+

Attribute

+

+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ +
color
Typ: color string
Die aktuell ausgewählte Farbe. Diese wird geändert, sobald der Anwender eine Farbe auswählt. Man kann einen String in der Form #RRGGBB der Eigenschaft zuweisen, um die gewählte Farbe zu ändern.
+
+ +
+ +
onchange
Typ: script code
Der Code im onchange Attribut wird aufgerufen, wenn sich der Wert des Elements geändert hat.
+
+ +
+ + +
+
preference
+
Type: id
+
Connects the element to a corresponding preference. This attribute only has any effect when used inside a prefwindow. More information is available in the Preferences System article.
+
+
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+ + +
+
type
+
Type: string
+
If this attribute is not present, the colorpicker is displayed inside the window. If this is set to the text button, the colorpicker is displayed as a button. When the user clicks the button, a popup appears for the user to select a color.
+
+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+
Schnittstellen
nsIDOMXULControlElement
+
+

Bugs

+

Das onchange Event funktioniert nur, wenn das type Attribut auf "button" festgelegt wurde. Die Verwendung von onclick bietet sich daher an, wenn mit mit dem losen Colorpicker gearbeitet wird und die gerade ausgewählte Farbe benötigt wird, um z.B. in einer <textbox> angezeigt zu werden.

diff --git a/files/de/archive/mozilla/xul/eigenschaften/index.html b/files/de/archive/mozilla/xul/eigenschaften/index.html new file mode 100644 index 0000000000..f152ae7489 --- /dev/null +++ b/files/de/archive/mozilla/xul/eigenschaften/index.html @@ -0,0 +1,14 @@ +--- +title: Eigenschaften +slug: Archive/Mozilla/XUL/Eigenschaften +tags: + - XUL Eigenschaften + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Property +--- +

« XUL-Referenz Startseite

+ +

Verwandte DOM Elementeigenschaften

+ diff --git a/files/de/archive/mozilla/xul/events/index.html b/files/de/archive/mozilla/xul/events/index.html new file mode 100644 index 0000000000..346a893f9a --- /dev/null +++ b/files/de/archive/mozilla/xul/events/index.html @@ -0,0 +1,464 @@ +--- +title: Ereignisse +slug: Archive/Mozilla/XUL/Events +tags: + - XUL-Ereignisse +translation_of: Archive/Mozilla/XUL/Events +--- +

 

+ +

« Startseite XUL Referenz

+ +

 

+ +

Die folgenden Tabellen beschreiben die Ereignisbehandlungsroutinen, welche die meisten XUL-Elemente betreffen. Die Ereignisse können mit dem Element über »Lauscher« (Listener) verknüpft werden. Der addEventListener fügt ein Ereignis hinzu, der removeEventListener hebt diese Verknüpfung wieder auf.

+ +

Für einige Ereignisse kann die Verknüpfung auch über Attribute erfolgen. Hierbei muss jedoch berücksichtigt werden, dass nur ein Listener gleichzeitig verknüpft werden kann. Eventuell bereits bestehende Verknüpfungen mit Lauschern werden aufgelöst. Der Name des Attributs entspricht dem Namen des Ereignisses mit einem vorangestellten 'on'.

+ +

Geerbte DOM Ereignisse

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EreignisBeschreibung
+

blur

+ 		+

Das Gegenteil des focus-Ereignisses; das blur-Ereignis tritt auf, nachdem ein Element den Eingabefokus verloren hat.
+ Attribut: onblur

+
+

change

+ 		+

Dieses Ereignis wird gesendet, wenn der Wert eines Textfelds geändert wird, aber erst wenn der Eingabefokus auf ein anderes Element übergeht.
+ Attribut: onchange

+
+

click

+ 		+

Dieses Ereignis wird gesendet, wenn eine Maustaste gedrückt und wieder losgelassen wurde. Über die button Eigenschaft des Ereignisobjekts kann ermittelt werden, welche Maustaste gedrückt wurde. Dieses Ereignis wird auch gesendet, wenn der Benutzer einen Doppelklick ausführt. Über die detail Eigenschaft kann festgelegt werden, wie viele Klicks auftreten sollen. So kann auch auf dreifach-Klicks getestet werden. Dieses Ereignis sollte in XUL nicht verwendet werden, um auf Benutzeraktionen zu reagieren. Stattdessen sollte das command Ereignis benutzt werden.
+ Attribut: onclick

+
+

dblclick

+ 		+

Dieses Ereignis verhält sich wie das click Ereignis, allerdings wird es nur gesendet, wenn der Benutzer einen Doppelklick ausführt. Das Ereignis kann als eine Alternative zur detail Eigenschaft im click Ereignis verwendet werden.
+ Attribut: ondblclick

+
+

DOMMouseScroll

+ 		+

Dieses Ereignis wird gesendet, wenn das Mausrad bewegt wird, egal, ob der Inhalt gescrollt wird oder nicht.
+ Ziel dieses Ereignisses ist das Element, welches sich unter dem Mauszeiger befindet, wenn das Mausrad bewegt wird.

+
+

focus

+ 		+

Das focus Ereignis wird gesendet, wenn ein Element den Fokus erhält. Wenn das Element fokussiert ist, werden Tastaturereignisse zu diesem Element gesendet. Der Fokus kann geändert werden, indem auf eine anderes Element geklickt wird, die TAB Taste gedrückt wird, um zum nächsten Element zu wechseln, oder die »Zurück TAB« Taste gedrückt wird, um zum vorherigen Element zu wechseln.
+ Attribut: onfocus

+
+

keydown

+ 		+

Dieses Ereignis wird zu einem Element gesendet, das den Eingabefokus hat, während eine Taste gedrückt, aber nicht losgelassen wird.
+ Attribut: onkeydown

+
+

keypress

+ 		+

Das keypress Ereignis wird zu einem Element gesendet, das den Eingabefokus hat und eine Taste gedrückt und losgelassen wurde. Wenn der Benutzer eine Taste drückt, wird zuerst das keydown Ereignis gesendet, gefolgt vom keypress Ereignis und schließlich dem keyup Ereignis. In einem Textfeld kann der Benutzer normalerweise eine Taste gedrückt halten, um ein Zeichen wiederholt zu senden. In diesem Fall werden mehrere Ereignispaare gesendet, als ob der Benutzer die gleiche Taste sehr schnell hintereinander drücken würde.
+ Attribut: onkeypress

+
+

keyup

+ 		+

Das keyup Ereignis wird einem Element gesendet, das den Eingabefokus hat, wenn eine Taste losgelassen wird.
+ Attribut: onkeyup

+
+

load

+ 		+

Dieses Element wird zum Fenster gesendet, nachdem es vollständig geladen wurde. Die Behandlungsroutine sollte dem window Element zugewiesen werden. Dieses Ereignis kann auch bei Bildelementen oder einem Element, das Bildattribute akzeptiert verwendet werden und wird dann gesendet, wenn das Bild vollständig geladen wurde. Bei Bildern wird dieses Element nicht im Elementenbaum auftauchen, sodass es nicht mit dem load Ereignis des Fensters in Konflikt gerät.
+ Attribut: onload

+
+

mousedown

+ 		+

Dieses Ereignis wird gesendet, wenn die Maustaste über einem Element gedrückt, aber nicht losgelassen wird.
+ Attribut: onmousedown

+
+

mousemove

+ 		+

Dieses Ereignis wird wiederholt gesendet, während der Mauszeiger über einem Element bewegt wird.
+ Attribut: onmousemove

+
+

mouseout

+ 		+

Dieses Ereignis wird einem Element gesendet, wenn der Benutzer den Mauszeiger aus dem Bereich des Elements bewegt. Es ist das Gegenstück zum mouseover Ereignis.
+ Attribut: onmouseout

+
+

mouseover

+ 		+

Dieses Element wird einem Element gesendet, wenn sich die Maus erstmals über einem Element befindet. Es kann dazu verwendet werden dem Benutzer Rückmeldungen bereitzustellen.
+ Attribut: onmouseover

+
+

mouseup

+ 		+

Dieses Ereignis wird gesendet, wenn die Maustaste über einem Element losgelassen wird.
+ Attribut: onmouseup

+
+

select

+ 		+

Dieses Ereignis wird einer Listbox bzw. einem Tree bei Auswahl eines Eintrags gesendet.
+ Attribut: onselect

+
+

unload

+ 		+

Dieses Ereignis wird einem Fenster gesendet, wenn das Fenster geschlossen wurde. Das erfolgt nach dem close Ereignis. Die Behandlungsroutine für dieses Ereignis sollte dem window Element zugewiesen werden.
+ Attribut: onunload

+
+ +

Ereignisse zu Veränderungen am DOM

+ + + + + + + + + + + + + + + + + + + + +
EreignisBeschreibung
+

DOMAttrModified

+ 		+

Dieses Ereignis wird einem Element gesendet, wenn eines der Attribute verändert wird. In der Behandlungsroutine kann das Attribut, welches verändert wurde, über die attrName Eigenschaft ermittelt werden. Neue und alte Werte des Attributs können über die prevValue und newValue Eigenschaften abgerufen werden.

+
+

DOMNodeInserted

+ 		+

Dieses Ereignis wird gesendet, wenn ein Kontenelement (als ein Kindelement) einem Element hinzugefügt wird. Wenn dieses Element auf dem Dokumentenlevel erfasst wird, können Hinweise zu Dokumentenveränderung auftreten.

+
+

DOMNodeRemoved

+ 		+

Dieses Ereignis wird gesendet, wenn ein Kontenelement aus einem Element entfernt wird. Wenn dieses Element auf dem Dokumentenlevel erfasst wird, können Hinweise zu Dokumentenveränderung auftreten.

+
+ +

Es sollte darauf hingewiesen werden, dass die Anwesenheit von Behandlungsroutinen zur Veränderungen am DOM die Performance von nachfolgenden DOM Operationen in dem Dokument stark beeinträchtigt. Das kann bedeuten, dass eine DOM Operation 1,5 bis 7 mal so lange braucht als es ohne einen Eventhandler brauchen würde.

+ +

Gebräuchliche XUL Ereignisse

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EreignisBeschreibung
+

broadcast

+ 		+

Dieses Ereignis sollte einem Beobachter zugewiesen werden. Das broadcast Ereignis wird gesendet, wenn die Attribute eines Elements verändert oder beobachtet werden.
+ Attribut: onbroadcast

+
+

close

+ 		+

Dieses Ereignis wird gesendet, wenn eine Anfrage durch den Benutzer getätigt wurde, die das Fenster schließen lassen soll (z.B durch Klick auf den Schließen Button). Wird eine Behandlungsroutine auf das window Element gesetzt, kann das Schließen des Fensters verhindert werden. Wird false vom Close-handler zurückgeliefert, wird das Fenster nicht geschlossen. Eine Rückgabe von true schließt das Fenster normal. Dieses Ereignis wird nur gesendet, wenn der Benutzer den Schließen Button in der Titelleiste anklickt. Das unload Ereignis erfasst alle Versuche das Fenster zu schließen.
+ Attribut: onclose

+
+

command

+ 		+

Dieses Ereignis wird gesendet, wenn ein Element aktiv ist. Wie es aktiviert wird, variiert von Element zu Element und in vielen Fällen gibt es mehrere Wege, um eine Element zu aktivieren. Zum Beispiel kann eine Schaltfläche, wenn sie fokussiert ist, durch ein Klick mit der Maus oder durch das Drücken der ENTER Taste aktivert werden. Menüs können durch das Auswählen mit der Maus oder durch das Drücken einer Schnelltaste aktiviert werden. Es sollte immer das command Ereignis, anstatt des click Ereignisses verwendet werden, weil in allen nötigen Fällen aufgerufen wird.
+ Attribut: oncommand

+
+

commandupdate

+ 		+

Dieses Ereignis tritt auf, wenn eine Befehlsaktualisierung beim <commandset> Element statt findet. Es wird verwendet, um die ausgeschalteten Befehle zu aktualisieren.
+ Attribut: oncommandupdate

+
+

contextmenu

+ 		+

Dieses Ereignis wird einem Element gesendet, wenn der Benutzer eine Anfrage stellt, die ein Kontextmenü öffnen soll. Die Aktion variiert von Betriebssystem zu Betriebssystem, wird aber typischerweise durch einen Rechtsklick ausgelöst. Diese Behandlungsroutine wird normalerweise verwendet, um dynamische Befehle auszuführen, wenn der Benutzer die Anfrage stellt, das Menü anzuzeigen oder es wird ein Ereignis benutzt, welches ein Popup-Fenster anzeigt. Wird false von diesem Eventhandler zurückgegeben, wird verhindert, dass das Popup-Fenster angezeigt wird.
+ Attribut: oncontextmenu

+
+

drag {{ Fx_minversion_inline(3) }}

+ 		+

Das drag Ereignis wird zum Quellknoten (der Knoten, der gezogen wurde) mehrmals pro Sekunde gesendet, während ein Objekt gezogen wird.
+ Attribut: ondrag

+
+

dragdrop

+ 		+

Dieses Ereignis wird ausgelöst, wenn der Benutzer die Maustaste los lässt, um ein Objekt abzulegen, welches gezogen wurde. Das Element, wenn es das Ablegen akzeptiert, sollte in irgendeiner Weise reagieren (z.B. durch das Hineinlegen des gezogenen Objekten in das Element selbst).
+ Attribut: ondragdrop

+
+

dragend {{ Fx_minversion_inline(3) }}

+ 		+

Das dragend Ereignis wird zum Quellknoten (der Konten, der gezogen wurde) gesendet, wenn das Objekt nicht mehr gezogen wird.
+ Attribut: ondragend

+
+

dragenter

+ 		+

Das dragenter Ereignis wird gesendet, wenn sich der Mauszeiger erstmals über ein Element befindet in welches ein Objekt gezogen werden soll. Es ist ähnlich zum mouseover Ereignis, tritt aber nur beim Hineinlegen von Objekten auf.
+ Attribut: ondragenter

+
+

dragexit

+ 		+

Dieses Ereignis wird gesendet, wenn sich der Mauszeiger aus dem Element entfernt, in welches ein Objekten gezogen werden soll. Es wird auch aufgerufen, wenn ein Objekt in ein Element gezogen wurde. Es ist ähnlich zum mouseout Ereignis, tritt aber nur beim Hineinlegen von Objekten auf.
+ Attribut: ondragexit

+
+

draggesture

+ 		+

Dieses Ereignis wird gesendet, wenn der Benutzer beginnt ein Element zu ziehen, normalerweise in dem die Maustaste gedrückt und bewegt wird.
+ Attribut: ondraggesture

+
+

dragover

+ 		+

Ähnlich zum mousemove Ereignis wird dieses Ereignis gesendet, während etwas über ein Element gezogen wird. Die Behandlungsroutine sollte angeben, ob das Objekt gezogen wird oder abgelegt werden kann.
+ Attribut: ondragover

+
+

input

+ 		+

Dieses Ereignis wird gesendet, wenn der Benutzer einen Text in ein Textfeld eingibt. Das Ereignis wird nur dann aufgerufen, wenn der angezeigte Text verändert wird, daher wird es nicht aufgerufen, wenn der Benutzer Tasten drückt, die nicht in einem Textfeld dargestellt werden.
+ Attribut: oninput

+
+

overflow

+ 		+

Dieses Ereignis wird nur zu einer Box oder einem anderen Layoutelement gesendet, wenn die CSS overflow Eigenschaft auf einen anderen Wert als 'visible' festgelegt wird. Falls nicht genug Platz vorhanden ist, um den Inhalt des Elements vollständig anzuzeigen, wird das overflow Ereignis gesendet. Abhängig vom Wert der overflow Eigenschaft treten eventuell Scrollbalken auf. Wenn zum Beispiel eine Box eine maximale Größe von 100 Pixeln besitzt und nur genug Platz für 80 Pixel verfügbar ist, wird das overflow Ereignis zur Box gesendet. Wenn sich die Größe verändert, zum Beispiel durch den Benutzer, der die Fenstergröße ändert, wird das underflow Ereignis gesendet, wenn genug Platz frei wird.
+ Attribut: onoverflow

+
+

popuphidden

+ 		+

Dieses Ereignis wird einem Popup gesendet, nachdem er versteckt wurde.
+ Attribut: onpopuphidden

+
+

popuphiding

+ 		+

Dieses Ereignis wird einem Popup gesendet, wenn es versteckt wird.
+ Attribut: onpopuphiding

+
+

popupshowing

+ 		+

Dieses Ereignis wird einem Popup gesendet, bevor dieser angezeigt wird. Diese Behandlungsroutine wird normalerweise verwendet, um Inhalte dynamisch festzulegen, wenn der Benutzer eine Anfrage stellt diese anzuzeigen. Wird false vom Eventhandler zurückgegeben, wird die Anzeige des Popups verhindert.
+ Attribut: onpopupshowing

+
+

popupshown

+ 		+

Dieses Ereignis wird einem Popup gesendet, nachdem er geöffnet wurde, sehr ähnlich zum onload Ereignis, welches gesendet wird, wenn ein Fenster geöffnet wurde.
+ Attribut: onpopupshown

+
+

syncfrompreference

+ 		+

Dieses Ereignis wird gesendet, wenn das Element verändert wurde, weil eine Einstellung geändert wurde oder wenn ein Element von einer Einstellung initialisiert wurde. Dieses Ereignis wird nur an Elemente gesendet, die mit einer Einstellung verbunden sind und in prefwindow vorhanden sind. Das ist kein wirkliches Ereignis, es ist ein Funktionsaufruf und muss die Attributschreibweise verwenden. Das Skript kann einen Wert zurück liefern, um dem Element auf einen spezifischen Wert zu geben, als den Wert der Einstellung. Dieses Ereignis wird normalerweise verwendet, um einen Wert einzustellen, sodass es passender für die Anzeige in der Benutzeroberfläche gemacht werden kann.
+ Attribut: onsyncfrompreference

+
+

synctopreference

+ 		+

Dieses Ereignis wird gesendet, wenn ein Element, das mit einer Einstellung verbunden ist, verändert wurde. ieses Ereignis wird nur an Elemente gesendet, die mit einer Einstellung verbunden sind und in prefwindow vorhanden sind. Das ist kein wirkliches Ereignis, es ist ein Funktionsaufruf und muss die Attributschreibweise verwenden. Das Skript kann einen Wert zurück liefern, um dem Element auf einen spezifischen Wert zu geben, als den Wert der Einstellung.
+ Attribut: onsynctopreference

+
+

underflow

+ 		+

Dieses Ereignis wird einem Element gesendet, wenn genug Platz vorhanden ist, um es vollständig anzuzeigen. Das betrifft Boxen und andere Layoutelement mit der CSS overflow Eigenschaft, die einen anderen Wert als 'visible' besitzen. Das underflow Ereignis kann verwendet werden, um zu ermitteln, dass ein Scrollmechanismus nicht länger benötigt wird.
+ Attribut: onunderflow

+
+

DOMMenuItemActive

+ 		+

Dieses Ereignis wird gesendet, wenn ein Menü oder Menüitem hervorgehoben wird oder die Maus darüber schwebt.

+
+

DOMMenuItemInactive

+ 		+

Dieses Ereignis wird gesendet, wenn ein Menü oder Menüitem nicht länger hervorgehoben wird oder die Maus nicht länger darüber schwebt.

+
+ +

Ereignisse zur Zugänglichkeit (Accessibility)

+ +

Mit diesen Ereignissen wird das Zugänglichkeitssystem über Veränderungen an einem Element benachrichtigt. Sie würden diese normalerweise nicht selbst verwenden.

+ + + + + + + + + + + + + + + + +
EreignisBeschreibung
+

CheckboxStateChange

+ 		+

Dieses Ereignis wird gesendet, wenn eine checkbox angekreuzt oder nicht angekreuzt wird, entweder vom Benutzer oder von einem Skript. Normalerweise würde ein command Ereignis zur Abfrage der checkbox Veränderungen verwendetet werden, das command Ereignis wird aber nur gesendet, wenn der Benutzer den Wert verändert, während das CheckboxStateChange Ereignis auch gesendet wird, wenn ein Skript die checked Eigenschaft einer checkbox verändert. Bei Änderungen vom Benutzer wird das CheckboxStateChange Ereignis vor dem command Ereignis gesendet.

+
+

RadioStateChange

+ 		+

Dieses Ereignis wird gesendet, wenn ein Radiobutton ausgewählt wird, entweder vom Benutzer oder von einem Skript. Normalerweise würde ein command Ereignis zur Abfage der Veränderungen am Radiobutton verwendet werden, das command Ereignis wird aber nur gesendet, wenn der Benutzer den ausgewählten Radiobutton verändert, während das RadioStateChange Ereignis auch gesendet wird, wenn ein Skript die Auswahl verändert. Bei Änderungen vom Benutzer wird das RadioStateChange Ereignis vor dem command Ereignis gesendet.

+
+ +

{{ languages( { "en": "en/XUL/Events", "es": "es/XUL/Events", "ja": "ja/XUL/Events", "pl": "pl/XUL/Zdarzenia" } ) }}

diff --git a/files/de/archive/mozilla/xul/grippy/index.html b/files/de/archive/mozilla/xul/grippy/index.html new file mode 100644 index 0000000000..73061bf15a --- /dev/null +++ b/files/de/archive/mozilla/xul/grippy/index.html @@ -0,0 +1,88 @@ +--- +title: grippy +slug: Archive/Mozilla/XUL/grippy +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/grippy +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Element, das in einem splitter-Element verwendet werden kann. Es ermöglicht das Zusammenklappen eines Geschwisterelements des Trenners.

+

Weitere Informationen im XUL Tutorial.

+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandt

+

TBD

diff --git a/files/de/archive/mozilla/xul/iframe/index.html b/files/de/archive/mozilla/xul/iframe/index.html new file mode 100644 index 0000000000..7d5fa181af --- /dev/null +++ b/files/de/archive/mozilla/xul/iframe/index.html @@ -0,0 +1,161 @@ +--- +title: iframe +slug: Archive/Mozilla/XUL/iframe +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/iframe +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein innerer Frame, der in etwa wie das iframe-Element von HTML funktioniert. Das Attribut src gibt den Inhalt des Frames an. Dieser Inhalt befindet sich in einem separaten Dokument. Jegliche Kindelemente des iframe Elements werden ignoriert.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
showcaret, src, type, transparent
Eigenschaften
accessibleType, contentDocument, contentWindow, docShell, webNavigation
+
+

Beispiele

+
<iframe src="table.php" flex="2" id="browserTable" name="table_frame"/>
+
+

Einen URL aus einem Menü auswählen

+
<menulist oncommand="doNav(this);">
+  <menupopup>
+    <menuitem label="Mozilla" value="http://mozilla.org" />
+    <menuitem label="Slashdot" value="http://slashdot.org"/>
+    <menuitem label="Sourceforge" value="http://sf.net" />
+    <menuitem label="Freshmeat" value="http://freshmeat.net"/>
+  </menupopup>
+</menulist>
+
+
+<iframe id="myFrame" flex="1"/>
+
+<script>
+function doNav(obj){
+  var url = obj.selectedItem.value;
+  // note the firstChild is the menupopup element
+  document.getElementById('myFrame').setAttribute('src', url);
+}
+</script>
+
+

Attribute

+
+ + +
+
showcaret
+
Type: boolean
+
Whether or not to cause a typing caret to be visible in the content area. Default is false.
+
+ + +
+ +
+
+ src
+
+ Typ: URL
+
+ Die URL des im Element anzuzeigenden Inhalts.
+
+ +
+ + +
+
type
+
Type: one of the values below.
+
The type of browser, which can be used to set access of the document loaded inside the browser. If this is not set, the loaded document has the same access as the window containing the browser. More precisely: The document loaded into a chrome window is always of chrome type. Subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type. This boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document. The type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents.
+
+
Warning: The type attribute must be set before the element is inserted into the document.
+
+
+
+
content
+
A browser for content. The content that is loaded inside the browser is not allowed to access the chrome above it.
+
content-primary
+
The primary browser for content. The content that is loaded inside the browser is not allowed to access the chrome above it. For instance, in a web browser, this would be the element that displays the web page. The window for the primary content can be retrieved more conveniently using window.content.
+
content-targetable
+
One browser among many for content. The content that is loaded inside the browser is not allowed to access the chrome above it. This is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment.
+
chrome
+
(default behaviour): A browser, intended to be used for loading privileged content using a chrome:// URI. Don't use for content from web, as this may cause serious security problems!
+
+
+
+ + +
+
transparent
Type: one of the values below
Set the background of an iframe as transparent.
transparent
This results in the iframe's background being transparent. This can be used to workaround things like bug 540911
+
+
+ + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+
Schnittstellen
nsIAccessibleProvider
+
diff --git a/files/de/archive/mozilla/xul/index.html b/files/de/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..d275bb0520 --- /dev/null +++ b/files/de/archive/mozilla/xul/index.html @@ -0,0 +1,83 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - XUL +translation_of: Archive/Mozilla/XUL +--- +
XUL Tutorial
+Ein geführter Leitfaden für einen schnellen Einstieg in XUL, ursprünglich von XULPlanet.
+ +
XUL (XML User Interface Language) ist Mozillas XML-basierte Beschreibungssprache, die plattformübergreifende Anwendungen ermöglicht, die unabhängig von einer bestehenden Internetverbindung ausgeführt werden können. Diese Anwendungen können leicht (z.B. sprachlich) mittels alternativen Texten oder Layouts und alternativer Grafik angepasst werden. Web-Entwickler, die bereits mit dynamischen HTML (DHTML) vertraut sind, finden sich schnell in XUL zurecht und können direkt mit dem Bauen von Anwendungen beginnen. Das XUL Periodensystem zeigt in Firefox oder einem anderen Gecko-basierten Browser einige XUL-Demos, die einen guten Überblick liefern.
+ + + + + + + + +
+

Dokumentation

+ +
+
XUL Referenz
+
XUL Elemente, Attribute, Eigenschaften, Methoden, und Eventhandler.
+
XUL Bedienelemente
+
Eine kurze Liste aller verfügbaren XUL Bedienelemente.
+
XUL School
+
Eine sehr ausführliche Tutorial-Reihe über die Entwicklung von Add-ons in Mozilla.
+
XUL Überblick
+
Beschreibung der wichtigsten Eigenschaften und Komponenten von XUL.
+
Menüs und Popups
+
Ein Leitfaden zur Verwendung von Menüs und Popup-Panels.
+
Leitfaden für Vorlagen
+
Ein detaillierter Leitfaden für XUL Vorlagen (Templates), einem Mittel zur Erzeugung von Inhalt aus Datenquellen.
+
Drag und Drop
+
Wie man Drag und Drop Operationen ausführen kann.
+
XUL Anwendungen für Firefox 3 anpassen
+
Eine Liste von Änderungen in Firefox 3.0, die XUL-Entwickler betreffen.
+
XUL Anwendungen für Firefox 2 anpassen
+
Eine Liste von Änderungen in Firefox 2.0, die XUL-Entwickler betreffen.
+
XUL Anwendungen für Firefox 1.5 anpassen
+
Eine Liste von Änderungen in Firefox 1.5, die XUL-Entwickler betreffen.
+
+ +

Alle anzeigen...

+ +
+
+ 		+

Community

+ +
    +
  • Mozillas XUL Foren:
    • +
+ +

{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}

+ + + +

Tools

+ + + +

Verwandte Themen

+ +
+
JavaScript, XBL, CSS, RDF, Erweiterungen, XULRunner
+
+
+ +

{{ languages( { "en": "en/XUL", "es": "es/XUL", "fr": "fr/XUL", "it": "it/XUL", "ja": "ja/XUL", "ko": "ko/XUL", "pl": "pl/XUL", "pt": "pt/XUL", "ru": "ru/XUL", "zh-cn": "cn/XUL", "zh-tw": "zh_tw/XUL" } ) }}

diff --git a/files/de/archive/mozilla/xul/method/geticon/index.html b/files/de/archive/mozilla/xul/method/geticon/index.html new file mode 100644 index 0000000000..cb0dd30447 --- /dev/null +++ b/files/de/archive/mozilla/xul/method/geticon/index.html @@ -0,0 +1,15 @@ +--- +title: getIcon +slug: Archive/Mozilla/XUL/Method/getIcon +translation_of: Archive/Mozilla/XUL/Method/getIcon +--- +
+ « XUL-Referenz Startseite
+
+
+ getIcon( aTab )
+
+ Return type: string
+
+ Returns the URL of the specified tab's favicon. If aTab is null, the current tab's icon is returned. See setIcon to set the icon.
+
diff --git a/files/de/archive/mozilla/xul/method/gettabforbrowser/index.html b/files/de/archive/mozilla/xul/method/gettabforbrowser/index.html new file mode 100644 index 0000000000..bc48db12b9 --- /dev/null +++ b/files/de/archive/mozilla/xul/method/gettabforbrowser/index.html @@ -0,0 +1,15 @@ +--- +title: getTabForBrowser +slug: Archive/Mozilla/XUL/Method/getTabForBrowser +translation_of: Archive/Mozilla/XUL/Method/getTabForBrowser +--- +
+ « XUL-Referenz Startseite
+
+
+ getTabForBrowser( browser )
+
+ Return type: tab
+
+ Returns the XUL tab which contains the specified browser.
+
diff --git a/files/de/archive/mozilla/xul/method/index.html b/files/de/archive/mozilla/xul/method/index.html new file mode 100644 index 0000000000..934c525318 --- /dev/null +++ b/files/de/archive/mozilla/xul/method/index.html @@ -0,0 +1,14 @@ +--- +title: Methoden +slug: Archive/Mozilla/XUL/Method +tags: + - XUL Methoden + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Method +--- +

« XUL-Referenz Startseite

+ +

Verwandte DOM-Element Methoden

+ diff --git a/files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html b/files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html new file mode 100644 index 0000000000..e48c15eade --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html @@ -0,0 +1,99 @@ +--- +title: Adding menus and submenus +slug: Archive/Mozilla/XUL/School_tutorial/Adding_menus_and_submenus +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_menus_and_submenus +--- +

{{ PreviousNext("XUL_School/Setting_Up_a_Development_Environment", "XUL_School/Adding_Toolbars_and_Toolbar_Buttons") }}

+

The Hello World example in the previous sections shows the two most common ways to add menus. In this section we'll look into more specialized menus and what you can do with them.

+

Adding a New Menu

+

We already saw how to add menus in overlays and, as you may have imagined, you can nest submenus as deep as you want. You should avoid having deep menus or too many options, since they are confusing for most users.

+

If your extension requires custom XUL windows, you may also need to have menus on those windows. You can do this with a menubar. The menubar element should be a child of a toolbox element because it is treated like another toolbar on systems other than Mac OS X.

+
+

Mac OS X treats menus in a very different way than other systems. If your extension involves menus in any way, you should test it on Mac OS X to make sure everything works adequately.

+
+

The toolbox should be positioned near the top of the XUL document, and the code should be similar to this:

+
<toolbox>
+  <menubar id="xulschoolhello-menubar">
+    <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;">
+      <menupopup>
+        <menuitem label="&xulschoolhello.greet.short.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" />
+        <menuitem label="&xulschoolhello.greet.medium.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" />
+        <menuitem label="&xulschoolhello.greet.long.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" />
+        <menuseparator />
+        <menuitem label="&xulschoolhello.greet.custom.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" />
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+

This code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting. The separator is usually displayed as a horizontal line that creates a logical division between different types of menuitem elements, keeping everything more organized.

+

A menubar can hold one or more menu elements. Menus require a menupopup element as a container for its children, which are usually menuitem elements, but can also be menuseparator, or menu in order to have multiple nesting levels:

+
<toolbox>
+ <menubar id="xulschoolhello-menubar">
+    <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;">
+      <menupopup>
+        <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingSizes.label;">
+          <menupopup>
+            <menuitem label="&xulschoolhello.greet.short.label;"
+              oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" />
+            <menuitem label="&xulschoolhello.greet.medium.label;"
+              oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" />
+            <menuitem label="&xulschoolhello.greet.long.label;"
+              oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" />
+          </menupopup>
+        </menu>
+        <menuitem label="&xulschoolhello.greet.custom.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" />
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+

In this case we grouped the 3 greeting items into a submenu. It doesn't make much sense to do that in this case because we end up with only two menu items, one of them being a menu with 3 child items.

+

You can also have menus that are filled dynamically. Instead of setting the menupopup directly in the XUL, you can use the onpopupshowing event to fill the children when the popup is about to be displayed. DOM functions like createElement and appendChild can be used to accomplish this.

+
+

If you have nothing to show on a menu, you should follow the standard used in Firefox: show a single disabled item with an "(Empty)" label.

+

If filling your menu takes a noticeable amount of time, you should not make Firefox (and your users) wait for it to fill up before displaying anything. It's best to show an item with a throbber image (see chrome://global/skin/icons/loading_16.png) so the user knows there's something going on, and asynchronously fill its contents. We'll look into some asynchronous techniques further ahead in the tutorial.

+
+

Adding Elements to Existing Menus

+

Just as explained in the previous sections, the best place to overlay your extension menu is inside the Tools menu. That is, unless there's a place inside the menu structure where your extension menus make more sense. If you're overlaying the Tools menu, your overlay code should have something like this:

+
<menupopup id="menu_ToolsPopup">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertafter="javascriptConsole,devToolsSeparator">
+    <menupopup>
+      <!-- Your menuitem goes here. -->
+    </menupopup>
+  </menu>
+</menupopup>
+

Now let's look at some specialized types of menu items.

+ +

Checkbox Menu Items

+

You can make a menuitem "checkable" to allow the user to enable/disable options using the menu. We use two attributes for this: type and checked. The type attribute must be set to "checkbox". You can set the checked attribute to "true" to check it by default.

+

The item's checked state changes when the user clicks on it. An example of one such item is the View > Status Bar item in the main Firefox menu.

+

Radio Menu Items

+

If you need to have a set of menuitem elements where only one of them has to be checked at any given moment, you should set the type to "radio". The name attribute is used to identify the items that belong to the radio group.

+
<menupopup oncommand="XULSchoolChrome.HW.GreetingDialog.greeting(event);">
+  <menuitem type="radio" name="xulschoolhello-greeting-radio"
+    label="&xulschoolhello.greet.short.label;" checked="true" />
+  <menuitem type="radio" name="xulschoolhello-greeting-radio"
+    label="&xulschoolhello.greet.medium.label;" />
+  <menuitem type="radio" name="xulschoolhello-greeting-radio"
+    label="&xulschoolhello.greet.long.label;" />
+</menupopup>
+

This is a modified version of the 3 greeting menus. It is now implemented as a radio menu where you pick one of the 3 available choices. The first one is checked by default. The oncommand attribute is set on the menupopup to avoid code duplication, since now the 3 items call the same function.

+

Another example of a menu like this is the View > Sidebars menu. Only one sidebar is visible at any given moment, and you can pick from several.

+ +

To add an icon to a menu or menuitem, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the image attribute or the list-style-image CSS property. Menu icons are typically 16px by 16px.

+ +

As mentioned earlier, menus are very different on Mac OS X. This is because menus on Mac are located in a single menu bar which is controlled by the operating system, as opposed to menus in other systems, which are entirely controlled by Firefox. Mac OS X also has menu standards, such as the positioning of certain items that are not used in other systems. Here's a list of the known issues we've run into when handling menus on Mac:

+ +

{{ PreviousNext("XUL_School/Setting_Up_a_Development_Environment", "XUL_School/Adding_Toolbars_and_Toolbar_Buttons") }}

+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html b/files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html new file mode 100644 index 0000000000..cda64ab5a8 --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html @@ -0,0 +1,454 @@ +--- +title: Die Grundlagen einer Erweiterung +slug: Archive/Mozilla/XUL/School_tutorial/Die_Grundlagen_einer_Erweiterung +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension +--- +

{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}

+ +

Die install.rdf Datei

+ +

In der letzten Lektion haben wir uns den Inhalt der Hello World Erweiterung angesehen.Jetzt werfen wir einen Blick in diese Dateien und den Code, beginnen wir mit der install.rdf Datei. Sie können diese mit jedem Texteditor öffnen.

+ +

Die Datei ist in einem speziellen Dialekt von XML, RDF genannt formatiert. RDF wird eingesetzt als ein zentraler Speichermechanismus für Forefox, aber es ist jetzt durch ein einfacheres Datenbanksystem ersetzt worden. Wir werden später in diesem Tutorial beide Speichersystem besprechen.

+ +

Nehmen wir jetzt einen genaueren Blick auf die wichtigen Teile der Datei.

+ +
+
+
<em:id>helloworld@xulschool.com</em:id>
+
+
+ +

Dies ist der eindeutige Bezeichner für die Erweiterung. Firefox benötigt diesen für die Unterscheidung eurer Erweiterung von anderen Erweiterungen, aufgrunddessen ist es erforderlich das Sie eine ID haben die eindeutig ist.

+ +

Es gibt zwei akzeptierte Standards für Add-on ID`s. Eine ist das E-Mail ähnliche Format in dem Hello World Beispiel, dieses sollte folgendermaßen aufgebaut sein <project-name>@<yourdomain>. Die andere standard Vorgehensweise ist die Verwendung eines erzeugten UUID-Strings, welcher sehr unwahrscheinlich duppliziert ist. UNIX-basierte Systeme haben ein Kommandozeilenprogramm mit dem Namen uuidgen das diese UUID`S erzeugt. Auch gibt es herunterladbare Anwendungen für alle Plattformen die diese gnerieren. Die umschließenden Klammern sind nur ein Teil der Notation und hierbei handelt es sich nur um die gängige Praxis. Solange Ihre ID etwas eindeutiges hat, ist es OK diese in irgendeiner Form zu verwenden.

+ +
+
+
<em:name>XUL School Hello World</em:name>
+<em:description>Welcome to XUL School!</em:description>
+<em:version>0.1</em:version>
+<em:creator>Appcoast</em:creator>
+<em:homepageURL>https://developer.mozilla.org/en-US/docs/XUL_School</em:homepageURL>
+ +

Dies sind die Informationen die angezeigt werden bevor und nachdem die Erweiterung installiert ist, die Sie im Add-on Manager sehen können. Es können viele weitere Tags für Beteiligte und Übersetzer hinzugefügt werden. Die vollständige Spezifikation der install.rdf Datei beinhaltet alle Details.

+ +

Seit Erweiterungen in mehrere Sprachen übersetzt werden können, ist es oft notwendig die Erweiterungsbeschreibung zu übersetzen, oder sogar deren Namen. Eine lokal begrenzte Beschreibung und Name kann mit dem folgenden Code hinzugefügt werden.

+
+
+ +
+
+
<em:localized>
+  <Description>
+    <em:locale>es-ES</em:locale>
+    <em:name>XUL School Hola Mundo</em:name>
+    <em:description>Bienvenido a XUL School!</em:description>
+  </Description>
+</em:localized>
+
+
+ +

Der es-Es lokale String bedeutet das dies die spanische (es) lokalisierung für Spanien (ES) ist. Sie können soviele <em:localized> Sektionen hinzufügen wie Sie benötigen. Für Friefox 2, ist die lokaliesierungs Datei etwas komplizierter. Wir werden im weiteren die lokalisierung in diesem Kapitel besprechen.

+ +
+
+
<em:type>2</em:type>
+
+
+ +

Dies bestimmt, dass das Add-on als eine Erweiterung installiert wird. Sie können die verschieden möglichen Typen in der install.rdf Spezifikation nachlesen.

+ +
+
+
<em:targetApplication>
+  <Description>
+    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+    <em:minVersion>4.0</em:minVersion>
+    <em:maxVersion>10.*</em:maxVersion>
+  </Description>
+</em:targetApplication>
+
+
+
+ +

Dieser Knoten spezifiziert die Zielanwendung und die Zielversion für die Erweiterung, in der Regel Firefox von Version 4 bis zu Version 10. Die UUID ist die eindeutige ID von Firefox. Ander Mozilla und Mozillabasierte Anwendenungen wie z.B. Thunderbirf und Seamonkey besitzen ihre eigene. Es ist möglich eine Erweiterung zu besitzen die auf mehreren Anwendungen und Versionen arbeitet. Als Beispiel , wenn Sie eine Firefox-Erweiterung entwickeln, wird es in der Regel wenig Aufwand erfordern diese zu SeaMonkey zu portieren, welches ähnliche Features und Benutzeroberflächen besitzt.

+ +

Die min und max Version Angabe spezifiziert den Versionbereich in dem die Erweiterung installiert werden kann. Hier gibt es mehr Informationen über das Versionsformat. Wenn die Anwendung nicht mit dem Versionsbereich übereinstimmt, wird es Ihnen nicht erlaubt sein die Anwendung zu installieren, oder die Erweiterung wird mit einem gesetzten deaktiviert Status installiert. Benutzer können Versionsüberprüfungen über die Einstellungen deaktivieren, oder durch die Installation von Add-on`s wie den Add-on Compatibility Reporter. Mit Anfang des Firefox 11, werden Add-on`s standardmäßig als kompatiel betrachtet und Firefox wird den Versionsbereich weitesgehend ignorieren. Das Testen Ihrer Add-on`s auf allen Firefoxversionen ist immer empfehlenswert.

+ +

Diese Informationen werden von Firefox und anderen Mozillaanwendungen benötigt um ein Add-on zu installieren. Jeder Fehler oder fehlende Informationen werden den Installationsprozess zum Scheitern bringen, oder die Erweiterung wird mit einem gesetzten deaktvitiert Status installiert.

+ +

The chrome.manifest File

+ +
+

Chrome is the set of user interface elements of the application window that are outside of a window's content area. Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.

+
+ +

Auszug aus der Chrome Registration.

+ +

Mit anderen Worten, Chrome ist alles was Sie im Firefox sehen. Alle Firefoxfenster können betrachtet werden als Zusammensetzung zweier Teilbereiche: (1) Chrome und (2) ein möglicher Inhaltsbereich, wie das das in Firefox die Anzeige von Webseiten übernimmt. Fenster wie das Downloadfenster sind ausschließlich Chrome. Der Großteil des Programmcodes einer Erweiterung liegt im Chromeordner, wie bei dem Hello World Beispiel.

+ +

Wie wir in der Ordnerstruktur der entpackten Erweiterung gesehen haben, Chrome ist zusammengesetzt aus drei Teilbereichen: content, locale und skin. Diese drei sind notwendig für die meisten Erweiterungen. Wenn wir die chrome.manifest-Datei erneut öffnen (nochmals jeder Texteditor kann hierfür verwendet werden), werden wir diese drei angesprochenen Teilbereiche erkennen können.

+ +
+
+
content   xulschoolhello              content/
+skin      xulschoolhello  classic/1.0 skin/
+locale    xulschoolhello  en-US       locale/en-US/
+
+
+
+ +

Die chrome.manifest Datei lässt Firefox wissen, wo es nach den Chromedateien zu suchen hat. Der Text ist formatiert so das er dem Aussehen einer Tabelle gleicht, aber dies ist nicht notwendig. Der Parser ignoriert aufeinanderfolgende Leerzeichen.

+ +

Das erste Wort in einer Zeile teilt Firefox mit, was angegeben ist (content, skin, locale, oder weiter Angaben, die später erwähnt werden). Das zweite ist der Paketname, was wir demnächst erklären werden.

+ +

Darstellungs und lokale Packete besitzen einen dritten Wert, um zu spezifizieren welche lokale oder welche Darstellung sie erweitern. Es können mehrere Darstellungs und lokale Einträge für unterschiedliche Darstellung und lokalisierungs Variablen eingetragen werden. Der häufigste Fall ist es einen Darstellungeintrag für die gloabe Darstellung zu haben , classic/1.0, und mehrere lokale Einträge, einen für jede Übersetzung. Am Ende wird eine Ortsvariable spezifizerit.

+ +

Es gibt einige zusätzliche Optionen, die in die Einträge der chrome.manifest Datei eingefügt werden können. Diese sind auf der Chrome Registration Seite dokumentiert. Beachtenswert ist, wir können Einträge erstellen, die Betriebssystem spezifisch sind. Dies ist wichtig, weil das Aussehen des Browsers ist sehr unterschiedlich für jedes Betriebssystem. Wenn es notwendig ist, dass Ihre Erweiterung auf verschieden Systemen unterschiedlich aussieht, könnten wir das Manifest so anpassen, dass es aussieht wie hier:

+ +
+
+
content   xulschoolhello              content/
+skin      xulschoolhello  classic/1.0 skin/unix/
+skin      xulschoolhello  classic/1.0 skin/mac/ os=Darwin
+skin      xulschoolhello  classic/1.0 skin/win/ os=WinNT
+locale    xulschoolhello  en-US       locale/en-US/
+
+
+
+ +

Über diesen Weg können wir unterschiedliche Darstellungen für Windows, Mac OS X und Linux (plus anderer unix-ähnlichen Systemen) haben, die jede von ihnen in einer seperaten Ordnerstruktur definiert ist. Seit die meisten anderen System Unix-basiert sind, ist die "unix" Darstellung der Standard ohne weitere Marker.

+ +

Chrome

+ +

Wie zuvor angesprochen Chrome besteht aus 3 Teilbereichen: content, locale und skin. Der content-Bereich ist der wichtigste Bereich, beinhaltet die Benutzerschnittstelle (XUL) und Skriptdateien (JA). Der Darstellungsbereich beinhaltet die Dateien die das Meiste des Aussehen und Verhalten der UI (mit Einsatz von CSS und Bildern, wie bei Webseiten) definieren. Abschließend enthält der locale Bereich den gesamten in der Erweiterung verwendeten Text, in DTD und die Einstellungsdateien. Diese Aufteilung erlaubt es anderenen Entwicklern Themes zu entwickeln die die Darstellung ersetzen und Übersetzer für andere Sprachen, all das ohne das eine Änderung der Erweiterung oder des Programmcodes notwendig wäre. Dies gibt Firefox Erweiterungen eine großartige Flexibiltät.

+ +

Chrome Dateien werden über das Chrome-Protokoll zugewiesen. So sieht eine chrome URI aus:

+ +
+
+
chrome://packagename/section/path/to/file
+ +

Wenn ich beispielsweise Zugriff auf die Datei browserOverlay.xul haben möchte, wäre die Chrome URI chrome://xulschoolhello/content/browserOverlay.xul.

+
+
+ +

Wenn Sie zu viele Dateien im content Bereich habe und Sie diese in Subordner organisieren wollen, gibt es nichts was Sie im chrome.manifest ändern müssen, alles was Sie benötigen ist den richtigen Pfad nach content in die URI hinzuzufügen.

+ +

Darstellungs- und Regions-Dateien arbeiten in der selben Art und Weise, und Sie müssen keine Darstellungs- oder Regions -Namen festleggen. Also um auf die DTD-Datei in der Hello Wolrd Erweiterung zuzugreifen, ist der Chromepfad chrome://xulschoolhello/locale/browserOverlay.dtd. Firefox was anschließend nach welcher Region es abrufen muss.

+ +

Hier ist ein interesantes Experiment. Öffne ein neues Firefox Tab, tippe chrome://mozapps/content/downloads/downloads.xul in deine Adressleiste und drücke Enter. Überrascht? Sie haben soeben das Downloadfenster in einem Firefoxtab geöffnet! Sie können auf jede Chromedatei zugreifen indem Sie die URI in die Addressleite eintippen. Dies kann nützlich werden, wenn du Skriptdatei untersuchen möchtest, die ein Teil von Firefox, anderen Erweiterungen oder deine eigene sind. Die meisten dieser Dateien werden als Textdatei geöffnet, mit der Ausnahme von XUL-Dateien, diese werden ausgeführt und so dargestellt wie Sie diese normalerweise in einem Fenster sehen würden.

+ +

Content

+ +

Es gibt 2 Dateien im content Verzeichnis. Sehen wir uns zuerst die XUL-Datei an.

+ +

Bei XUL-Dateien handelt es sich um XML-Dateien, die Benutzeroberflächenelemente in Firefox und Firefoxerweiterungen definieren. XUL wurde von HTML inspiriert, von daher werden Sie viele Ähnlichkeiten zwischen den beiden feststellen. Wie auch immer, XUL ist auch eine Verbesserung gegenüber HTML, die aus vielen Fehlern gelernt hat, die bei der Entwickliung von HTML gemacht wurden. XUL erlaubt Ihnen reichere und interaktivere Oberflächen zu erstellen, als mit HTML, oder zumindest macht XUL es einfacher.

+ +

XUL-Dateien defineren in der Regel eine von zwei Dingen: Fenster oder Overlays. Die Datei die Sie zuvor geöffnet haben, downloads.xul, beinhaltet den Programmcode der das Downloadfenster definiert. Die XUL-Datei die in der Hello World Erweiterung eingeschlossen ist, ist eine Overlay. Ein Overlay erweitert ein vorhandes Fenster, fügt diesem neue Elemente hinzu oder ersetzt einige der Elemente in ihm. Die Zeile die wir in der chrome.manifest Datei übersprungen haben gibt an das es sich bei dieser XUL-Datei um ein Overlay für das Browserhauptfenster handelt:

+ +
+
+
overlay chrome://browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul
+ +

Durch diese Zeile weiß Firefox, dass es die Inhalte aus browserOverlay.xul verwenden muss und diese über das Browserhauptfenster, browser.xul legen muss. Sie können für jedes Fenster oder Dialog in Firefox ein Overlay festlegen, aber ein Overlay über das Browserhauptfenster zu legen ist der mit Abstand häufigste Fall.

+ +

Jetzt nehme wir einen Blick auf unsere XUL-Datei. Wir werden die ersten paar Zeilen überspringen, weil diese sich auf die Darstellung und die Region beziehen, diese werden wir im späteren behandeln.

+
+
+ +
+
+
<overlay id="xulschoolhello-browser-overlay"  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+
+ +

Das Wurzelelement in dieser Datei ist ein Overlay. Andere XUL-Dokumente nutzen den window oder dialog Tag. Das Element besitzt einie eindeutige ID, welche Sie bei den meisten Element in Ihrer XUL vergeben sollten. Das zweite Attribut ist der Namensraum, diesen sollten Sie immer in Ihrem XUL-Wurzelelment definieren. Es sagt aus, dass dieser Knoten und alle Kindknotten XUL-Element sind. Sie brauchen nur änderungen an der Namensraum deklaration vornehmen, wenn Sie verschiedene Arten eines Inhalts in dem gleichen Dokument kombinieren, wie z.B. XUL mit HTML oder SVG.

+ +
+
+
You may have noticed the naming we use on several places, such as the id xulschoolhello-browser-overlay. This is the namespacing standard that we use to avoid conflicts with Firefox and other extensions, as well as making some development tasks easier. We namespace all ids and style classes in overlay elements because they will be mixed with other elements in the main browser window. If we used generic ids like container or input, they will likely conflict with ids used within Firefox, or with ids from other extension overlays. Using namespaces minimizes compatibility problems with other extensions. We use camel casing for file names, and all lower case with dashes for element ids and CSS style class names, but you're free to use your own system.
+
+
+ +
+
+
<script type="application/x-javascript"   src="chrome://xulschoolhello/content/browserOverlay.js" />
+
+
+ +

Wie in HTML, wird hierdurch eine JavaScript-Datei eingebunden. Sie können soviele Skriptelement in ein XUL-Dokumente einbinden wie Sie benötigen. Wir werden uns diesen Programmcode später noch ansehen.

+ +
+
+
You also probably noticed how we format our code, and wonder about the rules we follow. Our general rule on line length is not having lines longer than 80 characters. This feels very restrictive, specially with XML files, but the number was chosen to allow pretty much any text editor to handle these files easily. Even old command line editors work well with files that cut their lines at 80 characters. The tabulation is very straightforward: 2 blank space indents. We never use actual tab characters, with the exception of Makefiles, which will be covered later on. Most of our coding standards are based on Mozilla's or other known and used standards.
+
+
+ +

Wir werden etwas Programmcode übersprinder, der im Regionsbereich behandelt wird, um mit dem wichtigsten Bereich von content fortzufahren.

+ +
+
+
<menubar id="main-menubar">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</menubar>
+
+<vbox id="appmenuSecondaryPane">
+  <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertafter="appmenu_addons">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item-2"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</vbox>
+
+
+
+ +

Das ist der Code, der das Hello World-Menü dem Browserfenster hinzufügt.

+ +

Darin enthalten sind zwei ähnliche Codeblöcke, dass ist dadurch begründet das in modernen Versionen von Firefox, insbesondere unter Windows, ein einzelner Firefox Menübutton mit vereinfachten Menüoptionen, anstatt einer umfangreichen Menübar dargestellt wird. Der zweite Codeblock bezieht sich auf alle üblichen Buttonprozesse; der erste Codeblock bezieht sich auf alle anderen Prozesse. Setze den Hacken Menüleiste unter dem Optionsmenü im Menübutton, um die Anzeige des klassischen Menüs unter Windows und einigen Linuxdistributionen zu aktivieren.

+ +

Um diesen Code zu schreiben, benötigen wir etwas Wissen über den XUL-Code in browser.xul. Wir müssen wissen, dass die ID des rechten Fläche in dem undefinierten Menü appmenuSecondaryPane ist. Wir werden ein eigenes Menü hinzufügen und Firefox mitteilen dieses rechts nachdem Add-on-Element in die Fläche hinzuzufügen. Dies ist die Festlegung des Attributes:

+ +
+
+
insertafter="appmenu_addons"
+
+
+
+ +

appmenu_addons ist die ID des Menüelements, dass mit dem Add-on-Menü im Hauptmenü in verbindung steht. Wir werden später sehen wir die Dinge wie die ID von Browserelementen ermitteln können, aber jetzt sehen wir uns die Elemente aus denen sich das Hello World-Menü zusammensetzt.

+ +

Für das klassische Menü, fügen wir das Hello World-Menü rechts in das "Wurzelverzeichnis" der Menüs hinzu, so dass es sehr einfach zu finden ist, aber in der Praxis ist es nicht notwendig. Stellen Sie sich vor was passieren würde, wenn alle Erweiterungen ein Menü im oberen Menü hinzufügen würden; ein paar Erweiterungen zu haben würde es dann außen lassen wie die Kontrollanzeige eines Flugzeuges, voller Knöpfe und Schalter. Im Falle des zusammengesetzen Menüs, sind die Dinge aufgrund von zu wenigen Optionen etwas mehr kompliziert. Wenn dein Menüitem in den Webentwicklerbereich passt empfiehlt es sich es dort zu platzieren. Andererweise ist das Wurzelmenü möglicherweise der einzige sinnvolle Ort.

+ +

Ein empfehlenswerter Ort für Menüs in dem Klassikmenü ist unter dem Extrasmenü, von daher sollte der Code in etwa so aussehen:

+ +
+
+
<menupopup id="menu_ToolsPopup">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertbefore="devToolsEndSeparator">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</menupopup>
+
+
+
+ +

Wir legen das Menü über das tieferlegende in dem XUL-Baum, aber das spielt keine Rolle weil alles was wir benötigen ist die ID des Elements das wir Überblenden wollen. In diesem Fall ist dies das Menüpopup-Element das sich innerhalb des Extras. Dasinsertbefore Attribut teilt Firefox mit das Menü im unteren Bereich des Entwicklerextrasbereich hinzuzufügen, über den abschließenden Seperatoren. Wir werden im späteren des Tutorials über Menüs sprechen.

+ +

Nehmen wir jetzt einen Blick auf den  eigentlichen Code:

+ +
+
+
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"
+
+
+
+ +

Dieses Attribute beschreibt einen Eventhandler. . Das command event ist das am meisten genutzte in Firefox, da es mit den Hauptaktionen der meisten UI-Elemente kommuniziert. Der Nutzen der Attribute ist der JacaScript-Code der eine Funktion aufruft. Diese Funktion ist in er der JS-Datei definiert, das mit Skript-Tag eingebunden wird. Die JS-Funktion wird aufgerufen wenn der Benutzer auf einen Menüeintrag im Hello World-Menü aufruft. Alle Eventhandler definieren ein spezielles Objekt namens event, welches normalerweise ausreicht um ein Argument an die Funktion zu übergeben. Eventhandler werden im späteren genauer definiert.

+ +

Nun werfen wir einen Blick in die JavaScript-Datei und und sehen uns an wenn das Event ausgeführt wird.

+ +
+
+
/**
+ * XULSchoolChrome namespace.
+ */
+if ("undefined" == typeof(XULSchoolChrome)) {
+  var XULSchoolChrome = {};
+};
+
+
+ +

Der XULSchoolChrome Namensraum ist definiert. Alle Objekte und Variablen die wir i JavaScript definieren sind global, das bedeutet das Skripte in Firefox und andere Erweiterungen können diese sehen und mit Ihnen interagieren. Dies bedeudet also dass wenn wir ein Objekt MenuHandler definieren oder einige generische Namen, ist es wahrscheinlich das es mit einem extierenden Objekt in Konflikt steht. Was wir hier machen ist ein einzelnes globales Objekt zu definieren: XULSchoolChrome. Nun wissen dass alle unsere Objekte sind innerhalb dieses Objekts, welches unwahrscheinlich duplliziert oder überschrieben wird von anderen Erweiterungen.

+ +

Sie können hier mehr über den typeof operator erfahren. Wenn Sie nicht mit JavaScript oder der besonderen Syntax, ein Objekt mit {} zu intialisieren ist identisch mit es mit new Object() zu intialisieren.

+ +
+
+
/**
+ * Controls the browser overlay for the Hello World extension.
+ */
+XULSchoolChrome.BrowserOverlay = {
+
+
+ +

Sclussendlich ist BrowserOverlay unser Objekt. Ein Objekt in solcher langen und ausführlichen Art und Weise zu benennen und refernzieren kann sich am Anfang unkomfirtabel anfühlen, aber es ist den Aufwand wert.

+ +
+
+
We use Javadoc style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.
+
+
+ +
+
+
sayHello : function(aEvent) {
+  let stringBundle = document.getElementById("xulschoolhello-string-bundle");
+  let message = stringBundle.getString("xulschoolhello.greeting.label");
+
+  window.alert(message);
+}
+
+
+ +

Und Schlussendlich ist dass unsere Funktionsdeklaration. Drei Zeilen sind alles was wir benötigen. Die erste Zeile in dem Body der Funktion deklariert eine Variable die das stringbundle-Element beinhaltet, das im Overlay definiert ist. Die Variable ist deklariert durch die Verwendung von let, dass var ähnlich ist aber einen enger begrenzten Bereich besitzt. Hier können Sie mehr über die let deklaration nachlesen.

+ +

WIe auch im regulären JS, können wir das DOM (Document Object Model) nutzen um dass XUL-Dokument zu manipulieren.Als erstes bekommen wir eine referenze auf das stringbundle-Element  in dem Dokument. Dies ist ein spezielles Element das es uns erlaubt beschränkte Strings dynamisch zu erhalten, nur durch die bereitstellung eines "key`s" der Den String identifiziert. Das macht die zweite Zeile. Wir rufen die getString Methode des bundle-Elements udn bekommen die begrenzte Meldung angeziegt. Anschließende rufen wir die window.alert-Funktion auf, wie wir das auch in einem HTML-Dokument machen würden.

+ +

Locale

+ +

Es gibt zwei Arten von locale-Dateien: DTD und Einstellungen, und in diesem Beispiel werden wir beide benutzen. DTD ist der effizenteste Weg um Text in XUL anzuzeigen, von daher sollten Sie es benutzen wann immer es möglich ist. Es ist etwas unflexibel, so kann es nicht für dynamisch erzeugten Text verwendet werden, folglich gibt es eine Notwendigkeit um auf regionale Strings zuzugreifen.

+ +

Werfen wir einen Blick zurück auf den Menücode, dort haben Sie unter Umständen einge Attribute wie diese bemerkt:

+ +
+
+
label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;"
+
+
+ +

Diese Attribute definieren den Text den Sie in den Menüs sehen,  es sind String-keys die in unserer DTD-Datei definiert sind, browserOverlay.dtd. Die DTD-Datei wurd mit folgendem Code in die XUL-Datei eingefügt:

+ +
+
+
<!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" >
+
+
+ +

Und in der DTD-Datei können Sie die Zuordnung von Keys und regionalen Strings sehen:

+ +
+
+
<!ENTITY xulschoolhello.hello.label            "Hello World!">
+<!ENTITY xulschoolhello.helloMenu.accesskey    "l">
+<!ENTITY xulschoolhello.helloItem.accesskey    "H">
+
+
+ +

Beachte das Sie in den XUL-Dateien den String mit & und ; umschließen, wohingegen sie in eriner DTD-Datei nur den Key spezifizieren. Sie erhalten womöglich sonderbare Fehlermeldungen oder Zuordnungen wenn Sie dass nicht beachten.

+ +

Zugangs Key`s sind Shortcuts die es Ihnen erlauben, nur mit der Tastatur schnell durch ein Menü zu navigieren. Sie sind auch der einzige Weg durch die Menüs zu navigieren für Menschen die eine Barrierefreiheit benötigen, durch teilweise oder vollkommene Blindheit oder durch körperliche Eingeschränktheit die, dass nutzen einer Maus sehr schwierig oder unmöglich machen. Sie können die Zugangs-Key`s unter Windows leicht erkennen, weil der Buchstabe der mit dem Zugangs-Key in Verbindung steht unterstrichen ist, wie in der folgenden Abbildung.

+ +
+

+
+ +

DIe meisten Benutzeroberflächen Schaltflächen besitzen ein accesskey Atribut, und Sie sollten es benutzen. Der Wert eines Zugangs-Key`s ist lokal beschränkt, weil er einem Buchstaben im Labeltext entsprechen soll. Sie sollten darauf achten es zu vermeiden Zugangs-Key´s zu wiederholen. Als Beispiel, innerhalb eines Menüs oder Untermenüs sollten Zugangs-Key`s nicht wiederholt werden. In einem Fenster müssen Sie noch vorsichtiger sein bei der Auswahl von Zugang-Key`s weil es dort normalerweise eine größere Anzahl an Schaltflächen gibt. Besonders vorsichtig müssen Sie sein wenn Sie Zugangs-Key`s für eine Overlay auswahlen. In unserem Fall, können wir den Buchstaben "H" nicht als einen Zugangs-Key im Hauptmenü verwenden, weil dieser sich mit dem Zugangs-Key den Hilfemenüs überschneiden würde. Das selbe gilt für das "W" und das Fenstermenü unter Mac OS. Von daher haben wir den Buchstaben "l" zugewiesen.

+ +

DTD-Strings werden aufgelöst und gesetzt wenn das Dokument lädt. Wenn Sie den label-Attribute Wert für das Hello World-Menü mit hilfe von DOM abfragen, erhalten Sie den begrenzten String und nicht den String-Key. Sie können nicht dynamischen den Wert von Attributen mit einem neuen DTD-Schlüssel ändern, Sie müssen den neuen Wert direkt setzen.

+ +
+
+
let helloItem = document.getElementById("xulschoolhello-hello-menu-item");
+
+// The alert will say "Hello World!"
+alert(helloItem.getAttribute("label"));
+// Wrong
+helloItem.setAttribute("label", "&xulschoolhello.hello2.label;");
+// Better
+helloItem.setAttribute("label", "Alternate message");
+// Right!
+helloItem.setAttribute("label", someStringBundle.getString("xulschoolhello.hello2.label"));
+
+
+ +

Das ist der Grund warum DTD-String keine Lösung für alle beschränkten Fälle sind, and der Grund warum wir oft Stringpakete in XUL-Dateien einbinden müssen.

+ +
+
+
<stringbundleset id="stringbundleset">
+  <stringbundle id="xulschoolhello-string-bundle"
+    src="chrome://xulschoolhello/locale/browserOverlay.properties" />
+</stringbundleset>
+
+
+ +

Das stringbundleset-Element ist nur ein Container für stringbundle-Elemente. Hiervon sollte eines pro Dokument geben, dies ist auch der Grund warum wir das stringbundleset in der browser.xul überschreiben, daher die sehr generische ID.  Wir fügen keine insertbefore oder insertafter Attribute ein weil die Reihenfolge der Stringpakete keine Rolle spielt. Das Element ist vollständig unsichtbar. Wenn Sie keine Ordnungsattribute in ein Overlay-Element einfügen, wird Firefox Ihr Element als letztes Kindelement des Elternelements betrachten.

+ +

Alles was Sie für das Stringpaket benötigen ist eine ID (um später auf das Element zugreifen zu können und den Chrome-Pfad der Einstellungsdatei. Und natürlich die Einstellungsdatei:

+ +
xulshoolhello.greeting.label = Hi! How are you?
+ +

Die Leerzeichen vor und nach dem Gleichheitszeichen werden ignoriert. Genauso wie in der install.rdf, Kommentare können durch das "#" Zeichen am Anfang einer zeile hinzugefügt werden. Leere Zeilen werden ebenso ignoriert.

+ +

Sei werden oft einen dynamischen Inhalt als Teil eines begrenzten Strings einbinden wollen, wie wenn Sie den Nutzer über den Status der Erweiterung informieren wollen. Als Beispiel: "Es wurden 5 der Suchanfrage entprechende Wörter gefunden". Ihre erste Idee ist möglicherweise einfach Strings zu verketten und eine "Found" Eigenschaft und eine weitere "words matching..." Eigenschaft zu verwenden. Dies ist keine Gute Idee. Sie behindert nur in einem großen Maße die Arbeit von Übersetzern und Grammatikregeln der verschieden Sprachen ändern möglicherweise den Aufbau des Satzes. Aus diesem Grund ist es besser Parameter in den Eienschaften zu verwenden.

+ +
+
+
xulshoolhello.search.label = Found %S words matching the search query!
+
+
+ +

Wenn Sie den getFormattedString anstatt des getString verwenden um auf den begrenzten String zuzugreifen. Glücklicherweise müssen wir durch dass nicht mehrere Eigenschaften anlegen, hierdurch wird das Leben für Übersetzer einfacher. Sie können mehr über das in dem Text Formatting Bereich des XUL Tutorial nachlesen. Werfen Sie auch einen Blick auf die Plurals and Localization Artikel, die die Lokalisierungsfunktionen behandeln und es Ihnen weiterhin erlauben das letzte Beispiel zu verbessern, um verschiedene Arten von Pluralformen zu verarbeiten die auch Sprachabhängig sind.

+ +

Skin

+ +

XUL zu gestalten ist dem gestalten von HTML sehr ähnlich. Wir werden uns einige Unterschiede ansehen wenn wir das XUL-Box-Modell und andere fortgeschritten Themen. Es gibt nicht viel was Sie in bei einem minimalen Menü und einer einfachen Warnmeldung gestalten können, da die Hello World ERweiterung nur eine leere CSS-Datei und eine vorgeschriebene globale Skin-Datei beinhaltet:

+ +
+
+
<?xml-stylesheet type="text/css" href="chrome://global/skin/"  ?>
+<?xml-stylesheet type="text/css"
+  href="chrome://xulschoolhello/skin/browserOverlay.css"  ?>
+
+
+ +

Die globale Skin-CSS-Datei enthält alle standard Styles für alle XUL-Elmente und Fenster. Wenn Sie vergessen diese Datei in ein XUL-Fensterer einzubinden, führt das normalerweise zu intersanten und oft ungewohlten Ergebnissen. In unserem Fall müssen wir diese nicht einbinden, seit wir die Hauptbrowser-XUL-Datei überblenden und diese bindet bereits diese globale CSS-Datei ein. Auf jeden Fall ist es besser sie immer einzubinden. Auf diesem Weg ist es schwieriger Fehler durch ein nicht einbinden zu vermeiden. Sie können den Chrome-Pfad in der Adressleiste eingeben und überprüfen wenn Sie sich unsicher sind.

+ +

Dies behandelt alle Dateien der Hello World-Erweiterung. Nun sollten Sie eine Idee haben welche in die Erweiterungsentwicklung involviert sind, nun steigen wir direkt ein und stzen eine Eintwicklungumgebung auf. Aber als erstes eine kleine Übung.

+ +

This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.

+ +

Übung

+ +

Mache die folgenden Änderungen in der Beispielerweiterung:

+ + + +

Packe die XPI neu. Führe unter Linux oder Mac OS X folgendes Kommando innerhalb des Wurzelverzeichnisses der Erweiterung aus:

+ +
zip -r ../xulschoolhello2.xpi *
+
+ +

Verwende unter Windows ein ZIP-Tool um alle Datei und Unterverzeichnisse innerhalb des Wurzelverzeichnisses der Erweiterung zu packen und setze die Dateierweiterung der Datei auf .xpi.

+ +

Installiere die XPI neu. Sie können hierzu die XPI-Datei hierzu einfach in den Browser ziehen und diese wird lokal installiert.

+ +

Teste es und überprüfe ob die Änderungen funktionieren. Wenn Sie auf Probleme während der Installation stoßen, ist es wahrscheinlich, dass Sie die XPI-Struktur nicht korrekt nachgebildet haben, möglicherweise durch das hinzufügen unnötiger Ordner.

+ +
Note: Packaging an extension is really just creating a ZIP archive of the contents of the main folder, then changing the filename extension to .XPI. Do not zip the containing folder, just its contents. The content folder, chrome.manifest, install.rdf, and other files and directories should be at the root level of your archive. If you zip the containing folder, your extension will not load.
+ +

Beachte, dass das Extramenü standardmäßig in Firefox 4und höher, unter Windows und einige Linuxdistributionen versteckt ist. Setze einen Hacken im Optionsmenü unter dem Firefoxmenüknopf um es zu aktivieren.

+ +

Nachdem Sie fertig sind, können Sie sich diese Refernzlösung ansehen: Hello World 2.

+ +

+ +

{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html b/files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html new file mode 100644 index 0000000000..1f4ea0ffbb --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html @@ -0,0 +1,161 @@ +--- +title: Eine Entwicklungsumgebung einrichten +slug: >- + Archive/Mozilla/XUL/School_tutorial/Eine_Entwicklungsumgebung_einrichten_Environment +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Setting_Up_a_Development_Environment +--- +

{{ PreviousNext("XUL_School/The_Essentials_of_an_Extension", "XUL_School/Adding_menus_and_submenus") }}

+

Eine Entwicklungsumgebung einrichten

+

Es gibt 3 Tools von denen wir denken das diese essentiell für eine effektive Add-on-Entwicklung sind (oder ehrlich gesagt für jede Art von Entwicklung): ein Quellcodeeditor, ein Versionskontrollsystem und eine Entwicklungsumgebung.

+

Im Bezug auf das Codeediting, es gibt keine offizelle Mozilla IDE. Mit anderen Worten, Erweiterungen benutzen die selben (oder ähnlichen) Sprachen die auch für die Webentwicklung genutzt werden, von daher könnnen die meisten Texteditoren und IDE`s eingesetzt werden. Die meisten XUL-Tools und Plugin`s die Sie Online finden werden sind lediglich Templates die die Ordnerstruktur füre das Projekt erzeugen, und das ist nicht viel Hilfe.

+

WIe empfehlen Komodo Edit. Es ist kostenlos, OpenSource und Cross-Platform-Unabhängig. Es basiert auf der Mozilla XULRunner Platform, von daher unterstützt einige der Besonderheiten in der Firefoxerweiterungsentwicklung. Komodo Edit bietet eine Autovercollständigung für XUL-Tags und Attribute und es unterstützt Mozilla`s CSS-Erweiterungen (CSS-Werte und Einstellungen beginnen mit "-moz"). Es besitzt ein Add-on System ähnlich dem im Firefox, und es gibt einige Komodo-Erweiterungen die zusätzliche Hilfe bei der Erweiterungsentwicklung bieten. Das ist mehr als die meisten andern Editoren bieten, von daher empfehlen wir Ihnen ihm eine Chance zu geben. Alle unsere Beispiel wurden mit Komodo Edit erstellt, also wenn Sie eine .kpf oder .komodoproject fi Datei in einem Beispieldownload sehen ist das eine Komodoprojektdatei.

+

+

Wir empfehlen Git und GitHub für die Versionskontrolle, aber jedes anständige Software-Configuration-Management System kann hier eingesetzt werden.

+

Um XPI-Dateien zu packen, nutzen wir make. Wir haben make gewählt weil dieses System von Mozilla genutzt wird um Firefox zu bauen und es ist für alle Betriebssysteme verfügbar. make ist das Standard Tool in den meisten UNIX-basierten Systemen. Es kann unter Mac OS X als Teil von des XCode Tool-Paketes installiert werden und unter Windows mit cygwin. In einer cygwin-Installation werden Sie explizit die make und zip utilities aus der langen Liste der Pakete auswählen müssen um diese herunterzuladen und installieren.

+

Sorgen Sie des weiteren dafür das make sich im ausführbaren Systempfad befindet. Nach der Einrichtung von make, sollten Sie in der Lage sein ein Kommandozeildenfenster zu öffnen, führen Sie "make-ver" aus, und Sie bekommen die installierte Version von make als Ausgabe.

+

Wir empfehlen Ihnen make auf Ihrem System einzurichten, da unsere Beispiele beinhalten alle notwendigen Dateien um die daraus entstehende XPI mit diesem Toolzu bauen und installieren. Es wird Ihnen einiges an Zeit für das packen ersparen. Oder Sie können ein vergleichbares System unter der Verwendung von Batch aufsetzen, machen Sie es wie auch immer Sie bevorzugen. Letztlich können Sie auch einfach jeden Zip oder Archivierungs Tool verwenden um den Inhalt des src Verzeichnisses zu komprimieren um ein identisches Ergebniss zu ereichen.

+

Build system

+

Beginnen wir mit dem Herunterladen des Projekts mit dem die zweite Version von Hello World aufgebaut wurde, aus der Übung der letzten Lektion

+

Hello World 2 Project.

+

Entpacken die Datei wohin Sie wollen. Innerhalb des HelloWorld2 Verzeichnisses weden Sie zwei Verzeichnisse sehen: bin und src. Das bin Verzeichnis sollte leer sein. Dort werden alle enstehenden build-Dateien erstellt und dort werden Sie die Erweiterungs XPI-Datei finden wenn sie erstellt wurde.

+

Öffnen Sie die Projektdatei (HelloWorld2.komodoproject) in the src Verzeichnis in Komodo Edit. In dem Projektreiter sollten Sie nun in der Lage sein die Verzeichnisstruktur innerhalbt des src-Verzeichnises sehen. Dies Struktur solle ihnen vertraut sein, da Sie beinahe identisch mit der ungepackten XPI von der vorherigen Lektion ist.

+

Die einzige bemwerkswerte Änderung ist eine Datei mit der Bezeichnung Makefile unter src. Das ist die Datei die make nutzt  um die XPI zu erstellen. Sie sollten sich etwas Zeit nehmen um diese zu lesen und zu verstehen., oder zumindest die Teile untersuchen die Sie ändern müssen um Ihr projekt zu beginnen. Die GNU Make Manual ist eine sehr gute Refernz um sich mit make und der Makefile-Datei vertraut zu machen.

+

In den meisten Fällen müssen Sie nur ein paar der ersten Zeilen in der Makefile-Datei ändern. Diese definieren den Erweiterungsnamen, die Erweiterungs ID (wie in install.rdf festgelegt) und der Name des profile-Verzeichnisses wohin die Erweiterung während der Entwicklung und des testens installiert wird. Mehr über das später.

+

Versuchen wir zuerst die XPI über die Kommandozeile zu erstellen. Öffnen Sie das Kommandozeilenprogramm in Ihrem System und naviergien Sie zum src Verzeichnis in Ihrem Projekt. Führen Sie folgenden Befehl aus:

+
+
+ 
make
+
+
+

Das ist es. Wenn alles gut läuft sollten Sie eine Ausgabe wie diese sehen:

+
+
+ 
Creating XPI file.
+  adding: install.rdf (deflated 50%)
+  adding: chrome.manifest (deflated 50%)
+  adding: content/browserOverlay.js (deflated 42%)
+  adding: content/browserOverlay.xul (deflated 69%)
+  adding: skin/browserOverlay.css (stored 0%)
+  adding: locale/en-US/browserOverlay.dtd (deflated 52%)
+  adding: locale/en-US/browserOverlay.properties (stored 0%)
+Creating XPI file. Done!
+
+Build finished successfully.
+
+
+
+

Wenn Sie das bin Verzeichnis untersuchen, sollten Sie die xulschoolhello2.xpi Datei sehen.

+

Wenn Sie make ausführen, werden Sie die letzte Zeilde des Erstellungsprozesses sehen. Das ist so weil make mitteilt das die Datei im bin Verzeichnis aktuell ist und es nichts zu machen gibt. Änderungen an der Quelldatei werden make dazu bringen die notwendigen Schritte erneut auszuführen um XPI erneut zu erstellen.

+

Sie können das bin Verzeichnis aufräumen indem Sie einfach den folgenden Befehl ausführen (nochmal, innerhalb des src Verzeichnises)
+  

+
+
+ 
make clean
+
+
+

Sie können diese Befehle auch in Komodo ausführen. Klicken Sie auf Tools > Befehl ausführen... In das "Ausführen" Textfeld sollten Sie das eingeben:

+
+
+ 
bash -c "make"
+
+
+

+

Oder ersetzen Sie "make" mit "make clean" für das aufräumen. Der "basc -c" Teil zwingt Komodo bash zu nutzen, welches aus einigen Gründen nicht als das Standard Kommandozeile gesetzt werden kann. Es ist nicht notwendig dies zu tun, aber es ist besser so das mit dem make-Befehl übereinstimmt den wir als nächstes sehen werden.

+

In em "Start in" Textfeld sollten Sie %p wählen (Verzeichnispfad des aktiven Projektes. Wenn Sie dieses Textfeld nicht sehen können dann klicken Sie auf den "More" Schalter. Sie besitzen auch die Möglichkeit den Befehl zu speichern, durch einen Klick auf das "Add to Toolbox" Auswahlfeld. Um die Toolbox zu sehen, klicke auf View > Tabs > Toolbox, über das Hauptmenü. Damit sollten Sie einen sehr einfachen Weg haben um Ihre XPI zu erstellen, indem Sie nur den Erstellungsbefehl Doppelklicken.

+

Wir können es sogar noch besser machen. Wenn Sie einmal Ihren Code testen und debuggen, werden Sie feststellen, dass das ständige erstellen und installieren einer XPI sehr ermüdend sein kann. Das ist der Gründ warum wir "make install" eingeführt haben. Dies funktioniert nur wenn die Erweiterung bereits in einem Firefoxprofil installiert ist. Wie in den vorgestellten Projekt, benötigen Sie die Add-on-ID und die gesetzte Profillokation die in der Makefile-Datei. Wir nutzen diese Informationen um den Installationspfad  von der Erweiterung  und überschreiben die installierten Dateien. Wenn Firefox geöffnet ist können Sie den "make install"-Befehl ausführen, Sie müssen Firefox neustarten um die Änderungen zu sehen. Es ist immernoch besser als die XPI andauernd neu zu installieren.

+

Möglicherweise möchten Sie die Profillokation in Ihrem Makefile-Datei ändern. . Um die Profilloaktion auf den richtigen Wert zu setzen, sollten Sie den Artikel support article on profiles auf der Mozilla Support Seite lesen. Auch werden wir später tiefer in dieses Thema eintauchen.

+

Um "make install" auf nicht WIndowssystemen einzusetzen, benötigen Sie einen extra Schritt. Der Installationsprozess benötigt eine Umgebungsvariable mit dem Namen OSTYPE, welche nicht exportiert wird. Lange Geschichte kurzer Sinn, über Kommandozeile müssen Sie folgendes ausführen:

+
+
+ 
export OSTYPE; make install
+
+
+

Und in Komodo sollten Sie fogenden Befehl eingeben:

+
+
+ 
bash -c "export OSTYPE; make install"
+
+
+

Der export-Befehl wird nicht korrekt funktionieren wenn Sie nicht "bach-c" verwenden.

+
+ The file Makefile specifies which profile folder the add-on will be reinstalled to. This is set in the profile_dir variable (set to "xulschool-dev" in this case). When creating a development profile for your add-on, make sure you choose an easy name for the profile folder, and set it in your Makefile in order to take advantage of the install command.
+

Building IDL files

+

Einige Erweiterungen setzen die Entwicklung von XPCOM-Komponeten voraus um gewisse fortgeschritten Funktionen hinzuzufügen. Es gibt eine Lektion die für XPCOM in diesem Tutorial vorgesehen ist, aber wie gehen kaum auf den Einflussdie es auf die Entwicklung von Erweiterungen hat ein. Sie können diesen Teil überspringen und es als Refernenz zu nutzen wenn Sie XPCOM in Ihrem Projekt benötigen.

+

XPCOM Schnittstellen werden mit IDL-Dateien definiert. Das sind Textdateien die Attribute definieren und Methoden in einem oder mehren Schnittstellen. Diese IDL-Dateien werden in Binarydateien kompiliert und werden in die Erweiterung als XPT-Dateien eingebunden.

+

Um eine IDL-Dateizu XPT zu komplieren, benötigen Sie ein Kommandozeilen Tool, xpidl. Dieses Tool ist im Mozilla Gecko SDK enthalen. Wenn Sie IDL`s kompilieren möchten, gehen Sie zur SDK-Seite und laden Sie eine kompilierte Version für Ihr System herunter. Beachte auch mögliche Anforderungen. Wenn Ihr System nicht bei den unterstützen Systemen aufgelistet ist, müssen Sie das SDK selbständig aus dem Mozilla Quellcode erstellen. Viel Glück damit.

+

Sie sollten auch Ihre Umgebung so aufbauen das die xpidl.exe (oder nur xpidl in anderen Systemen) dich in dem standardmäßige auführbaren Pfad befindet und fügen Sie auch eine Variable mit der Bennung Gecko_SDK hinzu, die auf Ihren SDK-Build verweist:

+
+
+ 
export GECKO_SDK=/path/to/your/sdk
+
+
+

Ihr Buildsystem sollte dort darauf zugreifen. Um es in Komodo unter UNIX-basierten Systemen einsetzen zu können, fügen wir den Befehl in die .bash_login-Datei im Homeverzeichnis hinzu und wir passen den Befehl folgendermasen an.

+
+
+ 
bash -c ". ~/.bash_login; make"
+
+
+

Ein Beispiel Projekt mit XPCOM-Komponeten ist in der XPCOM-Lektion enthalten. Dort wird auch XPCOM Erstellung mit C++ angesprochen, was sehr viel schwieriger ist.

+

Signing

+

Um zusätzliche Sicherheit für Ihre Nutzer bereitzustellen, können Sie sich entscheiden eine Signature zu Ihrer Erweiterung hinzuzufügen. Die Signatur verfiziert das Sie der Autor dieser Erweiterung sind und das kann nur gemacht werden wenn Sie ein gültiges Zertifikat einer vertrauswürdigen Zertifizierungsstelle besitzen.

+

Der einzige wahrnehmbare Unterschied für den Benutzer ist das der XPI-Installationsdialog mitteilen wird das die Erweiterung von Ihnen erstellt wurde, was den Dialog vertrauswürdiger macht. Es is nicht üblich Erweiterungen zu signieren weil die meisten Anwender der offizellen Add-on-Seite (AMO) vertrauen anstatt sich auf die Erweiterungssignaturen zu verlassen. Auf der anderen Seite, ist es gängie Praxis für große Unternehmen ihre Erweiterungen zu signieren.

+

Sie werden einige libraries herunterladen müssen damit Sie in der Lage sind Ihre Erweiterungen zu signieren. Folgen Sie dieser Anleitung und fügen etwas ähnliches wie das der Makefile-Datei hinzu:

+
+
+ 
# The directory where the signature sources are located.
+signature_dir := signature
+
+# The signing key /certificate file.
+signature_extra_files := $(build_dir)/META-INF/manifest.mf \
+                         $(build_dir)/META-INF/zigbert.sf
+# The signing key /certificate file.
+signature_rsa_file = $(build_dir)/META-INF/zigbert.rsa# The signing key /certificate file.
+signature_files := $(signature_extra_files) \
+                   $(signature_rsa_file)
+
+$(signature_files): $(build_dir) $(xpi_built)
+  @signtool -d $(signature_dir) -k $(cert_name) \
+  -p $(cert_password) $(build_dir)
+
+
+

Behalten Sie im Hinterkopf ds Ihr Passwort sollte nicht in Ihren Makefile-Dateien enthalten sein und Sie müssen sehr vorsichtig mit den Zertifkatsinformationen sein. Idealerweise sollte das von einer Person erledigt werden und nur Kurz vor Abschluss des Releaseprozess erledigt werden. Sie sollten auch einen abweichenden make-Befehl hierfür haben, wie z.B. make signed um die signierten und unsignierten Entwicklungs builds unterscheiden zu können.

+

Firefox profile management

+

Es ist gute Entwicklungspraxis die Testumgebung von allem anderen zu seperieren. Sie wollen bestimmt nicht das unstabilen Erweiterungen Ihr Firefoxprofil zu schädigen und einen Datenverlust zu riskieren. Es ist viel Besser eine weitere Firefox-"Version" für die Tests zu haben. Hierfür gibt es de Firefoxprofile.

+

Sie können in dem Mozillasupport-Artikeln Managing Profiles lernen wie man mehrere Firefoxprofile aufsetzt. Sie können soviele Profile anlegen wie Sie möchten. Sie können diese auch mit mehreren Firefoxinstallationen mischen. Als Beispiel, Sie möchten möglicherweise Ihre Erweiterungen in Firefox 3.5 und Firefox 3.6 oder in unterschiedlichen regionalen Versionen von Firefox testen. Sie können soviele Firefoxversionen installieren wie Sie möchten und die Profile und Versionen mischen.

+

Unter Windows und Linux ist es einfach Verknüpfungen für jedes angeleget Profil zu erstellen, unter der Verwendung der Befehle beschrieben in http://kb.mozillazine.org/Command_line_arguments ..

+

Für Mac OS X Entwickler, gibt es auch eine Möglichkeit "Verknüpfungen" zu erstellen. Sie können dies erledigen, indem Sie eine Automator-Anwendung öffnen, indem Sie Run Shell Script auswählen und anschließend das Profillade-Skript in das Textfeld eingeben:

+
+
+ 
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -p MyProfile > /dev/null &
+
+
+

Sie können "/dev/null" auf einen Dateispeicherort ändern, in dem Fall das Sie eine dump-Ausgabe in Firefox sehen möchten oder ander Erweiterungen. last & prevents hindert Automator daran auf das beenden Ihrer Firefoxsitzung zu warten. Speicher Sie das als eine Anwendung nicht als einen Workflow. Un möglicherweise wollen Sie diese auf Ihrem Desktop oder Dock, für einen einfachen Zugriff.

+

Es sollten auch noch Konfigurationsänderungen in Ihrem Testprofil vorgenommen werden, sodass Sie im falls etwas schief geht detailierte Informationen erhalten. Die Firefox Error Console (Extras > Error Console) zeigt normalerweise JavaScripte Fehler an die auf der Webseite auftretten, aber mit etwas Optimierung können Sie Fehlerinformationen aus Ihrer Erweiterungen erhalten. Lesen hierfür Sie diesen Beitrag über Development preferences.

+

Developer extensions

+

Es gibt ein große Bandbreite an Firefoxerweiterungen die die Web- und Add-on-Entwicklung untersützen. Ein guter Ort um danach zu suchen ist die Mozilla Add-ons Seite auch gibt es hier ein gute Entwicklungserweiterungsliste. Sie sollten sich etwas Zeit nehmen und mit den Webentwicklungstools die in Firefox enthalten sind herumspielen. Einige von diesen können sehr hilfreich für die Add-on-Entwicklung sein und überschneiden sich mit den aufgeführen Add-on`s. in dieser Lektion werden wir ein paar wenige ansprechen die wir als sehr hilfreich empfunden haben.

+

DOM Inspector

+

Der DOM Inspector war früher ein Teil von Firefox als eine Installationsoption, aber seit Firefox 3 ist von Firefox abgetrennt als ein weiteres Add-on Sie können es hinzufügen und entfernen. Es ist ein sehr nützliches Tool für Untersuchungen das Sie in das DOM von HTML und XUL-Dokumenten sehen lässt, genauso wie eingesetzte CSS-Regeln und zugehörige JavaScript Objekte. Introduction to DOM Inspector ist eine gute Einführung um mit der Verwendung zu beginnen.

+

Der DOM Inspector ist besonders hilfreich um heruauszufinden wie Sie ein Fenster überblenden, und wie Sie standard CSS-Style-Regeln ersetzen. Sie können die Namen der beteiligten Dateien sehen, was Ihnen einen guten Startpunkt gibt wenn Sie in die Mozilla source sehen. Sie können sogar Styles, Attribute ändern und JavaScript Code ausführen, obwohl dies nicht vollständig zuverlässig ist.

+

JavaScript Debugger

+

Der Name sagt alles. Der Venkman JavaScript Debugger ist ein größartiger Weg um die Ausführung von JavaScript zu verfolgen.

+

Um Erweiterungen und Browsercod zu debuggen, klicken Sie mit der rechten Maustaste auf die geladene Scriptkonsole und entfernen Sie die Auswahl von Exclude Browser Files. Die Liste der geladenen Skripte wird anwachsen um alle Skripte in Firefox zu beinhalten. Unsere Dateinamenkonventionen erweisen sich hierbei als sehr hilfreich. Sie können Unterbrechngspunkte setzen, aus und in Methoden springen und sogar Profilinformationen aus der JavaScriptausführung erhlaten. Sie können Variablen untersuchen, Überwachungsausdrücke verfolgen, und nach Ermessen JS an jedem Punkt der Ausführung auswerten.

+

Diese Erweiterungen ist seit einiger Zeit nicht mehr gewartet werden, daher ist sie sehr buggy. Es ist besonders unzuverlässig wenn es Code in XPCOM und XBL-Dateien debuggen soll. Dennoch, ist ein wertvolles Tool wenn man versucht herauszufinden warum sich eine bestimmte Funktion ungewünscht verhält.

+

Tamper Data

+

Tamper Data fängt HTTP-Anfragen und ihren -Antworten ab. Dies erlaubt Ihnen diese zu unterbrechen und sogar die Payload-Daten zu ersetzten bevor diese gesendet werden. Es gibt einige ähnliche Erweiterungen, wie z.B. Live HTTP Headers, aber Tamper Data ist das eine das wir am meisten einsetzen. Wir werden mehr über HTTP debugging später erfahren.

+

Firebug

+

Die Firebug Erweiterung enthält fast alle Tools die bisher angesprochen wurden, aber sie ist hauptsächlich auf die Webentwicklung ausgerichtet. Die Chromebug Erweiterung hilft Firebug nützlicher im Bezug auf die Erweiterungsentwicklung, aber sie ist möglicherweise nicht stark genug um alle alle angesprochen Add-ons zu ersetzen.

+

Auf der anderen Seite, bietet Firebug eine sehr benutzerfreundliches integriertes Oberfläche und wirdurch stärker weiterentwickelt als seine Gegenstücke. Es ist definitiv einen Versuch wert.

+

Leak Monitor

+

Memoryleaks sind immer ein großer Kritikpunkt an Firefox gewesen. mozilla hat über die Zeit bewiesen das es die Arbeitsspeicher nutzung ernst nimmt, durch die Verbesserung der Performance an besonders kritischen Bereichen und durch das entfernen aller Memoryleaks.

+

Wie auch immer, Erweiterung können auch die Ursache von Memoryleaks sein. Wenn Sie Ihre Erweiterung in die Mozilla Add-on Seite aufgenommen haben möchten, sollten Sie besser keine Memoryleaks haben. In Using XPCOM in JavaScript sind einige Richtlinien erfastt die Sie befolgen sollten um diese zu vermeiden. Einer der häufigsten Fehler die Entwicklern machen, ist einen JS event listener oder observer zu registrieren und diesen niemals zu entfernen. Die einfache Praxis immer Code für das Entfernen für alles was Sie hinzuzufügen anzufügen macht einen großen Unterschied.

+

Um sicher zugehen das Ihre Erweiterungen keine Leaks beinhaltet, Sie sollten die Leak Monitor Erweiterung verwenden wenn Sie das testen. Testen Sie immer öffnende und schließende Fenster. Gewöhnlicherweise tretten diese Leaks bei diesem Vorgang auf.

+

Exercise

+ +

Jetzt das Sie wissen wie man schnell Ihr Projekt und Test-Änderungen überprüft, werden wir lernen wie man neue UI-Elemente zu Firefox durch Overlays und neuer Fenster hinzufügt.

+

{{ PreviousNext("XUL_School/The_Essentials_of_an_Extension", "XUL_School/Adding_menus_and_submenus") }}

+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html b/files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html new file mode 100644 index 0000000000..d31a97b230 --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html @@ -0,0 +1,44 @@ +--- +title: Einleitung +slug: Archive/Mozilla/XUL/School_tutorial/Einleitung +tags: + - Add On + - Benutzeroberfläche + - Extension + - Gecko + - Mozilla + - XUL + - XULRunner +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction +--- +
+ {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
+

Willkommen beim XUL School Tutorial!

+

Dieses Tutorial soll der entscheidene Schritt sein, welcher Sie in einen Firefox Extension Developer (Erweiterungsentwickler) verwandelt. Wir haben Jahre an Erfahrung mit XUL und während dieser Zeit alle Probleme kennengelernt, auf die Entwickler stoßen.

+

XUL School wurde erschaffen von Appcoast (ehemals Glaxstar), eine der wenigen Firmen, welche sich der Addon Entwicklung von Firefox verschrieben hat. Ein Team von über einem Dutzend XUL Entwickler entwickelten Glaxstar während dieses Tutorial geschrieben wurde. Sie sammelten jahrelang Erfahrung und diese reflektieren Sie hier.

+

In diesem Tutorial erfahren Sie, wie Sie Firefox-Erweiterungen entwickeln. Sie werden lernen, wie man schnell die häufigsten Aufgaben in der Extension-Entwicklung löst und vergleichen verschiedene Ansätze, sie zu lösen. In den meisten Fällen bieten wir Codebeispiele, die Sie leicht kopieren und an Ihre Bedürfnisse anpassen können, sowie einige funktionierende Beispiele von Erweiterungen. Das Tutorial soll so kurz wie möglich sein. Oft hilft das Zurückgreifen auf die Mozilla-Dokumentation für weitere Informationen. Sie können es als praktischen Reiseführer mit Infos durch die wachsende Welt, die die Mozilla-Plattform ist, nutzen. Die meisten Links in dieser Dokumentation sollten angeklickt und gelesen werden.

+

Wir starten mit einer Einführung in die Hauptkonzepte, falls Sie nicht mit Mozilla und Firefox vertraut sind.

+

Mozilla and Firefox

+

Der Term Mozilla wird benutzt, um folgende Konzepte zu beschreiben: das Mozilla Projekt, die Mozilla Foundation, die Mozilla Corporation und den alten Mozilla browser. Auch Firefox wird manchmal "Mozilla" genannt. Falls Ihnen die Begriffe nicht geläufig sind, ist es von Vorteil, sich etwas Zeit zu nehemen und mehr über Mozilla zu lernen. Dies hilft die Kultur und das Umfeld von Mozilla zu verstehen.

+

Mozilla hat mehrere Produkte und Projekte hervorgebracht. Das bemerkenswerteste ist der Mozilla Firefox Web-Browser. Firefox ist eines der erfolgreichsten Open-Source-Projekte in der Geschichte. Es kombiniert Offenheit, die Einhaltung von Standards und Raffinesse von Open Source mit dem Fokus auf Benutzerfreundlichkeit und leistungsstarke Vielseitigkeit, wie man es in weniger offenen Unternehmen nur selten sieht.
+
+ Version 1.0 von Firefox wurde im November 2004, Version 2.0 im Oktober 2006 und Version 3.0 im Juni 2008 veröffentlicht. Dieses Tutorial wurde geschrieben, nachdem Firefox 3 veröffentlicht wurde, und ist mit der Zeit aktualisiert worden. Obwohl noch für die Erstellung von Erweiterungen in Firefox 3 (und auch Firefox 2) gearbeitet wird, ist es dringend zu empfehlen, dass Sie moderne Firefox-Versionen unterstützen, um Nutzer zu motivieren, mit Sicherheitsupdates auf dem laufenden zu bleiben. Eine Version, die vor mehr als 6 Monaten veröffentlicht wurde, ist wahrscheinlich anfällig für Sicherheitslücken.
+
+ Firefox und andere Mozilla-Anwendungen kann man als zusammengesetzt ansehen aus zwei verschiedenen Teilen: eine Benutzeroberflächen-Schicht, die für jedes Projekt verschieden ist, und eine gemeinsame Plattform, worauf die Benutzeroberflächen-Schicht angesiedelt ist. Die Benutzeroberfläche ist mit der Technologie XUL entwickelt und die Plattform wird als XULRunner bezeichnet.

+

 

+

XUL

+

XUL (ausgesprochen "zool") ist eine von vielen Technologien für die Erstellung von Mozilla-basierten Produkten und wird auch für Erweiterungen verwendet. Sie ist nur ein Teil der Entwicklungslandschaft, aber da sie praktisch exklusiv für Mozilla ist, neigt man dazu, sie zu verwenden, um Mozilla-bezogene Entwicklungen zu identifizieren. Sie lesen manchmal Begriffe wie "XUL-Anwendungen" und "XUL-Erweiterungen", aber nur selten werden sie für Projekte benutzt, die ausschließlich mit XUL gebaut sind. Es bedeutet in der Regel, dass die Projekte mit Mozilla-Technologien gebaut wurden. Auch dieses Projekt, genannt XUL Schule, erstreckt sich über mehrere andere Technologien wie JavaScript, CSS, XBL und XPCOM.

+

XULRunner

+

XULRunner umfasst die Gecko-Rendering-Engine, die Necko Netzwerk-Bibliothek, und einige andere Komponenten, die unter anderem OS-unabhängiges Datei-Management, Zugänglichkeit und Lokalisierung bieten. Es ist eine sehr leistungsfähige Plattform, die ein solch schnelles Wachstum der Entwickler-Community rund um Mozilla und Firefox erlaubt hat.

+

XULRunner ist in binärer Form auf der XULRunner Seite verfügbar und sie ist die Basis für mehrere Projekte, wie zum Beispiel Songbird, Miro und Eudora. Es gibt eine sehr umfassende Liste von Anwendungen in der XULRunner Hall of Fame.

+

Gecko

+

Die Gecko-Engine ist der Teil von Firefox, der verwendet wird, um Web-Seiten und eine eigene Benutzeroberfläche zu gestalten. Sie erkennen den Grad der Kompatibilität von Web-Standards in Gecko-basierten Browsern, indem Sie sich ihren User Agent String ansehen, der die Gecko-Version enthalten sollte. Gecko-Versionen sind etwas unabhängig von Firefox-Versionen. Sie können eine Zuordnung von Firefox-Versionen und Gecko-Versionen auf der Gecko-Seite sehen. Der User Agent String für Firefox zum Zeitpunkt des Schreibens dieses Artikels (in US-Englisch, Mac OS X) ist:

+

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:7.0.1) Gecko/20100101 Firefox/7.0.1

+

Der markierte Abschnitt ist die Gecko-Version: 7.0.1. Sie können den  User-Agent-String lesen und kopieren in jedem beliebiegen Firefox-Fenster. Dazu wählen Sie "Hilfe> Informationen zur Fehlerbehebung" aus dem Hauptmenü.

+

Weiter im Tutorial

+

Mit den grundlegenden Konzepten können wir jetzt in die Entwicklung von Erweiterungen einsteigen. Sie werden sich wahrscheinlich immer noch fragen, was genau ist eine Erweiterung, was kann sie leisten und wie kann man sie erstellen. Nun, dieses ganze Tutorial verfolgt das Ziel, Ihnen das zu erklären.
+
+ Willkommen in der Welt der Extension-Entwicklung. Jetzt wollen wir uns dem zuwenden.

+
+ {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
+

This tutorial translation was kindly donated to Mozilla by Sinn - IT mit Emotion

diff --git a/files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html b/files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html new file mode 100644 index 0000000000..bfb1d41e7a --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html @@ -0,0 +1,75 @@ +--- +title: Mit Firefox Erweiterungen beginnen +slug: Archive/Mozilla/XUL/School_tutorial/Getting_Started_with_Firefox_Extensions +tags: + - Erweiterungen +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions +--- +

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

+

Was ist eine Firefox Erweiterung?

+
+

Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download.

+
+

Auszug aus der Erweiterungs-Seite.

+

Wie es das Zitat beschreibt, ist eine Erweiterung eine kleine Anwendung, die etwas Neues zu einer oder mehreren Mozilla-Anwendungen hinzufügt. Dieses Tutorial konzentriert sich auf Erweiterungen für Firefox. Dieselben (oder sehr ähnliche) Prinzipien gelten auch für die Entwicklung von Erweiterungen zu anderen Anwendungen wie Thunderbird, Seamonkey oder Flock.

+

Bitte beachten Sie, dass es es einen Unterschied zwischen der Definiton einer Erweiterung und einem Add-on gibt. Alle Erweiterungen sind Add-ons, aber ein Add-on kann auch eine Theme, ein Plug-in oder ein Sprachpaket sein. Der Inhalt dieses Tutorials behandelt die Entwicklung von Erweiterungen. Themes und Sprachpakete werden in einer sehr ähnlichen Art und Weise entwickelt. Plug-ins sind gänzlich anders und sie werden in diesem Tutorial nicht behandelt. Sie können mehr über Plug-ins und deren Entwicklung auf der Plug-in-Seite erfahren.

+

Firefox bietet eine sehr reiche und flexible Architektur. Diese erlaubt es den Entwicklern von Erweiterungen fortgeschrittene Funktionalitäten hinzuzufügen, sich der Benutzererfahrung anzupassen und Teile des Browsers vollständig zu ersetzen oder zu entfernen.

+

Das Mozilla Add-on Repository (AMO) beinhaltet eine umfassende Anzahl von Erweiterungen mit einer großen Bandbreite an Funktionen: Inhaltsfilterung (AdBlock Plus, NoScript), Interaktion mit Webanwendungen (Delicious Bookmarks, eBay Companion) und Webentwicklung (DOM Inspector, Firebug). Dabei handelt es sich um sehr fortgeschrittene und komplexe Erweiterungen. Sie werden in diesem Tutorial das meiste erlernen, was benötigt wird, um derartige Erweiterungen zu erzeugen (genau genommen basiert Glaxstar auf drei von den hier aufgezählten).

+

Erweiterungen gibt es im Moment in drei verschiedenen Ausprägungen: Add-ons SDK extensions (auch bekannt als Jetpacks), bootstrapped-Erweiterungen und traditionelle Erweiterungen. Wenn Sie gerade beginnen, Add-ons zu entwickeln, bietet das Add-on SDK einen fantastischen Weg, um schnell Erweiterungen zu entwickeln und auf diesen aufzubauen. Dieses Tutorial konzentriert sich auf traditionelle Erweiterungen, welche auf eine andere Art entwickelt werden. Bootstrapped-Erweiterungen sind eine Stufe komplexer, als die traditionellen. Von daher sollten Sie zuerst dieses Tutorial durchgehen, bevor Sie sich diese ansehen.

+

Wir werden dieses Tutorial mit der Analyse einer sehr einfachen Erweiterung beginnen.

+

Die Hallo Welt Erweiterung

+

Unsere Beispielerweiterung und dieses Tutorial im Allgemeinen sind ausgelegt für moderne Versionen des Firefox, aber die meisten von ihnen funktionieren auch auf älteren Versionen.

+

Wir werden nun mit einer einfachen "Hallo Welt"-Erweiterung beginnen. WIr beginnen mit seiner Installation. Dafür klicken Sie auf den folgenden Link.

+

Install Hello World

+

Hierbei wird entweder eine Installation oder ein Datei-Download angestoßen, abhängig von dem Inhaltstyp, der auf dem Webserver abgelegt ist. Der entsprechende Inhaltstyp, um eine Installation zu veranlassen, ist application/x-xpinstall. Im Fall dieses Wiki`s, ist der Inhaltstyp entsprechend gesetzt und ein Installationsfenster sollte erscheinen.

+

Wenn der Inhaltstyp richtig gesetzt ist, werden Sie ordnungsgemäß gewarnt, dass es dieser Seite nicht erlaubt ist Add-ons zu installieren. Hierbei handelt es sich um eine Sicherheitsbarriere, die Seiten daran hindert, Erweiterungen ohne Benutzerzustimmung zu installieren. Dies ist vonnöten, weil bösartige Erweiterungen den gleichen Schaden verursachen können, wie jedes anderes Schadprogramm: Datenklau, das Löschen oder das Austauschen von Daten oder sonstiges unerwünschtes Verhalten. AMO ist die einzige Seite mit einer generellen Erlaubnis. Dies liegt daran, dass die auf AMO veröffentlichten Add-ons einem Überprüfungsprozess unterzogen werden, der Sicherheitsüberprüfungen beinhaltet.

+

Nach dem Herunterladen der Datei, können Sie diese, per Drag and Drop in den Firefox Inhaltsbereich ziehen und die Installation sollte beginnen.

+

Sie werden ein Fenster sehen, welches Ihnen mitteilt, dass sie dabei sind eine Erweiterung zu installieren. In diesem sind einige zusätzliche Informationen enthalten, wie unter anderem der Name des Authors. Sie werden benachrichtigt, dass der Author nicht verfiziert werden kann. Nur Erweiterungen, die mit einem digitalen Zertifkat signiert sind, können die Autorschaft verifizieren. Signierte Erweiterungen sind selten, aber wir werden das Signieren von Erweiterungen später behandeln.

+

Klicken Sie auf die "Jetzt Installieren"-Schaltfläche. Nach der Installation der Erweiterung, werden Sie gefragt ob Sie Firefox neu starten wollen. Installation, Deinstallation, Aktivierung und Deaktiverung von Add-ons erfordern einen Neustart für die Ausführung (außer von NPAPI-Plug-ins, Add-on SDK Erweiterungen und Bootstrapped Erweiterungen). Dies ist ein wichtiger Punkt, den Sie im Hinterkopf behalten sollten, wenn Sie Erweiterungen entwickeln, die andere Erweiterungen oder Themes manipulieren.

+

Sehen Sie nach der Installation in das Firefox Hauptfenster und schauen Sie, ob Sie eine Veränderung feststellen können.

+

Haben Sie es gesehen? Dort ist ein neues Menü im Hauptmenü, bezeichnet "Hello World!".

+

+

Wenn Sie dieses Menü öffnen und den darunter liegenden Menüpunkt, werden Sie eine nette Mitteilung sehen ("nett" im weitesten Sinne). Klicken Sie auf die OK-Schaltfläche um die Mitteilung zu schließen.

+

+

Das ist alles was die Erweiterung macht. Sehen wir uns das jetzt mal genauer an.

+

Erweiterungsinhalte

+

Sie werden vielleicht bemerkt haben, dass die von Ihnen installierte Erweiterungsdatei mit xulschoolhello1.xpi benannt ist. XPI (ausgesprochen "zippy") steht für Cross-Plattform Installer. Diese Installationsdatei funktioniert auf allen Plattformen, die Firefox unterstützen. XPIs sind einfache ZIP-Dateien, aber Firefox erkennt die XPI-Erweiterung und veranlasst den Installationprozess, wenn die XPI-Datei geladen wird.

+

Um in die XPI-Datei zu sehen, müssen Sie diese zuerst herunterladen, ohne sie zu installieren. Anstatt eine Installation durch einen Klick auf einen Link oder eine Schaltfläche auszulösen, führen sie einen Rechtsklick darauf aus und wählen Sie die Ziel speichern unter... Option.

+

Entpacken Sie die XPI-Datei an einen gewünschten Ort. Unter Linux oder Mac OS X führen Sie den folgenden Befehl aus, um die Datei  zu entpacken:

+
unzip xulschoolhello1.xpi -d xulschoolhello1
+
+

Unter Windows können Sie die Dateierweiterung von xpi zu zip ändern oder die Datei direkt öffnen und anschließend mit einem ZIP-Tool entpacken.

+

Sie sollten die folgendene Dateistruktur sehen:

+ +

Das ist eine große Anzahl an Dateien, für etwas so einfaches! In der nächsten Lektion werden wir die Dateien und was sie machen genauer analysieren .

+

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/de/archive/mozilla/xul/school_tutorial/index.html b/files/de/archive/mozilla/xul/school_tutorial/index.html new file mode 100644 index 0000000000..c11982d447 --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/index.html @@ -0,0 +1,70 @@ +--- +title: XUL School Tutorial +slug: Archive/Mozilla/XUL/School_tutorial +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +

XUL School ist ein umfassendes Tutorial zur Entwicklung von Addons, das sich auf die Erstellung von Firefox-Erweiterungen konzentriert. Wir empfehlen Dir, dieses Dokument mindestens einmal vollständig zu lesen. Obwohl sich Firefox sehr schnell weiterentwickelt, sollte der Inhalt dieses Tutorials aktuell und korrekt sein.

+
+
+ Einführung
+
+ +
+
+ Grundlegende Techniken
+
+ +
+
+ Fortgeschrittene Techniken
+
+ +
+
+ Weiterführende Themen
+
+ +
+
+ Anhänge
+
+ +
+
+

Das XUL School Projekt wurde von Appcoast (ehemals Glaxstar) entwickelt. Das Projekt wird hier unter deren Lizenzen veröffentlicht. Die originalen Inhalte wurden wo nötig angepasst.

+
+

{{ languages( { "ja": "ja/XUL_School", "fr": "fr/Vulgarisation_XUL", "es": "es/Escuela_XUL", "de": "de/XUL_School" } ) }}

+
+

 

diff --git a/files/de/archive/mozilla/xul/separator/index.html b/files/de/archive/mozilla/xul/separator/index.html new file mode 100644 index 0000000000..d01d1d589c --- /dev/null +++ b/files/de/archive/mozilla/xul/separator/index.html @@ -0,0 +1,123 @@ +--- +title: separator +slug: Archive/Mozilla/XUL/separator +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/separator +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Erstellt eine trennende Lücke zwischen Elementen. Dieser Typ ist dazu gedacht unterschiedliche Teile eines Dialogs aufzuteilen. Es wird kein sichtbarer Trennbalken dargestellt, aber ein kleiner Leerraum frei gelassen. Die Funktionsweise ist identisch zum spacer Element außer, dass standardmäßig eine kleine Größe eingestellt ist (normalerweise 1.5 em).

+
Attribute
orient
+
+
Styleklassen
groove, groove-thin, thin
+
+

Beispiele

+
<separator class="groove-thin"/>
+
+

Attribute

+
+ + +
+
orient
+
Type: one of the values below
+
Used to specify whether the separator is a horizontal or vertical separator. Note that the values are the reverse of what seems more likely.
+
+
+
horizontal
+
The separator separates vertically placed elements.
+
vertical
+
The separator separates horizontally placed elements.
+
+
+
+ + +
+ + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Styleklassen

+

Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.

+
+
groove
+
A grooved separator.
+
+
groove-thin
+
A thin grooved separator.
+
+
thin
+
A thinner separator, which is usually 0.5 ems.
+
+

Verwandte Themen

+
Elemente
spacer, splitter, menuseparator, toolbarseparator, treeseparator.
+
diff --git a/files/de/archive/mozilla/xul/spacer/index.html b/files/de/archive/mozilla/xul/spacer/index.html new file mode 100644 index 0000000000..f566611098 --- /dev/null +++ b/files/de/archive/mozilla/xul/spacer/index.html @@ -0,0 +1,94 @@ +--- +title: spacer +slug: Archive/Mozilla/XUL/spacer +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/spacer +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Element, das Platz einnimmt, aber nichts anzeigt. Gewöhnlich benutzt, um Freiraum in einem Behälter zu platzieren. Wenn der Platzhalter nicht als flexibel und für ihn keine Größe angegeben ist, nimmt der Platzhalter keinen Raum ein. Ist eine kleine Lücke gewünscht, ist der Einsatz des Elements separator sinnvoller.

+

Weitere Informationen im XUL Tutorial.

+

Beispiele

+
<box>
+  <button label="Links"/>
+  <spacer flex="1"/>
+  <button label="Rechts"/>
+</box>
+
+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandt

+
Elemente
separator, splitter
+
diff --git a/files/de/archive/mozilla/xul/splitter/index.html b/files/de/archive/mozilla/xul/splitter/index.html new file mode 100644 index 0000000000..6c89456da3 --- /dev/null +++ b/files/de/archive/mozilla/xul/splitter/index.html @@ -0,0 +1,173 @@ +--- +title: splitter +slug: Archive/Mozilla/XUL/splitter +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/splitter +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Element, das vor oder nach einem Element innerhalb eines Containers auftauchen sollte. Das Ziehen des Trenners ändert die Größe der Geschwisterelemente des Trenners. Platziert man ein 'Griffchen' (grippy) innerhalb eines Trenners, so wird ein Geschwisterelement des Trenners beim Anklicken des 'Griffchens' zugeklappt.

+

Weitere Information sind im XUL Tutorial verfügbar.

+
Attribute
collapse, resizeafter, resizebefore, state, substate
+
+
Styleklassen
tree-splitter
+
+

Beispiele

+

 splitter_arrow.png

+

<splitter tooltiptext="Größe der Suchbox verändern" oncommand="alert('Der Splitter wurde gezogen!')">
+   <vbox id="Beispiel_vbox" />
+</splitter>

+

Attribute

+

+ + +
+
collapse
+
Type: one of the values below
+
Determines which side of the splitter is collapsed when its grippy is clicked. If this attribute is not specified, the splitter will not cause a collapse. You should put a grippy element inside the splitter when it is used for collapsing.
+
+
+
none
+
No collapsing occurs.
+
before
+
When the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0.
+
after
+
When the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0.
+
both
+
Either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter.
+
+
+
+
+ + +
+
resizeafter
+
Type: one of the values below
+
This attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned.
+
+
+
closest
+
The element immediately to the right or below the splitter resizes.
+
farthest
+
The element that is the farthest away from the splitter to the right or below the splitter resizes.
+
grow
+
The elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size.
+
flex
+
The closest flexible element resizes.
+
+
+
+ + +
+ + +
+
resizebefore
+
Type: one of the values below
+
This attribute indicates which element to the left or above the splitter should be resized when the splitter is repositioned.
+
+
+
closest
+
The element immediately to the left or above the splitter resizes.
+
farthest
+
The element that is the farthest away from the splitter to the left or above the splitter resizes.
+
flex
+
The closest flexible element resizes.
+
+
+
+
+ + +
+
state
+
Type: one of the values below
+
Indicates whether the splitter has collapsed content or not. This attribute will be updated automatically as the splitter is moved, and is generally used in a stylesheet to apply a different appearance for each state.
+
+
+
open
+
The content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed.
+
collapsed
+
The content either before or after the splitter is collapsed and is not visible.
+
dragging
+
The user is current adjusting the position of the splitter, typically by dragging it with the mouse.
+
+
+
+ + +
+ + +
+
substate
+
Type: one of the values below
+
On splitters which have state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in. Since collapse="both" is a Gecko 1.9+ feature, this will have no effect on earlier versions.
+
+
+
before
+
The element immediately before the splitter is collapsed.
+
after
+
The element immediately after the splitter is collapsed.
+
+
+
+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Styleklassen

+

Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.

+
+
tree-splitter
+
This splitter is intended to be used in tree columns (in-between treecol elements). The splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized.
+
+
	<tree id="tree1" flex="1" height="300" enableColumnDrag="true">
+	  <treecols>
+    	    <treecol id="name" label="Name" flex="1"/>
+	    <splitter class="tree-splitter"/>
+    	    <treecol id="id" label="ID" flex="1"/>
+	    <splitter class="tree-splitter"/>
+    	    <treecol id="date" label="Date" flex="1"/>
+	    <splitter class="tree-splitter"/>
+	  </treecols>
+	  <treechildren/>
+	</tree>
+
+ +

Das Maß, welches die Größe der Box verändert und was während der Größenveränderung passiert nachdem das Limit erreicht wurde, hängt von der festgelegten Höhe (oder Breite) der Box, welche über ein Attribut, über eine CSS Anweisung (min-height [oder min-width]) oder die wirkliche Höhe der Boxinhalte bestimmt werden kann, und von der An- oder Abwesenheit des eines collapse Attributs des Splitters ab.

+

Bei:

+
<vbox></vbox>
+<splitter/>
+<vbox></vbox>
+

...wird sich der Splitter nicht bewegen, da kein collapse Attribute für den Splitter festgeleget wurde, was dazu führt das der Splitter zusammenfällt, sobald er gezogen wird.

+

Bei:

+
<vbox></vbox>
+<splitter/>
+<vbox height="500"><vbox height="100"/></vbox>
+

...kann der Splitter bis auf eine Höhe von 100px der unteren Box gezogen werden, wo er nicht weiter gezogen werden kann (oder zusammenfällt, wenn der Splitter über ein collapse Attribut verfügt).

+

Bei:

+
<vbox></vbox>
+<splitter/>
+<vbox height="500" minheight="200"><vbox height="100"/></vbox>
+

...kann der Splitter bis auf eine Mindesthöhe von 200px gezogen werden, wo er stoppen wird oder zusammenfällt.

+

Bei:

+
<vbox></vbox>
+<splitter>
+<vbox height="500" style="min-height: 50"><vbox height="100"/></vbox>
+

...kann der Splitter bis unter einer Höhe von 100px der unteren Box gezogen werden, wodurch das Kindelement überläuft, wenn die Mindesthöhe erreicht wird. Dort stoppt oder fällt der Splitter zusammen. Das sollte auch mit einem minheight Attribut, das kleiner als die wirkliche Höhe ist, möglich sein. (Jedoch funktioniert der Überlauf tatsächlich wegen Bug 513597  nur beim Festlegen von minheight und minwidth Attributen oder bei einer Angabe von min-height oder min-width über CSS).

+

Verwandte Themen

+

TBD

diff --git a/files/de/archive/mozilla/xul/style/index.html b/files/de/archive/mozilla/xul/style/index.html new file mode 100644 index 0000000000..74732b6e00 --- /dev/null +++ b/files/de/archive/mozilla/xul/style/index.html @@ -0,0 +1,11 @@ +--- +title: Style Klassen +slug: Archive/Mozilla/XUL/Style +tags: + - XUL Referenz + - XUL Style +translation_of: Archive/Mozilla/XUL/Style +--- +

« Startseite XUL Referenz

+ diff --git a/files/de/archive/mozilla/xul/style/treecol-image/index.html b/files/de/archive/mozilla/xul/style/treecol-image/index.html new file mode 100644 index 0000000000..d7be7f7df7 --- /dev/null +++ b/files/de/archive/mozilla/xul/style/treecol-image/index.html @@ -0,0 +1,13 @@ +--- +title: treecol-image +slug: Archive/Mozilla/XUL/Style/treecol-image +tags: + - XUL Referenz + - XUL Style +translation_of: Archive/Mozilla/XUL/Style/treecol-image +--- +
« Startseite XUL Referenz
+
treecol-image
Um ein Bild als Kopf der Baumspalte anzuzeigen, wird diese Klasse benutzt. Das Bild selbst wird über das Attribut src angegeben.
+
+
+
diff --git a/files/de/archive/mozilla/xul/tab/index.html b/files/de/archive/mozilla/xul/tab/index.html new file mode 100644 index 0000000000..6c0f5831d0 --- /dev/null +++ b/files/de/archive/mozilla/xul/tab/index.html @@ -0,0 +1,195 @@ +--- +title: tab +slug: Archive/Mozilla/XUL/tab +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/tab +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Steht für einen einzelnen Reiter innerhalb eines tabs-Elements. Der Benutzer kann den Reiter klicken, um die Seite in den Vordergrund zu holen, die zu der tabbox gehört.

+

Weitere Informationen im XUL Tutorial.

+
Attribute
accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pinned, selected, tabindex, validate, value
+
+
Eigenschaften
accessKey, accessibleType, command, control, crop, disabled, image, label, linkedPanel, selected, tabIndex, value
+
+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+

+ +
accesskey
Typ: character
Dem Attribut wird der Buchstabe zugewiesen, der als Tastenkürzel für das Element dienen soll. Dieser Buchstabe sollte sinnvollerweise innerhalb des Textes des Attributs label des Elements vorkommen.
+
+ +
+ + +
+
afterselected
+
Type: boolean
+
This is set to true if the tab is immediately after the currently selected tab. This is automatically set when needed and you shouldn't adjust it manually. This is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.
+
+
+ + +
+
beforeselected
+
Type: boolean
+
This is set to true if the tab is immediately before the currently selected tab. This is set automatically set when needed and you shouldn't adjust it manually. This is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.
+
+
+ +
+
+ crop
+
+ Type: one of the values below
+
+ If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.
+
+
+
+ start
+
+ The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.
+
+ end
+
+ The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.
+
+ left
+
+ The text will be cropped on its left side.
+
+ right
+
+ The text will be cropped on its right side.
+
+ center
+
+ The text will be cropped in the middle, showing both the start and end of the text normally.
+
+ none
+
+ The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.
+
+
+
+ Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value none:
+
+ 
menupopup > menuitem, menupopup > menu { max-width: none; }
+
+
+
+
+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ + +
+
first-tab
+
Type: boolean
+
This attribute will be set to true for the first tab. This attribute should not be set manually, but is useful in a theme if the first tab should be styled differently.
+
+
+ +
+
image
+
Type: URI
+
The URI of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the dir and orient attributes.
+
+ + + +
+ +
label
Typ: string
Die Beschriftung für das Element. Wird das Attribut nicht angegeben, so erscheint auch kein Beschriftungstext.
+
+ +
+ + +
+
last-tab
+
Type: boolean
+
This attribute will be set to true for the last tab. This attribute should not be set manually, but is useful in a theme if the last tab should be styled differently.
+
+
+ + +
+
linkedpanel
+
Type: id
+
The id of the linked tabpanel element that will be displayed when the tab is selected. If this attribute is not used, the tab will be connected to the panel at the corresponding index in the tabpanels element that the tab is in its tabs container. However, if this attribute is used, this behavior is overridden, and the tab will always be linked to a specific panel. This might be used to avoid duplication by linking several tabs to one panel with slight differences to the content adjusted in the select event.
+
+
+ + +
+
oncommand
+
Type: script code
+
This event handler is called when the command is activated. This occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.
+
+ + +
+ +
pinned
Type: boolean
This attribute is set to true if the tab has been pinned (that is, if it's an app tab). The tabbrowser element's pinTab and unpinTab methods handle pinning and unpinning tabs.
+
+
+ + +
+
selected
+
Type: boolean
+
This attribute is set to true if the tab is selected by default.
+
+ + +
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+ + +
+
validate
+
Type: one of the values below
+
This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:
+
+
+
always
+
The image is always checked to see whether it should be reloaded.
+
never
+
The image will be loaded from the cache if possible.
+
+
+
+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Probleme

+

In Versionen vor Gecko 1.9 (Firefox 3.0) ist es nicht möglich, einen Reiter außer Kraft zu setzen. Der Reiter wird zwar "grau" dargestellt, akzeptiert jedoch Ereignisse. Dieses Verhalten wurde in Firefox 3 behoben.

+

Des weiteren führt ein Wiederanzeigen eines Reiters nach dem Verstecken zu einer unvorhersehbaren Anordnung der Reiter. Siehe Bug 307088 und Bug 261826. (Es empfiehlt sich collapsed statt hidden zu verwenden)

+

Verwandte Themen

+
Elemente
tabbox, tabs, tabpanels, tabpanel.
Schnittstellen
nsIAccessibleProvider, nsIDOMXULSelectControlItemElement
+
diff --git a/files/de/archive/mozilla/xul/tabbox/index.html b/files/de/archive/mozilla/xul/tabbox/index.html new file mode 100644 index 0000000000..29c5cf9dab --- /dev/null +++ b/files/de/archive/mozilla/xul/tabbox/index.html @@ -0,0 +1,77 @@ +--- +title: tabbox +slug: Archive/Mozilla/XUL/tabbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/tabbox +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Behälter für die Anzeige von Seiten mit Karteikarten/-reitern. Das Element tabbox sollte zwei Kindelemente enthalten. Als erstes ein tabs Element, welches je Reiter ein tab Element enthält und als zweites ein tabpanels Element, welches den Inhalt der Seiten aufnimmt.

+

Weitere Informationen im XUL Tutorial.

+
Attribute
eventnode, handleCtrlPageUpDown, handleCtrlTab
+
+
Eigenschaften
accessibleType, eventNode, handleCtrlPageUpDown, handleCtrlTab, selectedIndex, selectedPanel, selectedTab, tabs, tabpanels
+
+

Beispiele

+
<tabbox id="myTabList" selectedIndex="2">
+  <tabs>
+    <tab label="Erster Reiter"/>
+    <tab label="Zweiter Reiter"/>
+    <tab label="Weiterer Reiter"/>
+    <tab label="Letzter Reiter"/>
+  </tabs>
+  <tabpanels>
+    <tabpanel><!-- tabpanel Erste Elemente hierher --></tabpanel>
+    <tabpanel><!-- tabpanel Zweite Elemente hierher --></tabpanel>
+    <tabpanel><button label="Klick mich"/></tabpanel>
+    <tabpanel><!-- tabpanel Vierte Elemente hierher --></tabpanel>
+  </tabpanels>
+</tabbox>
+
+

Image:XUL_REF_tabboxes.gif

+

Attribute

+

+ + +
+
eventnode
+
Type: one of the values below
+
Indicates where keyboard navigation events are listened to. If this attribute is not specified, events are listened to from the tabbox. Thus, if this attribute is not used, the tabbox or an element inside it must have the focus for the keyboard navigation to apply.
+
+
+
parent
+
Keyboard navigation is captured at the parent of the tabbox.
+
window
+
Keyboard navigation is captured at the window level. Tab navigation will occur as long as any element in the window is focused.
+
document
+
Keyboard navigation is captured at the document level. Tab navigation will occur as long as any element in the document is focused.
+
+
+
+
+ +
+ + +
+
handleCtrlTab
+
Type: boolean
+
If set to true or omitted, the tabbox will switch to the next tab when the Control and Tab keys are pressed. If the Shift key is also held down, the previous tab will be displayed. If this attribute is set to false, these keys do not navigate between tabs.
+
+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandt

+
Elemente
tabs, tab, tabpanels, tabpanel.
+
diff --git a/files/de/archive/mozilla/xul/tabpanels/index.html b/files/de/archive/mozilla/xul/tabpanels/index.html new file mode 100644 index 0000000000..8c58b9b082 --- /dev/null +++ b/files/de/archive/mozilla/xul/tabpanels/index.html @@ -0,0 +1,100 @@ +--- +title: tabpanels +slug: Archive/Mozilla/XUL/tabpanels +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/tabpanels +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Container, der Seiten in Form von tabbox Elementen enthält. Das tabpanels Element sollte in einer tabbox platziert sein, es muss aber nicht unbedingt ein direktes Kindelement sein. Die Kindelemente des tabpanels Elements werden zu Panels des tabbox Elements. In den meisten Fällen würde ein vbox Element benutzt werden, aber es kann jedes Element verwendet werden, wobei die meisten Autoren am Liebsten das tabpanel Element gebrauchen. Wenn auf den ersten Tag geklickt wird, wird dieser angezeigt. Wenn auf den zweiten Tab geklickt wird, wird dieser angezeigt und so weiter. Es sollte die selbe Anzahl an Panels vorhanden sein wie Tabs. Panels sollten niemals versteckt sein, denn das bedeutet, dass das Panel unzugänglich ist.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
selectedIndex
+
+
Eigenschaften
selectedIndex, selectedPanel
+
+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+
+ + +
+
selectedIndex
+
Type: integer
+
Gets and sets the index of the currently selected panel. The first item is at index 0.
+
+
+ + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+
Elemente
tabbox, tabs, tab, tabpanel.
+
diff --git a/files/de/archive/mozilla/xul/tabs/index.html b/files/de/archive/mozilla/xul/tabs/index.html new file mode 100644 index 0000000000..21f0853e04 --- /dev/null +++ b/files/de/archive/mozilla/xul/tabs/index.html @@ -0,0 +1,123 @@ +--- +title: tabs +slug: Archive/Mozilla/XUL/tabs +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/tabs +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Behälter für einzelne Reiter. Ein tabs-Element kann innerhalb einer tabbox benutzt werden und nimmt selbst tab-Elemente auf.

+

Mehr Information im XUL Tutorial.

+
Attribute
closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, tabbox, tabindex, tooltiptextnew, value,
+
+
Eigenschaften
accessibleType, disabled, itemCount, selectedIndex, selectedItem, tabIndex, value,
+
+
Methoden
advanceSelectedTab, appendItem, getIndexOfItem, getItemAtIndex, insertItemAt, removeItemAt
+
+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+

+ +
+
+ closebutton Obsolete since Gecko 1.9.2
+
+ Type: boolean
+
+ If this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends. This feature is used by the tabbrowser to provide the facilities for adding and closing tabs. You can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.
+
+
+ + +
+
disableclose
+
Type: boolean
+
If this attribute is true the close button will be disabled.
+
+
+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ + +
+
onclosetab
+
Type: script code
+
This script will be called when the close tab button is clicked.
+
+
+ + +
+
onnewtab
+
Not in Firefox
+
Type: script code
+
This script will be called when the new tab button is clicked.
+
+
+ + +
+
onselect
+
Type: script code
+
This event is sent to the tabs element when this tab is changed.
+
+ + +
+ + +
+
setfocus
+
Type: boolean
+
If true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard. If this attribute is false, the focus does not change during navigation.
+
+ + +
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+ + +
+
tooltiptextnew
+
Not in Firefox
+
Type: string
+
Used to set the text which appears in the tooltip when the user moves the mouse over the new button in the tab row.
+
+
+

Eigenschaften

+

+

Methoden

+ + + + + + +
+

Geerbte Methoden
+element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()

+ +
+

Verwandte Themen

+
Elemente
tabbox, tab, tabpanels, tabpanel.
Schnittstellen
nsIAccessibleProvider, nsIDOMXULSelectControlElement
+
diff --git a/files/de/archive/mozilla/xul/textbox/index.html b/files/de/archive/mozilla/xul/textbox/index.html new file mode 100644 index 0000000000..a96f2673d5 --- /dev/null +++ b/files/de/archive/mozilla/xul/textbox/index.html @@ -0,0 +1,334 @@ +--- +title: textbox +slug: Archive/Mozilla/XUL/Textbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/textbox +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Eingabefeld, in dem der Benutzer einen Text eingeben kann. Die textbox ist ähnlich wie das HTML input Element. Nur eine Textzeile wird im Standardverhalten angezeigt. Das multiline Attribut kann das Feld auch mit mehreren Zeilen ausstatten.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onchange, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound
+
+
Eigenschaften
accessibleType, clickSelectsAll, decimalPlaces, decimalSymbol, defaultValue, disabled, editor, emptyText, increment, inputField, label, max, maxLength, min, placeholder, readOnly, searchButton, selectionEnd, selectionStart, size, spinButtons, tabIndex, textLength, timeout, type, value, valueNumber, wrapAround
+
+
Methoden
decrease, increase, reset, select, setSelectionRange
+
+
Styleklassen
plain
+
+

Besipiele

+
Image:XUL_ref_textbox.png
+
<vbox>
+<label control="your-name" value="Enter your name:"/>
+<textbox id="your-name" value="John"/>
+</vbox>
+
+

Attribute

+

+ +
cols
Typ: integer
Stellt die Anzahl an Spalten für mehrzeilige Textboxen dar.
+
+ +
+ +
decimalplaces
Typ: integer
Die Anzahl an Dezimalstellen, die angezeigt werden sollen. Der Standardwert ist 0, was bedeutet, dass keine Dezimalstellen angezeigt werden. Der Wert infinity kann dazu verwendet werden, keine Begrenzung der Dezimalstellen bei Zahlen anzuzeigen. Hinweis: Dezimalzahlen werden als Floats gespeichert.
+
+ +
+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ +
emptytext Unerwünscht Gecko 2
Typ: string
Ein String, der in der Textbox angezeigt wird, falls diese keinen Wert besitzt. Dieses Attribut wurde vom placeholder Attribut in Gecko 2 ersetzt. Der alte Name bleibt zur Kompatibilität bestehen, aber Sie sollten Ihren Code aktualisieren.
+
+ +
+ +
hidespinbuttons
Typ: boolean
Falls der Wert auf true gesetzt wird, werden keine Buttons mit Pfeilen angezeigt, um den Wert des Feldes anzupassen. Der Wert kann dann ausschließlich per Tastatur eingegeben werden. Standardmäßig ist der Wert false.
+
+ +
+
+ increment
+
+ Type: integer
+
+ The amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). The default value is 1.
+
+
+ + +
+
label
+
Type: string
+
If present and not empty, this will be exposed to screen readers through the label property.
+
+
+ +
+
+ Type: integer
+
+ The maximum value that the scale or number box may be set to. The default value is 100 for scales and Infinity for number boxes.
+
+ +

 

+
+ + +
+
maxlength
+
Type: integer
+
The maximum number of characters that the textbox allows to be entered.
+
+
+ +
+
+ min
+
+ Type: integer
+
+ The minimum value the control's value may take. The default value is 0.
+
+

 

+
+ + +
+
multiline
+
Type: boolean
+
If true, the textbox displays multiple lines. If the user presses Enter, a new line is started. If false, the textbox only allows entry of one line.
+
+
+ + +
+
newlines
+
Type: one of the values below
+
How the text box handles pastes with newlines in them.
+
Possible values: +
+
pasteintact
+
Paste newlines unchanged
+
pastetofirst
+
Paste text up to the first newline, dropping the rest of the text
+
replacewithcommas
+
Pastes the text with the newlines replaced with commas
+
replacewithspaces
+
Pastes the text with newlines replaced with spaces
+
strip
+
Pastes the text with the newlines removed
+
stripsurroundingwhitespace
+
Pastes the text with newlines and adjacent whitespace removed
+
+
+
+
+ + +
+
onchange
+
Type: script code
+
This event is sent when the value of the textbox is changed. The event is not sent until the focus is moved to another element.
+
+ + +
+ + +
+
oninput
+
Type: script code
+
This event is sent when a user enters text in a textbox. This event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys.
+
+ + +
+ + +
+
preference
+
Type: id
+
Connects the element to a corresponding preference. This attribute only has any effect when used inside a prefwindow. More information is available in the Preferences System article.
+
+
+ + +
+
readonly
+
Type: boolean
+
If set to true, then the user cannot change the value of the element. However, the value may still be modified by a script.
+
+
+ +
+
+ rows
+
+ Type: integer
+
+ The number of rows to display in the element. If the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. To get the actual number of rows in the element, use the getRowCount method.
+
+
+ + +
+
searchbutton
+
Type: boolean
+
If true, the search field will only fire a command event when the user presses the search button or presses the Enter key. Otherwise, the command event is fired whenever the user modifies the value. This attribute only applies to textboxes with the type search.
+
+
+ + +
+
size
+
Type: integer
+
The number of characters that can be displayed in the textbox.
+
+
+ + +
+
spellcheck
+
Type: boolean
+
If true, spell checking is enabled by default for the text box; if false, spell checking is disabled by default.
+
If not specified, this defaults to false
+
+ +

The HTML

+ +
+

The spellcheck attribute uses values of true or false (you cannot simply add the spellcheck attribute to a given element):

+ +
<!-- spellcheck everything! -->
+<input type="text" spellcheck="true" /><br />
+<textarea spellcheck="true"></textarea>
+<div contenteditable="true" spellcheck="true">I am some content</div>
+
+<!-- spellcheck nothing! -->
+<input type="text" spellcheck="false" /><br />
+<textarea spellcheck="false"></textarea>
+<div contenteditable="true" spellcheck="false">I am some content</div>
+ +

You can use spellcheck on INPUT, TEXTAREA, and contenteditable elements.  Thespellcheck attribute works well paired with the autocomplete, autocapitalize, and autocorrect attributes too!

+ +

Added from David Walsh's article on Spell Check.

+
+
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+ + +
+
timeout
+
Type: integer
+
For autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions. The default is 50 milliseconds. For search textboxes, the number of milliseconds before the timer fires a command event. The default is 500 milliseconds. For timed textboxes, the number of milliseconds before the timer fires a command event. There is no default. The timer starts after the user types a character. If the user types another character, the timer resets.
+
+
+ + +
+
type
+
Type: one of the values below
+
You can set the type attribute to one of the values below for a more specialized type of textbox. Don't set the type if you wish to use a regular textbox.
+
+
+
autocomplete
+
A textbox that supports autocomplete. For more information about autocomplete textboxes, see the autocomplete documentation (XPFE [Thunderbird/SeaMonkey]) (Firefox)
+
number
+
 A textbox that only allows the user to enter numbers. In addition, arrow buttons appear next to the textbox to let the user step through values. There are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value.
+
password
+
A textbox that hides what is typed, used for entering passwords.
+
search
+
 A textbox intended for searching. The command event will fire as the user modifies the value. A listener for the command event should update search results. If the searchbutton attribute is set to true, the command event is only fired if the user presses the search button or presses the Enter key. You may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500).
+
timed
+
This textbox will fire a command event after the user types characters and a certain time has passed. The delay is set with the timeout attribute. The command event will fire if the user presses the Enter key. The timed type is deprecated in Gecko 1.9.1 and the search textbox may be used instead.
+
+
+
+ + +
+ + +
+
value
+
Type: string
+
The default value entered in a textbox. The attribute only holds the default value and is never modified when the user enters text. To get the updated value, use the value property. For number boxes, the default is 0 or the minimum value returned by the min property, whichever is higher.
+
+ + +
+ + +
+
wrap
+
Type: string
+
Set this attribute to the value off to disable word wrapping in the textbox. If this attribute is not specified, word wrapping is enabled.
+
+
+ + +
+
wraparound
+
Type: boolean
+
If true, the value of the number box will wrap around when the maximum or minimum value is exceeded. The minimum and maximum values must both not be infinity.
+
+
+

Eigenschaften

+

+ + +
+
placeholder
+
Type: string
+
A string that appears in the textbox when it has no value.
+
+
+

Methoden

+

+

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Styleklassen

+

Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.

+
+
plain
+
This class causes the element to be displayed with no border or margin.
+
+

Hinweise

+

Das maxlength Attribut funktioniert nicht, wenn man im Mehrzeilenmodus ist. Ein Workaround mittels JavaScript und dem onkeypress Eventhandler stellt eine Lösung dar.

+

Das XUL script:

+
<textbox id="pnNote" multiline="true" rows="2" cols="70" onkeypress="return pnCountNoteChars(event);"/>
+
+

Das Javascript:

+
function pnCountNoteChars(evt) {
+    //Erlaube Tasten, die keine Zeichen sind (Entfernen, Backspace etc.)
+    if ((evt.charCode == 0) && (evt.keyCode != 13))
+      return true;
+
+    if(evt.target.value.length < 10) {
+        return true;
+    } else {
+        return false;
+    }
+}
+

Verwandte Themen

+
Schnittstellen
nsIAccessibleProvider, nsIDOMXULTextboxElement
+
diff --git a/files/de/archive/mozilla/xul/treecol/index.html b/files/de/archive/mozilla/xul/treecol/index.html new file mode 100644 index 0000000000..dbfeb1c995 --- /dev/null +++ b/files/de/archive/mozilla/xul/treecol/index.html @@ -0,0 +1,262 @@ +--- +title: treecol +slug: Archive/Mozilla/XUL/treecol +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/treecol +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Eine Spalte eines tree Elementes. Dieses Element zeigt einen Spaltenkopf an und beinhaltet Informationen über Größe und andere Eingenschaften über die Spalte. Außerdem können splitter Elemente zwischen den einzelnen Spalten gesetzt werden, um Veränderungen an der Spaltengröße zu erlauben. Es sollte immer ein id Attribut für ein treecol Element festgelegt werden, um sicher zu gehen, dass die Spaltenpositionierung richtig angewendet wird.

+

Weitere Informationen finden sich im XUL Tutorial.

+
Attribute
crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortActive, sortDirection, src, type, width
+
+
Eigenschaften
accessibleType
+
+
Style Klassen
treecol-image
+
+

Beispiele

+
Image:Xul_tree_col_checked.png
+

Dieses Beispiel zeigt eine Checkbox in der ersten Spalte.

+
<tree flex="1" editable="true">
+
+  <treecols>
+    <treecol label="Active" type="checkbox" editable="true"/>
+    <treecol label="Name" flex="1" />
+  </treecols>
+
+  <treechildren>
+    <treeitem>
+      <treerow>
+      	<treecell value="true"/>
+        <treecell label="Alice"/>
+      </treerow>
+    </treeitem>
+    <treeitem>
+      <treerow>
+        <treecell value="false"/>
+        <treecell label="Bob"/>
+      </treerow>
+    </treeitem>
+  </treechildren>
+
+</tree>
+
+

Um die Checkbox auf einigen Plattformen sichtbar zu machen, müssen die folgenden Angaben zum Stylesheet hinzugefügt werden (siehe treecol.type). Bei Firefox 2.x und 3.x, benutzen alle Betriebssysteme außer Mac OS X diese Angaben bereits als Standard. Um Firefox für Mac OS X mit einzubeziehen, sollten diese Angaben auf jeden Fall notiert werden und ein eigenes Checkbox-Bild verwendet werden. Für SeaMonkey auf Mac OS X ist das Bild chrome://global/skin/checkbox/cbox-check.gif jedoch verfügbar.

+
treechildren::-moz-tree-checkbox {
+  /* nicht angewählte Baumzellen. Dieser Deklaration MUSS vor treechildren::-moz-tree-checkbox(checked) erfolgen, sonst führt es zu keinem Effekt.  */
+  list-style-image: none;
+}
+
+treechildren::-moz-tree-checkbox(checked){
+  /* css für angewählte Zellen. cbox-check.gif ist in Firefox 1, 2, und 3 auf Mac OS X nicht verfügbar, es sollte also eine URL auf ein Bild in der Erweiterung oder woanders festgelegt werden. */
+  list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif");
+}
+
+

Attribute

+

+ +
+
+ crop
+
+ Type: one of the values below
+
+ If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.
+
+
+
+ start
+
+ The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.
+
+ end
+
+ The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.
+
+ left
+
+ The text will be cropped on its left side.
+
+ right
+
+ The text will be cropped on its right side.
+
+ center
+
+ The text will be cropped in the middle, showing both the start and end of the text normally.
+
+ none
+
+ The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.
+
+
+
+ Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value none:
+
+ 
menupopup > menuitem, menupopup > menu { max-width: none; }
+
+
+
+
+ + +
+
cycler
+
Type: boolean
+
If true, then the column is a cycler column. In the case, clicking on a cell in the column will alternate its state between on and off. This is used, for example, in a mail window, for a column that indicates that the message is read or unread with a small mark in the cell. If the cycler attribute is not set, the cell is a regular text cell.
+
+
+ + +
+
dragging
+
Type: boolean
+
This attribute will be set to true if the column is being dragged. This attribute is set automatically; you shouldn't adjust it yourself.
+
+
+ + +
+
editable
+
Type: boolean
+
Allows the contents of cells in the column to be changed, especially useful when type="checkbox". When the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell.
+
+ +
+
The tree must also be marked as editable in order for this to work. Individual treecell elements in the column may be marked editable="false" in order to disable editing.
+
+
+ + +
+
fixed
+
Type: boolean
+
If true, the size of the column in the tree cannot be adjusted by the user. Any splitter to either side will resize those columns while keeping the fixed column at a constant size. If false or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse.
+
+
+ + +
+
hidden
+
Type: boolean
+
If set to true, the element is not displayed. This is similar to setting the CSS display property to 'none'.
+
+ + +
+ + +
+
hideheader
+
Type: boolean
+
Set this to true to indicate that the tree column header should be displayed without any column header styling. If you don't set a label for that column either, the header is not displayed at all.
+
+
+ + +
+
ignoreincolumnpicker
+
Type: boolean
+
If true, the column does not appear in the column picker.
+
+
+ +
label
Typ: string
Die Beschriftung für das Element. Wird das Attribut nicht angegeben, so erscheint auch kein Beschriftungstext.
+
+ +
+ + +
+
primary
+
Type: boolean
+
If set to true, the treecol will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. If no column has the primary attribute set to true, the tree may still contain nested rows, although no indication will be given to the user.  The attribute also controls whether the column picker allows the user to deselect this column.
+
+
+ + +
+
sort
+
Type: URI or XML attribute
+
Set this to a RDF property or XML attribute to have the data in the column sorted based on that property. The property will usually be the same as that of the cell label.
+
+
+ + +
+
sortActive
+
Type: boolean
+
This should be set to true for the column which should be sorted by default.
+
+
+ + +
+
sortDirection
+
Type: one of the values below
+
Set this attribute to set the direction that template-generated content is sorted. Use the sortResource attribute to specify the sort key. +
+
ascending
+
The data is sorted in ascending order.
+
descending
+
The data is sorted in descending order.
+
natural
+
The data is sorted in natural order, which means the order that it is stored in.
+
+
+
+
+ +
src
Typ: Bild-URL
Um für das treecol Element ein Bild für den Kopf, statt eines label Attribut zu benutzen, kann dieses Attribut gesetzt werden. Im Kopf können nicht gleichzeitig Bild und Beschriftung angezeigt werden. Die URL eines Bildes, das als Spaltenkopf des Baums angezeigt wird, kann mit diesem Attribut festgelegt werden. Wird das Attribut nicht angegeben, erscheint kein Bild und es wird stattdessen die Beschriftung angezeigt. Damit das Bild erscheint, muss die Klasse treecol-image für das treecol Element gesetzt werden. Ein label sollte dennoch für die Benutzung im Spaltenwähler angegeben werden, falls ignoreincolumnpicker nicht true ist und hidecolumnpicker für den tree ebenfalls nicht true ist .
+
+ +
+ + +
+
type
+
Type: one of the values below
+
The type of tree column. The default is a text column that displays the content as text.
+
+
+
checkbox
+
The content of the columns are checkboxes.
+
progressmeter
+
The content of the columns are a progress meters. This is used in Mozilla's download manager window.
+
text
+
The content of the columns is text.
+
+
+
+ + +
+ + +
+
width
+
Type: string (representing an integer)
+
The preferred width of the tree column. The value should not include a unit as all values are in pixels. Specifying widths for your columns causes Gecko to allow the tree to be scrolled horizontally if it is wider than the available space.
+
+
+

Eigenschaften

+
+

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Style Klassen

+

Die folgenden Style Klassen können verwendet werden, um das Aussehen des Elementes zu verändern. Diese Klasse sollte verwendet werden, anstatt das Aussehen des Elementes direkt zu verändern, damit es dann besser mit dem, vom Benutzer gewählten, Theme zusammenarbeiten kann.

+
treecol-image
Um ein Bild als Kopf der Baumspalte anzuzeigen, wird diese Klasse benutzt. Das Bild selbst wird über das Attribut src angegeben.
+
+

Verwandte Themen

+
Elemente
tree, treecols, treechildren, treeitem, treerow, treecell und treeseparator.
Schnittstellen
nsIAccessibleProvider
+
diff --git a/files/de/archive/mozilla/xul/vbox/index.html b/files/de/archive/mozilla/xul/vbox/index.html new file mode 100644 index 0000000000..d45736c02a --- /dev/null +++ b/files/de/archive/mozilla/xul/vbox/index.html @@ -0,0 +1,100 @@ +--- +title: vbox +slug: Archive/Mozilla/XUL/vbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/vbox +--- +
+ + « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Behälterelement, das eine gewünschte Anzahl von Kindelementen enthalten kann. Gleichwertig zum Element box, mit dem Unterschied, dass die Ausrichtung per Vorgabe vertikal ist.

+

Mehr Information im XUL Tutorial.

+

Beispiel

+
<!-- Zwei Beschriftungen am unteren Rand -->
+<vbox>
+  <spacer flex="1"/>
+  <label value="Eins"/>
+  <label value="Zwei"/>
+</vbox>
+
+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+
+
+ Elemente
+
+ box, hbox
+
diff --git a/files/de/archive/mozilla/xul/window/index.html b/files/de/archive/mozilla/xul/window/index.html new file mode 100644 index 0000000000..8dfd0cb192 --- /dev/null +++ b/files/de/archive/mozilla/xul/window/index.html @@ -0,0 +1,209 @@ +--- +title: window +slug: Archive/Mozilla/XUL/Window +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/window +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Beschreibt die Struktur eines Fensters. Dieses Element ist der Wurzelknoten eines XUL Dokuments. Das Fenster ist standardmäßig eine horizontal ausgerichtete Box und daher können alle box Attribute verwendet werden. Per Voreinstellung liegt um das Fenster ein plattform-spezifischer Rahmen.

+

Um ein Icon für das Fenster festzulegen, muss eine plattform-spezifische Icon-Datei <windowid>.ico und/oder <windowid>.xpm erstellt und in das <mozilla-verzeichnis>/chrome/icons/default/ Verzeichnis platziert oder installiert werden. Die <windowid> ist der Wert des id Attributs des Fensters. Dadurch wird für jedes Fenster ein unterschiedliches Icon ermöglicht.

+

Ohne die CSS Datei unter "chrome://global/skin/" einzubinden, wird das Fenster nicht durch CSS formatiert, unsichtbar und funktioniert nicht einwandfrei, wenn es als Dialog geöffnet wird.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
accelerated, drawintitlebar, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenX, screenY, sizemode, title, width, windowtype
+
+

Beispiele

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<!-- Extremely recommended to keep this css include!! -->
+<window id="rootWnd" title="Register Online!"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <vbox>
+    <hbox>
+      <image src="application_form.png"/>
+      <description>Register Online!</description>
+    </hbox>
+    <groupbox align="start">
+      <caption label="Your Information"/>
+      <radiogroup>
+        <vbox>
+          <hbox>
+            <label control="your-fname" value="Enter first name:"/>
+            <textbox id="your-fname" value="Johan"/>
+          </hbox>
+          <hbox>
+            <label control="your-lname" value="Enter last name:"/>
+            <textbox id="your-lname" value="Hernandez"/>
+          </hbox>
+          <hbox>
+            <button oncommand="alert('save!')">
+              <description>Save</description>
+            </button>
+          </hbox>
+        </vbox>
+      </radiogroup>
+    </groupbox>
+  </vbox>
+</window>
+
+

Attribute

+

+
accelerated
Type: boolean
Set this attribute to true to allow hardware layer managers to accelerate the window.
+
+ +
activetitlebarcolor
Typ: color string
Bestimmt die Hintergrundfarbe der Titelleiste eines Fensters, wenn es aktiv ist (Vordergrund). Außerdem versteckt dies die Trennlinie zwischen Titelleiste und Fensterinhalt. Dies trifft nur auf Mac OS Systeme zu.
+
+ +
+ +
drawintitlebar
Type: boolean
If this attribute is true, the top of the window's content area will begin at the top edge of the title bar, instead of below the title bar. This allows the window to draw in the title bar. This is supported only from window elements, and is ignored on platforms that don't support drawing into the title bar.
+
+
+ + +
+
height
+
Type: string (representing an integer)
+
The preferred height of the element in pixels. The actual displayed height may be different if the element or its contents have a minimum or maximum height. The CSS height property may also be used.
+
+
+ + +
+
hidechrome
+
Type: boolean
+
Set this attribute to true to have the chrome including the titlebar hidden.
+
+
+ + +
+
id
+
Type: unique id
+
A unique identifier so that you can identify the element with. You can use this as a parameter to getElementById() and other DOM functions and to reference the element in style sheets.
+
+ + +
+ + +
+
inactivetitlebarcolor
+
Type: color string
+
Specify background color of the window's titlebar when it is inactive (background). Moreover this hides separator between titlebar and window contents. This affects only on Mac OS X.
+
+
+ +
lightweightthemes
Type: boolean
true if the window supports lightweight themes, otherwise false.
+
+
+ +
lightweightthemesfooter
Type: id
Specifies the ID of an element to which a lightweight theme's footer image will be applied.
+
+
+ + +
+
screenX
+
Type: integer
+
The horizontal position at which the window appears on the screen.
+
+
+ + +
+
screenY
+
Type: integer
+
The vertical position at which the window appears on the screen.
+
+
+ + +
+
sizemode
+
Type: one of the values below
+
The state of the window. It can have one of the following values:
+
+
+
maximized
+
The window is maximized, and occupies the full size of the screen.
+
normal
+
The window appears in a normal state at the desired size.
+
+
+
+ +

This attribute is used to save and restore the state of a window (together with the persist attribute) and for CSS styles (e.g. to hide the resizer grippy on maximized windows).

+ +
Note: When a window is minimized, the sizemode attribute is not updated. This is done so that if a window is closed while minimized, its persisted sizemode attribute wouldn't be minimized.
+ +

Setting this attribute does not change the window state. Use window.maximize(), window.restore(), or window.minimize() to change the window state.

+ +

To get the window state from JavaScript code, use window.windowState. Listen to the sizemodechange event dispatched to the DOM window to get notified when the window state changes.

+ + +
+ + +
+
title
+
Type: string
+
The text to appear in the title bar of the window.
+
+
+ + +
+
width
+
Type: string (representing an integer)
+
The preferred width of the element. The value should not include a unit as all values are in pixels. The actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the flexibility or alignment of its parent. The CSS width property may also be used.
+
+ + +
+ +
+
+ windowtype
+
+ Type: string
+
+ Set to a string which can be used to identify the type of window. This might be used, for example, to distinguish between a browser window and an editor window. Some of Mozilla's window handling functions use this attribute to group windows of the same type together.
+
+
+

Values for window type as found on MXR: http://mxr.mozilla.org/mozilla-release/search?string=windowtype

+

navigator:browser - Looks like if window has gBrowser it has this window type

+

devtools:scratchpad - Scratchpad windows

+

navigator:view-source - The view source windows

+
+ +

 

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Hinweise

+

Die Fehlermeldung "XML Parsing Error: undefined entity...<window" kann durch eine fehlende oder nicht erreichbare DTD Datei, die in der XUL Datei angegeben wurde, verursacht werden. Ein Dateiname mit einem SYSTEM Schlüsselwort in einer DOCTYPE Deklaration kann unter Umständen auch nicht geladen werden, ohne dass eine solche Fehlermeldung ausgegeben wird. In diesem Fall kann die Fehlermeldung ein nicht definierter Entity Fehler am nächsten XUL Element sein.

+

Verwandte Themen

+
Elemente
prefwindow, dialog, dialogheader
+
+
Fenster in Chrome

Benutzerhinweise

Um das Icon der Fenstertitelleiste zu ändern siehe: Fenster Icons.

Um ein Favicon zur Adressleiste und zum Tab hinzufügen, kann der folgende Codeschnipsel verwendet werden.

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+
+<!-- Icon from chrome -->
+<html:link rel="icon" href="chrome://myExtension/content/path/to/favicon.png"/>
+
+<!-- From a remote site -->
+<html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/>
+
diff --git a/files/de/archive/mozilla/xul/xul_referenz/index.html b/files/de/archive/mozilla/xul/xul_referenz/index.html new file mode 100644 index 0000000000..b92aa1361e --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_referenz/index.html @@ -0,0 +1,15 @@ +--- +title: XUL Referenz +slug: Archive/Mozilla/XUL/XUL_Referenz +tags: + - XUL + - XUL Referenz +translation_of: Archive/Mozilla/XUL/XUL_Reference +--- +

« XUL Referenz «

+

Alphabetische Liste aller XUL Elemente

+
  1. action
  2. arrowscrollbox
  3. assign
  4. bbox
  5. binding
  6. bindings
  7. box
  8. broadcaster
  9. broadcasterset
  10. button
  11. browser
  12. checkbox
  13. caption
  14. colorpicker
  15. column
  16. columns
  17. commandset
  18. command
  19. conditions
  20. content
  21. datepicker
  22. deck
  23. description
  24. dialog
  25. dialogheader
  26. dropmarker
  27. editor
  28. grid
  29. grippy
  30. groupbox
  31. hbox
  32. iframe
  33. image
  34. key
  35. keyset
  36. label
  37. listbox
  38. listcell
  39. listcol
  40. listcols
  41. listhead
  42. listheader
  43. listitem
  44. member
  45. menu
  46. menubar
  47. menuitem
  48. menulist
  49. menupopup
  50. menuseparator
  51. notification
  52. notificationbox
  53. observes
  54. overlay
  55. page
  56. panel
  57. param
  58. popupset
  59. preference
  60. preferences
  61. prefpane
  62. prefwindow
  63. progressmeter
  64. query
  65. queryset
  66. radio
  67. radiogroup
  68. resizer
  69. richlistbox
  70. richlistitem
  71. row
  72. rows
  73. rule
  74. scale
  75. script
  76. scrollbar
  77. scrollbox
  78. scrollcorner
  79. separator
  80. spacer
  81. spinbuttons
  82. splitter
  83. stack
  84. statusbar
  85. statusbarpanel
  86. stringbundle
  87. stringbundleset
  88. tab
  89. tabbrowser (Firefox-only ab Firefox 3/Gecko 1.9)
  90. tabbox
  91. tabpanel
  92. tabpanels
  93. tabs
  94. template
  95. textnode
  96. textbox
  97. textbox (Firefox autocomplete)
  98. textbox (Mozilla autocomplete)
  99. timepicker
  100. titlebar
  101. toolbar
  102. toolbarbutton
  103. toolbargrippy
  104. toolbaritem
  105. toolbarpalette
  106. toolbarseparator
  107. toolbarset
  108. toolbarspacer
  109. toolbarspring
  110. toolbox
  111. tooltip
  112. tree
  113. treecell
  114. treechildren
  115. treecol
  116. treecols
  117. treeitem
  118. treerow
  119. treeseparator
  120. triple
  121. vbox
  122. where
  123. window
  124. wizard
  125. wizardpage
    126. +
+

Kategorische Liste aller XUL Elemente

+

« XUL Referenz «

+

    Fenster

    1. dialog
    2. overlay
    3. page
    4. window
    5. wizard
    6. wizardpage
    7. preference
    8. preferences
    9. prefpane
    10. prefwindow

    Fensterstrukturen

    1. browser
    2. tabbrowser
    3. editor
    4. iframe
    5. titlebar
    6. resizer
    7. statusbar
    8. statusbarpanel
    9. dialogheader
    10. notification
    11. notificationbox

    Menüs und Popups

    1. menubar
    2. menu
    3. menuitem
    4. menuseparator
    5. menupopup
    6. panel
    7. tooltip
    8. popupset

    Toolbars

    1. toolbar
    2. toolbarbutton
    3. toolbargrippy
    4. toolbaritem
    5. toolbarpalette
    6. toolbarseparator
    7. toolbarset
    8. toolbarspacer
    9. toolbarspring
    10. toolbox

    Tabs und Gruppierungen

    1. tabbox
    2. tabs
    3. tab
    4. tabpanels
    5. tabpanel
    6. groupbox
    7. caption
    8. separator
    9. spacer

    Kontrollelemente

    1. button
    2. checkbox
    3. colorpicker
    4. datepicker
    5. menulist
    6. progressmeter
    7. radio
    8. radiogroup
    9. scale
    10. splitter
    11. textbox
    12. textbox (Firefox autocomplete)
    13. textbox (Mozilla autocomplete)
    14. timepicker

    Text und Bilder

    1. description
    2. label
    3. image

    Listen

    1. listbox
    2. listitem
    3. listcell
    4. listcol
    5. listcols
    6. listhead
    7. listheader
    8. richlistbox
    9. richlistitem

    Trees

    1. tree
    2. treecell
    3. treechildren
    4. treecol
    5. treecols
    6. treeitem
    7. treerow
    8. treeseparator

    Layout

    1. box
    2. hbox
    3. vbox
    4. bbox
    5. deck
    6. stack
    7. grid
    8. columns
    9. column
    10. rows
    11. row
    12. scrollbox

    Templates

    1. action
    2. assign
    3. binding
    4. bindings
    5. conditions
    6. content
    7. member
    8. param
    9. query
    10. queryset
    11. rule
    12. template
    13. textnode
    14. triple
    15. where

    Scripting

    1. script
    2. commandset
    3. command
    4. broadcaster
    5. broadcasterset
    6. observes
    7. key
    8. keyset
    9. stringbundle
    10. stringbundleset

    Hilfselemente

    1. arrowscrollbox
    2. dropmarker
    3. grippy
    4. scrollbar
    5. scrollcorner
    6. spinbuttons

    Andere XUL Listen

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html b/files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html new file mode 100644 index 0000000000..e742e6f280 --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html @@ -0,0 +1,39 @@ +--- +title: Die Chrome URL +slug: Archive/Mozilla/XUL/XUL_Tutorial/Die_Chrome_URL +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL +--- +

{{ PreviousNext("XUL_Tutorial/XUL_Struktur", "XUL_Tutorial/Manifest_Dateien") }}

+

Der folgende Abschnitt beschreibt wie man Bezug zu weiteren XUL-Dokumenten und Chrome-Dateien herstellen kann.

+

Die Chrome-URL

+

XUL-Dateien können über eine reguläre HTTP-URL (oder jeder andere Typ einer URL) genau wie HTML-Dateien aufgerufen werden. Pakete, die jedoch in Mozillas chrome-System gespeichert sind, können mit speziellen chrome-URLs aufgerufen werden. Die Pakete, die in Mozilla vorhanden sind, sind bereits installiert und Sie können zudem Ihre eigenen registrieren.

+

Installierte Pakete haben den Vorteil, dass sie über keine Sicherheitsbeschränkungen verfügen, welche für viele Anwendungen von Bedeutung sind. Ein weitere Vorteil gegenüber anderen URL-Typen ist, dass sie automatisch mehrere Themes und Orte handhaben. Eine chrome-URL kann sich auf eine Theme-Datei beziehen, ohne zu wissen, welches Theme überhaupt installiert ist. Da die Dateinamen in allen Themes die gleichen sind, können Sie einfach eine Datei beziehen, die über die chrome-URL angegeben wird. Mozilla bestimmt dann wo die Datei zu finden ist und gibt dann die richtige Datei zurück. Das bedeutet auch, dass es egal ist wo das Paket installiert ist. Die chrome-URLs sind unabhängig davon wo die Dateien tatsächlich liegen. Das vereinfacht es ungemein Anwendungen zu schreiben, die eine Vielzahl von Dateien verwendet und Sie sich keine Gedanken machen brauchen, wo Sie die Dateien speichern.

+

Die grundlegende Schreibweise einer chrome-URL ist die folgende:

+
chrome://<package name>/<part>/<file.xul>
+
+

Der Platzhalter <package name> ist der Paketname, wie z.B. messenger oder editor. Alle Paketnamen sind case-insensitiv, aber Kleinbuchstaben werden bevorzugt. <part> ist entweder 'content', 'skin' oder 'locale', abhängig davon, welchen Teil sie möchten. <file.xul> ist einfach der Dateiname.

+

Beispiel: chrome://messenger/content/messenger.xul

+

Das Beispiel hier bezieht sich auf das Messenger-Fenster. Sie könnten sich auch auf eine Datei beziehen, die Teil eines Skins ist, indem Sie 'content' durch 'skin' ersetzen und den Dateinamen entsprechend ändern. Genauso könnten Sie 'locale' statt 'content' angeben.

+

Wenn Sie eine chrome-URL öffnen, schaut Mozilla durch die Liste der installierten Pakete und versucht eine JAR-Datei oder ein Verzeichnis zu finden, das auf den angeben Paketnamen und <part> zutrifft. Die Zuordnung von chrome-URLs und JAR-Dateien sind in den Manifest-Dateien festgelegt, welche sich im chrome-Verzeichnis befinden. Wenn Sie die messenger.jar-Datei verschieben und die Manifest-Datei entsprechend ändern wird Thunderbird weiterhin funktionieren, denn es ist nicht von einem bestimmten Installationsort abhängig. Indem wir chrome-URLs verwenden lassen wir solche Details Mozilla machen. Auch wenn der Benutzer das verwendete Theme ändert, wird der 'skin'-Teil der chrome-URL in ein anderes Verzeichnis übersetzt und XUL-Dateien und Skripte brauchen nicht geändert zu werden.

+

Hier sind noch ein paar Beispiele. Beachten Sie, dass keine URL ein Theme oder eine Lokalisierung festlegen.

+
chrome://messenger/content/messenger.xul
+chrome://messenger/content/attach.js
+chrome://messenger/skin/icons/folder-inbox.gif
+chrome://messenger/locale/messenger.dtd
+
+

Um auf Unterverzeichnisse zuzugreifen, können Sie diese einfach am Ende der chrome-URL hinzufügen. Die folgenden URLs beziehen sich auf das Lesezeichenfenster, für Mozilla-Suite und Firefox, da der Paketname unterschiedlich ist:

+
chrome://communicator/content/bookma...rksManager.xul (Mozilla)
+chrome://browser/content/bookmarks/b...rksManager.xul (Firefox)
+
+

Sie können chrome-URLs überall verwenden, wo auch normale URLs verwendet werden können. Sie können sie sogar in die Adresszeile des Mozilla Browsers eingeben. Wenn Sie eine der oben genannten URLs eingeben, sollten Sie sehen, dass ein Fenster wie eine Webseite geöffnet wird und so funktioniert wie ein separates Fenster. Einige Dialogboxen funktionieren vielleicht nicht richtig, weil sie eventuelle Argumente erwarten, die ihnen beim Aufrufen nicht übergeben worden sind.

+

Es kommen außerdem auch chrome-URLs ohne Dateinamen vor, zum Beispiel:

+
chrome://browser/content/
+
+

In diesem Fall wurde nur der Paketname und der Teilabschnitt angegeben. Dieser Referenztyp wird automatisch eine passende Datei aus diesem Verzeichnis auswählen. Für content wird eine Datei mit dem selben Namen des Pakets und XUL-Erweiterung ausgewählt. Im obigen Beispiel wird die Datei browser.xul ausgewählt. Für messenger würde messenger.xul ausgewählt werden. Wenn Sie Ihre eigene Anwendung erstellen, möchten Sie vielleicht eine Datei für Ihr Hauptfenster, mit dem selben Namen wie das Paket, erstellen. Dann kann ein Bezug in dieser verkürzten Form hergestellt werden.

+

Bei einem Skin wird die Datei <package name>.css ausgewählt; für eine Lokalisierung wird die Datei <package name>.dtd ausgewählt.

+

Denken Sie daran, dass die chrome-URL sich nicht auf den physikalischen Pfad auf der Festplatte bezieht. Die ersten beiden Stücke der chrome-URL sind der Paketname und der Teilabschnitt (entweder content, skin oder locale).

+

Im nächsten Abschnitt schauen wir uns an, wie wir .manifest-Dateien und Pakete erstellen können.

+

{{ PreviousNext("XUL_Tutorial/XUL_Struktur", "XUL_Tutorial/Manifest_Dateien") }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html b/files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html new file mode 100644 index 0000000000..54c31683a0 --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html @@ -0,0 +1,111 @@ +--- +title: Ein Fenster erzeugen +slug: Archive/Mozilla/XUL/XUL_Tutorial/Ein_Fenster_erzeugen +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window +--- +

{{ PreviousNext("XUL_Tutorial/Manifest_Dateien", "XUL_Tutorial/Buttons_hinzufügen") }}

+ +

Zunächst wollen wir uns mit der Syntax einer XUL-Datei beschäftigen.

+ +

Eine XUL Datei erstellen

+ +

Der Name einer XUL Datei kann frei gewählt werden, es sollte jedoch darauf geachtet werden, dass die Endung .xul verwendet wird. Die einfachste XUL Datei hat folgende Struktur:

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<!-- Other elements go here -->
+</window>
+
+ +

Dieses Fenster wird keine Funktion haben, da es keine weitere UI-Elemete enthält. Diese werden im nächsten Abschnitt hinzugefügt. Der Code wird im folgenden Zeile für Zeile erklärt:

+ +
    +
  1. <?xml version="1.0"?>
    + Diese Zeile zeigt, dass dies eine XML Datei ist. Diese Zeile sollte in jeder XUL Datei als erstes stehen.
    2. +
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    + Diese Zeile wird gebraucht um festzulegen, welches Style Sheet für diese Datei verwendet wird. Dies ist die Syntax wie XML Dateien Style Sheets importieren. In diesem Fall importieren wir ein Style Sheet welches sich im globalen Teil eines Skins befindet. Wir legen keine spezifische Datei fest, so dass Mozilla selbst entscheidet, welche Datei verwendet werden soll. In diesem Fall wird die Datei global.css verwendet. Diese Datei enthält alle Standard-Deklarationen für jedes XUL Element. Weil XML selbst nicht weiß wie die Elemente dargestellt werden sollten, brauch es diese Datei, welche dies festlegt. Normalerweise wird diese Zeile ebenfalls an den Anfang einer jeden XUL Datei geschrieben. Es können auch andere Style Sheets mit der selben Syntax importiert werden. Das globale Style Sheet wird normalerweise aus dem eigenen Style Sheet importiert.
    3. +
  3. <window
    + Diese Zeile gibt an, dass ein {{ XULElem("window") }} beschrieben wird. Jedes User Interface wird in einer eigenen Datei beschrieben. Dieser Tag ist wie ein HTML Tag welcher ein gesamtes HTML Dokument umfasst, mit dem Unterschied dass hier ein User Interface beschrieben wird. Einige Attribute können im {{ XULElem("window") }} Tag platziert werden, hier sind es vier. In diesem Beispiel wird jedes Attribut in einer eigenen Zeile beschrieben, dies ist jedoch nicht zwingend.
    4. +
  4. id="findfile-window"
    + Das {{ XULAttr("id") }} Attribut wird zur Identifizierung gebraucht, damit später auf das Fenster per Skript zugegriffen werden kann. Im Normalfall sollte ein id Attribut bei allen Elementen vorhanden sein. Der Name kann frei gewählt werden, er sollte jedoch sinnvoll sein.
    5. +
  5. title="Find Files"
    + Das {{ XULAttr("title") }} Attribut beschreibt den Text, welcher in der Titelzeile des Fensters erscheinen soll. In unserem Fall wird es 'Find Files' sein.
    6. +
  6. orient="horizontal"
    + Das {{ XULAttr("orient") }} Attribut beschreibt die Anordnung der Elemente in diesem Fenster. Der Wert horizontal zeigt, dass die Elemente horizontal über dem Fenster verteilt werden. Es kann auch der Wert vertical verwendet werden, welcher meint, dass die Elemente in einer Spalte verteilt werden. Dies ist der Standardwert, das heißt, dass man dieses Attribut weglassen kann, wenn man eine vertikale Ausrichtung möchte.
    7. +
  7. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> Diese Zeile deklariert den Namensraum für XUL, welcher im Fenster deklariert sein sollte um festzulegen, dass alle Nachfolger XUL sind. Diese URL wird niemals heruntergeladen. Mozilla wird diese URL intern verarbeiten.
    8. +
  8. <!-- Other elements go here -->
    + Ersetze diesen Kommentar Block durch andere Elemente (Buttons, Menüs und andere User Interface Komponenten), welche im Fenster angezeigt werden sollten. Wir werden ein paar von ihnen zu einem späteren Zeitpunkt hinzufügen.
    9. +
  9. </window>
    + Zum Schluss brauchen wir das {{ XULElem("window") }} Tag, um das Ende der Datei anzuzeigen.
    10. +
+ +

Ein Fenster öffnen

+ +

Um ein XUL Fenster zu öffnen gibt es verschiedene Methoden. Wenn Sie sich nur in der Entwicklungsphase befinden, können Sie einfach die URL ("chrome:", "file:" oder weitere) in die Adresszeile des Browserfensters eingeben. Sie können auch einfach auf einen Doppelklick auf die Datei ausführen, wenn XUL Dateien mit Mozilla verknüpft sind. Das XUL Fenster erscheint im Browserfenster als neues Fenster, aber das ist meistens ungenügend während der Entwicklung.

+ +

Der korrekte Weg ist natürlich ein Fenster über JavaScript zu öffnen. Es ist kein neuer Syntax dazu notwendig, denn die window.open() Funktion kann genau wie für HTML Dokumente dazu verwendet werden. Es ist jedoch ein zusätzlicher Parameter "flag" nötig. In diesem Fall muss 'chrome' angeben werden, damit klar ist, dass ein chrome Dokument geöffnet werden soll. Dieses Stück Code wird dafür sorgen, dass ein Fenster ohne Toolbars und Menüs geöffnet wird:

+ +
window.open(url,windowname,flags);
+ +

wobei "flags" das Schlüsselwort "chrome" wie in diesem Beispiel enthält:

+ +
window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
+
+ +
+

Wenn Sie Firefox verwenden:

+ +
window.open("chrome://browser/content/places/places.xul", "bmarks", "chrome,width=600,height=300");
+
+ +

Diese Zeile kann auch in der Fehlerkonsole getestet werden. Wählen Sie Extras -> Fehlerkonsole, tippen Sie die Zeile JavaScript ein und drücken Sie auf Evaluieren oder benutzen Sie die Enter-Taste.

+ +
Das findfile.xul Beispiel
+ +

Fangen wir an die Basisdatei für den Dateisuche-Dialog zu schreiben. Erstellen Sie die Datei findfile.xul und packen Sie diese in das content Verzeichnis, welches von der finndfile.manifest Datei festgelegt wurde (haben wir im vorherigen Abschnitt festgelegt). Fügen Sie die XUL Vorlage von oben zu dieser Datei hinzu und speichern Sie diese ab.

+
+ +

Sie können den Kommandozeilenparameter '-chrome' verwenden, um die XUL Datei mit Mozilla zu starten. Wird dies nicht festgelegt, wird das Standardfenster geöffnet (normalerweise das Browserfenster). Wir können zum Beispiel den Dateisuche-Dialog mit einem der folgenden Zeilen öffnen:

+ +
mozilla -chrome chrome://findfile/content/findfile.xul
+
+mozilla -chrome resource:/chrome/findfile/content/findfile.xul
+
+ +

Wenn Sie einen dieser Kommandos in einer Eingabeaufforderung (angenommen Sie verfügen übere eine auf Ihrem System) eingeben, wird der Dateisuche-Dialog standardmäßig geöffnet, anstatt des normalen Mozilla Browserfensters. Da wir allerdings noch keine UI-Elemente in das Fenster gepackt haben, sehen Sie zunächst nichts. Im nächsten Abschnitt werden wir Elemente hinzufügen.

+ +

Um den Effekt dennoch zu beobachten, können Sie mit der folgenden Zeile das Lesezeichenfenster öffnen:

+ +
mozilla -chrome chrome://communicator/content/bookmarks/bookmarksManager.xul
+ +

Wenn Sie Firefox benutzen:

+ +
firefox -chrome chrome://browser/content/places/places.xul
+ +

Das '-chrome' Argument gibt der Datei keine gesonderten Rechte. Stattdessen kann es dadurch als Top-level Fenster in jedem Browser angezeigt werden, ohne Adressleiste oder Menüs. Nur chrome: URLs haben diese zusätzlichen Rechte.

+ +
Die Erweiterungsentwickler Erweiterung enthält einen XUL Editor, der den eingegebenen XUL-Code in Echtzeit wiedergibt!
+ +

Problemlösung

+ + + +
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+ +

Im nächsten Abschnitt werden wir ein paar Buttons zum Fenster hinzufügen.

+ +

{{ PreviousNext("XUL_Tutorial/Manifest_Dateien", "XUL_Tutorial/Buttons_hinzufügen") }}

+ +

{{ languages( { "en": "en/XUL_Tutorial/Creating_a_Window", "fr": "fr/Tutoriel_XUL/Cr\u00e9er_une_fen\u00eatre", "ja": "ja/XUL_Tutorial/Creating_a_Window", "pl": "pl/Kurs_XUL/Tworzenie_okna", "es": "es/Tutorial_de_XUL/Creando_una_ventana" } ) }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html b/files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html new file mode 100644 index 0000000000..93aa98324a --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html @@ -0,0 +1,33 @@ +--- +title: Einführung +slug: Archive/Mozilla/XUL/XUL_Tutorial/Einfuehrung +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction +--- +

{{ Next("XUL_Tutorial/XUL_Struktur") }}

+

Dieses Tutorial ist eine Anleitung für das Erlernen von XUL (XML User Interface Language). XUL ist eine plattformübergreifende Sprache, um die Benutzer-Schnittstellen (z.B. GUI) einer Anwendung zu beschreiben.

+

Dieses Tutorial demonstriert die Erstellung eines einfachen "Datei suchen"-Dialogs, in der Art des "Sherlock" auf dem Macintosh oder des "Suchen"-Dialogs von Windows. Bitte beachten Sie, dass nur das Fenster (GUI) erstellt wird. Dieses beinhaltet sehr eingeschränkte Funktionalität. Das tatsächliche Auffinden von Dateien ist nicht implementiert. An den Stellen, wo der "Datei suchen"-Dialog bearbeitet wird, ist am linken Rand eine blaue Linie gemalt. Sie können der Entwicklung des Dialogs einfach folgen, indem Sie die so markierten Stellen lesen.

+

Was ist XUL und warum wurde es entwickelt?

+

XUL (ausgesprochen "zuul" und reimt sich auf "cool") wurde entwickelt, um die Entwicklung des Mozilla-Browsers zu vereinfachen und zu beschleunigen. Es ist eine XML-Sprache und somit gelten alle Eigenschaften von XML auch für XUL.

+

Die meisten Anwendungen benötigen bei ihrer Entwicklung plattform-spezifische Abhängigkeiten und Eigenschaften - die Entwicklung von plattform-unabhängiger Software ist zeitraubend und teuer. In den letzten Jahren wurde eine Vielzahl von plattform-übergreifenden Anwendungen entwickelt. Die Programmiersprache Java hat zum Beispiel die Plattformunabhängigkeit als herausragende Eigenschaft. XUL ist eine Sprache, die speziell für plattform-übergreifende Benutzerschnittstellen (GUIs) entwickelt wurde. Es dauert lange, um eine Anwendung zu entwickeln - selbst für eine Plattform. Die Zeit des Kompilierens und Debuggens kann sich sehr strecken. Mit XUL kann die Benutzerschnittstelle schnell und einfach implementiert und geändert werden.

+

XUL hat alle Vorteile von anderen XML-Sprachen. Es können zum Beispiel XHTML oder andere XML-Sprachen, wie MathML oder SVG eingebunden werden. Zudem ist angezeigter Text in XUL einfach an den Standort des Anwenders anzupassen. Das heißt er kann mit wenig Aufwand in andere Sprachen übersetzt werden.

+

Welche Art von Benutzerschnittstellen können mit XUL erstellt werden?

+

XUL bietet die Möglichkeit die meisten Elemente zu erstellen, die in modernen Benutzeroberflächen vorkommen. Einige dieser Elemente sind:

+ +

Der angezeigte Inhalt kann mit dem Inhalt aus XUL-Dateien oder aus Datenquellen erstellt werden. In Mozilla schließen solche Datenquellen die Mailbox eines Anwenders, seine Lesezeichen und Suchergebnisse ein. Die Inhalte von Menüs, Bäumen und anderen Elementen können mit diesen Daten befüllt werden oder mit Ihren eigenen Daten, die in RDF-Dateien bereitgestellt werden.

+

Es gibt verschieden Arten, um XUL zu nutzen:

+ +

Die ersten drei Arten benötigen alle die Ausführung einer Installation auf dem Computer des Anwenders. Diese Arten haben dadurch keine Sicherheitsbeschränkungen, sodass sie, zum Beispiel, das lokale Dateisystem lesen und schreiben können. Für eine Erweiterung werden die XUL-Dateien und zugehörige Skripte und Bilddateien der Anwendung in einer einzigen Datei zusammengepackt, die vom Anwender heruntergeladen und installiert wird. Mozilla-Anwendungen, wie der Firefox, bieten einen Erweiterungsmanager an, der es erlaubt, Installationen zusammenzustellen, ohne viel komplizierten Code schreiben zu müssen.

+

Es ist auch möglich XUL-Dateien direkt aus dem Dateisystem oder von einer Webseite zu starten. Diese sind aber in ihren Möglichkeiten eingeschränkt und einige Aspekte von XUL können nicht ausgeführt werden. Wenn Sie XUL-Inhalte von einer entfernten Webseite laden möchten, muss der Webserver so eingestellt sein, dass er XUL-Dateien mit dem Content-Type "application/vnd.mozilla.xul+xml" senden kann. XUL-Code wird normalerweise in Dateien mit der Endung ".xul" gespeichert. Sie können XUL-Dateien in Mozilla wie jede andere Datei (z.B. HTML) öffnen, indem Sie die "Öffnen mit..."-Option im Datei-Explorer für eine solche Datei auswählen oder den Ort der Datei direkt in die Adressleiste des Mozilla Browsers eingegeben.

+

Welches Vorwissen brauche ich für dieses Tutorial?

+

Sie sollten eine Vorstellung von HTML und zumindest grundsätzliches Verständnis von XML und CSS haben. Hier sind einige Richtlinien:

+ +

XUL wird in Mozilla-Browsern unterstützt, die auf der Gecko-Engine basieren, z.B. Netscape 6 oder höher und Mozilla Firefox. Trotz diverser Änderungen in der XUL-Syntax, sollten die aktuellen Versionen der Beispiele korrekt ablaufen. Die meisten Beispiele sollten unter Mozilla 1.0 oder höher laufen. XUL ist ziemlich ähnlich in Firefox und anderen Browsern, obwohl es kleine Unterschiede gibt, wie zum Beispiel die Unterstützung für anpassbare Werkzeugleisten.

+

Dieses Tutorial versucht viel von der XUL-Funktionalität abzudecken, aber es können nicht alle Themen behandelt werden. Wenn Sie einmal vertraut mit XUL sind, können Sie die XUL-Referenz benutzen, um mehr über Eigenschaften von bestimmten Elementen herauszufinden.

+

{{ Next("XUL_Tutorial/XUL_Struktur") }}

+

{{ languages( { "en": "en/XUL_Tutorial/Introduction", "es": "es/Tutorial_de_XUL/Introducci\u00f3n", "fr": "fr/Tutoriel_XUL/Introduction", "ja": "ja/XUL_Tutorial/Introduction", "ko": "ko/XUL_Tutorial/Introduction", "pl": "pl/Kurs_XUL/Wprowadzenie", "zh-cn": "cn/XUL_\u6559\u7a0b/\u5f15\u8a00", "ru": "ru/\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e_\u043f\u043e_XUL/\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435" } ) }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/index.html b/files/de/archive/mozilla/xul/xul_tutorial/index.html new file mode 100644 index 0000000000..5cf8ecb42d --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/index.html @@ -0,0 +1,57 @@ +--- +title: XUL Tutorial +slug: Archive/Mozilla/XUL/XUL_Tutorial +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial +--- +

Dieses Tutorial beschreibt XUL, die »XML User-Interface Language«. Diese Sprache wurde für die Anwendung Mozilla entwickelt und wird verwendet, um die Nutzerschnittstelle (GUI) für die Anwendung zu beschreiben.

+
Einführung
+ +
Einfache Elemente
+ +
Das Box-Modell
+ +
Weitere Layout-Elemente
+ +
Toolbars und Menüs
+ +
Ereignisse und Scripte
+ +
Das DOM (Document Object Model)
+ +
Bäume
+ +
RDF und Vorlagen
+ +
Skins und Locales
+ +
Bindings
+ +
Spezielle Fenster-Typen
+ +
Installation
+ +
+

Dieses XUL-Tutorial wurde ursprünglich von Neil Deakin geschrieben. Er hat die Erlaubnis gegeben, es als Teil des MDC zu nutzen.

+
+
+
Informationen zum Originaldokument
+ +
+

{{ languages( { "zh-cn": "cn/XUL_\u6559\u7a0b", "en": "en/XUL_Tutorial", "es": "es/Tutorial_de_XUL", "fr": "fr/Tutoriel_XUL", "ja": "ja/XUL_Tutorial", "ko": "ko/XUL_Tutorial", "pl": "pl/Kurs_XUL", "ru": "ru/\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e_\u043f\u043e_XUL" } ) }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html b/files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html new file mode 100644 index 0000000000..cf11ed3b11 --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html @@ -0,0 +1,96 @@ +--- +title: Installations-Skripte +slug: Archive/Mozilla/XUL/XUL_Tutorial/Installations-Skripte +translation_of: Archive/Mozilla/XUL/Tutorial/Install_Scripts +--- +
+

« zurückweiter »

+
+

Dieser Abschnitt beschreibt das Installationsskript.

+

Erstellen eines Installationsskripts

+
+ Hinweis: Für Firefox Erweiterungen, werden install.js Dateien nicht weiter verwendet. Es sollte ein install.rdf stattdessen erstellt werden.
+

In der Regel möchten Sie den Installationsprozess steuern können. Zum Beispiel möchten Sie vielleicht Datei-Versionen überprüfen und nur aktualisierte Dateien installieren oder Sie möchten Fehler in existierenden Dateien beheben. Das Installationsskript ist flexibel genug, um sogar Dateien zu deinstallieren. Aus diesen Gründen sollten Installationen ein Installationsskript an Board haben, um den Installationsprozess zu regeln.

+

Das Installationsskript muss "install.js" genannt werden und muss im Wurzelverzeichnis des Installationsverzeichnisses platziert werden. Das Skript wird JavaScript Code enthalten, welcher eine Reihe von Installationsfunktionen aufruft.

+

In einem HTML Dokument oder einem XUL Dokument ist das "window" Objekt das Wurzelobjekt. Das bedeutet, dass Sie die Methoden des window-Objekts ohne einem Qualifier davor aufrufen können, zum Beipiel kann statt window.open() einfach open() geschrieben werden. In einem Installationsskript gibt es kein Fenster, jedoch ist das globale Objekt das Install Objekt, welches eine Reihe von Funktionen zur Anpassung des Installationsprozess mit sich bringt. Einige der Install-Ojekt Funktionen werden weiter unter beschrieben.

+

Das Installationsskript sollte die folgenden Schritte ausführen:

+
    +
  1. Initialisiere die Installation in dem festgelegt wird, welche Version und Paket installiert werden soll.
    2. +
  2. Benutze die Installationsfunktionen, um zu bestimmen, welche Dateien und Verzeichnisse installiert werden müssen. Sie können außerdem Dateien festlegen, die gelöscht oder verschoben werden sollen.
    3. +
  3. Starte den Installationsprozess der nötigen Dateien.
    4. +
+

Es ist wichtig zu beachten, dass während Schritt zwei, nur angegeben wird, welche Dateien installiert werden sollen und welche weiteren Operationen ausgeführt werden sollen. Es werden keine Dateien bis zum dritten Schritt kopiert. Sie können daher sehr einfach eine Reihe von Dateien festlegen, die installiert werden sollen, stolpern eventuell über einen Fehler und können den Prozess abbrechen, ohne dass das System des Benutzers verändert wird.

+

Die Komponentenregistrierung

+

Mozilla verfügt über eine Registrierungsdatei, welche alle Komponenten enthält, die momentan installiert sind. Komponenten sind Chrome Pakete, Skins und Plugins. Wird eine neue Komponente installiert, wird die Registrierungsdatei aktualisiert. Die Registrierung speichert auch Dateisets und Versionsinformationen über die installierten Komponenten. Daher ist es sehr einfach die Versionen Ihrer Komponente zu prüfen und zu ermitteln, ob die Komponente bereits verfügbar ist und eventuell aktualisiert werden muss.

+

Die Komponentenregistrierung arbeit ähnlich wie die Windows Registrierung. Sie besteht aus der hierarchischen Anordnung von Schlüsseln und Werten. Dabei müssen Sie nicht viel darüber wissen, um XUL Anwendungen zu erstellen, es sei denn Sie wollen eigene XPCOM Komponenten erstellen.

+

Was Sie für eine Installation wissen müssen, ist, dass die Registrierung eine Reihe von Informationen über Ihre Anwendung speichert, zum Beispiel eine Liste der Dateien und Versionen. Die gesamten Informationen werden in einem Schlüssel gespeichert (und in Unter-Schlüsseln), welche Sie im Installationsskript angeben (in Schritt eins oben genannt).

+

Dieser Schlüssel ist wie in Verzeichnissen in der folgenden Form strukturiert:

+
/Autor/Paketname
+
+

Ersetzen Sie das Wort "Author" mit Ihrem Name und "Paketname" mit dem Namen Ihres Pakets, welches Sie installieren möchten. Zum Beispiel:

+
/Xulplanet/Find Files
+
+/Netscape/Personal Security Manager
+
+

Das erste Beispiel werden wir für den Dateisuche-Dialog verwenden. Das zweite Beispiel wird vom Personal Security Manager benutzt.

+

Initialisierung der Installation

+

Das Install Objekt hat eine Funktion, initInstall(), welche zur Initialisierung der Installation gebraucht wird. Es sollte am Anfang des Installationsskript aufgerufen werden. Die Syntax dieser Funktion ist die folgende:

+
initInstall( ''packageName'' , ''regPackage'' , ''version'' );
+

Ein Beispiel

+
initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");
+ +

Als nächstes müssen wir das Verzeichnis festlegen, wo die Dateien installiert werden sollen. Es gibt zwei Möglichkeiten.

+ +

Die Funktion setPackageFolder() legt ein Installationsverzeichnis fest. Für den Dateisuche-Dialog werden wir die Dateien in das Chrome-Verzeichnis installieren. (Wir könnten sie überall speichern). Die Funktion setPackageFolder() nimmt ein Argument an, das Installationsverzeichnis. Für maximale Portabilität kann kein String-Name für das Verzeichnis festgelegt werden. Stattdessen wird ein Identifier eines bekannten Verzeichnis verwendet und dann werden dort Unterverzeichnisse erstellt. Falls Ihre Anwendung Systembibliotheken installieren muss, brauchen Sie den Pfad dieser Verzeichnisse nicht zu wissen.

+

Die Verzeichnis-Identifiers sind in der XULPlanet Referenz aufgelistet. Für das Chrome-Verzeichnis ist der Identifier 'Chrome'. Die getFolder() Funktion kann verwendet werden, um eine der speziellen Verzeichnisse zu bekommen. Diese Funktion nimmt zwei Argumente, das erste ist der Identifier und das zweite ist ein Unterverzeichnis. Zum Beispiel:

+
findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+
+

Hier bekommen wir das "findfile" Verzeichnis im Chrome-Ordner und reichen dies an die setPackageFolder() Funktion weiter. Das zweite Argument für getFolder() ist das Unterverzeichnis in dem wir installieren werden, was nicht bedeutet, dass es existieren muss. Dieses Argument kann weggelassen werden, wenn Sie kein Unterverzeichnis benötigen.

+

Installationsdateien festlegen

+

Als nächstes müssen die Dateien festgelegt werden, die installiert werden sollen. Das erfordert die Verwendung der Funktionen addDirectory() und addFile(). Die addDirectory() Funktion teilt dem Instller mit, dass ein Verzeichnis aus dem XPI Archiv (und alle Inhalte darin) in ein bestimmtes Verzeichnis installiert werden soll. Die Funktion addFile() ist ähnlich, aber für eine einzelne Datei.

+

Beide Funktionen addDirectory() und addFile() haben unterschiedliche Formen. Die einfachste Form nimmt nur ein Argument: Das Verzeichnis, welches von der Installation erstellt werden soll.

+
addDirectory ( dir );
+addFile ( dir );
+
+Beispiel:
+
+addDirectory("findfile");
+
+

Das obige Beispiel legt ein Verzeichnis "findfile" für die Installation fest. Diese Funktionen können mehrmals aufgerufen werden, um mehrere Verzeichnisse und Dateien zu installieren.

+

Als nächstes wollen wir die Dateien im Chrome System registrieren, sodass diese mit einer Chrome-URL verwendet werden können. Das kann mit der registerChrome() Funktion erledigt werden. Die Funktion nimmt zwei Argumente an, als erstes den Chrome-Typ, der registriert werden soll (content, skin oder locale). Ein zweites Argument ist das Verzeichnis, welches die contents.rdf Datei enthält. Weil der Dateisuche-Dialog content, eine Skin-Datei und eine locale-Datei enthält, muss registerChrome() dreimal aufgerufen werden.

+
registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+
+

 DELAYED_CHROME wird verwendet, um anzuzeigen, dass es beim nächsten Mozilla-Start installiert werden soll.

+

Abschluss der Installation

+

Die addDirectory() und addFile() Funktions kopieren keine Dateien. Sie geben nur an, welche Dateien installiert werden sollen. Ebenfalls gibt registerChrome() nur an, dass diese im chrome-System registriert werden sollen. Um den Prozess zu vervollständigen und Dateien zu kopieren, muss die performInstall() Funktion aufgerufen werden. Diese Funktionen erwartet keine Argumente.

+

Das finale Skript zur Installation der "Dateisuche"-Komponente ist unten aufgeführt:

+
+

Datei

+ 
initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");
+
+findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+
+addDirectory("findfile");
+
+registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+
+performInstall();
+
+
+

Als nächstes schauen wir uns zusätzliche Installationsfunktionen an.

+
+

« zurückweiter »

+
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html b/files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html new file mode 100644 index 0000000000..7f6f44a00e --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html @@ -0,0 +1,270 @@ +--- +title: Lokalisierung +slug: Archive/Mozilla/XUL/XUL_Tutorial/Lokalisierung +tags: + - Lokalisierung + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Localization +--- +

{{ PreviousNext("XUL_Tutorial/Eine_eigene_Skin_erstellen", "XUL_Tutorial/Property-Dateien") }}

+

XUL und XML stellen Entities als komfortablen Weg bereit, um Lokalisierungen zu ermöglichen.

+

Entities

+

Viele Anwendungen sind so gebaut, dass das Interface so einfach wie möglich in verschiedene Sprachen zu übersetzten ist. Üblicherweise wird eine Tabelle aus Strings für jede Sprache erstellt. Anstelle von den Text direkt in die Applikation zu programmieren, stellt jede Textstelle nur eine Referenz zur Stringtabelle dar. XML stellt Entities zur Verfügung, welche für den gleichen Zweck verwendet werden können.

+

Man sollte mit Entities bereits vertraut sein, wenn man schon Erfahrungen mit HTML sammeln konnte. Der Code &lt; und &gt; sind Beispiele von Entities, welche anstelle von „Größer-als-“ und „Kleiner-als-Zeichen“ im Text verwendet werden können. XML besitzt einen Syntax, welcher dir das deklarieren eigener Entities erlaubt. Du kannst diese so verwenden, dass das Entity durch seinen Wert ersetzt wird, welcher ein Textstring ist. Entities können immer wenn Text auftritt verwendet werden, inklusive den Attributwerten. Das Beispiel unten demonstriert die Verwendung eines Entity in einem Button.

+
<button label="&findLabel;"/>
+
+

Der Text der als Label erscheinen wird, wird den Wert des Entity &findLabel; sein. Eine Datei welche die Entity-Deklaration enthält wird für jede unterstützte Sprache erstellt. Für Englisch wird das &findLabel; Entity wahrscheinlich mit dem Text »Find« deklariert sein.

+

DTD-Dateien

+

Entities sind in Document Type Declaration (DTD) Dateien deklariert. Dateien dieses Typs werden normalerweise verwendet um den Syntax und die Semantik einer bestimmten XML-Datei zu deklarieren, aber es können auch Entities deklariert werden. Im Mozilla Chrome-System sind die DTD Dateien im locales Unterordner zu finden. Normalerweise existiert eine DTD Datei (mit der Endung .dtd) pro XUL-Datei.

+

Wenn man im Chrome-Ordner nachschaut, sollte man ein Archiv für die jeweilige Sprache (de-De.jar ist normalerweise Deutsch) finden. Es ist möglich lokale Dateien in verschiedenen Sprachen, z.B. Deutsch (de-DE) und Englisch (en-US) zu haben. Innerhalb dieser Archive sind die Dateien zu finden, welche den lokalisierten Text für jedes Fenster enthalten. Die Struktur der Archive ist sehr ähnlich derjenigen, die für Skins verwendet wird.

+

Im Innern der Archive würde man die DTD-Dateien platzieren in welchen die Entities deklariert werden sollen. Normalerweise wird für jede XUL-Datei eine DTD-Datei mit dem gleichen Namen erstellt mit allerdings einer .dtd Endung. Daher werden wir für den Dateisuchdialog eine Datei namens findfile.dtd benötigen.

+

Für nicht installierte chrome Dateien kann einfach die DTD-Datei ins selbe Verzeichnis wie die XUL-Datei ablegt werden.

+
Anmerkung: Die DTD-Dateien sollten für nicht ASCII Zeichen als UTF-8 kodiert werden. Deswegen sollten die Dateien im UTF-8 Format gespeichert werden. (ohne BOM). Für mehr Informationen, siehe Mozilla Sprachpakete.
+

Sobald eine DTD-Datei für das XUL erstellt worden ist, muss eine Zeile in die XUL-Datei einfügt werden, welche angibt, dass die DTD-Datei verwendet werden soll. Andernfalls werden Fehler auftreten, weil die Entities nicht gefunden werden. Um dies zu tun, muss die folgende Zeile irgendwo im oberen Bereich der XUL-Datei eingefügt werden:

+
<!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd">
+
+

Diese Zeile legt fest, dass die URL auf eine DTD-Datei verweist. In diesem Fall wurde deklariert, dass die findfile.dtd DTD-Datei verwendet werden soll. Diese Zeile ist typischerweise gerade vor dem window Element platziert.

+

Entities deklarieren

+

Die Entities werden mit einem einfachen Syntax deklariert:

+
<!ENTITY findLabel "Find">
+
+

Dieses Beispiel erstellt ein Entity mit dem Namen findLabel und dem Wert »Find«. Dies bedeutet, dass überall wo der Text „&findLabel;“ in der XUL-Datei auftritt es durch den Text »Find« ersetzt wird. Es sollte beachtet werden, dass die Deklaration kein Slash am Ende besitzt. In der DTD-Datei einer anderen Sprache wird der Text stattdessen in dieser Sprache geschrieben.

+
für Japanisch:
+<!ENTITY findLabel "検索">
+
+

Zum Beispiel der folgende Text:

+
<description value="&findLabel;"/>
+
+

wird übersetzt als:

+
Englische Version:
+<description value="Find"/>
+
+Japanische Version:
+<description value="検索"/>
+
+

Es wird ein Entity für jede Beschriftung und Textstelle vorhanden sein, die dem Interface verwendet wird. Es sollte kein direkt angezeigter Text in den XUL-Dateien existieren.

+

Zusätzlich zu der Verwendung in Beschriftungen, sollten Entities für jeden Wert verwendet werden, welcher in einer anderen Sprache abweichen könnte. Access-Keys und Tastatur-Shortcuts zum Beispiel.

+
 XUL
+ <menuitem label="&undo.label;" accesskey="&undo.key;"/>
+ DTD
+ <!ENTITY undo.label "Undo">
+ <!ENTITY undo.key "u">
+
+

Das Beispiel oben verwendet zwei Entities, eines für die Beschriftung des Menüpunktes und ein zweiter für den Access-Key.

+

 

+
+

Änderung des Dateisuche Beispiels

+

Werfen wir jetzt einen Blick darauf, wie wir das alles zusammenfügen können, indem wir den Dateisuche-Dialog so modifizieren, so dass eine DTD-Datei für alle seine Textstellen verwendet wird. Die gesamte XUL-Datei mit allen Änderungen in Rot ist unterhalb gezeigt.

+
<?xml version="1.0"?>
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="findfile.css" type="text/css"?>
+
+<!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd">
+
+<window
+  id="findfile-window"
+  title="&findWindow.title;"
+  persist="screenX screenY width height"
+  orient="horizontal"
+  onload="initSearchList()"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<script src="findfile.js"/>
+
+<popupset>
+   <popup id="editpopup">
+     <menuitem label="Cut" accesskey="&cutCmd.accesskey;"/>
+     <menuitem label="Copy" accesskey="&copyCmd.accesskey;"/>
+     <menuitem label="Paste" accesskey="&pasteCmd.accesskey;" disabled="true"/>
+   </popup>
+</popupset>
+
+<keyset>
+   <key id="cut_cmd" modifiers="accel" key="&cutCmd.commandkey;"/>
+   <key id="copy_cmd" modifiers="accel" key="&copyCmd.commandkey;"/>
+   <key id="paste_cmd" modifiers="accel" key="&pasteCmd.commandkey;"/>
+   <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/>
+</keyset>
+
+<vbox flex="1">
+
+ <toolbox>
+
+  <menubar id="findfiles-menubar">
+    <menu id="file-menu" label="&fileMenu.label;"
+        accesskey="&fileMenu.accesskey;">
+      <menupopup id="file-popup">
+        <menuitem label="&openCmd.label;"
+                  accesskey="&openCmd.accesskey;"/>
+        <menuitem label="&saveCmd.label;"
+                  accesskey="&saveCmd.accesskey;"/>
+        <menuseparator/>
+        <menuitem label="&closeCmd.label;"
+                  accesskey="&closeCmd.accesskey;" key="close_cmd" oncommand="window.close();"/>
+      </menupopup>
+    </menu>
+    <menu id="edit-menu" label="&editMenu.label;"
+          accesskey="&editMenu.accesskey;">
+      <menupopup id="edit-popup">
+        <menuitem label="&cutCmd.label;"
+                  accesskey="&cutCmd.accesskey;" key="cut_cmd"/>
+        <menuitem label="&copyCmd.label;"
+                  accesskey="&copyCmd.accesskey;" key="copy_cmd"/>
+        <menuitem label="&pasteCmd.label;"
+                  accesskey="&pasteCmd.accesskey;" key="paste_cmd" disabled="true"/>
+      </menupopup>
+    </menu>
+  </menubar>
+
+  <toolbar id="findfiles-toolbar">
+    <toolbarbutton id="opensearch" label="&openCmdToolbar.label;"/>
+    <toolbarbutton id="savesearch" label="&saveCmdToolbar.label;"/>
+  </toolbar>
+ </toolbox>
+
+ <tabbox>
+  <tabs>
+    <tab label="&searchTab;" selected="true"/>
+    <tab label="&optionsTab;"/>
+  </tabs>
+
+  <tabpanels>
+
+   <tabpanel id="searchpanel" orient="vertical" context="editpopup">
+
+   <description>
+     &findDescription;
+   </description>
+
+   <spacer class="titlespace"/>
+
+   <groupbox orient="horizontal">
+     <caption label="&findCriteria;"/>
+
+     <menulist id="searchtype">
+       <menupopup>
+         <menuitem label="&type.name;"/>
+         <menuitem label="&type.size;"/>
+         <menuitem label="&type.date;"/>
+       </menupopup>
+     </menulist>
+   <spacer class="springspace"/>
+     <menulist id="searchmode">
+       <menupopup>
+         <menuitem label="&mode.is;"/>
+         <menuitem label="&mode.isnot;"/>
+       </menupopup>
+     </menulist>
+   <spacer class="springspace"/>
+
+   <menulist id="find-text" flex="1"
+             editable="true"
+             datasources="file:///mozilla/recents.rdf"
+             ref="http://www.xulplanet.com/rdf/recent/all">
+     <template>
+       <menupopup>
+         <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#Label" uri="rdf:*"/>
+       </menupopup>
+     </template>
+   </menulist>
+
+   </groupbox>
+
+  </tabpanel>
+
+  <tabpanel id="optionspanel" orient="vertical">
+     <checkbox id="casecheck" label="&casesensitive;"/>
+     <checkbox id="wordscheck" label="&matchfilename;"/>
+    </tabpanel>
+
+  </tabpanels>
+ </tabbox>
+
+ <tree id="results" style="display: none;" flex="1">
+   <treecols>
+     <treecol id="name" label="&results.filename;" flex="1"/>
+     <treecol id="location" label="&results.location;" flex="2"/>
+     <treecol id="size" label="&results.size;" flex="1"/>
+   </treecols>
+
+   <treechildren>
+     <treeitem>
+       <treerow>
+         <treecell label="mozilla"/>
+         <treecell label="/usr/local"/>
+         <treecell label="&bytes.before;2520&bytes.after;"/>
+       </treerow>
+     </treeitem>
+   </treechildren>
+ </tree>
+
+ <splitter id="splitbar" resizeafter="grow" style="display: none;"/>
+
+ <spacer class="titlespace"/>
+
+ <hbox>
+   <progressmeter id="progmeter" value="50%" style="display: none;"/>
+   <spacer flex="1"/>
+   <button id="find-button" label="&button.find;"
+           oncommand="doFind()"/>
+   <button id="cancel-button" label="&button.cancel;"
+           oncommand="window.close();"/>
+ </hbox>
+</vbox>
+
+</window>
+
+

Jede Textstelle wurde durch eine Entity ersetzt. Eine DTD-Datei wurde nahe am Anfang eingefügt. Jede Entity welche eingefügt wurde, sollte in der DTD-Datei deklariert sein. Das Fenster wird nicht angezeigt, wenn eine Entity in der XUL-Datei gefunden wird, welche nicht deklariert wurde.

+

Es sollte beachtet werden, dass der Name der Entity nicht wichtig ist. Im Beispiel oben wurden die Wörter der Entities mit Bindestrichen getrennt. Dies ist keine Vorgabe. Die Entity-Namen folgen den selben Konventionen wie der Rest des Mozilla Codes.

+

Es ist vielleicht aufgefallen, dass der Text '2520 bytes' durch zwei Entities ersetzt wurde. Das kommt daher, weil die Struktur in anderen Sprachen variieren kann. Es könnte z.B. nötig sein, dass die Einheit vor der Zahl steht.

+

Die Access-Keys und Tastatur-Shortcuts wurden auch in Entities übersetzt, weil sie in anderen Sprachen abweichen können.

+

Nun die DTD-Datei - findfile.dtd:

+
<!ENTITY findWindow.title "Find Files">
+<!ENTITY fileMenu.label "File">
+<!ENTITY editMenu.label "Edit">
+<!ENTITY fileMenu.accesskey "f">
+<!ENTITY editMenu.accesskey "e">
+<!ENTITY openCmd.label "Open Search...">
+<!ENTITY saveCmd.label "Save Search...">
+<!ENTITY closeCmd.label "Close">
+<!ENTITY openCmd.accesskey "o">
+<!ENTITY saveCmd.accesskey "s">
+<!ENTITY closeCmd.accesskey "c">
+<!ENTITY cutCmd.label "Cut">
+<!ENTITY copyCmd.label "Copy">
+<!ENTITY pasteCmd.label "Paste">
+<!ENTITY cutCmd.accesskey "t">
+<!ENTITY copyCmd.accesskey "c">
+<!ENTITY pasteCmd.accesskey "p">
+<!ENTITY cutCmd.commandkey "X">
+<!ENTITY copyCmd.commandkey "C">
+<!ENTITY pasteCmd.commandkey "V">
+<!ENTITY openCmdToolbar.label "Open">
+<!ENTITY saveCmdToolbar.label "Save">
+<!ENTITY searchTab "Search">
+<!ENTITY optionsTab "Options">
+<!ENTITY findDescription "Enter your search criteria below and select the Find button to begin the search.">
+<!ENTITY findCriteria "Search Criteria">
+<!ENTITY type.name "Name">
+<!ENTITY type.size "Size">
+<!ENTITY type.date "Date Modified">
+<!ENTITY mode.is "Is">
+<!ENTITY mode.isnot "Is Not">
+<!ENTITY casesensitive "Case Sensitive Search">
+<!ENTITY matchfilename "Match Entire Filename">
+<!ENTITY results.filename "Filename">
+<!ENTITY results.location "Location">
+<!ENTITY results.size "Size">
+<!ENTITY bytes.before "">
+<!ENTITY bytes.after "bytes">
+<!ENTITY button.find "Find">
+<!ENTITY button.cancel "Cancel">
+
+

Um den Text in einer neuen Sprache hinzuzufügen, genügt es eine weitere DTD-Datei zu erstellen. Durch die Verwendung des Chrome Systems, um die DTD-Datei einer anderen Sprache hinzuzufügen, kann die selbe XUL-Datei für jede Sprache verwendet werden.

+

Das Dateisuche Beispiel so weit: Quellcode

+
+

Als nächstes werden wir einen Blick auf Property Dateien werfen.

+

{{ PreviousNext("XUL_Tutorial/Eine_eigene_Skin_erstellen", "XUL_Tutorial/Property-Dateien") }}

+

{{ languages( { "en": "en/XUL_Tutorial/Localization", "fr": "fr/Tutoriel_XUL/Localisation", "ja": "ja/XUL_Tutorial/Localization", "pl": "pl/Kurs_XUL/Lokalizacja" } ) }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html b/files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html new file mode 100644 index 0000000000..756e025aaa --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html @@ -0,0 +1,259 @@ +--- +title: Positionierung von Elementen +slug: Archive/Mozilla/XUL/XUL_Tutorial/Positionierung_von_Elementen +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning +--- +
+

« zurückweiter »

+
+ +

Schauen wir uns die Steuerung von Positionen und Größen von XUL Elementen an.

+ +

Positionierung in Boxen

+ +

Bis jetzt wissen wir, dass Elemente entweder horizontal oder vertikal innerhalb einer Box positioniert werden können. Meistens brauchen wir aber weitere Steuerungsmöglichkeiten zur Position und Größe von Elementen in der Box. Dazu müssen wir uns zunächst anschauen wie eine Box arbeitet.

+ +

Die Position eines Elementes wird vom Layout des Containers bestimmt. Zum Beispiel ist die Position einer Schaltfläche in einer horizontalen Box rechts von der vorherigen Schaltfläche, sofern diese existiert. Die Größe eines Elements wird von zwei Faktoren beeinflusst: Die Größe, die das Element an Größe braucht und die Größe, die Sie festlegen. Die Größe, die das Element braucht, hängt vom dem ab, was sich innerhalb des Elements befindet. Zum Beispiel wird die Breite einer Schaltfläche anhand des Textes, welcher sich darauf befindet, berechnet.

+ +

Ein Element wird generell so groß wie es Inhalt vorschreibt und nicht größer. Einige Elemente verfügen über eine Standardgröße (z.B. Textboxen), welche verwendet wird. Eine horizontale Box mit drei Schaltflächen darin, wird so groß wie die drei Schaltflächen plus einem kleinen zusätzlichen Abstand.

+ +
Image:boxstyle1n.png
+ +

Im Bild wurde den ersten beiden Schaltflächen eine passende Größe vorgeschrieben, um den Text anzuzeigen. Die dritte Schaltfläche ist größer, weil sie mehr Inhalt enthält. Die Breite der umschließenden Box ist die Summe der Breite der drei Schaltflächen plus einem zusätzlichen Abstand zwischen ihnen. Die Höhe der Schaltflächen ist passend zur Textgröße berechnet worden.

+ +

Width und height Attribute

+ +

Sie möchten sicher mehr Einfluss auf die Größe eines Elements in einem Fenster nehmen können. Es gibt eine Reihe von Features, die Ihnen erlauben die Größe eines Elementes festzulegen. Der schnellste Weg ist, einfach die width und height Attribute festzulegen, genauso wie Sie es vielleicht von HTML kennen. Ein Beispiel dazu:

+ +

Beispiel 1: Datei Ansehen

+ +
<button label="OK" width="100" height="40"/>
+
+ +

Es ist jedoch nicht empfohlen, das so zu machen. Es ist passt nicht in einige Themes und ist umständlicher anpassbar. Ein besserer Weg ist, CSS Eigenschaften zu verwenden, welche wie in HTML arbeiten. Die folgenden CSS Eigenschaften können dazu verwendet werden:

+ +
+
width
+
Legt die Breite eines Elementes fest.
+
height
+
Legt die Höhe eines Elementes fest.
+
+ +

Werden beide Eigenschaften festgelegt, wird das Element mit dieser Breite und Höhe erstellt. Wird nur eines der beiden angegeben, wird die andere Eigenschaft nach dem benötigten Platz berechnet. Die Größe sollte als Zahl gefolgt von einer Einheit angegeben werden.

+ +

Flexible Elemente

+ +

Die Größen der Elemente sind ziemlich einfach zu berechnen für nicht-flexible Elemente. Sie folgen einfach der festgelegten Breiten und Höhen und sobald eine Größe nicht festgelegt wurde, wird das Element so groß wie es für den Inhalt erforderlich ist. Für flexible Elemente ist die Berechnung allerdings nicht ganz so einfach.

+ +

Flexible Elemente sind solche, die über ein flex Attribut verfügen und einen Wert größer als 0 haben. Flexible Elemente passen sich an den verfügbaren Freiraum an. Die Standardgröße wird trotzdem genauso berechnet wie für nicht-flexible Elemente. Das folgende Beispiel soll dies verdeutlichen:

+ +

Beispiel 2 : Datei Ansehen

+ +
<window orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<hbox>
+  <button label="Yes" flex="1"/>
+  <button label="No"/>
+  <button label="I really don't know one way or the other"/>
+</hbox>
+
+</window>
+
+ +

Das Fenster wird zunächst so erscheinen wie im vorherigen Bild. Die ersten beiden Schaltflächen werden auf eine passende Breite und die dritte Schaltfläche auf längere Breite skaliert, weil diese über eine längere Aufschrift verfügt. Die erste Schaltfläche ist flexibel und alle Elemente wurde in eine Box getan. Die Breite dieser Box wird auf die Startgröße aller drei Schaltflächen gesetzt (ca. 430 Pixel in dem Bild).

+ +

Wenn Sie nun das Fenster vergrößern, wird überprüft, ob Elemente flexibel sind, um den entstehenden Freiraum zu füllen, der entstehen würde. Da die erste Schaltfläche das einzig flexible Element ist, sollte es größer werden. Das geschieht in diesem Fall jedoch nicht, da die Box in dem sich die Schaltfläche befindet nicht flexibel ist. Ein unflexibles Element kann niemals seine Größe ändern, wenn der Platz verfügbar ist. Die Schaltfläche kann also nicht größer werden.

+ +

Die Lösung ist, die Box ebenfalls flexibel zu machen. Wird dann das Fenster größer gemacht, ist zusätzlicher Raum verfügbar und die Box wird diesen Raum füllen. Weil die Box größer ist, ist auch mehr Platz innerhalb verfügbar und die flexible Schaltfläche kann diesen Platz einnehmen. Dieser Prozess wird für jede Verschachtelung wiederholt.

+ +

Minimale und maximale Größen festlegen

+ +

Vielleicht möchten Sie, dass ein Element eine bestimmte Größe besitzt, aber dennoch flexibel ist. Es können Größen festgelegt werden, die auch flexible Elemente nicht über- oder unterschreiten sollen. Diese Einstellung erreicht man mit diesen vier Attributen:

+ +
+
minwidth
+
Legt die minimale Breite eines Elements fest.
+
minheight
+
Legt die minimale Höhe eines Elements fest.
+
maxwidth
+
Legt die maximale Breite eines Elements fest.
+
maxheight
+
Legt die maximale Höhe eines Elements fest.
+
+ +

Die Werten werden immer in Pixeln angegeben. Es können auch die zugehörigen CSS Eigenschaften angegeben werden: min-width, min-height, max-width und max-height.

+ +

Diese Eigenschaften sind nur für flexible Elemente sinnvoll. Wird zum Beispiel eine maximale Höhe festgelegt, wird eine Schaltfläche nur bis zu einer bestimmten Größe skaliert. Sie können das Fenster weiterhin vergrößern, die Schaltfläche wird jedoch nicht weiter vergrößert werden. Die Box, in der sich die Schaltfläche befindet wird sich weiterhin anpassen, wenn Sie keine maximale Höhe festgelegt haben.

+ +

Wenn zwei Schaltflächen flexibel sind, werden sich normalerweise beide den freien Platz gleichermaßen teilen. Falls eine Schaltfläche eine maximale Breite hat, wird die zweite Schaltfläche den restlichen Freiraum mit einnehmen.

+ +

Wenn eine Box über eine maximale Breite oder Höhe verfügt, können die darin enthaltenen Kindelemente nicht größer als die festgelegte Größe der Box werden. Wenn eine minimale Breite oder Höhe vorliegt, können die Kindelemente ebenfalls nicht kleiner werden.

+ +
Beispiele zur Festlegung von Breiten und Höhen
+ +
<button label="1" style="width: 100px;"/>
+<button label="2" style="width: 100em; height: 10px;"/>
+<button label="3" flex="1" style="min-width: 50px;"/>
+<button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/>
+<textbox flex="1" style="max-width: 10em;"/>
+<description style="max-width: 50px">This is some boring but simple
+wrapping text.</description>
+
+ +
+
Beispiel 1 
+
Die erste Schaltfläche wird mit einer Breite von 100 Pixeln (px bedeutet Pixel) angezeigt. Die Einheit muss angegeben werden, sonst wird die Breite ignoriert.
+
Beispiel 2 
+
Die zweite Schaltfläche wird mit einer Höhe von 10 Pixeln und einer Breite von 100em (ein em ist die Größe eines Zeichens der aktuellen Schrift) angezeigt.
+
Beispiel 3 
+
Die dritte Schaltfläche ist flexibel, sie wird also auf Basis der Größe Box der angezeigt. Die Schaltfläche wird jedoch niemals kleiner als 50 Pixel breit. Andere flexible Komponenten wie z.B. Spacer werden den verbleibenden Platz einnehmen.
+
Beispiel 4 
+
Die vierte Schaltfläche is flexibel und wird niemals eine Höhe haben, die kleiner als 2 ex ist (ein ex ist normalerweise die Höhe des Buchstaben x der aktuellen Schrift) oder größer als 100 Pixel ist.
+
Beispiel 5 
+
Das Texteingabefeld ist flexibel, wird aber niemals größer als 10em werden. Sie werden vermehrt em verwenden wollen, da Sie Größen für Elemente festlegen, die Text enthalten. Diese Einheit ist hilfreich für Textboxen, da die Schrift geändert werden kann und die Textbox immer eine passende Größe hat, auch wenn der Text mal ganz groß werden sollte.
+
Beispiel 6 
+
Das description Element wird gezwungen eine maximale Breite von 50 Pixeln zu besitzen. Der Text innerhalb wird in eine neue Zeile verschoben, wenn die 50 Pixel erreicht sind.
+
+ +
+
Unser Dateisuche-Dialog
+ +

Fügen wir einige dieser Möglichkeiten zu unserem Dateisuche-Dialog hinzu. Wir werden es so machen, dass die Textbox auf das gesamte Fenster ausgestreckt wird.

+ +
<textbox id="find-text" flex="1" style="min-width: 15em;"/>
+
+ +
Image:boxstyle1.png
+ +

Hier wurde das Texteingabefeld flexibel gemacht. Demnach wird es sich anpassen, wenn der Benutzer die Fenstergröße ändert. Das ist sehr hilfreich, wenn der Benutzer einen langen Text einfügen möchte. Außerdem wurde eine minimale Breite von 15em festgelegt, damit immer zumindest 15 Zeichen zu sehen sind. Verkleinert der Benutzer den Dialog sehr stark, wird das Texteingabefeld nur bis 15em verkleinert. Es wird so gezeichnet werden, als wenn es sich auch außerhalb des Fensters ausbreitet. Beachten Sie, dass das Bild ein Texteingabefeld zeigt, welches auf die maximale Fenstergröße ausgebreitet wurde.

+
+ +

Anordnung in Boxen

+ +

Wenn Sie eine Box mit zwei Kindelementen haben, beide nicht flexibel, die Box ist aber flexibel. Zum Beispiel:

+ +

Beispiel 3: Datei Ansehen

+ +
<box flex="1">
+  <button label="Happy"/>
+  <button label="Sad"/>
+</box>
+
+ +

Wenn Sie nun das Fenster vergrößern, wird die Box auf die Fenstergröße ausgedehnt. Die Schaltflächen sind nicht flexibel, sie werden also nicht ihre Breiten ändern. Das Ergebnis ist zusätzlicher Platz, der auf der rechten Seite der Fensters (innerhalb der Box) erscheint. Sie möchten aber unter Umständen, dass dieser freie Platz auf der linken Seite erscheint, sodass die Schaltflächen auf der rechten Seite des Fensters ausgerichtet werden.

+ +

Sie könnten das lösen, in dem Sie ein spacer Element innerhalb der Box platzieren, aber das wird umständlich, wenn Sie es für eine Vielzahl von Elementen machen müssen. Ein besserer Weg ist, ein zusätzliches Attribut pack dem box Element hinzuzufügen. Dieses Attribut gibt an, wie die Kindelemente innerhalb der Box angeordnet werden sollen. Für horizontal orientierte Boxen wird die horizontale Position der Kindelemente gesteuert. Für vertikal orientierte Boxen wird die die vertikale Position der Kindelemente gesteuert. Es können die folgenden Werte verwendet werden:

+ +
+
start
+
Positioniert Elemente an der linken Seite für horizontale Boxen und an der oberen Seite für vertikale Boxen. Dies ist der Standardwert.
+
center
+
Zentriert Kindelemente in der Box.
+
end
+
Positioniert Elemente an der rechten Seite für horizontale Boxen und an der unteren Seite für vertikale Boxen.
+
+ +

Das pack Attribut wird in der Box festgelegt, die die auszurichteten Elemente enthält, nicht in den Elementen selbst.

+ +

Wir können das vorherige Beispiel ändern, sodass die Elemente wie folgt zentriert werden:

+ +

Beispiel 4: Datei Ansehen

+ +
<box flex="1" pack="center">
+  <button label="Happy"/>
+  <button label="Sad"/>
+</box>
+
+ +

Jetzt, wenn das Fenster verändert wurde, werden die Schaltflächen horizontal zentriert. Vergleichen Sie das Verhalten zum vorherigen Beispiel.

+ +

Box Ausrichtung

+ +

Wenn das Fenster im Happy-Sad Beispiel oben horizontal verändern, wird die Box in der Breite wachsen. Wenn Sie das Fenster vertikal verändern, werden jedoch die Schaltflächen in ihrer Höhe mitwachsen. Das kommt daher weil, die Flexibilität standardmäßig für die vertikale Richtung aktiviert ist.

+ +

Dieses Verhalten kann mit dem align Attribut gesteuert werden. Für horizontale Boxen werden die vertikalen Positionen der kindelemente gesteuert. Für vertikale Boxen werden die horizontalen Positionen der Kindelemente gesteuert. Die möglichen Werte sind ähnlich zu denen des {{XULAttr("pack")}} Attributs.

+ +
+
start
+
Richtet Elemente an der oberen Seite für horizontal Boxen und an der linken Seite für vertikale Boxen aus.
+
center
+
Zentriert Kindelemente in der Box.
+
end
+
Richtet Elemente an der unteren Seite für horizontale Boxen und an der rechten Seite für vertikale Boxen aus.
+
baseline
+
Richtet Elemente an der Textlinie aus. Nur für horizontale Boxen sinnvoll.
+
stretch
+
Standardwert. Sorgt dafür, dass die Elemente auf die Größe der Box ausgedehnt werden, wie ein flexibles Element nur in die andere Richtung.
+
+ +

Im Gegensatz zum pack Attribut, wird das align Attribut auf die beinhalteten Elemente der Box angewendet, nicht auf das Element selbst.

+ +

Zum Beispiel, die erste Box unten wird die Kindelemente ausdehnen, weil das die Standardeinstellung ist. Die zweite Box hat ein align Attribut, seine Kindelemente werden also zentriert platziert.

+ +

Beispiel 5: Datei Ansehen

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window id="yesno" title="Question" orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <hbox>
+    <button label="Yes"/>
+    <button label="No"/>
+  </hbox>
+  <hbox align="center">
+    <button label="Maybe"/>
+    <button label="Perhaps"/>
+  </hbox>
+
+</window>
+
+ +
Image:boxstyle2-b.png
+ +

Es können auch die CSS Eigenschaften: -moz-box-pack und -moz-box-align anstatt von Attributen verwendet werden.

+ +
Vielleicht finden Sie auch das Ausrichtungsbeispiel hilfreich, um die verschiedenen Eigenschaften auszuprobieren.
+ +

Text und Schaltflächen abschneiden

+ +

Sie können eine Schaltfläche erstellen, die eine Beschriftung hat, die länger als die maximale Breite der Schaltfläche ist. Eine Lösung wäre sicher die Breite zu erhöhen, jedoch verfügen Schaltflächen (und andere Elemente mit einer Beschriftung) über ein spezielles Attribut. Das Attribut "crop" erlaubt Ihnen wie ein Text abgeschnitten wird, wenn dieser zu lang ist.

+ +

Wenn der Text abgeschnitten wird, wird ein Auslassungszeichen (...) dort eingefügt, wo der Text ausgeschnitten wurde. Vier mögliche Werte sind dazu gültig:

+ +
+
left
+
Der Text wird auf der linken Seite abgeschnitten.
+
right
+
Der Text wird auf der rechten Seite abgeschnitten.
+
center
+
Der Text wird in der Mitte abgeschnitten.
+
none
+
Der Text wird nicht abgeschnitten. Das ist das Standardverhalten.
+
+ +

Dieses Attribut ist wirklich nur dann sinnvoll, wenn ein Dialog so entworfen wurde, dass er verwendbar in jeder Große sein soll. Das crop Attribut kann auch bei anderen Elementen verwendet werden, die ein label Attribut für Beschriftungen verwenden. Das folgende Beispiel zeigt das Attribut in Aktion:

+ +

Beispiel 6: Datei Ansehen

+ +
Image:boxstyle2.png
+ +
<button label="Push Me Please!" crop="right" flex="1"/>
+
+ +

Beachten Sie, wie der Text der Schaltfläche auf der rechten Seiten abgeschnitten wird, wenn das Fenster verkleinert wird.

+ +
+

Aktueller Dateisuche-Dialog: Datei Ansehen

+
+ +

Als nächstes eine Zusammenfassung und einige zusätzliche Details zum Box-Modell.

+ +
+

« zurückweiter »

+
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html b/files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html new file mode 100644 index 0000000000..2469697a21 --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html @@ -0,0 +1,154 @@ +--- +title: XUL Struktur +slug: Archive/Mozilla/XUL/XUL_Tutorial/XUL_Struktur +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure +--- +

{{ PreviousNext("XUL_Tutorial/Einfuehrung", "XUL_Tutorial/Die_Chrome_URL") }}

+ +

Wir werden mit einem Blick auf die Handhabung von XUL in Mozilla starten.

+ +

Wie wird XUL behandelt

+ +

In Mozilla wird XUL genauso behandelt wie HTML oder anderer Inhalt. Wenn man die URL einer HTML-Seite in das Adressfeld des Browsers eingibt, ortet der Browser die Webseite und lädt den Inhalt herunter. Die Mozilla Rendering-Engine übersetzt den HTML-Quelltext in ein Dokumentbaum mit DOM. Anschließend wird der Baum in ein Satz Objekte konvertiert, die am Bildschirm angezeigt werden können. CSS, Bilder und andere Technologien werden verwendet, um die Anzeige zu kontrollieren. XUL funktioniert größtenteils auf die selbe Art und Weise.

+ +

In der Tat werden alle Dokumenttypen, egal ob HTML, XUL oder sogar SVG, durch den selben zugrunde liegenden Code behandelt. Das bedeutet, dass die selben CSS-Eigenschaften benutzt werden können, um sowohl HTML und XUL zu manipulieren. Daher können viele Funktionen von beiden genutzt werden. Doch gibt es einige Funktionen, welche nur von HTML verwendet werden können, wie z.B. Formulare, und andere, welche nur von XUL verwendet werden können, so wie Overlays. Da XUL und HTML auf die selbe Art und Weise behandelt werden, kann man beide, sowohl vom lokalen Dateisystem, von einer Webseite oder von einer Erweiterung oder einer selbständigen XULRunner-Anwendung laden.

+ +

Inhalte aus entfernten Quellen z.B. http://localhost/~username/ sind (egal ob HTML, XUL oder ein anderer Dokumententyp) aus Sicherheitsgründen in ihrem Handlungsspielraum beschränkt. Deshalb stellt Mozilla die Methode zur Verfügung, Inhalte lokal zu installieren und registriert die installierten Dateien in sein chrome-System. Dies ermöglicht, dass eine spezielle URL-Form genutzt werden kann, die chrome:// URL genannt wird. Durch den Zugriff auf eine Datei mittels einer Chrome-URL erhält die Datei höhere Rechte, um auf lokale Dateien, Eigenschaften und Bookmarks zuzugreifen und andere privilegierte Operationen auszuführen. Webseiten erhalten diese Privilegien nicht, es sei denn sie sind mit einem digitalen Zertifikat signiert, und der Benutzer hat den Zugriff auf diese Operationen gewährt.

+ +

Die chrome-Paketregistrierung ist der Weg, um es Firefox-Erweiterungen zu ermöglichen, Funktionen zum Browser hinzuzufügen. Erweiterungen sind kleine Pakete mit XUL-Dateien, JavaScript, Stylesheets und Bildern, die in einer einzigen Datei verpackt sind. Eine solche Datei kann mit einem ZIP-Programm erstellt werden. Wenn der Benutzer diese Datei herunterlädt, wird die Erweiterung auf seiner Maschine installiert. Sie hängt sich in den Browser ein, indem sie eine XUL-Eigenschaft benutzt, die man Overlay nennt. Sie erlaubt es, das XUL der Erweiterung mit dem XUL des Browsers zu kombinieren. Für den Benutzer scheint es, als ob die Erweiterung den Browser verändert hat, aber in Wirklichkeit ist der Quelltext separat und die Erweiterung kann leicht entfernt werden. Registrierte Pakete müssen natürlich nicht unbedingt Overlays benutzen. Wenn sie keinen Gebrauch von Overlays machen, ist die Erweiterung nicht von der Browser-Oberfläche aus erreichbar, aber man kann sie über die Chrome-URL erreichen, sofern das erwünscht ist.

+ +

Eigenständige XUL-Anwendungen können XUL-Code auf ähnliche Weise enthalten, er wird aber natürlich als Teil der Installation eingebunden, anstatt separat als Erweiterung eingebettet zu werden. Dennoch wird der XUL-Code im chrome-System registriert, sodass die Applikation die Benutzeroberfläche darstellen kann.

+ +

Der Mozilla Browser selbst ist ebenfalls nichts weiter als eine Sammlung von Paketen, die XUL-Dateien, JavaScript und Stylesheets enthalten. Diese Dateien können über die chrome URL erreicht werden, haben erweiterte Privilegien und verhalten sich auch sonst wie andere Pakete. Natürlich ist der Browser weitaus größer und komplexer als die meisten Erweiterungen. Firefox und Thunderbird und einige andere Komponenten sind alle in XUL geschrieben und erreichbar über chrome-URLs. Sie können diese Pakete erkunden, indem Sie die Dateien in dem chrome-Verzeichnis ansehen, wo Firefox oder die anderen XUL-Anwendungen installiert sind.

+ +

Die chrome-URL beginnt immer mit 'chrome://'. Ähnlich wie eine 'http://'-URL immer eine entfernte Website per HTTP adressiert und die 'file://'-URL immer lokale Dateien, referenziert die 'chrome://'-URL immer installierte Pakete und Erweiterungen. Wir werden uns die chrome-Syntax im nächsten Kapitel genauer ansehen. Es ist wichtig zu wissen, dass der Zugriff über eine chrome-URL erweiterte Privilegien gegenüber den anderen Arten von URLs erlangt. Beispielsweise hat eine HTTP-URL keine besonderen Rechte und es wird ein Fehler ausgegeben, wenn eine Website versucht, zum Beispiel lokale Dateien zu lesen. Wird hingegen eine Datei von einer chrome-URL aus geladen, hat sie das Recht, lokale Dateien ohne Einschränkungen zu lesen.

+ +

Diese Unterscheidung ist wichtig. Es bedeutet, dass Websites bestimmte Dinge nicht tun können, wie zum Beispiel die Lesezeichen des Benutzers zu lesen. Diese Unterscheidung basiert nicht auf dem Inhalt, sondern nur auf der URL, die benutzt wird. Sowohl HTML als auch XUL auf einer Website haben keine erweiterten Rechte, wohingegen XUL und HTML, die mit einer chrome-URL geladen wurden, erweiterte Privilegien haben.

+ +

Wenn Sie XUL auf einer Website benutzen möchten, müssen Sie nur die XUL-Dateien auf die Website stellen, genau so, wie Sie es auch mit HTML-Dateien tun. Laden Sie dann die URL in den Browser: http://localhost/xul.php. Vergewissern Sie sich, dass Ihr Webserver so konfiguriert ist, dass er XUL-Dateien mit dem passenden Content-Type application/vnd.mozilla.xul+xml ausliefert. (zum Beispiel mittels PHP: header('content-type: application/vnd.mozilla.xul+xml');). Der Content-Type stellt sicher, dass Mozilla HTML und XUL unterscheiden kann. Mozilla nutzt die Dateierweiterung nur, solange die Datei vom Dateisystem gelesen wird. Sie sollten trotzdem die .xul-Dateiendung für all Ihre XUL-Dateien benutzen. Sie können XUL-Dateien in Ihren Browser laden, indem Sie sie mit dem Browser öffnen oder im Datei-Manager die Datei doppelklicken.

+ +
Denken Sie daran, dass entfernte XUL-Dateien bedeutende Einschränkungen haben.
+ +

 

+ +

Dokumenttypen: HTML XML XUL CSS

+ +

Mozilla verwendet deutlich unterschiedliche Arten des Dokumentenobjektmodells (DOM) für HTML und XUL, obwohl viele der Funktionen gemeinsam verwendet werden. Es gibt drei hauptsächliche Dokumententypen in Mozilla: HTML, XML und XUL. Natürlich wird HTML für HTML-Dokumente genutzt, XUL für XUL-Dokumente und XML für andere XML-Dokumenttypen. Da XUL ebenfalls XML ist, ist das XUL-Dokument als eine Unterart des XML-Dokumentes zu verstehen. Es gibt feine Unterschiede in der Funktionsweise. Zum Beispiel sind die Formularsteuerungen auf einer HTML-Seite über die document.forms-Eigenschaft erreichbar, während diese nicht für XUL-Dokumente verfügbar ist, weil XUL keine Formulare im Sinne von HTML haben. Andererseits sind spezielle XUL-Funktionen (wie Overlays und Templates) nur in XUL-Dokumenten verfügbar.

+ +

Diese Unterscheidung zwischen den Dokumenten ist wichtig. Es ist möglich viele XUL-Funktionen in HTML oder XML-Dokumenten zu verwenden, sofern sie nicht spezifisch für den jeweiligen Dokumententyp sind. Andere Funktionen erfordern jedoch den richtigen Dokumententyp. Daher können Sie zum Beispiel XUL-Layouts in anderen Dokumenten verwenden, da diese nicht vom XUL-Dokumententyp abhängig sind.

+ +

Um die oben genannten Punkte zusammenfassen:

+ + + +

Die nächsten Abschnitte beschreiben die grundlegende Struktur eines Chrome-Pakets, welches in Mozilla installiert werden kann. Wenn Sie jedoch beginnen wollen eine einfache Anwendung zu schreiben, sollten Sie zu "Ein Fenster erzeugen" springen und zu diesem Abschnitt später zurück kommen.

+ +

Paketorganisation

+ +

Mozilla ist so organisiert, sodass Sie so viele Komponenten wie Sie möchten, vorinstallieren können. Jede Erweiterung ist eine eigenständige Komponente mit einer separaten Chrome-URL. Mozilla verfügt außerdem über je eine Komponente für jedes installierte Theme und Sprachpaket. Jedes dieser Komponenten oder Pakete besteht aus einer Reihe von Dateien, welche die Benutzeroberfläche dafür beschreiben. Die Messenger-Komponente besitzt z.B. Beschreibungen für Fenster von Mailnachrichten oder Adressbuchdialogen.

+ +

Die Pakete, die mit Mozilla ausgeliefert werden, befinden sich im Chrome-Verzeichnis, welches das Verzeichnis ist, wo Sie Mozilla installiert haben. Das Chrome-Verzeichnis ist das, wo Sie alle Dateien, die die Benutzeroberfläche beschreiben, finden. Normalerweise packen Sie alle XUL-Dateien für eine Anwendung in dieses Verzeichnis, obwohl Erweiterungen in das Erweiterungsverzeichnis für einen bestimmten Benutzer installiert werden. Das einfache Kopieren einer XUL-Datei in das chrome-Verzeichnis gibt der Datei noch keine erweiterten Rechte und außerdem kann sie nicht über eine chrome-URL aufgerufen werden. Um diese zusätzlichen Privilegien zu bekommen, müssen Sie eine Manifestdatei erstellen und diese in das Chrome-Verzeichnis packen. Diese Datei ist sehr einfach zu erstellen und ist normalerweise nur ein paar Zeilen lang. Diese Datei wird verwendet, um chrome-URLs auf eine Datei oder einen Verzeichnispfad zu binden, wo sich die XUL-Dateien befinden. Details zur Erstellung dieser Datei werden in einem späteren Abschnitt genauer betrachtet.

+ +

Der einzige Weg Inhalte zu erstellen, die über eine Chrome-Url erreichbar sind, ist, ein Paket wie in nächsten Abschnitten beschrieben, zu erstellen. Das Verzeichnis wird 'chrome' genannt, weil es ein geeigneter Name zur Aufbewahrung von Chrome-Paketen ist, welche in Mozilla enthalten sind.

+ +

Um die Verwirrung noch weiter zu treiben, gibt es noch zwei weitere Orte, wo das Wort "chrome" auftreten könnte. Das ist einmal das -chrome-Kommandozeilenargument und zum anderen der chrome-Modifier der window.open()-Funktion. Keine dieser Funktionen verteilen zusätzliche Privilegien, stattdessen werden sie verwendet, um ein neues Top-Level-Fenster ohne das Browser UI (Toolbars, Menü) zu erstellen. Sie werden diese Funktion sicher noch in komplexeren XUL Anwendungen verwenden, wenn Sie nicht das Browser UI um Ihre Dialogboxen herum haben wollen.

+ +

Dateien eines Pakets werden normalerweise in einzelne JAR-Dateien zusammengefügt. Eine JAR-Datei kann mit einem ZIP-Tool erstellt werden. Beispielsweise können Sie JAR-Dateien in Mozilla's chrome-Verzeichnis öffnen, um die grundlegende Struktur des Pakets zu sehen. Obwohl es normal so ist, dass die Dateien in einer JAR-Datei gepackt sind, können Pakete genauso von einem normalen Verzeichnis erreicht werden. Obwohl Pakete normalerweise nicht auf diese Art ausgeliefert werden, ist es dennoch während der Entwicklung handlicher, die Dateien vorerst nicht zu packen, da Sie diese dann besser bearbeiten können ohne die Dateien jedes Mal neu zu packen zu müssen.

+ +

Standardmäßig parsen Mozilla-Applikationen XUL-Dateien und Skripte und speichern eine vor-kompilierte Version im Speicher im Laufe der Anwendungssitzung. Das verbessert die Leistung. Dadurch wird XUL allerdings nicht neu geladen, auch nicht, wenn die Quelldateien sich geändert haben. Um diesen Mechanismus zu deaktivieren, ist es notwendig die Einstellung nglayout.debug.disable_xul_cache festzulegen. In Firefox muss diese Einstellung unter Umständen hinzugefügt werden, indem "about:config" in die Adresszeile eingegeben wird und dieser Wert auf "true" gesetzt wird. Oder Sie verändern die user.js-Einstellungsdatei manuell und fügen die folgende Zeile hinzu:

+ +
pref("nglayout.debug.disable_xul_cache", true);
+
+ +

Es gibt normalerweise drei verschiedene Teile eines chrome-Pakets, auch wenn sie alle optional sind. Jeder Teil wird in einem anderen Verzeichnis gespeichert. Diese drei Sets sind content, skin und locale, welche unten näher beschrieben sind. Ein bestimmtes Paket kann ein oder mehrere Skins und Sprachen bereitstellen und der Benutzer kann diese mit den eigenen ersetzen. Zusätzlich kann das Paket mehrere unterschiedliche Anwendungen enthalten, jedes davon über eine andere chrome-URL erreichbar. Das Paketsystem ist flexibel genug, um separate Downloads von anderen Teilen wie zum Beispiel andere Sprachen, handzuhaben.

+ +

Die drei Typen der Chrome-Pakete sind:

+ + + +

Content Pakete

+ +

Der Name der JAR-Datei kann beschreiben, was sich darin befindet, aber Sie können nur sicher gehen, wenn Sie sich die Inhalte wirklich anschauen. Verwenden wir das Browserpaket, welches in Firefox enthalten ist als Beispiel. Wenn Sie Dateien in browser.jar entpacken, werden Sie die folgende Verzeichnisstruktur auffinden:

+ +
content
+   browser
+      browser.xul
+      browser.js
+      -- weitere XUL und JS-Dateien --
+      bookmarks
+         -- Bookmarks-Dateien --
+      preferences
+         -- Einstellungsdateien --
+.
+.
+.
+
+ +

Das lässt einfach als ein 'content'-Paket identifizieren, weil das oberste Verzeichnis "content" genannt wurde. Für Skins wird dieses Verzeichnis normalerweise "skin" und für Sprachen wird es normalerweise "locale" genannt. Dieses Benennungsschema ist nicht notwendig, aber es ist eine gute Konvention, um die Teile des Pakets klar trennen zu können. Einige Pakete können unter Umstand ein Abschnitt für content, skin sowie locale besitzen. In diesem Fall werden Sie ein Unterverzeichnis für jeden Typ finden. Chatzilla wird zum Beispiel auf diesem Weg ausgeliefert.

+ +

Das "content/browser"-Verzeichnis enthält eine Vielzahl an Dateien mit der Endung .xul und .js. Die XUL-Dateien sind die mit der .xul-Endung. Die Dateien mit der .js-Endung sind JavaScript-Dateien, welche Skripte enthalten, die die Funktionen eines Fenstern steuern. Viele XUL-Dateien haben eine zugehörige JavaScript-Datei und einige haben sogar mehr als eine.

+ +

In der Verzeichnisauflistung oben werden zwei Dateien genannt. Es gibt natürlich noch weitere, aber zur Einfachheit wurde diese ausgelassen. Die Datei browser.xul ist die XUL-Datei, die das Hauptfenster beschreibt. Das Hauptfenster für ein "content"-Paket sollte den selben Namen wie das Paket haben, mit der Endung .xul. In diesem Fall ist der Paketname "browser" also erwarten wir die Datei browser.xul. Einige der anderen XUL-Dateien beschreiben weitere Fenster. Die Datei pageInfo.xul beschreibt zum Beispiel den Seiteninformationsdialog.

+ +

Viele Pakete werden eine contents.rdf Datei enthalten, welches das Paket beschreibt, den Autor und die Overlays, die verwendet werden. Diese Datei ist jedoch veraltet und wurde durch ein einfacheres Verfahren ersetzt. Die neue Methode ist die sogenannte Manifestdatei, die bereits erwähnt wurde. Diese Dateien finden Sie mit der Endung .manifest im Chrome-Verzeichnis. Die Datei browser.manifest beschreibt beispielsweise das Browser-Paket.

+ +

Mehrere Unterverzeichnisse wie "bookmarks" und "preferences" sind zusätzliche Bereiche der Browser-Komponente. Sie werden nur in unterschiedlichen Ordnern aufbewahrt, um die Dateien besser organisieren zu können.

+ +

Skins oder Themes

+ +

Obwohl der zugrunde liegende Code für Mozilla sie Skins nennt und die Benutzeroberfläche den Ausdruck "Themes" gebraucht, meinen beide die gleiche Sache. Die classic.jar-Datei beschreibt das Standard-Theme von Firefox. Die Struktur ist ähnlich zum content-Paket. Zum Beispiel classic.jar:

+ +
skin
+   classic
+      browser
+         browser.css
+         -- weitere browser Skin-Dateien --
+      global
+         -- globale Skin-Dateien --
+.
+.
+.
+
+ +

Auch hier ist die Verzeichnisstruktur nicht notwendig und wird zur besseren Organisation verwendet. Sie können sogar alle Dateien in ein Verzeichnis packen. Für große Anwendungen werden Unterverzeichnisse verwendet, um verschiedene Komponenten zu trennen. Im obigen Beispiel existiert ein Verzeichnis für Theme-bezogene Dateien des Browsers und ein Ordner für globale Theme-bezogene Dateien. Das "global"-Verzeichnis enthält Skin-Dateien, die allgemein für alle Pakete zu gebrauchen sind. Die Dateien sind für alle Komponenten angelegt und werden mit ihrer eigenständigen Anwendung eingebunden. Der globale Teil definiert den Teil der gemeinsamen XUL-Widgets, wohingegen die anderen Verzeichnisse Dateien enthalten, die speziell für die entsprechenden Anwendungen sind. Firefox bindet beide, die globalen und die Browser Theme-Dateien in einem Archiv ein, aber sie können auch einzeln eingebunden werden.

+ +

Ein Skin besteht aus CSS-Dateien und einer Reihe von Bildern, die das Aussehen des Interface definieren. Die Datei browser.css wird von browser.xul verwendet und enthält Styles, welche das Aussehen unterschiedlicher Teile der Anwendung beschreiben. Beachten Sie hier wieder, dass die Datei browser.css den gleichen Dateinamen wie das Paket besitzt. Beim Verändern von CSS-Dateien, stellen Sie das Aussehen eines Fensters ein, ohne dabei die Funktionen zu beeinflussen. Auf diese Weise können Sie ein neues Theme erstellen. Der XUL-Teil bleibt der Gleiche, aber der Skin-Teil wird unabhängig verändert.

+ +

Lokalisierung

+ +

Die Datei "en-US.jar" beschreibt die Sprachinformationen für jede Komponente, in diesem Fall für US-Englisch. Wie bei den Skins, enthält jede Sprachdatei Dateien, welche den Text für das Paket in der jeweiligen Sprache festlegen. Die Struktur von "locale" ist ähnlich zu den anderen, wir werden das hier nicht noch einmal auflisten.

+ +

Der lokalisierte Text wird in zwei verschiedenen Dateitypen gespeichert: DTD-Dateien und properties-Dateien. Die DTD Dateien haben die Endung .dtd und enthalten Entity-Deklarationen, eine für jeden Textstring, welcher in einem Fenster verwendet wird. Die Datei browser.dtd enthält zum Beispiel Entity-Deklarationen für jedes Menü-Kommando. Zusätzlich werden Tastaturkürzel für jedes Kommando definiert, weil Sie eventuell unterschiedlich in verschiedenen Sprachen sein können. DTD-Dateien werden von XUL Dateien benutzt, meist werden Sie eine Datei pro XUL Datei finden. Der "locale" Teil beinhaltet auch "properties" Dateien, welche ähnlich sind, aber von Skriptdateien verwendet werden. Die Datei browser.properties enthält einige solcher lokalisierter Strings.

+ +

Diese Struktur erlaubt Ihnen Mozilla oder eine Komponente in verschiedene Sprachen zu übersetzen, in dem einfach ein neues "locale"-Verzeichnis hinzugefügt wird. Sie müssen den XUL-Code gar nicht verändern. Weiter kann eine andere Person ein anderes Paket hinzufügen, welches Unterstützung für eine neue Sprache bietet, ohne dass Ihr Originalpaket verändert wird.

+ +

Weitere Pakete

+ +

Es gibt ein spezielles Paket, welches "Toolkit" (oder "global") genannt wird. Wir haben uns das "global"-Verzeichnis für Skins angeschaut. Die Datei toolkit.jar enthält den zugehörigen "content"-Teil dazu. Es sind einige globale Dialoge und Definitionen darunter. Es wird auch das Standardaussehen und die Standardfunktionen der XUL-Widgets, wie Textboxen und Schaltflächen festgelegt. Diese Datei im globalen Teil eines Skin-Verzeichnisses enthalten das Standardaussehen für alle XUL Interface-Elemente. Das Toolkit-Paket wird von allen XUL-Applikationen verwendet.

+ +

Ein Paket hinzufügen

+ +

Mozilla platziert die Pakete, die mit der Installation eingebunden werden, in das Chrome-Verzeichnis. Diese Dateien müssen dort jedoch nicht platziert werden. Wenn ein anderes Paket installiert wird, können Sie dies überall auf der Festplatte platzieren, so lange eine Manifestdatei darauf zielt. Es ergibt Sinn Pakete in das Chrome-Verzeichnis zu packen, einfach weil es bequemer ist. Jedoch funktionieren die Pakete genauso gut, wenn sie woanders liegen. Sie können die Dateien jedoch nicht auf einer entfernten Seite speichern, da die entfernte Seite nicht durch das lokale Dateisystem gemountet ist.

+ +

Es gibt zwei chrome-Verzeichnisse für XUL-Applikationen: Eine ist dort installiert, wo auch die Anwendung installiert wurde, während die andere Teil des Benutzerprofils ist. Das erste Verzeichnis erlaubt Paketen über alle Benutzer zu agieren, während das zweite Verzeichnis nur für den jeweiligen Benutzer erstellt worden ist. Erweiterungen werden in einem separaten  Erweiterungsverzeichnis installiert und sind außerdem Benutzer-spezifisch. Jede Manifestdatei in einem der Chrome-Verzeichnissen wird geprüft, um zu sehen, welche Pakete installiert sind.

+ +

Im nächsten Abschnitt werden wir einen Blick darauf werfen, wie man die Chrome-URL verwendet, um sich auf Chrome-Pakete zu beziehen.

+ +

{{ PreviousNext("XUL_Tutorial/Einfuehrung", "XUL_Tutorial/Die_Chrome_URL") }}

+ +

{{ languages( { "en": "en/XUL_Tutorial/XUL_Structure", "es": "es/Tutorial_de_XUL/Estructura_XUL", "ja": "ja/XUL_Tutorial/XUL_Structure", "pl": "pl/Kurs_XUL/Struktura_XUL","fr": "fr/Tutoriel_XUL/La_structure_XUL" } ) }}

diff --git "a/files/de/archive/mozilla/xul/\303\244nderungen_an_xul_f\303\274r_firefox_1.5/index.html" "b/files/de/archive/mozilla/xul/\303\244nderungen_an_xul_f\303\274r_firefox_1.5/index.html" new file mode 100644 index 0000000000..685c091888 --- /dev/null +++ "b/files/de/archive/mozilla/xul/\303\244nderungen_an_xul_f\303\274r_firefox_1.5/index.html" @@ -0,0 +1,44 @@ +--- +title: Änderungen an XUL für Firefox 1.5 +slug: Archive/Mozilla/XUL/Änderungen_an_XUL_für_Firefox_1.5 +tags: + - Firefox 1.5 + - XUL +translation_of: Archive/Mozilla/XUL/XUL_Changes_for_Firefox_1.5 +--- +

Diese Seite liefert eine Übersicht über die wichtigsten Änderungen an XUL in Firefox 1.5 (Gecko 1.8). Weitere Änderungen, von denen man wissen sollte, beschreibt die Seite XUL Anwendungen für Firefox 1.5 anpassen.

+

<scrollcorner>

+

Es wurde das Element <scrollcorner> hinzugefügt, welche für den kleinen Kasten an der Überkreuzung von horizontalen und vertikalen Scrollbalken benutzt wird.

+

<richlistbox> und <richlistitem>

+

Die Elemente <richlistbox> und <richlistitem> werden zur Darstellung von Listen beliebigen Inhalts benutzt. Das erst genannte funktioniert ähnlich wie <listbox>, welches vorwiegend für Listen mit Texteinträgen entworfen wurde. Die <richlistbox> hat größtenteils die gleiche API wie <listbox> und einzelne Einträge, die mithilfe von <richlistitem> erzeugt wurden, können ausgewählt werden. Siehe Richlistbox für weiterführende Information.

+

System für Voreinstellungen

+

Einige Elemente wurden hinzugefügt, mit denen Voreinstellungsfenster erzeugt werden können. Diese Fenster sind spezielle Typen von Dialogfenstern, die mehrere Panels unterstützen, welche jeweils zusammen in der gleichen Datei oder in einer eigenen Datei gespeichert werden können. Ein Satz von Icons wird am oberen Rand des Dialogfensters angezeigt und erlaubt dem Benutzer das Umschalten zwischen den Panels. Zusammen mit den neuen Elementen und einigen zusätzlichen Attributen für bestehende Elemente ermöglichen sie auf einfache Weise das Setzen von Voreinstellungen, ohne dafür Code benutzen zu müssen. Für weiterführende Information, siehe Preferences System.

+

bfcache

+

Mozilla speichert nun das DOM der Seite zwischen. Daher führt das Navigieren vor und zurück nicht zu einem Neuladen der Seite, was die Navigation sehr viel effizienter macht. Die Ereignisse pageshow und pagehide treten beim Umschalten von einer Seite im Zwischenspeicher auf, wohingegen die Ereignisse load und unload nur beim Laden und Entladen einer Seite auftreten.

+

Für weiterführende Information siehe: Benutzen des Zwischenspeichers in Firefox 1.5.

+

tabIndex

+

Die Eigenschaft tabIndex wird nun auf die meisten Elemente angewendet.

+

<radiogroup>

+

Das Setzen der value Eigenschaft eines <radiogroup> Elements führt zur Auswahl des <radio> Elements in der Gruppe mit dem entsprechenden Wert.

+

Dialog: defaultButton Eigenschaft

+

Die Bindung des <dialog> Elements besitzt nun die Eigenschaft defaultButton. Das Setzen dieser Eigenschaft ändert die Standardschaltfäche des Dialogfensters. Die eine Möglichkeit ist die Angabe einer der Schaltflächen der <dialog>-Bindung (anhand des Namens); die andere ist none, dann ist keine Schaltfläche die Standardschaltfläche.

+

Schaltfläche: icon Eigenschaft

+

Die icon Eigenschaft einer Schaltfläche ermöglicht die Verwendung vordefinierter Icons als Bild der Schaltfläche. Beispielsweise erzeugt <button icon="help"> eine Schaltfläche mit einem Hilfe-Icon. Dies wird typischerweise auf Systemen mit GNOME eingesetzt, die möglichen Werte sind hier: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network.

+

<menulist>

+

Einträge in einer <menulist> können ein description Attribut haben, um zusätzlich beschreibenden Text neben dem Namen eines Eintrags anzuzeigen. Die Änderungsmethoden appendItem und insertItemAt von menulist verlangen ein zusätzliches description Argument, wenn Einträge auf diese Weise erzeugt werden.

+

<listbox>

+

Die Methode removeItemAt war augrund eines Fehlers ({{ Bug(236068) }}) manchmal nicht nullbasiert. Dies wurde in Firefox 1.5 behoben und Code, der sich auf dieses nicht nullbasierte Verhalten verlässt, sollte entsprechend geändert werden.

+

<stringbundle>

+

Das <stringbundle> Element hat eine Eigenschaft strings dazu bekommen, die eine Aufzählung aller im Bündel enthaltenen Zeichenketten ermöglicht.

+

Ziehbare Reiter

+

Von jetzt an erlaubt der Tab-Browser ein Neuanordnen der Reiter durch einfaches Ziehen.

+

<tabbox>

+

Das <tabbox> Element besitzt nun ein Attribut selectedIndex zur Angabe desjenigen Reiters, der standardmäßig gewählt sein soll.

+

Überlagerungen dynamisch laden

+

XUL untersützt nun das dynamische Laden von Überlagerungen mithilfe der Funktion document.loadOverlay.

+
+

Information zum Originaldokument

+ +
+

{{ languages( { "en": "en/XUL_Changes_for_Firefox_1.5", "fr": "fr/Modifications_XUL_pour_Firefox_1.5", "ja": "ja/XUL_Changes_for_Firefox_1.5", "pl": "pl/Zmiany_w_XUL-u_w_Firefoksie_1.5" } ) }}

-- cgit v1.2.3-54-g00ecf