Add a Widget Gallery to Racket GUI documentation

It's very helpful to have a visual aid when dealing with a graphical
interface toolkit.

This patch adds an overview of the widgets available in the library
consisting of screen shots of the main ones and the snippets used to
produce them.

Each widget image link back to the full documentation.

collects/scribblings/gui/button-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/button}}
+
 @defclass/title[button% object% (control<%>)]{
 
 Whenever a button is clicked by the user, the button's callback

collects/scribblings/gui/check-box-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/check-box}}
+
 @defclass/title[check-box% object% (control<%>)]{
 
 A check box is a labeled box which is either checked or unchecked.

collects/scribblings/gui/choice-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/choice}}
+
 @defclass/title[choice% object% (list-control<%>)]{
 
 A choice item allows the user to select one string item from a pop-up

collects/scribblings/gui/combo-field-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/combo-field}}
+
 @defclass/title[combo-field% text-field% ()]{
 
 A @racket[combo-field%] object is a @racket[text-field%]

collects/scribblings/gui/editor-canvas-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/editor-canvas}}
+
 @defclass/title[editor-canvas% object% (canvas<%>)]{
 
 An @racket[editor-canvas%] object manages and displays a

collects/scribblings/gui/gauge-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/gauge}}
+
 @defclass/title[gauge% object% (control<%>)]{
 
 A gauge is a horizontal or vertical bar for displaying the output

collects/scribblings/gui/group-box-panel-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/group-box-panel}}
+
 @defclass/title[group-box-panel% vertical-panel% ()]{
 
 A group-box panel arranges its subwindows in a single column, but also

collects/scribblings/gui/gui.scrbl

@@ -41,6 +41,7 @@ Both parts of the toolbox rely extensively on the
 @;------------------------------------------------------------------------
 
 @include-section["win-overview.scrbl"]
+@include-section["widget-gallery.scrbl"]
 @include-section["win-classes.scrbl"]
 @include-section["win-funcs.scrbl"]
 @include-section["editor-overview.scrbl"]

collects/scribblings/gui/list-box-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/list-box}}
+
 @(define lbnumnote @elem{List box rows are indexed from @racket[0].})
 @(define lbcnumnote @elem{List box rows and columns are indexed from @racket[0].})
 

