组件创建问题

Posted 2023-02-23

技术标签:

【中文标题】组件创建问题【英文标题】：Problem with component creation 【发布时间】：2010-11-22 10:55:56 【问题描述】：

我在使用我正在创建的 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 事件处理程序的计时器来延迟为 ENTER_FRAME 添加 eventListener 时，项目会出现。但是，有时，如果 dataService 返回缓慢，我会得到一个空网格。网格数据提供者是可绑定的。

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

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

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 sn-ps：

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

    <components:RowColorDataGrid id="EventListGrid"
            dataProvider="eventListXml"
            
            
            rowCount="eventListXml.length+1"
            rowColorFunction="calcRowColor">
            <components:columns>
                <mx:DataGridColumn 
                    id="Serial"
                    dataField="serial"
                    headerText="Serial"
                    

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

    </mx:Panel

【问题讨论】：

【参考方案1】：

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

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

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

【讨论】：

【参考方案2】：