markup language and a tabular layout; Lessons from the Design Language and Methods of Interactive Elements - General

Реter Konow 2024.06.28 10:10 #311

Code:

//DECLARE A NEW WINDOW
//----------------------------------------------------------------------------------
NEW_WINDOW,  
//------------------------------------------------------
/*SET WINDOW TYPE*/         W_TYPE, SETTINGS,  
//------------------------------------------------------
/*WRITE WINDOW'S NAME*/     W_NAME, "My first window",
//------------------------------------------------------
/*POINT TO WINDOW'S ICON*/  W_ICON, "::Images\\16x16\\Smile.bmp",  
//------------------------------------------------------

//------------------------------------------------------
/*SET WINDOW'S ADDITIONAL PROPERTIES*/   
//----------------------------------------------------------------------------------
/*WINDOW OPENS AT START*/   OPEN_ON_INIT,  /*(OOI)*/

/*WINDOW IS ALWAYS ON TOP*/ ALWAYS_ON_TOP, /*(OOT)*/  

/*ОТСТУПЫ КРАЕВ ОКНА*/      MARGINS, 20,20,  /*Х, Y*/
//----------------------------------------------------------------------------------
//
//----------------------------------------------------------------------------------
//1. DECLARE A GROUP WITH AN ABSTRACT NAME  A.
//2. DECLARE A NEW ROW OF ELEMENTS IN THE GROUP WITH A SYMBOL  __, 
//3. DECLARE A BUTTON AND WRITE IT'S NAME.
//4. END GROUP WITH THE KEYWORDS  END_GROUP,
//------------------------------------------------------
GROUP, A,

__, BUTTON, "Button 1",  BUTTON, "Button 5", 
__, BUTTON, "Button 2",  BUTTON, "Button 6", 
__, BUTTON, "Button 3",  BUTTON, "Button 7", 
__, BUTTON, "Button 4",  BUTTON, "Button 8", 

END_GROUP,
//--------------------------

//--------------------------
//SET GROUP POSITION:
//--------------------------
i, AT, _X2X, "MF", 10, _Y2Y, "MF", 10,
//--------------------------
i, X_GAP, 30,
i, Y_GAP, 20,
//--------------------------
//SET MAIN PROPERTIES (IF YOU DON'T, THEY WILL HAVE DEFAULT VALUES): 
//PROPERTIES FOR ALL BUTTONS IN THE GROUP
//--------------------------
i, BUTTONS, text, N_COLOR,  (uint)clrBlack,
            text, A_COLOR,  (uint)clrRed,
            text, P_COLOR,  (uint)clrLime,
            text, AP_COLOR, (uint)clrWhite,  
            
            FONT_SIZE, 12, 
            TEXT_FONT,"Courier New",
            TEXT_STYLE,(int)FONT_ITALIC,
            
            FIC,          //FIXED IF CLICKED       
                                         
   END, 
//--------------------------

//------------------------------------------------------
//FINISH THE WINDOW BY KEYWORDS END_WINDOW,
//------------------------------------------------------
END_WINDOW,
//----------------------------------------------------------------------------------

hini 2024.06.28 12:24 #312

Great example tutorial, please continue

Реter Konow 2024.06.28 13:45 #313

hini #:
Great example of a textbook, please continue.

Okay. every day I'm going to do one lesson like this.

Реter Konow 2024.06.29 07:56 #314

General information about the markup language and constructor.

1. The property values of the constructor elements are predefined. If not explicitly defined, default values are assigned to the properties.

2. The interactive behaviour of elements is pre-programmed, but the user has the ability to change or disable different responses.

3. Interface window sizes are calculated automatically when calculating the position and size of the constituent groups. Right and bottom margins (margins) are also taken into account if specified by the user.

4. The length of some elements directly depends on the length of texts. It is calculated automatically if the user has not set an explicit value. Otherwise, the constructor cuts off the text that goes beyond the element and puts a dotted line to save the user's value. Such elements include checkbox, radio button, text label, horizontal and vertical tab.

5. When constructing a window, the designer strives for tabular layout and maintaining symmetry in groups of elements. Checkboxes or similar type elements are automatically aligned to a common length value.

6. The designer's adherence to a tabular layout makes it much easier to build the interface, and for greater flexibility, it is designed to break elements into groups with arrangement using flags and bindings.

7. There is no limit to the number of elements in a single window.

8. There is no limit to the number of windows within a single project.

9. Presence of a taskbar and context menu is mandatory for ALL projects. However, the appearance of the taskbar can be disabled if you comment out the OPEN_ON_INIT (OOI) command in its file. Then it will be necessary to disable the window minimisation property (there is such a possibility).

10. On the right side of the user's taskbar, the user can set buttons to call his windows.

11. All items can have a tooltip with a name when hovering the cursor. To do this you need to write a command in the properties _,SHOW_NAMETIP.

