Agregar componentes a CoverFlow en Flex

Question

Estoy trabajando con la biblioteca CoverFlow de Doug McCune .

En el ejemplo incluido, ha creado algunos paneles dentro de un CoverFlowContainer. Hay otros ejemplos de él poblando el flujo de cobertura de un feed RSS en la página vinculada anteriormente, pero no incluye la fuente de estos :(

Eventualmente recuperaré datos de un servicio web para agregarlos al flujo de cobertura; sin embargo, comenzaré con este simple ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="middle"    xmlns:containers="com.dougmccune.containers.*" creationComplete="init()">
<mx:Script>
    <![CDATA[

        import mx.controls.TextArea;

        public var articlePanel:Panel = new Panel();
        public var articleTextArea:TextArea = new TextArea();

        private function init() : void
        {
            articlePanel.addChild(articleTextArea);
            articlePanel.title = "test tile"
            articleTextArea.text = "article1" + "\n" + "www.article.com" + "\n" + "hello this is article 1";
            coverflow2.addChild(articlePanel);  
        }       
    ]]>
</mx:Script>

<mx:VBox id="box" verticalGap="0" height="306" width="100%" maxWidth="600" maxHeight="300" >

           <containers:CoverFlowContainer id="coverflow2" width="100%" height="244" 
            horizontalGap="40" borderStyle="inset" backgroundColor="0x000000"
            segments="6" reflectionEnabled="true">

            <mx:Panel id="testpanel" width="200" height="200" title="Mxml title">
                <mx:DataGrid width="100%" height="100%">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                        <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                        <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                    </mx:columns>
                </mx:DataGrid>
            </mx:Panel>

            <mx:Panel id="buttonpanel" width="200" height="200" title="Mxml title">
                <mx:Button id="myButton" label="Change title" click="buttonpanel.title = ('hello') "/>
            </mx:Panel>
        </containers:CoverFlowContainer>                
    </mx:VBox>
     </mx:Application>

Definí algunos paneles en el mxml y configuré creationComplete=init() para que el nuevo panel que he creado en ActionScript se agregue al contenedor CoverFlow.

Cuando inicio la aplicación, muestra los dos paneles predefinidos pero no el que he creado en ActionScript.

¿Alguna idea? ¿Hay una mejor manera de hacer esto?

Answer 1

Solucionó esto definiendo primero el contenedor de Coverflow sin nada:

<containers:CoverFlowContainer id="coverflow" width="100%" height="244" 
                horizontalGap="40" borderStyle="inset" backgroundColor="0x000000"
                reflectionEnabled="true"/>

En la sección actionscript recupero una matriz de un servicio web y para cada elemento de la matriz creo un panel. Es importante dar a cada panel un ancho y una altura, de lo contrario, solo mostrará un elemento en el flujo de cobertura o ningún elemento:

articlePanel.width = 200;
articlePanel.height = 200;

Answer 2

puedes probar mx: componente repetidor

<mx:HTTPService id="srv" url="pics.xml"/>
<ns2:CarouselContainer id="cf" width="100%" height="303" horizontalGap="40"
                       segments="6" reflectionEnabled="true" angle="10" >

    <mx:Repeater id="r" dataProvider="{srv.lastResult.images.image}">
        <mx:Canvas width="200" height="200">
            <mx:Image source="{r.currentItem.src}"/>
        </mx:Canvas>
    </mx:Repeater>

</ns2:CarouselContainer>