8-2-01

Custom Controls in REALbasic by Erick Tejkowsi

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
  Color
  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.

7-29-01

REALbasic News by Erick Tejkowsi

iDevGames does RB too! Will Burgers recently joined the staff of iDevGames.com to cover REALbasic game programming and RB news. This is one of the most fun Mac programming sites out there, so make sure to check it out. They have lots of code examples, tutorials, and other interesting downloads. Although they focus on game programming, much of their information is applicable to non-game programming needs as well.

New version of REALbasic! REALSoftware has announced the immediate availability of REALbasic 3.5b2. This version squashes more bugs and updates some of the newer features.

No, he doesn't sleep! Michio Ono is at it again, releasing a new plugin entitled Micono RbPaletteTool.

Micono RbPaletteTool is a plug-in which adds the function of color-quantization and palette operations to REALbasic. Color-quantization can be carried out including an alpha channel. Micono RbPaletteTool is modified so that it can be used by 68K, PPC, Carbon, and Win32.

Need Code? Here's a nifty site that I stumbled upon (and until now somehow missed). Patrick has some nice code examples. I found the CCThemeFocusRect helpful for a project.

Back to School. REALbasic University has another fine tutorial for this week. It covers the following topics:

• The TabPanel Control
• The LittleArrows Control
• Adding a QuickTime Movie
• Adding a Contextual Menu

More Monkey Business... Monkeybread Software has created two new plugins for REALbasic.

1. ATA Info Plugin - Access to the ATA Disk Info.
2. NameReg Plugin - Access to the Name Registry to get info about hardware.

---