Liberty Basic is develeopped by Carl Gundel
Original Newsletter compiled by Alyce Watson and Brosco
Translation to HTML: Raymond Roumeas

The Liberty Basic Newsletter - Issue #43 - JUL 99

"Knowledge is a gift we receive from others." - Michael T. Rankin

In this issue:

GUI Design by Tom and Alyce Watson

In future issues:


*** WARNING! ***

What makes an attractive user interface?

This is, at least in part, a subjective issue. Please feel free to add to the disussion, because I am FAR from a GUI expert! I subscribe to the theory that form should follow function, so I want any applications that I use to be easy to use and understand - not flashy-looking! Aha, feel free to engage in a debate about the importance of a fancy GUI!

*** GUI DESIGN ***

A GUI is a Graphical User Interface with a computer.

When personal computers became widely available to the general public, the User Interface was text-based. If you are too young to remember this (and some of you are!) then watch the movie Wargames. The user interacted with the computer by reading the text on the screen and typing his own responses and commands on the keyboard.

Then came the mice. We can now communicate with our computer by clicking the mouse on a graphic that appears on the screen - a Graphical User Interface.

So, lets talk about Windows.....

*** WINDOW SIZE ***

When you design your program's window, there are several things to take into consideration. We'll start with window size. Once I was using a display resolution of 640x480 and I tried out a nifty program written by someone else. The author assumed that his users would all have displays set to at least 800x600, so his window height was 600. For me, this pushed the titlebar up and out of sight, so I had to exit the program awkwardly.

Later, when I had my display resolution set to 800x600 I tried out a program by another person. He expected a resolution of 640x480. On my screen, the text on the program window was so tiny it was just meaningless little squiggles.

If you know the details of the systems that will run your program, then you can set the window size for them. However, if you are releasing something to the public - you must take all kinds of systems into account.

LB allows you to open graphics windows full screen. You can make a plain window fit the size of the screen by setting WindowWidth=DisplayWidth and WindowHeight= DisplayHeight. Some applications need a full screen window and some just look best that way. I have found, though, that for most of my applications, a window that is 640x480 works just dandy. Now is the time for DISCUSSION! I'd love to hear what others think about window size!

One last consideration for window size:

Don't forget LB's resizehandler function. If you allow a sizing frame on a window, the user can change the window size, throwing your carefully planned proportions off and possibly moving controls out of sight! After using the resizehandler, the variables WindowWidth and WindowHeight no longer apply to the full size of the window, but just to the client area.

Using these dimensions, you can compute new locations and sizes for your controls. Then, no matter the new size a user gives a window, it will look good and function properly. For an example of this in action, look at the sample program that comes with LB called resize.bas.

*** SHAPE ***

The best shape for a window is the one that allows the controls to be laid out in the most logical and usable configuration. If more than one window is to be opened at the same time in your application, that will also affect the shape you want. If you don't choose a window width and height, Windows will give you the default dimensions. Just as your monitor screen is a bit wider than it is high, so is the default window size a bit wider than it is high. This shape is the most common one that I come across in applications, so it is probably best to try to keep your windows wider than they are high.

If you are using a NOTICE box to give the user information, you can obtain the shape you want. First, determine the caption that should appear on the titlebar. Follow this with a chr$(13) - the ascii value for a carriage return.

After this, all further chr$(13) will force a carriage return into the text in your message. The default NOTICE message is quite a lot wider than it is high, so it might be more pleasing to the eye if you controlled the size. Here is a small example. Cut and paste this entire program into LB and run it to see the effect:

cr$=chr$(13) 'save some typing!
 
notice "Your Caption Goes Here" + cr$ +_
"This will be on the first line." + cr$ +_
"This will be on the second line." + cr$ +_
"This will be on the third line." + cr$ +_
"This will be on the fourth line." + cr$ +_
"This will be on the last line."

*** CONVENTIONS ***

There are certain conventions that are usually followed in Windows programs. Unless there is a good reason, it is easiest for users if you follow the conventions.

Tom was using a program that had a button called 'NEW' in the upper right corner, and one called 'SAVE' in the lower left corner. Instead of saving his work, he sometimes hit the 'NEW' button and lost everything.

Look at the Windows Common Font Dialog. It shows up when you want to change your font in Wordpad for example. (Menu --> Format --> Font) In the upper right corner is a button marked OK. It is also the default button, meaning it is the one that is activated if the user pushes ENTER on the keyboard.

Under it is a button marked CANCEL. If you put the CANCEL button above the OKAY button in a window, or if you made CANCEL the default button, you would certainly have users hitting the wrong button constantly!

OK and CANCEL are also Windows conventions. If you decide to deviate from these titles, it should be because other titles more closely match the function of your application.

There are some menu conventions to heed also. You will almost always find the File menu (if there is one) in the first position, followed by the Edit menu (again, if there is one.) The Help menu is always in the last, or furthest right position, or close to it. The hot keys are normally the same, also. Hitting ALT-F should open the File menu, then while still holding ALT, hitting X should exit the program. Look at other applications and pay attention to the 'usual' way of doing these things.

