Other CAAT actors

CAAT.Dock

This actor instances mimic the functionality of OSX's docking bar. It is fully configurable, from minimum/maximum elements size, number of elements affected, layout operations, etc.

Every added actor will be laid out in rows or columns.

The method initialize(scene) must be called to let the Dock object initialize. It is needed because this actor uses internally uses timer instances for its animations.

The method setSizes(min,max) must be called to set docked actors minimum and maximum sizes. It defaults to zero for min and max.

The method setApplicationRange( size ) defines how many elements will be affected by the docking effect. It defaults to 2.

Call the method setLayoutOp( layoutOp ) to define the form in which docked actors grow and shrink. The constants are defined in CAAT.Dock.prototype and may have the following values:

OP_LAYOUT_BOTTOM. This is the default value. Docked elements grow keeping its baseline at bottom.
OP_LAYOUT_TOP. Baseline at top.
OP_LAYOUT_LEFT. Baseline at left.
OP_LAYOUT_RIGHT. Baseline at right.

After adding the dockable elements, the method layout() must be called to perform position initialization.

Note, that this actor sets dockable actor's width and height in opposition to set a scale value. It also expects its contained children to be square sized.

Example

This example shows 4 Dock actor instances with different application ranges and layouts.

                        // initialize director and preload images.
                            new CAAT.ImagePreloader().loadImages(
                                    [
                                        {id:'nums', url:'../demos/demo-resources/img/numbers.png'}
                                    ],
                                    function(counter, images) {
                                        if ( counter==images.length ) {
                                            var director= new CAAT.Director().initialize(
                                                    800, 500, document.getElementById('_c1'));
                                            director.setImagesCache(images);
                                            __scene(director);
                                        }
                                    }
                            );

                        function __scene(director) {

                                var scene= director.createScene();

                            // min docked actor size.
                                var min= 20;
                            // max docked actor size.
                                var max= 100;
                                var width= 500;
                                var height= 100;
                                var insets= 50;

                            // reuse a sprite image
                                var ic= new CAAT.SpriteImage().initialize(
                                        director.getImage('nums'), 9, 9);

                                var i,j;
                                var dock = [];
                            // build 4 dock actors with the different layout ops available.
                                dock.push(
                                    new CAAT.Dock().
                                        initialize(scene).
                                        setBounds( (director.width-width)/2, insets, width, height ).
                                        setSizes(min, max).
                                        setApplicationRange(3).
                                        setLayoutOp(CAAT.Dock.prototype.OP_LAYOUT_TOP) );
                                dock.push(
                                    new CAAT.Dock().
                                        initialize(scene).
                                        setBounds( (director.width-width)/2, director.height-height-insets, width, height ).
                                        setSizes(min, max).
                                        setApplicationRange(5).
                                        setLayoutOp(CAAT.Dock.prototype.OP_LAYOUT_BOTTOM) );
                                dock.push(
                                    new CAAT.Dock().
                                        initialize(scene).
                                        setBounds( insets, insets, height, 400 ).
                                        setSizes(min, max).
                                        setApplicationRange(3).
                                        setLayoutOp(CAAT.Dock.prototype.OP_LAYOUT_LEFT) );
                                dock.push(
                                    new CAAT.Dock().
                                        initialize(scene).
                                        setBounds( director.width-height-insets, insets, height, 400 ).
                                        setSizes(min, max).
                                        setApplicationRange(6).
                                        setLayoutOp(CAAT.Dock.prototype.OP_LAYOUT_RIGHT) );

                                for( j=0; j<dock.length; j++ ) {
                            // add 10 elements for each docking actor.
                                    for( i=0; i<10; i++ ) {

                            // create an actor
                                        var img= new CAAT.Actor().
                                                setBackgroundImage( ic.getRef(), true ).
                                                setSpriteIndex( (Math.random()*ic.rows*ic.columns)>>0 ).
                            // and make its image conform to all the available space.
                                                setImageTransformation( CAAT.SpriteImage.prototype.TR_FIXED_TO_SIZE );

                                        dock[j].addChild(img);
                                    }

                                    dock[j].layout();
                                    scene.addChild(dock[j]);
                                }

                                CAAT.loop(33);