UI Software

1
UI Software

• Toolkits
• User Interface Management Systems
• GUI Builders

2
Agenda

• Applications to build applications

3
User Interface Software

• What support is provided for building graphical
  user interfaces?
• Design tools
• UI toolkits
• GUI builder tools

4
Design Tools

• Prototyping or mock-up creators
• Example Apple Hypercard
• Allows control of simple card transitions
• More complex behaviors

on mouseUp play boing wait for 3 seconds
visual effect wipe left very fast to black
click at 150,100 type goodbye end mouseUp
5
Toolkits

• Library of software components and routines that
  programmer puts together
• X Windows X Toolkit Motif
• Macintosh Mac Toolbox, MacApp, Carbon
• Windows Windows Developers Toolkit
• Java Swing

6
Widget

• Graphical user interface interactor object

7
Widget Hierarchy

• Widgets organized into inheritance hierarchy

Primitive
Button
Label
Scroll Bar
Text
Push Button
Toggle Button
Drawn Button
8
Widget

• Visual appearance
• Set of tailorable attributes
• Interactive behavior

PushButton Color BackGround int
MarginLeft int MarginRight int
BorderWidth Pixmap ArmPixmap Boolean
FillOnArm CallbackList ActivateCallback
9
Widget Use

• Set up widget attributes
• Create widget object (as child of parent widget)
• Define callback or event procedure for widget

10
Callback Routine

• Software procedure
• Invoked when particular action occurs to a
  widget, such as pressing a PushButton
• Procedure is invoked with event parameters

11
Example - X Motif
n 0 xmstr XmStringCreate("Color",XmSTRI
NG_DEFAULT_CHARSET) XtSetArg(argsn,
XmNlabelString, xmstr) n
XtSetArg(argsn, XmNbackground, red)
n colorbut XtCreateManagedWidget("colorbutton
", xmPushButtonWidgetClass,focusro
wcol, args, n) XtAddCallback(colorbut,
XmNactivateCallback,
colorChangeCB, id) void colorChangeCB(Widget
w, XtPointer userdata, XtPointer evtdata)
// Actions
12
Main Program Event Loop
voidCheckXEvents() XEvent xev while
(XtAppPending(_context))
XtAppNextEvent(_context, xev)
XtDispatchEvent(xev)
13
GUI Builder Tools

• Why build graphical (visual) interface with
  textual commands?
• Why not show what you want it to look like?
• Visual builder tools Visual Basic, Visual C,
  QT, WxWindows

14
Tool Methods

• Work area (interface being built)
• Drag and drop interactors/widgets onto work area
• Specify position, color, look, etc.
• Often provide Build/Test modes

15
Example dtbuilder (Motif)
16
Example Visual Basic

• GUI Builder with built-in access to other
  Microsoft products

17
Widgets in Toolbox
18
Starting VB

• Create Project
• New Project
• Standard exe
• Gives blank App w/ form

19
VB

• Useful elements
• Labels -- Properties
• Color
• Transparent/opaque
• Buttons -- Properties
• Caption (different from name)
• Set style to graphical to change color
• Image
• Picture properties allow selection of image file

20
VB - Programming

• Double-click item brings up code
• Several functions for form present
• Variable me refers to container (The form where
  the button/control resides)

21
Menus

• Menu Editor in pop-op
• Next button appends a line in which item can be
  added
• Indent button makes menu item into a sub-item