Your users will thank you.

*** COLORS ***

First, consider System Colors. These can be standard Windows colors or they can be part of a desktop color scheme chosen by the user. It is possible to change the system colors temporarily, so that your application uses the button, titlebar, etc., etc. colors of YOUR choice. It also changes every application running on a user's system to these colors. Please keep in mind that the user has chosen his colors for a reason, and may NOT appreciate your changes. Also, and this is really important, be sure to GET the system colors before changing them, so you can restore the user's system to its normal look when your application closes. My opinion: Never change the system colors!

The colors showing on a program's window should make it pleasant and easy to look at. A red background with bright yellow text would be very hard to view for long!

To color a dialog window gray and make its controls appear 3-D, use the ctl3d.dll or ctl3dv2.dll. Look for these in your Windows\System folder.

Before you open the dialog window, make these calls:

open "ctl3d.dll" for dll as #ctl3d
 
calldll #ctl3d,"Ctl3dRegister",0 as short,result as short
calldll #ctl3d,"Ctl3dAutoSubclass",0 as short,result as short
 

After the dialog window closes, make this call:

calldll #ctl3d,"Ctl3dUnregister",0 as short,result as short
 
close #ctl3d
 

*** FONTS ***

LB allows the programmer to change the fonts for most controls and uses. The SYSTEM font is not that attractive or professional-looking, so use these font functions! LB allows you to choose the font name and size. If you set the width to 0, LB will choose the proper width for the height you have set. Syntax:

print #1.box, "font Courier_New 0 24"

 

Remember to fill blanks in the font name with the underscore (_) character. You can get some interesting effects by setting the width yourself. You can get a short, wide font - or a tall, thin one.

A short, wide one might be a good choice for a banner where you have plenty of width, but a restricted height. A tall thin one might be a good choice if you must cram many small buttons into a row.

You will need to do some trial-and-error to see which height and width parameters look best.

Try to stick with the fonts that are on everyone's system: Courier, Times New Roman, etc. If you specify a font that is not on a user's system, the one that is the closest match will appear, according to the LB helpfile. It always seems to be ARIAL, though!

 Be aware that there are fixed-width fonts, like Courier and variable-width fonts like Times. A fixed-width font will print each character at the same width as all other characters. A variable width font will print a narrow letter, such as lower case i in a much smaller space than a wide letter, such as upper case G. If it is important to the look of your program to have text or columns of numbers line up, then use a fixed-width font.

If you do not specify the size of a button, it will automatically size itself to fit the font and text it holds. If you size a button yourself, try to make the button dimensions large enough so that there is a small amount of blank space - a border. If you specify a width too narrow, the text will center itself and hang off both sides. It is said that "Beauty is in the eye of the beholder" so this is one person's opinion: A very large button with a wee bit of text in it does not look good! The exception to this would occur when you have a bank of buttons lined up with one another and all are the same size.

Here is a really neat way to have a very professional- looking GUI when using graphic text. Text will appear on a graphicbox in the color set with the COLOR command and it will be backed by the color set with the BACKCOLOR command. If you put graphic text over drawn objects of multiple colors, or over a bitmap image, the text will appear within a rectangle of BACKCOLOR. You can easily make the rectangle disappear, so that the text appears to be written directly on top of the graphics. Note that you need to make a call to GetDC, so that you can use the DC as a parameter in this call:

open "gdi" for dll as #gdi
 
calldll #gdi, "SetBkMode",_
hdc AS short,_
_TRANSPARENT AS short,_
RESULT AS short
 
close #gdi

 

Placement and size of graphic text is another subjective issue. The only objective suggestion I have is: don't make the size too small!

*** BITMAP BUTTONS ***

The most graphic of the controls is the bitmap button. This is not my area of expertise, so I will just say that I think that large bitmap buttons look clumsy. Small bitmap buttons are sometimes hard to decipher. I have seen bitmap buttons that make about as much sense to me as Egyptian hieroglyphs. So, if you are going to use bitmap buttons, please make them a reasonable size and make sure the glyph on the button can be understood even by dummies like me. It is also a very good idea to give your bitmap buttons a consistent size and appearance, which includes using a similar style of graphics for all bitmap buttons on a window and using similar colors. Don't mix bright colors with pastels, for instance, or have some buttons that are photo-quality, while others are line drawings.

Toolbar or not toolbar....that is the question!

Many programmers like to use a graphic toolbar. The easiest way to do it is with bitmap buttons. Some don't like bitmap buttons because they simply invert their colors when pressed, rather than giving a 3D effect. It is very easy to make a toolbar without bitmap buttons. Make a graphicbox the size you want in the toolbar and put any images you want on it. You will need to trap mouse events and write code to handle them. If you do, you can make a graphic toolbar that pops up tooltips when the mouse moves over a 'button', and you can change the graphic that appears while the left mouse button is down, giving whatever effect you like.

