Selectable Boxes

If you had ever used iSync, probably you’ve been asked to resolve a sync conflict at least one time: the panel shown to the user contains two boxes , mutually excluded i.e. you can only choose one of them.

DZSelectableBox is a subclass of NSBox view which emulates this behavior. An instance of this class comes with one more variable member, the box state: when the box is marked as selected, an inner rounded path is drawn inside its bounds; DZSelectableBox honors title position, if it’s visible. You can use this class in two different manners:  standalone or as part of a radio group.

Standalone version

A standalone box works as described before: the only thing you’ve to do is open Interface Builder, place a common NSBox in your window, change its class name into DZSelectableBox and start using it. You can change box state programmatically by using the toggleState message, the setSelected method to set its state or simply by clicking on it.

Radio group version

Whenever you need a group of boxes and the opportunity to select only one of them at time, you’ve to set a radio group; after you followed the steps described before to create your boxes, you’ve to add the following sample code to your application:

1
2
3
4
leftBox.radioGroup = [NSNumber numberWithInt:1];
rightBox.radioGroup = [NSNumber numberWithInt:1];
[leftBox setSelected:YES];
[rightBox setSelected:NO];

(we suppose you created two boxes and connected them to two outlets called leftBox  and rightBox)

When a box belongs to a radio group, it listens for group changes notification: for example, if you select the right box (by clicking on it), the left one will be automatically unselected.

Code is available on GitHubg

Comments