ccgui/test/StepperTest.js

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

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

    ctor:function () {
        this._super();

        var winSize = cc.Director.getInstance().getWinSize();

        // Parent layer for better positioning
        var layer = cc.Node.create();
        layer.setPosition(winSize.width / 2, winSize.height / 2);
        this.addChild(layer, 1);
        var layer_width = 0;

        // Add the black background for the text
        var background = cc.Scale9Sprite.create(res.buttonBackground_png);
        background.setContentSize(100, 50);
        background.setPosition(layer_width + background.getContentSize().width / 2.0, 0);
        layer.addChild(background);

        this._displayValueLabel = cc.LabelTTF.create("0", "HelveticaNeue-Bold", 30);

        this._displayValueLabel.setPosition(background.getPosition());
        layer.addChild(this._displayValueLabel);

        layer_width += background.getContentSize().width;

        // Create stepper with minus and plus image
        var minusSprite = cc.Sprite.create(res.stepper_minus_png);
        var plusSprite = cc.Sprite.create(res.stepper_plus_png);
        var stepper = cc.ControlStepper.create(minusSprite, plusSprite);
        stepper.setPosition(layer_width + 10 + stepper.getContentSize().width / 2, 0);
        stepper.addTargetWithActionForControlEvents(this, this.valueChanged, cc.CONTROL_EVENT_VALUECHANGED);
        layer.addChild(stepper);

        layer_width += stepper.getContentSize().width;

        // Set the layer size
        layer.setContentSize(layer_width, 0);
        layer.setAnchorPoint(0.5, 0.5);

        // Update the value label
        this.valueChanged(stepper, cc.CONTROL_EVENT_VALUECHANGED);
    },

    valueChanged:function (sender, controlEvent) {
        // Change value of label.
        this._displayValueLabel.setString(sender.getValue().toString());
    }
});

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