collects/scribblings/gui/menu-bar-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/menu-bar}}
+
 @defclass/title[menu-bar% object% (menu-item-container<%>)]{
 
 A @racket[menu-bar%] object is created for a particular

collects/scribblings/gui/message-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/message}}
+
 @defclass/title[message% object% (control<%>)]{
 
 A message control is a static line of text or a static bitmap. The

collects/scribblings/gui/panel-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/panel}}
+
 @defclass/title[panel% object% (area-container-window<%> subwindow<%>)]{
 
 A panel is a both a container and a containee window. It serves mainly

collects/scribblings/gui/radio-box-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/radio-box}}
+
 @defclass/title[radio-box% object% (control<%>)]{
 
 

collects/scribblings/gui/slider-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/slider}}
+
 @defclass/title[slider% object% (control<%>)]{
 
 A @racket[slider] object is a panel item with a handle that the user can

collects/scribblings/gui/tab-panel-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/tab-panel}}
+
 @defclass/title[tab-panel% vertical-panel% ()]{
 
 A tab panel arranges its subwindows in a single column, but also

collects/scribblings/gui/text-field-class.scrbl

@@ -1,6 +1,8 @@
 #lang scribble/doc
 @(require "common.rkt")
 
+@centered{@image[#:suffixes @list[".png"]]{image/text-field}}
+
 @defclass/title[text-field% object% (control<%>)]{
 
 A @racket[text-field%] object is an editable text field with an

collects/scribblings/gui/widget-gallery.rkt

@@ -0,0 +1,18 @@
+(module widget scheme/base
+  (require racket/string
+           "common.rkt")
+
+  (provide showcase-widget)
+
+  (define-syntax showcase-widget
+    (syntax-rules ()
+      ((_ widget code ...)
+       (begin
+         (racketlink widget
+                     (image #:suffixes
+                            (list ".png")
+                            (string-append "image/"
+                                           (string-trim (symbol->string 'widget)
+                                                        "%"
+                                                        #:left? #f))))
+         (racketblock code ...))))))

collects/scribblings/gui/widget-gallery.scrbl

@@ -0,0 +1,136 @@
+#lang scribble/doc
+@(require "common.rkt"
+          "widget-gallery.rkt")
+
+@title[#:style '(toc quiet)]{Widget Gallery}
+
+This section gives an overview of the main widgets available in the Racket Graphical Interface Toolkit and each image points to its full documentation.
+
+@(showcase-widget button%
+(define button (new button%
+                    (parent panel)
+                    (label "Button")))
+)
+
+@(showcase-widget check-box%
+(define check-box (new check-box%
+                       (parent panel)
+                       (label "Check Box")
+                       (value #t)))
+)
+
+@(showcase-widget choice%
+(define choice (new choice%
+                    (label "Choice")
+                    (parent panel)
+                    (choices (list "Item 0"))))
+)
+
+@(showcase-widget combo-field%
+(define combo-field (new combo-field%
+                         (label "Combo")
+                         (parent panel)
+                         (choices (list "Field"))
+                         (init-value "Field")))
+)
+
+@(showcase-widget editor-canvas%
+(define editor-canvas (new editor-canvas%
+                           (parent panel)
+                           (label "Editor Canvas")))
+(define text (new text%))
+(send text insert "Editor Canvas")
+(send editor-canvas set-editor text)
+)
+
+
+@(showcase-widget gauge%
+(define gauge (new gauge%
+                   (label "Gauge")
+                   (parent panel)
+                   (range 100)))
+(send gauge set-value 42)
+)
+
+@(showcase-widget group-box-panel%
+(define group-box-panel (new group-box-panel%
+                             (parent panel)
+                             (label "Group Box Panel")))
+)
+
+@(showcase-widget list-box%
+(define list-box (new list-box%
+                      (label "List Box")
+                      (parent (new horizontal-panel%
+                                   (parent panel)
+                                   (style (list 'border))))
+                      (choices (list "Item 0"
+                                     "Item 1"
+                                     "Item 2"))
+                      (style (list 'single
+                                   'column-headers))
+                      (columns (list "First Column"))))
+)
+
+@(showcase-widget menu-bar%
+(define menu-bar (new menu-bar%
+                      (parent frame)))
+(new menu%
+     (label "&File")
+     (parent menu-bar))
+(new menu%
+     (label "&Edit")
+     (parent menu-bar))
+(new menu%
+     (label "&Help")
+     (parent menu-bar))
+)
+
+@(showcase-widget message%
+(define message (new message%
+                     (parent panel)
+                     (label "Message")))
+)
+
+@(showcase-widget panel%
+(define a-panel (new panel%
+                     (parent panel)
+                     (style (list 'border))))
+(new message%
+     (parent a-panel)
+     (label "Panel"))
+)
+
+
+@(showcase-widget radio-box%
+(define radio-box (new radio-box%
+                       (label "Radio Box")
+                       (parent panel)
+                       (choices (list "Button 0"
+                                      "Button 1"
+                                      "Button 2"))))
+)
+
+@(showcase-widget slider%
+(define slider (new slider%
+                    (label "Slider")
+                    (parent panel)
+                    (min-value 0)
+                    (max-value 100)
+                    (init-value 42)))
+)
+
+@(showcase-widget tab-panel%
+(define tab-panel (new tab-panel%
+                       (parent panel)
+                       (choices (list "Tab 0"
+                                      "Tab 1"
+                                      "Tab 2"))))
+)
+
+@(showcase-widget text-field%
+(define text-field (new text-field%
+                        (label "Text")
+                        (parent panel)
+                        (init-value "Field")))
+)