12. The context menu of the constructor or user is on double-click on the chart.

13. Auxiliary windows of the constructor make it easier to find and select attributes of elements when specifying frames, colours, fonts, icons and sounds.

14. When writing code on the latest build it is required to compile the markup code and then compile the indicator KIB-source.mq5, otherwise there is an error in the form of a white screen and hangs (there is no such problem on the old build 2470).

Continuation follows...

Download MetaTrader 5 build MetaEditor - Professional editor Technical analysis tools in

Реter Konow 2024.06.29 08:07 #315

Next, let's study the layout of elements when constructing a group.

Реter Konow 2024.06.29 09:52 #316

Positioning a group in a window:

Setting window indentation on the right and bottom:

0.

1.

2.

Setting gaps between elements:

1.

2.

3.

5.

6.

7.

8.

9.

Galleria di interfacce utente scritte in MQL

2024.05.30
Реter Konow
www.mql5.com

Di recente, mentre riordinavo il mio vecchio computer portatile, mi sono imbattuto per caso in una cartella persa nella selva delle directory...

Реter Konow 2024.06.29 09:59 #317

Code:

//+------------------------------------------------------------------+
//|                                              My first window.mqh |
//+------------------------------------------------------------------+
//DECLARE A NEW WINDOW
//----------------------------------------------------------------------------------
NEW_WINDOW,  
//------------------------------------------------------
/*SET WINDOW TYPE*/         W_TYPE, SETTINGS,  
//------------------------------------------------------
/*WRITE WINDOW'S NAME*/     W_NAME, "My first window",
//------------------------------------------------------
/*POINT TO WINDOW'S ICON*/  W_ICON, "::Images\\16x16\\Smile.bmp",  
//------------------------------------------------------

//------------------------------------------------------
/*SET WINDOW'S ADDITIONAL PROPERTIES*/   
//----------------------------------------------------------------------------------
/*WINDOW OPENS AT START*/   OPEN_ON_INIT,  /*(OOI)*/

/*WINDOW IS ALWAYS ON TOP*/ ALWAYS_ON_TOP, /*(OOT)*/  

/*MARGINS OF THE WINDOW*/   MARGINS, 40,40,/*Х, Y*/
//----------------------------------------------------------------------------------
//
//----------------------------------------------------------------------------------
//1. DECLARE A GROUP WITH AN ABSTRACT NAME  A.
//2. DECLARE A NEW ROW OF ELEMENTS IN THE GROUP WITH A SYMBOL  __, 
//3. DECLARE A BUTTON AND WRITE IT'S NAME.
//4. END GROUP WITH THE KEYWORDS  END_GROUP,
//------------------------------------------------------
GROUP, A,
 
__, BUTTON, "Button 1", GAP,40, BUTTON, "Button 7",

GAP,40, //GAP BETWEEN THE LINES

__, BUTTON, "Button 2", GAP,40, BUTTON, "Button 8",

GAP,40,  //GAP BETWEEN THE LINES

__, BUTTON, "Button 3", GAP,40, BUTTON, "Button 9",
__, BUTTON, "Button 4", GAP,40, BUTTON, "Button 10",
__, BUTTON, "Button 5", GAP,40, BUTTON, "Button 11",
__, BUTTON, "Button 6", GAP,40, BUTTON, "Button 12",

END_GROUP,
//--------------------------

//--------------------------
//SET GROUP POSITION:
//--------------------------
i, AT, _X2X, "MF", 10, _Y2Y, "MF", 10,
//--------------------------

//--------------------------
//SET MAIN PROPERTIES (IF YOU DON'T, THEY WILL HAVE DEFAULT VALUES): 

//------------------------------------------------------
//FINISH THE WINDOW BY KEYWORDS END_WINDOW,
//------------------------------------------------------
END_WINDOW,
//----------------------------------------------------------------------------------

//+------------------------------------------------------------------+
//|                                              My first window.mqh |
//+------------------------------------------------------------------+
//DECLARE A NEW WINDOW
//----------------------------------------------------------------------------------
NEW_WINDOW,  
//------------------------------------------------------
/*SET WINDOW TYPE*/         W_TYPE, SETTINGS,  
//------------------------------------------------------
/*WRITE WINDOW'S NAME*/     W_NAME, "My first window",
//------------------------------------------------------
/*POINT TO WINDOW'S ICON*/  W_ICON, "::Images\\16x16\\Smile.bmp",  
//------------------------------------------------------

//------------------------------------------------------
/*SET WINDOW'S ADDITIONAL PROPERTIES*/   
//----------------------------------------------------------------------------------
/*WINDOW OPENS AT START*/   OPEN_ON_INIT,  /*(OOI)*/

/*WINDOW IS ALWAYS ON TOP*/ ALWAYS_ON_TOP, /*(OOT)*/  

