Trabalho com um CellRenderer

CellRenderer é uma classe que os componentes baseados em lista, como List, DataGrid, TileList e ComboBox, usam para manipular e exibir o conteúdo de célula personalizado de suas linhas. Uma célula personalizada pode conter texto, um componente predefinido, como uma CheckBox, ou qualquer classe de objeto de exibição criada. Para renderizar os dados usando o CellRenderer personalizado, você pode estender a classe CellRenderer ou implementar a interface do ICellRenderer para criar sua classe CellRenderer personalizada.

As classes List, DataGrid, TileList e ComboBox são subclasses da classe SelectableList. A classe SelectableList inclui o estilo cellRenderer . Esse estilo define o objeto de exibição que o componente usa para renderizar células.

Você pode ajustar a formatação dos estilos usados por CellRenderer chamando o método setRendererStyle() do objeto List (consulte Formatação de células ). Uma outra alternativa é definir uma classe personalizada a ser usada como CellRenderer (consulte Definição de uma classe CellRenderer personalizada ).

Formatação de células

A classe CellRenderer inclui vários estilos que permitem controlar o formato da célula.

Os estilos a seguir permitem que você defina as capas usadas nos diferentes estados da célula (disabled, down, over e up):

  • disabledSkin e selectedDisabledSkin

  • downSkin e selectedDownSkin

  • overSkin e selectedOverSkin

  • upSkin e selectedUpSkin

    Os estilos a seguir se aplicam à formatação de texto:

  • disabledTextFormat

  • textFormat

  • textPadding

Você pode definir esses estilos chamando o método setRendererStyle() do objeto List ou chamando o método setStyle() do objeto CellRenderer. Você pode obter esses estilos chamando o método getRendererStyle() do objeto List ou chamando o método getStyle() do objeto CellRenderer. Você também pode acessar um objeto que defina todos os estilos de renderizador (como propriedades nomeadas do objeto) por meio da propriedade rendererStyles do objeto List ou do método getStyleDefinition() do objeto CellRenderer.

É possível chamar o método clearRendererStyle() para redefinir um estilo para seu valor padrão.

Para obter ou definir a altura das linhas na lista, use a propriedade rowHeight do objeto List.

Definição de uma classe CellRenderer personalizada

Criar uma classe que estende a classe CellRenderer para definir um CellRenderer personalizado

Por exemplo, o código a seguir inclui duas classes. A classe ListSample instancia um componente List e usa a outra classe, CustomRenderer, para definir o renderizador de célula a ser usado no componente List. A classe CustomRenderer estende a classe CellRenderer.

  1. Selecione Arquivo > Novo.

  2. Na caixa de diálogo Novo documento exibida, selecione Arquivo Flash (ActionScript 3.0) e clique em OK.

  3. Selecione Janela > Componentes para exibir o painel Componentes.

  4. No painel Componentes, arraste um componente List para o Palco.

  5. Se o Flash não estiver exibindo o Inspetor de propriedades, selecione Janela > Propriedades > Propriedades.

  6. Com o componente List selecionado, defina as propriedades no Inspetor de propriedades:

    • Nome da ocorrência: myList

    • L (largura): 200

    • A (altura): 300

    • X: 20

    • Y: 20

  7. Selecione Quadro 1 da Camada 1 na Linha do tempo e, em seguida, selecione Janela > Ações.

  8. Digite o script a seguir no painel Ações: 

    myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({label:"Burger -- $5.95"}); 
myList.addItem({label:"Fries -- $1.95"});

  9. Selecione Arquivo > Salvar. Atribua um nome ao arquivo e clique no botão OK.

  10. Selecione Arquivo > Novo.

  11. Na caixa de diálogo Novo documento exibida, selecione Arquivo ActionScript e clique no botão OK.

  12. Na janela de script, digite o código a seguir para definir a classe CustomCellRenderer: 

    package { 
    import fl.controls.listClasses.CellRenderer; 
    import flash.text.TextFormat; 
    import flash.filters.BevelFilter; 
    public class CustomCellRenderer extends CellRenderer { 
        public function CustomCellRenderer() { 
            var format:TextFormat = new TextFormat("Verdana", 12); 
            setStyle("textFormat", format); 
            this.filters = [new BevelFilter()]; 
        } 
    } 
}

  13. Selecione Arquivo > Salvar. Nomeie o arquivo como CustomCellRenderer.as, coloque-o no mesmo diretório do arquivo FLA e clique no botão OK.

  14. Selecione Controlar > Testar filme.

