fly/fgdata
1
0
Fork 0
Code Activity

Added usage example for the TabWidget

Browse source
This commit is contained in:
TheFGFSEagle 2022-12-29 23:26:51 +01:00 • committed by James Turner
parent 4bc559bcf4
commit b2f37b67f8
3 changed files with 79 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas
View file

@ -10,48 +10,55 @@ var WidgetsFactoryDialog = {
.set("background", style.getColor("bg_color"))
.createGroup();
m.vbox = VBoxLayout.new();
vbox.setContentsMargin(10);
m.setLayout(vbox);
#m.vbox.setContentsMargin(10);
m.setLayout(m.vbox);
m.tabs = gui.widgets.TabWidget.new(m.root, style, {});
m.tabsContent = m.tabs.getContent();
m.vbox.addItem(m.tabs);
m.tab_1 = VBoxLayout.new();
m.tabs.addTab("tab-1", "Tab 1", m.tab_1);
m.label = gui.widgets.Label.new(m.root, style, {})
m.label = gui.widgets.Label.new(m.tabsContent, style, {})
.setText("A label")
.setBackground("#ff0000");
.setBackground("#ffaaaa");
m.tab_1.addItem(m.label);
m.checkbox_left = gui.widgets.CheckBox.new(m.root, style, {"label-position": "left"})
.setText("Checkbox with text on the left side");
m.checkbox_left = gui.widgets.CheckBox.new(m.tabsContent, style, {"label-position": "right"})
.setText("Wanna check something ?");
m.tab_1.addItem(m.checkbox_left);
m.checkbox_right = gui.widgets.CheckBox.new(m.root, style, {"label-position": "right"})
.setText("Checkbox with text on the right side")
m.checkbox_right = gui.widgets.CheckBox.new(m.tabsContent, style, {"label-position": "right"})
.setText("Checkbox with text on the right side");
m.tab_1.addItem(m.checkbox_right);
m.property_checkbox = gui.widgets.PropertyCheckBox.new(props.globals.getNode("/controls/lighting/nav-lights"), m.root, style, {})
m.property_checkbox = gui.widgets.PropertyCheckBox.new(props.globals.getNode("/controls/lighting/nav-lights"), m.tabsContent, style, {})
.setText("Nav lights");
m.tab_1.addItem(m.property_checkbox);
m.tab_2 = VBoxLayout.new();
m.tabs.addTab("tab-2", "Tab 2", m.tab_2);
m.button = gui.widgets.Button.new(m.root, style, {})
m.button = gui.widgets.Button.new(m.tabsContent, style, {})
.setText("A button")
.listen("clicked", func {
var s = InputDialog.getText("You clicked the button …", "Enter some text:");
MessageBox.information("You clicked the button …", "… and entered '" ~ s ~ "' !");
InputDialog.getText("You clicked the button …", "Enter some text:", func (button, text) {
MessageBox.information("You clicked the button …", "… and entered '" ~ (text != nil ? text : "nothing") ~ "' !");
});
});
m.tab_2.addItem(m.button);
m.image = gui.widgets.Label.new(m.root, style, {})
.setImage("Textures/Splash1.png");
m.image = gui.widgets.Label.new(m.tabsContent, style, {})
.setImage("Textures/Splash1.png")
.setFixedSize(128, 128);
m.tab_2.addItem(m.image);
m.checkable_button = gui.widgets.Button.new(m.root, style, {})
# XXX: setVisible(0) must be called AFTER adding the widget to the layout
# doing that before layout.addItem causes FG to crash with a SIGSEGV
# see https://sourceforge.net/p/flightgear/mailman/flightgear-devel/thread/CABg8F9Rb87Fy%252B2ppXjJouYcZH9xyiQxts-jkdrPq0GK_Ymq-6w%2540mail.gmail.com/
m.image.setVisible(0);
m.checkable_button = gui.widgets.Button.new(m.tabsContent, style, {})
.setCheckable(1)
.setChecked(0)
.setText("Checkable button")
.listen("toggled", func (e) {
m.image.setVisible(int(e.detail.checked));
});
m.table.addItem(m.checkable_button);
m.tab_2.addItem(m.checkable_button);
return m;
},

18
Nasal/canvas/gui/styles/DefaultStyle.nas
View file

