KaiOS APN Settings模块代码

一、模块简介

APN界面在Settings应用菜单实现，代码归属gaia/apps/settings。

KaiOS panel 生命周期：onInit->onBeforeShow->onShow->onBeforeHide->onHide

官方参考文档：Gaia/Settings/docs - MozillaWiki

二、KaiO3.1应用通用目录结构

源码路径gaia/apps（感觉就是个网站网页开发），手机目录

三、代码路径

1、【UI】APN列表页：

• gaia/apps/settings/elements/apn_list.html 界面结构和布局
• gaia/apps/settings/js/panels/apn_list/panel.js 逻辑
  • createApnSettingsPanel函数创建并返回SettingsPanel面板对象
• gaia/apps/settings/elements/apn_settings.html
• gaia/apps/settings/js/panels/apn_settings/panel.js

Kai基原生行为：apn_list（左）和apn_settings（右）是两个不同的界面

• apn_list：Data Settings，卡匹配的一套APN，以每条APN形式展示
• apn_settings：APN Settings，针对不同类型的APN分类展示

Note：定制APN菜单项registerSoftkey()——比如运营商需求不可添加APN

2、【UI】APN编辑页：新增、修改APN

• gaia/apps/settings/elements/apn_editor.html 界面
• gaia/apps/settings/js/panels/apn_editor/panel.js 逻辑

3、【功能逻辑】

更新数据库APN：/gaia/apps/settings/js/modules/apn/apn_settings.js

gaia/apps/settings/js/modules/apn/apn_settings_manager.js

四 、实现逻辑

KaiOS的APN设置界面是使用HTML和JavaScript动态生成的：

1. "apn_settings.html"文件中包含APN设置界面的HTML代码，其中包括单选按钮的代码。

2. "apn_settings.js"文件中包含用于生成和操作单选按钮的JavaScript代码。这个文件中的代码使用模板引擎来生成HTML代码，然后将其插入到页面中。

（一）【UI】卡APN列表：apn_list 

panels.js 实际用APN列表界面

1. gaia/apps/settings/elements/apn_lists.html 定义了 APN Settings界面的结构和布局
2. gaia/apps/settings/js/panels/apn_list/panel.js 
3. gaia/apps/settings/js/panels/apn_list/apn_template_factory.js 界面模板

<element name="apn_list" extends="section">
  <template>
  
    <gaia-header data-href="#apn_settings">
      <h1 slot="text">h1>
    gaia-header>
 
    <div class ="panel">
      <ul role="menu" class="apn-list">ul>
      <ul>
      ul>
    div>
 
    <panel data-path="panels/apn_list/panel"><panel>
 
  template>
element>

apn_template_factory.js 字段介绍

gaia/apps/settings/js/panels/apn_list/apn_template_factory.js

要注意const变量的定义，避免引起undefined报错。此模板用于创建DOM节点。

1. const rawApn = item.apn;
2. const input = document.createElement('input');     // Create an element
3. const radioSpan = document.createElement('span');      //单选按钮  
4. const radioLabel = document.createElement('label');     //标签
5. const nameSpan = document.createElement('span');    
6. const nameLabel = document.createElement('label');
7. const li = document.createElement('li');      //每一行

//item参数包含了APN具体信息
function apnTemplate(apnType, onItemclick, onRadioClick, itemsOBJ, item) {
    const rawApn = item.apn;    //从item获取APN对象
 
    // Create an  element
    const input = document.createElement('input');    //创建input元素
    input.type = 'radio';    //设置input元素类型是radio（Radio Button控件）
    input.checked = item.active;    //并根据item.active布尔属性值设置是否选中
    input.name = apnType;
 
    // Include the radio button element in a list item
    const radioSpan = document.createElement('span');    //创建span元素，用于显示Radio Button空间的样式
    const radioLabel = document.createElement('label');    //创建lable元素
    radioLabel.classList.add('pack-radio-large');
    radioLabel.appendChild(input);    //将input元素添加到lable元素中
    radioLabel.appendChild(radioSpan);
 
    //创建包含APN名称的span元素，并添加其到nameLable元素中
    const nameSpan = document.createElement('span');
    const nameLabel = document.createElement('label');
    nameSpan.classList.add('full-string');
    nameLabel.classList.add('pack-radio-large');
    nameLabel.classList.add('my_radio');
    nameLabel.setAttribute('data-id', item.id);    //为nameLabel元素设置一个data-id属性，用于后续操作中能够识别APN列表项
    itemsOBJ[item.id] = item;
    if (!rawApn.carrier) {
      nameSpan.textContent = rawApn.apn;
    } else {
      nameSpan.textContent = rawApn.carrier;
    }
    nameLabel.appendChild(input);
    nameLabel.appendChild(nameSpan);
 
    const li = document.createElement('li');
    li.appendChild(nameLabel);    //最后将lable添加到新的列表项返回
    return li;
  }

apn_list 业务逻辑

/gaia/apps/settings/js/modules/apn/apn_list.js

（二）【UI】分类APN菜单：apn_settings

panels.js

gaia/apps/settings/js/panels/apn_settings/panel.js是KaiOS APN设置界面，包含了生成和操作APN设置界面的所有JavaScript代码，主要功能如下：

