ccgui/test/ButtonEventTest.js

/**
 * Created by Huabin LING on 1/2/14.
 */

var ButtonEventTest = GuiTest.extend({
    _displayValueLabel:null,

    ctor:function () {
        this._super();
        var winSize = cc.Director.getInstance().getWinSize();

        // Background sprites
        var backgroundButton = cc.Scale9Sprite.create(res.button_png);
        var backgroundHighlightedButton = cc.Scale9Sprite.create(res.buttonHighlighted_png);

        // Button title
        var titleButton = cc.LabelTTF.create("Touch Me!", "Marker Felt", 30);
        titleButton.setColor(cc.c3b(159, 168, 176));

        // Create the button and add it to layer
        var controlButton = cc.ControlButton.create(titleButton, backgroundButton);
        controlButton.setBackgroundSpriteForState(backgroundHighlightedButton, cc.CONTROL_STATE_HIGHLIGHTED);
        controlButton.setTitleColorForState(cc.WHITE, cc.CONTROL_STATE_HIGHLIGHTED);
        controlButton.setAnchorPoint(0.5, 1);
        controlButton.setPosition(winSize.width / 2.0, winSize.height / 2.0);
        this.addChild(controlButton, 1);

        // Add a label in which the button events will be displayed
        this.setDisplayValueLabel(cc.LabelTTF.create("No Event", "Marker Felt", 32));
        this._displayValueLabel.setAnchorPoint(0.5, -1);
        this._displayValueLabel.setPosition(winSize.width / 2.0, winSize.height / 2.0);
        this.addChild(this._displayValueLabel, 10);

        // Add the black background
        var background = cc.Scale9Sprite.create(res.buttonBackground_png);
        background.setContentSize(300, 170);
        background.setPosition(winSize.width / 2.0, winSize.height / 2.0);
        this.addChild(background);

        // Sets up event handlers
        controlButton.addTargetWithActionForControlEvents(this, this.touchDownAction, cc.CONTROL_EVENT_TOUCH_DOWN);
        controlButton.addTargetWithActionForControlEvents(this, this.touchDragInsideAction, cc.CONTROL_EVENT_TOUCH_DRAG_INSIDE);
        controlButton.addTargetWithActionForControlEvents(this, this.touchDragOutsideAction, cc.CONTROL_EVENT_TOUCH_DRAG_OUTSIDE);
        controlButton.addTargetWithActionForControlEvents(this, this.touchDragEnterAction, cc.CONTROL_EVENT_TOUCH_DRAG_ENTER);
        controlButton.addTargetWithActionForControlEvents(this, this.touchDragExitAction, cc.CONTROL_EVENT_TOUCH_DRAG_EXIT);
        controlButton.addTargetWithActionForControlEvents(this, this.touchUpInsideAction, cc.CONTROL_EVENT_TOUCH_UP_INSIDE);
        controlButton.addTargetWithActionForControlEvents(this, this.touchUpOutsideAction, cc.CONTROL_EVENT_TOUCH_UP_OUTSIDE);
        controlButton.addTargetWithActionForControlEvents(this, this.touchCancelAction, cc.CONTROL_EVENT_TOUCH_CANCEL);
    },

    getDisplayValueLabel:function () {
        return this._displayValueLabel;
    },
    setDisplayValueLabel:function (displayValueLabel) {
        this._displayValueLabel = displayValueLabel;
    },

    touchDownAction:function (sender, controlEvent) {
        this._displayValueLabel.setString("Touch Down");
    },
    touchDragInsideAction:function (sender, controlEvent) {
        this._displayValueLabel.setString("Drag Inside");
    },
    touchDragOutsideAction:function (sender, controlEvent) {
        this._displayValueLabel.setString("Drag Outside");
    },
    touchDragEnterAction:function (sender, controlEvent) {
        this._displayValueLabel.setString("Drag Enter");
    },
    touchDragExitAction:function (sender, controlEvent) {
        this._displayValueLabel.setString("Drag Exit");
    },
    touchUpInsideAction:function (sender, controlEvent) {
        this._displayValueLabel.setString("Touch Up Inside.");
    },
    touchUpOutsideAction:function (sender, controlEvent) {
        this._displayValueLabel.setString("Touch Up Outside.");
    },
    touchCancelAction:function (sender, controlEvent) {
        this._displayValueLabel.setString("Touch Cancel");
    }
});

ButtonEventTest.create = function () {
    return new ButtonEventTest();
};