Settings app 允许用户来配置设备的系统设置信息，同时会对传入的 activities作出响应，即允许app开发者在app中显示特定的settings 视图（例如， 如果没有有效的数据链接，显示 wifi设置面板）。本文主要讲述了它是如何工作的。
mozSettings API 和 Data 绑定
从技术上讲， Settings app 是一个向用户提供对认证 window.navigator.mozSettings API 访问的UI界面。
Settings app 会自动的处理基本的系统设置操作，如绑定数据字段和 mozSettings 值 — 所有基本操作，如勾选一项设置或改变输入值将会使相关的 mozSettings 值也会改变。
window.navigator.mozSettings API 会从Gecko 中获取系统设置的数据。 使用方式如下所示：
navigator.mozSettings.createLock().set(values);
上面是设置数据信息。
注意: 在读或写任何 mozSettings， 我们需要使用 createLock() 方法来锁定settings。
要检索数据，我们可以使用获取或设置一个回调函数的方式启动对数据的操作：
var reqTimerGoBack =
window.navigator.mozSettings.createLock().get('icc.goBackTimeout');
reqTimerGoBack.onsuccess = function icc_getTimerGoBackSuccess() {
goBackTimer.timeout = reqTimerGoBack.result['icc.goBackTimeout'];
...
};
数据会存储在一个名为 instance.result 词典下。
Firefox OS 2.0 开始, mozSettings 实例可以通过 js/modules/settings_cache.js 实例被重复使用：
var SettingsCache = require('modules/settings_cache');
SettingsCache.getSettings(function(result){
var onlineSupportTitle = result['support.onlinesupport.title'];
...
});
导航
当用户打开 Settings app， 在概览页面会显示多个面板，这个页面则是一个功能性的独立页面。SettingsService.navigate (js/module/settings_service.js) 则会控制这些页面间的导航。
注意: For legacy panels (which are not yet ported to the new structure), settings.currentPanel is used instead of SettingsService.navigate to navigate
between panels.
Since Firefox OS will support tablet devices as well as mobiles, the Settings app has two different types of navigation model implemented:
- 一列(手机端)
- 两列 (平板端)
While called, SettingsService.navigate determines what navigation model to use via the following code:
if (_isTabletAndLandscape()) {
PageTransitions.twoColumn(oldPanel, newPanel, callback);
} else {
PageTransitions.oneColumn(oldPanel, newPanel, callback);
}
面板
From Firefox OS 2.0 onwards, the basic panel structure is defined in js/modules/panel.js. It defines six lifecycle stats:
initbeforeShowshowhidebeforeHideuninit
All new settings panels are inherited from SettingsPanel, which extends Panel’s functionalities. The code is contained in js/modules/settings_panel.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);
...
},
PanelUtils.activate — defined in js/modules/panel_utils.js — is used to parse all links in the panel and adds corresponding handlers in onInit stat, and PanelUtils.preset is used to preset elements with the settings values in the onBeforeShow stat.
All new settings panels are defined in the js/panels folder.
AMD 模块和编译时间优化
From Firefox OS 2.0 onwards, the Settings app uses the AMD modules pattern to implement each panel. The AMD modules are loaded via Alemeda (a lighter version of RequireJS) and built/optimized using r.js (the RequireJS optimizer). The Settings app still had dependencies on files (shared/js) which aren’t AMD modules. For those it uses the shim options defined in settings/js/config/require.js.
参考
Settings app has a build-in README ，这个文件可以用来获取 Settings （大部分内容是由 Arthur Chen and Fred Lin 完成的）。