Page History

...

1. Tabs: Multiple tabs can be defined in a layout. Each tab can have its contents laid out using a simple grid-layout using the tab-columns and tab-rows keys.
   
   In below example the Settings tab has a grid of 3 rows and 2 columns in which sections can be placed.
   

   "layouts": [ { "name": "default", "tabs": [ { "name": "settings", "display-name": "Settings", "layout": { "tab-columns": "2", "tab-rows": "3", "sections": [ … ] } } ] } ]

2. Sections: Each section is defined inside a tab and specifies its location and size inside the tab's grid-layout by using the row-index, column-index, row-span and column-span keys. Being a container itself, it can further define a grid-layout for the sub-sections it contains using the section-rows and section-columns keys.
   
   In below example the MapReduce section occupies the first cell of the Settings tab grid, and itself has a grid-layout of 1 row and 3 columns.
   

   "sections": [ { "name": "section-mr-scheduler", "display-name": "MapReduce", "row-index": "0", "column-index": "0", "row-span": "1", "column-span": "1", "section-columns": "3", "section-rows": "1", "subsections": [ ... ] }, ... ]

    

3. Sub-sections: Each sub-section is defined inside a section and specifies its location and size inside the section's grid-layout using the row-index, column-index, row-span and column-span keys. Each section also has an optional border boolean key which tells if a border should encapsulate its content.
   

   "subsections": [ { "name": "subsection-mr-scheduler-row1-col1", "display-name": "MapReduce Framework", "row-index": "0", "column-index": "0", "row-span": "1", "column-span": "1" }, ... ]

    

...

1. Placement: Specifies the order of configurations that are to be placed into each sub-section. Each placement identifies a config, and which sub-section it should appear in. The placement specifies which layout it applies to using the configuration-layout key.
   

...

...