[
  {
    name: 'scrollarea',
    type: 'ScrollArea',
    property: { widget_resizable: true, frame_shape: 'NoFrame' },
    pack: {},
    child: [
      {
        name: 'formlayout',
        type: 'FormLayout',
        property: { label_alignment: 'AlignTop | AlignRight', horizontal_spacing: 20, vertical_spacing: 10, margin: 20 },
        pack: {},
        child: [
          {
            name: 'background',
            type: 'ComboBox',
            title: self.ttr('Background Color'),
            property: {
              editable: true,
            },
            pack: { label: self.ttr('Background Color') },
            initCallback: function (obj, self) {
              self.setColorList(obj);
            },
            getter: function (obj, self) { return obj.currentText },
            setter: function (obj, value, self) { obj.setCurrentName(value); obj.setCurrentText(value) },
          },
          {
            name: 'url_widget',
            type: 'Widget',
            pack: { label: self.ttr('Background Image') },
            child: [
              {
                name: 'hboxlayout',
                type: 'HBoxLayout',
                property: { spacing: 0, margin: 0, },
                child: [
                  {
                    name: 'backgroundImage',
                    type: 'LineEdit',
                    title: self.ttr('Background Image'),
                  },
                  {
                    name: '',
                    type: 'PushButton',
                    property: { text: '...', maximumSize: { width: 20 } },
                    callback: function () {
                      var url = self.selectImageDialog();
                      if (url.length > 0) { this.getObject('backgroundImage').setText(url); }
                    },
                  },
                ]
              },
            ]
          },
          {
            name: 'dockarea_widget',
            type: 'Widget',
            title: self.ttr('DockArea Alignment'),
            pack: { label: self.ttr('DockArea Alignment') },
            child: [
              {
                name: 'gridlayout',
                type: 'GridLayout',
                property: { spacing: 5, margin: 0, },
                child: [
                  {
                    name: 'topLeft',
                    type: 'ComboBox',
                    property: {
                      editable: true,
                      item_list: [
                        { name: 'horizontal', text: self.ttr('Horizontal') },
                        { name: 'vertical', text: self.ttr('Vertical') },
                      ]
                    },
                    pack: { row: 0, column: 0 },
                  },
                  {
                    name: 'top',
                    type: 'ComboBox',
                    property: {
                      editable: true,
                      item_list: [
                        { name: 'horizontal', text: self.ttr('Horizontal') },
                        { name: 'vertical', text: self.ttr('Vertical') },
                      ]
                    },
                    pack: { row: 0, column: 1 },
                  },
                  {
                    name: 'topRight',
                    type: 'ComboBox',
                    property: {
                      editable: true,
                      item_list: [
                        { name: 'horizontal', text: self.ttr('Horizontal') },
                        { name: 'vertical', text: self.ttr('Vertical') },
                      ]
                    },
                    pack: { row: 0, column: 2 },
                  },
                  {
                    name: 'left',
                    type: 'ComboBox',
                    property: {
                      editable: true,
                      item_list: [
                        { name: 'horizontal', text: self.ttr('Horizontal') },
                        { name: 'vertical', text: self.ttr('Vertical') },
                      ]
                    },
                    pack: { row: 1, column: 0 },
                  },
                  {
                    name: 'center',
                    type: 'ComboBox',
                    property: {
                      editable: true,
                      item_list: [
                        { name: 'horizontal', text: self.ttr('Horizontal') },
                        { name: 'vertical', text: self.ttr('Vertical') },
                      ]
                    },
                    pack: { row: 1, column: 1 },
                  },
                  {
                    name: 'right',
                    type: 'ComboBox',
                    property: {
                      editable: true,
                      item_list: [
                        { name: 'horizontal', text: self.ttr('Horizontal') },
                        { name: 'vertical', text: self.ttr('Vertical') },
                      ]
                    },
                    pack: { row: 1, column: 2 },
                  },
                  {
                    name: 'bottomLeft',
                    type: 'ComboBox',
                    property: {
                      editable: true,
                      item_list: [
                        { name: 'horizontal', text: self.ttr('Horizontal') },
                        { name: 'vertical', text: self.ttr('Vertical') },
                      ]
                    },
                    pack: { row: 2, column: 0 },
                  },
                  {
                    name: 'bottom',
                    type: 'ComboBox',
                    property: {
                      editable: true,
                      item_list: [
                        { name: 'horizontal', text: self.ttr('Horizontal') },
                        { name: 'vertical', text: self.ttr('Vertical') },
                      ]
                    },
                    pack: { row: 2, column: 1 },
                  },
                  {
                    name: 'bottomRight',
                    type: 'ComboBox',
                    property: {
                      editable: true,
                      item_list: [
                        { name: 'horizontal', text: self.ttr('Horizontal') },
                        { name: 'vertical', text: self.ttr('Vertical') },
                      ]
                    },
                    pack: { row: 2, column: 2 },
                  },
                ]
              },
            ]
          },
          {
            name: 'module_click_type',
            type: 'RadioBox',
            property: {
              item_list: [
                { name: 'dclick', text: self.ttr('Double Click') },
                { name: 'click', text: self.ttr('Click') },
              ],
              current_name: 'click'
            },
            pack: {
              label: self.ttr('Module Click Type')
            }
          }
        ]
      },
    ]
  }
]