Caros Amigos,
Utilizando a ferramenta Adobe Flash Builder 4.5., este artigo apresenta a criação do componente HeaderRenderer CheckBox Selecionar na Grid, conforme aplicação ilustrada pela Figura 1.
Figura 1: ItemRender Selecionar
Os leitores iniciantes podem ser auxiliados do artigo Criação de projetos no Adobe Flash Builder 4.5, publicado nesse portal, o qual aborda a criação de outros projetos pela ferramenta Adobe Flash Builder 4.5.
Este artigo complementa o artigo Adobe Flash Builder 4.5: componente ItemRender CheckBox na Grid, publicado nesse portal, o qual aborda a criação de um componente ItemRenderer CheckBox na Grid pela ferramenta Adobe Flash Builder 4.5.
Para facilitar o entendimento do leitor, foram listados e representados, através de figuras, cada fase da criação do respectivo componente:
1. Aberta a ferramenta Adobe Flash Builder, pelo menu File – opção New – Flex Project, conforme apresenta a Figura 2, é possível criar novo projeto.
Figura 2: Novo Projeto Flex
O usuário é direcionado ao novo projeto Flex, acessível pela tela ‘New Flex Project’, apresentada na figura 3.
2. Na tela ‘New Flex Project’, aba Project Location, apresentada pela Figura 3, devem ser informado:
Project name
Nome do projeto (exemplificado na Figura como HeaderRenderGrid);
Folder
Diretório do projeto (na Figura exemplificada como P:\www\flex\HeaderRenderGrid)
Application Type
Tipo da aplicação a ser escolhida (no exemplo escolhido ‘WEB’)
- WEB
- Desktop (AIR)
Flex SDK Version
Versão do SDK (Software Development Kit) a ser escolhida, conforme Figura 3, onde no exemplo foi escolhida a opção default.
Figura 3: Aba Localização do Projeto
Pelo botão “Next”, é possível o usuário prosseguir as configurações do projeto.
3. Na aba Server Settings, a qual pode ser observada na Figura 4, devem ser informadas configurações do servidor.
Application server type
Tipo de aplicação a ser escolhida, no caso do exemplo, None/Other;
Output folder
Diretório aonde deve ser gerado os códigos compilados do projeto, devem ser informados, conforme figura 4.
Figura 4: Configurações do Servidor
No exemplo, apresentado pela Figura 4, informado folder public.
4. Na aba Build Paths, são realizadas as configurações finais.
Add SWC
Esse botão permite adicionar um componente de terceiros no projeto, no exemplo de projeto genérico apresentado, não será adicionado nenhum componente de terceiros.
Main application file
Nesse campo deve ser informado o nome do mxml principal, no exemplo evidenciado como index.mxml, conforme Figura 5.
Figura 5: Configurações Finais do Projeto
Vale destacar que o index foi informado, para que ao gerar o código compilado, automaticamente seja gerado um index.html.
O botão ‘Finish’ permite concluir o projeto.
5. A estrutura do projeto HeaderRenderGrid, pode ser observada na figura 6.
Figura 6: Projeto ItemRenderGrid
Na figura 6 é apresentada a estrutura hierárquica criada para o projeto.
6. Seguindo com a criação do projeto, o usuário deve clicar com botão direito do mouse sobre o projeto, no menu File – opção New – Package, conforme figura 7.
Figura 7: Criação de Pacotes
Opção a qual permite a criação de pacotes, através da tela ‘New Package’, sendo nesse projeto necessária a criação de quatro pacotes.
7. Pela Figura 8 é possível observar a criação do pacote headerrender.
Figura 8: Pacote ItemRender
No campo Name deve ser informado br.com.headerrender, conforme figura 8.
Pelo botão ‘Finish’ é concluída a criação do pacote correspondente.
Obs: O mesmo processo foi realizado para a criação do pacote events model e itemrender.
8. A estrutura do projeto com os pacotes criados pode ser obervada pela figura 9.
Figura 9: Estrutura do Projeto ItemRender
Sendo adicionada na estrutura os pacotes com as nomenclaturas correspondentes.
9. Com o botão direito do mouse sobre o pacote headerrender, o usuário deve clicar no menu File – opção New – MXML Component, conforme figura 10.
Figura 10: MXML Component
Onde o usuário é direcionado a tela ‘New MXML Component’, mostrada pela figura 11.
10. Na tela New MXML Component, deve ser definido:
Name
Nome do componente itemrender, no exemplo chamado HeaderRenderSelecionar.
Based on
Componente pai, no exemplo chamado ‘.spark.components.gridClasses.GridItemRenderer’.
Figura 11: New MXML Component
Width e Height
Largura e altura do componente, no caso adotado 100% e 100%, respectivamente.
O mesmo processo foi realizado para criar o componente itemrender, maiores detalhes a respeito podem ser vistos no artigo, Adobe Flash Builder 4.5: componente ItemRender CheckBox na Grid.
Criação do componente HeaderRender
11. Pela Listagem 1 é apresentada a codificação do componente HeaderRenderSelecionar, o objetivo do componente é ao marcar o checkbox Sel da grid, automaticamente todos os registros da grid sejam marcados.
Listagem 1: Codificação do Componente HeaderRenderSelecionar
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer 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%">
<fx:Script>
<![CDATA[
import br.com.events.Evento;
protected function onChange(event:Event):void
{
this.dispatchEvent(new Evento(Evento.ON_CHANGE_TODOS, this.selecionar.selected, true));
}
]]>
</fx:Script>
<s:HGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<s:CheckBox id="selecionar" label="Sel" change="onChange(event)" />
</s:HGroup>
</s:GridItemRenderer>
12. Para criação do componente (Listagem 1), foi necessário inserir um componente do tipo HGroup setando width e height (largura e altura) 100% e posicionar o componente checkbox no centro, através dos atributos horizontalAlign igual center e verticalAlign igual a middle.
No componente checkbox foi adicionado um id para identificar o componente e um método no evento onChange.
13. No método onChange foi disparado o Evento ON_CHANGE_TODOS, passando como parâmetro o selected do checkbox.
Criação da Classe Evento
14. Também foi necessária a criação de uma classe Evento. Esta classe é utilizada pelo headerrender para disparar o evento de uma classe para outra, levando consigo um parâmetro.
Para a criação da classe Evento que será utilizada pelo headerrender, foi necessário os mesmos passos da criação do componente, porém ao invés de criar um MXML Component, foi criado um ActionScript Class.
15. Pela Figura 12 é possível visualizar a tela New ActionScript Class, responsável pela criação da classe Evento.
Figura 12: Criação da Classe Pessoa
Nessa tela deve ser informado:
Package
Pacote onde está localizada a classe, no exemplo, br.com.events.
Name
Nome da classe, no caso, Evento.
16. A Listagem 2 apresenta a codificação da classe Evento.
Listagem 2: codificação da classe Evento.
package br.com.events
{
import flash.events.Event;
public class Evento extends Event
{
public static const ON_CHANGE_TODOS : String = ''ON_CHANGE_TODOS'';
[Bindable] public var params:*;
public function Evento(type:String, params:*=null, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.params = params;
}
override public function clone():Event
{
return new Evento(type, params, bubbles, cancelable);
}
}
}
17. A classe Evento, apresentada pela Listagem 2, possui uma constante que será utilizada pelo Application. Esta constante chamada de ON_CHANGE_TODOS é utilizada para identificar o evento.
18. A classe tem como Pai a classe Event. A classe Event possui todos os recursos para trabalhar com eventos no Flex.
19. E o mais importante da classe Event, criar uma variável params, nesta variável será transportado o evento juntamente com o parâmetro.
Aplicação Principal - Index.mxml (Application)
20. O index possui um datagrid.
- No datagrid se define o gridcolumn, pelo qual defini-se o datafield SEL, CODIGO, NOME os quais são os mesmo nomes dos atributos da classe Pessoa.
- No gridcolumn SEL inserimos o caminho do itemrender e headerrender.
- Para finalizar o datagrid deve ser setado o dataprovider do datagrid para uma variável do tipo lista (ArrayCollection).
- Pela Listagem 3 é apresentada a codificação visual da classe principal.
Listagem 3: Codificação Visual da classe principal.
<s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<s:DataGrid width="600" height="180" dataProvider="{lista}">
<s:columns>
<s:ArrayList>
<!-- Header Render Selecionar -->
<s:GridColumn width="50" dataField="SEL" headerText="Sel"
itemRenderer="br.com.itemrender.ItemRenderSelecionar"
headerRenderer="br.com.headerrender.HeaderRenderSelecionar"/>
<s:GridColumn width="100" dataField="CODIGO" headerText="Código" />
<s:GridColumn dataField="NOME" headerText="Nome" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:VGroup>
21. No header (cabeçalho) da classe principal é chamado o método creationComplete pelo qual chama-se a função onInit(), sendo esse método invocado pelo Flex quando criada a aplicação completamente, conforme listagem 4.
Listagem 4: Cabeçalho Aplicação
<?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"
minWidth="955" minHeight="600"
creationComplete="onInit()" >
22. A Listagem 4 é invoca a função creationComplete na qual chama-se o método onInit(). Já pela listagem 5, é detalhada a codificação da aplicação em ActionScript.
Listagem 5: Codificação AS (ActionScript) da Aplicação
<fx:Script>
<![CDATA[
import br.com.events.Evento;
import br.com.model.Pessoa;
import mx.collections.ArrayCollection;
[Bindable] private var pessoa : Pessoa;
[Bindable] public var lista : ArrayCollection;
public function onInit():void
{
lista = new ArrayCollection();
this.valorizaGrid();
this.addEventListener(Evento.ON_CHANGE_TODOS, onChangeTodos);
}
private function valorizaGrid():void
{
pessoa = new Pessoa();
pessoa.SEL = false;
pessoa.CODIGO = 1;
pessoa.NOME = "Juca Bala";
lista.addItem(pessoa);
pessoa = new Pessoa();
pessoa.SEL = false;
pessoa.CODIGO = 2;
pessoa.NOME = "Marcos";
lista.addItem(pessoa);
pessoa = new Pessoa();
pessoa.SEL = false;
pessoa.CODIGO = 3;
pessoa.NOME = "Pedro";
lista.addItem(pessoa);
}
private function onChangeTodos(event:Evento):void {
var sel : Boolean = event.params as Boolean;
for each (pessoa in lista)
{
pessoa.SEL = sel;
}
lista.refresh();
}
]]>
</fx:Script>
23. Pode ser observado que o método onInit() apresentado na listagem 4 é criado na Listagem 5, este método cria as variáveis necessárias, chama o método para valorização da grid e adiciona o evento que ficara escutando o headerrender.
24. Já pela Listagem 5 foi criado um método valorizaGrid responsável por carregar os objetos Pessoa na grid através do método addItem.
25. O onChangeTodos é acionado quando o usuário aciona o checkbox da grid, então através do headerrender é disparado o método onChangeTodos. Logo todos os itens da grid são ou não marcados, dependendo de como está marcado o checkbox cabeçalho da grid.
Pela figura 13, é possível observar a aplicação final.
Figura 13: Nenhum registro selecionado
A figura 14 apresenta o evento onChangeTodos disparado pelo headerrender.
Figura 14: Todos os registros selecionados
Conclusão
Neste artigo foi apresentada de forma prática e didática a criação de um HeaderRenderer Selecionar, a fim de que leitores possam utilizar em suas aplicações.
Espera-se que o artigo contribua para o enriquecimento de aplicação dos leitores. O projeto de exemplo está disponível para download no topo dessa página, na opção “código fonte”.
Obrigado e um abraço!
