组件创建问题

时间:2009-08-24 23:19:55

标签: flex components lifecycle

我正在创建一个我正在创建的Flex应用程序。我认为问题在于我对组件生命周期的理解不足,我非常感谢一些指点!

我的应用程序在Air中运行。该应用程序创建一个DashItems数组。 DashItem是一个扩展Canvas的ActionScript类。根据在创建DashItem时传递的数据,将不同的组件添加到此画布。例如,如果dashtype为“grid”,则会创建一个EvGrid。 EvGrid是一个基于DataGrid的mxml组件。 DashItem设置url并在EvGrid中调用一个公共函数来启动HTTPService send()。检索数据并在网格中显示。这是按预期工作的。

这是棘手的部分。我希望滚动显示这些DashItems(想想Snackr)。所以我在主应用程序中为Event.ENTER_FRAME设置了一个eventlistener。被调用的函数将项目向上滚动,并在它们从顶部滚动时回收它们。当我在创建DashItems数组后立即创建此eventListener时,不会显示任何内容。调试我看到DashItems中的组件从HTTPService接收数据,我看到我的滚动代码调整了y设置,但在应用程序窗口中看不到任何内容。

当我通过设置另一个在完成时设置了ENTER_FRAME事件处理程序的计时器来延迟为ENTER_FRAME添加eventListener时,会显示这些项目。有时,如果dataService返回缓慢,我会得到一个空网格。网格数据提供者是Bindable。

这让我相信我正在践踏组件生命周期的某些部分。我将在下面放置一些代码片段。感谢您对这位新手的任何帮助或建议。

mx:Script部分中的Scroller.mxml

public function handleApplicationComplete(event:Event):void {
                dataService.send();
            }
            public function faultHandler(event:FaultEvent): void {
                trace(event.toString());
            }

            public function resultHandler(event:ResultEvent): void {
                trace("returned XML: " + event.result.toString());
                for each (var i:XML in event.result.item) {
                    var dx:DashItem = new DashItem({
                                        type:   i.type,
                                        url:    i.url.toString(),
                                        index:  i.index,
                                        title:  i.title,
                                        description: i.description,
                                        height: this.height/(DISPLAY_LIST_SIZE -1),
                                        width:  this.width * 0.9
                                    });

                    trace("created " + dx.toString());
                    DashList.unshift(dx);
                }
                buildDisplayList();
                var timer:Timer = new Timer(1000, 1);
                timer.addEventListener(TimerEvent.TIMER_COMPLETE, startAnimation);
                timer.start();
            }

            private function startAnimation(event:TimerEvent):void {
                trace("starting animation");
                addEventListener(Event.ENTER_FRAME, animate);   
            }

            private function buildDisplayList():void {
                var starty:Number = this.height;
                var listSize:Number = DISPLAY_LIST_SIZE;
                if ( DashList.length < DISPLAY_LIST_SIZE) {
                    listSize = DashList.length;
                }
                for (var i:Number = 0; i < listSize; i++) {
                    var di:DashItem = DashList.pop();
                    displayList.unshift(di);
                    di.y = starty;
                    scroller.addChild(di);
                    starty += di.height + PADDING;
                }
                trace("DisplayList is: ");
                traceList(displayList);
            }

Scroller的HTTPService:

<mx:HTTPService
        id="dataService"
        url="{DS_URL}"
        resultFormat="e4x"
        fault="faultHandler(event);"
        result="resultHandler(event);" />

DashItem.as片段

public function build():void {
            if (type == "grid") {
                trace("Building EventList...");
                var ev:EvGrid = new EvGrid();
                ev.evtitle = this.title;
                this.addChild(ev);
                ev.fetchData();
            } else if (type == "StatChart") {

EvGrid片段:

<mx:HTTPService 
        id="dataService"
        url="{ws}"
        resultFormat="e4x"
        result="resultsHandler(event);"
        fault="faultHandler(event);"
    />  

    <mx:XMLListCollection id="eventListXml" source="{xmlData.events.event}"/>
    <mx:Panel id="evwrapper" title="{evtitle}" width="100%" height="100%">

    <components:RowColorDataGrid id="EventListGrid"
            dataProvider="{eventListXml}"
            width="100%"
            height="100%"
            rowCount="{eventListXml.length+1}"
            rowColorFunction="calcRowColor">
            <components:columns>
                <mx:DataGridColumn 
                    id="Serial"
                    dataField="serial"
                    headerText="Serial"
                    width="70"

                />
                <mx:DataGridColumn 
                    id="Severity"
                    dataField="severity"
                    headerText="Severity"
                    width="60"
                />
                <mx:DataGridColumn
                    id="snlStatus"
                    dataField="snlstatus"
                    headerText="snlStatus"
                    width="100"
                />
                <mx:DataGridColumn
                    id="Owneruid"
                    dataField="owneruid"
                    headerText="Owner"
                    width="70"
                />
                <mx:DataGridColumn
                    id="Node"
                    dataField="node"
                    headerText="Node"
                    width="120"
                />
                <mx:DataGridColumn
                    id="Summary"
                    dataField="summary"
                    headerText="Summary"
                    labelFunction="getCdata"
                />
            </components:columns>
        </components:RowColorDataGrid>

    </mx:Panel

&GT;

3 个答案:

答案 0 :(得分:1)

  

我认为问题出在我的穷人身上   了解组件   生命周期,我会很大   欣赏一些指示

Excellent white paper on the Flex Component Lifecycle.虽然没有专门解决您的问题,但如果您想要了解某些生命周期知识,那么这将为您提供帮助。

答案 1 :(得分:0)

  1. 调用setTimeout(startAnimation,1000)。可能比创建计时器更容易。或者只是在UIComponents上使用“callLater”函数。

  2. 在同一个音符上......你可以使用setInterval(func,33)代替ENTER_FRAME(假设aprox 30帧/秒)。

  3. 要查找项目准备就绪,请侦听FlexEvent.CREATION_COMPLETE事件。

答案 2 :(得分:0)

Deepa在一年或两年前在MAX上的演示是更好地了解Flex组件生命周期的好方法:

http://tv.adobe.com/MAX-2008-Develop/Creating-New-Components-in-Flex-3-by-Deepa-Subramaniam.html#vi+f15384v1002

一旦你掌握了属性,大小和显示列表的失效方案,你就可以做很多事情。