Aggiunta di componenti a CoverFlow in Flex

Question

Sto lavorando con la la libreria CoverFlow di Doug McCune .

Nell'esempio incluso, ha creato alcuni pannelli all'interno di un CoverFlowContainer. Ci sono altri esempi di lui che popola il coverflow da un feed RSS sulla pagina collegata sopra ma non include la fonte per questi :(

Alla fine recupererò i dati da un servizio Web per aggiungerli al coverflow, tuttavia inizierò con questo semplice esempio:

<?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>

Ho definito alcuni pannelli in mxml e impostato creationComplete=init() in modo che il nuovo pannello che ho creato in ActionScript verrà aggiunto al contenitore CoverFlow.

Quando avvio l'applicazione, vengono visualizzati i due pannelli predefiniti, ma non quello che ho creato in ActionScript.

Qualche idea? Esiste un modo migliore per farlo?

Answer 1

Risolto il problema definendo innanzitutto il contenitore del flusso di flusso senza nulla:

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

Nella sezione actionscript recupero un array da un servizio web e per ogni elemento dell'array creo un pannello. È importante assegnare a ciascun pannello una larghezza e un'altezza, altrimenti mostrerà solo un elemento nel flusso di copertura o nessun elemento:

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

Answer 2

puoi provare mx: componente Repeater

<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>