Creating Dialog Elements on a Canvas Control

You can use a canvas control as a background to draw the following dialog elements on it: the rectangle, line and graphictext controls. These dialog elements "visualize" information. You can, for example, create three or four rectangle controls, fill them with color and change their size at runtime. This way, you can build your own bar chart.

Once you have created a canvas control in the dialog, you can go on to create the rectangle, line and graphictext controls in it.

Note:
Graphictext controls do not repaint the background of the rectangle in which they are located. The background of the rectangle is specified at creation time of the graphictext control. What they do repaint is only the text specified in the text attribute.

Start of instruction set To create dialog elements on a canvas control

Use the PROCESS GUI statement action ADD.

The rectangle, line and graphictext controls are then displayed inside the borders of the canvas control; if they exceed the canvas borders, they are clipped.

The following attributes are useful for controlling the behavior of the canvas control and the dialog elements on it:

OFFSET-X and OFFSET-Y determine the x and y axis offset of the canvas control's upper border against the upper border of the area by which the rectangle, line or graphictext control have exceeded the canvas control's borders.
RECTANGLE-X, RECTANGLE-Y, RECTANGLE-W and RECTANGLE-H determine the size of a rectangle control and its position relative to the underlying canvas control.
P1-X, P1-Y, P2-X and P2-Y determine the start position (P1xx) and the end position (P2xx) of a line control relative to the underlying canvas control.

The following example illustrates how to create a canvas control

/* In the dialog's local data area, the following must be defined: 
01 #CNV1 HANDLE OF CANVAS 
01 #XAX HANDLE OF LINE 
01 #YAX HANDLE OF LINE 
01 #H1 HANDLE OF RECTANGLE 
01 #H2 HANDLE OF RECTANGLE 
01 #H3 HANDLE OF RECTANGLE 
01 #H4 HANDLE OF RECTANGLE 
01 #RESPONSE (I4) 
/* In the dialog's AFTER-OPEN event handler, the following must be defined: 
PROCESS GUI ACTION ADD WITH 
PARAMETERS 
  PARENT = #DLG$WINDOW 
  TYPE = CANVAS 
  HANDLE-VARIABLE = #CNV1 
  RECTANGLE-X = 20 
  RECTANGLE-Y = 20 
  RECTANGLE-W = 200 
  RECTANGLE-H = 200 
  STYLE = 'F' 
END-PARAMETERS  
GIVING RESPONSE 
PROCESS GUI ACTION ADD WITH 
PARAMETERS 
  PARENT = #CNV1 
  TYPE = LINE 
  HANDLE-VARIABLE = #YAX 
  STYLE = 'S' 
  P1-X = 20 
  P1-Y = 20 
  P2-X = 20 
  P2-Y = 180 
END-PARAMETERS  
GIVING RESPONSE 
PROCESS GUI ACTION ADD WITH 
PARAMETERS 
  PARENT = #CNV1 
  TYPE = LINE 
  HANDLE-VARIABLE = #XAX 
  P1-X = 180 
  P1-Y = 180 
  P2-X = 20 
  P2-Y = 180 
END-PARAMETERS  
GIVING RESPONSE 
PROCESS GUI ACTION ADD WITH 
PARAMETERS 
  PARENT = #CNV1 
  TYPE = RECTANGLE 
  HANDLE-VARIABLE = #H1 
  RECTANGLE-X = 20 
  RECTANGLE-Y = 180 
  RECTANGLE-H = 20 
  RECTANGLE-W = -60 
  FOREGROUND-COLOUR-NAME = BLACK 
  BACKGROUND-COLOUR-NAME = RED 
END-PARAMETERS  
GIVING RESPONSE 
PROCESS GUI ACTION ADD WITH 
PARAMETERS 
  PARENT = #CNV1 
  TYPE = RECTANGLE 
  HANDLE-VARIABLE = #H2 
  RECTANGLE-X = 40 
  RECTANGLE-Y = 180 
  RECTANGLE-H = 20 
  RECTANGLE-W = -40 
  FOREGROUND-COLOUR-NAME = BLACK 
  BACKGROUND-COLOUR-NAME = BLUE 
END-PARAMETERS  
GIVING RESPONSE 
PROCESS GUI ACTION ADD WITH PARAMETERS 
  PARENT = #CNV1 
  TYPE = RECTANGLE 
  HANDLE-VARIABLE = #H3 
  RECTANGLE-X = 60 
  RECTANGLE-Y = 180 
  RECTANGLE-H = 20 
  RECTANGLE-W = -55 
  FOREGROUND-COLOUR-NAME = BLACK 
  BACKGROUND-COLOUR-NAME = GREEN 
END-PARAMETERS  
GIVING RESPONSE 
PROCESS GUI ACTION ADD WITH 
PARAMETERS 
  PARENT = #CNV1 
  TYPE = RECTANGLE 
  HANDLE-VARIABLE = #H4 
  RECTANGLE-X = 80 
  RECTANGLE-Y = 180 
  RECTANGLE-H = 20 
  RECTANGLE-W = -80 
  FOREGROUND-COLOUR-NAME = BLACK 
  BACKGROUND-COLOUR-NAME = MAGENTA 
END-PARAMETERS  
GIVING RESPONSE