Added usage example for the TabWidget

Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas

@@ -10,48 +10,55 @@ var WidgetsFactoryDialog = {
 						.set("background", style.getColor("bg_color"))
 						.createGroup();
 		m.vbox = VBoxLayout.new();
-		vbox.setContentsMargin(10);
+		#m.vbox.setContentsMargin(10);
-		m.setLayout(vbox);
+		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"})
+		m.checkbox_left = gui.widgets.CheckBox.new(m.tabsContent, style, {"label-position": "right"})
-						.setText("Checkbox with text on the left side");
+						.setText("Wanna check something ?");
 		m.tab_1.addItem(m.checkbox_left);
-		m.checkbox_right = gui.widgets.CheckBox.new(m.root, style, {"label-position": "right"})
+		m.checkbox_right = gui.widgets.CheckBox.new(m.tabsContent, style, {"label-position": "right"})
-						.setText("Checkbox with text on the right side")
+						.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:");
+							InputDialog.getText("You clicked the button …", "Enter some text:", func (button, text) {
-							MessageBox.information("You clicked the button …", "… and entered '" ~ s ~ "' !");
+								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, {})
+		m.image = gui.widgets.Label.new(m.tabsContent, style, {})
-						.setImage("Textures/Splash1.png");
+						.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;
 	},

Nasal/canvas/gui/styles/DefaultStyle.nas

@@ -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.bg.reset().rect(0, w, h, 0);
-		me.tabBar.set("clip", sprintf("rect(0, %d, %d, 0)", model._size[0], me.tabBarHeight));
+		me.tabBar.set("clip", sprintf("rect(0, %d, %d, 0)", w, me.tabBarHeight));
-		me.content.set("clip",	sprintf("rect(0, %d, %d, 0)", model._size[0], model._size[1] - me.tabBarHeight));
+		me.content.setTranslation(0, me.tabBarHeight);
-		
+		me.content.set("clip",	sprintf("rect(0, %d, %d, 0)", w, h));
-		return me.update(model);
 	},
 };
 

Nasal/canvas/gui/widgets/TabWidget.nas

@@ -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;