How to do a basic GUI with two panels

If you are using the main C++ distribution of wxWidgets, Feel free to ask any question related to wxWidgets development here. This means questions regarding to C++ and wxWidgets, not compile problems.
Post Reply
runeight
Earned a small fee
Earned a small fee
Posts: 22
Joined: Sat Apr 11, 2020 5:53 pm

How to do a basic GUI with two panels

Post by runeight » Sat Apr 18, 2020 2:19 pm

I'm not sure I've chosen the right sub-forum, but............

I have got Code::Blocks 20.03 and wx3.1.3 working together with wxFormBuilder 3.5. First time to build a gui with wx. Working in C++.

I want to create a simple UI at first to just button the already written app to the interface. The first incarnation will be simple so I can learn what I need to know in small bites.

What I want to do is to create a two-panel display, with a simple top menu of common choices. The menu is not important at the moment.

All I need to do for now is to write text into the panels which should contain scrollable windows since the text will exceed height.

In the left panel, each line of text needs to be clickable. Single click will pull up information in the right panel. Double click will pull up a separate, floating window with lots of details. More than one of these can be opened and closed whenever the user needs to.

Nothing in the right panel needs to be "hot" for this first attempt.

I have indeed looked through many of the tutorials. I didn't expect, of course, that any one of them would show exactly what I want to do, but hoped to find snippets here and there to put together.

I have extended the minimal.exe sample with other widgets and have a pretty good idea now of how to manage events. I am aware that I will need to create (or have formbuilder create) the subclasses that are needed.

I am able to frame this out with wxFormBuilder. I think correctly. As in attached. The panels are scrollable windows.

Any pointers to where to find the details of what I need to do next would be greatly appreciated.

Thanks.
Attachments
SplitPanels.PNG

catalin
Moderator
Moderator
Posts: 1586
Joined: Wed Nov 12, 2008 7:23 am
Location: Romania

Re: How to do a basic GUI with two panels

Post by catalin » Sat Apr 18, 2020 3:42 pm

You probably don't need wxScrolled for either of the 2 windows.
A quick suggestion that comes to my mind is wxEditableListBox on the left side and a plain old wxTextCtrl on the right side. To have a quick look at what they might be, see `widgets` sample that comes with wxW distribution, and go to `EditableListBox` and `Text` tabs.

User avatar
doublemax
Moderator
Moderator
Posts: 15065
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: How to do a basic GUI with two panels

Post by doublemax » Sat Apr 18, 2020 3:56 pm

BTW: This might be helpful for a beginner:
https://docs.wxwidgets.org/trunk/page_screenshots.html
Use the source, Luke!

runeight
Earned a small fee
Earned a small fee
Posts: 22
Joined: Sat Apr 11, 2020 5:53 pm

Re: How to do a basic GUI with two panels

Post by runeight » Sat Apr 18, 2020 5:21 pm

Yes, I see what you both mean. Doublemax, this page of pics is really helpful. The icons in wxFormBuilder are pretty tiny. :D

I will try this. Two more questions, if I may.

Is there a good tutorial on how to populate the list box? Or some sample code? I've only found, on a quick search, populating combos.

I have conjured the structure in FormBuilder, but I would like the two side-by-side list boxes to fill their respective locations, each filling the left and right hand sides of the frame and resizable with the frames. The default condition in the editor is not this. It would be nice if the vertical separator between the boxes was moveable, but that can be done later. If they each take half the horizontal space that is good enough for this round. The properties on the list box don't seem to have that setting and the parent boxsizer, which is set for horizontal arrangement, doesn't seem to either. How do I force the list boxes to fill their spots?

Thanks.

catalin
Moderator
Moderator
Posts: 1586
Joined: Wed Nov 12, 2008 7:23 am
Location: Romania

Re: How to do a basic GUI with two panels

Post by catalin » Sat Apr 18, 2020 5:52 pm

runeight wrote:
Sat Apr 18, 2020 5:21 pm
Is there a good tutorial on how to populate the list box? Or some sample code?
Did you look at the code in `widgets` sample?

If they each take half the horizontal space that is good enough for this round. The properties on the list box don't seem to have that setting and the parent boxsizer, which is set for horizontal arrangement
You are on the right track. Use that horizontal box sizer, and pass `proportion` as 1 for both controls.

It would be nice if the vertical separator between the boxes was moveable, but that can be done later.
You can use wxSplitterWindow for that, but indeed, leave that for later.

runeight
Earned a small fee
Earned a small fee
Posts: 22
Joined: Sat Apr 11, 2020 5:53 pm

Re: How to do a basic GUI with two panels

Post by runeight » Sat Apr 18, 2020 6:53 pm

Thanks very much again for the tips.

In FormBuilder, I do not see a setting that corresponds to proportion for either sizer or listbox. Should it be here?

I've looked up constructors for both boxsizer and listbox, and, probably missed it, but didn't see an argument to pass. Might you be very specific where to do this?

I had not looked at sample, bc only listctrl is there, but I assume now that that is the one to investigate. I will do that.

New Pagodi
Super wx Problem Solver
Super wx Problem Solver
Posts: 352
Joined: Tue Jun 20, 2006 6:47 pm
Contact:

Re: How to do a basic GUI with two panels

Post by New Pagodi » Sat Apr 18, 2020 7:33 pm

The proportion option is under "sizer item" near the bottom of the grid:
prop.png
prop.png (9.96 KiB) Viewed 469 times

Note that the setting will be ignored unless "stretch" is selected for the item on the toolbar:
stretch.png
stretch.png (12.12 KiB) Viewed 469 times

runeight
Earned a small fee
Earned a small fee
Posts: 22
Joined: Sat Apr 11, 2020 5:53 pm

Re: How to do a basic GUI with two panels

Post by runeight » Sat Apr 18, 2020 8:23 pm

Ah yes. Thank you. Hopefully I can take it from here for a while.

Nick
Earned some good credits
Earned some good credits
Posts: 107
Joined: Thu Apr 11, 2019 12:50 am

Re: How to do a basic GUI with two panels

Post by Nick » Sun Apr 26, 2020 6:20 pm

New Pagodi wrote:
Sat Apr 18, 2020 7:33 pm
The proportion option is under "sizer item" near the bottom of the grid:
prop.png
Note that the setting will be ignored unless "stretch" is selected for the item on the toolbar:
stretch.png
Good morning, what IDE, Designer or program are you using in these images?

New Pagodi
Super wx Problem Solver
Super wx Problem Solver
Posts: 352
Joined: Tue Jun 20, 2006 6:47 pm
Contact:

Re: How to do a basic GUI with two panels

Post by New Pagodi » Sun Apr 26, 2020 6:56 pm

Nick wrote:
Sun Apr 26, 2020 6:20 pm
Good morning, what IDE, Designer or program are you using in these images?
Those images are from wxFormBuilder.

Nick
Earned some good credits
Earned some good credits
Posts: 107
Joined: Thu Apr 11, 2019 12:50 am

Re: How to do a basic GUI with two panels

Post by Nick » Sun Apr 26, 2020 8:13 pm

New Pagodi wrote:
Sun Apr 26, 2020 6:56 pm
Nick wrote:
Sun Apr 26, 2020 6:20 pm
Good morning, what IDE, Designer or program are you using in these images?
Those images are from wxFormBuilder.
Thanks!

Post Reply