Adobe Flex integra lo sviluppo di applicazioni guidate dai dati e graphic design. Flex incorpora una varietà di componenti incorporati per la visualizzazione dei dati. Il controllo DataGrid è uno di quei componenti. È un modo semplice di dati pre-penale in una forma di griglia. I dati visualizzati all'interno della griglia può provengono da un database server, una matrice all'interno del programma Flex o attraverso l'uso di proprietà associabili. Fornire un conteggio di ogni riga all'interno di DataGrid avviene tramite l'utilizzo di una proprietà associabile.

Istruzioni

Costruire il controllo DataGrid

1

Aprire Adobe Flex e visualizzare il codice per il file di applicazione flex primario. Ci sono due tipi di DataGrid all'interno di Flex: DataGrid MX e DataGrid scintilla. Il controllo DataGrid scintilla funzionerà meglio per questo progetto. Aggiungere il codice per un nuovo controllo DataGrid Spark:

< s:DataGrid id = "dG" dataProvider = "{griglia}" width = "100%" height = "100%" >

<s:columns>
<s:ArrayList>
<s:GridColumn dataField="firstName"/>
<s:GridColumn dataField="lastName"/>
<s:GridColumn dataField="Phone"/>
<s:GridColumn dataField="Address"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>

Il codice precedente crea un oggetto DataGrid con un ID "DG" che utilizza un componente dataProvider con il nome della griglia di {}. Ogni "GridColumn" indica i dati che verranno visualizzati all'interno delle colonne del DataGrid.

2

Costruire il dataProvider. DataProviders può essere definita utilizzando ActionScript. Il codice seguente crea il dataProvider "griglia":

< fx:Script >

import mx.collections.IList;

[Bindable] public var gridData:IList = new ArrayList([
{firstName: "John", lastName: "Doe", phone: "555-555-555", address: "500 Anywhere Street"},
// ... more objects
]);

< / fx:Script >

Il codice precedente crea una matrice di dati. La "dG" DataGrid è associato a questa matrice e verrà visualizzati i dati in base ai nomi di colonna di dati.

3

Eseguire l'applicazione nella finestra del browser per verificare che il controllo DataGrid è funzionante.

Aggiungere una colonna di conteggio di riga

4

Creare una nuova colonna di conteggio di riga nel controllo dataGrid "dG". Il seguente codice deve essere inserito tra i tag di chiusura e di apertura "< s:ArrarList >":

< s:GridColumn >

<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{rowIndex}" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>

< / s:GridColumn >

Nel codice sopra, "{rowIndex}" è una proprietà associabile. Sarà posto un numero di riga nella colonna DataGrid che abbiamo appena creato.

5

Verificare che tale codice è stato inserito correttamente:

< s:DataGrid id = "dG" dataProvider = "{griglia}" width = "100%" height = "100%" >

<s:columns>
<s:ArrayList>
<s:GridColumn>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{rowIndex}" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="firstName"/>
<s:GridColumn dataField="lastName"/>
<s:GridColumn dataField="Phone"/>
<s:GridColumn dataField="Address"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>

Il codice precedente creerà un contatti DataGrid associato al dataProvider "griglia" con una colonna di dati che visualizza un conteggio delle righe.

6

Eseguire il programma e verificare che la nuova colonna di conteggio di riga viene visualizzata in DataGrid. Se si scorre verso l'ultima fila, si avrà il conteggio totale delle righe DataGrid.