Think back to the last time that you used a text-based program. If you are a power user, or you frequently dwell in the domains of UNIX or Linux, you use text-based applications frequently. What about the rest of us? We couldn't function without graphical user interfaces (GUIs).

What is a text-based program? Text-based programs require the user to type in strings of commands to interact with the program. The computer responds, typically, with text. What is a GUI? The graphical user interface allows the user to run programs with "point-and-click" mouse operations. The computer, in turn, communicates with the user with text, images and even sound.

While the origins of the GUI (pronounced gooey) are confusing, most people attribute the first mass-marketed GUI-based operating system to Steve Jobs and Apple Computer. Jobs did not create the GUI -- he made it available. Of course, Microsoft came along a few years later and created Windows. Voila! The modern user-friendly personal computer was born.

Why GUI?

What does all of this mean for us as Liberty BASIC programmers? LB allows us to create completely text-based programs. Try the following example:

'Start of code 
print "Type in your name: "; 
input a$ 
print "Your name is ";a$ 
end 
'End of code

This is a perfectly good text-based program. It asks the user for
input, the user types and response, and the computer delivers
information back to the user.

Rather bland, however.

Try this in you LB editor:

'Start of code 
nomainwin 
WindowWidth = 145 
WindowHeight = 280 
statictext #main.statictext1, "Select your name:", 15, 17, 107, 20 
button #main.button2, "Alyce", [button1], UL, 40, 42, 60, 25 
button #main.button3, "Carl", [button2], UL, 40, 67, 60, 25 
button #main.button4, "Richard", [button3], UL, 40, 92, 60, 25 
button #main.button5, "John", [button4], UL, 40, 117, 60, 25 
button #main.button6, "Other", [button5], UL, 40, 142, 60, 25 
button #main.button7, "Quit", [quit], UL, 40, 197, 60, 25
open "Name" for window as #main 
print #main, "trapclose [quit]"
wait
[button1] 
notice "Your name is Alyce." 
wait
[button2] 
notice "Your name is Carl." 
wait
[button3] 
notice "Your name is Richard." 
wait
[button4] 
notice "Your name is John." 
wait
[button5] 
notice "Your name is not listed." 
wait
[quit] 
notice "Goodbye." 
close #main 
end 
'End of code

Much snazzier, eh? Okay, so it isn't the most useful program in the world. It will do for demonstration purposes, however.

Popular programs tend to have the following features:

* They do something that people want.
* They work all the time.
* They are easy to install and remove.
* They are intuitive and easy to use.
* They look clean and professional.

It could be argued that someone could create a perfectly fine program that meets only the first three characteristics. One could also argue that even the world's greatest program will be made less appealing if it's hard to use or looks bad (or bland). Hence the need for graphical user interface. Really, who wants to use an MP3 player that requires that you type "play c:\music\amygrant\agetoage.mp3 /stopatend" to hear your favorite songs?

Basics of GUI Design

Begin with the end in mind. When creating a GUI, one must consider first what the program is supposed to do. Does the user edit an image? Type in a term paper? Enter information into a database? Play a game? Think about designing an interface suitable to the program. Look at what the professionals have already done. If you are creating an image editing program, fire up Paint Shop Pro or MS Photo Editor. See how the professionals have designed their GUIs. Businesses that create and sell thousands of copies of a program must be doing something right.

Remember that the user is NOT the programmer. Sometimes programmers will forget that those who use the program don't know everything that the programmer does. Try to design the GUI from the novice user's perspective.

Avoid putting too many functions on the top level. In other words, the menu or toolbar you create should contain only the minimum needed to get to the more advanced commands. Consider the LB editor. The menu contains File, Edit, Run, Setup and Help. Click on "Edit" and the dropdown offer Undo, Cut, Copy, Paste, Clear, Select All, Restore, Find/Replace and Find Again. Imaging having ALL of these editing features as buttons on the toolbar! Users are used to drilling down and finding the tools they need.

Avoid hiding your functions beneath obscure menu headings. Don't put editing commands under the "File" menu. Never hide your program help commands under "Options."

Avoid using common icons for tasks other than their conventional actions. For example, using an icon commonly associated with "Open File" for a task like "Search/Replace" will cause the user to uninstall your program from the computer.

Avoid using confusing titles in buttons. If you create a popup box that asks "Are you sure you want to quit?" and the response buttons read "Confirm" and "Exit," the user won't know what to do! It is best to use conventionally accepted button texts like "Yes," "No", "Okay" and "Cancel."

Be consitant with your design. Use similar layouts in all windows associated with a program. This lends a feeling of continuity and comfort as the user moves from window to window.

