Skip to content

Commit b79db23

Browse files
torstentromplerfschinkel
torstentrompler
authored and
fschinkel
committed
JsWidgets: add simple tab box
1 parent ce18bf0 commit b79db23

File tree

4 files changed

+395
-3
lines changed

4 files changed

+395
-3
lines changed

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import {OutlineModel, PageWithNodes} from '@eclipse-scout/core';
1111
import {
1212
AccordionForm, BreadcrumbBarFieldForm, BrowserFieldForm, ButtonForm, CarouselForm, ChartFieldForm, CheckBoxFieldForm, DateFieldForm, DesktopForm, DesktopNotificationForm, DynamicPageWithNodes, EditableTableForm, FileChooserButtonForm,
1313
FileChooserFieldForm, FileChooserForm, FormForm, GroupBoxForm, HierarchicalTableForm, ImageFieldForm, ImageForm, IntegerFieldForm, LabelFieldForm, LabelForm, ListBoxForm, LogicalGridForm, MenuBarForm, MessageBoxForm, ModeSelectorForm,
14-
MultilineSmartFieldForm, MultilineStringFieldForm, NumberFieldForm, PopupForm, ProposalFieldForm, RadioButtonGroupForm, ReloadablePageWithNodes, RestForm, SamplePageWithNodes, SamplePageWithTable, SequenceBoxForm, SliderFieldForm,
15-
SmartFieldForm, StringFieldForm, SwitchForm, TabBoxForm, TableForm, TableSmartFieldForm, TagFieldForm, TileAccordionForm, TileGridForm, TooltipForm, TreeBoxForm, TreeForm, TreeSmartFieldForm, UiNotificationForm, VirtualTileGridForm,
16-
WatchFieldForm, WidgetsOutlineOverview, WrappedFormFieldForm
14+
MultilineSmartFieldForm, MultilineStringFieldForm, NumberFieldForm, PopupForm, ProposalFieldForm, RadioButtonGroupForm, ReloadablePageWithNodes, RestForm, SamplePageWithNodes, SamplePageWithTable, SequenceBoxForm, SimpleTabBoxForm,
15+
SliderFieldForm, SmartFieldForm, StringFieldForm, SwitchForm, TabBoxForm, TableForm, TableSmartFieldForm, TagFieldForm, TileAccordionForm, TileGridForm, TooltipForm, TreeBoxForm, TreeForm, TreeSmartFieldForm, UiNotificationForm,
16+
VirtualTileGridForm, WatchFieldForm, WidgetsOutlineOverview, WrappedFormFieldForm
1717
} from '../index';
1818

