Ajout de composants à CoverFlow dans Flex

Question

Je travaille avec la bibliothèque CoverFlow de Doug McCune .

Dans l'exemple inclus, il a créé des panneaux à l'intérieur d'un CoverFlowContainer. Il existe d’autres exemples où il a renseigné le coverflow à partir d’un flux RSS sur la page liée ci-dessus, mais il n’inclut pas la source de ces informations: (

Je vais éventuellement récupérer des données d'un service Web pour les ajouter à la couverture, mais je commence par cet exemple simple:

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

J'ai défini certains panneaux dans le format mxml et défini creationComplete=init() de sorte que le nouveau panneau créé dans ActionScript soit ajouté au conteneur CoverFlow.

Lorsque je lance l’application, elle affiche les deux panneaux prédéfinis mais pas celui que j’ai créé dans ActionScript.

Des idées? Y a-t-il une meilleure façon de faire cela?

Answer 1

Ceci a été corrigé en définissant d'abord le conteneur coverflow avec rien:

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

Dans la section actionscript, je récupère un tableau d'un service Web et pour chaque élément du tableau, je crée un panneau. Il est important de donner à chaque panneau une largeur et une hauteur, sinon il ne montrera qu'un élément dans le coverflow ou aucun élément du tout:

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

Answer 2

vous pouvez essayer mx: composant 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>