Be kind to the user. Make button text big enough to read. Use icons with clear images. Avoid crowding buttons together. Make buttons big enough to click.

Use keyboard support. Some people are unable to use a mouse. Others are faster with a keyboard. Make sure that you provide keyboard shortcuts for as many important program functions as possible. For other functions, ensure that the user can access then through a series of menu keystrokes.

Make it look good, but not too good. Balance, color and symmetry are important factors. When the user starts the program, he expects a pleasant and unsurprising window. If your user starts the program and says "Wow! Look at this," or "Ugh!" the GUI is probably detracting from its effectiveness. Here's the user response we really want: "". That's right! We want the user to instantly look PAST the GUI and into the program's functionality. Microsoft Word is an example of an effectively understated GUI.

Add some bells and whistles. Sound, used properly, can add to a program's effectiveness. Internet Explorer can "click" when browsing buttons are clicked. Subtle sounds that provide useful information to the user can make the program more useful and fun. Don't overdo, however. Provide some tips. ToolTips, those cool little text bars that pop up when you mouse over a button, will make your program more professional and user friendly. Freeform allows you to put ToolTips easily into your LB programs.

Select the right window type. Liberty BASIC provides several type of windows to the programmer. The following is taken from the Liberty BASIC help file:

graphics
open a graphics window
graphics_fs
open a graphics window full screen (size of the screen)
graphics_nsb
open a graphics window w/no scroll bars
graphics_fs_nsb
open a graphics window full screen, w/no scroll bars
graphics_nf_nsb
open a graphics window with no sizing frame or scroll bars
text
open a text window
text_fs
open a text window full screen
text_nsb
open a text window w/no scroll bars
text_nsb_ins
open a text window w/no scroll bars, with inset editor
window
open a basic window type
window_nf
open a basic window type without a sizing frame
window_popup
open a window without a titlebar
dialog
open a dialog box
dialog_modal
open a modal dialog box
dialog_nf
open a dialog box without a frame
dialog_nf_modal
open a modal dialog box without a frame
dialog_fs
open a dialog box the size of the screen
dialog_nf_fs
open a dialog box without a frame the size of the screen
dialog_popup
open a dialog box without a titlebar
Style suffixes for window types (not all suffixes are supported for
each window type):
_fs
window is sized to fill the screen
_nf
window has no frame and cannot be resized by user
_nsb
window doesn't contain scroll bars
_ins
contains inset texteditor
_popup
window contains no titlebar or sizing frame
_modal
window must be closed before another window can gain focus

Select a window type appropriate for your application.

There is help. For those who are stumped by GUIs, help is available.

Consider the following:
* The Liberty BASIC help file - The help file is well-written and will answer most, if not all of you GUI programming questions.
* The Freeform help file - Contains some more details on forms and form creation. Ships with LB.
* Mastering Liberty BASIC 3 - Excellent resource for all things LB, including GUI programming. Purchase this at Alyce's Restaurant:
http://iquizme.0catch.com/lb/lbw3/master.html

See what other LB developers have done:
The Liberty BASIC Open Source Editor
(http://iquizme.0catch.com/lb/lb3/open.html) created by the LB community
Birthday Keeper (http://www.eaglesoartech.com/) by Eldron Gill
From the Liberty BASIC Yahoo Group Files area:
Winsult (http://groups.yahoo.com/group/libertybasic/files/Winsult.zip)
by Billy Earl Software and Marilyn Productions
BillCalc
(http://groups.yahoo.com/group/libertybasic/files/BillCalc.zip) by Jay
Shrimplin
HumbleCAD
(http://groups.yahoo.com/group/libertybasic/files/HumbleCAD.zip) by
Tom Nally
PageFoundry
(http://groups.yahoo.com/group/libertybasic/files/pagefoundry.zip)
David Drake
RPN Calculator (http://www.foundrysearch.com/downloads/rpn.zip)
created by David Drake

Additional cool tools and GUI resources for Liberty BASIC:

The Liberty Belle (http://libertybelle.0catch.com/lb3code.htm):
* Tab control
* Scrollable windows
* Easy ToolTips
* Easy toolbar

The LB-Connection (http://www1.freewebs.com/lb-connection/lb3.htm)
* Working with combo boxes and more

Freeform Developers' Forum (http://groups.yahoo.com/group/FreeForm3)
* Freeform 3 (ships with Liberty BASIC) - Build your own GUI windows
quickly and easily with Freeform 3. It ships with LB. Freeform is
under semi-constant development by the LB community.

Good luck with you GUI, and happy coding.