Hinzufügen von Komponenten zu Coverflow in Flex

Question

Ich arbeite mit der Cover-Flow-Bibliothek von Doug McCune .

Im Beispiel enthält, hat er einige Platten in einem CoverFlowContainer erstellt. Es gibt andere Beispiele von ihm die Coverflow aus einem RSS-Feed auf der oben verlinkten Seite bevölkern, aber er beinhaltet nicht die Quelle für diese: (

Ich werde schließlich Daten von einem Webdienst werden Abrufen der Coverflow hinzuzufügen aber ich mit diesem einfachen Beispiel fange an:

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

Ich habe einige Platten in der mxml definiert und festgelegt creationComplete=init() so dass die neue Platte I in Actionscript erstellt haben, werden auf dem Cover-Flow-Container hinzugefügt werden.

Wenn ich die Anwendung starten es zeigt die zwei vordefinierten Platten, aber nicht die, die ich in Actionscript erstellt haben.

Irgendwelche Ideen? Gibt es einen besseren Weg, dies zu tun?

Answer 1

Dieses Fest, indem zuerst mit nichts in den Coverflow-Container zu definieren:

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

In dem Actionscript-Abschnitt abrufen ich ein Array von einem Webdienst und für jedes Element im Array erstelle ich eine Platte. Es ist wichtig, jeder Platte eine Breite und Höhe zu geben, sonst wird es nur ein Element in der Coverflow zeigen oder keine Elemente überhaupt:

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

Answer 2

Sie können versuchen mx: Repeater-Komponente

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