1. 初始化界面：当APN设置界面被加载时，会调用init函数进行初始化。在init函数中，首先检查是否支持APN设置，如果不支持，则显示错误消息并返回。如果支持，则加载APN列表和默认设置，并将其显示在界面上。

2. 加载APN列表：loadAPNs函数用于从设备中读取APN列表。该函数使用navigator.mozMobileConnections API来获取当前设备上的移动连接，并使用其getAvailableNetworks方法获取APN列表。如果成功获取APN列表，则将其存储在apnList变量中。

3. 加载默认设置：loadDefaultSetting函数用于加载当前的默认设置。该函数使用navigator.mozSettings API获取当前设备的APN设置，并将其存储在defaultSetting变量中。

4. 显示APN设置列表：displayAPNList函数用于将APN设置列表显示在界面上。该函数使用Handlebars.js模板引擎生成每个APN设置项目的HTML代码，并将其插入到HTML文档中的相应元素中。

5. 更新选项状态：updateOptionState函数用于根据用户的选择更新APN设置项的状态。该函数将用户选择的APN设置ID存储在selectedAPN变量中，并使用jQuery选择器更新相应的单选按钮状态。

6. 保存设置：saveSetting函数用于将用户的选择保存到设备中。该函数使用navigator.mozSettings API将用户选择的APN设置保存到设备的APN设置中。

apn_settings.js

（三）【功能】增删查改 APN：apn_settings_manager.js

otegaia/apps/settings/js/modules/apn/apn_settings_manager.jsN

Note：JS接口可以形参和实参个数不同，如果只输入一个参数就是第一个参数，第二个参数默认是undefined。

定义名为ApnSettingsManager的类，包含多个属性（this）

  /**
   * @class ApnSettingsManager
   * @requires module:modules/async_storage
   * @requires module:modules/apn/apn_const
   * @requires module:modules/apn/apn_utils
   * @requires module:modules/apn/apn_item
   * @requires module:modules/apn/apn_settings
   * @requires module:modules/apn/apn_list
   * @requires module:modules/apn/apn_selections
   * @returns {ApnSettingsManager} 注释指出，该实例会被返回给调用者
   */  
 function ApnSettingsManager() {
    this._apnLists = {};    //APN列表
    this._apnSelections = ApnSelections();    //存储APN选择
    this._apnSettings = ApnSettings();    //存储APN设置设置
    //可自定义新增属性，如下：
    //this.apnSelectedId = '';    //存储选中的APN的ID
 
    this._readyPromises = {};
    //客制化
    //this.defaultApnSettingChanged = {};
    
    //定义RESTORE_MODE只读属性，其值是常量RESTORE_MODE，是一个外部模块或变量的引用。
    Object.defineProperty(this, 'RESTORE_MODE', {
      configurable: false,
      get: function() {    //等同 get() {get() {
        return RESTORE_MODE;    
      }
    });
  }

（四）【UI】APN编辑页：apn_editor

APN编辑页面 apn_editor/apn_editor.js 

/**
 * The apn editor module
 */
'use strict';
define(function(require) { //eslint-disable-line
  const ApnEditorConst = require('panels/apn_editor/apn_editor_const');
  const ApnEditorSession = require('panels/apn_editor/apn_editor_session');
 
  const { APN_PROPERTIES } = ApnEditorConst;
  const { APN_PROPERTY_DEFAULTS } = ApnEditorConst;
  const { VALUE_CONVERTERS } = ApnEditorConst;
  function ApnEditor(rootElement) {}
  ApnEditor.prototype = {};
 
  return function apnEditor(rootElement) {
    return new ApnEditor(rootElement);
  };
});
 

编辑业务功能 apn_editor/panels.js 

gaia/apps/settings/js/panels/apn_editor/panel.js

//结构组成
'use strict';
define(function(require) { //eslint-disable-line
    const SettingsPanel = require('modules/settings_panel');
    const ApnSettingsManager = require('modules/apn/apn_settings_manager');
    return function apnEditorPanel(){
        const DM_PROTOCOL = 'dm.apnSettings.protocol';
 
        //多个业务功能方法，主要都是编辑和保存功能
 
        return SettingsPanel{};
    };
});

五、用户功能

将apn_list和apn_settings融合定制

六、其他

卡和运营商相关文件operator_variant

• gaia/apps/system/js/operator_variant_handler.js
• gaia/apps/system/js/operator_variant_manager.js

<variant version="1">
<operator
       name="Movistar"
       mcc="214"
       mnc="07"
       enableStrict7BitEncodingForSms="true"
       operatorSizeLimitation="512000"
   />
variant>

apnItem结构

//提交APN信息的结构，apnItem
{
  "itemId":"mlxfslzn2",
  "itemCategory":"preset",
  "itemApn":{
    "apn":"tad",
    "authtype":"notDefined",
    "carrier":"tad",
    "category":"custom",
    "id":"zdd2mblgk",
    "mmsc":"",
    "mmsport":"",
    "mmsproxy":"",
    "password":"",
    "port":"",
    "protocol":"notDefined",
    "proxy":"",
    "roaming_protocol":"notDefined",
    "types":["default"],
    "user":""
  }
}

itemId和iitemApn里面的id是不同的