



	   ################################################
	   #                                              #
	   # ##   ## ###### ####### ##    ## ## ##     ## #
	   # ##   ## ##  ## ##      ###   ## ##  ##   ##  #
	   # ##   ## ##     ##      ####  ## ##   ## ##   #
	   # ##   ## ###### ######  ## ## ## ##    ###    #
	   # ##   ##     ## ##      ##  #### ##   ## ##   #
	   # ##   ## ##  ## ##      ##   ### ##  ##   ##  #
	   # ####### ###### ####### ##    ## ## ##     ## #
	   #                                              #
	   ################################################






 
 
 
	 The following paper was originally presented at the

		     Third Annual Tcl/Tk Workshop
		 Toronto, Ontario, Canada, July 1995

	   sponsored by Unisys, Inc. and USENIX Association



	    It was published by USENIX Association in the
		  1995 Tcl/Tk Workshop Proceedings.
 
 
 
 
        For more information about USENIX Association contact:
 
                   1. Phone:    510 528-8649
                   2. FAX:      510 548-5738
                   3. Email:    office@usenix.org
                   4. WWW URL:  http://www.usenix.org
 
 
 
 
 
^L
          A Graphical User Interface Builder for Tk[1]


                        Stephen A. Uhler

                  Sun Microsystems Laboratories


                            ABSTRACT

          I will  demonstrate  a  prototype  graphical  user
     interface builder for Tk that provides a direct manipu-
     lation interface for building, editing and  testing  Tk
     applications.   A  novel  dynamic "smart-grid" combines
     the familiarity of a  spreadsheet-like  WYSIWYG  inter-
     face,  with  the  powerful  constraint  based  geometry
     management capabilities  of  Tk  to  provide  automatic
     widget  alignment,  distribution, and resize management
     capabilities.


Introduction

     Tk and Tcl are rapidly expanding beyond their  initial  user
community of researchers and software developers.  However, to be
an effective tool for computer users as well as computer program-
mers,  the generation and layout of user interface elements needs
to be automated  and  simplified.   The  user  interface  builder
attempts  to combine familiar interface concepts from common user
interface models with the inherent strengths of Tk to  provide  a
powerful,  easy to use system for designing graphical user inter-
faces.


Program description

     The user interface builder provides  a  direct  manipulation
interface for the layout and placement of user interface elements
(widgets).  The interface layout is created by  dragging  widgets
from  a palette onto a layout area, or table, originally consist-
ing of blank rows and columns.  The geometry management  is  han-
dled  in  Tk  with  blt_table,  a table based geometry manager by
George Howlett.[2] Once a widget is placed onto the table, it may
be  dragged  with  the  mouse  to  a different row and column, or
changed in shape or size to span multiple rows or  columns.   The
user  interface  style  is  a combination of a spreadsheet, where
entries are arranged in rows and columns, and a drawing  program,
where  items are selected from a palette and displayed in a draw-
ing area.  The two interface paradigms are combined by  automati-
cally  snapping  the  widgets  to  a  grid, whose spacing changes
dynamically, shrink-wrapping  around  the  widgets  as  they  are
placed.   This smart grid provides easy alignment and spacing for
widgets of various shapes and sizes, while maintaining the  fami-
liar notion of a table.

     The smart grid concept is extended to enable the table to be
interactively  resized  by  the  user,  while  giving  the  table
developer a flexible, yet easy mechanism for specifying how indi-
vidual  widgets  grow  or  shrink as the entire table is resized.
The resize behavior is specified first by identifying which  rows
and  columns of the table can grow or shrink as the table changes
size.  Next, each widget is configured to specify how  it  floats
or sticks to the sides of its row and column.  If a widget sticks
to the sides of a column, then it will grow as the column becomes
larger.   If it floats, then blank space will fill the column, as
the widget's size remains same size.

     For layouts that are not easily specified in  terms  of  the
rows  and  columns of a table, such as those interfaces where the
widgets should not be aligned, an arbitrary rectangular region of
the  table  may  be  treated  as an independent sub-table widget,
whose grid spacing need not line up with that of the main  table.
Widgets can be dragged between the main table and a sub-table, or
between two sub-tables.  The sub-tables can be copied or  dragged
like ordinary widgets, and can nest to an arbitrary depth.

     Each widget has a property sheet containing all of the  con-
