Chapter 6. The Button Widget

Table of Contents

6.1. Normal Buttons
6.2. Toggle Buttons
6.3. Check Buttons
6.4. Radio Buttons

6.1. Normal Buttons

We've almost seen all there is to see of the button widget. It's pretty simple. You can use the GTK.GtkButton class>>#newWithLabel: function to create a button with a label by passing a string parameter, or to create a blank button by not specifying a label string. It's then up to you to pack a label or pixmap into this new button. To do this, create a new box, and then pack your objects into this box using the usual #packStart: method, and then use the #add: method to pack the box into the button.

The function to create a button is:

  button = GTK.GtkButton newWithLabel: aString

if label text is specified it is used as the text on the button. If stock is specified it is used to select a stock icon and text label for the button. The stock items are:

  GTK.Gtk gtkStockDialogInfo
  GTK.Gtk gtkStockDialogWarning
  GTK.Gtk gtkStockDialogError
  GTK.Gtk gtkStockDialogQuestion
  GTK.Gtk gtkStockDnd
  GTK.Gtk gtkStockDndMultiple
  GTK.Gtk gtkStockAdd
  GTK.Gtk gtkStockApply
  GTK.Gtk gtkStockBold
  GTK.Gtk gtkStockCancel
  GTK.Gtk gtkStockCdrom
  GTK.Gtk gtkStockClear
  GTK.Gtk gtkStockClose
  GTK.Gtk gtkStockConvert
  GTK.Gtk gtkStockCopy
  GTK.Gtk gtkStockCut
  GTK.Gtk gtkStockDelete
  GTK.Gtk gtkStockExecute
  GTK.Gtk gtkStockFind
  GTK.Gtk gtkStockFindAndReplace
  GTK.Gtk gtkStockFloppy
  GTK.Gtk gtkStockGotoBottom
  GTK.Gtk gtkStockGotoFirst
  GTK.Gtk gtkStockGotoLast
  GTK.Gtk gtkStockGotoTop
  GTK.Gtk gtkStockGoBack
  GTK.Gtk gtkStockGoDown
  GTK.Gtk gtkStockGoForward
  GTK.Gtk gtkStockGoUp
  GTK.Gtk gtkStockHelp
  GTK.Gtk gtkStockHome
  GTK.Gtk gtkStockIndex
  GTK.Gtk gtkStockItalic
  GTK.Gtk gtkStockJumpTo
  GTK.Gtk gtkStockJustifyCenter
  GTK.Gtk gtkStockJustifyFill
  GTK.Gtk gtkStockJustifyLeft
  GTK.Gtk gtkStockJustifyRight
  GTK.Gtk gtkStockMissingImage
  GTK.Gtk gtkStockNew
  GTK.Gtk gtkStockNo
  GTK.Gtk gtkStockOk
  GTK.Gtk gtkStockOpen
  GTK.Gtk gtkStockPaste
  GTK.Gtk gtkStockPreference
  GTK.Gtk gtkStockPrint
  GTK.Gtk gtkStockPrintPreview
  GTK.Gtk gtkStockProperties
  GTK.Gtk gtkStockQuit
  GTK.Gtk gtkStockRedo
  GTK.Gtk gtkStockRefresh
  GTK.Gtk gtkStockRemove
  GTK.Gtk gtkStockRevertToSaved
  GTK.Gtk gtkStockSave
  GTK.Gtk gtkStockSaveAs
  GTK.Gtk gtkStockSelectColor
  GTK.Gtk gtkStockSelectFont
  GTK.Gtk gtkStockSortAscending
  GTK.Gtk gtkStockSortDescending
  GTK.Gtk gtkStockSpellCheck
  GTK.Gtk gtkStockStop
  GTK.Gtk gtkStockStrikeThrough
  GTK.Gtk gtkStockUndelete
  GTK.Gtk gtkStockUnderline
  GTK.Gtk gtkStockUndo
  GTK.Gtk gtkStockYes
  GTK.Gtk gtkStockZoom100
  GTK.Gtk gtkStockZoomFit
  GTK.Gtk gtkStockZoomIn
  GTK.Gtk gtkStockZoomOut

