ccgui/test/VariableSizeButtonsTest.js

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

var VariableSizeButtonsTest = GuiTest.extend({
    ctor:function () {
        this._super();

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

        // Defines an array of title to create buttons dynamically
        var stringArray = ["Hello", "Variable", "Size", "!"];

        var layer = cc.Node.create();
        this.addChild(layer, 1);

        var total_width = 0, height = 0;

        // For each title in the array
        for (var i = 0; i < stringArray.length; i++) {
            var button = this.standardButtonWithTitle(stringArray[i]);

            // Various opacity for better visibility
            if (i == 0) {
                button.setOpacity(50);
            }
            else if (i == 1) {
                button.setOpacity(200);
            }
            else if (i == 2) {
                button.setOpacity(100);
            }

            button.setPosition(total_width + button.getContentSize().width / 2, button.getContentSize().height / 2);
            layer.addChild(button);

            // Compute the size of the layer
            height = button.getContentSize().height;
            total_width += button.getContentSize().width;
        }

        layer.setAnchorPoint(0.5, 0.5);
        layer.setContentSize(total_width, height);
        layer.setPosition(screenSize.width / 2.0, screenSize.height / 2.0);

        // Add the black background
        var background = cc.Scale9Sprite.create(res.buttonBackground_png);
        background.setContentSize(total_width + 14, height + 14);
        background.setPosition(screenSize.width / 2.0, screenSize.height / 2.0);
        this.addChild(background);
    },

    // Creates and return a button with a default background and title color.
    standardButtonWithTitle:function (title) {
        // Creates and return a button with a default background and title color.
        var backgroundButton = cc.Scale9Sprite.create(res.button_png);
        var backgroundHighlightedButton = cc.Scale9Sprite.create(res.buttonHighlighted_png);

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

        var button = cc.ControlButton.create(titleButton, backgroundButton);
        button.setBackgroundSpriteForState(backgroundHighlightedButton, cc.CONTROL_STATE_HIGHLIGHTED);
        button.setTitleColorForState(cc.WHITE, cc.CONTROL_STATE_HIGHLIGHTED);

        return button;
    }
});

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