Flex - Controle AdvancedDataGrid

Introdução

O controle AdvancedDataGrid adicionou várias funcionalidades ao controle DataGrid padrão para adicionar recursos de visualização de dados ao aplicativo Flex. Esses recursos fornecem maior controle de exibição de dados, agregação de dados e formatação de dados.

Declaração de Classe

A seguir está a declaração para mx.controls.AdvancedDataGrid classe -

public class AdvancedDataGrid
   extends AdvancedDataGridBaseEx

Propriedades Públicas

Sr. Não	Descrição da Propriedade
1	displayDisclosureIcon : Boolean Controla a criação e visibilidade dos ícones de divulgação na árvore de navegação.
2	displayItemsExpanded : Boolean Se verdadeiro, expanda a árvore de navegação para mostrar todos os itens.
3	firstVisibleItem : Object O elemento data provider que corresponde ao item atualmente exibido na linha superior do controle AdvancedDataGrid.
4	groupedColumns : Array Um Array que define a hierarquia de instâncias AdvancedDataGridColumn ao executar o agrupamento de colunas.
5	groupIconFunction : Function Uma função de retorno de chamada fornecida pelo usuário para executar em cada item do grupo para determinar seu ícone de ramificação na árvore de navegação.
6	groupItemRenderer : IFactory Especifica o representante de item usado para exibir os nós de ramificação na árvore de navegação que correspondem aos grupos.
7	groupLabelFunction : Function Uma função de retorno de chamada a ser executada em cada item para determinar seu rótulo na árvore de navegação.
8	groupRowHeight : Number A altura da linha agrupada, em pixels.
9	hierarchicalCollectionView : IHierarchicalCollectionView A instância IHierarchicalCollectionView usada pelo controle.
10	itemIcons : Object Um objeto que especifica os ícones dos itens.
11	lockedColumnCount : int [substituir] O índice da primeira coluna no controle que rola.
12	lockedRowCount : int [substituir] O índice da primeira linha no controle que rola.
13	rendererProviders : Array Matriz de instâncias AdvancedDataGridRendererProvider.
14	selectedCells : Array Contém uma matriz de localizações de células como índices de linha e coluna.
15	treeColumn : AdvancedDataGridColumn A coluna na qual a árvore é exibida.

Propriedades Protegidas

Sr. Não	Descrição da Propriedade
1	anchorColumnIndex : int = -1 O índice da coluna da âncora atual.
2	caretColumnIndex : int = -1 O nome da coluna do item sob o cursor.
3	cellSelectionTweens : Object Uma tabela de pré-seleção de seleção.
4	highlightColumnIndex : int = -1 O índice da coluna do item que está atualmente rolado sobre ou sob o cursor.
5	selectedColumnIndex : int = -1 A coluna da célula selecionada.
6	treeColumnIndex : int [somente leitura] O número da coluna da árvore.
7	tween : Object O objeto de interpolação que anima linhas Os usuários podem adicionar ouvintes de eventos a este objeto para serem notificados quando a interpolação começa, atualiza e termina.
8	visibleCellRenderers : Object Uma tabela hash de representantes de itens do data provider atualmente em vista.

Métodos Públicos

Sr. Não	Método e Descrição
1	AdvancedDataGrid() Construtor.
2	collapseAll():void Recolhe todos os nós da árvore de navegação.
3	expandAll():void Expande todos os nós da árvore de navegação no controle.
4	expandChildrenOf(item:Object, open:Boolean):void Abre ou fecha todos os nós da árvore de navegação abaixo do item especificado.
5	expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void Abre ou fecha um nó de ramificação da árvore de navegação.
6	getParentItem(item:Object):* Retorna o pai de um item filho.
7	isItemOpen(item:Object):Boolean Retorna verdadeiro se o nó de ramificação especificado estiver aberto.
8	setItemIcon(item:Object, iconID:Class, iconID2:Class):void Define o ícone associado na árvore de navegação para o item.

Métodos Protegidos

