[
  {
    name: 'scrollarea',
    type: 'ScrollArea',
    property: { widget_resizable: true, frame_shape: 'NoFrame' },
    child: [
      {
        name: 'formlayout',
        type: 'FormLayout',
        property: { label_alignment: 'AlignTop | AlignRight', horizontal_spacing: 20, vertical_spacing: 10, margin: 20 },
        child: [
          {
            name: 'position',
            type: 'LineEdit',
            initCallback: function (obj, self) {
              obj.hide();
            }
          },
          {
            name: 'title',
            type: 'LineEdit',
            title: self.ttr('Title'),
            pack: { label: self.ttr('Title') },
            validate: 'NOTNULL',
          },
          {
            name: 'title_en',
            type: 'LineEdit',
            pack: { label: self.ttr('Title(English)') },
            state: function () {
              return APP.isDefinedLanguage('en') ? 'Show' : 'Hide';
            },
          },
          {
            name: 'title_zhcn',
            type: 'LineEdit',
            pack: { label: self.ttr('Title(Chinese Simplified)') },
            state: function () {
              return APP.isDefinedLanguage('zhcn') ? 'Show' : 'Hide';
            },
          },
          {
            name: 'title_zhtw',
            type: 'LineEdit',
            pack: { label: self.ttr('Title(Chinese Tranditional)') },
            state: function () {
              return APP.isDefinedLanguage('zhtw') ? 'Show' : 'Hide';
            },
          },
          {
            name: 'icon',
            type: 'IconSelector',
            property: { iconBgColor: 'blue' },
            pack: { label: self.ttr('Icon Name') },
          },
          {
            name: 'searchCode',
            type: 'LineEdit',
            pack: { label: self.ttr('Search Code') },
          },
          {
            name: 'layoutStyle',
            type: 'ComboBox',
            property: {
              item_list: [
                { name: '1x1', text: '1X1' },
                { name: '2x1', text: '2X1' },
                { name: '2x2', text: '2X2' },
                { name: '2x4', text: '2X4' },
                { name: '4x1', text: '4X1' },
                { name: '4x2', text: '4X2' },
                { name: '4x4', text: '4X4' }
              ]
            },
            pack: { label: self.ttr('Layout Size') },
          },
          {
            name: 'background',
            type: 'ComboBox',
            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: 'urlAddress',
            type: 'LineEdit',
            pack: { label: self.ttr('Url Address') },
          },
        ]
      },
    ]
  },
]