[FxOS] Settings App – Wifi




Wifi Panel



Wifi Panel (A)


Wifi Panel (B)


Wifi panel is the main entry point for the other dialogs / panels. As you may see on the screenshot above, in this panel, users can turn on / off Wifi, decide which AP to connect with and manage certificates or whatever settings related to Wifi.

If you check settings/js/panels/wifi/, you will notice a script which is called wifi_network_list.js. This script is so important that we will use it to generate a list of APs that users can interact with. For example, if you click on any listed AP, it will automatically check its own encryption to show which kind of dialog or just connect to that AP directly.

In addition to this, it will also automatically check its current status from Gecko to see whether it should update its signal / wording … etc. By doing so, we encapsulate all logics within this list and caller doesn’t have to know these details when using it.

Wifi WPS Panel (Dialog)



Wifi WPS Panel


WPS is another way to connect to AP but this needs some special support from it to make the functionality work. If your AP does support this, users can click on Connect with WPS button to select which way to use to connect with WPS.

From Gaia side, there is no much works here and we simply provide a basic UI for users to choose and configure. So for more details, please go check Gecko’s source code for this part.

Wifi Status Panel (Dialog)



Wifi Status Panel


When clicking on connected AP in Wifi Panel, this dialog would be popped up to tell users all needed information about this AP including Security, Signal strength, IP address and Link Speed. In addition to this, you can also forget this AP by clicking right-up button.

Wifi Auth Panel (Dialog)



Wifi Auth Panel


If users click on non-connected and encrypted AP from Wifi panel, we will pop up Wifi Auth Panel to users. Compared with non-encrypted AP, normally users have to type password or do some extra pre-settings to connect to this AP.

Wifi Manage Networks Panel



Wifi Manage Networks Panel


In this panel, we will list down all connected AP here. If users click on the item, the confirm pop-up will be shown to double confirm whether they really want to remove forget connected AP or not. So for this panel’s code, there is no much complex works but only some UI related stuffs.

Wifi Join Hidden Panel (Dialog)



Wifi Join Hidden Panel


This panel is pretty simple enough and it will transform all user’s input into a recognizable object for WifiManager. But there is one thing that should be noticed. Because there are some shared UI / logics for users to select security, EAP method … etc across panels (Wifi Auth Panel & Wifi Join Hidden Panel), we have to use a shared script to control them.

But, sadly, because there are still some minor difference between these two pages, in shard script, we will check some element’s existence before manipulating. So please remember to double check UI codes and shard script for this part before adding new rules. Otherwise, you may break another panel.

Wifi Manage Certificates Panel



Wifi Manage Certificates Panel


If users are trying to connect with AP with WPA-EAP encryption, under some special EAP methods, they need users to provide needed Server Certificates and User Certificates for authentications.

So, if users are trying to connect to AP with these EAP methods, they have to go to this panel and import needed certificates first, otherwise, we can’t find out needed certificates when users are trying to join hidden network.

Wifi Select Certificate File Panel



Wifi Select Certificate File Panel


In this panel, we will list down all possible certificates from SD card and present them to users. When clicking on these items, we will redirect them to Wifi Enter Certificate Nickname Panel.

Wifi Enter Certificate Nickname Panel (Dialog)



Wifi Enter Certificate Nickname Panel


After selecting needed certificate from Wifi Select Certificate File Panel, users will be redirected to this dialog. In this dialog, users can decide whether to rename this certificate or not. Interestingly, if you already have one certificate named with the same name, you are not allowed to name it again because Gecko would throw out some error in this special case.

[FxOS] a quick overview of Firefox OS


(這是我在育樂街發現的新店叫做 Gecko xD)

2013/11/29 在台南成功大學的演講,題目是和 Firefox OS 有關的 overview。來的人很多,說實在真的也很緊張,還好有提前半小時來測試環境才知道原來計中的 Firefox 是用 19 版的 … 現在最新的都是 25 版了,難怪 Firefox OS simulator 跑不起來,真的是還好有先測試,要不然就要出包了 …

很感謝 Timdream & Fred 給我這個機會下台南演講,真心希望學弟妹能夠從中得到些什麼,也期待未來大家再相見的一天 xD

附上當天的 slide :


[FxOS] Deep into Template.js

Image Credit


因為最近開始接觸很多 FxOS 核心的程式碼,所以發現了很多精鍊的程式碼,其中有一個很有趣的是 Template.js。

市面上有一大堆 Template engine,基本的功能該有的都有,幾乎都大同小異。但是 FxOS 自己的 Template 卻相當吸引我的注意,因為他才短短的一百多行就實作了一個 Template engine 該做的所有事情(這邊只討論 Search then Replace,不考慮 inline logic )而且有一個很關鍵的事情,就是他巧妙的解決了 Template 存在性的問題。

通常一般 Front-end 的 Template engine 都有一個問題,那就是要把 Template 存在哪裡?

Way 1 – by myself

愛用 jQuery 的我通常都是這樣做的:一開始先透過 selector 把 template 載入(一般都會 cache 住,只是我這個範例沒有特別寫這一段),而這個 template 本身會搭配一個 hide 的 class 避免一開始頁面在 render 的時候會被使用者看到,最後利用 sub-selector 把相對應的地方換成新值,最後再拿掉 hide class 並塞到 DOM tree 內。


恩,整體看起來好像還不賴,整個 code 簡單好懂,也做了 template cache(我沒特別寫,但是通常都會被我 cache 到某個 Controller 下),後續維護也只需要加上相對應的 selector 然後替換值就好了。

Way 2 – by Handlebars.js

雖然 Way 1 已經很好了,但是有時候需要 toggle hide class 其實還蠻麻煩的,能不能不要把 CSS 和 Template 扯在一起?有了這個想法後,我就開始到處尋找可能的做法,最後找到了 Handlebars.js,他巧妙的利用 Script tag 做到這件事情:


它的作法是去改變 script tag 的 type,你可以看 w3c 上面的說明,只要 browser 看不懂 script type 的話,它一致都會把它 render 成 text,又因為 script tag 本身就不會被 render 出來,所以就達到把 template 藏起來的效果,最後只要搭配 selector 去把它拉出來然後替換值就可以了。

Way 3 – by Template.js in FxOS

雖然 Way2 感覺起來好像不錯,但是利用 script type 這種 hack 的方式感覺有點不是這麼優雅,因為 Template 的東西本來就不該存活在script tag 內,到底還有沒有別的辦法來做到這件事情呢?

有,我在 Template.js 找到了。


從程式碼我們可以發現他會一直去尋找所有的 sibling 直到找到整個註解,在 HTML 裡面,註解就是 <!– –>,所以一開始很巧妙的,我們的 template 就是被註解起來的,也就不會被使用者看到內容,也因為一開始就看不見,所以我們就根本不需要去做 CSS 的視覺欺騙,整個就是把 nodeType 利用到極致,使用先天的特性漂亮的解決了這個問題,也就產生了這個 Template.js 。

很有趣吧,有興趣的人可以去看 Template.js 作者 Rick 的 Github,其他的就讓我們留到下次再來分享吧 😛