Discussion of article "Using Layouts and Containers for GUI Controls: The CBox Class"

[MetaQuotes]

New article Using Layouts and Containers for GUI Controls: The CBox Class has been published:

This article presents an alternative method of GUI creation based on layouts and containers, using one layout manager — the CBox class. The CBox class is an auxiliary control that acts as a container for essential controls in a GUI panel. It can make designing graphical panels easier, and in some cases, reduce coding time.

Absolute positioning of controls within an application dialog window is the most direct way of creating a graphical user interface for an application. However, in some cases, this approach to graphical user interface (GUI) design can be inconvenient, or even impractical. This article presents an alternative method of GUI creation based on layouts and containers, using one layout manager — the CBox class.

The layout manager class implemented and used in this article is roughly equivalent to those found in some mainstream programming languages such as BoxLayout (Java) and Pack geometry manager (Python/Tkinter).

3.1. Layout Styles

CBox has two layout styles: vertical style and horizontal style.

A horizontal style would have the following basic layout:

Figure 2. Horizontal Style (Centered)

A vertical style would have the following basic layout:

Figure 3. Vertical Style (Centered)

CBox would use a horizontal style by default.

Using a combination of these two layouts (possibly using multiple containers), it is possible to recreate virtually any type of GUI panel design. Furthermore, placing controls within containers would allow for a segmented design. That is, it allows one to customize the sizes and positioning of the controls in a given container, without affecting those held by other containers.

Author: Enrico Lambino

[Amir Yacoby]

Thank you very much Enrico for the article, the CBox and the examples! very useful.

Have a question though slightly unrelated, what should be added if I want the user to be able to change the dialog size by dragging the border of dialog?

Thanks again! 

[Enrico Lambino]

Amir Yacoby:

Have a question though slightly unrelated, what should be added if I want the user to be able to change the dialog size by dragging the border of dialog?

I am not so sure about this, but as far as I know, that feature is not supported yet. But it would be good if that is possible, since the individual controls and containers would still follow their layouts without further repositioning (e.g. if layouts are centered, the space would be maximized so the controls would still remain at center). In this case, you just need to override the OnResize() method of the class to call again the Pack() method of the main CBox container.

[Amir Yacoby]

Enrico Lambino:
I am not so sure about this, but as far as I know, that feature is not supported yet. But it would be good if that is possible, since the individual controls and containers would still follow their layouts without further repositioning (e.g. if layouts are centered, the space would be maximized so the controls would still remain at center). In this case, you just need to override the OnResize() method of the class to call again the Pack() method of the main CBox container.

Yes it seems like MT terminal does not support. Great work, thank you again!

[Paul Xiang]

where is the file "Layouts\Box.mqh" ?

I didn't find the whole directory  "Layouts". Thanks.

[Mladen Rakic]

Paul Xiang:

where is the file "Layouts\Box.mqh" ?

I didn't find the whole directory  "Layouts". Thanks.

At the bottom of that post (here, and scroll to the end of the article : https://www.mql5.com/en/articles/1867)

[Alecxander]

Very interesting ... but for newbies, like me, all those files where they should be placed?

[LucTelmosse]

Hello. Very nice class but if we put radiogroup or checkgeoup inside a box, it does not appear

Is there anyway to make it works?

If i keep the same code but add it in the main window/dialog, i can see my radiogroup

Thanks.luc

[Enrico Lambino]

LucTelmosse:
Hello. Very nice class but if we put radiogroup or checkgeoup inside a box, it does not appear

Is there anyway to make it works?

If i keep the same code but add it in the main window/dialog, i can see my radiogroup

Thanks.luc

Hello,

It is possible to show a radiogroup or checkgroup. I have some GUIs that do this. Perhaps there are other problems, such as not adding to the CBOx container or the container being too small. During development, I set the background (main and containers) to some color to make it easier to see where the boundaries lie. I can help you further if you can show the code, at least for the Create() function of the main dialog.

[Alain Verleyen]

This code doesn't compile. Build 1702.

'pipvaluecalculator.mq5' pipvaluecalculator.mq5 1 1

...

'm_client_area' - private member access error PipValueCalculator.mqh 118 60

'm_client_area' - private member access error PipValueCalculator.mqh 118 91

'm_client_area' - private member access error PipValueCalculator.mqh 129 72

'm_client_area' - private member access error PipValueCalculator.mqh 148 75

'm_client_area' - private member access error PipValueCalculator.mqh 168 77

'm_client_area' - private member access error PipValueCalculator.mqh 187 72

6 error(s), 0 warning(s) 7 1

As a side note, unless I missed it, you should specify where to place the files. We need to try and look at the code to know we need to create a "Layouts" folder in Include and to place Box.mqh file inside it.

[jose.niz]

I am using the build 1755.

Now the member m_client_area on class CDialog on Controls\Dialog.mqh is private and new methods were created to get Width and Height properties.

For me it works after the following changes.

a) replaced CDialog::m_client_area.Width()  by CDialog::ClientAreaWidth()

b) replaced CDialog::m_client_area.Height() by CDialog::ClientAreaHeight()