Sr. Não	Método e Descrição
1	addCellSelectionData (uid:String, columnIndex:int, selectionData:AdvancedDataGridBaseSelectionData):void Adiciona informações de seleção de célula ao controle, como se você tivesse usado o mouse para selecionar a célula.
2	applyCellSelectionEffect (indicator:Sprite, uid:String, columnIndex:int, itemRenderer:IListItemRenderer):void Configura o efeito de aplicação do indicador de seleção.
3	applyUserStylesForItemRenderer (givenItemRenderer:IListItemRenderer):void Aplica estilos do controle AdvancedDataGrid a um representante de item.
4	atLeastOneProperty(o:Object):Boolean Retorna verdadeiro se o Objeto tiver pelo menos uma propriedade, o que significa que o dicionário tem pelo menos uma chave.
5	clearCellSelectionData():void Limpa as informações sobre a seleção de células.
6	clearIndicators():void [substituir] Remove todos os indicadores de seleção e destaque e acento circunflexo.
7	clearSelectedCells(transition:Boolean = false):void Limpa a propriedade selectedCells.
8	dragCompleteHandler(event:DragEvent):void [substituir] Manipulador para o evento DragEvent.DRAG_COMPLETE.
9	dragDropHandler(event:DragEvent):void [substituir] Manipulador para o evento DragEvent.DRAG_DROP.
10	drawVerticalLine (s:Sprite, colIndex:int, color:uint, x:Number):void [substituir] Desenha uma linha vertical entre as colunas.
11	finishKeySelection():void [substituir] Define os itens selecionados com base nas propriedades caretIndex e anchorIndex.
12	initListData (item:Object, adgListData:AdvancedDataGridListData):void Inicializa um objeto AdvancedDataGridListData que é usado pelo representante de item AdvancedDataGrid.
13	moveIndicators(uid:String, offset:int, absolute:Boolean):void [substituir] Move os indicadores de seleção de célula e linha para cima ou para baixo em um determinado deslocamento conforme o controle rola sua exibição.
14	removeCellSelectionData(uid:String, columnIndex:int):void Remove as informações de seleção de célula do controle.
15	selectCellItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean Atualiza a lista de células selecionadas, assumindo que o representante de item especificado foi clicado com o mouse, e os modificadores de teclado estão no estado especificado.
16	selectItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean [substituir] Atualiza o conjunto de itens selecionados, uma vez que o representante de item fornecido foi clicado com o mouse e os modificadores de teclado estão no estado dado.
17	treeNavigationHandler(event:KeyboardEvent):Boolean Manipulador para navegação de teclado para a árvore de navegação.

Eventos

Sr. Não	Descrição do Evento
1	headerDragOutside Enviado quando o usuário arrasta uma coluna para fora de seu grupo de colunas.
2	headerDropOutside Enviado quando o usuário descarta uma coluna fora de seu grupo de colunas.
3	itemClose Despachado quando uma ramificação da árvore de navegação é fechada ou recolhida.
4	itemOpen Enviado quando um ramo da árvore de navegação é aberto ou expandido.
5	itemOpening Enviado quando uma operação de abertura ou fechamento de galho de árvore é iniciada.

Métodos herdados

Esta classe herda métodos das seguintes classes -

mx.controls.AdvancedDataGridBaseEx
mx.controls.AdvancedDataGridBase
mx.controls.listClasses.AdvancedDataGridBase
mx.core.ScrollControlBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemplo de controle Flex AdvancedDataGrid

Vamos seguir as etapas a seguir para verificar o uso do controle AdvancedDataGrid em um aplicativo Flex criando um aplicativo de teste -

Degrau	Descrição
1	Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo .
2	Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.

A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	
   <fx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         [Bindable]
         public var data:ArrayCollection = new ArrayCollection ([   
            {value:"France", code:"FR"},
            {value:"Japan", code:"JP"},
            {value:"India", code:"IN"},
            {value:"Russia", code:"RS"},
            {value:"United States", code:"US"}		
         ]);
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "dataGridPanel" title = "Using DataGrid" 
            width = "500" height = "300">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />
            </s:layout>					
            
            <mx:AdvancedDataGrid dataProvider = "{data}" id = "advancedDataGrid" >
               <mx:columns>
                  <mx:AdvancedDataGridColumn dataField = "code" width = "100" 
                     headerText = "Code" />
                  <mx:AdvancedDataGridColumn dataField = "value" width = "200" 
                     headerText = "Value" />
               </mx:columns>
            </mx:AdvancedDataGrid>
            
            <s:HGroup width = "60%">
               <s:Label text = "Code :" /> 
               <s:Label text = "{advancedDataGrid.selectedItem.code}"
                  fontWeight = "bold" />
               <s:Label text = "Value :" /> 
               <s:Label text = "{advancedDataGrid.selectedItem.value}"
                  fontWeight = "bold" />
            </s:HGroup>
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Quando estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se tudo estiver bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]

↰ Previous page