diff options
Diffstat (limited to 'files/de/archive/mozilla/xul/school_tutorial')
6 files changed, 903 insertions, 0 deletions
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 +--- +<p>{{ PreviousNext("XUL_School/Setting_Up_a_Development_Environment", "XUL_School/Adding_Toolbars_and_Toolbar_Buttons") }}</p> +<p>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.</p> +<h2 id="Adding_a_New_Menu">Adding a New Menu</h2> +<p>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.</p> +<p>If your extension requires custom XUL windows, you may also need to have menus on those windows. You can do this with a <a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a>. The <em>menubar</em> element should be a child of a <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a> element because it is treated like another toolbar on systems other than Mac OS X.</p> +<div class="note"> + <p>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.</p> +</div> +<p>The toolbox should be positioned near the top of the XUL document, and the code should be similar to this:</p> +<pre><code><toolbox> + <menubar id="</code><code>xulschoolhello</code><code>-menubar"> + <menu id="</code><code>xulschoolhello</code><code>-greeting-menu" label="&</code><code>xulschoolhello</code><code>.greeting.label;"> + <menupopup> + <menuitem label="&xulschoolhello.greet.short.label;" + oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.medium.label;" + oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.long.label;" + oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" /> + <menuseparator /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.custom.label;" + oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" /> + </menupopup> + </menu> + </menubar> +</toolbox> </code></pre> +<p>This code displays a simple <a href="/en/XUL/menu" title="en/XUL/menu">menu</a> with options for 3 different types of greetings, a <a href="/en/XUL/menuseparator" title="en/XUL/menuseparator">menuseparator</a>, 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 <a href="/en/XUL/menuitem" title="en/XUL/menuitem">menuitem</a> elements, keeping everything more organized.</p> +<p>A <em>menubar</em> can hold one or more <em>menu</em> elements. Menus require a <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a> element as a container for its children, which are usually <em>menuitem</em> elements, but can also be <em>menuseparator,</em> or <em>menu</em> in order to have multiple nesting levels:</p> +<pre><code><toolbox> + <menubar id="</code><code>xulschoolhello</code><code>-menubar"> + <menu id="</code><code>xulschoolhello</code><code>-greeting-menu" label="&</code><code>xulschoolhello</code><code>.greeting.label;"> + <menupopup> + <menu id="</code><code>xulschoolhello</code><code>-greeting-sizes-menu" label="&</code><code>xulschoolhello</code><code>.greetingSizes.label;"> + <menupopup> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.short.label;" + oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingShort(event);" /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.medium.label;" + oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingMedium(event);" /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.long.label;" + oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingLong(event);" /> + </menupopup> + </menu> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.custom.label;" + oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingCustom(event);" /> + </menupopup> + </menu> + </menubar> +</toolbox> </code></pre> +<p>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.</p> +<p>You can also have menus that are filled dynamically. Instead of setting the menupopup directly in the XUL, you can use the <a href="/en/XUL/Attribute/onpopupshowing" title="en/XUL/Attribute/onpopupshowing">onpopupshowing</a> event to fill the children when the popup is about to be displayed. DOM functions like <a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">createElement</a> and <a href="/En/DOM/Node.appendChild" title="En/DOM/Node.appendChild">appendChild</a> can be used to accomplish this.</p> +<div class="note"> + <p>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.</p> + <p>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 <a class="external" rel="freelink">chrome://global/skin/icons/loading_16.png</a>) 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.</p> +</div> +<h2 id="Adding_Elements_to_Existing_Menus">Adding Elements to Existing Menus</h2> +<p>Just as explained in the previous sections, the best place to overlay your extension menu is inside the <em>Tools</em> 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:</p> +<pre><code><menupopup id="menu_ToolsPopup"> + <menu id="</code><code>xulschoolhello</code><code>-hello-menu" label="&</code><code>xulschoolhello</code><code>.hello.label;" + accesskey="&</code><code>xulschoolhello</code><code>.helloMenu.accesskey;" + insertafter="javascriptConsole,devToolsSeparator"> + <menupopup> + <!-- Your menuitem goes here. --> + </menupopup> + </menu> +</menupopup> </code></pre> +<p>Now let's look at some specialized types of menu items.</p> +<h2 id="Menu_types">Menu types</h2> +<h3 id="Checkbox_Menu_Items">Checkbox Menu Items</h3> +<p>You can make a <em>menuitem</em> "checkable" to allow the user to enable/disable options using the menu. We use two attributes for this: <a href="/en/XUL/menuitem#a-menuitem.type" title="en/XUL/menuitem#a-menuitem.type">type</a> and <a href="/en/XUL/menuitem#a-checked" title="en/XUL/menuitem#a-checked">checked</a>. The <em>type</em> attribute must be set to "checkbox". You can set the <em>checked</em> attribute to "true" to check it by default.</p> +<p>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.</p> +<h3 id="Radio_Menu_Items">Radio Menu Items</h3> +<p>If you need to have a set of <em>menuitem</em> elements where only one of them has to be checked at any given moment, you should set the <em>type</em> to "radio". The <em>name</em> attribute is used to identify the items that belong to the radio group.</p> +<pre><code><menupopup oncommand="XULSchoolChrome.HW.GreetingDialog.greeting(event);"> + <menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio" + label="&</code><code>xulschoolhello</code><code>.greet.short.label;" checked="true" /> + <menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio" + label="&</code><code>xulschoolhello</code><code>.greet.medium.label;" /> + <menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio" + label="&</code><code>xulschoolhello</code><code>.greet.long.label;" /> +</menupopup> </code></pre> +<p>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 <em>oncommand</em> attribute is set on the <em>menupopup</em> to avoid code duplication, since now the 3 items call the same function.</p> +<p>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.</p> +<h3 id="Menus_with_Images">Menus with Images</h3> +<p>To add an icon to a <em>menu</em> or <em>menuitem</em>, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the <a href="/en/XUL/Attribute/image" title="en/XUL/Attribute/image">image</a> attribute or the <a href="/en/CSS/list-style-image" title="en/CSS/list-style-image">list-style-image</a> CSS property. Menu icons are typically 16px by 16px.</p> +<h2 id="Menus_on_Mac_OS_X">Menus on Mac OS X</h2> +<p>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:</p> +<ul> + <li>The About, Preferences and Quit menu items are located under the "Firefox" menu, not the usual places you would find them. You can access these items by id through the DOM, but their parent menu is not easily accessible.</li> + <li>We've run into bugs when adding, removing, enabling and disabling menu items dynamically, specially the root menu items (File, Edit, View, etc). You should carefully test this behavior to make sure it works properly in your extension.</li> + <li>Images in menu items may not appear, showing only a narrow segment of the image instead. This seems to happen when remote images are used.</li> + <li>Menu items are not dynamically updated while they are open. For example, you could have a <em>menuitem</em> that tells you the current time and is updated every second. On other systems you would be able to see the item update itself without having to close the menu and then reopen. This is not the case on Mac OS.</li> +</ul> +<p>{{ PreviousNext("XUL_School/Setting_Up_a_Development_Environment", "XUL_School/Adding_Toolbars_and_Toolbar_Buttons") }}</p> +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> 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 +--- +<p>{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}</p> + +<h2 id="Die_install.rdf_Datei">Die install.rdf Datei</h2> + +<p>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.</p> + +<p>Die Datei ist in einem speziellen Dialekt von XML, <a class="external" href="http://en.wikipedia.org/wiki/Resource_Description_Framework">RDF</a> 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.</p> + +<p>Nehmen wir jetzt einen genaueren Blick auf die wichtigen Teile der Datei.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><em:id>helloworld@xulschool.com</em:id></pre> +</div> +</div> + +<p>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.</p> + +<p>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 <span style="color: #0000ff;"><em><project-name>@<yourdomain></em></span>. Die andere standard Vorgehensweise ist die Verwendung eines erzeugten <a class="external" href="http://en.wikipedia.org/wiki/Uuid">UUID</a>-Strings, welcher sehr unwahrscheinlich duppliziert ist. UNIX-basierte Systeme haben ein Kommandozeilenprogramm mit dem Namen <em>uuidgen </em>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.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><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> +<span class="code-comment"><em:homepageURL>https://developer.mozilla.org/en-US/docs/XUL_School</em:homepageURL></span></pre> + +<p><span class="code-comment">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.</span> Die <a href="/en-US/docs/Install_Manifests" title="en/Install Manifests">vollständige Spezifikation</a> der install.rdf Datei beinhaltet alle Details.</p> + +<p>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.</p> +</div> +</div> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><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></pre> +</div> +</div> + +<p>Der es-Es lokale String bedeutet das dies die spanische (es) lokalisierung für Spanien (ES) ist. Sie können soviele <em><em:localized> </em>Sektionen hinzufügen wie Sie benötigen. Für Friefox 2, ist die lokaliesierungs Datei <a href="/en-US/docs/Localizing_extension_descriptions#Localizing_before_Gecko_1.9">etwas komplizierter</a>. Wir werden im weiteren die lokalisierung in diesem Kapitel besprechen.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><em:type>2</em:type></pre> +</div> +</div> + +<p>Dies bestimmt, dass das Add-on als eine Erweiterung installiert wird. Sie können die verschieden möglichen Typen in der <a href="/en-US/docs/Install_Manifests#type">install.rdf Spezifikation</a> nachlesen.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><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> +</pre> +</div> +</div> + +<p>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.</p> + +<p>Die min und max Version Angabe spezifiziert den Versionbereich in dem die Erweiterung installiert werden kann. Hier gibt es mehr Informationen über das <a href="/en-US/docs/Toolkit_version_format" title="en/Toolkit version format">Versionsformat.</a> 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 <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/15003" title="https://addons.mozilla.org/en-US/firefox/addon/15003">Add-on Compatibility Reporter</a>. 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.</p> + +<p>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.</p> + +<h2 id="The_chrome.manifest_File">The chrome.manifest File</h2> + +<blockquote> +<p><span style="color: #0000ff;">Chrome is the set of user interface elements of the application window that are outside of a window's content area.</span> Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.</p> +</blockquote> + +<p>Auszug aus der <a href="/en-US/docs/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>.</p> + +<p>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.</p> + +<p>Wie wir in der Ordnerstruktur der entpackten Erweiterung gesehen haben, Chrome ist zusammengesetzt aus drei Teilbereichen: <span style="color: #0000ff;">content</span>, <span style="color: #0000ff;">locale</span> und <span style="color: #0000ff;">skin</span>. Diese drei sind notwendig für die meisten Erweiterungen. Wenn wir die <em>chrome.manifest</em>-Datei erneut öffnen (nochmals jeder Texteditor kann hierfür verwendet werden), werden wir diese drei angesprochenen Teilbereiche erkennen können.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">content xulschoolhello content/ +skin xulschoolhello classic/1.0 skin/ +locale xulschoolhello en-US locale/en-US/ +</pre> +</div> +</div> + +<p><span style="color: #0000ff;">Die <em>chrome.manifest</em> Datei lässt Firefox wissen, wo es nach den Chromedateien zu suchen hat.</span> Der Text ist formatiert so das er dem Aussehen einer Tabelle gleicht, aber dies ist nicht notwendig. Der Parser ignoriert aufeinanderfolgende Leerzeichen.</p> + +<p>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.</p> + +<p>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 , <em>classic/1.0</em>, und mehrere lokale Einträge, einen für jede Übersetzung. Am Ende wird eine Ortsvariable spezifizerit.</p> + +<p>Es gibt einige zusätzliche Optionen, die in die Einträge der <em>chrome.manifest</em> Datei eingefügt werden können. Diese sind auf der <a href="/en-US/docs/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a> 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:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">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/ +</pre> +</div> +</div> + +<p>Ü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.</p> + +<h2 id="Chrome">Chrome</h2> + +<p>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.</p> + +<p>Chrome Dateien werden über das Chrome-Protokoll zugewiesen. So sieht eine chrome URI aus:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">chrome:<span class="code-comment">//packagename/section/path/to/file</span></pre> + +<p><span class="code-comment">Wenn ich beispielsweise Zugriff auf die Datei</span> <em>browserOverlay.xul </em>haben möchte, wäre die Chrome URI <em>chrome://xulschoolhello/content/browserOverlay.xul</em>.</p> +</div> +</div> + +<p>Wenn Sie zu viele Dateien im content Bereich habe und Sie diese in Subordner organisieren wollen, gibt es nichts was Sie im <em>chrome.manifest</em> ändern müssen, alles was Sie benötigen ist den richtigen Pfad nach <em>content</em> in die URI hinzuzufügen.</p> + +<p>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 <em>chrome://xulschoolhello/locale/browserOverlay.dtd</em>. Firefox was anschließend nach welcher Region es abrufen muss.</p> + +<p>Hier ist ein interesantes Experiment. Öffne ein neues Firefox Tab, tippe <em>chrome://mozapps/content/downloads/downloads.xul </em>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.</p> + +<h3 id="Content">Content</h3> + +<p>Es gibt 2 Dateien im content Verzeichnis. Sehen wir uns zuerst die XUL-Datei an.</p> + +<p>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.</p> + +<p>XUL-Dateien defineren in der Regel eine von zwei Dingen: Fenster oder Overlays. Die Datei die Sie zuvor geöffnet haben, <em>downloads.xul</em>, 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 <em>chrome.manifest</em> Datei übersprungen haben gibt an das es sich bei dieser XUL-Datei um ein Overlay für das Browserhauptfenster handelt:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">overlay chrome:<span class="code-comment">//browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul</span></pre> + +<p><span class="code-comment">Durch diese Zeile weiß Firefox, dass es die Inhalte aus </span><em>browserOverlay.xul </em>verwenden muss und diese über das Browserhauptfenster, <em>browser.xul </em>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.</p> + +<p>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.</p> +</div> +</div> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"></pre> +</div> +</div> + +<p>Das Wurzelelement in dieser Datei ist ein <em>Overlay</em>. 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.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">You may have noticed the naming we use on several places, such as the id <em>xulschoolhello-browser-overlay</em>. 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 <em>container</em> or <em>input</em>, 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.</div> +</div> +</div> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><script type=<span class="code-quote">"application/x-javascript"</span> src=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/browserOverlay.js"</span> /></span></pre> +</div> +</div> + +<p>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.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">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.</div> +</div> +</div> + +<p>Wir werden etwas Programmcode übersprinder, der im Regionsbereich behandelt wird, um mit dem wichtigsten Bereich von content fortzufahren.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><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> +</pre> +</div> +</div> + +<p>Das ist der Code, der das Hello World-Menü dem Browserfenster hinzufügt.</p> + +<p>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.</p> + +<p>Um diesen Code zu schreiben, benötigen wir etwas Wissen über den XUL-Code in <em>browser.xul</em>. Wir müssen wissen, dass die ID des rechten Fläche in dem undefinierten Menü <em>appmenuSecondaryPane</em> 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:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">insertafter=<span class="code-quote">"appmenu_addons"</span> +</pre> +</div> +</div> + +<p><em>appmenu_addons</em> 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.</p> + +<p>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.</p> + +<p>Ein empfehlenswerter Ort für Menüs in dem Klassikmenü ist unter dem Extrasmenü, von daher sollte der Code in etwa so aussehen:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><menupopup id=<span class="code-quote">"menu_ToolsPopup"</span>> + <menu id=<span class="code-quote">"xulschoolhello-hello-menu"</span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloMenu.accesskey;"</span> + insertbefore=<span class="code-quote">"</span>devToolsEndSeparator<span class="code-quote">"</span>> + <menupopup> + <menuitem id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-hello-menu-item" + </span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloItem.accesskey;"</span> + oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> /> + </menupopup> + </menu> +</menupopup> +</pre> +</div> +</div> + +<p>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. Das<em>insertbefore</em> 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.</p> + +<p>Nehmen wir jetzt einen Blick auf den eigentlichen Code:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> +</pre> +</div> +</div> + +<p>Dieses Attribute beschreibt einen Eventhandler. . Das <em>command</em> 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 <em>event</em>, welches normalerweise ausreicht um ein Argument an die Funktion zu übergeben. Eventhandler werden im späteren genauer definiert.</p> + +<p>Nun werfen wir einen Blick in die JavaScript-Datei und und sehen uns an wenn das Event ausgeführt wird.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">/** + * XULSchoolChrome namespace. + */ +if ("undefined" == typeof(XULSchoolChrome)) { + var XULSchoolChrome = {}; +};</pre> +</div> +</div> + +<p>Der <em>XULSchoolChrome</em> 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 <em>MenuHandler definieren </em>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: <em>XULSchoolChrome</em>. Nun wissen dass alle unsere Objekte sind innerhalb dieses Objekts, welches unwahrscheinlich duplliziert oder überschrieben wird von anderen Erweiterungen.</p> + +<p>Sie können hier mehr über den <a href="/en-US/docs/JavaScript/Reference/Operators/typeof" title="en/Core JavaScript 1.5 Reference/Operators/Special Operators/typeof Operator"><span class="external">typeof operator</span></a> erfahren. Wenn Sie nicht mit JavaScript oder der besonderen Syntax, ein Objekt mit {} zu intialisieren ist identisch mit es mit <em>new Object() </em>zu intialisieren.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">/** + * Controls the browser overlay <span class="code-keyword">for</span> the Hello World extension. + */ +XULSchoolChrome.BrowserOverlay = {</pre> +</div> +</div> + +<p>Sclussendlich ist <em>BrowserOverlay </em>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.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">We use <a class="external" href="http://java.sun.com/j2se/javadoc/writingdoccomments/index.html">Javadoc</a> 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.</div> +</div> +</div> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">sayHello : function(aEvent) { + let stringBundle = document.getElementById("xulschoolhello-string-bundle"); + let message = stringBundle.getString("xulschoolhello.greeting.label"); + + window.alert(message); +}</pre> +</div> +</div> + +<p>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 <a href="/en-US/docs/XUL/stringbundle" title="en/XUL/stringBundle">stringbundle</a>-Element beinhaltet, das im Overlay definiert ist. Die Variable ist deklariert durch die Verwendung von <em>let, </em>dass <em>var </em>ähnlich ist aber einen enger begrenzten Bereich besitzt. Hier können Sie mehr über die <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><span class="external">let deklaration </span></a>nachlesen.</p> + +<p>WIe auch im regulären JS, können wir das <a href="/en-US/docs/DOM" title="en/DOM"><span class="external">DOM</span></a> (Document Object Model) nutzen um dass XUL-Dokument zu manipulieren.Als erstes bekommen wir eine referenze auf das <a href="/en-US/docs/XUL/stringbundle" title="en/XUL/stringbundle"><span class="external">stringbundle-Element</span></a> 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 <a href="/en-US/docs/XUL/stringbundle#m-getString" title="en/XUL/stringbundle#m-getString">getString Methode</a> des bundle-Elements udn bekommen die begrenzte Meldung angeziegt. Anschließende rufen wir die <a href="/en-US/docs/DOM/window.alert" title="en/DOM/window.alert">window.alert</a>-Funktion auf, wie wir das auch in einem HTML-Dokument machen würden.</p> + +<h3 id="Locale">Locale</h3> + +<p>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.</p> + +<p>Werfen wir einen Blick zurück auf den Menücode, dort haben Sie unter Umständen einge Attribute wie diese bemerkt:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">label=<span class="code-quote">"&xulschoolhello.hello.label;"</span> accesskey=<span class="code-quote">"&xulschoolhello.helloItem.accesskey;"</span></pre> +</div> +</div> + +<p>Diese Attribute definieren den Text den Sie in den Menüs sehen, es sind String-keys die in unserer DTD-Datei definiert sind, <em>browserOverlay.dtd</em>. Die DTD-Datei wurd mit folgendem Code in die XUL-Datei eingefügt:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" ></pre> +</div> +</div> + +<p>Und in der DTD-Datei können Sie die Zuordnung von Keys und regionalen Strings sehen:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><!ENTITY xulschoolhello.hello.label <span class="code-quote">"Hello World!"</span>> +<!ENTITY xulschoolhello.helloMenu.accesskey <span class="code-quote">"l"</span>> +<!ENTITY xulschoolhello.helloItem.accesskey <span class="code-quote">"H"</span>></pre> +</div> +</div> + +<p>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.</p> + +<p>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 <a href="http://www.dict.cc/deutsch-englisch/Barrierefreiheit.html">Barrierefreiheit</a> 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.</p> + +<div> +<p><img alt="" class="internal" src="/@api/deki/files/4226/=accesskeys.png" style="width: 167px; height: 58px;"></p> +</div> + +<p>DIe meisten Benutzeroberflächen Schaltflächen besitzen ein <em>accesskey</em> 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.</p> + +<p>DTD-Strings werden aufgelöst und gesetzt wenn das Dokument lädt. Wenn Sie den <em>label-Attribute </em>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.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let helloItem = document.getElementById(<span class="code-quote">"xulschoolhello-hello-menu-item"</span>); + +<span class="code-comment">// The alert will say <span class="code-quote">"Hello World!"</span> +</span>alert(helloItem.getAttribute(<span class="code-quote">"label"</span>)); +<span class="code-comment">// Wrong +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label;"</span>); +<span class="code-comment">// Better +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"Alternate message"</span>); +<span class="code-comment">// Right! +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, someStringBundle.getString(<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label"</span>));</pre> +</div> +</div> + +<p>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.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><stringbundleset id="stringbundleset"> + <stringbundle id="xulschoolhello-string-bundle" + src="chrome://xulschoolhello/locale/browserOverlay.properties" /> +</stringbundleset></pre> +</div> +</div> + +<p>Das <a href="/en-US/docs/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a>-Element ist nur ein Container für <a href="/en-US/docs/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a>-Elemente. Hiervon sollte eines pro Dokument geben, dies ist auch der Grund warum wir das <em>stringbundleset</em> in der browser.xul überschreiben, daher die sehr generische ID. Wir fügen keine <em>insertbefore</em> oder <em>insertafter</em> 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.</p> + +<p>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:</p> + +<pre class="code-java language-html"><code class="language-html">xulshoolhello.greeting.label = Hi! How are you?</code></pre> + +<p>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.</p> + +<p>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.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">xulshoolhello.search.label = Found %S words matching the search query!</pre> +</div> +</div> + +<p>Wenn Sie den <a href="/en-US/docs/XUL/stringbundle#m-getFormattedString" title="en/XUL/stringbundle#m-getFormattedString">getFormattedString</a> anstatt des <em>getString </em>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 <a href="/en-US/docs/XUL_Tutorial/Property_Files#Text_Formatting" title="en/XUL Tutorial/Property Files#Text Formatting">Text Formatting Bereich</a> des XUL Tutorial nachlesen. Werfen Sie auch einen Blick auf die <a href="/en-US/docs/Localization_and_Plurals" title="en/Localization and Plurals">Plurals and Localization</a> 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.</p> + +<h3 id="Skin">Skin</h3> + +<p>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:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><?xml-stylesheet type=<span class="code-quote">"text/css"</span> href=<span class="code-quote">"chrome:<span class="code-comment">//global/skin/"</span> ?> +</span><?xml-stylesheet type=<span class="code-quote">"text/css"</span> + href=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/skin/browserOverlay.css"</span> ?></span></pre> +</div> +</div> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Übung">Übung</h2> + +<p>Mache die folgenden Änderungen in der Beispielerweiterung:</p> + +<ul> + <li>Passe die Willkommensmeldung die im Benachrichtigungsfenster angezeigt wird an.</li> + <li>Verschiebe das Hello World -menü in das Extras -menü.</li> +</ul> + +<p>Packe die XPI neu. Führe unter Linux oder Mac OS X folgendes Kommando innerhalb des Wurzelverzeichnisses der Erweiterung aus:</p> + +<pre>zip -r ../xulschoolhello2.xpi * +</pre> + +<p>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.</p> + +<p>Installiere die XPI neu. Sie können hierzu die XPI-Datei hierzu einfach in den Browser ziehen und diese wird lokal installiert.</p> + +<p>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.</p> + +<div class="note"><strong>Note:</strong> Packaging an extension is really just creating a ZIP archive of the contents of the main folder, then changing the filename extension to <code>.XPI</code>. Do <strong>not</strong> zip the containing folder, just its contents. The <code>content</code> folder, <code>chrome.manifest</code>, <code>install.rdf</code>, 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.</div> + +<p>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.</p> + +<p>Nachdem Sie fertig sind, können Sie sich diese Refernzlösung ansehen: <a href="/@api/deki/files/5141/=xulschoolhello2.xpi" title="https://developer.mozilla.org/@api/deki/files/5141/=xulschoolhello2.xpi">Hello World 2</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8423/menu_item%20-%20helloworld2.png"></p> + +<p>{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> 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 +--- +<p>{{ PreviousNext("XUL_School/The_Essentials_of_an_Extension", "XUL_School/Adding_menus_and_submenus") }}</p> +<h2 id="Eine_Entwicklungsumgebung_einrichten">Eine Entwicklungsumgebung einrichten</h2> +<p>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.</p> +<p>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.</p> +<p>WIe empfehlen <a class="external" href="http://www.activestate.com/komodo_edit/" title="http://www.activestate.com/komodo_edit/">Komodo Edit</a>. 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 .<em>kpf</em> oder <em>.komodoproject</em> fi Datei in einem Beispieldownload sehen ist das eine Komodoprojektdatei.</p> +<p><img alt="" height="479" src="https://mdn.mozillademos.org/files/8435/screenshot%20-%20komodo_edit.png" width="657"></p> +<p>Wir empfehlen <a href="http://git-scm.com/" title="http://git-scm.com/">Git</a> und <a href="https://github.com/" title="https://github.com/">GitHub</a> für die Versionskontrolle, aber jedes anständige <span class="st"><em><a href="http://en.wikipedia.org/wiki/Software_configuration_management" title="http://en.wikipedia.org/wiki/Software_configuration_management">Software-Configuration-Management</a></em></span> System kann hier eingesetzt werden.</p> +<p>Um XPI-Dateien zu packen, nutzen wir make. Wir haben <em>make</em> gewählt weil dieses System von Mozilla genutzt wird um Firefox zu bauen und es ist für alle Betriebssysteme verfügbar. <em>make</em> 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 <a class="external" href="http://www.cygwin.com/">cygwin</a>. In einer <em>cygwin</em>-Installation werden Sie explizit die <em>make</em> und <em>zip</em> utilities aus der langen Liste der Pakete auswählen müssen um diese herunterzuladen und installieren.</p> +<p>Sorgen Sie des weiteren dafür das <em>make</em> sich im ausführbaren Systempfad befindet. Nach der Einrichtung von <em>make</em>, sollten Sie in der Lage sein ein Kommandozeildenfenster zu öffnen, führen Sie "make-ver" aus, und Sie bekommen die installierte Version von <em>make</em> als Ausgabe.</p> +<p>Wir empfehlen Ihnen <em>make</em> 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 <em>src</em> Verzeichnisses zu komprimieren um ein identisches Ergebniss zu ereichen.</p> +<h2 id="Build_system">Build system</h2> +<p>Beginnen wir mit dem Herunterladen des Projekts mit dem die zweite Version von Hello World aufgebaut wurde, aus der Übung der letzten Lektion</p> +<p><a href="/@api/deki/files/5142/=HelloWorld2.zip" title="https://developer.mozilla.org/@api/deki/files/5142/=HelloWorld2.zip">Hello World 2 Project</a>.</p> +<p>Entpacken die Datei wohin Sie wollen. Innerhalb des <em>HelloWorld2</em> Verzeichnisses weden Sie zwei Verzeichnisse sehen: <em>bin</em> und <em>src</em>. Das <em>bin</em> Verzeichnis sollte leer sein. Dort werden alle enstehenden build-Dateien erstellt und dort werden Sie die Erweiterungs XPI-Datei finden wenn sie erstellt wurde.</p> +<p>Öffnen Sie die Projektdatei (<em>HelloWorld2.komodoproject</em>) in the <em>src </em>Verzeichnis in Komodo Edit. In dem Projektreiter sollten Sie nun in der Lage sein die Verzeichnisstruktur innerhalbt des <em>src-</em>Verzeichnises sehen. Dies Struktur solle ihnen vertraut sein, da Sie beinahe identisch mit der ungepackten XPI von der vorherigen Lektion ist.</p> +<p>Die einzige bemwerkswerte Änderung ist eine Datei mit der Bezeichnung <em>Makefile</em> unter <em>src</em>. Das ist die Datei die <em>make</em> 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 <a class="external" href="http://www.chemie.fu-berlin.de/chemnet/use/info/make/make_toc.html">GNU Make Manual</a> ist eine sehr gute Refernz um sich mit <em>make</em> und der <em>Makefile</em>-Datei vertraut zu machen.</p> +<p>In den meisten Fällen müssen Sie nur ein paar der ersten Zeilen in der <em>Makefile</em>-Datei ändern. Diese definieren den Erweiterungsnamen, die Erweiterungs ID (wie in <em>install.rdf</em> festgelegt) und der Name des profile-Verzeichnisses wohin die Erweiterung während der Entwicklung und des testens installiert wird. Mehr über das später.</p> +<p>Versuchen wir zuerst die XPI über die Kommandozeile zu erstellen. Öffnen Sie das Kommandozeilenprogramm in Ihrem System und naviergien Sie zum <em>src</em> Verzeichnis in Ihrem Projekt. Führen Sie folgenden Befehl aus:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">make</pre> + </div> +</div> +<p>Das ist es. Wenn alles gut läuft sollten Sie eine Ausgabe wie diese sehen:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">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. +</pre> + </div> +</div> +<p>Wenn Sie das <em>bin</em> Verzeichnis untersuchen, sollten Sie die <em>xulschoolhello2.xpi</em> Datei sehen.</p> +<p>Wenn Sie <em>make </em>ausführen, werden Sie die letzte Zeilde des Erstellungsprozesses sehen. Das ist so weil <em>make</em> mitteilt das die Datei im <em>bin</em> Verzeichnis aktuell ist und es nichts zu machen gibt. Änderungen an der Quelldatei werden <em>make</em> dazu bringen die notwendigen Schritte erneut auszuführen um XPI erneut zu erstellen.</p> +<p>Sie können das <em>bin </em>Verzeichnis aufräumen indem Sie einfach den folgenden Befehl ausführen (nochmal, innerhalb des <em>src</em> Verzeichnises)<br> + </p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">make clean</pre> + </div> +</div> +<p>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:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">bash -c <span class="code-quote">"make"</span></pre> + </div> +</div> +<p><img alt="" src="https://mdn.mozillademos.org/files/8439/screenshot%20-%20komodo_edit%20Run%20Command.png"></p> +<p>Oder ersetzen Sie "make" mit "make clean" für das aufräumen. Der "basc -c" Teil zwingt Komodo <em>bash</em> 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 <em>make</em>-Befehl übereinstimmt den wir als nächstes sehen werden.</p> +<p>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.</p> +<p>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 <em>Makefile</em>-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.</p> +<p>Möglicherweise möchten Sie die Profillokation in Ihrem <em>Makefile</em>-Datei ändern. . Um die Profilloaktion auf den richtigen Wert zu setzen, sollten Sie den Artikel <a class="external" href="http://support.mozilla.com/en-US/kb/Profiles">support article on profiles</a> auf der Mozilla Support Seite lesen. Auch werden wir später tiefer in dieses Thema eintauchen.</p> +<p>Um "make install" auf nicht WIndowssystemen einzusetzen, benötigen Sie einen extra Schritt. Der Installationsprozess benötigt eine Umgebungsvariable mit dem Namen <em>OSTYPE</em>, welche nicht exportiert wird. Lange Geschichte kurzer Sinn, über Kommandozeile müssen Sie folgendes ausführen:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">export OSTYPE; make install</pre> + </div> +</div> +<p>Und in Komodo sollten Sie fogenden Befehl eingeben:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">bash -c <span class="code-quote">"export OSTYPE; make install"</span></pre> + </div> +</div> +<p>Der <em>export</em>-Befehl wird nicht korrekt funktionieren wenn Sie nicht "bach-c" verwenden.</p> +<div class="note"> + The file <em>Makefile</em> specifies which profile folder the add-on will be reinstalled to. This is set in the <em>profile_dir</em> 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 <em>Makefile</em> in order to take advantage of the install command.</div> +<h3 id="Building_IDL_files">Building IDL files</h3> +<p>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.</p> +<p>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.</p> +<p>Um eine IDL-Dateizu XPT zu komplieren, benötigen Sie ein Kommandozeilen Tool, xpidl. Dieses Tool ist im Mozilla <a href="/en/Gecko_SDK" title="en/Gecko SDK">Gecko SDK</a> 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.</p> +<p>Sie sollten auch Ihre Umgebung so aufbauen das die <em>xpidl.exe</em> (oder nur <em>xpidl</em> 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:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">export GECKO_SDK=/path/to/your/sdk</pre> + </div> +</div> +<p>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<em> .bash_login</em>-Datei im Homeverzeichnis hinzu und wir passen den Befehl folgendermasen an.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">bash -c <span class="code-quote">". ~/.bash_login; make"</span></pre> + </div> +</div> +<p>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.</p> +<h3 id="Signing">Signing</h3> +<p>Um zusätzliche Sicherheit für Ihre Nutzer bereitzustellen, können Sie sich entscheiden <a href="/en/Signing_an_extension" title="en/Signing an extension">eine Signature zu Ihrer Erweiterung hinzuzufügen</a>. 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.</p> +<p>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 (<a class="link-https" href="https://addons.mozilla.org" title="https://addons.mozilla.org">AMO</a>) 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.</p> +<p>Sie werden einige libraries herunterladen müssen damit Sie in der Lage sind Ihre Erweiterungen zu signieren. Folgen Sie dieser <a href="/en/Signing_an_extension" title="en/Signing an extension"><span class="external">Anleitung</span></a> und fügen etwas ähnliches wie das der Makefile-Datei hinzu:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"># 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)</pre> + </div> +</div> +<p>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 <em>make</em>-Befehl hierfür haben, wie z.B. <em>make signed </em>um die signierten und unsignierten Entwicklungs builds unterscheiden zu können.</p> +<h2 id="Firefox_profile_management">Firefox profile management</h2> +<p>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.</p> +<p>Sie können in dem Mozillasupport-Artikeln <a class="external" href="http://support.mozilla.com/en-US/kb/Managing+profiles">Managing Profiles</a> 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.</p> +<p>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 ..</p> +<p>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:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -p MyProfile > /dev/<span class="code-keyword">null</span> &</pre> + </div> +</div> +<p>Sie können "/dev/null" auf einen Dateispeicherort ändern, in dem Fall das Sie eine <em>dump</em>-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.</p> +<p>Es sollten auch noch Konfigurationsänderungen in Ihrem Testprofil vorgenommen werden, sodass Sie im falls etwas schief geht detailierte Informationen erhalten. Die Firefox <a href="/en/Error_Console" title="en/Error Console">Error Console</a> (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<a href="/en/Setting_up_extension_development_environment#Development_preferences" title="en/Setting up extension development environment#Development preferences"><span class="external"> Development preferences</span></a>.</p> +<h2 id="Developer_extensions">Developer extensions</h2> +<p>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 <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4">Mozilla Add-ons Seite</a> auch gibt es hier ein gute <a href="/en/Setting_up_extension_development_environment#Development_extensions" title="en/Setting up extension development environment#Development extensions"><span class="external">Entwicklungserweiterungsliste</span></a>. 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.</p> +<h3 id="DOM_Inspector">DOM Inspector</h3> +<p>Der <a href="/en/DOM_Inspector" title="en/DOM Inspector"><span class="external">DOM Inspector</span></a> 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. <a href="/en/DOM_Inspector/Introduction_to_DOM_Inspector" title="en/Introduction to DOM Inspector">Introduction to DOM Inspector</a> ist eine gute Einführung um mit der Verwendung zu beginnen.</p> +<p>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 <a class="external" href="http://mxr.mozilla.org/">Mozilla source</a> sehen. Sie können sogar Styles, Attribute ändern und JavaScript Code ausführen, obwohl dies nicht vollständig zuverlässig ist.</p> +<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> +<p>Der Name sagt alles. Der <a href="/en/Venkman" title="en/Venkman">Venkman JavaScript Debugger</a> ist ein größartiger Weg um die Ausführung von JavaScript zu verfolgen.</p> +<p>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.</p> +<p>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.</p> +<h3 id="Tamper_Data">Tamper Data</h3> +<p><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/966" title="https://addons.mozilla.org/en-US/firefox/addon/966">Tamper Data</a> 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. <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3829">Live HTTP Headers</a>, aber Tamper Data ist das eine das wir am meisten einsetzen. Wir werden mehr über HTTP debugging später erfahren.</p> +<h3 id="Firebug">Firebug</h3> +<p>Die <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a> Erweiterung enthält fast alle Tools die bisher angesprochen wurden, aber sie ist hauptsächlich auf die Webentwicklung ausgerichtet. Die <a class="external" href="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide" title="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide">Chromebug</a> 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.</p> +<p>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.</p> +<h3 id="Leak_Monitor">Leak Monitor</h3> +<p>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.</p> +<p>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 <a href="/en/Using_XPCOM_in_JavaScript_without_leaking" title="en/Using XPCOM in JavaScript without leaking"><span class="external">Using XPCOM in JavaScript</span></a> 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.</p> +<p>Um sicher zugehen das Ihre Erweiterungen keine Leaks beinhaltet, Sie sollten die <a href="/en/Leak_Monitor" title="en/Leak Monitor"><span class="external">Leak Monitor Erweiterung</span></a> verwenden wenn Sie das testen. Testen Sie immer öffnende und schließende Fenster. Gewöhnlicherweise tretten diese Leaks bei diesem Vorgang auf.</p> +<h2 id="Exercise">Exercise</h2> +<ul> + <li>Setzen Sie ein neues Firefoxprofil für die XUL-Schule auf. Stellen Sie sicher das Sie Ihr XUL-Schulen Firefox öffnen und schließen können, ohne dass SIe die Instance von Fireox mit der Sie normalerweise surfen schließen mussen. Machen Sie irgendwelche beliebigen Änderungen an Ihrem XUL-Schulen Projekt, führen Sie make install aus und starten Sie Firefox neu um zu sehen das die Erweiterung nach Ihren Änderungen noch funktioniert.</li> + <li>Installiere den DOM Inspector. Benutze ihn um das von Ihnen erstellte Menü zu finden. <em>Hinweis: Sie können mit der ID nach einem Element suchen.</em> Untersuchen Sie CSS-Regel die Firefox standardmäßig verwendet. Sehen Sie sich den endgültigen berechneten Style für die Menüelemente an. Sehen Sie sich im Rest der Firefox DOM um, und versuchen Sie herauszufinden welche Knoten mit der Firefox UI in Verbindung stehen.</li> + <li>Installiere die Firebug Erweiterung. Öffne das Firebugfenster und gehe zu einer AJAX-lastigen Webseitewie z.B. Gmail oder Facebook. Öffne und aktviere den <em>Net </em>Reiter. Versuche herauszufinden was passiert wenn einige Anfragen gesendet werden.</li> +</ul> +<p>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.</p> +<p>{{ PreviousNext("XUL_School/The_Essentials_of_an_Extension", "XUL_School/Adding_menus_and_submenus") }}</p> +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> 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 +--- +<div> + {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div> +<p>Willkommen beim XUL School Tutorial!</p> +<p>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.</p> +<p>XUL School wurde erschaffen von <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (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.</p> +<p><span class="long_text" id="result_box" lang="de"><span class="hps">In diesem Tutorial</span> <span class="hps">erfahren Sie</span><span>, wie Sie</span> <span class="hps">Firefox-Erweiterungen</span> <span class="hps">entwickeln.</span> <span class="hps">Sie werden</span> <span class="hps">lernen, wie man</span> <span class="hps">schnell </span><span class="hps">die häufigsten Aufgaben</span> <span class="hps">in</span> <span class="hps">der Extension-Entwicklung</span><span> löst und</span> <span class="hps">vergleichen</span> <span class="hps">verschiedene Ansätze</span><span>, sie zu lösen</span><span>.</span> <span class="hps">In den meisten Fällen</span> <span class="hps">bieten</span> <span class="hps">wir</span> <span class="hps">Codebeispiele</span><span>, die Sie leicht</span> <span class="hps">kopieren und</span> <span class="hps">an Ihre Bedürfnisse anpassen können</span><span>,</span> <span class="hps">sowie einige</span> <span class="hps">funktionierende Beispiele von <span class="long_text" id="result_box" lang="de"><span class="hps">Erweiterungen</span></span></span><span>.</span> <span class="hps">Das Tutorial</span> <span class="hps">soll</span> <span class="hps">so kurz wie</span> <span class="hps">möglich</span><span> sein.</span> O<span class="hps">ft hilft das Zurückgreifen</span><span class="hps"> auf die</span> <span class="hps">Mozilla</span><span>-Dokumentation für weitere</span> <span class="hps">Informationen</span><span>.</span> <span class="hps">Sie können es</span> <span class="hps">als</span> <span class="hps">praktischen Reiseführer mit Infos</span> durch die wachsende <span class="hps">Welt, die</span> <span class="hps">die</span> <span class="hps">Mozilla</span><span>-Plattform</span> <span class="hps">ist, nutzen.</span> <span class="hps">Die meisten</span> <span class="hps">Links</span> <span class="hps">in</span> <span class="hps">dieser Dokumentation</span> <span class="hps">sollten</span> <span class="hps">angeklickt</span> <span class="hps">und gelesen werden.</span></span></p> +<p>Wir starten mit einer Einführung in die Hauptkonzepte, falls Sie nicht mit Mozilla und Firefox vertraut sind.</p> +<h2 id="Mozilla_and_Firefox">Mozilla and Firefox</h2> +<p>Der Term <a href="http://en.wikipedia.org/wiki/Mozilla" title="http://en.wikipedia.org/wiki/Mozilla">Mozilla</a> wird benutzt, um folgende Konzepte zu beschreiben: das Mozilla Projekt, die <a href="http://en.wikipedia.org/wiki/Mozilla_Foundation" title="http://en.wikipedia.org/wiki/Mozilla_Foundation">Mozilla Foundation</a>, die <a href="http://en.wikipedia.org/wiki/Mozilla_Corporation" title="http://en.wikipedia.org/wiki/Mozilla_Corporation">Mozilla Corporation</a> und den alten <a href="http://en.wikipedia.org/wiki/Mozilla_Application_Suite" title="http://en.wikipedia.org/wiki/Mozilla_Application_Suite">Mozilla browser</a>. 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.</p> +<p><span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Mozilla has spawned several products and projects, the most notable being the Mozilla Firefox web browser.">Mozilla hat mehrere <a href="http://www.mozilla.org/projects/" title="http://www.mozilla.org/projects/">Produkte und Projekte</a> <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Mozilla has spawned several products and projects, the most notable being the Mozilla Firefox web browser.">hervorgebracht.</span></span> Das bemerkenswerteste ist der Mozilla Firefox Web-Browser. </span><span style="background-color: rgb(255, 255, 255);" title="Firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.">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. </span><br> + <br> + <span style="background-color: rgb(255, 255, 255);" title="Version 1.0 of Firefox was released in November 2004, version 2.0 in October 2006, and version 3.0 in June 2008.">Version 1.0 von Firefox wurde im November 2004, Version 2.0 im Oktober 2006 und Version 3.0 im Juni 2008 veröffentlicht. </span><span style="background-color: rgb(255, 255, 255);" title="This tutorial was written after Firefox 3 was released, and has been updated with time.">Dieses Tutorial wurde geschrieben, nachdem Firefox 3 veröffentlicht wurde, und ist mit der Zeit aktualisiert worden. </span><span style="background-color: rgb(255, 255, 255);" title="While most of it should still work for creating extensions Firefox 3 (and even Firefox 2), it is strongly recommended that you aim to support modern Firefox versions, to encourage users to stay up to date with security fixes.">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. </span><span style="background-color: rgb(255, 255, 255);" title="A release that is more than 6 months old is likely vulnerable to published security bugs.">Eine Version, die vor mehr als 6 Monaten veröffentlicht wurde, ist wahrscheinlich anfällig für Sicherheitslücken. </span><br> + <br> + <span style="background-color: rgb(255, 255, 255);" title="Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built.">Firefox und andere Mozilla-Anwendungen kann man als zusammengesetzt <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built.">ansehen </span></span>aus zwei verschiedenen Teilen: eine Benutzeroberflächen-Schicht, die für jedes Projekt <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built.">verschieden </span></span> ist, und eine gemeinsame Plattform, worauf die <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built.">Benutzeroberflächen-Schicht angesiedelt ist.</span></span> </span><span style="background-color: rgb(255, 255, 255);" title="The user interface is built with technology known as XUL, and the platform is known as XULRunner.">Die Benutzeroberfläche ist mit der Technologie <a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a> entwickelt und die Plattform wird als <a href="https://developer.mozilla.org/en-US/docs/XULRunner">XULRunner</a> bezeichnet.</span></span></p> +<p> </p> +<h2 id="XUL">XUL</h2> +<p><a href="/en-US/docs/XUL" title="XUL">XUL</a> <span id="result_box" lang="de"><span class="hps">(ausgesprochen</span> <span class="hps atn">"</span><span>zool</span><span>"</span><span>)</span> <span class="hps">ist eine von vielen</span> <span class="hps">Technologien</span> <span class="hps">für die Erstellung von</span> <span class="hps">Mozilla</span><span>-basierten Produkten</span> <span class="hps">und wird auch für Erweiterungen</span> <span class="hps">verwendet</span><span>.</span> <span class="hps">Sie</span> <span class="hps">ist nur ein Teil</span> <span class="hps">der Entwicklungsl</span><span class="hps">andschaft,</span> <span class="hps">aber da</span> sie<span class="hps"> praktisch</span> <span class="hps">exklusiv für</span> <span class="hps">Mozilla</span> <span class="hps">ist</span><span>, neigt man dazu, sie zu </span><span class="hps">verwenden, um </span><span class="hps">Mozilla</span><span>-bezogene</span> <span class="hps">Entwicklungen</span> <span class="hps">zu identifizieren.</span> <span class="hps">Sie</span> <span class="hps">lesen manchmal</span> <span class="hps atn">Begriffe wie "</span><span>XUL</span><span>-Anwendungen</span><span class="atn">" und "</span><span>XUL</span><span>-Erweiterungen</span><span>"</span><span>, aber nur selten</span> <span class="hps">werden sie für</span> <span class="hps">Projekte benutzt, die</span> <span class="hps">ausschließlich</span> <span class="hps">mit</span> <span class="hps">XUL</span> <span class="hps">gebaut</span> <span class="hps">sind</span><span>.</span> <span class="hps">Es</span> <span class="hps">bedeutet in der Regel</span><span>, dass die Projekte</span> <span class="hps">mit</span> <span class="hps">Mozilla</span><span>-Technologien <span id="result_box" lang="de"><span class="hps">gebaut</span> <span class="hps">wurden</span></span>.</span> <span class="hps">Auch dieses</span> <span class="hps">Projekt, genannt</span> <span class="hps">XUL</span> <span class="hps">Schule,</span> <span class="hps">erstreckt sich über mehrere</span> <span class="hps">andere Technologien wie</span> <span class="hps">JavaScript</span><span>, CSS,</span> <span class="hps">XBL</span> <span class="hps">und</span> <span class="hps">XPCOM</span><span>.</span></span></p> +<h2 id="XULRunner">XULRunner</h2> +<p><span id="result_box" lang="de"><a href="https://developer.mozilla.org/en-US/docs/XULRunner"><span class="hps">XULRunner</span></a> <span class="hps">umfasst die</span> <a href="https://developer.mozilla.org/en-US/docs/Gecko"><span class="hps">Gecko</span><span>-Rendering-Engine</span></a><span>,</span> <span class="hps">die</span> <a href="https://developer.mozilla.org/en-US/docs/Necko"><span class="hps">Necko</span> <span class="hps">Netzwerk-Bibliothek</span></a><span>,</span> <span class="hps">und einige andere</span> <span class="hps">Komponenten, die</span> <span id="result_box" lang="de"><span class="hps">unter anderem </span></span><span class="hps">OS</span><span class="atn">-</span><span>unabhängiges</span> <span class="hps">Datei-Management</span><span>, Zugänglichkeit und</span> <span class="hps">Lokalisierung</span> <span class="hps">bieten</span><span>.</span> <span class="hps">Es ist eine</span> <span class="hps">sehr</span> <span class="hps">leistungsfähige Plattform</span><span>, die ein solch</span> <span class="hps">schnelles</span> <span class="hps">Wachstum der</span> <span class="hps">Entwickler-Community</span> <span class="hps">rund um</span> <span class="hps">Mozilla</span> <span class="hps">und Firefox</span> <span class="hps">erlaubt</span> <span class="hps">hat</span><span>.</span></span></p> +<p><span id="result_box" lang="de"><span class="hps">XULRunner</span> <span class="hps">ist in</span> <span class="hps">binärer Form</span> <span class="hps">auf der</span> </span><a href="https://developer.mozilla.org/en-US/docs/XULRunner">XULRunner</a> Seite verfügbar<span lang="de"> <span class="hps">und sie ist</span> <span class="hps">die Basis</span> <span class="hps">für mehrere Projekte</span><span>, wie zum Beispiel</span> <span class="hps">Songbird</span><span>,</span> <span class="hps">Miro</span> <span class="hps">und</span> <span class="hps">Eudora</span><span>.</span> <span class="hps">Es gibt eine sehr</span> <span class="hps">umfassende Liste von</span> <span class="hps">Anwendungen in der</span> <a href="https://developer.mozilla.org/en-US/docs/XULRunner_Hall_of_Fame"><span class="hps">XULRunner</span> </a><span class="hps"><a href="https://developer.mozilla.org/en-US/docs/XULRunner_Hall_of_Fame">Hall of Fame</a>.</span></span></p> +<h3 id="Gecko">Gecko</h3> +<p><span id="result_box" lang="de"><span class="hps">Die</span> <a href="https://developer.mozilla.org/en-US/docs/Gecko"><span class="hps">Gecko-Engine</span></a> <span class="hps">ist der Teil von</span> <span class="hps">Firefox</span>, der <span class="hps">verwendet wird, um</span> <span class="hps">Web-Seiten und</span> <span class="hps">eine eigene Benutzeroberfläche</span> <span class="hps">zu gestalten.</span> <span class="hps">Sie erkennen</span> <span class="hps">den Grad der</span> <span class="hps">Kompatibilität</span> <span class="hps">von</span> <span class="hps">Web-Standards</span> <span class="hps">in</span> <a href="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers"><span class="hps">Gecko</span></a><span><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers">-basierten Browsern</a>,</span> <span class="hps">indem Sie sich ihren</span> <a href="http://en.wikipedia.org/wiki/User_agent"><span class="hps">User Agent</span></a> <span class="hps">String ansehen</span><span>, der die</span> <span class="hps">Gecko</span><span>-Version</span> <span class="hps">enthalten sollte</span><span>.</span> <span class="hps">Gecko</span><span>-Versionen</span> <span class="hps">sind etwas</span> <span class="hps">unabhängig von</span> <span class="hps">Firefox</span><span>-Versionen</span><span>. Sie können</span> <span class="hps">eine Zuordnung</span> <span class="hps">von</span> <span class="hps">Firefox</span><span>-Versionen und</span> <span class="hps">Gecko-Versionen</span> <span class="hps">auf der</span> <a href="https://developer.mozilla.org/en-US/docs/Gecko"><span class="hps">Gecko</span><span>-Seite</span></a> <span class="hps">sehen.</span> <span class="hps">Der</span> <span class="hps">User Agent</span> <span class="hps">String</span> <span class="hps">für</span> <span class="hps">Firefox</span> <span class="hps">zum Zeitpunkt</span> <span class="hps">des Schreibens dieses Artikels</span> <span class="hps atn">(</span><span>in</span> <span class="hps">US-Englisch,</span> <span class="hps">Mac</span> <span class="hps">OS</span> <span class="hps">X)</span> <span class="hps">ist</span><span>:</span></span></p> +<p>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:<strong>7.0.1</strong>) Gecko/20100101 Firefox/7.0.1</p> +<p><span id="result_box" lang="de"><span class="hps">Der markierte</span> <span class="hps">Abschnitt ist die</span> <span class="hps">Gecko</span><span>-Version</span><span>:</span> <span class="hps">7.0.1</span><span>.</span> <span class="hps">Sie können den </span></span><span id="result_box" lang="de"> <span class="hps atn">User-Agent-</span><span>String </span></span><span id="result_box" lang="de"><span class="hps">lesen und</span> <span class="hps">kopieren in jedem beliebiegen </span><span class="hps">Firefox-Fenster.</span> Dazu <span class="hps atn">wählen Sie "</span><span>Hilfe></span> <span class="hps">Informationen zur Fehlerbehebung</span><span>"</span> <span class="hps">aus dem Hauptmenü</span><span>.</span></span></p> +<h2 id="Weiter_im_Tutorial">Weiter im Tutorial</h2> +<p><span id="result_box" lang="de"><span class="hps">Mit</span> <span class="hps">den grundlegenden Konzepten</span> <span class="hps">können</span> <span class="hps">wir jetzt</span> <span class="hps">in die</span> <span class="hps">Entwicklung von Erweiterungen</span><span class="alt-edited"> einsteigen.</span> <span class="hps">Sie werden sich wahrscheinlich</span> <span class="hps">immer noch fragen,</span> <span class="hps">was genau</span> <span class="hps">ist eine Erweiterung</span><span>,</span> <span class="hps">was</span> kann <span class="hps alt-edited">sie leisten </span><span class="hps alt-edited">und wie kann man sie erstellen. </span><span class="hps">Nun,</span> <span class="hps">dieses ganze</span> <span class="hps">Tutorial</span><span class="hps"> verfolgt das Ziel, </span><span class="hps">Ihnen</span> <span class="hps">das zu erklären.</span><br> + <br> + <span class="hps">Willkommen in der Welt</span> <span class="hps">der</span> <span class="hps">Extension-Entwicklung</span><span>.</span> <span class="hps">Jetzt</span> wollen wir uns dem zuwenden.</span></p> +<div> + {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div> +<p><small>This tutorial translation was kindly donated to Mozilla by Sinn - IT mit Emotion</small></p> 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 +--- +<p>{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}</p> +<h2 id="Was_ist_eine_Firefox_Erweiterung">Was ist eine Firefox Erweiterung?</h2> +<blockquote> + <p>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.</p> +</blockquote> +<p>Auszug aus der <a href="/en/Extensions" title="en/Extensions">Erweiterungs-Seite</a>.</p> +<p>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.</p> +<p>Bitte beachten Sie, dass es es einen Unterschied zwischen der Definiton einer <em>Erweiterung</em> und einem <em>Add-on</em> 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 <a href="/en/Plugins">Plug-in-Seite</a> erfahren.</p> +<p>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.</p> +<p>Das <a href="https://addons.mozilla.org/">Mozilla Add-on</a> Repository (AMO) beinhaltet eine umfassende Anzahl von Erweiterungen mit einer großen Bandbreite an Funktionen: Inhaltsfilterung (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1865" title="https://addons.mozilla.org/en-US/firefox/addon/1865">AdBlock Plus</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/722" title="https://addons.mozilla.org/en-US/firefox/addon/722">NoScript</a>), Interaktion mit Webanwendungen (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3615" title="https://addons.mozilla.org/en-US/firefox/addon/3615">Delicious Bookmarks</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5202" title="https://addons.mozilla.org/en-US/firefox/addon/5202">eBay Companion</a>) und Webentwicklung (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a>). 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).</p> +<p>Erweiterungen gibt es im Moment in drei verschiedenen Ausprägungen: <a class="link-https" href="https://addons.mozilla.org/en-US/developers/builder" title="https://addons.mozilla.org/en-US/developers/builder">Add-ons SDK extensions</a> (auch bekannt als Jetpacks), <a href="/en/Extensions/Bootstrapped_extensions" title="https://developer.mozilla.org/en/Extensions/Bootstrapped_extensions">bootstrapped-Erweiterungen </a>und traditionelle Erweiterungen. Wenn Sie gerade beginnen, Add-ons zu entwickeln, bietet das <a href="https://developer.mozilla.org/de/Add-ons/SDK">Add-on SDK</a> 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.</p> +<p>Wir werden dieses Tutorial mit der Analyse einer sehr einfachen Erweiterung beginnen.</p> +<h2 id="Die_Hallo_Welt_Erweiterung">Die Hallo Welt Erweiterung</h2> +<p>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.</p> +<p>Wir werden nun mit einer einfachen "Hallo Welt"-Erweiterung beginnen. WIr beginnen mit seiner Installation. Dafür klicken Sie auf den folgenden Link.</p> +<p><a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">Install Hello World</a></p> +<p>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 <strong>application/x-<strong>xpinstall</strong></strong>. Im Fall dieses Wiki`s, ist der Inhaltstyp entsprechend gesetzt und ein Installationsfenster sollte erscheinen.</p> +<p>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. <a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">AMO</a> ist die einzige Seite mit einer generellen Erlaubnis. Dies liegt daran, dass die auf <a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">AMO</a> veröffentlichten Add-ons einem Überprüfungsprozess unterzogen werden, der Sicherheitsüberprüfungen beinhaltet.</p> +<p>Nach dem Herunterladen der Datei, können Sie diese, per Drag and Drop in den Firefox Inhaltsbereich ziehen und die Installation sollte beginnen.</p> +<p>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.</p> +<p>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.</p> +<p>Sehen Sie nach der Installation in das Firefox Hauptfenster und schauen Sie, ob Sie eine Veränderung feststellen können.</p> +<p>Haben Sie es gesehen? Dort ist ein neues Menü im Hauptmenü, bezeichnet "Hello World!".</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/8421/menu_item%20-%20helloworld.png" style="width: 383px; height: 117px;"></p> +<p>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.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/8419/alert_message%20-%20helloworld.png" style="width: 364px; height: 132px;"></p> +<p>Das ist alles was die Erweiterung macht. Sehen wir uns das jetzt mal genauer an.</p> +<h2 id="Erweiterungsinhalte">Erweiterungsinhalte</h2> +<p>Sie werden vielleicht bemerkt haben, dass die von Ihnen installierte Erweiterungsdatei mit <em>xulschoolhello1.xpi</em> benannt ist. <a href="/en/XPI" title="en/XPI">XPI</a> (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<em>.</em></p> +<p>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 <a href="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">darauf</a> aus und wählen Sie die <em>Ziel speichern unter...</em> Option.</p> +<p>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:</p> +<pre class="syntaxbox">unzip xulschoolhello1.xpi -d xulschoolhello1 +</pre> +<p>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.</p> +<p>Sie sollten die folgendene Dateistruktur sehen:</p> +<ul> + <li>xulschoolhello1 + <ul> + <li>chrome.manifest</li> + <li>install.rdf</li> + <li>content + <ul> + <li>browserOverlay.xul</li> + <li>browserOverlay.js</li> + </ul> + </li> + <li>skin + <ul> + <li>browserOverlay.css</li> + </ul> + </li> + <li>locale + <ul> + <li>en-US + <ul> + <li>browserOverlay.dtd</li> + <li>browserOverlay.properties</li> + </ul> + </li> + </ul> + </li> + </ul> + </li> +</ul> +<p>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 .</p> +<p>{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}</p> +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> 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 +--- +<p>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.</p> +<dl> + <dt> + Einführung</dt> + <dd> + <ul> + <li><a href="/en/XUL_School/Introduction" title="en/XUL School/Introduction">Einführung</a></li> + <li><a href="/en/XUL_School/Getting_Started_with_Firefox_Extensions" title="en/XUL School/Getting Started with Firefox Extensions">Mit Firefox Erweiterungen beginnen</a></li> + <li><a href="/en/XUL_School/The_Essentials_of_an_Extension" title="en/XUL School/The Essentials of an Extension">Die Grundlagen einer Erweiterung</a></li> + <li><a href="/en/XUL_School/Setting_Up_a_Development_Environment" title="en/XUL School/Setting Up a Development Environment">Eine Entwicklungsumgebung einrichten</a></li> + <li><a href="/en/XUL_School/JavaScript_Object_Management" title="en/XUL School/JavaScript Object Management">JavaScript Object Management</a></li> + </ul> + </dd> + <dt> + Grundlegende Techniken</dt> + <dd> + <ul> + <li><a href="/en/XUL_School/Adding_menus_and_submenus" title="en/XUL School/Adding menus and submenus">Menüs und Untermenüs hinzufügen</a></li> + <li><a href="/en/XUL_School/Adding_Toolbars_and_Toolbar_Buttons" title="en/XUL School/Adding Toolbars and Toolbar Buttons">Toolbars und Toolbar Buttons hinzufügen </a></li> + <li><a href="/en/XUL_School/Adding_Events_and_Commands" title="en/XUL School/Adding Events and Commands">Ereignisse und Befehle hinzufügen</a></li> + <li><a href="/en/XUL_School/Adding_windows_and_dialogs" title="en/XUL School/Adding windows and dialogs">Fenster und Dialoge hinzufügen</a></li> + <li><a href="/en/XUL_School/Adding_sidebars" title="en/XUL School/Adding sidebars">Sidebars hinzufügen</a></li> + <li><a href="/en/XUL_School/User_Notifications_and_Alerts" title="en/XUL School/User Notifications and Alerts">Benutzerbenachrichtigungen und -Warnungen </a></li> + </ul> + </dd> + <dt> + Fortgeschrittene Techniken</dt> + <dd> + <ul> + <li><a href="/en/XUL_School/Intercepting_Page_Loads" title="en/XUL School/Intercepting Page Loads">Den Seitenladevorgang abfangen</a></li> + <li><a href="/en/XUL_School/Connecting_to_Remote_Content" title="en/XUL School/Connecting to Remote Content">Inhalt von anderen Servern einbinden</a></li> + <li><a href="/en/XUL_School/Handling_Preferences" title="en/XUL School/Handling Preferences">Auf Nutzereinstellungen zugreifen</a></li> + <li><a href="/en/XUL_School/Local_Storage" title="en/XUL School/Local Storage">Lokale Datenspeicherung</a></li> + </ul> + </dd> + <dt> + Weiterführende Themen</dt> + <dd> + <ul> + <li><a href="/en/XUL_School/The_Box_Model" title="en/XUL School/The Box Model">Das Box-Modell</a></li> + <li><a href="/en/XUL_School/XPCOM_Objects" title="en/XUL School/XPCOM Objects">XPCOM Objekte</a></li> + <li><a href="/en/XUL_School/Observer_Notifications" title="en/XUL School/Observer Notifications">Beobachterb</a><a href="/en/XUL_School/Observer_Notifications" title="en/XUL School/Observer Notifications">enachrichtigungen</a></li> + <li><a href="/en/XUL_School/Custom_XUL_Elements_with_XBL" title="en/XUL School/Custom XUL Elements with XBL">Eigene XUL Elemente mit XBL erstellen</a></li> + <li><a href="/en/XUL_School/Mozilla_Documentation_Roadmap" title="en/XUL School/Mozilla Documentation Roadmap">Roadmap der Mozilla Documentation </a></li> + <li><a href="/en/XUL_School/Useful_Mozilla_Community_Sites" title="en/XUL School/Useful Mozilla Community Sites">Nützliche Seiten der Mozilla Community </a></li> + </ul> + </dd> + <dt> + Anhänge</dt> + <dd> + <ul> + <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang A: Addon Performance</a></li> + <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a> <a href="/en/XUL_School/Appendix_B:_Install_and_Uninstall_Scripts" title="en/XUL School/Appendix B: Install and Uninstall Scripts">B: Installations- und Deinstallations-Skripte</a></li> + <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a><a href="/en/XUL_School/Appendix_C:_Avoid_using_eval_in_Add-ons" title="en/XUL School/Appendix C: Avoid using eval in Add-ons"> C: Wie man 'eval' in Addons vermeidet</a></li> + <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a><a href="/en/XUL_School/Appendix_D:_Loading_Scripts" title="en/XUL School/Appendix D: Loading Scripts"> D: Skripte laden</a></li> + <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a><a href="/en/XUL_School/DOM_Building_and_HTML_Insertion" title="en/XUL School/Appendix E: DOM Building and HTML Insertion"> E: Das DOM erstellen und HTML in Dokumente einfügen</a></li> + <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a><a href="/en/XUL_School/Appendix_F:_Monitoring_DOM_changes" title="en/XUL School/Appendix F: Monitoring DOM changes"> F: Änderungen am DOM verfolgen</a></li> + </ul> + </dd> +</dl> +<p>Das XUL School Projekt wurde von <a class="external" href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (ehemals Glaxstar) entwickelt. Das Projekt wird hier unter deren <a href="/Project:Copyrights" title="https://developer.mozilla.org/Project:Copyrights">Lizenzen</a> veröffentlicht. Die originalen Inhalte wurden wo nötig angepasst.</p> +<div class="noinclude"> + <p>{{ languages( { "ja": "ja/XUL_School", "fr": "fr/Vulgarisation_XUL", "es": "es/Escuela_XUL", "de": "de/XUL_School" } ) }}</p> +</div> +<p> </p> |