Custom Controls in REALbasic by Erick Tejkowsi
08-02-01

Most modern operating systems today include a full set of standard interface controls. In fact, one of the greatest features of REALbasic is that you can use any of these interface elements by simply dragging them from the Toolbar onto a window to create an interface.

Sometimes, however, you might need a control that simply doesn't exist in the operating system. The folks at REALSoftware expected this, so they gave you an elegant way to create custom controls using a subclass of the Canvas control.

Preparing the Control

To begin building a custom control, launch REALbasic or select File->New if you already have REALbasic running. Next, select File->New Class to create... you guessed it... a new class. Change the Name and Super properties of the new class to AppearanceSwitch and Canvas respectively.

This class is much like a "recipe" for a fancy new control. Of course, we haven't added any instructions to the recipe yet (that's coming next). We named it AppearanceSwitch, because it will function as a simple on/off switch. We will also make it somewhat Appearance Manager savvy by using a color from the Appearance Control Panel.

Adding Code to the Control

Double click the AppearanceSwitch class in the Project Window to open its Code Editor. This is where we will add code (i.e. recipe instructions) explaining how to draw the control and how it acts. This is also the point where you will start to realize how much hard work went into the Mac OS interface and its various elements.

Select Edit->New Property and create a Boolean property named selected. This property will keep track of the on/off state of the control.

Next, open the MouseDown event of the class and add the following code:

if y< (me.height/2) then
  //user clicked on the "OFF" part of the switch
  selected = FALSE
else
  //user clicked on the "ON" part of the switch
  selected = TRUE
end if

//redraw the control
me.refresh

This code changes the selected property to FALSE if the user clicks in the upper half of the control and TRUE if the click is in the lower half. Once the user has clicked, we redraw the control with me.refresh in case the state of the switch has changed.

Navigate to the Paint event of the class and enter the following code:

//fill in all white
g.ForeColor = RGB(255,255,255)
g.fillRect 0,0,me.width,me.height
g.textSize = 10
g.textfont = "Geneva"

//fill in the side of the switch that is selected
if selected = FALSE then//"off" is selected
  g.ForeColor = HighlightColor
  g.fillRect 0, 0, me.width, (me.height)/2

  //draw the "off" text
  g.textSize = 10
  g.textfont = "Geneva"
  g.ForeColor = RGB(0,0,0)
  g.DrawString "OFF", 4, 15

  //draw the "on" text
  g.ForeColor = RGB(0,0,0)
  g.DrawString "ON", 6, 40

else
  g.ForeColor = HighlightColor//"on" is selected
  g.fillRect 0, (me.height)/2, me.width, me.height
  g.ForeColor = RGB(255,255,255)

  //draw the "off" text
  g.ForeColor = RGB(0,0,0)
  g.DrawString "OFF", 4, 15

  //draw the "on" text
  g.ForeColor = RGB(0,0,0)
  g.DrawString "ON", 6, 40
end if

//draw outline lines
g.ForeColor = RGB(0,0,0)
g.drawrect 0,0, me.width-1, me.height-1
g.drawrect 0,0, me.width-1, (me.height-1)/2

This code takes care of drawing the control. First, it fills the whole control in white. Then, it fills in the top half of the switch with color if the switch is in the "off" position (i.e. selected=FALSE). If the switch is "on" it fills in the bottom half of the switch with color. The color used for the fill is HighlightColor, which is selected by the user in the Appearance Control Panel. Finally, the code draws the appropriate text and frames the control with a thin black line.

The final code you need to enter belongs in the Open event of the class.

selected=FALSE
me.width=25
me.height=50

This sets the switch to "off" and resizes the control to 25x50.

Using the Control

Now that you have finished building the control, you no doubt want to use it. To use the control, open Window1 from the Project Window. Drag the AppearanceSwitch from the Project Window into your Window1 interface, just as you would add a control from the Toolbar.

Another great feature of using classes as controls is that they are instantly reusable. Simply drag the class from the Project Window into the Finder. Open a new or existing project and drag the class from the Finder into the Project Window. You are now free to use the class in any window of the project.

Conclusion

Your finished project should look something like this: (although the color may differ)

As usual you can download the completed project.

Custom Controls in REALbasic by Erick Tejkowsi 08-02-01

Custom Controls in REALbasic by Erick Tejkowsi
08-02-01