diff options
Diffstat (limited to 'files/zh-cn/archive/b2g_os/platform/gaia')
10 files changed, 0 insertions, 1595 deletions
diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/build_system_primer/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/build_system_primer/index.html deleted file mode 100644 index 85d101cf3a..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/build_system_primer/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 构建系统入门 -slug: Archive/B2G_OS/Platform/Gaia/Build_System_Primer -translation_of: Archive/B2G_OS/Developing_Gaia/Build_System_Primer ---- -<p><span style="font-weight: bold; background-color: rgb(244, 247, 248);">本文介绍了Gaia构建系统是如何工作的，包括</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; font-weight: bold; background-color: rgb(244, 247, 248);" class="seoSummary"> makefile, 构建过程，环境变量及潜在定制。 </span></p> -<p>在构建步骤中绝大多数有意义的工作都是由存放在Gaia子文件夹 <code>build/</code> 下的脚本执行的，它们主要是使用make, node.js ， <a href="https://developer.mozilla.org/en-US/docs/XPConnect/xpcshell" title="https://developer.mozilla.org/en-US/docs/XPConnect/xpcshell">XPCShell</a> (也称作JS Shell)以及 <a href="/zh-CN/docs/XULRunner">XULRunner [zh-CN]</a>执行的。Gaia构建系统中包含许多帮助工具，可以将webapp安装，测试，定位和打包到实际设备上。它同样允许开发者通过诸如更改默认壁纸，铃声，应用和设置的方式来对Gaia自定义。</p> -<h2 id="Makefile文件">Makefile文件</h2> -<p> Makefile文件中包含许多有用的命令，本节会对最有用的一些命令进行解释： </p> -<h4 id="install-gaia">install-gaia</h4> -<p>该命令会将Gaia层所有的应用推送到设备端。如果想要推送特定的应用，可以使用APP 标志位：</p> -<pre class="brush: bash">APP=calendar make install-gaia</pre> -<p>运行上面命令时所在的位置必须是Gaia apps 下的文件夹（例如 <code>apps</code>).</p> -<h4 id="reset-gaia">reset-gaia</h4> -<p>该命令会对设备中的应用进行清理并且在安装完成应用后会设置权限的默认值，除此之外与 <code>install-gaia 命令作用是相同的</code>. 在构建工程时，应用会存放在 <code>/data/local类似的目录</code>. 它同样也会将测试和调试的应用推送到手机中。</p> -<div class="warning"> - <p>注意: 如果在使用 <code>reset-gaia</code> 时加入 <code>APP</code> 环境变量，会使您的手机不可用（此时可以通过再次执行不带 <code>APP</code> 变量的命令恢复）. 因此请不要这样做.</p> -</div> -<h4 id="production">production</h4> -<p>该命令会将web应用安装在<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">/system/b2g 下，而不是</span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">/data/local，除此之外与</span> <code>reset-gaia </code>作用是相同的。这个命令能够使您对user版本进行仿真，这个命令同样会将一系列的应用安装在user版本上<code>。</code></p> -<h4 id="sect1"> </h4> -<h3 style="line-height: 24px; letter-spacing: normal;" id="参考工作负载">参考工作负载</h3> -<p>These goals push variously sized workloads to the device, helping us with debugging and fixing the performance and scalability issues we might have. These goals accept the APP environment variable, or an APPS environment variable that should contain the app names separated by a space, e.g.,</p> -<pre style="padding-top: 1em; padding-right: 0px; padding-bottom: 1em; padding-left: 30px; border-left-width: 6px; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; background-color: rgba(234, 239, 242, 0.246094); text-shadow: none; direction: ltr; text-align: left; white-space: normal;" class="brush: bash language-html"><code style="font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; white-space: pre;" class="language-html">APP=sms make reference-workload-light -APPS="sms communications/contacts" make reference-workload-heavy</code></pre> -<div style="margin-top: 1em; position: absolute; left: 0px; right: 0px; background-clip: initial; background-color: transparent; line-height: inherit; top: 0px;" class="line-number"> - </div> -<div style="margin-top: 1em; position: absolute; left: 0px; right: 0px; background-clip: initial; background-color: transparent; line-height: inherit; top: 19px;" class="line-number"> - </div> -<div class="note"> - <p><strong>注意：</strong> For more information, read <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Hacking#Reference_Workloads">Hacking Gaia: Reference workloads</a>.</p> -</div> -<h3 id="环境变量">环境变量</h3> -<p>一些环境变量能够让你控制在设备上的构建与安装的一些方面：</p> -<h4 id="B2G_SYSTEM_APPS1">B2G_SYSTEM_APPS=1</h4> -<p>这个环境变量能够让你把应用推送到 <code>/system/b2g 而不是 /data/local</code>。 You should use that when you work with a user build. This variable is automatically set when running <code>make production</code>. This can be used for <code>install-gaia</code> or <code>reset-gaia</code> too.</p> -<h4 id="GAIA_OPTIMIZE1">GAIA_OPTIMIZE=1</h4> -<p>This triggers an optimization pass on the JavaScript files. This is automatically set when running <code>make production</code>. This can be used for <code>install-gaia</code> or <code>reset-gaia</code> too.</p> -<h4 id="PRODUCTION1">PRODUCTION=1</h4> -<p>This is basically an alias for <code>make production</code> (or is it the other way around ?).</p> -<h4 id="DEBUG1">DEBUG=1</h4> -<p>This lets you generate a debug profile to use with the <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">unit tests</a> or to develop your Firefox OS app in Firefox. You must delete the existing profile directory before trying to generate a new one.</p> -<h4 id="GAIA_DEV_PIXELS_PER_PX1.5">GAIA_DEV_PIXELS_PER_PX=1.5</h4> -<p>This generates a profile suitable for running on WVGA devices.</p> -<h2 id="Customizing_the_preferences">Customizing the preferences</h2> -<p>If you find that you have a set of custom preferences you need to set each time you flash your device, create a file called <code>custom-prefs.js</code> inside the <code>build</code> directory and store them in there. This keeps them from being overwritten and out of source control.</p> -<p>Here are some useful preferences:</p> -<pre class="brush: js">// this enables marionette which lets you run performance tests -// see https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_performance_tests -user_pref("marionette.defaultPrefs.enabled", true); - -// this sets the port for remote debugging your application on the device -user_pref("devtools.debugger.remote-port", 60000); - -// this enables the remote debugger -user_pref("devtools.debugger.remote-enabled", true); - -// this outputs debug information about the Radio Interface Layer in logcat -user_pref("ril.debugging.enabled", true); -</pre> -<p>This file is read each time you generate a profile. The safest way to be sure that everything is generated is to delete your profile first:</p> -<pre class="brush: bash">rm -rf profile && make profile</pre> -<p>Then you can safely use the <code>install-gaia</code> goal.</p> -<h2 id="FAQ">FAQ</h2> -<h3 id="1)_The_device_remains_black_after_a_flash">1) The device remains black after a flash</h3> -<p>This can sometimes happen if you flash the device while it is idle. To remedy this just restart B2G by issuing the following command from the command line:</p> -<p>adb shell stop b2g && adb shell start b2g</p> -<p> </p> diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/browser/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/browser/index.html deleted file mode 100644 index 856090aaca..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/browser/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Browser -slug: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Browser -tags: - - Apps - - B2G - - Firefox OS - - Gaia - - 指南 - - 浏览器 -translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Browser ---- -<div class="summary"> - <p><span class="seoSummary"><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/browser">Browser app</a> (当前是 System 的一部分) 提供了浏览器相关的功能 — 包括页面导航，搜索和书签。本文介绍了 Browser app 的基本工作以及它是如何融合进更大的 System中的。</span></p> -</div> -<p>由于 Gaia 运行 Gecko 的上层， 在基于 Gekco 实例之上，启动一个 Browser app/ System 浏览器进行常规的页面是非常容易做到的。它是由 <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Browser_API">mozBrowser API</a> 实现的。</p> -<div class="note"> - <p><b>注意</b>: Firefox OS 2.1 之后， Browser app 就是 System app 的一部分了。这意味着可以同时通过点击浏览器图标启动 Browser app 或通过全局搜索以及导航的能力来进行 web 浏览。 app 和 浏览器 tab 页此后会有共同的公共体验， 它们会作为 <a href="https://wiki.mozilla.org/FirefoxOS/Haida" style="text-decoration: underline;">Haida 用户体验</a> 的一部分，存在于任务管理器和表视图中（用于边缘手势）。</p> -</div> -<h2 id="System_浏览器_(浏览器框架)">System 浏览器 (浏览器框架)</h2> -<p>当 Firefox OS 用户将一个 web 页面添加为标签时， 它就会显示在 homescreen 上， 这个 web 页面后续就会打开 System 浏览器而不是 Browser app。在页面底部会有一个工具栏， 包括 向前/向后/刷新的功能。在 Gaia 中，它被称之为浏览器框架或包装器( wrapper)。您可以在下面图片的右手侧看到。</p> -<p><img alt="A diagram showing that when a web page is opened in the system browser, it is given a toolbar." src="https://mdn.mozillademos.org/files/7869/browser-app.png" style="width: 738px; height: 500px; display: block; margin: 0px auto;"></p> -<p>如果想要使您的 web 页面仍具有 后退/前进/刷新 的功能， 您可以在 app 表单文件中包含下面声明来使能浏览器框架。</p> -<pre class="brush: json">declare { chrome: { navigation: true } }</pre> -<div class="note"> - <p><b>注意</b>: 浏览器框架工具栏会影响到内容的高度，因此当在设计 web 页面布局时将其考虑进去。</p> -</div> -<h3 id="代码流程">代码流程</h3> -<p>当在 Firefox OS 中打开一个新的 web 页面时，调用流程如下</p> -<pre>Gecko > WrapperFactory > Window Manager > AppWindow > BrowserFrame</pre> -<p>Wrappers inheriting from <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/wrapper_factory.js">system/js/wrapper_factory</a> will receive the <code>mozbrowseropenwindow</code> event for a bookmarked web page.</p> -<p>In the <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/wrapper_factory.js#L15">handleEvent</a> section, the handler will check the event to decide whether the web page should be opened as an app or in browser chrome.</p> -<p>Finally, <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/wrapper_factory.js#L115">launchWrapper</a> is called to launch the corresponding window.</p> -<h2 id="全局搜索_导航">全局搜索 & 导航</h2> -<p>With the new search and navigation bar, users can get to their favorites, type in a URL, or discover a new app, from anywhere in Firefox OS. The search bar lives at the top of the screen, and users can just tap or swipe to open it.</p> -<p>Think of it as a combination of the <a href="https://support.mozilla.org/en-US/kb/awesome-bar-find-your-bookmarks-history-and-tabs">Awesome Bar</a> from the browser and the <a href="https://support.mozilla.org/en-US/kb/use-adaptive-search-discover-personalized-apps">adaptive app search</a> from the homescreen. Because Firefox OS uses web apps, when you find what you want, even if it’s a new app, it opens right away. You don’t need to install anything, because everything is instant and web—like.</p> -<h2 id="Browser_App">Browser App</h2> -<p>The Browser app is a certified webapp that provides a general web browser experience. The main function is located in <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/browser/js/browser.js">apps/browser/js/browser.js</a>:</p> -<pre class="brush: js">var Browser = { - init: function browser_init() { - this.getAllElements(); - ... - BrowserDB.init((function() { - ... - } - } -}; - -window.addEventListener('load', function browserOnLoad(evt) { - window.removeEventListener('load', browserOnLoad); - Browser.init(); -});</pre> -<p>The Browser will call its <code>init()</code> function while the DOM is loaded.</p> -<pre class="brush: js">getAllElements: function browser_getAllElements() { - var elementIDs = [ - 'toolbar—start', ... 'danger—dialog']; - - // Loop and add element with camel style name to Modal Dialog attribute. - elementIDs.forEach(function createElementRef(name) { - this[this.toCamelCase(name)] = document.getElementById(name); - }, this); -},</pre> -<p>The <code>getAllElements</code> function is used to get all camelCase element handlers, after which the <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/browser/js/browser_db.js">apps/browser/js/browser_db.js</a> is called, to prepare for adding the default search engine and bookmarks.</p> -<h2 id="书签">书签</h2> -<p>From Firefox OS 2.0 <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/bookmark">apps/bookmark</a> is used to handle bookmark save/remove activities.</p> -<p>The most interesting parts <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/bookmark/manifest.webapp">apps/bookmark/webapp.manifest</a> looks like so:</p> -<pre class="brush: json">"activities": { - "save—bookmark": { - "filters": { - "type": "url", - "url": { "required":true, "pattern":"https?:.{1,16384}" } - }, - "disposition": "inline", - "href": "/save.html", - "returnValue": true - }, - "remove—bookmark": { - "filters": { - "type": "url", - "url": { "required":true, "pattern":"https?:.{1,16384}" } - }, - "disposition": "inline", - "href": "/remove.html", - "returnValue": true - } -},</pre> -<p>As seen above, the activity is handled by save.html and remove.html. Both operations are delegated to <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/bookmark/js/activity_handler.js">apps/bookmark/js/activity_handler.js</a>:</p> -<pre class="brush: js">var ActivityHandler = { - 'save—bookmark': function ah_save(activity) { - }, - - 'remove—bookmark': function ah_remove(activity) { - } -}; - -navigator.mozSetMessageHandler('activity', function onActivity(activity) { - var name = activity.source.name; - switch (name) { - case 'save—bookmark': - case 'remove—bookmark': - if (activity.source.data.type === 'url') { - ActivityHandler[name](activity); - } - ... - } -}</pre> -<p>When the message handler listener <code>navigator.mozSetMessageHandler('activity')</code> receives the save-bookmark or remove-bookmark activities, the <code>ActivityHandler</code> function is triggered to handle correspondent operations.</p> diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/index.html deleted file mode 100644 index c8a36a6477..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Gaia应用 -slug: Archive/B2G_OS/Platform/Gaia/Gaia_apps -tags: - - Apps - - B2G - - Firefox OS - - Gaia - - 架构 -translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps ---- -<div class="summary"> - <p><span class="seoSummary">Gaia是Firefox OS 的前端， 它包括系统管理的功能以及附带在Firefox OS上的一些内置应用。所有的Gaia源代码(包括system和键盘IMEs)都完全由HTML5 ( HTML + CSS + JavaScript ) & 开放Web API实现的。 本文介绍了在Gaia家族工作的每一个可获得的应用的信息。</span></p> -</div> -<h2 id="Gaia_功能性分类">Gaia 功能性分类</h2> -<p>Gaia中的应用大致可分成下面几类。</p> -<div class="note"> - <p><b>注意：</b> 许多关于解释单个应用如何工作的页面都是链接自 <a href="https://github.com/mozilla-b2g/gaia/">Gaia Github repo</a> 中的README文件。这是因为许多app都处在快速开发周期内，会迅速的变化（通常是每天），因此如果使MDN页面根据这些变化快速的更新是没有什么意义的。工程师维护的README页面则是当前信息最准确的来源。</p> -</div> -<h3 id="平台">平台</h3> -<p>包括系统（System），设置（Settings）,锁屏（Lockscreen）,编译脚本(build scripts) 以及蓝牙(Bluetooth) 应用。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7503/platform_team.png" style="width: 355px; height: 269px; margin: 0px auto; display: block;"></p> -<h4 id="平台应用：进一步讲解">平台应用：进一步讲解</h4> -<dl> - <dt> - <a href="/zh-CN/Firefox_OS/Platform/Gaia/Gaia_apps/System">System</a></dt> - <dd> - System app是在<a href="/en-US/Firefox_OS/Platform/Architecture#Firefox_OS_bootup_procedure">Firefox OS启动过程</a>中由Gecko装载的第一个web应用。它会担负许多责任，一般都是系统运行所需要的，因此不会局限于对某一个web应用。</dd> - <dt> - <a href="/zh-CN/Firefox_OS/Platform/Gaia/Gaia_apps/Browser">Browser</a></dt> - <dd> - Browser app（当前是System 的一部分）会提供一些浏览器类似的功能—包括页面导航，搜索和书签等。</dd> - <dt> - <a href="/zh-CN/Firefox_OS/Platform/Gaia/Gaia_apps/Window_Management">Window Management</a></dt> - <dd> - Firefox OS的窗口管理功能 — 包括应用的生命周期和交互、通知、动画以及其他 — 是由System app的特定部分所处理的。本文会着眼于Firefox OS 窗口管理的细节问题。</dd> - <dt> - <a href="/zh-CN/Firefox_OS/Platform/Gaia/Gaia_apps/Settings">Settings</a></dt> - <dd> - Firefox OS 用户可以通过 Settings 应用来配置设备的设置信息，响应传入的活动（带有config名称的<a href="/en-US/docs/WebAPI/Web_Activities">Web activities</a>)，这种传入的活动可以使其他应用跳转到Settings应用的不同的界面来处理需要的配置（例如，当没有数据链接时，会显示wifi设置界面）。</dd> -</dl> -<dl> - <dt> - </dt> -</dl> -<h3 id="通信">通信</h3> -<p>包括 Dialer, Contact, SMS 以及 FTU应用.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7499/comms_team.png" style="width: 317px; height: 246px; margin: 0px auto; display: block;"></p> -<h4 id="通信应用：进一步讲解">通信应用：进一步讲解</h4> -<p>TBD(有待讨论）</p> -<h3 id="生产力应用">生产力应用</h3> -<p>包括 Email, Calendar, 以及 Clock 应用。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7505/productivity_team.png" style="width: 303px; height: 178px; margin: 0px auto; display: block;"></p> -<h4 id="生产力应用：进一步讲解">生产力应用：进一步讲解</h4> -<dl> - <dt> - <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/calendar/README.md">Calendar</a></dt> - <dd> - Firefox OS内置的日历应用。</dd> - <dt> - <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/clock/README.md">Clock</a></dt> - <dd> - Firefox OS原生的始终应用，包括闹钟，定时器，跑表功能。</dd> - <dt> - <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/email/README.md">Email</a></dt> - <dd> - Gaia e-mail 应用。</dd> -</dl> -<h3 id="多媒体">多媒体</h3> -<p>包括相机(Camera), 图库(Gallery), 音乐播放器(Music), 视频播放器(Video)应用以及一些多媒体相关的功能比如DRM和壁纸(wallpapers)。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7501/media_team.png" style="width: 386px; height: 250px; margin: 0px auto; display: block;"></p> -<h4 id="多媒体：进一步讲解">多媒体：进一步讲解</h4> -<dl> - <dt> - <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Gaia_apps/Video">Video</a></dt> - <dd> - Video 是视频播放应用，它能够播放在您Firefox OS 设备中存储的多媒体</dd> - <dt> - <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/camera/README.md">Camera</a></dt> - <dd> - 用户可以使用Camera来从设备摄像头中捕捉和管理视频和图片，而且还能够响应其他应用想要使用摄像头功能来获取多媒体时发出的<code>pick</code>类型的 <a href="/en-US/docs/WebAPI/Web_Activities">Web activitie</a>。</dd> -</dl> -<h3 id="其他的Gaia_功能">其他的Gaia 功能</h3> -<p>除了这些功能，还有其他一些主要的功能例如 browser, homescreen, marketplace, test framework, PDF viewer,以及 app manager，这些都是和Gaia一起紧密开发的。</p> -<dl> - <dt> - <a href="https://github.com/mozilla/pdf.js/blob/master/README.md">pdf.js</a></dt> - <dd> - pdf.js 是基于HTML5的PDF阅读器，用于在Gaia内阅读PDF文件。注意 pdf.js是在Gaia外一个独立的仓库维护的。</dd> -</dl> diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/settings/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/settings/index.html deleted file mode 100644 index 2d14f5798f..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/settings/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 系统设置 (Settings) -slug: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Settings -translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Settings ---- -<div class="summary"> - <p><span class="seoSummary">Settings app 允许用户来配置设备的系统设置信息，同时会对传入的 activities作出响应，即允许app开发者在app中显示特定的settings 视图（例如， 如果没有有效的数据链接，显示 wifi设置面板）。本文主要讲述了它是如何工作的。</span></p> -</div> -<h2 id="mozSettings_API_和_Data_绑定">mozSettings API 和 Data 绑定</h2> -<p>从技术上讲， Settings app 是一个向用户提供对认证<a href="/en-US/docs/Web/API/Navigator.mozSettings"> window.navigator.mozSettings API</a> 访问的UI界面。</p> -<p> Settings app 会自动的处理基本的系统设置操作，如绑定数据字段和 mozSettings 值 — 所有基本操作，如勾选一项设置或改变输入值将会使相关的 mozSettings 值也会改变。</p> -<p><code>window.navigator.mozSettings</code> API 会从Gecko 中获取系统设置的数据。 使用方式如下所示：</p> -<pre class="brush: js">navigator.mozSettings.createLock().set(values);</pre> -<p>上面是设置数据信息。</p> -<div class="note"> - <p><strong>注意</strong>: 在读或写任何 <code>mozSettings</code>， 我们需要使用 <code>createLock()</code> 方法来锁定settings。</p> -</div> -<p>要检索数据，我们可以使用获取或设置一个回调函数的方式启动对数据的操作：</p> -<pre class="brush: js">var reqTimerGoBack = -window.navigator.mozSettings.createLock().get('icc.goBackTimeout'); -reqTimerGoBack.onsuccess = function icc_getTimerGoBackSuccess() { - goBackTimer.timeout = reqTimerGoBack.result['icc.goBackTimeout']; - ... -};</pre> -<p>数据会存储在一个名为 <code>instance.result</code> 词典下。</p> -<p>Firefox OS 2.0 开始, <code>mozSettings</code> 实例可以通过 <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/settings_cache.js">js/modules/settings_cache.js</a> 实例被重复使用：</p> -<pre class="brush: js">var SettingsCache = require('modules/settings_cache'); - -SettingsCache.getSettings(function(result){ - var onlineSupportTitle = result['support.onlinesupport.title']; - ... -});</pre> -<h2 id="导航">导航</h2> -<p>当用户打开 Settings app， 在概览页面会显示多个面板，这个页面则是一个功能性的独立页面。<code>SettingsService.navigate</code> (<a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/settings_service.js">js/module/settings_service.js</a>) 则会控制这些页面间的导航。</p> -<div class="note"> - <p><strong>注意</strong>: For legacy panels (which are not yet ported to the new structure), settings.currentPanel is used instead of SettingsService.navigate to navigate<br> - between panels.</p> -</div> -<p>Since Firefox OS will support tablet devices as well as mobiles, the Settings app has two different types of navigation model implemented:</p> -<ul> - <li>一列(手机端)</li> - <li>两列 (平板端)</li> -</ul> -<p>While called, <code>SettingsService.navigate</code> determines what navigation model to use via the following code:</p> -<pre class="brush: js">if (_isTabletAndLandscape()) { - PageTransitions.twoColumn(oldPanel, newPanel, callback); -} else { - PageTransitions.oneColumn(oldPanel, newPanel, callback); -}</pre> -<h2 id="面板">面板</h2> -<p>From Firefox OS 2.0 onwards, the basic panel structure is defined in <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/panel.js">js/modules/panel.js</a>. It defines six lifecycle stats:</p> -<ul> - <li><code>init</code></li> - <li><code>beforeShow</code></li> - <li><code>show</code></li> - <li><code>hide</code></li> - <li><code>beforeHide</code></li> - <li><code>uninit</code></li> -</ul> -<p>All new settings panels are inherited from <code>SettingsPanel</code>, which extends <code>Panel</code>’s functionalities. The code is contained in <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/settings_panel.js">js/modules/settings_panel.js</a>:</p> -<pre class="brush: js">onInit: function(panel, initOptions) { - ... - - PanelUtils.activate(panel); -}, - -onBeforeShow: function(panel, beforeShowOptions) { - // Preset the panel every time when it is presented. - PanelUtils.preset(panel); - _addListeners(panel); - ... -},</pre> -<p><code>PanelUtils.activate</code> — defined in <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/panel_utils.js">js/modules/panel_utils.js</a> — is used to parse all links in the panel and adds corresponding handlers in <code>onInit</code> stat, and <code>PanelUtils.preset</code> is used to preset elements with the settings values in the <code>onBeforeShow</code> stat.</p> -<p>All new settings panels are defined in the <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/settings/js/panels">js/panels</a> folder.</p> -<h2 id="AMD_模块和编译时间优化">AMD 模块和编译时间优化</h2> -<p>From Firefox OS 2.0 onwards, the Settings app uses the <a href="http://en.wikipedia.org/wiki/Asynchronous_module_definition">AMD modules pattern</a> to implement each panel. The AMD modules are loaded via <a href="https://github.com/requirejs/alameda">Alemeda</a> (a lighter version of <a href="http://requirejs.org/">RequireJS</a>) and built/optimized using <code>r.js</code> (the RequireJS optimizer). The Settings app still had dependencies on files (<a href="https://github.com/mozilla-b2g/gaia/tree/master/shared/js">shared/js</a>) which aren’t AMD modules. For those it uses the <code>shim</code> options defined in <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/config/require.js">settings/js/config/require.js</a>.</p> -<h2 id="参考">参考</h2> -<p> <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/settings">Settings app has a build-in README</a> ，这个文件可以用来获取 Settings （大部分内容是由 Arthur Chen and Fred Lin 完成的）。</p> diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/system/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/system/index.html deleted file mode 100644 index 853dd41fbb..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/system/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: System -slug: Archive/B2G_OS/Platform/Gaia/Gaia_apps/System -translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps/System ---- -<div class="summary"> - <p><span class="seoSummary">System app 是在 <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Architecture#Firefox_OS_bootup_procedure">Firefox OS 启动过程</a> 中由Gecko装载的第一个 web 应用, 它会处理许多运行系统所需要的任务，因此不会局限于某一个单独的 web 应用。 这篇文档主要是讲解 Sytem如何工作。</span></p> -</div> -<blockquote> - <p>任何一个可以用 JavaScript 编写的应用， 会最终使用 JavaScript 构建的。 -- Atwood's Law</p> -</blockquote> -<div class="note"> - <p><b>注意</b>: 您可以在 Gaia Github 仓库中获取到 <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/system">source code for the System app</a></p> -</div> -<h2 id="system_app_是如何启动的">system app 是如何启动的</h2> -<p>当 Gecko 试图启动System应用时, 它会解析System's manifest.webapp 文件，并根据 <code style="font-style: normal;">launch_path </code>参数（该参数在Gaia应用中一般是 /index.html) 装载 index.html 文件。 要管理整个的移动系统，Sytem app需要装载很多资源文件。 </p> -<p>整个启动过程是从 <code>bootstrap.js </code>中的下面代码开始的： </p> -<pre class="brush: js">window.addEventListener('load', function startup() { -// define safelyLaunchFTU -function safelyLaunchFTU() { - ... -} - -if (Applications.ready) { - safelyLaunchFTU(); -} else { - ... -} - -window.addEventListener('ftudone', function doneWithFTU() { - window.removeEventListener('ftudone', doneWithFTU); - - var lock = window.navigator.mozSettings.createLock(); - lock.set({ - 'gaia.system.checkForUpdates': true - }); -} - - ... - -// With all important event handlers in place, we can now notify -// Gecko that we're ready for certain system services to send us -// messages (e.g. the radio). -var evt = new CustomEvent('mozContentEvent', -{ bubbles: true, cancelable: false, - detail: { type: 'system-message-listener-ready' } }); - window.dispatchEvent(evt); -}</pre> -<p>这段代码是这样工作的:</p> -<ol> - <li>System 是运行在浏览器引擎中真正的web应用， 并需要所有它依赖的资源都装载进去 — 包括 图片(images)和样式(styles)。 因此一旦 <a href="/zh-CN/docs/Web/API/Window/onload" title="此页面仍未被本地化, 期待您的翻译!"><code>window.onload</code></a> 事件触发， 我们就要开始这些工作。</li> - <li>首先，我们要使用 <span style="font-family: 'Courier New', 'Andale Mono', monospace;">safelyLaunchFTU() 函数</span>准备启动首次启动体验(FTU) 。顾名思义， 只有当用户首次启动 Firefox OS 时， FTU才会出现。</li> - <li>当用户在 FTU中点击 “完成” 时， 会启动 <span style="font-family: 'Courier New', 'Andale Mono', monospace;">ftudone </span>自定义事件， <code>bootstrap.js</code> 会监听和处理这个事件。</li> - <li>下一步， 我们会使用 <a href="/zh-CN/docs/Web/API/Settings" title="此页面仍未被本地化, 期待您的翻译!"><code>Settings</code></a> API (<code>navigator.mozSettings</code>) 将 <code>gaia.system.checkForUpdates</code> 设置成 <code>true</code>, 表示系统会检查更新。</li> - <li>最后，我们会通过 <span style="font-family: 'Courier New', 'Andale Mono', monospace;">CustomEvent </span>运行自定义的 <code>window.dispatchEvent</code>。这是Gaia 使用的一个非常重要的设计模式， 用于系统消息的处理以及与Gecko层的通信。上面方法是指 Gaia System app 通知 Gecko层， 它已经准备好监听和处理事件了。 </li> -</ol> -<h2 id="实现模块化">实现模块化</h2> -<p>为了实现更好的模块化和灵活性，system 应用本身也在不断的改进。 从1.4 版本开始， 专门发起了一个关于 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=912952">refactor the system module as instantiable object</a> 的倡议来讨论该问题。</p> -<p>在所有上述代码运行后，每个对 <code style="font-style: normal;">bootstrap.js</code> 中的系统组件的引用都是是如下的形式：</p> -<pre class="brush: js">window.telephonySettings = new TelephonySettings(); -window.telephonySettings.start();</pre> -<p> <code>TelephonySettings()</code> 的源代码框架如下：</p> -<pre class="brush: js">(function(exports) { - 'use strict'; - function TelephonySettings() { - this.init_param = false; - } - - TelephonySettings.prototype = { - // Initialzes all settings. - start: function() { - ... - }, - - // Clean all settings. - stop: function() { - ... - }, - - 1st_method: function ts_1st_method() { - ... - }, - - 2nd_method: function ts_2nd_method() { - ... - } - }; - - exports.TelephonySettings = TelephonySettings; - -}(window));</pre> -<p>这种模式可以帮助每个系统组件实现模块化，并使它们的可测性更强。</p> -<h2 id="开机和关机动画">开机和关机动画</h2> -<p>本部分会讲解 System app是如何控制开机动画和关机动画的。 <code>init_logo_handler.js</code> 和 <code>sleep_menu.js</code> 文件会对 system 开机动画和关机动画进行处理。</p> -<h3 id="开机动画">开机动画</h3> -<p>开机动画当前并没有包含在主引导程序中，而是要借助于检查 <code style="font-style: normal;">EventListeners。</code></p> -<p>在 <code>init_logo_handler.js</code> 文件中的开机启动代码如下所示：</p> -<p>一旦Gecko准备将一些东西画在屏幕上时， 会选择 logo或者是动画。当DOM装载完成时， 我们会运行合适的系统处理程序来完成log或动画。当 <span style="font-family: 'Courier New', 'Andale Mono', monospace;">ftudone 或者 </span><span style="font-family: 'Courier New', 'Andale Mono', monospace;">ftuskip </span>运行时会将logo隐藏。 包含在 <code>init_logo_handler.js 中的</code> <code style="font-style: normal;">_appendCarrierPowerOn</code> 方法表示了如何通过监听<span style="font-family: 'Courier New', 'Andale Mono', monospace;">DOMContentLoaded</span>事件来启动动画或启动logo。<code>logoLoader</code> 方法则在 <code>logo_loader.js 中定义。</code></p> -<pre class="brush: js">var self = this; -document.addEventListener('DOMContentLoaded', function() { - self.carrierLogo.appendChild(self.logoLoader.element); - self._setReady(); -});</pre> -<p>一旦准备好 logo, 系统会调用 <code>_setReady()</code> 方法, 在方法中会建立一个监听器来监听特殊的 <code>mozChromeEvent事件，这个事件会带有</code> <code>system-first-paint</code> 类型，表示系统系统已经准备好向屏幕绘图。</p> -<pre class="brush: js">var elem = this.logoLoader.element; - ... -window.addEventListener('mozChromeEvent', function startVideo(e) { - if (e.detail.type == 'system-first-paint') { - window.removeEventListener('mozChromeEvent', startVideo); - if (elem &amp;&amp; elem.ended === false) { - elem.play(); - } - } -});</pre> -<p>此时图形元素开始运行。一旦启动 <code>ftuopen</code> 或 <code>ftuskip</code> 事件， <code>init_logo_handler.js</code> 会调用默认的 <code>handleEvent()</code> 方法反过来触发 <code>animate()</code> 方法来以淡出的效果隐藏动画。</p> -<pre class="brush: js">init: function ilh_init(logoLoader) { - window.addEventListener('ftuopen', this); - window.addEventListener('ftuskip', this); - ... -}, - -handleEvent: function ilh_handleEvent() { - this.animate(); -},</pre> -<h3 id="关机动画">关机动画</h3> -<p>当系统准备就绪时，长按电源(power)按键，会触发定义在 <code style="font-style: normal;">hardware_button.js 文件中的 </code><code>holdsleep</code> 事件。 <code style="font-style: normal;">hardware_button.js 文件会处理所有“物理按键点击“的事件，包括电源（休眠）键，home键，音量增/减键等。</code></p> -<pre class="brush: js">HardwareButtonsSleepState.prototype.enter = function() { - this.timer = setTimeout(function() { - / * When the user holds Sleep button more than HOLD_INTERVAL. */ - this.hardwareButtons.publish('holdsleep'); - this.hardwareButtons.setState('base'); - }.bind(this), this.hardwareButtons.HOLD_INTERVAL); -};</pre> -<p>关机动画是由 <code>sleep_menu.js 处理的</code>;这个脚本文件会监听 <code>holdsleep</code> 事件，并且当它触发时会显示菜单对话框。</p> -<pre class="brush: js">init: function sm_init() { - ... - window.addEventListener('holdsleep', this.show.bind(this)); - ... -}</pre> -<p>如果用户通过重启和关机菜单选项选择关机，会触发 <code>startPowerOff()</code> 方法， 它反过来会触发 <code>LogoLoader()</code> 函数来对关机动画进行处理。</p> -<pre class="brush: js">handleEvent: function sm_handleEvent(evt) { - switch (evt.type) { - case 'click': - ... - this.handler(action); - break; - ... - } -} - -handler: function sm_handler(action) { - switch (action) { - ... - case 'restart': - this.startPowerOff(true); - break; - - case 'power': - this.startPowerOff(false); - break; - ... - } -}</pre> -<h2 id="System_的功能">System 的功能</h2> -<p> System app 会负责许多功能和任务, 你可能还会对能在其职权范围内找到而惊讶。系统应用负责的范围包括：状态栏（ statusbar）和 实用工具盘管理（utility tray management）， SIM卡锁（SIM lock）， 更新管理（update manager）， 主屏幕启动（homescreen launcher），webapp 窗口管理（webapp window） 等。 本节会对System 提供的一些最重要的功能进行探究。</p> -<h3 id="状态栏（Statusbar）和实用工具盘（utility_tray）">状态栏（Statusbar）和实用工具盘（utility tray）</h3> -<p>系统状态栏和下拉菜单 (Gaia 通常称之为 <em>utility tray</em>; Android 称之为<em> notification bar</em>) 是由 <code>statusbar.js</code> 和 <code>utility_tray.js </code>来处理的。 在应用的 <code>index.html 中，状态栏条目是在</code> <code><div id="statusbar" data-z-index-level="statusbar"></code> 中定义的，而实用工具盘条目在下面的结构中定义：</p> -<pre class="brush: html"><div id="utility-tray" data-z-index-level="utility-tray"> - <div id="notifications-container"> - ... - </div> -</div></pre> -<p>实用工具盘（utility tray）中会有一些特殊的面板，如更新管理器，紧急回调管理器，存储监视通知，媒体播放通知和控制，蓝牙传输状态，按键输入法(IME)切换。与之相关联的处理程序和样式放置在 <code>js</code>/ 和<code>style/</code> 文件夹中。</p> -<h3 id="特殊的应用launcher">特殊的应用launcher</h3> -<p>System app 有三个特殊的launchers, 在需要时会调用单独的web应用程序。</p> -<ul> - <li>主屏幕启动器 : Homescreen 应用在运行时，当用户按下 Home 按钮，webapp 崩溃或者使用其他方式退出webapp时，都会显示主屏幕。</li> - <li>锁屏启动器: 运行 lockscreen 应用时， 每次当用户打开屏幕时都会显示锁屏界面。</li> - <li> FTU 启动器: 运行FTU 体验应用。这个应用只会在用户使用一个全新的 FirefoxOS设备（或者将设备恢复到出厂模式）时运行一次。而且 FTU webapp不会允许用户点击Home按键退出这个应用。</li> -</ul> -<h3 id="锁屏">锁屏</h3> -<p>Lockscreen app 的主要入口文件是 <code>system/js/lockscreen.js</code>。用户可以在这个界面解锁，启动相机以及音乐播放器。</p> -<h3 id="紧急拨号器">紧急拨号器</h3> -<p>紧急拨号器的代码是在 <code>gaia/apps/system/emergency-call/</code> 文件夹下的。 它是拨号应用的简化版本，允许用户可以访问 <a href="#SIM_PIN_unlock_dialog">SIM PIN unlock dialog</a> 实现紧急拨号服务。</p> -<h2 id="全系统（System-wide）UI">全系统（System-wide）UI</h2> -<p>System应用会处理绝大多数的全系统（system-wide） UI， 其中大部分包括的是一些对话框，如音量警告对话框，SIM PIN解锁对话框，小区广播(cell broadcast)对话框，还包括一些影响窗口行为的UI元素，如 software home按键。</p> -<h3 id="z-index_level">z-index level</h3> -<p>在System 应用的 <code>index.html</code> 文件中,许多组件都带有 <code>data-z-index-level</code> 属性，例如</p> -<pre class="brush: html"><div id="sleep-menu" data-z-index-level="sleep-menu"> - ... -</div></pre> -<p>对应 z-index-levels 定义在 <code>system/style/zindex.css 文件中，如</code></p> -<pre class="brush: css">#screen > [data-z-index-level="sleep-menu"] { - z-index: 65536; -} - -... - -#screen > [data-z-index-level="app"] > .appWindow { - z-index: 3; -}</pre> -<p>z-index 设置是根据元素在屏幕上显示的顺序进行排列的 — 如果元素需要在视觉层次中比较高的元素数值也会较高。这就是System app在基本水平上窗口管理的方式。 </p> -<h3 id="software_home_按键">software home 按键</h3> -<p> software home 按键是 home按键的一种替代，会在缺少物理 home按键的情况下自动启动。例如在 Nexus 4 中。 要控制它的外观，Gecko提供了一个专有的媒体功能称为 <code>-moz-physical-home-button，</code> 它能够在媒体查询时使用基于硬件Home按键的外观。 如果需要，窗口管理会为 <code>software home</code>按键分配一些屏幕的空间。</p> -<p>在 <code>system/style/window.css</code> (以及许多其他的系统样式文件中), 可以看到</p> -<pre class="brush: css">@media not all and (-moz-physical-home-button) { - #screen:not(.software-button-disabled) > #windows > .appWindow { - bottom: 5rem; - } - }</pre> -<h3 id="Home_手势_(从屏幕底部向上滑动)">Home 手势 (从屏幕底部向上滑动)</h3> -<p>home 手势是另外一个硬件home按键的替代；它可以在 <a href="/en-US/Firefox_OS/Debugging/Developer_settings">开发者设置</a> 中使能，而控制代码在 <code>system/js/home_gesture.js 文件中。例如，这个手势涉及到从屏幕底部清扫，可以用来关闭应用。</code></p> -<p>这个手势能够在 Firefox OS 平板设备中自动使能。 而 <code>gaia/shared/js/screen_layout.js</code> 是专门用于检测设备是否是平板的。</p> -<h3 id="音量警告对话框">音量警告对话框</h3> -<p>在 <code>system/js/sound_manager.js</code>. 中包含控制音量警告对话框的代码。如果下面所有条件都满足，则会弹出音量警告对话框：</p> -<ul> - <li>耳机已插入设备</li> - <li>已超过最大音量限值 85dB </li> - <li>声道音频中有内容播放</li> -</ul> -<h3 id="SIM_PIN_解锁对话框">SIM PIN 解锁对话框</h3> -<p>控制SIM PIN 解锁对话框的代码在 <code>system/js/simcard_dialog.js 中</code> — 当Passcode lock选项使能时，对话框会在锁屏界面显示。开放的应用必须要在 <code style="font-style: normal;">manifest.webapp</code> 中包含 telephony 权限中（System app中含有该权限）。</p> -<div class="note"> - <p><b>注意</b>: 当手机在飞行模式时，不会显示SIM PIN 解锁对话框</p> -</div> -<p> </p> diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/window_management/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/window_management/index.html deleted file mode 100644 index c0871e3130..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/gaia_apps/window_management/index.html +++ /dev/null @@ -1,279 +0,0 @@ ---- -title: 窗口管理（Window Management） -slug: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Window_Management -translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Window_Management ---- -<div class="summary"> - <p><span class="seoSummary">一般来说，window manager 是应用的一部分，会在图形用户界面中控制窗口的放置和外观。本文会对Firefox OS是如何进行窗口管理的内容进行探究。</span></p> -</div> -<p>Firefox OS中， Window Management是System app的一部分，主要负责：</p> -<ul> - <li>App的生命周期以及app之间的交互。 </li> - <li>UI 元素的布局，调整，显示及动画/切换</li> - <li>全系统的UI逻辑，包括 web activities, app 消息, 以及任务管理（task manager）</li> - <li>App-指定的UI特性如弹出框，情景菜单和错误页面。 </li> -</ul> -<p>在深入理解上述条目的细节前，让我们来看下应用是如何在Gaia内部启动的。 </p> -<h2 id="App在Gaia中的启动">App在Gaia中的启动</h2> -<p>app在 Firefox OS 中的启动有几种方式，例如，通过其他app的系统消息，或者在HomeScreen中点击app图标等。 </p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7709/app-launch-flow.png" style="width: 728px; height: 414px; display: block; margin: 0px auto;"></p> -<p>控制app开启的事件是由 Gecko引擎和 System App 处理的，下面会有详细阐述。</p> -<h3 id="App_结构">App 结构</h3> -<p>所有的 Gaia webapps 都是 <a href="/en-US/Marketplace/Publishing/Packaged_apps">packaged apps</a>，它们都是基本的zip文件，其中会包含所有的应用程序文件： HTML, CSS, JavaScript, images, manifest, 等等。每个在 Gaia 中的 web 应用都会以下面 的基本结构进行组织： </p> -<div class="code-block"> - <div class="highlight"> - <pre><code class="brush: bash">apps</code><code class="o">/</code><code class="p">[</code><code class="n">app</code> <code class="n">name</code><code class="p">]</code><code class="o">/</code> - <code class="o">-</code> <code class="n">js</code> - <code class="o">-</code> <code class="n">styles</code> - <code class="o">-</code> <code class="n">locales</code> - <code class="o">-</code> <code class="n">test</code> - <code class="o">-</code> <code class="n">index</code><code class="p">.</code><code class="n">html</code> - <code class="o">-</code> <code class="n">manifest</code><code class="p">.</code><code class="n">webapp</code> -</pre> - </div> -</div> -<p><img alt="" src="https://mdn.mozillademos.org/files/7497/app_load_process.png" style="width: 2262px; height: 1979px; margin: 0px auto; display: block;"></p> -<p>当一个内嵌的Gaia app 从 homescreen 启动时，Gecko 会试图打开 URL 地址 <code>manifest://[app name].gaiamobile.org:8080， 解析对应的</code> <code>manifest.webapp</code> 文件，之后运行文件中 <code>launch_path </code>指定的文件 — 在所有内嵌 webapp中都是 <code>index.html</code> 。<code>index.html</code> 文件会加载所有需要的样式和 JavaScript。</p> -<div class="note"> - <p><b>注意 </b>: 此处有一个非正式的约定，Gaia app的主要 js 入口点一般是 <code>[app name].js</code> 或 <code>main.js</code>.</p> -</div> -<h3 id="App启动次序">App启动次序</h3> -<p>启动事件会发给Gecko。一旦 Gecko 准备就绪， <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/app_window_factory.js">system/js/app_window_factory.js</a> 文件中的 <code>AppwindowFactory</code> 就会收到一个 app的 <code>webapps-launch</code> 事件或一个用于处理挂起消息的 <code>open-app </code>事件。</p> -<pre class="brush: js">window.addEventListener('applicationready', function appReady(e) { - window.removeEventListener('applicationready', appReady); - window.addEventListener('webapps-launch', self); - window.addEventListener('webapps-close', self); - window.addEventListener('open-app', self); -});</pre> -<p><span style="background-color: #ffff00;">关于 handleEvent 动作的细节， </span><code><span style="background-color: #ffff00;">this.launch(config)</span></code><span style="background-color: #ffff00;"> 会启动一个 app window 或 activity。一旦app关闭， </span><code><span style="background-color: #ffff00;">Appwindow</span></code><span style="background-color: #ffff00;"> 会收到 </span><code><span style="background-color: #ffff00;">webapps-close</span></code><span style="background-color: #ffff00;"> 事件。</span></p> -<p>主进程中的 <code>launch()</code> 方法如下：</p> -<pre class="brush: js">var app = AppWindowManager.getApp(config.origin); -if (app) { - app.reviveBrowser(); -} else if (config.origin !== homescreenLauncher.origin) { - new AppWindow(config); -} else if (config.origin == homescreenLauncher.origin) { - homescreenLauncher.getHomescreen().ensure(); -}</pre> -<p>首先，会检查 app 变量是否存在并试图到Gecko 中恢复app的运行。否则，如果是常规的app，我们会创建一个关于 app 的 <code>AppWindow</code> 实例。另一个特殊的情况是 <code>homescreenLauncher</code> — 此时我们会执行一些必要的操作。</p> -<h3 id="AppWindow">AppWindow</h3> -<p>Firefox OS 会使用专门的 <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Browser">mozBrowser API</a> 使 web 页面看起来像一个 app。 窗口管理的核心只是使用 <code>mozBrowser</code> API 封装来处理 内部的 iFrames (窗口)。之所以创建这个特殊的 <code>moz-browser</code> 类型，主要是为了使iFrame 看起来更像一个真实的浏览器窗口。</p> -<p><code>AppWindow</code> 可以创建，容纳以及管理 <code>mozBrowser</code> iFrame。<code>AppWindow</code> 可以操控所有由 <code>mozBrowser</code> iFrame 本身触发的 <code>mozBrowser</code> 事件并且还可以显示相关的UI特性。</p> -<h2 id="App_生命周期管理">App 生命周期管理</h2> -<p>app整个的生命周期如下：</p> -<ul> - <li>App launch</li> - <li>将 iframe 添加到 System DOM tree中</li> - <li>Start App 开启动画</li> - <li>App opened</li> - <li>App close 动画</li> - <li>App closed</li> - <li>从 DOM tree 中移除 iframe</li> - <li>App terminated</li> -</ul> -<h3 id="启动_app">启动 app</h3> -<p>当用户点击 homescreen 上的应用图标时，homescreen 会使用 <a href="/en-US/docs/Web/API/Navigator.mozApps">mozApps API</a> 来通知 Gecko 引擎打开对应的app。当Gecko 准备就绪时，它会发送一个适当的事件给 system app。</p> -<h3 id="Killing_apps">Killing apps</h3> -<p>在下面情况下，App 将会被 kill 掉：</p> -<ul> - <li>app crashes</li> - <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Debugging_OOMs#Process_priorities">OOM killer</a> kills it</li> - <li>app 由任务管理器关闭</li> - <li><code>window.close()</code> 被调用</li> -</ul> -<p>对于活动的应用程序而言，在关闭动画后，被 kill app 的 iFrame 就会从 DOM tree中移除。 对于不活动的应用程序，在它们被kill 后， 对应的 iframe 就会立刻移除。</p> -<p>在下面情况下，Apps 会被中断：</p> -<ul> - <li>对于web activities来说: 当activity 调用者被打开时</li> - <li>弹出框 (Popups): 当 window.open 调用者被打开时</li> - <li>App: 不做任何事情时</li> -</ul> -<h3 id="重启_app">重启 app</h3> -<p>在下面情况下， Apps 会被重启：</p> -<ul> - <li>homescreen app: 当按下 home 键时</li> - <li>如果是从任务管理器打开或通过边缘手势滑动(正在实验中的功能)，Zombie apps 会通过同样的URL复活，</li> -</ul> -<h2 id="app是如何被渲染的">app是如何被渲染的</h2> -<p>在启动一个app时，屏幕会分为下面几部分：</p> -<ul> - <li>System header</li> - <li>App iframe</li> - <li>底部包装栏 (如果在浏览器框架模式下)</li> -</ul> -<p><img alt="" src="https://mdn.mozillademos.org/files/7711/app-window-layout.png" style="width: 393px; height: 348px; display: block; margin: 0px auto;"></p> -<h3 id="App_布局">App 布局</h3> -<p>应用 iframe 的主要容器如下：</p> -<pre class="brush: html"><iframe id="browser2" mozallowfullscreen="true" mozbrowser="true" remote="true"... -... src="", data-url="" data-frame-type="window" data-frame-origin="..."> -</iframe></pre> -<p>iframe 中包括：</p> -<ul> - <li>启动路径(<code>data-url</code>, <code>data-frame-origin</code>)</li> - <li>mozbrowser iframe 属性 (<code>mozallowfullscreen="true"</code>, <code>mozbrowser="true"</code>)</li> - <li>容器，覆盖视窗，app指定UI</li> -</ul> -<h3 id="调整_AppWindow大小">调整 AppWindow大小</h3> -<p>AppWindow 会在下面几种情况下被调整：</p> -<ul> - <li> system app 只有在转屏时才会调整大小。</li> - <li>对于一般的 app, 在下列情况下会调整大小： - <ul> - <li>system app 调整大小</li> - <li>keyboard 开启/关闭 动画结束时</li> - <li>状态栏变化时</li> - <li><code>window.resizedBy()</code> 或 <code>window.resizeTo()</code> 被调用时</li> - <li>software home 按钮被选中时</li> - </ul> - </li> -</ul> -<p><img alt="" src="https://mdn.mozillademos.org/files/7713/app-area.png" style="width: 715px; height: 305px; margin: 0px auto; display: block;"></p> -<p>总之，屏幕的大小会受到下面要素的影响：</p> -<ul> - <li>Orientation 状态</li> - <li>Keyboard 状态</li> - <li>AttentionScreen 状态 (被呼叫，有短信等)</li> - <li>Chrome 导航状态</li> - <li>全屏状态 <code>manifest.fullscreen</code> / <code>parentWindow</code></li> - <li>Software homebutton 状态</li> -</ul> -<p><img alt="" src="https://mdn.mozillademos.org/files/7715/app-area2.png" style="width: 687px; height: 330px; margin: 0px auto; display: block;"></p> -<h3 id="AppWindow_方向">AppWindow 方向</h3> -<p>app 的方向可以由每个单独的app或由系统全局控制。您可以在 <code>manifest.webapp</code> 中使用 <code>orientation</code> 属性来设置方向。例如</p> -<pre class="brush: json">"orientation": "default",</pre> -<p>您也可以使用orientation API 来锁定和解锁方向：</p> -<pre class="brush: js">screen.mozLockOrientation([‘portrait-primary’]); - -screen.mozUnlockOrientation();</pre> -<p>可以用下面的属性值来强制对方向进行设定：</p> -<ul> - <li><code>default</code>: 系统默认方向</li> - <li><code>portrait</code>: 强制屏幕竖直方向显示</li> - <li><code>landscape</code>: 强制屏幕横向显示</li> -</ul> -<p>要获取更多的细节，请参考 <a href="/en-US/docs/Web/API/Screen.lockOrientation">Screen.lockOrientation</a> , 您也可以在 <a href="https://github.com/mozilla-b2g/gaia/blob/master/test_apps/uitest/js/API/orientation.js">gaia/test_apps/uitest/js/API/orientation.js</a>. 查看设定的实例。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7717/app-orientation.png" style="width: 745px; height: 530px; margin: 0px auto; display: block;"></p> -<h3 id="App_可见性">App 可见性</h3> -<p>只有当关掉屏幕时， System app 才会到后台；而正常的 app 到后台要依赖下面几个因素：</p> -<ul> - <li>Audio competing</li> - <li>Process policy</li> - <li>Rendering</li> -</ul> -<div class="note"> - <p><strong>注意</strong>: 当父 iframe 页面非活动时，页面可见性会被继承。</p> -</div> -<p>在下面情况下，APP通常会在前台运行：</p> -<ul> - <li>启动动画开始时</li> - <li>滑动（Swipe-in）动画结束时</li> - <li>锁屏界面被解锁时</li> -</ul> -<p>下面情况下，App 通常会在后台运行：</p> -<ul> - <li>关闭动画结束时</li> - <li>呼叫屏幕(callscreen)显示3秒之后</li> - <li>屏幕关闭时</li> -</ul> -<p>对上面的规则而言，有一些意外的情况：</p> -<ul> - <li>在正常渠道下，伴有音频播放的Active app</li> - <li>Apps 调用内嵌的 web activities</li> - <li>Apps 打开 <code>window.open('', '', 'dialog')</code></li> -</ul> -<div class="note"> - <p><strong>注意</strong>: 此处的 Active app 是指当前正在前台运行的应用；而 inactive app是指挡在后台运行的应用（界面不可见）。</p> -</div> -<h3 id="AppWindow_动画和过渡">AppWindow 动画和过渡</h3> -<p>为了让用户获得更顺畅的使用体验，Gaia 的窗口管理器(Window Manager)也会提供 app window 动画和过渡效果。</p> -<p> AppWindow 动画和过渡效果是由下面的状态来管理的：</p> -<ul> - <li><code>displayedApp</code> — 当前的 App</li> - <li><code>runningApps</code> / <code>numRunningApps</code> — 运行的app集合</li> - <li><code>openFrame</code> / <code>closeFrame</code> — 打开/关闭动画的过渡框架</li> -</ul> -<p>在调用 <code>setDisplayedApp()</code> 方法时, app 会通过下图中列出的状态来启动。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7719/app-animations-state-manchine.png" style="width: 704px; height: 358px; display: block; margin: 0px auto;"></p> -<p>在控制 Firefox OS app动画流程时，有下面几个技巧：</p> -<ul> - <li>在 app opened 之前，我们要确认它已经从后台状态中恢复。 我们通常会取一个 1 x 1 截屏来进行重绘。</li> - <li>在 app 准备好 opened 时， 我们会同时执行当前 app 关闭的动画和下一个 app 启动的动画。</li> - <li>在 app opening 和 closing 期间，我们会运行代码对转屏进行锁定和解锁。</li> - <li>仅仅当 app resized 一次之后， 在 opening 时，我们才会运行代码执行 app resize 操作；否则，我们会忽略 resizing 步骤。</li> - <li>我们在改变页面的可见性时，会再次使用 1 x 1 截屏（请看上面）。</li> -</ul> -<p><img alt="" src="https://mdn.mozillademos.org/files/7721/app-switching-flow.png" style="width: 530px; height: 258px; display: block; margin: 0px auto;"></p> -<h2 id="AppWindow_特定UI">AppWindow 特定UI</h2> -<p>有一些特定的 UI 元素只和特定的 app 相关，如 Browser chrome, modal dialogs, context menus, popups, 以及 error pages.</p> -<p>下面让我们来讨论下。</p> -<h3 id="弹出框（Modal_dialogs）">弹出框（Modal dialogs）</h3> -<p>在 desktop Firefox 中,，如果您启动了浏览器开发面板， 在其中输入如 <code>alert()</code>, <code>confirm()或</code> <code>prompt()</code> 等命令，就会在屏幕中心弹出一个对话框，并遮盖了下面的内容。Firefox OS 中的 modle dialogs 和这个效果是相同的。<br> - <br> - <img alt="" src="https://mdn.mozillademos.org/files/7723/modal-dialogs.png" style="width: 715px; height: 357px; margin: 0px auto; display: block;"></p> -<h3 id="快捷菜单（Context_menu）对话框">快捷菜单（Context menu）对话框</h3> -<p>移动开发者都会非常熟悉 快捷菜单(或长按菜单)。一般在设计app时，为了使用户能够更简便的使用 app，最常用的用户动作应该是对用户可见的。我们可以将一些无法直接放置在UI上，但又经常使用的动作放在快捷菜单中。<br> - <br> - <img alt="" src="https://mdn.mozillademos.org/files/7725/context-menu-dialogs.png" style="width: 722px; height: 360px; display: block; margin: 0px auto;"></p> -<h3 id="授权（Authentication）_(https)_对话框">授权（Authentication） (https) 对话框</h3> -<p>定义在 <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/app_authentication_dialog.js">system/js/app_authentication_dialog.js</a> 文件中。</p> -<h3 id="值选择，时间，日期对话框">值选择，时间，日期对话框</h3> -<p>定义在 <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/system/js/value_selector">system/js/value_selector/</a>.</p> -<h3 id="权限对话框">权限对话框</h3> -<p>定义在 <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/permission_manager.js">system/js/permission_manager.js</a> 和 <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/media_recording.js">system/js/media_recording.js</a> 文件。</p> -<h2 id="特定应用">特定应用</h2> -<p>有些应用需要一个特殊的 <code>appWindow</code> 对象来处理它们包含的特定功能。其中包括：</p> -<ul> - <li>Homescreen</li> - <li>FTU</li> - <li>Keyboard</li> - <li>Cost control</li> - <li>Secure camera</li> - <li>Lockscreen</li> -</ul> -<h2 id="子窗口管理">子窗口管理</h2> -<p>子窗口是由 其他 app/pages 直接或间接打开的。如：</p> -<ul> - <li>Attention window</li> - <li>Popup window</li> - <li>Activity window</li> - <li>Trusted UI / Trusted window</li> -</ul> -<p>当子窗口被正常终止时，它的父窗口应该被重新打开。有些自窗口可会也会包含其他的子窗口。父窗口与子窗口间进程优先级的管理也是一个问题。</p> -<h2 id="视窗(Attention_Window)">视窗(Attention Window)</h2> -<p>Attention Windows 用来获取用户的注意力：</p> -<ul> - <li>拨号界面 — dialer</li> - <li>时钟界面 — clock</li> - <li>权限确认界面</li> -</ul> -<p>当前这些 attention window 都是被强制使用的默认方向(竖向优先)。</p> -<h2 id="委托（Trusted)_UI">委托（Trusted) UI</h2> -<p>Persona 和 mozPay API 使用的时委托 UI。它们使用特定的尺寸sizing: 80% 显示。在 trusted UI 运行时Homescreen是部分显示的。<br> - <br> - <img alt="" src="https://mdn.mozillademos.org/files/7727/trusted-ui.png" style="width: 737px; height: 516px; display: block; margin: 0px auto;"></p> -<h2 id="历史记录管理_（History_Management）">历史记录管理 （History Management）</h2> -<p>本节我们会讲解一些可以在 Firefox 中管理历史记录的组件。</p> -<h3 id="任务管理器">任务管理器</h3> -<p>任务管理器 Task manager (card 视图) 可通过长按 home 按钮触发。它会显示设备上的app历史，此时可以动态的kill一个app。</p> -<h3 id="Web_activity_处理">Web activity 处理</h3> -<p>内嵌 Activities 会创建一个新的引用页面为 activity 提供数据。<br> - <br> - Window Activities 会重复使用已存在的app window 来反映 acitivity 数据。</p> -<h3 id="边缘手势_(测试中)">边缘手势 (测试中)</h3> -<p>这个测试的边缘手势动能在 Firefox 2.0+ 开发模式版本才存在，它会允许您使用手动滑动 设备的 右/左边缘来在app和web页面之间切换。</p> -<h4 id="How_is_the_next_app_to_display_chosen">How is the next app to display chosen?</h4> -<ul> - <li>Child window of the active app</li> - <li>Launch time is newer</li> - <li>Find the head window of the next app stack</li> -</ul> -<h4 id="How_is_the_previous_app_chosen">How is the previous app chosen?</h4> -<ul> - <li>Parent window of the active app</li> - <li>Launch time is older</li> - <li>Find the rear window of the previous app stack</li> -</ul> -<h3 id="截屏管理">截屏管理</h3> -<p>截屏工具会被 任务管理器（卡片视图）所使用，来显示历史记录中的app。当app 关闭动画结束时， 就会获取到一个app的屏幕截图。</p> -<h2 id="参考">参考</h2> -<p><a href="http://alivedise.github.io/blog/2013/02/23/from-browser-to-browser/">From Browser to Browser</a></p> diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/hacking/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/hacking/index.html deleted file mode 100644 index 6c3633a7a5..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/hacking/index.html +++ /dev/null @@ -1,542 +0,0 @@ ---- -title: Hacking Gaia -slug: Archive/B2G_OS/Platform/Gaia/Hacking -translation_of: Firefox_OS/Developing_Gaia ---- -<div class="warning"> -<p>该页面是为Gaia开发者写的。如果您在寻找关于如何编译和运行Firefox OS 的信息，可以参考 <a href="/zh-CN/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="/zh-CN/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS page</a> .</p> -</div> - -<div class="summary"> -<p><span class="seoSummary">Gaia 是<a href="https://developer.mozilla.org/apps" rel="nofollow">web apps</a> 的集合，并且由它组合成 <a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox_OS">Firefox OS</a>的前端. 在Firefox OS 屏幕上看到的都是由Web技术构建的。其中包括主屏幕和所有的原生app。本文则提供了修改Gaia代码的详细说明。</span></p> -</div> - -<h2 id="获取源码">获取源码</h2> - -<p>要获取Gaia的源码, <a href="https://github.com/mozilla-b2g/gaia" title="https://github.com/mozilla-b2g/gaia">fork us on GitHub</a> 并且使用 <a href="http://git-scm.com/" title="http://git-scm.com/">git</a> 将您fork的代码clone到本地。</p> - -<pre>$ git clone https://github.com/mozilla-b2g/gaia.git</pre> - -<h2 id="运行Gaia">运行Gaia</h2> - -<p>有三种方式可以运行Gaia，分别是在桌面，火狐浏览器或者兼容的移动设备。</p> - -<h3 id="B2G_桌面">B2G 桌面</h3> - -<p>B2G 桌面是在Firefox OS设备上运行应用程序的桌面版本，您可以使用它在电脑桌面上运行Gaia。</p> - -<p>您可以从<a href="http://nightly.mozilla.org/">Firefox Nightly站点</a>上下载<a href="http://nightly.mozilla.org/#Desktop%20Boot2Gecko">B2G桌面的nightly版本</a>。其中有关于Linux (32位 and 64 位), Mac OS X 以及 Windows的版本.</p> - -<p>Nightly 版本都会对近期的gaia版本打包。一旦您下载完成压缩包，只需要解压到文件夹中，并从解压到的文件夹中运行b2g二进制文件就可以了。 </p> - -<pre>$ cd b2g -$ ./b2g</pre> - -<p>如果您出于开发的目的来运行带有指定版本Gaia的B2G， 则需要从您clone的代码位置构建一个配置文件：</p> - -<pre>$ cd /path/to/gaia -$ DEBUG=1 DESKTOP=0 make</pre> - -<p>上面的命令会在<code>gaia</code> 生成一个名称为<code>profile</code>的文件夹。 <code>DEBUG选项会将</code> Gaia 作为托管的应用在内置的Web服务器上运行，而不是在每次更改后都需要重新打包的原生应用。在运行上面的命令后，您可以在最后的输出行中找到配置文件夹的路径，大体是 </p> - -<pre>Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile</pre> - -<p>之后则可以指定配置文件来运行B2G。</p> - -<pre>$ ./b2g /path/to/gaia/profile</pre> - -<p>您用可以从源码中编译出自身的B2G桌面。</p> - -<div class="note"> -<p><strong>注意 :</strong> 在 Mac OS X, <code>b2g</code> 二进制文件会存在于 B2G.app.您需要运行下面命令:</p> - -<p><code>./B2G.app/Contents/MacOS/b2g /path/to/gaia/profile</code></p> -</div> - -<h3 id="在Firefox中运行Gaia">在Firefox中运行Gaia</h3> - -<p>也可以在Firefox内部运行Gaia。这种方式会让您的开发周期大大缩短，同时也可以使用标准的web开发工具和调试器。 可以参考<a href="/zh-CN/docs/Mozilla/Firefox_OS/Developing_Firefox_OS/Quickstart_guide_to_Gaia_development">Gaia开发快速指南</a> 获取更多的信息.</p> - -<h3 id="在设备上运行Gaia">在设备上运行Gaia</h3> - -<p>如果您有一个兼容的移动设备，也可以使用Firefox OS 烧机来运行Gaia。您可以参考<a href="/zh-CN/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">编译和安装Firefox OS </a>获取更多信息. 我们也有关于<a href="/zh-CN/docs/Mozilla/Firefox_OS/Platform/Testing">如何测试Firefox OS</a>的文章。</p> - -<h2 id="单元测试">单元测试</h2> - -<p>参考<a href="/zh-CN/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">Gaia单元测试</a> 来获取如何创建和在Gaia层运行单元测试的文章。</p> - -<h2 id="提交bug">提交bug</h2> - -<p>在Bugzilla的 <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Firefox OS&component=Gaia&resolution=---" rel="nofollow">Firefox OS > Gaia</a> 中提交bug。在<a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox_OS">Gaia组件</a> (或者是子组件)中提交bug.</p> - -<h2 id="为_Gaia做贡献">为 Gaia做贡献</h2> - -<p>Mozilla依赖开源社区的贡献，以帮助开发Gaia应用，我们也希望您能参与进来。</p> - -<p>我们可以从一些非常好的网址来发现一些bug：</p> - -<ul> - <li><a href="https://bugzilla.mozilla.org/buglist.cgi?quicksearch=component:gaia%20sw:polish%20@nobody;list_id=4566236" rel="nofollow">Unowned Gaia polish bugs on Bugzilla</a></li> - <li><a href="http://www.joshmatthews.net/bugsahoy/?b2g=1" rel="nofollow">Mentored bugs</a></li> -</ul> - -<h3 id="编码风格基本知识">编码风格基本知识</h3> - -<ul> - <li>背景： - <ul> - <li><a href="/zh-CN/docs/Developer_Guide/Coding_Style#General_practices" title="Developer_Guide/Coding_Style#General_practices">Coding Style: General practices</a></li> - <li><a href="/zh-CN/docs/Developer_Guide/Coding_Style#JavaScript_practices" title="Developer_Guide/Coding_Style#JavaScript_practices">Coding Style: JavaScript practices</a></li> - <li><a href="/zh-CN/docs/Developer_Guide/Coding_Style#Naming_and_formatting_guide" title="Developer_Guide/Coding_Style#Naming_and_formatting_guide">Coding Style: Naming and formatting guide</a></li> - </ul> - </li> - <li>Make sure HTML files are declared <code><!DOCTYPE html></code> (that is, as HTML5 documents). If you don't, Internet Explorer 9 and later will load them in compatibility mode.</li> - <li>Include the <code>"use strict";</code> statement (just like that, including the quotes) to the top of your JavaScript files to put them into strict mode.</li> - <li>Always use two spaces for indentation, rather than tabs.</li> - <li>Please use line breaks to separate logical bits of code!</li> - <li>Multi-word file names should use the "underscore" character to separate words, <code>like_this.js</code>.</li> - <li>Use single quotes instead of double quotes for strings.</li> -</ul> - -<h4 id="Additional_rules">Additional rules</h4> - -<p>Bad:</p> - -<pre>if (expression) doSomething(); -</pre> - -<p>Correct:</p> - -<pre>if (expression) { - doSomething(); -} -</pre> - -<p>If you're working on the system app, check out the guidance listed <a href="https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ" title="See_here_for_some_rules._https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ">here</a>.</p> - -<p>Before submitting a patch we recommend you run <a href="https://developers.google.com/closure/utilities/docs/linter_howto" title="http://closure-linter.googlecode.com/svn/trunk/closure_linter/gjslint.py">gjslint</a> on it to check for any style errors:</p> - -<pre>gjslint --nojsdoc my_file.js</pre> - -<h3 id="提交一个_patch">提交一个 patch</h3> - -<p>First file or assign a bug to yourself on <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Firefox OS&component=Gaia&resolution=---" title="https://bugzilla.mozilla.org/buglist.cgi?product=Firefox OS&component=Gaia&resolution=---">Bugzilla</a>, you'll need a Bugzilla account.</p> - -<p>Then create a branch on your fork of Gaia:</p> - -<pre>$ git branch branchname -$ git checkout branchname</pre> - -<p>Commit your changes:</p> - -<pre>$ git add /file/to/add -$ git commit -m "Bug XXXXX - Fix the broken Gaia and save the world"</pre> - -<p>Push your branch:</p> - -<pre>$ git push origin branchname</pre> - -<p>Send a pull request by navigating to the branch in your fork on GitHub and finding the pull request button.</p> - -<div class="note"> -<p><strong>Note</strong>: Except under unusual circumstances, patches should be landing first on the master branch, not a release branch like v1-train, v1.3, etc. If they need to land on a release branch, they must go through the usual approval process as outlined on the <a href="https://wiki.mozilla.org/Release_Management/B2G_Landing">B2G Landing wiki page</a>.</p> -</div> - -<p>To request a review of your patch, <a href="http://globau.wordpress.com/2013/10/21/github-pull-requests-and-bugzilla/">attach the pull request</a> to the bug in Bugzilla by referencing the URL of the pull request, and set the review ("r") flag to "?" and enter the bugzilla ID of one of the <a href="https://wiki.mozilla.org/Modules/FirefoxOS" title="https://wiki.mozilla.org/Modules/FirefoxOS">module owners and peers</a> (very important - otherwise your bug will not likely be seen by anyone). The <a href="https://addons.mozilla.org/zh-CN/firefox/addon/github-tweaks-for-bugzilla/" title="https://addons.mozilla.org/zh-CN/firefox/addon/github-tweaks-for-bugzilla/">Github tweaks for bugzilla extension on AMO</a> can help automate this process by automatically creating the attachment and adding it to the bug; you will still need to set the review flag on Bugzilla.</p> - -<p>The reviewer may ask you to make some changes; you may need to amend the original commit and force push it to the original branch/pull request. Once they're happy with your patch, they will merge it into the master branch for you. Before they do this they would prefer it if you could squash all your changes into a single commit, so your contribution can be tracked easily.</p> - -<p>The person who merges the commit (usually the reviewer) would add a <code>r=</code> flag in the comment of the merge commit.</p> - -<h2 id="Make_选项">Make 选项</h2> - -<p>you use the <code>make</code> command inside the Gaia repo to create a Gaia profile that can be loaded onto your device or run in a <a href="/zh-CN/Firefox_OS/Using_the_B2G_desktop_client">B2G Desktop</a> build. This section looks in detail at the different make options available.</p> - -<p>There are many environment variables present in the Makefile. Do not depend on them as they may be removed in the future.</p> - -<p>Created profiles are stored in <code>/gaia/profile</code>, and contain the following items:</p> - -<ul> - <li>defaults: Directory containing default settings to be reloaded after you reset the phone.</li> - <li>extensions: Directory containing extensions.</li> - <li>settings.json: Settings file.</li> - <li>user.js: Another file containing more settings/preferences.</li> - <li>webapps: Directory containing all the web apps that are to be installed on the phone.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: When you've already made a profile and you want to build a new one, you must delete the existing profile directory before trying to generate a new one.</p> -</div> - -<h3 id="Default">Default</h3> - -<pre class="brush: bash">make</pre> - -<p>This simply gives you an unbranded, non-debug build. For a branded build build you need to use <a href="#Official_Mozilla_branding_make">Official Mozilla branding make</a>; for a debug build you need <a href="#Debug_make">Debug make</a>.</p> - -<h3 id="推送到设备端">推送到设备端</h3> - -<pre class="brush: bash">make install-gaia - -make reset-gaia -</pre> - -<p>With <a href="/zh-CN/Firefox_OS/Debugging/Installing_ADB">ADB</a> (Android Debug Bridge) setup, these make targets will push Gaia to the device. <code>install-gaia</code> will just push updates of Gaia from your working directory to your device. <code>reset-gaia</code> will purge all existing configuration, profiles, web apps and database entries (a new settings database will be initialized) before pushing Gaia.</p> - -<h3 id="编译特定的应用">编译特定的应用</h3> - -<pre class="brush: bash">APP=system make - -APP=system make install-gaia</pre> - -<p>When a profile already exists, <code>APP</code> allows you to specify which app to re-package, instead of re-packing and re-pushing all the Gaia apps.</p> - -<h3 id="指定自定义的配置文件夹">指定自定义的配置文件夹</h3> - -<p>You can specify a custom directory to build your profile in, using <code>PROFILE_FOLDER</code>, for example:</p> - -<pre class="brush: bash">PROFILE_FOLDER=profile-b2g-desktop make</pre> - -<h3 id="不同设备的编译">不同设备的编译</h3> - -<p>There are a few make options that create builds for different devices, with different purposes.</p> - -<h4 id="Create_a_phone_build_of_Gaia">Create a phone build of Gaia</h4> - -<pre class="brush: bash">GAIA_DEVICE_TYPE=phone make</pre> - -<p>This build gets apps from <code>/gaia/build/config/phone/apps-engineering.list</code>.</p> - -<h4 id="Create_a_tablet_build_of_Gaia">Create a tablet build of Gaia</h4> - -<pre class="brush: bash">GAIA_DEVICE_TYPE=tablet make</pre> - -<p>This build gets apps from <code>/gaia/build/config/phone/apps-engineering.list</code>.</p> - -<h3 id="不同类型的编译">不同类型的编译</h3> - -<p>There are a few make options that create different types of build, with different purposes.</p> - -<h4 id="Production_make">Production make</h4> - -<pre class="brush: bash">PRODUCTION=1 make</pre> - -<p>This creates a production build of Gaia:</p> - -<ul> - <li>Gaia is run as packaged apps, which are harder to debug, but are the best available state for apps in terms of available API permissions, etc.</li> - <li>Test apps are not included in the build</li> - <li>Remote debugging is turned off by default</li> - <li>Lock screen is turned on (which in turn will cut USB connections)</li> - <li>Marionette is turned off</li> - <li>First time user experience is turned on</li> - <li>Offline cache is used.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: You can also use the alias <code>make production</code>.</p> -</div> - -<h4 id="Debug_make">Debug make</h4> - -<pre class="brush: bash">DEBUG=1 make</pre> - -<p>The <code>DEBUG</code> variable runs Gaia as hosted apps on a built-in web server on a specific <code>GAIA_PORT</code>, rather than the default of packaged apps which have to be re-packaged after every change; this makes things easier to test. Launching the profile with the latest Firefox Nightly will also give you nice B2G specific panels on the Firefox Developer Tools.</p> - -<p>In addition:</p> - -<ul> - <li>Test apps are included in the build.</li> - <li>Remote debugging is turned on by default.</li> - <li>Lock screen is turned off (USB connections won't be interrupted.)</li> - <li><a href="/zh-CN/docs/Mozilla/QA/Marionette">Marionette</a> is turned on, which is needed when running Gaia <a href="/zh-CN/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="/zh-CN/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">unit tests</a>.</li> - <li>First time user experience is turned off.</li> - <li>Offline cache is not used, even if it is generated.</li> -</ul> - -<h4 id="Device_debug_make">Device debug make</h4> - -<pre class="brush: bash">DEVICE_DEBUG=1 make</pre> - -<p>This disables screen lock on the device, and enables debugging with the ADB tool, so is useful for device debugging.</p> - -<p>In Firefox OS version > 1.2, specify this param when you want to debug Firefox OS webapps with the <a href="/zh-CN/Firefox_OS/Using_the_App_Manager">App Manager</a>.</p> - -<h4 id="Debug_desktop_make">Debug desktop make</h4> - -<pre class="brush: bash">DEBUG=1 DESKTOP=0 make</pre> - -<p>This option creates a desktop debug version, for running inside <a href="/zh-CN/Firefox_OS/Using_the_B2G_desktop_client">B2G desktop</a>.</p> - -<h4 id="Official_Mozilla_branding_make">Official Mozilla branding make</h4> - -<pre class="brush: bash">MOZILLA_OFFICIAL=1 make</pre> - -<p>Use this to make an official Mozilla-branded build.</p> - -<h4 id="Dogfood_make">Dogfood make</h4> - -<pre class="brush: bash">DOGFOOD=1 make</pre> - -<p>Dogfooding options and utilities are turned on, for example the Feedback app, which allows doog fooders to easily submit feedback on the OS.</p> - -<h4 id="System_apps_make">System apps make</h4> - -<pre class="brush: bash">B2G_SYSTEM_APPS=1 make</pre> - -<p>This environment variable lets you push an app to <code>/system/b2g</code> instead of <code>/data/local</code>. You should use this when you work with a user build. This variable is automatically set when running <code>make production</code>. This can be used for <code>install-gaia</code> or <code>reset-gaia</code> too.</p> - -<h4 id="Distribution_and_market_customization_build">Distribution and market customization build</h4> - -<pre class="brush: bash">GAIA_DISTRIBUTION_DIR=./dir</pre> - -<div class="note"> -<p><strong>Note</strong>: Read <a href="/zh-CN/Firefox_OS/Hacking_Firefox_OS/Market_customizations_guide">Market Customizations</a> for more details.</p> -</div> - -<h3 id="开发调试选项">开发/调试选项</h3> - -<p>There are also make options for adding/removing features or changing settings, for debugging purposes.</p> - -<h4 id="Enable_remote_debugging">Enable remote debugging</h4> - -<pre class="brush: bash">REMOTE_DEBUGGER=1</pre> - -<p>This enables remote debugging on the device, the same as using the option in the <a href="/zh-CN/Firefox_OS/Debugging/Developer_settings#Remote_debugging">developer settings</a>.</p> - -<h4 id="JavaScript_optimization_make">JavaScript optimization make</h4> - -<pre class="brush: bash">GAIA_OPTIMIZE=1 make</pre> - -<p>This triggers an optimization pass on Gaia's JavaScript, concatenating/compressing the files. This is automatically set when running <code>make production</code>. This can be used for <code>install-gaia</code> or <code>reset-gaia</code> too.</p> - -<h4 id="High_resolution_image_assets">High resolution image assets</h4> - -<pre class="brush: bash">GAIA_DEV_PIXELS_PER_PX=1.5 make</pre> - -<p>When packaging the app, this option replaces images with their <code>*@1.5x.(gif|jpg|png)</code> equivalents if such images exist. You need to use the above option as part of a standard <code>make</code> command, for example:</p> - -<pre class="brush: bash">GAIA_DEV_PIXELS_PER_PX=1.5 make reset-gaia - -GAIA_DEV_PIXELS_PER_PX=1.5 make install-gaia</pre> - -<p>Gaia is currently targetting the following screen resolutions:</p> - -<ul> - <li>qHD: ~540×960; device pixel ratio = 1.6875</li> - <li>WVGA: ~480×800; device pixel ratio = 1.5</li> - <li>HBGA (320x240); device pixel ratio = 1</li> -</ul> - -<p>use <code>GAIA_DEV_PIXELS_PER_PX</code> to make sure the images looks sharp on qHD and WVGA devices. see <a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel" title="https://developer.mozilla.org/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel">A pixel is not a pixel</a> for more information about device pixels per css pixels.</p> - -<h4 id="Haida_features">Haida features</h4> - -<pre class="brush: bash">HAIDA=1 make reset-gaia</pre> - -<p>This build enables the Haida feature set, which is currently limited to <a href="https://wiki.mozilla.org/FirefoxOS/systemsfe/epm#Rocketbar_Results">rocketbar</a> and <a href="https://wiki.mozilla.org/FirefoxOS/Haida#Edge_Gestures_Between_Open_Content">edge</a> gestures, but will likely include other features in the near future.</p> - -<h4 id="Disable_first_time_use_experience_(FTU)">Disable first time use experience (FTU)</h4> - -<pre class="brush: bash">NOFTU=1 -</pre> - -<p>Disable the FTU with this environment variable.</p> - -<h4 id="Disable_lockscreen">Disable lockscreen</h4> - -<p>You can disable the Firefox OS lockscreen using the NO_LOCK_SCREEN option, for example:</p> - -<pre class="brush: bash">NO_LOCK_SCREEN=1 make</pre> - -<h4 id="Reference_Workloads">Reference Workloads</h4> - -<p>Reference workloads allow developers/testers to quickly install a large amount of data in several applications, typically on a newly-flashed phone.</p> - -<p>The commands are (from the gaia directory):</p> - -<pre class="brush: bash">make reference-workload-light</pre> - -<ul> - <li>200 contacts</li> - <li>200 sms messages</li> - <li>50 dialer history entries</li> - <li>20 gallery images</li> - <li>20 songs</li> - <li>5 videos</li> -</ul> - -<pre class="brush: bash">make reference-workload-medium</pre> - -<ul> - <li>500 contacts</li> - <li>500 sms messages</li> - <li>100 dialer history entries</li> - <li>50 gallery images</li> - <li>50 songs</li> - <li>10 videos</li> -</ul> - -<pre class="brush: bash">make reference-workload-heavy</pre> - -<ul> - <li>1000 contacts</li> - <li>1000 sms messages</li> - <li>200 dialer history entries</li> - <li>100 gallery images</li> - <li>100 songs</li> - <li>20 videos</li> -</ul> - -<pre class="brush: bash">make reference-workload-x-heavy</pre> - -<ul> - <li>2000 contacts</li> - <li>2000 sms messages</li> - <li>500 dialer history entries</li> - <li>250 gallery images</li> - <li>250 songs</li> - <li>50 videos</li> -</ul> - -<p>These targets accept the <code>APP</code> environment variable, or an <code>APPS</code> environment variable that should contain the app names separated by a space, e.g.:</p> - -<pre class="brush: bash">APP=sms make reference-workload-light -APPS="sms communications/contacts" make reference-workload-heavy -</pre> - -<p>The apps available are:</p> - -<pre class="brush: bash">APPS="gallery music video communications/contacts sms communications/dialer"</pre> - -<p>In order to install music (songs) with reference workloads, the utility mid3v2 must be installed. This utility can be installed with:</p> - -<pre class="brush: bash">sudo apt-get install python-mutagen</pre> - -<p>If you run Fedora or RHEL instead, use:</p> - -<pre class="brush: bash">sudo yum install python-mutagen</pre> - -<h4 id="Documentation_make">Documentation make</h4> - -<p>Gaia docs can be built, via jsdoc3. To generate these, you can use the following command:</p> - -<pre class="brush: bash">make docs</pre> - -<h4 id="Enabling_IME_layout_and_dictionaries">Enabling IME layout and dictionaries</h4> - -<p>To enable keyboard IME layout and dictionaries enabled, use following command structure:</p> - -<pre class="brush: bash">GAIA_KEYBOARD_LAYOUTS=en,zh-Hant-Zhuyin,el,de,fr,zh-Hans-Pinyin make</pre> - -<h2 id="自定义_build-time_应用">自定义 build-time 应用</h2> - -<p>The apps that run on Firefox OS are all contained within the Gaia source tree, in one of two locations:</p> - -<ul> - <li><code>gaia/apps</code>: This is where the system default apps are found, such as <code>calendar</code>, <code>email</code>, <code>settings</code>, etc.</li> - <li><code>gaia/external-apps</code>: This is where the Firefox Marketplace app is found (<code>marketplace.firefox.com</code>), and where apps subsequently installed by the user are stored.</li> - <li><code>gaia/showcase-apps</code>: This is a container for multiple showcase apps, for example a 3D Crystal Skull to show off WebGL performance on the device.</li> - <li><code>gaia/test-apps</code>: This directory is a repository for simple tests, designed to test simple B2G features.</li> - <li><code>gaia/external-apps</code>: This directory contains more tests.</li> - <li>There may be oters too, depending on the version of Gaia you have cloned.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: If you are building B2G rather than Gaia, the paths will of course have <code>B2G/</code> on the front, e.g. <code>B2G/gaia/apps</code> and <code>B2G/gaia/external-apps</code>.</p> -</div> - -<p>If you want to omit some of these apps from your build of Gaia/B2G, you can do this in a few different ways:</p> - -<ol> - <li> - <p>The "brute force" method is to simply delete the apps you don't want to be present at build time, before building.</p> - </li> - <li> - <p>The more refined method is to edit the <code>gaia/build/config/apps-*.list</code> files to include the paths to the apps you want to include at build time. For example, <code>gaia/build/config/apps-production.list </code>looks something like this:</p> - - <pre class="brush: bash">apps/* -external-apps/* -outoftree_apps/*</pre> - - <p>But you could also include specific apps rather than just picking them all, for example:</p> - - <pre class="brush: bash">apps/clock</pre> - - <p>The mechanism for choosing which <code>apps-*.list</code> file is used during the build to determine the available apps is contained inside <code>gaia/Makefile</code>:</p> - - <pre class="brush: cpp">GAIA_APP_TARGET?=engineering -... -ifeq ($(MAKECMDGOALS), demo) -GAIA_DOMAIN=thisdomaindoesnotexist.org -GAIA_APP_TARGET=demo -else ifeq ($(MAKECMDGOALS), dogfood) -DOGFOOD=1 -else ifeq ($(MAKECMDGOALS), production) -PRODUCTION=1 -endif -... -ifeq ($(PRODUCTION), 1) -GAIA_OPTIMIZE=1 -GAIA_APP_TARGET=production -endif - -ifeq ($(DOGFOOD), 1) -GAIA_APP_TARGET=dogfood -endif -... -ifndef GAIA_APP_CONFIG -GAIA_APP_CONFIG=build$(SEP)config$(SEP)apps-$(GAIA_APP_TARGET).list -endif</pre> - - <p>Initially, the <code>GAIA_APP_TARGET</code> variable is set to <code>engineering</code>, so by default building gaia from source will use <code>app-engineering.list</code> (which includes all the tests, demos, etc.):</p> - - <pre class="brush: bash">make -</pre> - - <p>To specify usage of a different apps list you specify different options when running the make command. To build with <code>apps-production.list</code>, for example, you'd use</p> - - <pre class="brush: bash">PRODUCTION=1 make</pre> - - <ul> - <li>If you specifically build with <code>DEMO=1</code> specified, then it will use <code>apps-demo.list</code>.</li> - <li>If you specifically build with <code>DOGFOOD=1</code> specified, then it will use <code>apps-dogfood.list</code>.</li> - <li>You can completely override the decision by using <code>GAIA_APP_CONFIG</code> and providing your own <code>apps-*.list</code> file.</li> - </ul> - - <p><code>gaia/Android.mk</code> contains these lines:</p> - - <pre class="brush: cpp">ifneq ($(filter user userdebug, $(TARGET_BUILD_VARIANT)),) -GAIA_MAKE_FLAGS += PRODUCTION=1 -B2G_SYSTEM_APPS := 1 -endif</pre> - - <p>When you build, if <code>VARIANT=user</code> or <code>VARIANT=userdebug</code> are set (these wind up getting reflected in the <code>TARGET_BUILD_VARIANT</code> variable), <code>PRODUCTION=1</code> is automatically set when building gaia.</p> - </li> - <li> - <p>The third, and most refined (but most complex) method is to use customizations. These allow you to specify build-time customization instructions in separate difrectories, without modifying the core Gaia repo. You can include your own customizations in distinct directories, or use the preexisting directories that come with the source.</p> - - <p>For example, the basic Firefox tablet customized app list is defined in <code>apps.list</code> under the <a href="https://github.com/mozilla-b2g/gaia/tree/master/distribution_tablet"><code>distribution_tablet</code></a> folder (<code>gaia/distribution_tablet</code>). These customizations can be applied at build time using options like this:</p> - - <pre class="brush: bash">GAIA_DISTRIBUTION_DIR=distribution_tablet make</pre> - - <div class="note"> - <p><strong>Note</strong>: Customizations is its own separate topic entirely. To learn more about it, read <a href="/zh-CN/Firefox_OS/Hacking_Firefox_OS/Market_customizations_guide">Market Customizations</a>.</p> - </div> - - <div class="note"> - <p><strong>Note</strong>: If you want to include custom external apps as part of your Gaia build, you need to build them in a specific way, and then place them into the <code>gaia/external-apps/</code> folder. Read <a href="/zh-CN/Firefox_OS/Hacking_Firefox_OS/Market_customizations_guide#Building_Prebundled_web_apps">Building Prebundled web apps</a> to find out how.</p> - </div> - </li> -</ol> - -<div class="warning"> -<p><strong>Important</strong>: If you are a device vendor creating a custom B2G/Gaia build for distribution, you need to satisfy certain criteria before you are allowed to include the Firefox Marketplace app on your phones/tablets/etc. Contact Mozilla for more details.</p> -</div> - -<h2 id="联系小组">联系小组</h2> - -<ul> - <li><a href="https://lists.mozilla.org/listinfo/dev-gaia" rel="nofollow">Gaia Mailing List</a></li> - <li>#gaia IRC channel on irc.mozilla.org</li> -</ul> diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/index.html deleted file mode 100644 index 698c63da42..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Gaia -slug: Archive/B2G_OS/Platform/Gaia -translation_of: Archive/B2G_OS/Platform/Gaia ---- -<p>Gaia是<a href="/zh-CN/docs/Mozilla/Firefox_OS" title="Mozilla/Firefox_OS">Firefox OS</a>的用户界面层.在Firefox OS启动之后,显示在屏幕上的一切东西都是由Gaia绘制出来的,包括锁屏,主屏幕,拨号界面,以及其他的应用程序.Gaia完全是由<a href="/zh-CN/docs/zh-CN/HTML" title="HTML">HTML</a>,<a href="/zh-CN/docs/CSS" title="CSS">CSS</a>,和<a href="/zh-CN/docs/JavaScript" title="JavaScript">JavaScript</a>编写的.它和底层的操作系统以及硬件进行交互是通过标准的Web API来完成的,这些API是由<a href="/zh-CN/docs/Gecko" title="Gecko">Gecko</a>实现的.</p> -<p>正因为这样的设计,Gaia不仅能直接运行在Firefox OS设备上,还能运行在其他的操作系统以及其他的web浏览器中.</p> -<p>和Gaia一起安装在设备上的第三方应用程序也可以由Gaia来启动.</p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Gaia的相关文档</h2> - <dl> - <dt> - <a href="/zh-CN/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia" title="Mozilla/Boot_to_Gecko/Introduction to Gaia">介绍Gaia</a></dt> - <dd> - Gaia是Firefox OS设备上使用的用户界面应用程序,它仅仅是一个运行在Firefox OS软件栈上的Web应用程序.本指南会详细的介绍Gaia.</dd> - </dl> - <dl> - <dt> - <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia应用</a></dt> - <dd> - 对Gaia中可获得的默认应用进行介绍，包括如何使用和修改它们。</dd> - <dt> - <a href="/zh-CN/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking">Gaia hacking 指南</a></dt> - <dd> - 关于hacking和修改Gaia接口的指南。</dd> - <dt> - <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Build_System_Primer">Gaia系统构建入门</a></dt> - <dd> - 在Gaia build子文件夹下由脚本执行的绝大多数有意以的构建步骤。</dd> - <dt> - <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking_Tips_And_FAQ">Gaia Hacking提示和常见问题 </a></dt> - <dd> - 关于hacking Gaia的一些有用的提示以及常见问题。</dd> - </dl> - <p><span class="alllinks"><a href="/zh-CN/docs/tag/Gaia" title="tag/B2G">查看更多...</a></span></p> - </td> - <td> - <h2 class="Community" id="Community" name="Community">到社区寻求帮助</h2> - <p>如果你的工作需要和Gaia打交道,或者正在开发一个Gaia应用程序,有相关的社区资源可以帮助你!</p> - <ul> - <li>咨询Boot to Gecko项目论坛: <ul> - <li><a href="https://lists.mozilla.org/listinfo/dev-gaia"> 邮件列表</a></li> - - - <li><a href="http://groups.google.com/group/mozilla.dev.gaia"> 新闻组</a></li> - <li><a href="http://groups.google.com/group/mozilla.dev.gaia/feeds"> Web feed</a></li> -</ul></li> - </ul> - <ul> - <li>在Mozilla的Gaia IRC频道上提出你的问题: <a href="irc://irc.mozilla.org/gaia" title="irc://irc.mozilla.org/gaia">#gaia</a></li> - </ul> - <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">不要忘记"提问的艺术"...</a></span></p> - <br> - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相关话题</h2> - <ul> - <li><a href="/zh-CN/docs/Mobile" title="Mobile">Mobile</a></li> - <li><a href="/zh-CN/docs/HTML" title="HTML">HTML</a></li> - <li><a href="/zh-CN/docs/CSS" title="CSS">CSS</a></li> - <li><a href="/zh-CN/docs/JavaScript" title="JavaScript">JavaScript</a></li> - </ul> - <h2 class="Tools" id="Resources" name="Resources">资源</h2> - <ul> - <li><a href="/zh-CN/docs/Mozilla/Firefox_OS/Architecture" title="Mozilla/Firefox_OS/Architecture">Firefox OS体系结构概述</a></li> - </ul> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html deleted file mode 100644 index 562cb61765..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Gaia简介 -slug: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia -tags: - - Apps - - B2G - - Gaia - - Settings -translation_of: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia ---- -<div class="summary"> - <br> - Gaia 是Boot to Gecko (B2G) 的用户界面; 它是一个web应用的集合，可以本地运行在B2G设备，仿真器，桌面版本或firefox版本上。添加app或规Gaia更改时使用的web技术都是 <a href="https://developer.mozilla.org/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="https://developer.mozilla.org/en/HTML" title="en/HTML">HTML</a>,和 <a href="https://developer.mozilla.org/en/CSS" title="en/CSS">CSS</a>.</div> -<h2 id="Gaia_锁屏界面" style="margin-bottom: 20px; line-height: 30px;"> Gaia 锁屏界面</h2> -<p>锁屏界面会显示网络运营商，当前时间和日期，和一个滑动条可用来解锁手机或直接进入相机拍照。 如果用户有密码锁定设置，锁屏界面会显示一个密码输入窗口。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7611/gaia-lockscreen.png" style="margin-right: auto; margin-left: auto; height: 480px; width: 320px; display: block;"></p> -<p>注意一些设备默认是使能密码锁定的；这种情况下，默认的解锁PIN码是 "0000"。该功能后续可能会有所改变。</p> -<h2 id="默认的Gaia接口" style="margin-bottom: 20px; line-height: 30px;">默认的Gaia接口</h2> -<p>Gaia的默认界面，如下图所示，与您在绝大多数智能手机上看到界面是非常相似的。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7613/device-2013-01-24-163623.png" style="margin-right: auto; margin-left: auto; height: 480px; width: 320px; display: block;"></p> -<p>这张图片显然是一个预发布版本的操作系统，其中还带有占位符图标和一些测试应用。界面顶端的状态栏放置了一些状态标识，包括当前手机选择的网络运营商（或者没有SIM卡），SIM卡信号强度，WIFI信号强度，电池点亮以及当前时间。</p> -<p>界面中间区域显示了应用的图标，滑动屏幕可查看各界面的图标。您可以在<a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Gaia_apps" style="text-decoration: underline;">Gaia apps</a> 一文中获取更多关于 Gaia 默认 app集合的信息。 </p> -<p>屏幕的最下方是是一个快速启动栏，一般会放置一些您最常用到的应用。您也可已从快速启动栏拖动一个app图标到中间的区域。</p> -<h2 id="参考" style="margin-bottom: 20px; line-height: 30px;">参考</h2> -<ul> - <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps</a>: 该页面会对每个app进行介绍，包括如何使用和修改它们。</li> - <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>: 对不同的开发者设置进行介绍，而且可以通过Gaia Settings 应用来配置它们。</li> -</ul> diff --git a/files/zh-cn/archive/b2g_os/platform/gaia/weinre远程调试工具/index.html b/files/zh-cn/archive/b2g_os/platform/gaia/weinre远程调试工具/index.html deleted file mode 100644 index 213a8defb1..0000000000 --- a/files/zh-cn/archive/b2g_os/platform/gaia/weinre远程调试工具/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Weinre 远程调试工具 -slug: Archive/B2G_OS/Platform/Gaia/Weinre远程调试工具 -tags: - - weinre -translation_of: Tools/Remote_Debugging ---- -<p>Weinre 是Apache基础工程之一，是 WEb INspector REmote 的缩写。正如其名，它是和 Firebug 或浏览器调试工具类似，但是能够在远程运行调试web页面。所以如果你使用过火狐开发者工具或Chrome的调试工具，那么上手Weinre就会非常容易，非常自然。</p> - -<h2 id="安装_Weinre">安装 Weinre</h2> - -<p>因为 Weinre 运行在 Node.js 的基础上, your first port of call would be to <a href="http://nodejs.org/">安装 Node.js</a>. Node.js comes with NPM (Node Package Manager) bundled nowadays and this is what we are going to use to install Weinre. From a terminal run the following:</p> - -<pre style="font-family: monospace;" class="bash">npm <span style="color: #660033;">-g</span> <strong style="color: #c20cb9; font-weight: bold;">install</strong> weinre</pre> - -<blockquote> -<p>NOTE: The <code>-g</code> flag is used to install Weinre as a <a href="https://npmjs.org/doc/global.html">global Node.js module</a> for command line goodness but, on Linux and Mac, this means you most likely are going to need to run the above by prepending <code>sudo</code> to the above command.</p> -</blockquote> - -<p>Once the installation process is complete, we are ready to use Weinre to debug.</p> - -<h2 id="启动_Weinre_服务">启动 Weinre 服务</h2> - -<p>On the terminal enter the following line to start up the Weinre server:</p> - -<pre style="font-family: monospace;" class="bash">$ weinre <span style="color: #660033;">--boundHost</span> 127.0.0.1 <span style="color: #660033;">--httpPort</span> <span style="color: #000000;">9090</span></pre> - -<p><span style="color: #000000;">The two parameters passed here are the host to bind to and the port the server should listen on. Once the server has started the terminal should display a line similar to the following:</span></p> - -<pre style="font-family: monospace;" class="bash"><span style="color: #000000;">2013</span>-01-28T10:<span style="color: #000000;">42</span>:40.498Z weinre: starting server at http:<strong style="color: #000000; font-weight: bold;">//</strong>127.0.0.1:<span style="color: #000000;">9090</span></pre> - -<p>With that, fire up a browser (<em>NOTE: The UI for Weinre is built specifically for Webkit based browsers so, while it might work to some degree in other browsers, I would suggest you use Chrome</em>) and point it to <a href="http://127.0.0.1:9090">http://127.0.0.1:9090</a>. Once the landing page loads, click on the link to the debug client user interface. From this portion of the UI you can see connected clients, initially one which is the current instance of the web inspector, some general properties of our server, and your targets.</p> - -<h2 id="设置_Weinre_目标页面">设置 Weinre 目标页面</h2> - -<p>In Weinre targets are the web pages or apps that you want to debug, and in order for the target to be able to connect, you need to add a one liner to the relevant file of your app. For example, if you wanted to use Weinre to debug the Calendar app in Gaia you would open gaia -> apps -> calendar -> index.html and right before the clong body tag, add the following:</p> - -<pre style="font-family: monospace;" class="xml"><span style="color: #009900;"><strong style="color: #000000; font-weight: bold;"><script</strong> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"http://127.0.0.1:9090/target/target-script-min.js#anonymous"</span><strong style="color: #000000; font-weight: bold;">></strong><strong style="color: #000000; font-weight: bold;"></script<strong style="color: #000000; font-weight: bold;">></strong></strong></span></pre> - -<p>Normally that would be all you need to do to set up your target, but for FirefoxOS there is one more step. Gaia uses a <a href="http://www.w3.org/TR/CSP/#introduction">Content Security Policy</a> and as part of that, scripts are said to only be allowed to load if from the same origin as the application. So, if we were to try and load the Calendar now, the script from above would be blocked as it is not being loaded from the specified origin.</p> - -<p>To overcome this, we need to temporarily disable CSP. To do this, open up gaia -> build -> preferences.js and add the following line, around line 24:</p> - -<pre style="font-family: monospace;" class="javascript">prefs.<span style="color: #660066;">push</span><span style="color: #009900;">(</span><span style="color: #009900;">[</span><span style="color: #3366CC;">"security.csp.enable"</span><span style="color: #339933;">,</span> <strong style="color: #003366; font-weight: bold;">false</strong><span style="color: #009900;">]</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> - -<h2 id="使用_Weinre_和_B2G_Desktop_进行调试">使用 Weinre 和 B2G Desktop 进行调试</h2> - -<p>The first step we need before launching the desktop is to build our Gaia profile:</p> - -<pre style="font-family: monospace;" class="bash"><span style="color: #007800;">DEBUG</span>=<span style="color: #000000;">1</span> <strong style="color: #c20cb9; font-weight: bold;">make</strong></pre> - -<p>Once the profile is built, launch B2G desktop:</p> - -<div class="wp_syntax"> -<pre style="font-family: monospace;" class="bash"><strong style="color: #000000; font-weight: bold;">/</strong>Applications<strong style="color: #000000; font-weight: bold;">/</strong>B2G.app<strong style="color: #000000; font-weight: bold;">/</strong>Contents<strong style="color: #000000; font-weight: bold;">/</strong>MacOS<strong style="color: #000000; font-weight: bold;">/</strong>b2g-bin <span style="color: #660033;">-profile</span> <strong style="color: #000000; font-weight: bold;">/</strong>Users<strong style="color: #000000; font-weight: bold;">/</strong>username<strong style="color: #000000; font-weight: bold;">/</strong>mozilla<strong style="color: #000000; font-weight: bold;">/</strong>projects<strong style="color: #000000; font-weight: bold;">/</strong>gaia<strong style="color: #000000; font-weight: bold;">/</strong>profile</pre> -</div> - -<p>Once B2G launches, unlock the screen and navigate to the Calendar app. Tap the app icon and keep an eye on the Weinre debug client UI. Once the app has launched you should see a target being added. Next we want to start inspecting our code, so click on the 'Elements' tab to open up the HTML and CSS inspector. You can go right ahead and edit either the HTML or the CSS as you normally would and see the changes reflected live. Note that even though the CSS looks grayed out and disabled, it is fully editable. You can also add completely new styles to the current element using the empty element.style block or amending existing rules. You will also notice you have access to the computed styles as well as metrics of the current element.</p> - -<h2 id="使用控制台工作">使用控制台工作</h2> - -<p>The next tab of interest to us is the Console tab. Here you can code away and run any JavaScript you want directly against the current app or execute code exposed by the app. In order to demonstrate the console, we will target the Call Log portion of the dialer and interact with the records stored there. First step then is to move your script src to the Dialer which is located at gaia -> apps – > communication -> dialer -> index.html.</p> - -<p>After it is added, build your profile, launch B2G, and then launch the Dialer. With the Dialer open, click on the call log icon, bottom left. Currently the call log is already populated with some dummy data, but let’s create our own. Click over to the Console tab in Weinre, type the following, and press enter.</p> - -<pre style="font-family: monospace;" class="javascript">RecentsDBManager.<span style="color: #660066;">deleteAll</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> - -<p>To see that our code was executed and worked, we need to refresh the call log:</p> - -<pre style="font-family: monospace;" class="javascript">Recents.<span style="color: #660066;">refresh</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> - -<p>As you can see, our call log is empty. Next step then is to add an entry back. To do this, we will create a dummy call entry Object and then pass this to the add function of the RecentsDBManager to store it:</p> - -<pre style="font-family: monospace;" class="javascript"><em>// Dummy entry</em> -<strong style="color: #000066; font-weight: bold;">var</strong> recentCall <span style="color: #339933;">=</span> <span style="color: #009900;">{</span> - type<span style="color: #339933;">:</span> <span style="color: #3366CC;">'incoming-refused'</span><span style="color: #339933;">,</span> - number<span style="color: #339933;">:</span> <span style="color: #3366CC;">'555-6677'</span><span style="color: #339933;">,</span> - date<span style="color: #339933;">:</span> <strong style="color: #000066; font-weight: bold;">new</strong> <span>Date</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> -<span style="color: #009900;">}</span><span style="color: #339933;">;</span> -RecentsDBManager.<span style="color: #660066;">add</span><span style="color: #009900;">(</span>recentCall<span style="color: #009900;">)</span><span style="color: #339933;">;</span> -Recents.<span style="color: #660066;">refresh</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> - -<p>And as you can see now, the entry we just created has been added to storage, <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">IndexedDB</a> to be exact, and is visible in the call log view. As you might very well have noticed, another of the great features that comes with the console is auto-complete which will further speed up development.</p> - -<h2 id="在移动设备上调试">在移动设备上调试</h2> - -<p>The above has focused on using Weinre and B2G desktop, but the process to use Weinre to inspect and debug your code running on a device is exactly the same except for the IP address you will be using. When you want to debug on the device you first need to know the IP address of your host computer. Then you need to start up Weinre using this IP as the boundHost and also as the IP when including the script into your target documents.</p> - -<blockquote> -<p>On Mac and Linux you can get this address using <code>ifconfig</code> and on Windows it is <code>ipconfig</code>.</p> -</blockquote> - -<p>Once you have the new IP, just stop the current instance of Weinre and then do the following:</p> - -<pre style="font-family: monospace;" class="bash">weinre <span style="color: #660033;">--boundHost</span> 192.168.1.1 <span style="color: #660033;">--httpPort</span> <span style="color: #000000;">9090</span></pre> - -<p>Then inside your target document add:</p> - -<pre style="font-family: monospace;" class="bash"><strong style="color: #000000; font-weight: bold;"><</strong>script <span style="color: #007800;">src</span>=<span style="color: #ff0000;">"http://192.168.1.1:9090/target/target-script-min.js#anonymous"</span><strong style="color: #000000; font-weight: bold;">></</strong>script<strong style="color: #000000; font-weight: bold;">></strong></pre> - -<p>Make and push your Gaia profile to the device using:</p> - -<pre style="font-family: monospace;" class="bash"><strong style="color: #c20cb9; font-weight: bold;">make</strong> install-gaia</pre> - -<p>Launch your target app and you are in business!</p> |