The buttons.st program provides an example of using GTK.GtkButton/ to create a button with an image and a label in it. I've broken up the code to create a box from the rest so you can use it in your programs. There are further examples of using images later in the tutorial. Figure 6.1, “Button with Pixmap and Label” shows the window containing a button with both a pixmap and a label:

Figure 6.1. Button with Pixmap and Label

Button with Pixmap and Label

The source code for the buttons.st program is:

   1    #!/usr/bin/env gst                                                 
   2                                                                       
   3    " example buttons.st"                                              
   4                                                                       
   5    Eval [                                                             
   6        PackageLoader fileInPackage: 'GTK'.                            
   7    ]                                                                  
   8                                                                       
   9    Object subclass: Buttons [                                         
  10        | box1 button window |                                         
  11                                                                       
  12        " Our usual callback method "                                  
  13        callback: aGtkWidget data: aString [                           
  14            ('Hello again - ', aString, ' was pressed') printNl        
  15        ]                                                              
  16                                                                       
  17        quit [                                                         
  18            GTK.Gtk mainQuit                                           
  19        ]                                                              
  20                                                                       
  21        " Create a new hbox with an image and a label packed into it   
  22          and return the box. "                                        
  23        xpm_label_box: xpm_filename labeled: label_text [              
  24            | box1 image label |                                       
  25                                                                       
  26            " Create box for xpm and label "                           
  27            box1 := GTK.GtkHBox new: false spacing: 0.                 
  28            box1 setBorderWidth: 2.                                    
  29                                                                       
  30            " Now on to the image stuff "
  31            image := GTK.GtkImage newFromFile: xpm_filename.
  32
  33            " Create a label for the button "
  34            label := GTK.GtkLabel new: label_text.
  35
  36            " Pack the pixmap and label into the box "
  37            box1 packStart: image expand: false fill: false padding: 3.
  38            box1 packStart: label expand: false fill: false padding: 3.
  39
  40            image show.
  41            label show.
  42
  43            ^ box1
  44        ]
  45
  46        show [
  47            " Create a new window "
  48            window := GTK.GtkWindow new:GTK.Gtk gtkWindowToplevel.
  49
  50            window setTitle: 'Image''d Buttons!'.
  51
  52            " It's a good idea to do this for all windows. "
  53            window connectSignal: #'destroy' to: self selector: #quit.
  54            window connectSignal: #'delete_event' to: self selector: #quit.
  55
  56            " Sets the border width of the window. "
  57            window setBorderWidth: 10.
  58
  59            " Create a new button "
  60            button := GTK.GtkButton new.
  61
  62            " Connect the #'clicked' signal of the button to our callback "
  63            button connectSignal: #'clicked' to: self selector: #'callback:data:' userData: 'cool button'.
  64
  65            " This calls our box creating function "
  66            box1 := self xpm_label_box: 'info.xpm' labeled: 'cool button'.
  67
  68            " Pack and show all our widgets "
  69            button add: box1.
  70
  71            box1 show.
  72            button show.
  73
  74            window add: button.
  75            window show.
  76        ]
  77    ]
  78
  79    Eval [
  80        buttons := Buttons new.
  81        buttons show.
  82        GTK.Gtk main
  83    ]

Lines 23-44 define the #xpm_label_box:labeled: helper function which creates a horizontal box with a border width of 2 (lines 27-28), populates it with an image (line 31) and a label (line 34).

Lines 9-77 define the Buttons class. Lines 46-76 define the instance initialization method which creates a window (line 48), sets the title (line 50), connects the "delete_event" and "destroy" signals (lines 53-54). Line 60 creates the button without a label. Its "clicked" signal gets connected to the #callback:data: method in line 63. The #xpm_label_box:labeled: function is called in line 66 to create the image and label to put in the button in line 69.

The #xpm_label_box:labeled: function could be used to pack xpm's and labels into any widget that can be a container.

The Button widget has the following signals:

      pressed - emitted when pointer button is pressed within Button widget

      released - emitted when pointer button is released within Button widget

      clicked - emitted when pointer button is pressed and then released within Button widget

      enter - emitted when pointer enters Button widget

      leave - emitted when pointer leaves Button widget