[FxOS] Settings App – Dialog v.s. Panel

fxos

In Settings app, we have two different concepts – one is Dialog while the other one is Panel. The main difference between them is how they are presented. From UX spec, if we need users to do some actions and then submit, normally they will be presented with Dialog with cancel and submit button. While for Panel, it is just a simple view that focuses on presenting data and basically you can notice that there is always a “<“ backward arrow in the header that can help you navigate back to previous panel.

63BF65E7-D01A-4934-B67B-D396E067C044

Wifi Auth Dialog

C2C748FE-3B37-4CF1-A0B4-C96DE1767C15

Wifi Panel

If you are going to create a dialog, here comes some notes that you need to be aware of at first. Let’s use Wifi Auth Dialog for example :

[Setup]

  1. You have to register one section element in Setting’s index.html.
    1. <section is=”wifi-auth” role=”region” id=”wifi-auth” class=”dialog”></section>
    2. remember, you need to add one extra dialog class to make sure the section can be applied with right CSS style
  2. Remember to add one more link element in index.html to make sure related sub-document will be loaded.
    1. <link rel=”import” href=”/elements/wifi_auth.html”>
  3. And then, you can follow scripts under settings/js/panels/* to make sure all dialog needed codes can be loaded.

Take settings/js/panels/wifi_auth/panel.js for example, for Dialog, there are some special API you can use and something that you need to know.

  1. In order to pass data back to caller, you can use onCancel and onSubmit function with resolved data. By doing so, caller can use DialogService.show(‘panelId’).then(function(result) {}); to get needed data.
  2. And also, if you want to programmatically cancel or submit, after Bug 1166495 is landed, you can use this.cancel() and this.submit() to achieve this.

For Panel, you can follow [Setup] part above without adding extra class and everything is done ! Based on our design, they share the same interface and there is no much difference between them, just make sure you won’t use onSubmit(), onCancel() and Dialog related API described above, then you are good !

[Javascript] performance issues when appending in DOM tree

Image Credit

According to John Resig’s blog, you can see that there is 2x-3x performance better when using fragments.

Take his code for example :

https://gist.github.com/EragonJ/6111312.js

If you use original append to append divs one by one, then you will see the blink on the screen especially when you are going to append a huge list. But, when using fragments, it is another kind of structure to hold these temporary divs and will be appended to the target all together at the same time.

So if one day you have to deal with massive DOM manipulation problems without 3rd party libraries’ help, remember to use it.

Cheeers 😛

Read More on : http://ejohn.org/blog/dom-documentfragments/

[JS] jQuery.css() problem when using Firefox

最近在公司開發JS的程式的時候,很多時候都會利用到快速又方便的jQuery Library,而這次就很剛好的遇到了Bug,花了很多時間才解出來,以下為測試環境(FF 3.59 , 3.6 ):

假設我現在有一個DOM的元素,是一個img,當我設定其CSS為「display:none;」時,在FF上就會沒辦法利用
「jQuery.css(‘left’) or jQuery.css(‘top’)」來把這個值取出。就算你已經設定好left或是top的值,都只會抓到0px。

範例程式碼:
http://gist.github.com/518809.js?file=gistfile1.html

所以為了要解決在元素被hidden時不能取值的問題,就只能用比較髒的手段來抓到這個值,就是利用「visibility」。

什麼是visibility?它和display不同的地方在於說,display:none會直接不顯示這個元素並不佔用空間;而visibilty:hidden則是不顯示這個元素但是卻仍存在並佔用空間。

所以這個很Tricky的方法可以參考下面:
http://gist.github.com/518819.js?file=gistfile1.html

這樣就可以成功的取到left的值(top亦同)而不會影響UI的部分了,算是這次遇到最無言的Bug吧。

下次見囉。

δ 2011/01/20: 又開始繼續維護這個專案,其實對 FF 3.6.8 來說(不確定其他版本是否也會有相同問題),就算是最新版本的 jQuery 1.4.* 都無法從 display:none 的元素中利用 .css() 來取得特定的屬性值,因此我利用 jsfiddle 寫了一組完整測試,包含 display:none 及 visibility:hidden 元素的各種可能,請自己用你的瀏覽器來測試一下吧。