/*MARGINS OF THE WINDOW*/   MARGINS, 40,40,/*Х, Y*/
//----------------------------------------------------------------------------------
//
//----------------------------------------------------------------------------------
//1. DECLARE A GROUP WITH AN ABSTRACT NAME  A.
//2. DECLARE A NEW ROW OF ELEMENTS IN THE GROUP WITH A SYMBOL  __, 
//3. DECLARE A BUTTON AND WRITE IT'S NAME.
//4. END GROUP WITH THE KEYWORDS  END_GROUP,
//------------------------------------------------------
GROUP, A,
 
__, BUTTON, "Button 1",  BUTTON, "Button 7",
__, BUTTON, "Button 2",  BUTTON, "Button 8",
__, BUTTON, "Button 3",  BUTTON, "Button 9",
__, BUTTON, "Button 4",  BUTTON, "Button 10",
__, BUTTON, "Button 5",  BUTTON, "Button 11",
__, BUTTON, "Button 6",  BUTTON, "Button 12",

END_GROUP,
//--------------------------

//--------------------------
//SET GROUP POSITION:
//--------------------------
i, AT, _X2X, "MF", 10, _Y2Y, "MF", 10,
//--------------------------
i, X_GAP, 40, //GAP BETWEEN THE ELEMENTS IN THE ROW

i, Y_GAP, 40,  //GAP BETWEEN THE ROWS 
//--------------------------
//SET MAIN PROPERTIES (IF YOU DON'T, THEY WILL HAVE DEFAULT VALUES): 




//------------------------------------------------------
//FINISH THE WINDOW BY KEYWORDS END_WINDOW,
//------------------------------------------------------
END_WINDOW,
//----------------------------------------------------------------------------------

Реter Konow 2024.06.29 12:33 #318

In continuation of the theme of elements layout. Everything is clear with buttons, because they have either default sizes or by user's definition. But with elements whose length is tied to the length of the text, everything is ambiguous. Here are some examples with checkboxes and radio buttons:

1. The names of checkboxes and radio buttons are almost equal.

2. One radio button is much longer than the others. They become the same length:

3. In the second column, the middle checkbox is significantly longer. The others take its size:

4. Explicitly setting the length of the checkboxes and radio buttons results in automatic shortening of the outgoing text.

Subscribe to a trade Flexible MetaTrader 5 trading MetaTrader 5 Built-in Trading

Реter Konow 2024.06.29 12:39 #319

Option code 1:

GROUP, A,
 
__, R_BUTTON, "R_button with a long name", CHECKBOX, "Checkbox 1",
__, R_BUTTON, "R_button 2", CHECKBOX, "Checkbox 2",
__, R_BUTTON, "R_button 3", CHECKBOX, "Checkbox 3", 
__, R_BUTTON, "R_button 4", CHECKBOX, "Checkbox 4 with the longest name",
__, R_BUTTON, "R_button 5", CHECKBOX, "Checkbox 5",
__, R_BUTTON, "R_button 6", CHECKBOX, "Checkbox 6",

END_GROUP,
//--------------------------

//--------------------------
//SET GROUP POSITION:
//--------------------------
i, AT, _X2X, "MF", 10, _Y2Y, "MF", 10,
//--------------------------
i, X_GAP, 30,

i, Y_GAP, 30,
//--------------------------

Option code 2:

//------------------------------------------------------
GROUP, A,
 
__, R_BUTTON, "R_button with a long name", CHECKBOX, "Checkbox 1",
__, R_BUTTON, "R_button 2", CHECKBOX, "Checkbox 2",
__, R_BUTTON, "R_button 3", CHECKBOX, "Checkbox 3", 
__, R_BUTTON, "R_button 4", CHECKBOX, "Checkbox 4 with the longest name",
__, R_BUTTON, "R_button 5", CHECKBOX, "Checkbox 5",
__, R_BUTTON, "R_button 6", CHECKBOX, "Checkbox 6",

END_GROUP,
//--------------------------
//SET GROUP POSITION:
//--------------------------
i, AT, _X2X, "MF", 10, _Y2Y, "MF", 10,
//--------------------------
// SET PROPERTIES EXPLICITLY FOR R_BUTTONS
//--------------------------
i, R_BUTTONS,  W, 120, END,
//--------------------------
// SET PROPERTIES EXPLICITLY FOR CHECKBOXES
//--------------------------
i, CHECKBOXES, W, 90,  END,
//--------------------------
i, X_GAP, 30,

i, Y_GAP, 30,
//--------------------------

hini 2024.06.29 15:28 #320

Is " END " fixed when setting the end of a set of element attributes?

Gallery of UIs written in MQL - page 32

General information about the markup language and constructor.

Setting window indentation on the right and bottom:

Setting gaps between elements: