aboutsummaryrefslogtreecommitdiff
path: root/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html')
-rw-r--r--files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html476
1 files changed, 0 insertions, 476 deletions
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html b/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html
deleted file mode 100644
index 9d33162519..0000000000
--- a/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html
+++ /dev/null
@@ -1,476 +0,0 @@
----
-title: Developing for Firefox Mobile
-slug: Mozilla/Add-ons/SDK/Tutorials/Mobile_development
-translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Mobile_development
----
-<div class="warning">
- <p>Developing add-ons for Firefox Mobile is still an experimental feature of the SDK. Although the SDK modules used are stable, the setup instructions and cfx commands are likely to change.</p>
-</div>
-<div class="note">
- <p><span>To follow this tutorial you'll need to have <a href="/en-US/Add-ons/SDK/Tutorials/Installation">installed the SDK</a> and learned the <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">basics of <code>cfx</code></a>. </span></p>
-</div>
-<p>Firefox for Android implements its UI using native Android widgets instead of XUL. With the add-on SDK you can develop add-ons that run on this new version of Firefox Mobile as well as on the desktop version of Firefox.</p>
-<p>You can use the same code to target both desktop Firefox and Firefox Mobile, and just specify some extra options to <code>cfx run</code>, <code>cfx test</code>, and <code>cfx xpi</code> when targeting Firefox Mobile.</p>
-<p>Right now not all modules are fully functional, but we're working on adding support for more modules. The <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development#Module_Compatibility">tables at the end of this guide</a> list the modules that are currently supported on Firefox Mobile.</p>
-<p>This tutorial explains how to run SDK add-ons on an Android device connected via USB to your development machine. We'll use the <a href="http://developer.android.com/guide/developing/tools/adb.html">Android Debug Bridge</a> (adb) to communicate between the Add-on SDK and the device.</p>
-<p><img src="https://mdn.mozillademos.org/files/6555/mobile-setup-adb.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-<p>It's possible to use the <a href="http://developer.android.com/guide/developing/tools/emulator.html">Android emulator</a> to develop add-ons for Android without access to a device, but it's slow, so for the time being it's much easier to use the technique described below.</p>
-<h2 id="Setting_up_the_Environment">Setting up the Environment</h2>
-<p>First you'll need an <a href="https://wiki.mozilla.org/Mobile/Platforms/Android#System_Requirements">Android device capable of running the native version of Firefox Mobile</a>. Then:</p>
-<ul>
- <li>install the <a href="https://wiki.mozilla.org/Mobile/Platforms/Android#Download_Nightly">Nightly build of the native version of Firefox Mobile</a> on the device.</li>
- <li><a href="http://developer.android.com/guide/developing/device.html#setting-up">enable USB debugging on the device (step 3 of this link only)</a></li>
-</ul>
-<p>On the development machine:</p>
-<ul>
- <li>install version 1.5 or higher of the Add-on SDK</li>
- <li>install the correct version of the <a href="http://developer.android.com/sdk/index.html">Android SDK</a> for your device</li>
- <li>using the Android SDK, install the <a href="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a></li>
-</ul>
-<p>Next, attach the device to the development machine via USB.</p>
-<p>Now open up a command shell. Android Platform Tools will have installed <code>adb</code> in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path. Then type:</p>
-<pre>adb devices
-</pre>
-<p>You should see some output like:</p>
-<pre>List of devices attached
-51800F220F01564 device
-</pre>
-<p>(The long hex string will be different.)</p>
-<p>If you do, then <code>adb</code> has found your device and you can get started.</p>
-<h2 id="Running_Add-ons_on_Android">Running Add-ons on Android</h2>
-<p>You can develop your add-on as normal, as long as you restrict yourself to the supported modules.</p>
-<p>When you need to run the add-on, first ensure that Firefox is not running on the device. Then execute <code>cfx run</code> with some extra options:</p>
-<pre>cfx run -a fennec-on-device -b /path/to/adb --mobile-app fennec --force-mobile
-</pre>
-<p>See <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development#cfx_Options_for_Mobile_Development">"cfx Options for Mobile Development"</a> for the details of this command.</p>
-<p>In the command shell, you should see something like:</p>
-<pre>Launching mobile application with intent name org.mozilla.fennec
-Pushing the addon to your device
-Starting: Intent { act=android.activity.MAIN cmp=org.mozilla.fennec/.App (has extras) }
---------- beginning of /dev/log/main
---------- beginning of /dev/log/system
-Could not read chrome manifest 'file:///data/data/org.mozilla.fennec/chrome.manifest'.
-info: starting
-info: starting
-zerdatime 1329258528988 - browser chrome startup finished.
-</pre>
-<p>This will be followed by lots of debug output.</p>
-<p>On the device, you should see Firefox launch with your add-on installed.</p>
-<p><code>console.log()</code> output from your add-on is written to the command shell, just as it is in desktop development. However, because there's a lot of other debug output in the shell, it's not easy to follow. The command <code>adb logcat</code> prints <code>adb</code>'s log, so you can filter the debug output after running the add-on. For example, on Mac OS X or Linux you can use a command like the below to filter only the lines of console output:</p>
-<pre>adb logcat | grep console
-</pre>
-<p>You can experiment with different filter strings on <code>adb logcat</code> to focus in on the lines relevant to you.</p>
-<p>Running <code>cfx test</code> is identical:</p>
-<pre>cfx test -a fennec-on-device -b /path/to/adb --mobile-app fennec --force-mobile
-</pre>
-<h2 id="cfx_Options_for_Mobile_Development"><a name="cfx-options">cfx Options for Mobile Development</a></h2>
-<p>As you see in the quote above, <code>cfx run</code> and <code>cfx test</code> need four options to work on Android devices.</p>
-<table>
- <colgroup>
- <col>
- <col>
- </colgroup>
- <tbody>
- <tr>
- <td><code>-a fennec-on-device</code></td>
- <td>This tells the Add-on SDK which application will host the add-on, and should be set to "fennec-on-device" when running an add-on on Firefox Mobile on a device.</td>
- </tr>
- <tr>
- <td><code>-b /path/to/adb</code></td>
- <td>
- <p>As we've seen, <code>cfx</code> uses the Android Debug Bridge (adb) to communicate with the Android device. This tells <code>cfx</code> where to find the <code>adb</code> executable.</p>
- <p>You need to supply the full path to the <code>adb</code> executable.</p>
- </td>
- </tr>
- <tr>
- <td><code>--mobile-app</code></td>
- <td>
- <p>This is the name of the <a href="http://developer.android.com/reference/android/content/Intent.html"> Android intent</a>. Its value depends on the version of Firefox Mobile that you're running on the device:</p>
- <ul>
- <li><code>fennec</code>: if you're running Nightly</li>
- <li><code>fennec_aurora</code>: if you're running Aurora</li>
- <li><code>firefox_beta</code>: if you're running Beta</li>
- <li><code>firefox</code>: if you're running Release</li>
- </ul>
- <p>If you're not sure, run a command like this (on OS X/Linux, or the equivalent on Windows):</p>
- <pre>
-adb shell pm list packages | grep mozilla</pre>
- <p>You should see "package" followed by "org.mozilla." followed by a string. The final string is the name you need to use. For example, if you see:</p>
- <pre>
-package:org.mozilla.fennec</pre>
- <p>...then you need to specify:</p>
- <pre>
---mobile-app fennec</pre>
- <p>This option is not required if you have only one Firefox application installed on the device.</p>
- </td>
- </tr>
- <tr>
- <td><code>--force-mobile</code></td>
- <td>
- <p>This is used to force compatibility with Firefox Mobile, and should always be used when running on Firefox Mobile.</p>
- </td>
- </tr>
- </tbody>
-</table>
-<h2 id="Packaging_Mobile_Add-ons">Packaging Mobile Add-ons</h2>
-<p>To package a mobile add-on as an XPI, use the command:</p>
-<pre>cfx xpi --force-mobile
-</pre>
-<p>Actually installing the XPI on the device is a little tricky. The easiest way is probably to copy the XPI somewhere on the device:</p>
-<pre>adb push my-addon.xpi /mnt/sdcard/
-</pre>
-<p>Then open Firefox Mobile and type this into the address bar:</p>
-<pre>file:///mnt/sdcard/my-addon.xpi
-</pre>
-<p>The browser should open the XPI and ask if you want to install it.</p>
-<p>Afterwards you can delete it using <code>adb</code> as follows:</p>
-<pre>adb shell
-cd /mnt/sdcard
-rm my-addon.xpi
-</pre>
-<p><a name="modules-compatibility"></a></p>
-<h2 id="Module_Compatibility">Module Compatibility</h2>
-<p>Modules not supported in Firefox Mobile are <span>marked</span> in the tables below.</p>
-<h3 id="High-Level_APIs">High-Level APIs</h3>
-<table class="standard-table">
- <tbody>
- <tr>
- <td style="width: 200px;">addon-page</td>
- <td style="background-color: rgb(255, 51, 51); width: 200px;">Not supported</td>
- </tr>
- <tr>
- <td>base64</td>
- <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc33;">Supported</span></td>
- </tr>
- <tr>
- <td>clipboard</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>context-menu</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>hotkeys</td>
- <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc33;">Supported</span></td>
- </tr>
- <tr>
- <td>indexed-db</td>
- <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
- </tr>
- <tr>
- <td>l10n</td>
- <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
- </tr>
- <tr>
- <td>notifications</td>
- <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
- </tr>
- <tr>
- <td>page-mod</td>
- <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
- </tr>
- <tr>
- <td>page-worker</td>
- <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
- </tr>
- <tr>
- <td>panel</td>
- <td style="background-color: rgb(255, 51, 51);"><span style="background-color: #ff3333;">Not supported</span></td>
- </tr>
- <tr>
- <td>passwords</td>
- <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
- </tr>
- <tr>
- <td>private-browsing</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>querystring</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>request</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>selection</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>self</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>simple-prefs</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>simple-storage</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>system</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>tabs</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>timers</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>ui</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>url</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>widget</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>windows</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- </tbody>
-</table>
-<h3 id="Low-Level_APIs">Low-Level APIs</h3>
-<table class="standard-table">
- <tbody>
- <tr>
- <td style="width: 200px;">loader</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>chrome</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>console/plain-text</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>console/traceback</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>content/content</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>content/loader</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>content/mod</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>content/worker</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>core/heritage</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>core/namespace</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>core/promise</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>event/core</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>event/target</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>frame/hidden-frame</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>frame/utils</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>io/byte-streams</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>io/file</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>io/text-streams</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>lang/functional</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>lang/type</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>loader/cuddlefish</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>loader/sandbox</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>net/url</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>net/xhr</td>
- <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>places/bookmarks</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>places/favicon</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>places/history</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>platform/xpcom</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>preferences/service</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>stylesheet/style</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>stylesheet/utils</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>system/environment</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>system/events</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>system/globals</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>system/runtime</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>system/unload</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>system/xul-app</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>tabs/utils</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>test/assert</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>test/harness</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>test/httpd</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>test/runner</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>test/utils</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>ui/button/action</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>ui/button/toggle</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>ui/frame</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>ui/id</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>ui/sidebar</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>ui/toolbar</td>
- <td style="background-color: rgb(255, 51, 51);">Not supported</td>
- </tr>
- <tr>
- <td>util/array</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>util/collection</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>util/deprecate</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>util/list</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>util/match-pattern</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>util/object</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>util/uuid</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- <tr>
- <td>window/utils</td>
- <td style="background-color: rgb(102, 204, 51);">Supported</td>
- </tr>
- </tbody>
-</table>
-<p> </p>