Create basic UI with .UI xml file, add reduce to icon and use of WidgetListBox callback

[andrea.padovani]

Hi,
I'm trying to create a simple UI to select between available option, using the WidgetListBox.
Starting from the example in the DOC section and the UserInterface sample within SDK, I've created the following UI, but I was unable to retrieve in the callback the selected item. Looks like my Ptr is always null. When using Radio Button works as expected.

This is my user_interface.ui

<?xml version="1.0" encoding="utf-8"?>
<ui version="1.0">
	<window name="window" export="1" width="350" height="250" sizeable="0" enabled="1" space_y="10">
		<text size="40" align="left"> &nbsp;&nbsp; </text>
		<groupbox align="expand">
				<text>Available option:</text>
				<treebox name="treebox_0" export="1" align="expand" width="128" editable="0">
					<text>option 1</text>
					<text>option 2</text>
				</treebox>
		</groupbox>
		<button name="apply_button" >
			<text>Apply</text>
		</button>
	</window>
</ui>

And in my code I've the following part in the ::init()

	// CODE FOR GUI
	auto gui = Gui::get();
	
	//auto ui = UserInterface::create(gui, "data/gui/user_interface.ui");
	auto ui = UserInterface::create(gui, "c:/temp/gui/user_interface.ui");

	ui->addCallback("apply_button", Gui::CLICKED,MakeCallback(&onGuiApply));
	ui->addCallback("treebox_0", Gui::CHANGED, MakeCallback(&onRigChangeSelection));

	WidgetPtr window = ui->getWidget(ui->findWidget("window"));
	window->arrange();
	gui->addChild(window, Gui::ALIGN_OVERLAP | Gui::ALIGN_CENTER);

And the declaration of the function

static void onGuiApply() {
	Log::message("\nPres Apply button\n");
}

static void onRigChangeSelection(WidgetPtr widget) {
	Log::message("\Changed listbox selection\n");
	WidgetListBoxPtr listbox = checked_ptr_cast<WidgetListBox>(widget);
	Log::message("\nCurrent item: %s\n", listbox->getCurrentItemText());
}

Thanks for any tips on this ;)

Also small problem that I've, where I've to put the file in the project to use relative path? looks like I'm not able to open the .ui file if i place in the data folder of the project, it works only if I set absolute path.

Edited February 2, 2022 by andrea.padovani
code update

[karpych11]

Hello,

In your .ui file you are using treebox widget to place option items, but in callback you are trying to cast widget to WidgetListBox. Use the WidgetTreeBoxPtr treebox = checked_ptr_cast<WidgetTreeBox>(widget) or replace treebox with listbox in file to fix the error. Also you can put your file in data folder and use relative paths, but you need to replace this path "data/gui/user_interface.ui" with this one "gui/user_interface.ui".

[andrea.padovani]

2 hours ago, karpych11 said:

Hello,

In your .ui file you are using treebox widget to place option items, but in callback you are trying to cast widget to WidgetListBox. Use the WidgetTreeBoxPtr treebox = checked_ptr_cast<WidgetTreeBox>(widget) or replace treebox with listbox in file to fix the error. Also you can put your file in data folder and use relative paths, but you need to replace this path "data/gui/user_interface.ui" with this one "gui/user_interface.ui".

ouch! :-( I tried multiple time and didn't notice that I was using the treebox, I've copied from the sample project and I was.

Also for the relative path, I've to omit data, that was the problem ;) 

I've just now a little question regarding the "alignment", when using align="expand" the treebox (and also listbox) has definitely a better looking for the "highlighted/selected" item, but it causing some error since you can click outside an option, causing a condition where you don't have anything selected, but the event onChange of course was triggered, so I can't get CurrentSelectedText, and I'll have an exception.

When using align="left" click and change are actually detected only on a valide option, so there is no exception trow by the code, and also you will have always something selected, similar to the radio button, that is what I'm trying to achieve.

Align left is working fine, but graphically doesn't convince me, any idea on that?

[karpych11]

You can try wrapping the treebox in a vbox container. This will limit the height of treebox and keep the maximum width.

<?xml version="1.0" encoding="utf-8"?>
<ui version="1.0">
	<window name="window" export="1" width="350" height="250" sizeable="0" enabled="1" space_y="10">
		<text size="40" align="left"> &nbsp;&nbsp; </text>
		<groupbox align="expand">
				<text>Available option:</text>
				<vbox>
					<treebox name="treebox_0" export="1" align="expand" width="128" editable="0">
						<text>option 1</text>
						<text>option 2</text>
					</treebox>
				</vbox>
		</groupbox>
		<button name="apply_button" >
			<text>Apply</text>
		</button>
	</window>
</ui>