Confirmed users
502
edits
Gaia/Settings/docs: Difference between revisions
→Panel
(→Panel) |
(→Panel) |
||
| Line 18: | Line 18: | ||
A panel comprises HTML elements and an optional associated module. This [https://github.com/mozilla-b2g/gaia/tree/master/apps/settings#1-create-an-html-template document] shows how to create a new panel. | A panel comprises HTML elements and an optional associated module. This [https://github.com/mozilla-b2g/gaia/tree/master/apps/settings#1-create-an-html-template document] shows how to create a new panel. | ||
All panels are delay loaded. HTML elements of a panel are stored in a comment node before they are rendered. The actual UI elements are created and appended to the DOM tree only when users navigate to the panel. '''"PanelCache"'''(js/modules/panel_cache.js) then look for the path of the associated module specified in the '''"panel"''' element within the appended elements. If there is no module specified, the basic module '''"Panel"''' is used. | All panels are delay loaded. HTML elements of a panel are stored in a comment node before they are rendered. The actual UI elements are created and appended to the DOM tree only when users navigate to the panel. '''"PanelCache"'''(js/modules/panel_cache.js) then look for the path of the associated module specified in the '''"panel"''' element within the appended elements. If there is no module specified, the basic module '''"Panel"'''(js/modules/panel.js) is used. | ||
The associated module is usually deriving from '''"SettingsPanel"'''(js/modules/settings_panel.js) or '''"Panel"'''(js/modules/panel.js). '''Panel''' provides the basic functionality that allows settings app to control the visibility and life cycle. In addition to that, '''SettingsPanel''' further creates bindings between the UI elements and the settings database when the module is being initialized. This part is handled in '''"PanelUtils"'''(js/modules/panel_utils.js). Details of creating an associated module please refer to [https://github.com/mozilla-b2g/gaia/tree/master/apps/settings#modulepaneljs here]. | The associated module is usually deriving from '''"SettingsPanel"'''(js/modules/settings_panel.js) or '''"Panel"'''(js/modules/panel.js). '''Panel''' provides the basic functionality that allows settings app to control the visibility and life cycle. In addition to that, '''SettingsPanel''' further creates bindings between the UI elements and the settings database when the module is being initialized. This part is handled in '''"PanelUtils"'''(js/modules/panel_utils.js). Details of creating an associated module please refer to [https://github.com/mozilla-b2g/gaia/tree/master/apps/settings#modulepaneljs here]. | ||