You should also consider the spacing of buttons on a toolbar. If space is at a premium, the buttons may be located next to one another. If there is room, you might consider leaving a bit of blank space all around the buttons, and placing the buttons in functional groups.

*** TOOLBAR DEMOS ***

Demos of graphic toolbars are available at:

http://alyce.webjump.com/bars.zip

The zip contains 2 demos of a floating toolbar that is activated by a menu item. It also has 3 demos of graphic toolbars. In the first 2 demos, clicking the fake button makes the button appear to be depressed, and releasing the mouse makes the button again appear to be raised. The third buttonbar demo adds tooltips that appear next to the button they describe.

I have another toolbar-tooltips demo on my site that shows the tooltips all at the side, not next to the button. The zip also contains an MSIE-style button demo:

http://alyce.webjump.com/tooltip.zip

And here is a shaped bitmap button demo:

http://alyce.webjump.com/shapebtn.zip

Others have done similar demos, so if you also have one, please send it in or send the URL for it.

*** FANCY BOXES ***

There is an easy way to add depth to the look of a window. If you are using a graphicbox or graphics window, you can draw simple boxes or lines that frame text or controls to give a three-dimensional effect. I have made a Fancy GUI Box Code Generator that allows you to generate the code for these effects easily. You can vary the sizes and colors of the lines for even more variety.

Fancy Gui Boxes:

http://alyce.webjump.com/3dgen.zip

*** BORLAND MESSAGE BOXES ***

 The Borland message box is more colorful than the ordinary Windows message box. Here is an example by Doyle Whisenant, using the bwcc.dll:

Courtesy of Doyle Whisenant:

Use a borland dll to create message boxes. Styles should be OR'd together. h is the window handle. mess$ is the message in the box. subtit$ is the message on the title bar. style$ tells the box which icon and buttons to use.

style$ = _MB_APPLMODAL or _MB_DEFBUTTON1 or _MB_ICONEXCLAMATION _
or _MB_YESNOCANCEL
mess$ = "LB message box demo."
subtit$ = "Message Boxes Using BWCC.DLL"
 
open "bwcc.dll" for dll as #bwcc
calldll #bwcc, "bwccMessageBox", _
h as word, _
mess$ as ptr, _
subtit$ as ptr, _
style$ as short, _
result as short
close #bwcc
'result code:
'1 =ok
'2 =cancel
'3 =abort
'4 =retry
'5 =ignore
'6 =yes
'7 =no
Styles:
'use the following line:
_MB_APPLMODAL or _MB_DEFBUTTON1
 
'plus pick ONE of the following icons:
_MB_ICONSTOP , _MB_ICONASTERISK , _MB_ICONINFORMATION,
_MB_ICONEXCLAMATION, _MB_ICONQUESTION
 
'plus pick ONE of the following button configurations:
_MB_YESNOCANCEL,_MB_ABORTRETRYIGNORE,_MB_OK , _MB_OKCANCEL ,
_MB_YESNO

*** USING A GUI EDITOR ***

Liberty BASIC comes with FreeForm. This utility allows you to design your gui graphically. For help using FreeForm, try FreeForm for Everybody on the SSS page:

http://sidebyside.webjump.com/

There are several gui editors available at LB-intensive web sites. Some are freeware, others are shareware. We prefer not to endorse any one product, so please respond to this newsletter and tell us about your your favorite gui editor.

*** TOM'S TURN - IT SHOULD BE PLEASING TO THE EYE ***

 First and foremost on making a GUI look nice - the location of the controls. Controls for one purpose should be grouped together, and controls that have nothing to do with each other should be apart. For instance: if you are making an image editor and create a window where the user sets up the attributes for a new image, all of the controls that deal with size should be in one location, background color should be in another, etc. A nice way to keep controls from mushing together is using groupboxes.

Another big must is lining up controls. If you have a series of buttons all dealing with the same thing, they should line up vertically or horizontally, depending wether or not they are stacked. Generally, it is preferable to stack buttons rather then put them side by side because they are so much wider than high Which brings up another concept if possible, all the controls in a window should be of similar size. All buttons should have the same width and height. Text, textboxes, text editors, comboboxes, listboxes, checkboxes, radiobuttons, and buttons should all line up horizaontally. Textboxes, listboxes, and comboboxes should all be the same length.

Also: when labeling textboxes, make sure that the textboxes line up. A perfect example: try to open another file. In the OPEN dialog, at the bottom, you should notice a textbox and a combobox, labeled "File name:", and "Files of type:". Note that the textbox and the combobox line up with each other; they are not smack next to their corresponding label. This makes for a nicer looking GUI.


Newsletter compiled and edited by: Brosco and Alyce.

Comments, requests or corrections: Hit 'REPLY' now!

mailto:brosc-@orac.net.au

or

mailto:awatso-@mail.wctc.net