Versions Compared

Old Version 16

changes.mady.by.user Srimanth

Saved on

compared with

New Version 17

changes.mady.by.user Srimanth

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Modify metainfo.xml to define a theme by including a themes block.

    <themes-dir>themes-dir</themes-dir>
    <themes>
      <theme>
        <fileName>theme.json</fileName>
        <default>true</default>
      </theme>
    </themes>

  2. The optional <themes-dir> element can be used if the default theme folder of 'themes' is not desired, or taken by another service in the same metainfo.xml.

  3. Multiple themes can be defined, however only the first default theme will be used for the service.

  4. Each theme points to a theme JSON file (via fileName element) in the themes-dir folder.

  5. The theme.json file contains one configuration block containing three main keys

    1. layouts - specify tabs, sections and sub-section layout

    2. placement - specify configurations to place in sub-sections

    3. widgets - specify which UI widgets to use for each config

      {
        "configuration": {
          "layouts": [
            ...
          ],
          "placement": {
            ...
          },
          "widgets": [
            ...
          ]
        }
      }

       

  6. Layouts - Multiple layouts can be defined in a theme. Currently only the first layout will be used while rendering. A layout has following content:

    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.

...