Uso de uma classe que implemente a interface do ICellRenderer para definir um CellRenderer personalizado

Você também pode definir um CellRenderer usando qualquer classe que herde a classe DisplayObject e implemente a interface do ICellRenderer. Por exemplo, o código a seguir define duas classes. A classe ListSample2 adiciona um objeto List à lista de exibição e define seu CellRenderer para usar a classe CustomRenderer. A classe CustomRenderer estende a classe CheckBox (que, por sua vez, estende a classe DisplayObject) e implementa a interface do ICellRenderer. Observe que a classe CustomRenderer define os métodos getter e setter para as propriedades data e listData , definidas na interface do ICellRenderer. Outras propriedades e métodos definidos na interface do ICellRenderer (a propriedade selected e o método setSize() ) já são definidas na classe CheckBox:

  1. Selecione Arquivo > Novo.

  2. Na caixa de diálogo Novo documento exibida, selecione Arquivo Flash (ActionScript 3.0) e clique em OK.

  3. Selecione Janela > Componentes para exibir o painel Componentes.

  4. No painel Componentes, arraste um componente List para o Palco.

  5. Se o Flash não estiver exibindo o Inspetor de propriedades, selecione Janela > Propriedades > Propriedades.

  6. Com o componente List selecionado, defina as propriedades no Inspetor de propriedades:

    • Nome da ocorrência: myList

    • L (largura): 100

    • A (altura): 300

    • X: 20

    • Y: 20

  7. Selecione Quadro 1 da Camada 1 na Linha do tempo e, em seguida, selecione Janela > Ações.

  8. Digite o script a seguir no painel Ações: 

    myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({name:"Burger", price:"$5.95"}); 
