Adding components to CoverFlow in Flex

Question

I'm working with the Coverflow library by Doug McCune available here - http://bit.ly/zCc11.

In the example included, he has created some panels inside a CoverFlowContainer. There are other examples of him populating the coverflow from an RSS feed on the page linked above but he doesn't include the source for these :(

I will eventually be retrieving data from a web service to add to the coverflow however I'm starting with this simple example:

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

I've defined some panels in the mxml and set creationComplete=init() so that the new panel I've created in actionScript will be added to the coverflow container.

When I launch the application it displays the two pre-defined panels but not the one I have created in actionscript.

Any ideas? Is there a better way of doing this?

Cheers.

Answer 1

Fixed this by first defining the coverflow container with nothing in it:

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

In the actionscript section I retrieve an array from a web service and for each item in the array I create a panel. It is important to give each panel a width and height otherwise it will only show one element in the coverflow or no elements at all:

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

Answer 2

I was having this same problem and your question/answer solved it, thanks! In my application I get this runtime error which I believe is the source of the strange behavior:

warning: unable to bind to property 'numChildren' on class 'com.dougmccune.containers::CoverFlowContainer'

Answer 3

you can try mx:Repeater component

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