Dica Flex – Disparando eventos customizados do ItemRenderer com Flex 4

Nossa dica Flex de hoje serve para aqueles que desejam acessar métodos ou propriedades do objeto application ou parent documents de dentro de um item renderer. O Flex nos oferece as seguintes formas de acesso:

mx.core.FlexGlobals.topLevelApplication: Retorna o objeto application principal, que pode ser do tipo spark.components.Application ou mx.core.Application.

mx.core.UIComponent.parentDocument: Retorna o parent document do objeto atual. Usado como alternativa ao exemplo que vamos mostrar em seguida.

mx.core.UIComponent.parentApplication: Retorna o objeto application onde o objeto atual está inserido.

Além das formas acima, uma alternativa mais elegante (e orientada a obejtos) para acessar métodos ou propriedades do parent document ou application é utilizarmos os eventos do Flex.

Imagine que temos uma aplicação que lista todos os seus usuários num datagrid. Em uma de suas colunas temos um item renderer com um botão que exclui esses usuários. Para tal precisaremos acessar um método no parent document, que no nosso exemplo será a própria application. Como vimos anteriormente podemos obter o objeto parent document através da propriedade mx.core.UIComponent.parentDocument e dessa forma chamar nosso método de exclusão. Esse método funciona corretamente, porém gera um grande acoplamento entre os objetos além de quebrar o encapsulamento das classes. Para resolvermos esses problemas vamos fazer com que ao clicar no botão excluir um evento bubble seja disparado e no objeto parent document vamos escutar o evento e então chamar o método de exclusão.

O trecho de código abaixo mostra nossa datagrid com o item renderer que possui o botão de exclusão:

1
2
3
4
5
6
7
8
    <mx:DataGrid id="dataGrid" dataProvider="{model}">

        <mx:columns>

            <mx:DataGridColumn headerText="Nome" dataField="nome" />

            <mx:DataGridColumn

                headerText="Ação" dataField="nome"

                itemRenderer="br.com.rectius.itemRendererExample.ButtonItemRenderer" />

        </mx:columns>

    </mx:DataGrid>

A seguir está o código do nosso item renderer. Repare que ao clicar no botão excluir estamos disparando um evento customizado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="utf-8"?>

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark"

                          xmlns:mx="library://ns.adobe.com/flex/mx"

                          focusEnabled="true">



    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata> 



    <fx:Script>

        <![CDATA[

            import br.com.rectius.itemRendererExample.event.UsersEvent;



            protected function lblData_clickHandler(event:MouseEvent):void

            {

                var excluirEvent:UsersEvent = new UsersEvent(UsersEvent.EXCLUIR_EVENT, dataGridListData.label, true);

                dispatchEvent(excluirEvent);

            }

        ]]>

    </fx:Script>



    <s:Button id="lblData" top="0" left="0" right="0" bottom="0"

              label="Excluir" click="lblData_clickHandler(event)" />



</s:MXDataGridItemRenderer>

A tag Metadata expõe ao parent document o evento customizado do botão excluir:

1
2
3
    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata>

Isso nos possibilitou escutar o evento “ExcluirEvent” no parent document:

1
2
3
4
            protected function application1_initializeHandler(event:FlexEvent):void

            {

                dataGrid.addEventListener(UsersEvent.EXCLUIR_EVENT, excluirHandler);

            }

Abaixo você pode ver o evento que criamos para encapsular o usuário a ser excluído. Nesse exemplo estamos setando na propriedade data do nosso evento UsersEvent uma string com o nome do usuário, porém num cenário real poderíamos enviar o ID do usuário, um Value Object que armazenaria todas as propriedades do usuário clicado, ou qualquer outro objeto conveniente para sua situação:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package br.com.rectius.itemRendererExample.event

{

    import flash.events.DataEvent;



    public class UsersEvent extends DataEvent

    {

        public static var EXCLUIR_EVENT:String = "ExcluirEvent";



        public function UsersEvent(type:String, data:String="", bubbles:Boolean=false, cancelable:Boolean=false)

        {

            super(type, bubbles, cancelable, data);

        }

    }

}

Esperam que tenham gostado. Baixem aqui o projeto de exemplo.

Até a proxima!