[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 !

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s