Friday, May 16, 2014

CPCheckBox: Implementing check boxes

This tutorial extends a previous tutorial on CPButtons.  Please review that tutorial before continuing on to this project.  We will use the same source files from that tutorial, and it is understood that you may have modified those files already while working on one of the other projects, the heart of this tutorial should remain unchanged.

We are going to use some concepts in this tutorial that we defined in the CPRadio tutorial.  For example, we are going to use CPOnState and CPOffState constants.  It is not necessary, but it is recommended that the CPRadio tutorial be done before this tutorial.

Unlike radio controls, check boxes stand, almost always, on their own.  This makes this tutorial much shorter.  To understand check boxes, we need only to know how to determine whether they are selected or unselected, and occasionally, we will need to know how to set the status programmatically.

Setting Up The Core

In order to check the status of the check box, we need to have a handle on the object. For the radio buttons, we cheated by letting the selection of the button trigger an action.  We can do the same here, but we need to consider alternative methods for storing variables.  For this exercise, we will save a pointer to the checkbox in the AppController attributes, and we will create three buttons.  We will not be covering the buttons in this tutorial.

Change the implementation definition to the following:
@implementation AppController : CPObject
{
     CPCheckBox checkBoxAttribute;
}
After the definition of checkBox in applicationDidFinishLaunching, add the following:
checkBoxAttribute = checkBox;

Checking the Status of the Check Box

To check the status and the value of a checkbox, we call the state and title methods of the CPCheckBox.  We will create a method to check the status of the checkbox using this information.  Add the following method to AppController:
-(void)checkStatus:(id)aButton
{
     var title = [checkBoxAttribute title];
     var status = [checkBoxAttribute state];
     var state;
     if( status == CPOnState ){
         state = @"Checkbox is selected.";
     }else if(status == CPOffState){
         state = @"Checkbox is not selected.";
     }else{
         state = @"Unhandled option";
     }
     var alertMessage = @"Value: " + title + @"\n" + state;
     alert( alertMessage );
}
We will verify that this checks the value and the state of the check box in a moment.  First, we will define the methods that select and deselect the checkbox.

Setting the Status of the Check Box

We can change the state of a check box by clicking on it, but there are times that you will need to preload a page with already selected values, and knowing how to set the state programmatically will be helpful.

To set the state, we will use the setState method, and we will use the constants CPOnState and CPOffState.  Add the following two methods to AppController:
-(void)setStateOn:(id)aButton
{
     [checkBoxAttribute setState:CPOnState];
}
-(void)setStateOff:(id)aButton
{
     [checkBoxAttribute setState:CPOffState];
}

Adding the Buttons

Let's add the buttons and we'll see how it all comes together.  Add the buttons by inserting the following code into the applicationDidFinishLaunching method after the contentValue variable's definition.
var button1 = [CPButton buttonWithTitle:@"Check Checkbox State"];
var button2 = [CPButton buttonWithTitle:@"Mark Checkbox"];
var button3 = [CPButton buttonWithTitle:@"Unmark Checkbox"];
[button1 setFrameOrigin:CPPointMake(100,300)];
[button2 setFrameOrigin:CPPointMake(300,300)];
[button3 setFrameOrigin:CPPointMake(500,300)];
[button1 setTarget:self]; [button1 setAction:@selector(checkStatus:)];
[button2 setTarget:self]; [button2 setAction:@selector(setStateOn:)];
[button3 setTarget:self]; [button3 setAction:@selector(setStateOff:)];
[contentView addSubview:button1];
[contentView addSubview:button2];
[contentView addSubview:button3];

Running the CheckBox Program

Run the program, and play with the buttons.  You will see that you are able to control the state of the checkbox with the buttons or directly. You will also see that you are able to check the current status of the checkbox.  I have included some screen shots here:


No comments:

Post a Comment