[previous] [up] [next]     [contents] [index]
Next: Handling Events Up: MrEd Applications: An Example Previous: MrEd Applications: An Example

Creating Graphical Elements

To implement the interactive phone book, we first instantiate the graphical elements that make up the interface, focusing on the elements' appearance rather than their functionality. The basic graphical element in the interactive phone book is a frame, i.e., a top-level window. To create a frame, we make an instance of the class mred:frame% using the make-object procedure:

  (define a-frame 
    (make-object mred:frame% 
                null ; No parent frame 
                "Phone Book")) ; The frame's title
The procedure make-object takes a class and class-specific initialization arguments and returns an object that is an instance of the class. The empty list is used here to indicate that the frame has no graphical parent (because it is a top-level frame). The last arguments specifies the frame's title. When the above expression is are evaluated, a-frame is bound to an invisible graphical frame. Evaluating:
  (send a-frame show #t)
makes the frame visible. The frame is empty (and probably quite small) at the moment.

We can add text fields and buttons to a-frame by creating a panel in the frame. A panel is a sub-window in a frame that is used to group together a set of controls, such as text fields and buttons. All controls in a frame must be placed in a panel. A panel with vertically-arranged items is created by instantiating the mred:vertical-panel% class:

  (define a-panel 
    (make-object mred:vertical-panel% 
                 a-frame)) ; Panel is in a-frame

The initialization argument for a panel specifies its graphical parent, a-frame. When the panel is created, it will automatically install itself as a child of a-frame. Evaluating the above expression creates a panel in the graphical frame, although there may be no visible effect in the frame.

Next, we add controls to the panel, starting with the top-left element, the ``Name'' text field. First note, however, that the ``Name'' field and the ``Quit'' button are arranged horizontally, so a horizontal sub-panel is needed:

  (define h-panel 
    (make-object mred:horizontal-panel% 
                 a-panel)) ; Panel is in a-frame

Now, we create the ``Name'' field:

 (define name-text  
   (make-object mred:text%  
                h-panel  
                (lambda (self event) (refresh-number-info)) 
                "Name"  ; label
                ""))    ; initial value
The class mred:text% class implements a simple text control. The first initialization argument is the control's graphical parent, h-panel. The second argument is a ``callback'' procedure that is invoked whenever this control gets keyboard input. When the text in this control is changed, a new phone number search will be performed; for now, this procedure remains unspecified. The third initialization argument specifies a label for the item, and the final argument is the initial string value in the control. Evaluating the expression creates a new text control that immediately appears in the graphical frame. The new text control is graphically functional, i.e., text can be entered into the control, but the control's value is not yet used to find a phone number.

Next, we create the ``Quit'' button in the horizontal panel:

  (define quit-button 
    (make-object mred:button% 
                 h-panel 
                 (lambda (self event)  
                   (send a-frame show #f)) 
                 "Quit")) ; Button label
When this expression is evaluated, a button labelled ``Quit'' appears in the graphical frame. Unlike the text field, the callback procedure provided here already does something; clicking on this button will close the frame. When the frame is hidden, it is not destroyed. Evaluating (send a-frame show #t) will make the frame visible again.

The ``home''-``office'' toggle selector is the next vertical element:

  (define number-selector 
    (make-object mred:radio-box% 
                 a-panel 
                 (lambda (self event) (refresh-number-info)) 
                 "" ; No label 
                 -1 -1 -1 -1  ; Default position and size 
                 (list "Home Number" "Office Number")))
A radio-box% graphical element contains a number of mutually exclusive switches. The last initialization argument specifies a list of labels for the switches. Evaluating the above expression creates a toggle selector with switches labelled ``Home Number'' and ``Office Number''. Like the ``Name'' text field, this toggle selector is immediately graphically functional, but the selection is not yet used to find a phone number.

Finally, we create the phone number display element as a text control:

  (define number-text 
    (make-object mred:text% 
                 a-panel 
                 (lambda (self event) #f) ; No event-handling 
                 "Number" 
                 "(Unknown)"))
(send number-text set-editable #f)
Evaluataing these expressions creates the ``Number'' display text control. The last expression configures the control so that the user cannot type a value into the field.


[previous] [up] [next]     [contents] [index]
Next: Handling Events Up: MrEd Applications: An Example Previous: MrEd Applications: An Example

PLT