Firefox OS 学习——Gaia settings源码分析（1）

Firefox OS 学习——Gaia settings源码分析（一）

找到settings的源码：/gaia/apps/settings，ls 查看下，有如下的文件或文件夹：

index.html：打开Settings首先加载的文件，为什么是它呢？在manifest.webapp中的"launch_path": "/index.html#root" 决定的。 

js：存放javascript文件的地方，这js文件义工index.html调用。

locales:存放语言国际化文件的，目前只支持zh_TW，en_US,Fr,ar四种语言

manifest.webapp：这个就不用说了，详见manifest.webapp结构分析  

onpair.html：跟BT相关

resources：存放json,html数据的，还有就是settings中需要的音频文件。

style：存放css，icon，image文件的地方。

test：一些测试文件。

      先看下打开Settings对应的内容，下面以截图的形式展现（图 1）：

                                                          图 1

在manifest.webapp中的"launch_path": "/index.html#root" 可以定位到index.html中，code 如下：

 
                图2                                                               图3                                                    图4
它是一个图片的集合，但如何像图1那样分开的呢。这其中的奥秘在style/icons.css文件中。先简单分析icons.css
<a id="menuItem-airplaneMode" class="menu-item" data-l10n-id="airplaneMode">Airplane Mode</a><a id="menuItem-gps" class="menu-item" data-l10n-id="geolocation">Geolocation</a>
        上述code中id就是在icons.css中查询出icon的依据。如果id在icons.css中找不到，它则采用默认的icon，即图集的第一个icon。从icons.css代码清单中，有意个background-position的属性，可以看出，它是以第一个icon为坐标原点，横向为X轴的负方向，纵向为Y轴的负方向，用-30px的偏移量来表示的。例如：第一行第一列的icon：background-position：0 0；第一行第二列：background-position：-30px 0；第二行第一列：background-position：0 -30px；
        上面分析了Icon的获取，现在我们来替换到Settings中各项的icons。替换的icon图集如图3所示，效果图如图4所示。