Transcript GUI design guidelines

SCIRun GUI Guidelines
Advanced BioPSE
J. Davison de St. Germain
Chief Software Engineer
SCI Institute
801-581-4078
[email protected]
December 2003
NCRR
Important Elements
Advanced BioPSE
• Button Panel
- Execute
- Close
- Find
• Execution Policy
- Interactive/Delayed
• Tab notebook
NCRR
Helper Utilities
Advanced BioPSE
• Can be found in
./SCIRun/src/Dataflow/GUI/
- SciDialog.tcl
proc createSciDialog
- SciButtonPanel.tcl
proc makeSciButtonPanel
- SciMoveToCursor.tcl
proc moveToCursor
NCRR
How To Use TCL/Tk
• Sketch on paper first
• Use frames liberally
Advanced BioPSE
- Grooves and padding are your
friends.
• Resize the window often during
creation
- This will help you make sure that
resizing works the way you want it to
for the end product.
NCRR
My Last Tip: Use Tooltips!
Advanced BioPSE
• SCIRun now has tooltips!
• As you create your GUI, add
extensive tooltips to everything!
• The user can turn them off once
they know everything.
• Convenience functions can be
found in:
./SCIRun/src/Dataflow/GUI/Tooltips.tcl
NCRR
Tcl/Tk Packing Example
• method ui {} {
Advanced BioPSE
# create a local variable named ‘w’ for
# easier reference. Modname is unique to each GUI:
set w .ui[modname]
# Create a frame called main_window
frame $w.main_window
# Pack the winow (make it appear) and tell it to grow when
# the window is resized. Give it a groove to make it stand out.
pack $w.main_window -expand yes -fill both -relief groove -borderwidth 2
# Create a button with text “Do it” that runs the given command
button $w.main_window.doit -text “Do it” -command “run this command”
# Add a tool tip to the command
Tooltip $w.main_window.doit “Press this button to do…”
# Add on the common Sci Buttons (Execute, Close, Find)
makeSciButtonPanel $w $w $this
# Move the window to be near the cursor.
moveToCursor $w
}
NCRR
Tcl/Tk, Itcl/Itk Web Pages
Advanced BioPSE
• http://www.tcl.tk/man/tcl8.3/
- Button, canvas, checkbutton,
label, menu, scrollbar, text, etc
• Itcl/itk
- Used to help organize tcl code
- http://incrtcl.sourceforge.net/itcl
- http://incrtcl.sourceforge.net/itk
NCRR
GuiVars
Advanced BioPSE
• GuiVars connect C++ code with TCL
code (so programmer doesn’t have to.)
-
GuiString
GuiInt
GuiDouble
Etc.
• C++ side:
- variable.get(), variable.set()
• Tcl/Tk side:
- $this-variable
NCRR
Questions
Advanced BioPSE
NCRR
Advanced BioPSE
NCRR