Creating Dialog Elements on a Canvas Control

#### Search Results

Search

# 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.

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