figurable  options for the widget, which includes both the widget
properties, and its geometric constraints.  For those options  in
which  the  underlying Tk specifications are overly complex, such
as font names, a simplified view is presented to  the  user,  and
the  interface  builder  automatically translates the information
into the format required by Tk.  Although a complete user  inter-
face  may  be  specified  by  filling  out of the widget property
sheets, a toolbar above the layout table allows rapid  configura-
tion  of  common  options  accessed by way of graphical pull-down
menus.  In either case, the effect of the option change is  shown
immediately,  and the widget looks exactly as it will in the real
application.

     The property sheets for each widget are computed dynamically
using  the  reflexive properties of Tk to determine which options
are applicable to a particular widget.  Similarly, upon  startup,
the user interface builder automatically determines which Tk com-
mands are widgets, and automatically places them  on  the  widget
palette. If Tk is extended by adding new widgets, the user inter-
face builder will automatically include them on the palette, mak-
ing them available to the user with no special action required.

     Once the user interface form has been completed, it is saved
to  a  file  using a simple ASCII format which is interpreted and
turned into Tk code by a separate Tcl procedure.  With this tech-
nique,  the user interface builder never needs to read and inter-
pret Tk code, and the translation from the table layout  into  Tk
can  be changed without affecting the user interface builder.  At
any time, the user interface under  construction  may  be  tested
with  a  single button press that saves it to a file, converts it
into Tk, and runs it in a separate interpreter.


Design considerations and implementation issues

     The primary design decisions involve  the  tradeoff  between
performance  and  portability.  The current prototype of the user
interface builder is written entirely in Tcl.  When the  Mac  and
PC ports of Tk are available, the user interface builder will run
un-modified.  If the Tcl- only solution was too slow  to  perform
adequately  on  middle-of-the-road  computing  hardware, then its
usefulness would be  limited.   The  prototype  carefully  caches
information  to  minimize the amount of Tcl code that needs to be
executed at mouse-motion time.  The user interface builder  makes
use  of  the  new after idle[3] construct in Tk 4.0 to maintain a
cache of relevant information when the application is idle.  As a
result, the performance is adequate, even on a mid-range "PC".


Prior work

     Of the many user interface builders available, two are  par-
ticularly relevant: Visual Basic[4] and XF.[5] Visual Basic, from
Microsoft, provides a simple interface that  has  given  a  large
number of non-traditional programmers the ability to write graph-
ical user interfaces.  Visual Basic provides  a  layout  area  to
assemble  widgets, and property sheets to specify their behavior.
This prototype attempts to  capture  the  simplicity  that  makes
Visual  Basic  so  accessible, without forgoing the sophisticated
constraint based geometry management capabilities of Tk.

     XF, by Sven Delmas, is a graphical  user  interface  builder
for  Tk.   It  provides  a  forms based interface for building Tk
applications.  XF, however, does not attempt to hide the complex-
ities  of  Tk  from  the user.  Instead, it presents the language
features as-is, in a graphical form, and relies on the packer for
geometry  management,  whose  geometry  management model does not
lend itself to a direct manipulation interface.


Summary and conclusions

     The familiar user interface paradigms  of  spreadsheets  and
drawing programs are combined in a user interface builder for Tk.
The interface builder supports a  direct  manipulation  interface
for laying out user interface elements, yet still takes advantage
of the powerful constraint based geometry management capabilities
of  Tk.   The  current prototype verifies that sophisticated user
interfaces may be constructed entirely in Tcl, without  resorting
to  "C"  code to provide adequate performance, as long as care is
taken when coding time critical tasks.


References

1.   John Ousterhout, Tcl and the  Tk  Toolkit,  Addison  Wesley,
     April, 1994.

2.   George  Howlett,  "A  Table  Geometry  Manager  for  the  Tk
     Toolkit,"  in  1993 Tk/Tcl Workshop Proceedings [online ver-
     sion], AT&T Bell Laboratories, 1993.

3.   John Ousterhout, Tk 4.0b3 Reference Manual, Sun Microsystems
     Unpublished Draft, February, 1995.

4.   Microsoft Corporation, Visual Basic Programming  System  for
     Windows Programmer's Guide, Microsoft Corporation, 1993.

5.   Sven Delmas, XF - Design and Implementation of a Programming
     Environment  for  Interactive Construction of Graphical User
     Interfaces, Technische Universitat Berlin, March, 1993.

