إضافة مكونات إلى CoverFlow في Flex

Question

أنا أعمل مع مكتبة CoverFlow بقلم دوج ماكيون.

في المثال المتضمن، قام بإنشاء بعض اللوحات داخل ملف CoverFlowContainer.هناك أمثلة أخرى عليه وهو يقوم بملء تدفق الغلاف من موجز RSS على الصفحة المرتبطة أعلاه ولكنه لا يتضمن المصدر لهذه :(

سأقوم في النهاية باسترداد البيانات من خدمة ويب لإضافتها إلى تدفق الغلاف، لكنني أبدأ بهذا المثال البسيط:

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

لقد حددت بعض اللوحات في mxml وقمت بتعيينها creationComplete=init() بحيث تتم إضافة اللوحة الجديدة التي قمت بإنشائها في ActionScript إلى حاوية CoverFlow.

عندما أقوم بتشغيل التطبيق فإنه يعرض اللوحتين المحددتين مسبقًا ولكن ليس اللوحة التي قمت بإنشائها في ActionScript.

أيه أفكار؟هل هناك طريقة أفضل للقيام بذلك؟

Answer 1

تم إصلاح هذه المشكلة عن طريق تحديد حاوية تدفق الغطاء أولاً دون أن تحتوي على أي شيء:

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

في قسم actionscript أقوم باسترداد مصفوفة من خدمة ويب ولكل عنصر في المصفوفة أقوم بإنشاء لوحة.من المهم إعطاء كل لوحة عرضًا وارتفاعًا، وإلا فإنها ستظهر عنصرًا واحدًا فقط في تدفق الغلاف أو لا تظهر أي عناصر على الإطلاق:

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

Answer 2

يمكنك تجربة مكون mx: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>