diff options
Diffstat (limited to 'files/nl/archive/b2g_os')
| -rw-r--r-- | files/nl/archive/b2g_os/b2g_desktop_client_gebruiken/index.html | 216 | ||||
| -rw-r--r-- | files/nl/archive/b2g_os/building_and_installing_firefox_os/index.html | 60 | ||||
| -rw-r--r-- | files/nl/archive/b2g_os/gebruik_van_de_app_manager/index.html | 239 | ||||
| -rw-r--r-- | files/nl/archive/b2g_os/index.html | 234 | ||||
| -rw-r--r-- | files/nl/archive/b2g_os/introduction/index.html | 85 | ||||
| -rw-r--r-- | files/nl/archive/b2g_os/quickstart/index.html | 49 | ||||
| -rw-r--r-- | files/nl/archive/b2g_os/quickstart/je_eerste_app/index.html | 205 | ||||
| -rw-r--r-- | files/nl/archive/b2g_os/simulator/index.html | 246 |
8 files changed, 0 insertions, 1334 deletions
diff --git a/files/nl/archive/b2g_os/b2g_desktop_client_gebruiken/index.html b/files/nl/archive/b2g_os/b2g_desktop_client_gebruiken/index.html deleted file mode 100644 index 11b2e965d9..0000000000 --- a/files/nl/archive/b2g_os/b2g_desktop_client_gebruiken/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: De B2G OS-simulator bouwen -slug: Archive/B2G_OS/B2G_desktop_client_gebruiken -tags: - - B2G OS - - Device - - Firefox OS - - Gaia - - Mobile - - simulator -translation_of: Archive/B2G_OS/Building_the_B2G_OS_simulator ---- -<p>Met de Firefox OS desktop client, ook wel de <em>B2G desktop client</em> genoemd, kunt u Gaia en Web apps in een Gecko-gebaseerde omgeving wat lijkt op een echt apperaat. It doesn't emulate device hardware, so it's not adequate for testing device APIs, and isn't a replacement for testing on actual hardware. However, it does have a several APIs enabled that aren't available on Firefox such as the Contacts and Settings APIs. It can therefore be useful during the development of your application, or while working on the Gaia user interface itself.</p> - -<p>This article covers downloading or building the Firefox OS desktop client, as well as how to use it.</p> - -<div class="note"> -<p><strong>Note:</strong> The easiest way to use the Firefox OS desktop client is to use the <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator">Firefox OS Simulator</a>. It does not require you to build the desktop client yourself.</p> -</div> - -<h2 id="Download_a_nightly_build">Download a nightly build</h2> - -<div class="note"> -<p><strong>Note:</strong> Firefox OS version 1.0 is based on a branch of Gecko 18. There are also nightly builds based on <code>mozilla-central</code> here:<br> - <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/</a></p> -</div> - -<p>Just like <a href="http://nightly.mozilla.org" title="http://nightly.mozilla.org">Firefox Nightlies</a>, the Firefox OS desktop client is built every day from the latest source code. The latest build is <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-aurora/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">available from the Mozilla FTP server</a>. Be sure to pick the latest version and the right archive for your operating system. This lets you bypass having to build it yourself. In addition, you don't have to download Gaia on your own either.</p> - -<p>Be sure to install the application in a writeable location; the application needs to be able to update included the Gaia profile.</p> - -<p>You can now skip ahead to <a href="#Running_the_desktop_client" title="#Running_the_desktop_client">Running the desktop client</a>, unless you actually want to build it for yourself.</p> - -<h2 id="Building_the_desktop_client">Building the desktop client</h2> - -<p>The first thing we need to do is set up a <a href="/En/Developer_Guide/Build_Instructions#Build_prerequisites" title="En/Developer_Guide/Build_Instructions#Build_prerequisites">standard Mozilla build environment</a>. Once we have that, we can pull down the code we'll need and configure to build the Firefox OS desktop client.</p> - -<h3 id="Downloading_the_code_for_the_first_time">Downloading the code for the first time</h3> - -<p>In a directory where we'd like the source code to go, let's clone the <code>mozilla-central</code> repository that contains all of Gecko:</p> - -<pre> hg clone http://hg.mozilla.org/mozilla-central -</pre> - -<h3 id="Updating_the_code">Updating the code</h3> - -<p>When we do subsequent builds later, we'll want to make sure we have the latest code. Here's how to pull the latest changes:</p> - -<pre>cd mozilla-central -hg pull -u -</pre> - -<h3 id="Create_a_mozconfig">Create a mozconfig</h3> - -<p>Next, we need to create a <code>mozconfig</code> file in the <code>mozilla-central</code> directory to configure the build system to build the Boot to Gecko client instead of Firefox:</p> - -<pre>. "$topsrcdir/b2g/config/mozconfigs/common" - -mk_add_options MOZ_OBJDIR=../build -mk_add_options MOZ_MAKE_FLAGS="-j9 -s" - -ac_add_options --enable-application=b2g -ac_add_options --disable-libjpeg-turbo - -# This option is required if you want to be able to run Gaia's tests -ac_add_options --enable-tests - -# turn on mozTelephony/mozSms interfaces -# Only turn this line on if you actually have a dev phone -# you want to forward to. If you get crashes at startup, -# make sure this line is commented. -#ac_add_options --enable-b2g-ril</pre> - -<h3 id="Building">Building</h3> - -<p>Now we're ready to build the desktop client with the following command issued from the <code>mozilla-central</code> directory:</p> - -<pre>make -f client.mk -</pre> - -<p>The built client will be placed in the <code>../build/dist</code> directory (based on the value you specify for <code>MOZ_OBJDIR</code> in the <code>mozconfig</code> file).</p> - -<h2 id="Downloading_Gaia">Downloading Gaia</h2> - -<p>By default the desktop client will show an empty screen because it doesn't know which Web app to load initially as the system app. The collection of system apps and default apps that come with Firefox OS is called Gaia.</p> - -<p>To download Gaia for the first time, let's clone the source code repository on GitHub:</p> - -<pre>git clone https://github.com/mozilla-b2g/gaia -cd gaia</pre> - -<p>To update an already existing clone of Gaia, we can pull in the latest changes from GitHub:</p> - -<pre>cd gaia -git pull -</pre> - -<h3 id="Generating_a_profile">Generating a profile</h3> - -<p>Next we need to set up Gaia's apps for the desktop client. This includes packaging the Gaia apps in the same way like they would be installed on the device, as well as setting up the permissions for the privileged system apps. We do this by generating a profile. The following command (run in the <code>gaia</code> directory) will take care of that:</p> - -<pre>make -</pre> - -<p>This should create a <code>profile</code> directory below the <code>gaia</code> directory. The new profile contains a customized extension and other configuration needed to make B2G run properly.</p> - -<h2 id="Running_the_desktop_client">Running the desktop client</h2> - -<p>Once you've built the client and downloaded Gaia (or downloaded and installed the nightly desktop application), you're ready to fire up the Firefox OS desktop client.</p> - -<h3 id="Running_on_Linux">Running on Linux</h3> - -<p>To run the desktop client on Linux using the embedded Gaia profile, just run the <code>b2g</code> executable. If you want to specify a different Gaia profile, you need to bypass the <code>b2g</code> wrapper program and run the <code>b2g-bin</code> binary. The binary is in the archive you downloaded earlier or in the <code>../build/dist/bin</code> directory if you built the client yourself.</p> - -<pre>.../b2g-bin -profile gaia/profile -</pre> - -<p>You may experience annoying rendering problems. To avoid them, add the following line to your <code>gaia/profile/user.js</code> file:</p> - -<pre>user_pref("layers.acceleration.disabled", true); -</pre> - -<h3 id="Running_on_Mac">Running on Mac</h3> - -<p>If you downloaded the nightly build, you can simply launch it from the Finder as usual. Any console output is visible by running the standard Console utility program included with your Mac.</p> - -<p>If you want to specify a different Gaia profile, you need to bypass the <code>b2g</code> wrapper program and run the <code>b2g-bin</code> binary. The command line is slightly more complicated due to the location of the <code>b2g-bin</code> binary and the need for absolute paths when specifying the profile directory:</p> - -<pre>.../B2G.app/Contents/MacOS/b2g-bin -profile /full/path/to/gaia/profile -</pre> - -<h3 id="Running_on_Windows">Running on Windows</h3> - -<p>Running the nightly build on Windows is as simple as launching <code>b2g.exe</code>. If you want to customize the execution, you can do so by running the <code>b2g-bin.exe</code> executable instead; this bypasses the wrapper program that automatically uses the bundled Gaia.</p> - -<h2 id="Command_line_options">Command line options</h2> - -<p>There are a number of command line options you can use to adjust the runtime experience while using the desktop client. You can get a list by using the <code>-help</code> option. This section covers some of the particularly interesting ones.</p> - -<h3 id="option-screen" name="option-screen">Specifying the screen size</h3> - -<p>You can specify the screen size of the device you want to simulate using the <code>--screen</code> option:</p> - -<pre>b2g --screen=<em><width></em>x<em><height></em>[@<em><dpi></em>]</pre> - -<p>Where <em><width></em>, <em><height></em>, and <em><dpi></em> are fairly self-explanatory parameters: the width and height of the device's screen in pixels and the device resolution in DPI. For example:</p> - -<pre>b2g --screen=320x480 -b2g --screen=320x480@160 -</pre> - -<p>Optionally, you can specify certain devices by name to simulate their screen size and resolution:</p> - -<ul> - <li><code>iphone</code></li> - <li><code>ipad</code></li> - <li><code>nexus_s</code></li> - <li><code>galaxy_nexus</code></li> - <li><code>galaxy_tab</code></li> - <li><code>wildfire</code></li> - <li><code>tattoo</code></li> - <li><code>salsa</code></li> - <li><code>chacha</code></li> -</ul> - -<h3 id="option-console" name="option-console">Opening the JavaScript console</h3> - -<p>You can open the JavaScript console when launching the desktop B2G client by launching it from the command line with the <code>-jsconsole</code> flag. After building, just do:</p> - -<pre>.../b2g -jsconsole -profile <em>/path/to/your/profile</em></pre> - -<p>If you've installed the nightly build on a Mac, you can do the following:</p> - -<pre>/Applications/B2G.app/Contents/MacOS/b2g-bin -jsconsole -profile <em>/path/to/your/profile</em></pre> - -<div class="note"> -<p><strong>Note:</strong> On production builds of Firefox OS, console logging (such as by {{domxref("console.log()")}}) is disabled by default. In order to enable it, open the Settings app and navigate down through Device Information->More Information->Developer, then toggle on the "Console Enabled" preference.</p> -</div> - -<h3 id="option-runapp" name="option-runapp">Launching a specific application at startup</h3> - -<p>You can now specify an application to be launched automatically when b2g starts up in the desktop client. This is done as soon as the rest of the system is done loading up. To do this, just use the <code>--runapp</code> option, which takes as a parameter the name of the application to run. For example:</p> - -<pre> .../b2g-bin -profile <em>/path/to/your/gaia/profile</em> --runapp email</pre> - -<p>Before looking for an app to launch, the specified name is normalized by converting it to all lower case and removing all dashes and spaces. This normalized name is then compared to similarly normalized names from the manifests of available apps' manifests.</p> - -<p>For example, the name of the email app is currently "E-mail", but <code>--runapp email</code> will work because of this normalization.</p> - -<p>If you specify the <code>--runapp</code> option without an argument, or with an empty argument, the b2g client will output to your terminal a list of the known applications as well as a brief usage message.</p> - -<div class="note"> -<p><strong>Note:</strong> Using the <code>--runapp</code> option disables the lock screen as a side effect and does not re-enable it. It's assumed that you won't use this command on a profile on which you will be testing the lock screen, or you will turn it back on manually in Settings application. Feel free to contribute a patch to change this behavior if it's a problem.</p> -</div> - -<h2 id="Usage_tips">Usage tips</h2> - -<p>This section provides a few helpful tips to using the B2G desktop client.</p> - -<ul> - <li>ESC key performs the same function as the "back" button.</li> - <li>Home key performs the same function as the "home" button; if you're on a Mac, Home key is available as Fn+← (Fn + Left Arrow).</li> - <li>End key performs the same function as the "power" button; if you're on a Mac, End key is available as Fn+→ (Fn + Right Arrow).</li> - <li>Page Up and Page Down keys perform the same function as "Volume Up" and "Volume Down" buttons respectively; if you're on a Mac, Page Up key is available as Fn+↑ (Fn + Up Arrow) and Page Down key is available as Fn+↓ (Fn + Down Arrow).</li> - <li>Long press to Home key opens the "Card View"; if you're on Mac, Cmd+Fn+← (Cmd + Fn + Left Arrow) opens the "Card View".</li> -</ul> - -<h2 id="Next_steps">Next steps</h2> - -<p>Now that you have a desktop build of Boot to Gecko running, you can do testing, development, and other work in it:</p> - -<ul> - <li><a href="/en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko">Debugging on Boot to Gecko</a></li> - <li><a href="/en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko">Testing Boot to Gecko</a></li> - <li><a href="http://blog.johnford.org/desktop-b2g-include-gaia/" title="http://blog.johnford.org/desktop-b2g-include-gaia/">Desktop B2G builds now include Gaia</a></li> -</ul> diff --git a/files/nl/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/nl/archive/b2g_os/building_and_installing_firefox_os/index.html deleted file mode 100644 index 98220c79c8..0000000000 --- a/files/nl/archive/b2g_os/building_and_installing_firefox_os/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Het compileren en installeren van Firefox OS -slug: Archive/B2G_OS/Building_and_installing_Firefox_OS -translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS ---- -<p>Omdat Firefox OS op dit moment aan hevige ontwikkelingen onderhevig is en zich in een pre-release fase bevindt, is de best mogelijke manier om er zeker van te zijn een up-to-date versie van het OS te draaien het zelf compileren en installeren van een image. De artikelen welke hieronder zijn verzameld zullen een complete handleiding zijn tijdens het proces van compileren en installeren van Firefox OS in een emulator danwel op een ondersteund apparaat, of bij het installeren van de Gaia gebruiksinterface in de Firefox-browser.</p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="het_verkrijgen_en_compileren_van_FIREFOX_OS">het verkrijgen en compileren van FIREFOX OS</h2> - <dl> - <dt> - <a href="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites" title="en-US/docs/Mozilla/Boot_to_Gecko/B2G build prerequisites">Firefox OS compilatiebenodigdheden</a></dt> - <dd> - Wat heb je nodig (en wat moet je doen) om voor de eerste keer een Firefox OS image te compileren.</dd> - <dt> - <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build" title="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing for your first B2G build">Voorbereiden op het bouwen van de eerste image</a></dt> - <dd> - Alvorens je de eerste image kunt bouwen, moet je de de repository clonen en de bestanden configureren. Dit artikel kan hierbij van hulp zijn.</dd> - <dt> - <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko" title="en-US/docs/Mozilla/Boot_to_Gecko/Building Boot to Gecko">Het compileren van Firefox OS</a></dt> - <dd> - Hoe moet je Firefox OS compileren.</dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">Alle bekijken...</a></span></p> - </td> - <td> - <h2 class="Community" id="Installing_FIREFOX_OS_andor_Gaia">Installing FIREFOX OS and/or Gaia</h2> - <dl> - <dt> - <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Choosing_how_to_run_Gaia_or_B2G" title="en-US/docs/Mozilla/Boot_to_Gecko/Choosing how to run Gaia or B2G">Choosing how to run Gaia or Firefox OS</a></dt> - <dd> - You can use Gaia within Firefox, or you can run Firefox OS on a mobile device or in a desktop-based simulator. This guide will help you decide which is best for your needs.</dd> - <dt> - <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Gaia_in_Firefox" title="en-US/docs/Mozilla/Boot_to_Gecko/Using Gaia in Firefox">Using Gaia in Firefox</a></dt> - <dd> - How to use Gaia within a desktop Firefox browser.</dd> - <dt> - <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">Using the Firefox OS desktop client</a></dt> - <dd> - A guide to running and using the Firefox OS desktop client; this simulates the Gaia environment in a desktop application. It's more accurate than running Gaia in Firefox but not as accurate as the emulators.</dd> - <dt> - <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Boot_to_Gecko/Using the B2G emulators">Using the Firefox OS emulators</a></dt> - <dd> - A guide to building and using the Firefox OS emulators, and when to use which emulator.</dd> - <dt> - <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Installing_Boot_to_Gecko_on_a_mobile_device" title="en-US/docs/Mozilla/Boot_to_Gecko/Installing Boot to Gecko on a mobile device">Installing Firefox OS on a mobile device</a></dt> - <dd> - How to install Firefox OS on a real mobile device.</dd> - <dt> - <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Dual_boot_of_B2G_and_Android_on_SGS2" title="/en-US/docs/Mozilla/Boot_to_Gecko/Dual boot of B2G and Android on SGS2">Dual boot of Firefox OS and Android on SGS2</a></dt> - <dd> - How to set up a Firefox OS/Android dual boot environment on a Samsung Galaxy S2.</dd> - </dl> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/nl/archive/b2g_os/gebruik_van_de_app_manager/index.html b/files/nl/archive/b2g_os/gebruik_van_de_app_manager/index.html deleted file mode 100644 index 2162bdecf1..0000000000 --- a/files/nl/archive/b2g_os/gebruik_van_de_app_manager/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Gebruik van de App Manager -slug: Archive/B2G_OS/Gebruik_van_de_App_Manager -translation_of: Archive/B2G_OS/Using_the_App_Manager ---- -<div id="yass_top_edge_dummy" style="width: 1px; height: 1px; padding: 0px; margin: -1px 0px 0px; border-width: 0px; display: block;"> </div> - -<div id="yass_top_edge" style="padding: 0px; margin: 0px; border-width: 0px; height: 0px; display: block; width: 1px;"> </div> - -<div class="summary"> -<p>De App Manager is een nieuwe tool beschikbaar voor Firefox op de desktop welke een aantal handige funcionaliteiten biedt voor het helpen met testen, uitvoeren en testen van HTML5 web applicaties op het Firefox OS telefoons en Firefox OS simulator, direct vanuit de browser.</p> -</div> - -<p>{{EmbedYouTube("z1Bxg1UJVf0")}}</p> - -<p>De App Manager bestaat uit:</p> - -<ul> - <li>De <a href="#Apps_panel"><em>Apps panel</em></a>, which manages local apps (app source code located on your computer) and apps hosted externally, allowing you to package and install them on your device or simulator, and debug them using Toolboxes</li> - <li>A <a href="#Device_panel"><em>Device panel</em></a>, which displays information about the connected device including Firefox OS version installed, permissions required for using device APIs on the device, and apps installed</li> - <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, which are are sets of developer tools (web console, inspector, debugger, etc.) that can be connected to a running app via the Apps panel to perform debugging operations</li> -</ul> - -<h2 id="Snelle_setup"><a name="Configuring_device">Snelle setup:</a></h2> - -<p>This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there. Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.</p> - -<ol> - <li>Make sure you have Firefox Desktop 26+ installed</li> - <li>Open the App Manager (in the URL bar, type <code>about:app-manager</code>)</li> - <li>If you don't have a real device: - <ol> - <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the Firefox OS Simulator</a></li> - <li>In App Manager's bottom toolbar, click on <em>Start Simulator</em>, then click on the name of the installed simulator, which should appear there.</li> - </ol> - </li> - <li>If you have a real device: - <ol> - <li>Make sure your device is running Firefox OS 1.2+</li> - <li>In the Settings of your device, disable Screen Lock (<code>Settings > <code>Screen Lock</code></code>) and enable Remote Debugging (<code>Settings > Device information > More information > Developer</code>)</li> - <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper</a> add-on in Firefox Desktop</li> - <li>Connect your device to your machine via a USB cable</li> - <li>You should see the name of your device in the App Manager's bottom bar. Click on it.</li> - </ol> - </li> - <li>The bottom bar should show "Connected to: xxx"</li> - <li>Click on the <em>Apps</em> panel and add an app (packaged or hosted)</li> - <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li> - <li>The <em>Debug</em> button connects the developer tools to the running app</li> -</ol> - -<h2 id="Device_and_system_configuration">Device and system configuration</h2> - -<p>The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run thrugh all the steps required.</p> - -<h3 id="Firefox_1.2_required">Firefox 1.2+ required</h3> - -<p>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to <code>Settings > Device Information > Software</code>.</p> - -<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p> - -<p>Builds available:</p> - -<ul> - <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li> - <li>More to follow</li> -</ul> - -<p>To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> - -<h3 id="Remote_debugging">Remote debugging</h3> - -<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings > Device information > More information > Developer</code> and check the Remote Debugging checkbox.</p> - -<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3> - -<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p> - -<ul> - <li> - <p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p> - <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">Download ADB Helper Add-on</a></li> - <li>Use ADB manually. You need to have it installed on your computer - download and install <code>adb</code> (see the <a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a>) as part of the Android SDK package. You'll need to enable port forwarding by entering the following command into your terminal: - <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> - Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</li> -</ul> - -<div class="note"> -<p>Note: There's no need to run this command if you installed the ADB Helper Add-on.</p> -</div> - -<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2> - -<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p> - -<ol> - <li>Plug the device into your computer via USB.</li> - <li>Disable Screen lock on your device by going to <code>Settings > Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> - <li>Start the App Manager — In Firefox Desktop select the <code>Tools > Web Developer > App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li> - <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li> - <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p> - -<div class="note"> -<p>Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.</p> -</div> - -<h2 id="Using_a_Firefox_OS_Simulator_Add-on"><a name="Simulator">Using a Firefox OS Simulator Add-on</a></h2> - -<p>If you haven't got a real device available to use with App Manager, you can still try it out using a Firefox OS Simulator Add-on. To start off, install the appropriate simulator for your operating system:</p> - -<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Install Simulator</a></p> - -<div class="note"> -<p>Note that currently there is only a Firefox OS 1.2 simulator available, although more may appear in the future.</p> -</div> - -<p>Once you've installed the simulator, you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. Three buttons will appear:</p> - -<ul> - <li>"Firefox OS 1.2" ... etc (or something similar): the leftmost button contains the name of the simulator version you have installed. Click it to start the connection to the simulator.</li> - <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).</li> - <li>"Cancel": the right hand button cancels the connection.</li> -</ul> - -<h2 id="Apps_panel_2"><a name="Apps_panel">Apps panel</a></h2> - -<p>Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps Panel. From here, you can import an existing app to push onto your device and debug:</p> - -<ul> - <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li> - <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li> -</ul> - -<p>Information about your app should appear on the right hand side of the window, as seen below:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> - -<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> - -<div class="note"> -<p>Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p> -</div> - -<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> - -<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p> - -<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2> - -<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> - -<div class="note"> -<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p> -</div> - -<p>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> - -<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p> - -<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2> - -<p>Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p> - -<ol> - <li> - <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p> - - <pre class="brush: bash">adb shell</pre> - - <p>Your prompt should change to <code>root@android</code>.</p> - </li> - <li> - <p>Next, stop B2G running using the following command:</p> - - <pre class="brush: bash">stop b2g</pre> - </li> - <li> - <p>Navigate to the following directory:</p> - - <pre>cd /data/b2g/mozilla/*.default/</pre> - </li> - <li> - <p>Here, update the prefs.js file with the following line:</p> - - <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js</pre> - </li> - <li> - <p>After you've finished editing and saving the file, start B2G again using the following command:</p> - - <pre class="brush: bash">start b2g</pre> - </li> - <li> - <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p> - </li> - <li> - <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p> - </li> -</ol> - -<div class="note"> -<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p> -</div> - -<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2> - -<p id="My_device_is_not_recognized">If the device is not recognized:</p> - -<ul> - <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li> - <li>Is your device running at least Firefox OS 1.2?</li> - <li>Did you enable "Remote Debugging" in the settings of your phone?</li> - <li>If you are not using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a>: - <ul> - <li>Did you successfully run the <code>adb forward</code> command?</li> - </ul> - </li> - <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar: - <ul> - <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li> - <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li> - </ul> - </li> - <li>Is your phone screen unlocked?</li> -</ul> - -<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a>.</p> - -<div id="yass_bottom_edge" style="position: absolute; margin: 0px; padding: 0px; border-width: 0px; height: 0px; left: 0px; top: 7873px; width: 100%; display: block;"> </div> diff --git a/files/nl/archive/b2g_os/index.html b/files/nl/archive/b2g_os/index.html deleted file mode 100644 index 69f87d5aa0..0000000000 --- a/files/nl/archive/b2g_os/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: B2G OS -slug: Archive/B2G_OS -tags: - - B2G - - Basic - - Beginner - - Firefox OS - - Firefox OS starten - - Gaia - - Overzicht -translation_of: Archive/B2G_OS ---- -<div class="summary"> -<p><span class="seoSummary">Firefox OS is the mobile operating system developed by Mozilla, based on Linux and Firefox's powerful Gecko rendering engine.</span></p> -</div> - -<p><strong>Firefox OS</strong> is open source software that allows developers to harness the power and flexibility of the Web to create advanced end-user applications. The <strong>entire user interface is a web app</strong>, which can<strong> </strong>display and launch other apps. A Firefox OS web app is made with HTML, CSS, and JavaScript. In addition, Firefox OS web apps have access to the device hardware and services via an Application Programing Interface (API).</p> - -<p>From a product perspective, Firefox OS is Mozilla's (and our OEM partners') branding and support services applied on top of <strong>Boot to Gecko</strong> (<strong>B2G</strong>), which is the operating system's engineering codename. Boot to Gecko is developed by a team of engineers inside Mozilla plus many external contributors from the wider Mozilla/open source community.</p> - -<section class="outer-apps-box" id="sect1"> -<h2 id="Develop_apps_for_Firefox_OS"><a href="/en-US/Apps/Build/Building_apps_for_Firefox_OS">Develop apps for Firefox OS</a></h2> - -<p>Head over to our App Center for all the information you could possibly need on building open web apps that can be installed on Firefox OS !</p> -</section> - -<div class="column-container"> -<div class="column-third"> -<h2 id="Platform_guides"><a href="/en-US/docs/Mozilla/Firefox_OS/Platform">Platform guides</a></h2> - -<p>Guides for platform developers on how the different components of the Firefox OS platform fit together and work.</p> - -<ul> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></li> - <li><a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></li> -</ul> -</div> - -<div class="column-third"> -<h2 id="Build_install"><a href="/en-US/docs/Mozilla/Firefox_OS/Build_and_install">Build & install</a></h2> - -<p>Guides covering building and installing Firefox OS on an emulator, compatible device, or desktop simulator.</p> - -<ul> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox OS build prerequisites">Firefox OS build prerequisites</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing for your first B2G build">Preparing for your first build</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">Building Firefox OS</a></li> -</ul> -</div> - -<div class="column-third"> -<h2 id="Developer_phones"><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide">Developer phones</a></h2> - -<p>Information on specific developer phones, such as tweaking, updating, recovering, and buying.</p> - -<ul> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame">Flame</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone</a></li> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN_C">ZTE Open C</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">Troubleshooting</a></li> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Phone and device specs</a></li> -</ul> -</div> -</div> - -<div class="column-container equalColumnHeights"> -<div class="zone-callout"> -<h2 id="Get_started_with_Firefox_OS_add-ons">Get started with Firefox OS add-ons</h2> - -<p>Firefox OS add-ons are new in Firefox OS 2.5! To start developing add-ons and getting involved in the add-ons community, read <a href="/en-US/docs/Mozilla/Firefox_OS/Add-ons/Getting_started">Getting started with Firefox OS add-ons</a>.</p> -</div> - -<div class="zone-callout"> -<h2 id="Other_useful_pages"><strong>Other useful pages</strong></h2> - -<ul> - <li><a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/"><span class="gmw_">Firefox OS <span class="gm-spell gm_ gm_d869ea80-e62d-d8a6-6929-a6e9983578ff">styleguide</span></span></a></li> - <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> - <li><a href="http://firefoxosbooks.org/">Firefox OS Books</a></li> -</ul> -</div> -</div> - -<div class="note"> -<p><strong>Note:</strong> We are keeping track of ongoing work on Firefox OS documentation on our <a href="/en-US/docs/MDN/Doc_status/Firefox_OS">Firefox OS documentation status</a> page. If you want to help contribute to Firefox OS documentation, please have a look at this page to see what work needs tweaking!</p> -</div> - -<h2 id="Subnav">Subnav</h2> - -<ol> - <li><a href="/en-US/Firefox_OS/Introduction">Introduction</a></li> - <li><a href="/en-US/Firefox_OS/Platform" title="Documentation about the Firefox OS platform, including Gonk, Gaia, and everything in between.">Platform guide</a> - <ol> - <li><strong><a href="/en-US/Firefox_OS/Platform">Platform guide overview</a></strong></li> - <li><a href="/en-US/Firefox_OS/Platform/Architecture" title="An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.">Architecture overview</a></li> - <li><a href="/en-US/Firefox_OS/Platform/Apps_architecture" title="An overview of the application model on Firefox OS.">Apps architecture</a></li> - <li><a href="/en-US/Firefox_OS/Platform/Gonk" title="Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates."><span class="gm-spell gm_ gm_db111eae-c215-78a2-9789-97be921cbbdc">Gonk</span></a></li> - <li><a href="/en-US/Gecko" title="Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.">Gecko</a></li> - <li><a href="/en-US/Firefox_OS/Platform/Gaia" title="Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.">Gaia</a></li> - <li><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps guide</a></li> - <li><a href="/en-US/Firefox_OS/Security" title="Documentation about security in Firefox OS">Security</a> - <ol> - <li><a href="/en-US/Firefox_OS/Security/Security_model">The Firefox OS security model</a></li> - <li><a href="/en-US/Firefox_OS/Security/System_security">System security</a></li> - <li><a href="/en-US/Firefox_OS/Security/Application_security">Application security in Firefox OS</a></li> - <li><a href="/en-US/Firefox_OS/Security/Installing_and_updating_applications">Securely installing and updating applications</a></li> - </ol> - </li> - <li><a href="/en-US/Firefox_OS/Platform/Out_of_memory_management_on_Firefox_OS">Out of memory management on Firefox OS </a></li> - <li><a href="/en-US/Firefox_OS/Platform/Feature_support_chart" title="A chart of which features are available in which types of Firefox OS builds.">Feature support chart</a></li> - <li><a href="/en-US/Firefox_OS/Platform/Settings_list" title="A list of common setting names that can be used with the settings API">Settings list</a></li> - </ol> - </li> - <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS" title="This includes documentation for building and installing the platform onto devices, as well as building the simulator and emulators.">Build and install</a> - <ol> - <li><strong><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Build and install overview</a></strong></li> - <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_process_summary">Firefox OS build process summary</a></li> - <li><a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites" title="Steps to take before you build Firefox OS for the first time.">Build prerequisites</a></li> - <li><a href="/en-US/Firefox_OS/Preparing_for_your_first_B2G_build" title="Before you can build Firefox OS, you need to clone the repository and configure your build.">Preparing for your first build</a></li> - <li><a href="/en-US/Firefox_OS/Building" title="How to build Firefox OS.">Building Firefox OS</a></li> - <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Building_Firefox_OS_for_flame_on_OSX">Building Firefox OS for flame on OSX</a></li> - <li><a href="/en-US/Firefox_OS/Choosing_how_to_run_Gaia_or_B2G" title="Using Gaia within Firefox, running Firefox OS on a mobile device, or in a desktop-based simulator. Which is best?">Choosing how to run Gaia or Firefox OS</a></li> - <li><a href="/en-US/Firefox_OS/Building_the_Firefox_OS_simulator" title="Simulating the Gaia environment in a desktop application - more accurate than running Gaia in Firefox but not as accurate as the emulators.">Building the Firefox OS simulator</a></li> - <li><a href="/en-US/Firefox_OS/Using_the_B2G_emulators" title="A guide to building and using the Firefox OS emulators, and when to use which emulator.">Using the Firefox OS emulators</a></li> - <li><a href="/en-US/Firefox_OS/Installing_on_a_mobile_device" title="How to install Firefox OS on a real mobile device.">Installing Firefox OS on a mobile device</a></li> - <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_update_packages">Creating and applying Firefox OS update packages</a></li> - <li><a href="/en-US/Firefox_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li> - <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li> - </ol> - </li> - <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS" title="Hack the OS, customize your builds, get things the way you think they should be!">Developing Firefox OS</a> - <ol> - <li><strong><a href="/en-US/Firefox_OS/Developing_Firefox_OS">Developing Firefox OS overview</a></strong></li> - <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Filing bugs against Firefox OS</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/modifying_hosts_file" title="A guide to what can be achieved by modifying the Firefox OS hosts file.">Modifying the hosts file</a></li> - <li><a href="/en-US/Firefox_OS/Customization_with_the_.userconfig_file" title="How to customize the build and execution of Firefox OS by changing the .userconfig file.">Customization with the .userconfig file</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script">Customizing the b2g.sh script</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Porting" title="Information about how to port Firefox OS to new devices.">Porting Firefox OS</a></li> - </ol> - </li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia">Developing Gaia</a> - <ol> - <li><strong><a href="/en-US/Firefox_OS/Developing_Gaia">Developing Gaia overview</a></strong></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Test_Gaia_code_changes">Testing Gaia code changes</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li> - <li><a href="/en-US/Firefox_OS/Platform/Gaia/Build_System_Primer">Gaia build system primer</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Customizing_build-time_apps">Customizing build-time apps</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Market_customizations_guide">Market customizations guide</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Customizing_the_keyboard">Customizing the keyboard in Firefox OS apps</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Localizing_Firefox_OS">Localizing Firefox OS</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/L10n_Best_Practices">L10n Best Practices</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/make_options_reference">Make options reference</a></li> - <li><a href="/en-US/Firefox_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Add-ons">Firefox OS add-ons</a></li> - <li><a href="/en-US/Firefox_OS/Phone_guide" title="A developer's guide to the Firefox OS developer phones available.">Firefox OS phone guide </a> - <ol> - <li><strong><a href="/en-US/Firefox_OS/Phone_guide">Firefox OS phone guide overview</a></strong></li> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Phone and device specs</a></li> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone">Geeksphone</a></li> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE OPEN</a></li> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN_C">ZTE OPEN C</a></li> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame">Flame</a></li> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Firefox_OS_device_features">General device features</a></li> - <li><a href="/en-US/Firefox_OS/Troubleshooting" title="A guide to resolving common problems with Firefox OS.">Troubleshooting</a></li> - <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Best_practices_open_reference_devices">Best practices for open reference devices</a></li> - </ol> - </li> - <li><a href="/en-US/Firefox_OS/TVs_connected_devices">Firefox OS on TVs and connected devices</a> - <ol> - <li><strong><a href="/en-US/Firefox_OS/TVs_connected_devices">TVs and connected devices overview</a></strong></li> - <li><a href="/en-US/Firefox_OS/TVs_connected_devices/How_to_get_started_with_TV_apps_development">How to get started with TV apps development</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/How_to_connect_WebIDE_to_TV_%28VIErA%29">How to connect WebIDE to TV (VIERA CX/CR series)</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_broadcast_streams_Firefox_OS">TV broadcast streams on Firefox OS products</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/Web_animations_on_large_screen">Web animations on large screens</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li> - <li><a href="/en-US/docs/Web/Apps/Design/Firefox_OS_TV_UX">Firefox OS for TV UX Overview</a></li> - </ol> - </li> - <li><a href="/en-US/Firefox_OS/Releases" title="This section of the site contains release notes, explaining what new features and changes of significance to developers have landed in each new release of Gaia and Gecko on Firefox OS.">Firefox OS release notes</a> - <ol> - <li><a href="/en-US/Firefox_OS/Releases">Firefox OS release notes overview</a></li> - <li><a href="/en-US/Firefox_OS/Releases/2.2">Firefox OS 2.2 for developers</a></li> - <li><a href="/en-US/Firefox_OS/Releases/2.1">Firefox OS 2.1 for developers</a></li> - <li><a href="/en-US/Firefox_OS/Releases/2.0">Firefox OS 2.0 for developers</a></li> - <li><a href="/en-US/Firefox_OS/Releases/1.4">Firefox OS 1.4 for developers</a></li> - <li><a href="/en-US/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li> - <li><a href="/en-US/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li> - <li><a href="/en-US/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li> - <li><a href="/en-US/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li> - </ol> - </li> - <li><a href="/en-US/Firefox_OS/Automated_testing">Automated testing</a> - <ol> - <li><strong><a href="/en-US/Firefox_OS/Automated_testing">Firefox OS automated testing overview</a></strong></li> - <li><a href="/en-US/Firefox_OS/Running_Tests_on_Firefox_OS_for_Developers">Running tests on Firefox OS: A guide for developers</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/gaia-ui-tests" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/gaia-ui-tests">Gaia UI tests</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Gaia_integration_tests">Gaia integration tests</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Gaia_unit_tests">Gaia unit tests</a></li> - <li><a href="/en-US/Firefox_OS/Automated_testing/Gaia_performance_tests">Gaia performance tests</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Mochitests" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Mochitests"><span class="gm-spell gm_ gm_8ea2aeb5-60d9-d796-930f-2db1e4217eaa">Mochitests</span></a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Reftests" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Reftests"><span class="gm-spell gm_ gm_9567400a-e713-3d43-ffa9-05fd8c3a28a2">Reftests</span></a></li> - <li><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tests" title="/en-US/docs/Marionette/Marionette_JavaScript_Tests">WebAPI tests</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/XPCShell" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/XPCShell"><span class="gmw_"><span class="gm-spell gm_ gm_cc093417-aacf-72e2-e15f-c15a7509a6a8">xpcshell</span> tests</span></a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/MTBF_tests">MTBF test</a></li> - <li><a href="/en-US/docs/Marionette" title="/en-US/docs/Marionette">Marionette</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Treeherder">Treeherder</a></li> - </ol> - </li> - <li><a href="/en-US/Firefox_OS/Debugging" title="A guide to debugging both your mobile apps and Firefox OS itself.">Debugging</a> - <ol> - <li><strong><a href="/en-US/Firefox_OS/Debugging">Firefox OS debugging overview</a></strong></li> - <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings for Firefox OS</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">Connecting a Firefox OS device to the desktop</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Setting_up">Setting up to debug Firefox OS using Firefox developer tools</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing and using ADB</a></li> - <li><a href="/en-US/Firefox_OS/Firefox_OS_usage_tips/taking_screenshots">Taking screenshots</a></li> - <li><a href="/en-US/docs/Tools/WebIDE" title="A tool that allows you to install open web apps from your computer to a device capable of installing them (such as Firefox OS) - and debug any running app.">Using the WebIDE</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Firefox_OS_crash_reporting">Firefox OS crash reporting</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Debugging_and_security_testing">Debugging and security testing with Firefox OS</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Debugging_B2G_using_gdb"><span class="gmw_">Debugging B2G using <span class="gm-spell gm_ gm_7a44a2c7-9d5d-e693-57b5-a88dd9adacd8">gdb</span></span></a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Debugging_B2G_using_valgrind">Debugging B2G using Valgrind</a></li> - </ol> - </li> -</ol> diff --git a/files/nl/archive/b2g_os/introduction/index.html b/files/nl/archive/b2g_os/introduction/index.html deleted file mode 100644 index 14a29acf84..0000000000 --- a/files/nl/archive/b2g_os/introduction/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Introductie Firefox OS -slug: Archive/B2G_OS/Introduction -translation_of: Archive/B2G_OS/Introduction ---- -<p><strong>Firefox OS</strong> (ook wel bij zijn codename "Boot to Gecko" or "B2G" genoemd) is Mozilla's mobile openbron besturings systeem gebaseerd op Linux en Mozilla's Gecko technologie. Firefox OS is een mobiel besturings systeem dat vrij is van eigen technologie. Terwijl het toch nog steeds een platform aan applicatieontwerpers biedt die daardoor uitstekende produkten kan ontwikkelen. Bovendien is het sterk en draagbaar genoeg om de eindgebruiker tevreden te stellen.</p> -<p>Voor Web ontwerpers, het belangrijkste om te onthouden is dat de hele user interface een Web app is, een die in staat is om andere Web apps te laten starten en draaien. Elke verandering die je aan de user interface en de aan de applicaties doet, dan creeer je in feite een soort van run van webpagina`s op Firefox OS, Zei het met een verbeterde toegang tot de hardware en functies van het mobiele apparaat.</p> -<p><a href="/en-US/docs/docs/Mozilla_OS/Firefox_OS/Building_and_Installing_Firefox_OS" title="/en-US/docs/docs/Mozilla_OS/Firefox_OS/Building_and_Installing_Firefox_OS">In onze handige gids</a> leer je hoe Firefox OS moet bouwen en instaleren.</p> -<h2 id="Hardware_eisen">Hardware eisen</h2> -<p>De meeste ARM-based mobiele apparaten zijn sterk genoeg om te kunnen dokken met Firefox OS. Dit gedeelt is genoeg om aan zowel aan de basis hardware eisen te voldoen, als zowel aan de hardware minimale toekomstige eisen.</p> -<table> - <thead> - <tr> - <th scope="col">Onderdeel</th> - <th scope="col">Minimum</th> - <th scope="col">Aanbevolen</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">CPU</th> - <td>ARMv6</td> - <td>Cortex A5 klasse of hoger<br> - ARMv7a met NEON</td> - </tr> - <tr> - <th scope="row">GPU</th> - <td>—</td> - <td>Adreno 200 klasse of hoger</td> - </tr> - <tr> - <th scope="row">Connectivity</th> - <td>—</td> - <td>WiFi<br> - 3G</td> - </tr> - <tr> - <th scope="row">Sensoren</th> - <td>—</td> - <td>Versneller<br> - Omgeving<br> - Ambient light<br> - A-GPS</td> - </tr> - </tbody> -</table> -<p>Voor een goede gebruikers ervaring, is het een goed idee om een toestel te nemen dat een goed kleurenprofiel biedt (uitgevoerd door de grafische driver) en over een hoofdtelefoonaansluiting die over mute beschikt voor het afspelen van media. De smartfones van tegenwoordig beschikken hier allemaal over.</p> -<h2 id="Gebruiks_tips">Gebruiks tips</h2> -<p>Dit gedeelte zal je van tips voorzien als je daadwerkelijk Firefox OS gaat gebruiken. Zie dit als een soort van tijdelijke oplossing, tot we daadwerkelijk een handleiding hebben.</p> -<h3 id="Telefoon_ontgrendelen">Telefoon ontgrendelen</h3> -<p>Als je bouw naar Firefox OS om een code gaat vragen om je toestel te ontgrendelen, is de code 0000. Sommige toestellen zullen hier later omvragen, wanneer we bezig zijn met bouwen en testen van de schermbeveiliging.</p> -<h3 id="Nemen_van_een_screenshot">Nemen van een screenshot</h3> -<p>Het nemen van een screenshot, is niet meer dan het indrukken van de aan/uitknop en en navigatieknop tegelijkertijd. Het screenshot zal in <code>/sdcard/screenshots</code> op je toestel opgeslagen worden. Je kan er ook bij via de gallerij op je toestel.</p> -<p>Als om een of andere reden dit niet werkt. Dan kun je dit ook via de terminal op de Linux or Mac OS X computer doen dat een Firefox OS bouwsysteem heeft geinstaleerd.</p> -<p>Zorg dat je ffmpeg hebt geinstaleerd.</p> -<ol> - <li>Op Mac, als je de Macports gebruikt, doe je dat via <code>sudo port install ffmpeg</code>.</li> - <li>Voor homebrew, gebruik <code>brew install ffmpeg</code></li> - <li>Op Linux (Ubuntu/Debian), gebruik je <code>sudo apt-get install ffmpeg</code>.</li> - <li>Sluit je telefoon aan via een USB kabel.</li> - <li>Doe met je telefoon wat je dan ook wilt doen voor je screenshot.</li> - <li><code>cd</code> in de <code>B2G/gaia</code> directory</li> - <li><code>make screenshot</code></li> - <li>Je hebt nu een screenshot onder de naam <code>screenshot.png</code>.</li> -</ol> -<h3 id="Remote_debugging_met_ADB">Remote debugging met ADB</h3> -<p>Om USB Debugging via adb mogelijk te maken, open Settings App en navigaeer naar Toestel Informatie > Meer Informatie > Fabrikant. Van de lijst, list, zet een vinkje bij Remote Debugging. Eindelijk, sluit het toestel via de USB met de computer.</p> -<h3 id="Toetsen_en_knoppen">Toetsen en knoppen</h3> -<p>Een typisch Firefox OS toestel heeftr een paar physical hardware knoppen:</p> -<dl> - <dt> - Home button</dt> - <dd> - Dit is meestal de knop onder je scherm. Als je hier op drukt, zal het je terug brengen naar je app launcher. Ingedrukt houden opent het gedeelte voor het veranderen van je zicht. switching view;Om te stoppen met de app wrijf je omhoog over het scherm.</dd> - <dd> - </dd> - <dt> - Volume regelaar</dt> - <dd> - Aan de linker kant bevindt volumeknop zich; Druk op de bovenste helft voor harder en druk op de onderste helft van de volumeknop voor zachter.</dd> - <dt> - Aan/uit knop</dt> - <dd> - De aan/uitknop bevindt zich aan de rechter bovenkant van het toestel.</dd> -</dl> diff --git a/files/nl/archive/b2g_os/quickstart/index.html b/files/nl/archive/b2g_os/quickstart/index.html deleted file mode 100644 index ebe1f7c220..0000000000 --- a/files/nl/archive/b2g_os/quickstart/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Build -slug: Archive/B2G_OS/Quickstart -tags: - - NeedsTranslation - - TopicStub -translation_of: Archive/B2G_OS/Quickstart ---- -<div class="summary"> - <p>Quickstart information on coding open web apps.</p> -</div> -<dl> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt> - <dd> - What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt> - <dd> - This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt> - <dd> - An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt> - <dd> - An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt> - <dd> - If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt> - <dd> - If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt> - <dd> - This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt> - <dd> - How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt> - <dd> - Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd> -</dl> diff --git a/files/nl/archive/b2g_os/quickstart/je_eerste_app/index.html b/files/nl/archive/b2g_os/quickstart/je_eerste_app/index.html deleted file mode 100644 index a0981402ab..0000000000 --- a/files/nl/archive/b2g_os/quickstart/je_eerste_app/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Je eerste app -slug: Archive/B2G_OS/Quickstart/Je_eerste_app -translation_of: Archive/B2G_OS/Quickstart/Your_first_app ---- -<article class="brush: js"> - <div class="summary"> - <p>Open web-apps bieden webontwikkelaars waar ze al jaren op hebben gewacht: een cross-platform-omgeving gericht op installeerbare apps ontwikkelt met alleen HTML, CSS en Javascript — met Firefox OS als het eerste toegewijde, open webapps-platform. Deze handleiding heeft als doel je snel aan de slag te laten gaan met een basale architectuur en bouwinstructies zodat je de volgende succesvolle app kunt maken!</p> - </div> - <p>If you'd like to follow along with this guide, you can download our <a href="https://github.com/chrisdavidmills/mdn-app-template">quick start app template</a>. Find more out about what this contains by reading our <a href="/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">Apps template</a> guide.</p> - <h2 id="App_Structure">App Structure</h2> - <h3 id="Packaged_vs._Hosted_Apps">Packaged vs. Hosted Apps</h3> - <p>There are two types of open web apps: <code>packaged</code> and <code>hosted</code>. Packaged apps are essentially <code>zip</code> files containing all application assets: HTML, CSS, JavaScript, images, manifest, etc. Hosted apps are run from a server at a given domain, just like a standard website. Both app types require a valid manifest. When it comes time to list your app on the Firefox Marketplace, you will either upload your app as a zip file or provide the URL to where your hosted app lives.</p> - <div style="width: 480px; margin: 0 auto;"> - <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/Q7x-B13y33Q/?feature=player_detailpage" width="480"></iframe></p> - <div class="video-caption"> - <p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> - </div> - </div> - <p>For the purposes of this guide, you'll create a hosted app which will live at your <code>localhost</code> address. Once your app is ready to list on the Firefox Marketplace, you can make the decision to bundle it as a packaged app or launch it as a hosted app.</p> - <h3 id="App_Manifests">App Manifests</h3> - <p>Every Firefox app requires a manifest.webapp file at the app root. The <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> file provides important information about the app, such as version, name, description, icon location, locale strings, domains the app can be installed from, and much more. Only the name and description are required. The simple manifest included within the app template is similar to the following:</p> - <pre class="brush: js">{ - "version": "0.1", - "name": "Open Web App", - "description": "Your new awesome Open Web App", - "launch_path": "/app-template/index.html", - "icons": { - "16": "/app-template/app-icons/icon-16.png", - "48": "/app-template/app-icons/icon-48.png", - "128": "/app-template/app-icons/icon-128.png" - }, - "developer": { - "name": "Your Name", - "url": "http://yourawesomeapp.com" - }, - "locales": { - "es": { - "description": "Su nueva aplicación impresionante Open Web", - "developer": { - "url": "http://yourawesomeapp.com" - } - }, - "it": { - "description": "La tua nuova fantastica Open Web App", - "developer": { - "url": "http://yourawesomeapp.com" - } - } - }, - "default_locale": "en" -}</pre> - <div style="width: 480px; margin: 0 auto;"> - <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/dgAUgHQOm8M#t/?feature=player_detailpage" width="480"></iframe></p> - <div class="video-caption"> - <p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> - </div> - </div> - <p> </p> - <p>A basic manifest is all you need to get started. For more details about manifests, read <a href="/en-US/docs/Web/Apps/Manifest">App Manifest</a>.</p> - <h2 id="App_Layout_Design">App Layout & Design</h2> - <p>Responsive design has become increasingly important as more screen resolutions become standard on different devices. Even if the main target of your app is mobile platforms such as Firefox OS, other devices will likely have access to it as well. <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a> allow you to adapt layout to device, as shown in this skeleton CSS example:</p> - <pre class="brush: css">/* The following are examples of different CSS media queries */ - -/* Basic desktop/screen width sniff */ -@media only screen and (min-width : 1224px) { - /* styles */ -} - -/* Traditional iPhone width */ -@media - only screen and (-webkit-min-device-pixel-ratio : 1.5), - only screen and (min-device-pixel-ratio : 1.5) { - /* styles */ -} - -/* Device settings at different orientations */ -@media screen and (orientation:portrait) { - /* styles */ -} -@media screen and (orientation:landscape) { - /* styles */ -}</pre> - <p>There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.) Choose the framework(s) that best fit your app and development style.</p> - <h2 id="Web_APIs">Web APIs</h2> - <p>JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page. JavaScript feature detection is still the best practice, as shown in the following example:</p> - <pre class="brush: js">// If this device supports the vibrate API... -if('vibrate' in navigator) { - // ... vibrate for a second - navigator.vibrate(1000); -}</pre> - <p>In the following example, the display style of a <code><div></code> is modified based on changes in the battery state of the device:</p> - <pre class="brush: java">// Create the battery indicator listeners -(function() { - var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, - indicator, indicatorPercentage; - - if(battery) { - indicator = document.getElementById('indicator'), - indicatorPercentage = document.getElementById('indicator-percentage'); - - // Set listeners for changes - battery.addEventListener('chargingchange', updateBattery); - battery.addEventListener('levelchange', updateBattery); - - // Update immediately - updateBattery(); - } - - function updateBattery() { - // Update percentage width and text - var level = (battery.level * 100) + '%'; - indicatorPercentage.style.width = level; - indicatorPercentage.innerHTML = 'Battery: ' + level; - // Update charging status - indicator.className = battery.charging ? 'charging' : ''; - } -})();</pre> - <p>In the code sample above, once you confirm that the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> is supported, you can add event listeners for <code>chargingchange</code> and <code>levelchange</code> to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.</p> - <p>Check the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page frequently to keep up to date with device API statuses.</p> - <h3 id="Install_API_functionality">Install API functionality</h3> - <p>In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:</p> - <pre class="brush: html"><button id="install-btn">Install app</button></pre> - <p>This button's functionality is implemented using the Install API (see install.js):</p> - <pre class="brush: js">var manifest_url = location.href + 'manifest.webapp'; - -function install(ev) { - ev.preventDefault(); - // define the manifest URL - // install the app - var installLocFind = navigator.mozApps.install(manifest_url); - installLocFind.onsuccess = function(data) { - // App is installed, do something - }; - installLocFind.onerror = function() { - // App wasn't installed, info is in - // installapp.error.name - alert(installLocFind.error.name); - }; -}; - -// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button. -var button = document.getElementById('install-btn'); - -var installCheck = navigator.mozApps.checkInstalled(manifest_url); - -installCheck.onsuccess = function() { - if(installCheck.result) { - button.style.display = "none"; - } else { - button.addEventListener('click', install, false); - }; -}; -</pre> - <p>Let's run through briefly what is going on:</p> - <ol> - <li>We get a reference to the install button and store it in the variable <code>button</code>.</li> - <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li> - <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li> - <li>We then test for the existence of <code>installCheck.result</code> using an <code>if</code> statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.</li> - <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li> - <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.</li> - </ol> - <p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p> - <div class="note"> - <p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p> - </div> - <h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2> - <p>There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the <code>manifest.webapp</code> file like so:</p> - <pre class="brush: js">// New key in the manifest: "permissions" -// Request access to any number of APIs -// Here we request permissions to the systemXHR API -"permissions": { - "systemXHR": {} -}</pre> - <p>The three levels of permission are as follows:</p> - <ul> - <li>Normal — APIs that don't need any kind of special access permissions.</li> - <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li> - <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li> - </ul> - <p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p> - <div class="note"> - <p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p> - </div> - <h2 id="Tools_Testing">Tools & Testing</h2> - <p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.</p> - <h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3> - <p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.</p> - <h3 id="App_Manager">App Manager</h3> - <p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> - <h3 id="Unit_Testing">Unit Testing</h3> - <p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p> - <h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3> - <p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p> - <p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p> - <h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2> - <p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.</p> - <h3 id="More_Marketplace_Listing_Information">More Marketplace & Listing Information</h3> - <ol> - <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li> - <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li> - <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">App Submission Video Walkthrough </a></li> - </ol> -</article> diff --git a/files/nl/archive/b2g_os/simulator/index.html b/files/nl/archive/b2g_os/simulator/index.html deleted file mode 100644 index 75fee953e1..0000000000 --- a/files/nl/archive/b2g_os/simulator/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Firefox OS Simulator -slug: Archive/B2G_OS/Simulator -translation_of: Archive/B2G_OS/Simulator ---- -<div class="warning"> - De Firefox OS Simulator werkt op het moment niet met Mac OS X 10.9 (Mavericks). Zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=930511">bug 930511</a> voor de details. Er is wel een uitweg, je zult Firefox moeten opstarten vanuit de disk image (DMG), dus zonder het eigenlijk te installeren.</div> -<div class="note"> - <p>De Firefox OS Simulator is op dit moment nog in een vroeg stadium, en is nog niet zo betrouwbaar en volledig als wij willen dat hij is</p> - <p>Als je bugs vind, geef ze dan door <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">op github</a>, heb je vragen, probeer het dan te vragen op de <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developers-tools mailing</a> list of in <a href="irc://irc.mozilla.org/#devtools">#devtools op irc.mozilla.org</a></p> - <p>Lees hoe je <a href="#Simulator-verbose-logging">verbose logging aanzet</a> en<a href="#Simulator-latest-preview-build"> hoe je de laatste voorbeeld build krijgt </a>in het <a href="#Unsupported-APIs">help center</a>.</p> -</div> -<p>The Firefox OS Simulator add-on is een tool die je er bij helpt om je <a href="/nl/docs/Apps">Firefox OS app</a> te testen en te debuggen op je desktop. </p> -<p>De code-test-debug cyclus is veel sneller met de simulator dan met een echt toestel, en je hoeft natuurlijk geen echt toestel te bezitten om het te gebruiken!</p> -<p>De simulator bestaat hoofdzakelijk uit:</p> -<p>*/ originele pagina vanaf hier, help ons met vertalen /*</p> -<ul> - <li><strong>the Simulator</strong>: this includes the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Firefox OS desktop client</a>, which is a version of the higher layers of <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> that runs on your desktop. The Simulator also includes some <a href="#Simulator-toolbar" title="#Simulator-toolbar">additional emulation features</a> that aren't in the standard Firefox OS desktop builds.</li> - <li><strong>the Dashboard</strong>: a tool hosted by the Firefox browser that enables you to start and stop the Simulator and to install, uninstall, and debug apps running in it. The Dashboard also helps you push apps to a real device, and checks app manifests for common problems.</li> -</ul> -<p>The screenshot below shows a debugging session using the Simulator.</p> -<p>The Dashboard is on the top-right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top-left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p> -<p>This guide covers the following topics:</p> -<ul> - <li><a href="#Installing" title="#Installing">how to install the Simulator add-on</a></li> - <li><a href="#Adding-updating-removing" title="#Adding-updating-removing">how to add, remove, and refresh apps</a></li> - <li><a href="#Manifest-validation" title="#Manifest-validation">manifest validation</a></li> - <li><a href="#Running-the-Simulator" title="#Running-the-Simulator">how to run the Simulator</a></li> - <li><a href="#Attaching-developer-tools" title="#Attaching-developer-tools">how to connect developer tools such as the JS debugger to apps running in the Simulator</a></li> - <li><a href="#Simulator-receipts" title="#Simulator-receipts">how to get test receipts for a paid app</a></li> - <li><a href="#Push-to-device" title="#Push-to-device">how to push apps to a connected device</a></li> - <li><a href="#Limitations" title="#Limitations">the limitations of the Simulator compared with a real Firefox OS device</a></li> -</ul> -<div class="note"> - For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the <a href="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Simulator Walkthrough</a> page.</div> -<h2 id="Installing_the_Simulator_add-on"><a name="Installing_the_Simulator">Installing the Simulator add-on</a></h2> -<p>The Simulator is packaged and distributed as a Firefox add-on. To install it:</p> -<ol> - <li>Using Firefox, go to <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">the Simulator's page on addons.mozilla.org</a>.</li> - <li>Click "Add to Firefox".</li> - <li>Once the add-on has downloaded you will be prompted to install it: click "Install Now".</li> -</ol> -<p>Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. It it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.<br> - <br> - Once you have installed the Simulator add-on, Firefox will periodically check for newer versions and keep it up to date for you.</p> -<p>The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="margin-right: auto; margin-left: auto; display: block;"><br> - The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like: <img alt="" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png"></p> -<h2 id="Adding_removing_and_refreshing_apps"><a name="Adding-updating-removing">Adding, removing and refreshing apps</a></h2> -<h3 id="Adding_apps">Adding apps</h3> -<p>To add a <a href="/en-US/docs/Apps/Packaged_apps" title="/en-US/docs/Apps/Packaged_apps">packaged app</a> to the Simulator, open the Dashboard, click "Add Directory" and select the <a href="/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">manifest file</a> for your app.<br> - <br> - To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.<br> - <br> - When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on <a href="#Manifest-validation" title="#Manifest-validation">Manifest Validation</a> for details on what tests are run.</p> -<p>Unless manifest validation reveals that your app has errors, the Dashboard will then automatically run your app in the Simulator.</p> -<h3 id="Managing_apps">Managing apps</h3> -<p>Once you have added an app, it will appear in the Manager's list of installed apps:<br> - <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br> - Each entry gives us the following information about the app:</p> -<ul> - <li>its name, taken from the manifest</li> - <li>its type, which will be one of "Packaged", "Hosted", or "Generated"</li> - <li>a link to its manifest file</li> - <li>the result of manifest validation</li> -</ul> -<p>It also gives us four commands:</p> -<ul> - <li><strong>"Refresh":</strong> use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app: you will need to refresh the app to apply the changes.</li> - <li><strong>"Connect": </strong>use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.</li> - <li><strong>"Remove" ("X"):</strong> use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.</li> - <li><strong>"Receipt":</strong> use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.</li> -</ul> -<div class="note"> - <p><strong>Refresh App from the Simulator window</strong>: you can update and reload an app directly from the Simulator window <a href="#Simulator-menubar" title="#Simulator-menubar">using the menubar action or its associated shortcut</a> while the app is running.</p> -</div> -<h3 id="Manifest_validation"><a name="Manifest-validation">Manifest validation</a></h3> -<p>When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:</p> -<ul> - <li>manifest errors: problems that will prevent your app from installing or running</li> - <li>manifest warnings: problems that may prevent your app from working properly</li> - <li>simulator-specific warnings: features your app is using that the Simulator doesn't yet support</li> -</ul> -<p>It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.</p> -<h4 id="Manifest_errors">Manifest errors</h4> -<p>The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:</p> -<ul> - <li>the manifest does not include the mandatory "name" field</li> - <li>the manifest is not valid JSON</li> - <li>the app is a hosted app, but the <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field in its manifest is <a href="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps">"privileged" or "certified"</a>, which are only available to packaged apps</li> - <li>common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)</li> -</ul> -<p>Here's the result of trying to add a manifest file with a missing "name":<br> - <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p> -<h4 id="Manifest_warnings">Manifest warnings</h4> -<p>The Dashboard will report the following manifest issues as warnings:</p> -<ul> - <li>missing icons</li> - <li>the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square</li> - <li>the <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is unrecognized</li> - <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> that is unrecognized</li> - <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> which will be denied</li> - <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> for which access could not be determined</li> -</ul> -<h4 id="Simulator-specific_warnings">Simulator-specific warnings</h4> -<p>Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:</p> -<ul> - <li>the <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is "certified", but the Simulator does not yet fully support certified apps</li> - <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> to use an API that is <a href="#Unsupported-APIs" title="#Unsupported-APIs">not yet supported</a> by the Simulator</li> -</ul> -<h2 id="Running_the_Simulator"><a name="Running-the-Simulator">Running the Simulator</a></h2> -<p>There are two different ways the Simulator may be started:</p> -<ul> - <li>if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator</li> - <li>if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app</li> -</ul> -<p>Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.<br> - <br> - The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a <a href="#Simulator-toolbar" title="#Simulator-toolbar">toolbar at the bottom</a> and a <a href="#Simulator-menubar" title="#Simulator-menubar">menubar at the top</a> that contains some extra features:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="margin-right: auto; margin-left: auto; display: block;"></p> -<p>To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p> -<h3 id="Simulator_toolbar"><a name="Simulator-toolbar">Simulator toolbar</a></h3> -<p>In the bottom toolbar, from left to right, these are the <strong>Home button</strong>, the <strong>Screen Rotation button</strong>, and the <strong>Geolocation button</strong>.</p> -<ul> - <li>the <strong>Home button</strong> takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds)</li> - <li>the <strong>Screen Rotation button</strong> switches the device between portrait and landscape orientation. This will generate the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> event.</li> - <li>the <strong>Geolocation button</strong> triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates: this will be made available to your app via the <a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Geolocation API</a>.</li> -</ul> -<p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="width: 520px; height: 309px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="width: 500px; height: 297px;"></a></p> -<h3 id="Simulator_menubar"><a name="Simulator-menubar"></a>Simulator menubar</h3> -<p>In the top menubar, you can access some useful commands to make development more efficient:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p> -<ul> - <li><strong>File -> Quit</strong> (<em>Ctrl/Cmd - Q</em>): shut down the Simulator</li> - <li><strong>App -> Refresh</strong> (<em>Ctrl/Cmd - R</em>): refresh the running app</li> -</ul> -<p>The keyboard shortcut for the <strong>"App Refresh"</strong> command makes it possible to iteratively develop an app much like a web page:</p> -<ul> - <li>make a change to the code (and rerun your build tool if needed, e.g. volo / yeoman / grunt)</li> - <li>type the keyboard shortcut to refresh the app running in the Simulator</li> -</ul> -<div class="note"> - <p><strong>"Refresh App and Clear Data" hidden shortcut:</strong> sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, <em>Shift - Ctrl/Cmd - R</em>, that will refresh the running app while clearing the following data:</p> - <ul> - <li> - <p>localStorage / sessionStorage</p> - </li> - <li> - <p>cookies</p> - </li> - <li> - <p>indexedDB</p> - </li> - <li> - <p>appCache</p> - </li> - </ul> -</div> -<h2 id="Attaching_developer_tools"><a name="Attaching-developer-tools">Attaching developer tools</a></h2> -<p>You can attach developer tools to the Simulator, to help debug your app. At the moment you can only attach the <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, the <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>, the <a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a> and the <a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>, but we're working on adding support for more <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">developer tools</a>.</p> -<div class="geckoVersionNote"> - <p>Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.</p> -</div> -<p>To attach developer tools to the Simulator, click the <strong>"Connect"</strong> button for an app:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="margin-right: auto; margin-left: auto; display: block;"></p> -<p>The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="margin-right: auto; margin-left: auto; display: block;"></p> -<h3 id="Web_Console">Web Console</h3> -<p>The app can log to this console using the global <a href="/en-US/docs/DOM/console" title="/en-US/docs/DOM/console">console</a> object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (<a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Learn more about the Web Console.</a>)</p> -<h3 id="Debugger">Debugger</h3> -<p>Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (<a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Web_Console">Learn more about the Debugger.</a>)</p> -<h3 id="Style_Editor">Style Editor</h3> -<p>You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (<a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Web_Console">Learn more about the Style Editor.</a>)</p> -<h3 id="Profiler">Profiler</h3> -<p>Using the Profiler tool connected to the app, you can to find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (<a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Web_Console">Learn more about the Profiler.</a>)</p> -<h3 id="Network_Monitor">Network Monitor</h3> -<p>Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface. (<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">Learn more about the Network Monitor.</a>)</p> -<h2 id="Receipts"><a name="Simulator-receipts"></a>Receipts</h2> -<p>If you are developing a paid app, you should test your receipt validation code (e.g. the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.</p> -<p>Thanks to the <strong>"Receipts"</strong> menu in each app entry on the Simulator Dashboard, you can install an app with a <strong>"Valid"</strong>, <strong>"Invalid"</strong>, or <strong>"Refunded"</strong> test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p> -<h2 id="Push_to_device"><a name="Push-to-device">Push to device</a></h2> -<p>If you have a Firefox OS device you can connect it to the Simulator, and can then push apps from the Dashboard to the device.</p> -<h3 id="Connecting_a_device">Connecting a device</h3> -<p>To connect the device, follow the instructions in the guide to <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a>. Note that you don't have to install ADB, as the Simulator add-on includes it already.</p> -<h3 id="Pushing_apps_to_the_device">Pushing apps to the device</h3> -<p>Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note <strong>"Device connected"</strong> appear on the left of the Dashboard, and a new command appear in the entry for each app labeled <strong>"Push"</strong>:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p> -<p>Click <strong>"Push"</strong>, and the app will be installed on the Firefox OS device.</p> -<div class="note"> - <p><strong>Manual Steps:</strong></p> - <ul> - <li> - <p>Once you’ve pushed the app to the device, you need to manually close and restart it again, to get updated content</p> - </li> - <li> - <p>If you update anything in the manifest (e.g. app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect</p> - </li> - </ul> -</div> -<h3 id="Firefox_OS_Device_Connection_Confirmation">Firefox OS Device Connection Confirmation</h3> -<p>On every device reboot, the first <strong>"Push"</strong> request needs to be confirmed on the device:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="width: 320px; height: 480px;"></p> -<h3 id="Troubleshooting_on_Linux">Troubleshooting on Linux</h3> -<p>If you are unable to connect your device after creating udev rules, please see this <a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">bug</a>.</p> -<h2 id="Limitations_of_the_Simulator"><a name="Limitations">Limitations of the Simulator</a></h2> -<p>Note that the Firefox OS Simulator isn't a perfect simulation.</p> -<h3 id="Hardware_limitations">Hardware limitations</h3> -<p>Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.</p> -<h3 id="Audiovideo_codecs">Audio/video codecs</h3> -<p>The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:</p> -<ul> - <li>MP3</li> - <li>AAC</li> - <li>H.264 (MP4)</li> - <li>WebM</li> -</ul> -<p>This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.</p> -<h3 id="Unsupported_APIs"><a name="Unsupported-APIs">Unsupported APIs</a></h3> -<p>Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:</p> -<ul> - <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li> - <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li> - <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> - <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> - <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li> - <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li> - <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li> - <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li> -</ul> -<h2 id="Getting_help"><a name="Simulator-help"></a>Getting help</h2> -<p>The Firefox OS Simulator is still at an early stage of development, and isn't yet as reliable and complete as we'd like it to be.</p> -<p>If you find any bugs, please <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">file them on GitHub</a>. If you have a question, try asking us on the <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools mailing list</a> or on <a href="irc://irc.mozilla.org/#devtools">#devtools on irc.mozilla.org</a>.</p> -<h3 id="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging"></a>How to enable verbose logging</h3> -<p>Use about:config to create the preference <a href="mailto:extensions.r2d2b2g@mozilla.org.sdk.console.logLevel">extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</a>, set it to the integer value 0, and disable/reenable the addon. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).</p> -<h3 id="How_to_get_the_latest_preview_build"><a name="Simulator-latest-preview-build"></a>How to get the latest preview build</h3> -<p>As the <a href="/en-US/docs/Tools/Firefox_OS_Simulator#Installing_the_Simulator_add-on">section on installing the Simulator</a> explains, you can get the latest release of the Simulator add-on from <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">addons.mozilla.org</a>.</p> -<p>Sometimes you might want to try out the very latest features before they're officially released. If so, you can download preview builds from the following URLs:</p> -<ul> - <li>Windows: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi</a></li> - <li>Mac: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-mac.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-mac.xpi</a></li> - <li>Linux: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-linux.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-linux.xpi</a></li> -</ul> -<p>Be aware that preview builds are less stable and thoroughly tested than release builds.</p> |