1

我在创建 Flex 应用程序时遇到了困难。我相信问题在于我对组件生命周期的理解不足,我将不胜感激!

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

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

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

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

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

>

4

3 回答 3

1

我认为问题在于我对组件生命周期的理解不足,我将不胜感激

关于 Flex 组件生命周期的优秀白皮书。虽然没有专门解决您的问题,但如果您觉得需要一些生命周期知识,这将涵盖您。

于 2009-08-25T04:55:43.737 回答
0
  1. 调用 setTimeout(startAnimation, 1000)。可能比创建计时器更容易。或者只是在 UIComponents 上使用“callLater”功能。

  2. 同样,您可以使用 setInterval(func, 33) 而不是 ENTER_FRAME(假设大约 30 帧/秒)。

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

于 2009-08-25T04:33:08.730 回答
0

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

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

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

于 2009-08-25T23:11:52.600 回答