Problema con la creazione dei componenti

Question

Sto avendo difficoltà con un'applicazione Flex sto creando. Credo che il problema è con la mia scarsa comprensione del ciclo di vita dei componenti e Io apprezzo molto alcune indicazioni!

La mia app viene eseguito in aria. L'applicazione crea un array di DashItems. Una DashItem è una classe ActionScript che si estende su tela. Sulla base dei dati trasmessi alla creazione del DashItem, diversi componenti vengono aggiunti a questa tela. Ad esempio, se è dashtype "griglia", viene creata un'EvGrid. EvGrid è un componente MXML base di DataGrid. Il DashItem imposta l'URL e chiama una funzione pubblica in EvGrid che inizia la HTTPService send (). I dati vengono recuperati e e visualizzato nella griglia. Ciò sta funzionando come previsto.

Ecco la parte difficile. Vorrei fare un display a scorrimento di queste DashItems (si pensi Snackr). Così ho creato un EventListener per Event.ENTER_FRAME con l'applicazione principale. La funzione che si chiama scorre gli elementi dello schermo e li ricicla quando si scorrere la parte superiore. Quando creo questo eventListener subito dopo aver creato la mia serie di DashItems, non viene visualizzato nulla. Debug vedo i componenti nelle DashItems ricevere i loro dati dal HTTPService, e vedo il mio codice scorrimento regolare le impostazioni y, ma nulla si vede nella finestra dell'applicazione.

Quando ho ritardare l'aggiunta del eventListener per ENTER_FRAME impostando un altro timer che dopo il completamento imposta il gestore di eventi ENTER_FRAME, gli elementi vengono visualizzati. A volte, se la Dataservice è lento ritorno, però, ottengo una griglia vuota. La griglia è dataprovider Bindable.

Questo mi porta a credere che sto calpestando qualche parte del ciclo di vita dei componenti. Metterò alcuni frammenti di codice qui sotto. Grazie per qualsiasi aiuto o consigli a questo novizio.

Scroller.mxml in mx: Script sezione

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);
            }

HTTPService di Scroller:

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

DashItem.as snippet

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

<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

>

Answer 1

La presentazione di Deepa a MAX un anno o due anni fa è un ottimo modo per comprendere meglio il ciclo di vita dei componenti Flex:

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

Una volta a cogliere gli schemi di invalidazione per le proprietà, le dimensioni e la lista di visualizzazione v'è una quantità enorme che si può fare.

Answer 2

  

Credo che il problema è con il mio povero   comprensione del componente   ciclo di vita e sarei molto   apprezzare alcune indicazioni

Eccellente carta bianca sul Flex Component ciclo di vita. Anche se non specificamente affrontare il problema, se ti senti come si desidera una certa conoscenza del ciclo di vita questo avrà coperto.

Answer 3

1. chiamare setTimeout (startAnimation, 1000). Probabilmente più facile che creare un timer. O semplicemente utilizzare la funzione "callLater" su Chimp.

2. Sulla stessa nota ... è possibile utilizzare setInterval (func, 33) invece di ENTER_FRAME (supponendo ca. 30 fotogrammi / sec).

3. Per trovare quando un elemento è pronto, intercettare l'evento FlexEvent.CREATION_COMPLETE.