GUI Programming

In an earlier chapter we built a program with one button and discussed the concept of a message handler.

Let's use that program and expand on it by adding a text control and write some text in the windows.

This is the complete program - we will examine the individual elements next.

/*
 * Definitions
 */

WINDOW Main_Win
int Main_Win_Style
int Main_Win_Flag = 1
int Text_Width,Text_Height
string Str1$,Str2$:
 
autodefine "OFF"

/*
 * The window style you will use
 */
 
Main_Win_Style = @SIZE|@MINBOX|@MAXBOX

/*
 * Main program code
 */

OpenMainWindow()
MainProcess()
END

/*
 * Subroutines
 */

/*
 * Open Main Window
 *   Create the controls for the window
 */

SUB OpenMainWindow()

OPENWINDOW Main_Win,50,50,500,400,Main_Win_Style,0,"My Window",&Win_Event_Handler
SETWINDOWCOLOR Main_Win,RGB(0,0,50)
 
CONTROL Main_Win,@BUTTON, "Exit", 215, 300, 70, 35, 0, 1
CONTROL Main_Win,@STATIC, "", 150, 36, 200, 100, @CTEDITCENTER,2
SETCONTROLCOLOR Main_Win, 2, rgb(50,170,255), rgb(0,0,150)
ENDSUB

/*
 * Main Process
 *   Initialize values and set up main loop
 */

SUB MainProcess()

Str1$="The above text is in a Text Box."
Str2$="This text is in the main window."
 
frontpen Main_Win, RGB(90,190,255)
drawmode Main_Win,@TRANSPARENT
SETFONT Main_Win, "Arial",10,600, @SFITALIC
GETTEXTSIZE Main_Win, Str1$, Text_Width, Text_Height
 
move Main_Win,(500 - Text_Width) / 2, 180
PRINT Main_Win, Str1$
move Main_Win,(500 - Text_Width) / 2, 200
PRINT Main_Win, Str2$
 
SETFONT Main_Win, "Arial", 8, 600, 0, 2
Str1$=chr$(10) + chr$(10) + "Text in a Box." + chr$(10)
Str2$="Placed wherever you like."
setcontroltext Main_Win, 2, Str1$+Str2$
 
/*
 * Set up an Main Event in this case the wait till the window is closed
 * Closing the window sets the handle to 0
 */

WAITUNTIL Main_Win_Flag = 0
CLOSEWINDOW Main_Win

ENDSUB
 
/*
 * Event Handler
 */

SUB Win_Event_Handler
    SELECT @message
        CASE @idclosewindow
             /*
             * The close window event
             */
            Main_Win_Flag = 0
        CASE @idcreate
            /*
             * Do initialization and positioning here
             */
            CENTERWINDOW Main_Win
        CASE @idchar
            /*
             * Catch the 'ESC' key and abort
             */
            if (@wparam = 27) then Main_Win_Flag = 0
        CASE @idcontrol
            /*
             * Catch all the controls here
             */
            SELECT @controlid
                /*
                 * The individual controls we will catch
                 */
                CASE 1
                    /*
                     * Exit event
                     */
                    Main_Win_Flag = 0
                /*
                 * IF you had other controls (events) they would go here
                 */
            ENDSELECT
    ENDSELECT
RETURN
ENDSUB

Define and Open a Window

To start our program we need to define a container for all of our user interaction. The OpenMainWindow subroutine is where we do this.

The Window

Windows are defined using the OPWNWINDOW command.

The syntax for the OPENWINDOW command is:

OPENWINDOW(win as WINDOW,l as INT,t as INT,w as INT,h as INT,flags as UINT,parent as POINTER,title as STRING,procedure as UINT)

The syntax or the command is:

win - WINDOW variable.
l, t, w, h - Position and dimensions of new window.
- l - the left most position of the window. The starting 'x' coordinate.
- t - the top most position of the window. The starting 'y' coordinate.
- w - width of the window
- h - height of the window
flags - Style flags of window.
parent - Window's parent or NULL.
title - Caption text for window.
procedure - Address of subroutine to process messages for this window.

Our window is defined:

OPENWINDOW Main_Win,50,50,500,400,Main_Win_Style,0,"My Window",&Win_Event_Handler

It defines a Window tagged as Main_win at starting coordinates 50,50 and is 500 pixels wide and 400 pixels in height. It is titled 'My Window' and will use Win_Event_Handler to process all events related to this window.

Controls

Controls define items within a window or dialog. They tell the OS what the item is and where it is positioned and it's attributes.

For our example the controls are the 'EXIT' button and a 'STATIC' control to hold text.

The syntax for the control command is:

CONTROL(parent, type as UINT,title as STRING,l as INT,t as INT,w as INT,h as INT,flags as INT,id as UINT)

The parameters for the command are:

parent - The window or dialog to place the control into
type - The type of the control. Valid types are:
- @BUTTON
- @CHECKBOX
- @RADIOBUTTON
- @EDIT
- @LISTBOX
- @COMBOBOX
- @STATIC
- @SCROLLBAR
- @GROUPBOX
- @RICHEDIT
- @LISTVIEW
- @STATUS
- @SYSBUTTON
- @RGNBUTTON
- @TREEVIEW
title - The text of the control.
l, t, w, h - Control coordinates and dimensions.
- l - the left most position of the control. The starting 'x' coordinate.
- t - the top most position of the control. The starting 'y' coordinate.
- w - width of the control
- h - height of the control
flags - Style flags.
id - Identifier for the control.

Now lets look at one of our controls:
CONTROL Main_Win,@BUTTON, "Exit", 215, 300, 70, 35, 0, 1
This control defines a button 'Exit' in the 'Main_Win' at position 215,300 and is 70 pixels wide and 35 pixels in height.

The Event Handler

The event handler is the heart of any program. Here all the decisions are made on how to respond to the user. The code for our event handler is below.

/*
 * Event Handler
 */

SUB Win_Event_Handler
    SELECT @message
        CASE @idclosewindow
            /*
             * The close window event
             */
            Main_Win_Flag = 0
        CASE @idcreate
            /*
             * Do initialization and positioning here
             */
            CENTERWINDOW Main_Win
        CASE @idchar
            /*
             * Catch the 'ESC' key and abort
             */
            if (@wparam = 27) then closewindow Main_win
        CASE @idcontrol
            /*
             * Catch all the controls here
             */
            SELECT @controlid
                /*
                 * The individual controls we will catch
                 */
                CASE 1
                    /*
                     * Exit event
                     */
                    Main_Win_Flag = 0
                /*
                 * IF you had other controls (events) they would controls go here
                 */
            ENDSELECT
    ENDSELECT
RETURN
ENDSUB

Events can be keystrokes, mouse movement, button press, or any other activity that will generate a captured event. In our example the events are:

Open the window
Close the window
Catch the 'ESC' key

Any event you wish to catch and process would be coded here.

The Main Process

Now that we have defined a window and written our event handler we need code to make it do something. In our example that is the 'MainProcess' Subroutine. It is shown below:

First we define a couple of strings to display, write to the main window, redefine the string values and write to a box:

Define string and write to main window:

Now we redefine the strings and write to the box

This completes the disection of this example program.

Next Section