myList.addItem({name:"Fries", price:"$1.95"});

  9. Selecione Arquivo > Salvar. Atribua um nome ao arquivo e clique no botão OK.

  10. Selecione Arquivo > Novo.

  11. Na caixa de diálogo Novo documento exibida, selecione Arquivo ActionScript e clique no botão OK.

  12. Na janela de script, digite o código a seguir para definir a classe CustomCellRenderer: 

    package 
{ 
    import fl.controls.CheckBox; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    public class CustomCellRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomCellRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

  13. Selecione Arquivo > Salvar. Nomeie o arquivo como CustomCellRenderer.as, coloque-o no mesmo diretório do arquivo FLA e clique no botão OK.

  14. Selecione Controlar > Testar filme.

Uso de um símbolo para definir um CellRenderer

Você também pode usar um símbolo da biblioteca para definir um CellRenderer. O símbolo do ActionScript deve ser exportado, ao passo que o nome de classe do símbolo de biblioteca deve ter um arquivo de classe associado que implemente a interface do ICellRenderer ou estenda a classe CellRenderer (ou uma de suas subclasses).

O exemplo a seguir define um CellRenderer personalizado usando um símbolo de biblioteca.

  1. Selecione Arquivo > Novo.

  2. Na caixa de diálogo Novo documento exibida, selecione Arquivo Flash (ActionScript 3.0) e clique em OK.

  3. Selecione Janela > Componentes para exibir o painel Componentes.

  4. No painel Componentes, arraste um componente List para o Palco.

  5. Se o Flash não estiver exibindo o Inspetor de propriedades, selecione Janela > Propriedades > Propriedades.

  6. Com o componente List selecionado, defina as propriedades no Inspetor de propriedades:

    • Nome da ocorrência: myList

    • L (largura): 100

    • A (altura): 400

    • X: 20

    • Y: 20

  7. Clique no painel Parâmetros e clique duas vezes na segunda coluna da linha dataProvider.

  8. Na caixa de diálogo Valores exibida, clique no sinal de adição duas vezes para adicionar dois elementos de dados (com rótulos definidos para label0 e label1) e clique no botão OK.

  9. Com a ferramenta Texto, desenhe um campo de texto no Palco.

  10. Com o campo de texto selecionado, defina as propriedades no Inspetor de propriedades:

    • Tipo de texto: Texto dinâmico

    • Nome da ocorrência: textField

    • L (largura): 100

    • Tamanho da fonte: 24

    • X: 0

    • Y: 0

  11. Com o campo de texto selecionado, selecione Modificar > Converter em símbolo.

  12. Na caixa de diálogo Converter em símbolo, defina as seguintes configurações e clique em OK.

    • Nome: MyCellRenderer

    • Tipo: MovieClip

    • Exportar para ActionScript: Selecionado

    • Exportar no primeiro quadro: Selecionado

    • Classe: MyCellRenderer

    • Classe base: flash.display.MovieClip

      Se o Flash exibir um aviso de classe do ActionScript, clique no botão OK na caixa de aviso.

  13. Exclua a ocorrência do novo símbolo de clipe de filme do Palco.

  14. Selecione Quadro 1 da Camada 1 na Linha do tempo e, em seguida, selecione Janela > Ações.

  15. Digite o script a seguir no painel Ações: 

    myList.setStyle("cellRenderer", MyCellRenderer);

  16. Selecione Arquivo > Salvar. Atribua um nome ao arquivo e clique no botão OK.

  17. Selecione Arquivo > Novo.

  18. Na caixa de diálogo Novo documento exibida, selecione Arquivo ActionScript e clique no botão OK.

  19. Na janela de script, digite o código a seguir para definir a classe MyCellRenderer: 

    package { 
    import flash.display.MovieClip; 
    import flash.filters.GlowFilter; 
    import flash.text.TextField; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    import flash.utils.setInterval; 
    public class MyCellRenderer extends MovieClip implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        private var _selected:Boolean; 
        private var glowFilter:GlowFilter; 
        public function MyCellRenderer() { 
            glowFilter = new GlowFilter(0xFFFF00); 
            setInterval(toggleFilter, 200); 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            textField.text = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
        public function set selected(s:Boolean):void { 
            _selected = s; 
        } 
        public function get selected():Boolean { 
            return _selected; 
        } 
        public function setSize(width:Number, height:Number):void { 
        } 
        public function setStyle(style:String, value:Object):void { 
        } 
        public function setMouseState(state:String):void{ 
        } 
        private function toggleFilter():void { 
            if (textField.filters.length == 0) { 
                textField.filters = [glowFilter]; 
            } else { 
                textField.filters = []; 
            } 
        } 
    } 
}

  20. Selecione Arquivo > Salvar. Nomeie o arquivo como MyCellRenderer.as, coloque-o no mesmo diretório do arquivo FLA e clique no botão OK.

  21. Selecione Controlar > Testar filme.

propriedades CellRenderer

A propriedade data é um objeto que contém todas as propriedades definidas para o CellRenderer. Por exemplo, na classe a seguir, que define um CellRenderer personalizado que estende a classe Checkbox, observe que a função setter da propriedade data passa o valor data.label para a propriedade label que herda da classe CheckBox: 

    public class CustomRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

A propriedade selected define se uma célula será ou não selecionada na lista.

Aplicar um CellRenderer a uma coluna de um objeto DataGrid

Um objeto DataGrid pode ter várias colunas, e você pode especificar diferentes renderizadores de célula para cada coluna. Cada coluna de uma DataGrid é representada por um objeto DataGridColumn, e a classe DataGridColumn inclui uma propriedade cellRenderer , para a qual você pode definir o CellRenderer da coluna.

Definição de um CellRenderer para um célula editável

A classe DataGridCellEditor define um renderizador usado para células editáveis em um objeto DataGrid. Ela se torna o renderizador de uma célula quando a propriedade editable do objeto DataGrid é definido como true e o usuário clica na célula a ser editada. Para definir um CellRenderer para a célula editável, defina a propriedade itemEditor de cada elemento da matriz columns do objeto DataGrid.

Uso de uma imagem, arquivo SWF ou clipe de filme como um CellRenderer

A classe ImageCell, uma subclasse de CellRenderer, define um objeto usado para renderizar células em que o conteúdo principal da célula é uma imagem, arquivo SWF ou clipe de filme. A classe ImageCell inclui os seguintes estilos para definir a aparência da célula:

  • imagePadding — O preenchimento em pixels que separa a borda da célula da borda da imagem

  • selectedSkin — A capa usada para indicar o estado selecionado

  • textOverlayAlpha — A opacidade da sobreposição por trás do rótulo da célula

  • textPadding — O preenchimento em pixels que separa a borda da célula da borda do texto

    A classe ImageCell é o CellRenderer padrão da classe TileList.