1919
export default (): OutlineModel => ({
@@ -353,6 +353,15 @@ export default (): OutlineModel => ({
353353
}
354354
]
355355
},
356+
{
357+
uuid: '36656553-0c2b-498a-8bb0-50c453326eec',
358+
objectType: PageWithNodes,
359+
leaf: true,
360+
text: 'Simple Tab Box',
361+
detailForm: {
362+
objectType: SimpleTabBoxForm
363+
}
364+
},
356365
{
357366
uuid: '4565f42d-7432-4369-a38c-0fc0b717f3e6',
358367
objectType: PageWithNodes,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,8 @@ export * from './popup/PopupHorizontalAlignLookupCall';
153153
export * from './popup/PopupVerticalAlignLookupCall';
154154
export * from './popup/WidgetPopupPropertiesBox';
155155
export * from './popup/WidgetPopupPropertiesBoxModel';
156+
export * from './simpletabbox/SimpleTabBoxForm';
157+
export * from './simpletabbox/SimpleTabBoxFormModel';
156158
export * from './smartfield/SmartFieldForm';
157159
export * from './smartfield/SmartFieldFormModel';
158160
export * from './smartfield/SmartFieldPropertiesBox';

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

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
/*
2+
* Copyright (c) 2010, 2025 BSI Business Systems Integration AG
3+
*
4+
* This program and the accompanying materials are made
5+
* available under the terms of the Eclipse Public License 2.0
6+
* which is available at https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*/
10+
import {
11+
Action, CheckBoxField, Event, Form, FormModel, GroupBox, InitModelOf, Menu, MessageBoxes, models, PropertyChangeEvent, scout, SimpleTabAreaDisplayStyle, SimpleTabAreaPosition, SimpleTabBox, SimpleTabBoxViewActivateEvent, SimpleTabView,
12+
SmartField, Status, StatusSeverity, StringField
13+
} from '@eclipse-scout/core';
14+
import SimpleTabBoxFormModel from './SimpleTabBoxFormModel';
15+
import {SimpleTabBoxFormWidgetMap} from '../index';
16+
17+
export class SimpleTabBoxForm extends Form {
18+
declare widgetMap: SimpleTabBoxFormWidgetMap;
19+
20+
simpleTabBox: SimpleTabBox;
21+
addTabMenu: Menu;
22+
deleteTabMenu: Menu;
23+
24+
simpleTabAreaPropertiesBox: GroupBox;
25+
displayStyleField: SmartField<SimpleTabAreaDisplayStyle>;
26+
positionField: SmartField<SimpleTabAreaPosition>;
27+
28+
simpleTabPropertiesBox: GroupBox;
29+
titleField: StringField;
30+
subTitleField: StringField;
31+
iconIdField: SmartField<string>;
32+
closableField: CheckBoxField;
33+
statusField: SmartField<StatusSeverity>;
34+
35+
protected _tabCounter: number;
36+
37+
constructor() {
38+
super();
39+
40+
this.simpleTabBox = null;
41+
this.addTabMenu = null;
42+
this.deleteTabMenu = null;
43+
44+
this.simpleTabAreaPropertiesBox = null;
45+
this.displayStyleField = null;
46+
this.positionField = null;
47+
48+
this.simpleTabPropertiesBox = null;
49+
this.titleField = null;
50+
this.subTitleField = null;
51+
this.iconIdField = null;
52+
this.closableField = null;
53+
this.statusField = null;
54+
55+
this._tabCounter = 0;
56+
}
57+
58+
protected override _jsonModel(): FormModel {
59+
return models.get(SimpleTabBoxFormModel);
60+
}
61+
62+
protected override _init(model: InitModelOf<this>) {
63+
super._init(model);
64+
65+
this.simpleTabBox = this.widget('SimpleTabBox');
66+
this.simpleTabBox.on('viewActivate', this._onSimpleTabBoxViewActivate.bind(this));
67+
68+
this.addTabMenu = this.widget('AddTabMenu');
69+
this.addTabMenu.on('action', this._onAddTabMenuAction.bind(this));
70+
71+
this.deleteTabMenu = this.widget('DeleteTabMenu');
72+
this.deleteTabMenu.on('action', this._onDeleteTabMenuAction.bind(this));
73+
74+
this.simpleTabAreaPropertiesBox = this.widget('SimpleTabAreaPropertiesBox');
75+
76+
this.displayStyleField = this.widget('DisplayStyleField');
77+
this.displayStyleField.setValue(this.simpleTabBox.tabArea.displayStyle);
78+
this.displayStyleField.on('propertyChange:value', this._onDisplayStyleFieldValueChange.bind(this));
79+
80+
this.positionField = this.widget('PositionField');
81+
this.positionField.setValue(this.simpleTabBox.tabArea.position);
82+
this.positionField.on('propertyChange:value', this._onPositionFieldValueChange.bind(this));
83+
84+
this.simpleTabPropertiesBox = this.widget('SimpleTabPropertiesBox');
85+
86+
this.titleField = this.widget('TitleField');
87+
this.titleField.on('propertyChange:value', this._onTitleFieldValueChange.bind(this));
88+
89+
this.subTitleField = this.widget('SubTitleField');
90+
this.subTitleField.on('propertyChange:value', this._onSubTitleFieldValueChange.bind(this));
91+
92+
this.iconIdField = this.widget('IconIdField');
93+
this.iconIdField.on('propertyChange:value', this._onIconIdFieldValueChange.bind(this));
94+
95+
this.closableField = this.widget('ClosableField');
96+
this.closableField.on('propertyChange:value', this._onClosableFieldValueChange.bind(this));
97+
98+
this.statusField = this.widget('StatusField');
99+
this.statusField.on('propertyChange:value', this._onStatusFieldValueChange.bind(this));
100+
}
101+
102+
protected _onSimpleTabBoxViewActivate(event: SimpleTabBoxViewActivateEvent) {
103+
this._updateSimpleTabPropertyFields();
104+
}
105+
106+
protected _updateSimpleTabPropertyFields() {
107+
const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
108+
109+
this.titleField.setValue(activeTab?.title);
110+
this.subTitleField.setValue(activeTab?.subTitle);
111+
this.iconIdField.setValue(activeTab?.iconId);
112+
this.closableField.setValue(activeTab?.closable);
113+
this.statusField.setValue(activeTab?.status?.severity);
114+
}
115+
116+
protected _onAddTabMenuAction(event: Event<Action>) {
117+
this.simpleTabBox.addView(this._createSampleTabView());
118+
this.simpleTabPropertiesBox.setEnabled(true);
119+
}
120+
121+
protected _createSampleTabView() {
122+
const count = ++this._tabCounter;
123+
124+
return scout.create(SimpleTabBoxViewGroupBox, {
125+
parent: this.simpleTabBox,
126+
title: 'Tab ' + count
127+
});
128+
}
129+
130+
protected _onDeleteTabMenuAction(event: Event<Action>) {
131+
this.simpleTabBox.removeView(this.simpleTabBox.currentView);
132+
133+
if (this.simpleTabBox.tabArea.getTabs().length === 0) {
134+
this.simpleTabPropertiesBox.setEnabled(false);
135+
this._updateSimpleTabPropertyFields();
136+
}
137+
}
138+
139+
protected _onDisplayStyleFieldValueChange(event: PropertyChangeEvent<SimpleTabAreaDisplayStyle>) {
140+
this.simpleTabBox.tabArea.setDisplayStyle(event.newValue);
141+
}
142+
143+
protected _onPositionFieldValueChange(event: PropertyChangeEvent<SimpleTabAreaPosition>) {
144+
this.simpleTabBox.tabArea.setPosition(event.newValue);
145+
}
146+
147+
protected _onTitleFieldValueChange(event: PropertyChangeEvent<string>) {
148+
const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
149+
activeTab?.setTitle(event.newValue);
150+
}
151+
152+
protected _onSubTitleFieldValueChange(event: PropertyChangeEvent<string>) {
153+
const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
154+
activeTab?.setSubTitle(event.newValue);
155+
}
156+
157+
protected _onIconIdFieldValueChange(event: PropertyChangeEvent<string>) {
158+
const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
159+
activeTab?.setIconId(event.newValue);
160+
}
161+
162+
protected _onClosableFieldValueChange(event: PropertyChangeEvent<boolean>) {
163+
const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
164+
activeTab?.setClosable(event.newValue);
165+
}
166+
167+
protected _onStatusFieldValueChange(event: PropertyChangeEvent<StatusSeverity>) {
168+
const activeTab = this.simpleTabBox.controller.getTab(this.simpleTabBox.currentView);
169+
activeTab.setStatus(scout.create(Status, {
170+
severity: event.newValue,
171+
message: 'some status message..'
172+
}));
173+
}
174+
}
175+
176+
export class SimpleTabBoxViewGroupBox extends GroupBox implements SimpleTabView {
177+
178+
protected override _attach() {
179+
this.$parent.append(this.$container);
180+
}
181+
182+
protected override _detach() {
183+
this.$container.detach();
184+
}
185+
186+
abort() {
187+
MessageBoxes.createOk(this)
188+
.withBody(this.session.text('ThanksForClickingMe'))
189+
.withYes(this.session.text('YoureWelcome'))
190+
.buildAndOpen();
191+
}
192+
}

0 commit comments

Comments
 (0)