Menu

Back to tutorial menu

QBasic GUI Tutorial #2

I left you last time with this chunk of code:

SUB Initscreen
'----------------------------------------------------------------------------
' Defines the objects
'----------------------------------------------------------------------------
' This routine is called at startup
'----------------------------------------------------------------------------
CreateWindow 1, 0, 0, 220, 140, "Hello", Fill, True
CreateButton 1, 7, 80, 70, 100, 30, "Quit"

initing = 0
END SUB

So what do all those numbers mean? If you read the top part of the program, it explains it all but here is a retelling in case it is a bit obscure. Here is the code as above.

CreateWindow 1, 0, 0, 220, 140, "Hello", Fill, True

The explanation is as follows:

' Num - Window index number
' x, y - Upper left corner
' x2, y2 - Lower right corner
' Topic$ - Topic
' Fillcol - Fill color
' WinDrag - If false, then window cannot be moved

This comes from the subroutine called CreateWindow which is the routine that is called above. Lets go through it. The Window Index number is the reference (handle) to tell the program which window we are talking to (there could be many). Now we need to tell it where to put the top left hand corner of the window on the screen (screen coordinates) which is done using two coordinates in this case putting the window at the top left hand corner of the screen. Regrettably, the size of the window is not set directly but by indirectly specifiying the screen coordinates of the bottom right hand corner of the window. You'll need to do a bit of trial and error to get used to this. Coordinates are spcified in pixels. The topic is the window caption (currently set to Hello) and the fill colour is set using the current fill colour. The window can be fixed in one position if required and the user will be unable to move it (like a dialog) but in this case we have set it to be moveable. The caption can be blank but it cannot be switched off completely (to give a splash screen style) without changing the code. It would also be nice to have a task bar (like the textmode version) but it isn't currently available. That is how a window is created. Now for the button. The code we used above is:

CreateButton 1, 7, 80, 70, 100, 30, "Quit"

and the explanation once again from the CreateButton subroutine is:

' WindowNum - Host window number
' Num - Button index number
' x, y - Upper left corner
' width, height

This is similar to the way we create windows except coordinates are window coordinates NOT screen coordinates. So we have the number of the window (which has to be created first) to write the button to. Then we need the number of the button, in this case button number 7 (to tie in with existing code). Coordinates where to place the button within the window not as part of the screen as above. Then width and height in pixels of the button. And that's your button done. When the button is clicked, the code in the user code section that begins:

IF ClickedButton = 7 THEN

will be executed which will end the program and display some diagnostics which you may want to delete when your program has been finished. Now we are up to speed, we can add a few other things. Modify the subroutine Initscreen as follows:

SUB Initscreen
'----------------------------------------------------------------------------
' Defines the objects
'----------------------------------------------------------------------------
' This routine is called at startup
'----------------------------------------------------------------------------

CreateWindow 1, 0, 0, 220, 140, "Hello", Fill, True

CreateFrame 1, 10, 10, 10, 190, 40, "Result"
CreateTextField 1, 1, 20, 20, 25, "", False

CreateFrame 1, 3, 10, 60, 190, 50, "Button"
CreateButton 1, 2, 20, 70, 50, 30, "Press"

CreateButton 1, 7, 80, 70, 100, 30, "Quit"

initing = 0
END SUB

This will produce something like this:

it won't work properly until you've added some more code to the user code area as follows:

IF ClickedButton = 2 THEN
  CreateTextField 1, 1, 20, 20, 25, "hello", False
END IF

This is simply added just above the existing code for the exit button. There doesn't seem to be any way to add text to an existing text field other than to create it afresh using the same window and control number. If you are unsure how these extra commands work, take a look at the routines CreateFrame and CreateTextfield for a more detailed explanation. That's it for this tutorial. On to something a bit meatier next time.