@ -459,26 +459,26 @@ DefaultStyle.widgets["scroll-area"] = {
};
DefaultStyle.widgets["tab-widget"] = {
tabBarHeight: 30,
new: func(parent, cfg) {
me._root = parent.createChild("group", "tab-widget");
me._bg = me._root.createChild("path", "background")
me.bg = me._root.createChild("path", "background")
.set("fill", "#e0e0e0");
me.tabBar = me._root.createChild("group", "tab-widget-tabbar");
me.tabBarHeight = 30;
me.content = me._root.createChild("group", "tab-widget-content");
me.content.setTranslation(0, me.tabBarHeight);
},
update: func(model) {
me._bg.set("fill", me._style.getColor("bg_color"));
me.bg.set("fill", me._style.getColor("bg_color"));
me.tabBar.update();
me.content.update();
},
setSize: func(model, w, h) {
me._bg.reset().rect(0, 0, model._size[0], model._size[1]);
me.tabBar.set("clip", sprintf("rect(0, %d, %d, 0)", model._size[0], me.tabBarHeight));
me.content.set("clip", sprintf("rect(0, %d, %d, 0)", model._size[0], model._size[1] - me.tabBarHeight));
return me.update(model);
me.bg.reset().rect(0, w, h, 0);
me.tabBar.set("clip", sprintf("rect(0, %d, %d, 0)", w, me.tabBarHeight));
me.content.setTranslation(0, me.tabBarHeight);
me.content.set("clip", sprintf("rect(0, %d, %d, 0)", w, h));
},
};

49
Nasal/canvas/gui/widgets/TabWidget.nas
View file

@ -4,6 +4,46 @@
# SPDX-FileCopyrightText: (C) 2022 Frederic Croix <thefgfseagle@gmail.com>
# SPDX-License-Identifier: GPL-2.0-or-later
# Usage example
# var window = canvas.Window.new([300, 300], "dialog");
# var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color"));
# var root = myCanvas.createGroup();
# var vbox = canvas.VBoxLayout.new();
# myCanvas.setLayout(vbox);
#
# var tabs = canvas.gui.widgets.TabWidget.new(root, canvas.style, {});
# var tabsContent = tabs.getContent();
# vbox.addItem(tabs);
#
# var tab1 = canvas.VBoxLayout.new();
# var image1 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {})
# .setImage("Textures/Splash1.png")
# .setFixedSize(128, 128);
# tab1.addItem(image1);
# var text1 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {})
# .setText("Texture 1");
# tab1.addItem(text1);
# tabs.addTab("tab1", "Texture 1", tab1);
#
# var tab2 = canvas.VBoxLayout.new();
# var image2 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {})
# .setImage("Textures/Splash2.png")
# .setFixedSize(128, 128);
# tab2.addItem(image2);
# var text2 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {})
# .setText("Texture 2");
# tab2.addItem(text2);
# tabs.addTab("tab2", "Texture 2", tab2);
#
# var tab3 = canvas.VBoxLayout.new();
# var image3 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {})
# .setImage("Textures/Splash3.png")
# .setFixedSize(128, 128);
# tab3.addItem(image3);
# var text3 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {})
# .setText("Texture 3");
# tab3.addItem(text3);
# tabs.addTab("tab3", "Texture 3", tab3);
gui.widgets.TabWidgetTabButton = {
new: func(parent, style, cfg) {
@ -66,6 +106,10 @@ gui.widgets.TabWidget = {
return m;
},
getContent: func {
return me._view.content;
},
hasTab: func(id) {
return me._tabs[id] != nil;
},
@ -83,7 +127,7 @@ gui.widgets.TabWidget = {
die("cannot add multiple tabs with the same id: " ~ id);
}
me._tabButtons[id] = gui.widgets.TabWidgetTabButton.new(me._view._root, canvas.style, {})
me._tabButtons[id] = gui.widgets.TabWidgetTabButton.new(me._view.tabBar, canvas.style, {})
.setText(label)
.listen("toggled", func (e) {
if (e.detail.selected and id != me._currentTabId) {
@ -154,7 +198,8 @@ gui.widgets.TabWidget = {
if (me._currentTab) {
me._currentTab.setGeometry([0, me._view.tabBarHeight, me._size[0], me._size[1] - me._view.tabBarHeight]);
}
me._view.setSize(me, me._size[0], me._size[1]);
me._view.update(me);
return me;