ccgui/test/ColorPickerTest.js

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

var ColorPickerTest = GuiTest.extend({
    _colorLabel:null,
    
    ctor:function () {
        this._super();

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

        var layer  = cc.Node.create();
        layer.setPosition(cc.p (winSize.width / 2, winSize.height / 2));
        this.addChild(layer, 1);

        var layer_width = 0;

        // Create the colour picker
        var colourPicker = cc.ControlColourPicker.create();
        colourPicker.setColor(cc.c3b(37, 46, 252));
        colourPicker.setPosition(cc.p (colourPicker.getContentSize().width / 2, 0));

        // Add it to the layer
        layer.addChild(colourPicker);

        // Add the target-action pair
        colourPicker.addTargetWithActionForControlEvents(this,this.colourValueChanged,  cc.CONTROL_EVENT_VALUECHANGED);

        layer_width += colourPicker.getContentSize().width;

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

        layer_width += background.getContentSize().width;

        this._colorLabel = cc.LabelTTF.create("#color", "Arial", 30);
        this._colorLabel.setPosition(background.getPosition());
        layer.addChild(this._colorLabel);

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

        // Update the color text
        this.colourValueChanged(colourPicker, cc.CONTROL_EVENT_VALUECHANGED);
    },

    colourValueChanged:function (sender, controlEvent) {
        // Change value of label.
        this._colorLabel.setString(cc.convertColor3BtoHexString(sender.getColor()).toUpperCase());
    }
});
ColorPickerTest.create = function () {
    return new ColorPickerTest();
};