Beginning Programming with Just BASIC -- Tutorial 7: Graphical User Interface

Tutorial 7 -- Graphical User Interface

We have previously been working out of the main window. We no longer wish to be using this window. We now would like to be able to design our own windows. To do this, at the top of the program issue the command

    nomainwin

... and then go on to describe your window:


    WindowWidth = 232
    WindowHeight = 215
    UpperLeftX = 50

    UpperLeftY = 50
    statictext #1.statictext, "This is static text", 26, 16, 152, 20
    button #1.button, "This is a button", [whenClicked], UL, 22, 101, 138, 25
    textbox #1.textbox, 22, 51, 100, 25
    open "Title" for window as #1
    print #1, "font ms_sans_serif 0 16"

    print #1, "trapclose [quit]"

[1.inputLoop]   'wait here for input event
    wait

[whenClicked]   'Perform action for the button named 'button'
    notice "You pressed the button!"
    wait

[quit]

     close #1

     end

So here's how it works: You first list all the elements of the window, such as the text, the buttons, the text fields, etc. I'm not going to list how to enter all of the different kinds of elements since they can be found in the help files, but in general the syntax is as follows: (1) list the element type (e.g. "statictext"), (2) list the handle for the element with the #-symbol, followed by the handle for the entire window, and then an extension that describes the specific element, (3) the text that goes into it/any functionality that needs to be described on this line, (4) numbers that describe upper-left x, upper-left y, width, and height of the element, in that order. After listing all of the elements, open the window:

open "Title" for window as #1

In this line you give it a title, tell it what kind of window it is (in this case just the default window), and give it a handle. Again, a handle is what you use to refer to the window, and it begins with the #-symbol.

All commands concerning the window go in quotations following the print command, such as

print #1, "trapclose [quit]"

This line is called "trapping the close event," and it tells the program to go to the branch label called [quit] when the user clicks the little red x in the upper right corner of the window. In this case, all it does is close the window

close #1

and end the program.

Suppose you want to get input from a textbox. How do you do that? Sneezy.

[whenClicked]   'Perform action for the button named 'button'

    input #1.textbox, text$

    print #1.textbox, "!contents? text$"
    notice "You entered "; text$; " into the textbox!"
    wait

DON'T WASTE TIME!

Just BASIC has this handy little built-in WYSIWYG program that allows you to design your window, and then it produces the code for you. This program cuts down on the time it takes to program your GUI's by a very large amount. To use this feature, click on the RUN drop-down menu, and then click "FreeForm-J GUI" editor. You will be so glad you learned about it upfront.

Now you can make your programs look just the way you want them!

goto [nextTutorial]