JsWidgets: add simple tab box

code/widgets/org.eclipse.scout.jswidgets.ui.html/src/main/js/desktop/WidgetsOutlineModel.ts

@@ -11,9 +11,9 @@ import {OutlineModel, PageWithNodes} from '@eclipse-scout/core';
 import {
   AccordionForm, BreadcrumbBarFieldForm, BrowserFieldForm, ButtonForm, CarouselForm, ChartFieldForm, CheckBoxFieldForm, DateFieldForm, DesktopForm, DesktopNotificationForm, DynamicPageWithNodes, EditableTableForm, FileChooserButtonForm,
   FileChooserFieldForm, FileChooserForm, FormForm, GroupBoxForm, HierarchicalTableForm, ImageFieldForm, ImageForm, IntegerFieldForm, LabelFieldForm, LabelForm, ListBoxForm, LogicalGridForm, MenuBarForm, MessageBoxForm, ModeSelectorForm,
-  MultilineSmartFieldForm, MultilineStringFieldForm, NumberFieldForm, PopupForm, ProposalFieldForm, RadioButtonGroupForm, ReloadablePageWithNodes, RestForm, SamplePageWithNodes, SamplePageWithTable, SequenceBoxForm, SliderFieldForm,
-  SmartFieldForm, StringFieldForm, SwitchForm, TabBoxForm, TableForm, TableSmartFieldForm, TagFieldForm, TileAccordionForm, TileGridForm, TooltipForm, TreeBoxForm, TreeForm, TreeSmartFieldForm, UiNotificationForm, VirtualTileGridForm,
-  WatchFieldForm, WidgetsOutlineOverview, WrappedFormFieldForm
+  MultilineSmartFieldForm, MultilineStringFieldForm, NumberFieldForm, PopupForm, ProposalFieldForm, RadioButtonGroupForm, ReloadablePageWithNodes, RestForm, SamplePageWithNodes, SamplePageWithTable, SequenceBoxForm, SimpleTabBoxForm,
+  SliderFieldForm, SmartFieldForm, StringFieldForm, SwitchForm, TabBoxForm, TableForm, TableSmartFieldForm, TagFieldForm, TileAccordionForm, TileGridForm, TooltipForm, TreeBoxForm, TreeForm, TreeSmartFieldForm, UiNotificationForm,
+  VirtualTileGridForm, WatchFieldForm, WidgetsOutlineOverview, WrappedFormFieldForm
 } from '../index';
 
 export default (): OutlineModel => ({
@@ -353,6 +353,15 @@ export default (): OutlineModel => ({
         }
       ]
     },
+    {
+      uuid: '36656553-0c2b-498a-8bb0-50c453326eec',
+      objectType: PageWithNodes,
+      leaf: true,
+      text: 'Simple Tab Box',
+      detailForm: {
+        objectType: SimpleTabBoxForm
+      }
+    },
     {
       uuid: '4565f42d-7432-4369-a38c-0fc0b717f3e6',
       objectType: PageWithNodes,

code/widgets/org.eclipse.scout.jswidgets.ui.html/src/main/js/index.ts

@@ -153,6 +153,8 @@ export * from './popup/PopupHorizontalAlignLookupCall';
 export * from './popup/PopupVerticalAlignLookupCall';
 export * from './popup/WidgetPopupPropertiesBox';
 export * from './popup/WidgetPopupPropertiesBoxModel';
+export * from './simpletabbox/SimpleTabBoxForm';
+export * from './simpletabbox/SimpleTabBoxFormModel';
 export * from './smartfield/SmartFieldForm';
 export * from './smartfield/SmartFieldFormModel';
 export * from './smartfield/SmartFieldPropertiesBox';

code/widgets/org.eclipse.scout.jswidgets.ui.html/src/main/js/simpletabbox/SimpleTabBoxForm.ts

@@ -0,0 +1,192 @@
+/*
+ * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import {
+  Action, CheckBoxField, Event, Form, FormModel, GroupBox, InitModelOf, Menu, MessageBoxes, models, PropertyChangeEvent, scout, SimpleTabAreaDisplayStyle, SimpleTabAreaPosition, SimpleTabBox, SimpleTabBoxViewActivateEvent, SimpleTabView,
+  SmartField, Status, StatusSeverity, StringField
+} from '@eclipse-scout/core';
+import SimpleTabBoxFormModel from './SimpleTabBoxFormModel';
+import {SimpleTabBoxFormWidgetMap} from '../index';
+
+export class SimpleTabBoxForm extends Form {
+  declare widgetMap: SimpleTabBoxFormWidgetMap;
+
+  simpleTabBox: SimpleTabBox;
+  addTabMenu: Menu;
+  deleteTabMenu: Menu;
+
+  simpleTabAreaPropertiesBox: GroupBox;
+  displayStyleField: SmartField<SimpleTabAreaDisplayStyle>;
+  positionField: SmartField<SimpleTabAreaPosition>;
+
+  simpleTabPropertiesBox: GroupBox;
+  titleField: StringField;
+  subTitleField: StringField;
+  iconIdField: SmartField<string>;
+  closableField: CheckBoxField;
+  statusField: SmartField<StatusSeverity>;
+
+  protected _tabCounter: number;
+
+  constructor() {
+    super();
+
+    this.simpleTabBox = null;
+    this.addTabMenu = null;
+    this.deleteTabMenu = null;
+
+    this.simpleTabAreaPropertiesBox = null;
+    this.displayStyleField = null;
+    this.positionField = null;
+
+    this.simpleTabPropertiesBox = null;
+    this.titleField = null;
+    this.subTitleField = null;
+    this.iconIdField = null;
+    this.closableField = null;
+    this.statusField = null;
+
+    this._tabCounter = 0;
+  }
+
+  protected override _jsonModel(): FormModel {
+    return models.get(SimpleTabBoxFormModel);
+  }
+
+  protected override _init(model: InitModelOf<this>) {
+    super._init(model);
+
+    this.simpleTabBox = this.widget('SimpleTabBox');
+    this.simpleTabBox.on('viewActivate', this._onSimpleTabBoxViewActivate.bind(this));
+
+    this.addTabMenu = this.widget('AddTabMenu');
+    this.addTabMenu.on('action', this._onAddTabMenuAction.bind(this));
+
+    this.deleteTabMenu = this.widget('DeleteTabMenu');
+    this.deleteTabMenu.on('action', this._onDeleteTabMenuAction.bind(this));
+
+    this.simpleTabAreaPropertiesBox = this.widget('SimpleTabAreaPropertiesBox');
+
+    this.displayStyleField = this.widget('DisplayStyleField');
+    this.displayStyleField.setValue(this.simpleTabBox.tabArea.displayStyle);
+    this.displayStyleField.on('propertyChange:value', this._onDisplayStyleFieldValueChange.bind(this));
+
+    this.positionField = this.widget('PositionField');
+    this.positionField.setValue(this.simpleTabBox.tabArea.position);
+    this.positionField.on('propertyChange:value', this._onPositionFieldValueChange.bind(this));
+
+    this.simpleTabPropertiesBox = this.widget('SimpleTabPropertiesBox');
+
+    this.titleField = this.widget('TitleField');
+    this.titleField.on('propertyChange:value', this._onTitleFieldValueChange.bind(this));
+
+    this.subTitleField = this.widget('SubTitleField');
+    this.subTitleField.on('propertyChange:value', this._onSubTitleFieldValueChange.bind(this));
+
+    this.iconIdField = this.widget('IconIdField');
+    this.iconIdField.on('propertyChange:value', this._onIconIdFieldValueChange.bind(this));
+
+    this.closableField = this.widget('ClosableField');
+    this.closableField.on('propertyChange:value', this._onClosableFieldValueChange.bind(this));
+
+    this.statusField = this.widget('StatusField');
+    this.statusField.on('propertyChange:value', this._onStatusFieldValueChange.bind(this));
+  }
+
+  protected _onSimpleTabBoxViewActivate(event: SimpleTabBoxViewActivateEvent) {
+    this._updateSimpleTabPropertyFields();
+  }
+
+  protected _updateSimpleTabPropertyFields() {
+    const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
+
+    this.titleField.setValue(activeTab?.title);
+    this.subTitleField.setValue(activeTab?.subTitle);
+    this.iconIdField.setValue(activeTab?.iconId);
+    this.closableField.setValue(activeTab?.closable);
+    this.statusField.setValue(activeTab?.status?.severity);
+  }
+
+  protected _onAddTabMenuAction(event: Event<Action>) {
+    this.simpleTabBox.addView(this._createSampleTabView());
+    this.simpleTabPropertiesBox.setEnabled(true);
+  }
+
+  protected _createSampleTabView() {
+    const count = ++this._tabCounter;
+
+    return scout.create(SimpleTabBoxViewGroupBox, {
+      parent: this.simpleTabBox,
+      title: 'Tab ' + count
+    });
+  }
+
+  protected _onDeleteTabMenuAction(event: Event<Action>) {
+    this.simpleTabBox.removeView(this.simpleTabBox.currentView);
+
+    if (this.simpleTabBox.tabArea.getTabs().length === 0) {
+      this.simpleTabPropertiesBox.setEnabled(false);
+      this._updateSimpleTabPropertyFields();
+    }
+  }
+
+  protected _onDisplayStyleFieldValueChange(event: PropertyChangeEvent<SimpleTabAreaDisplayStyle>) {
+    this.simpleTabBox.tabArea.setDisplayStyle(event.newValue);
+  }
+
+  protected _onPositionFieldValueChange(event: PropertyChangeEvent<SimpleTabAreaPosition>) {
+    this.simpleTabBox.tabArea.setPosition(event.newValue);
+  }
+
+  protected _onTitleFieldValueChange(event: PropertyChangeEvent<string>) {
+    const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
+    activeTab?.setTitle(event.newValue);
+  }
+
+  protected _onSubTitleFieldValueChange(event: PropertyChangeEvent<string>) {
+    const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
+    activeTab?.setSubTitle(event.newValue);
+  }
+
+  protected _onIconIdFieldValueChange(event: PropertyChangeEvent<string>) {
+    const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
+    activeTab?.setIconId(event.newValue);
+  }
+
+  protected _onClosableFieldValueChange(event: PropertyChangeEvent<boolean>) {
+    const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
+    activeTab?.setClosable(event.newValue);
+  }
+
+  protected _onStatusFieldValueChange(event: PropertyChangeEvent<StatusSeverity>) {
+    const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
+    activeTab.setStatus(scout.create(Status, {
+      severity: event.newValue,
+      message: 'some status message..'
+    }));
+  }
+}
+
+export class SimpleTabBoxViewGroupBox extends GroupBox implements SimpleTabView {
+
+  protected override _attach() {
+    this.$parent.append(this.$container);
+  }
+
+  protected override _detach() {
+    this.$container.detach();
+  }
+
+  abort() {
+    MessageBoxes.createOk(this)
+      .withBody(this.session.text('ThanksForClickingMe'))
+      .withYes(this.session.text('YoureWelcome'))
+      .buildAndOpen();
+  }
+}