---------------------------------------------------------
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:

Searching Arrays, Part 2 - by Ian Davies
Menus
General Programming Principles
---------------------------------------------------------
*** 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:

Cpurtesy 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:brosco@orac.net.au
                       or
           mailto:awatson@mail.wctc.net
---------------------------------------------------------