diff options
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.html | 476 |
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> |
