Putting it all Together

The best way to explain this is by example, so this section is a tutorial which will lead you through constructing a window which looks like the main DrScheme window (without menu bars or any functionality).

The DrScheme window consists of a text area and 5 buttons across the top, above two media canvases. Since we can only insert a single panel into a frame, we'll use a mred:vertical-panel%, because the main components of the window are arranged vertically.

The canvases are easy; they will automatically resize themselves to fill the entire bottom part of the panel. For the controls across the top, we need a mred:horizontal-panel%.

So, first, create the frame and the main panel in the frame:

(define dr-frame (make-object mred:frame% null "DrScheme" 1 1 600 600))
(send dr-frame show #t)

The show command will make the window visible as it is constructed.

(define dr-panel (make-object mred:vertical-panel% dr-frame))

This vertical panel, which has been inserted automatically into the frame, will contain a horizontal panel and two media canvases. So,

(define top-panel (make-object mred:horizontal-panel% dr-panel))
(define edit-canvas (make-object mred:media-canvas% dr-panel))
(define rep-canvas (make-object mred:media-canvas% dr-panel))

Since these objects are inserted in the order in which they were created, top-panel is at the top, followed by edit-canvas and rep-canvas.

You will note that the top portion of the window is blank; this is top-panel. However, it occupies roughly the top third of the window, whereas in DrScheme, it only occupies just enough room for its components. So, we need to make it vertically non-stretchable.

(send top-panel stretchable-in-y #f)

You should now see the blank space only across the top of the window, and the two canvases should have resized themselves accordingly. Now, all we need to do is create the controls that will appear inside top-panel. We want to have the text item against the left edge and the buttons against the right. So, we insert a blank stretchable panel between the text and the buttons and make sure that no other components are stretchable. This way, all of the extra space will be given to the blank panel, forcing the buttons to the right edge of the frame. It doesn't particularly matter which kind of panel we use here.

(define filename (make-object mred:message% top-panel "Untitled 1"))
(define spacing (make-object mred:horizontal-panel% top-panel))
(define execute-button (make-object mred:button% top-panel null "Execute"))
(define color-button (make-object mred:button% top-panel null "Color"))
(define stop-button (make-object mred:button% top-panel null "Stop Executing"))
(define check-button (make-object mred:button% top-panel null "Check Syntax"))
(define help-button (make-object mred:button% top-panel null "Help"))

Now all the controls are in place, and there is only one thing left to clean up. Notice that the controls across the top seem to be indented slightly. This is top-panel's border, which we should set to zero.

(send top-panel border 0)

You will have noticed that every change to the window required a full redraw, which is very visible to the user. If you wish to avoid this unattractive flickering, simply construct your window fully before issuing the (send frame show #t) command (or equivalent).