Artigos Canal Mais Adobe Flash Builder 4.5: componente ItemRender CheckBox na Grid

Utilizando a ferramenta Adobe Flash Builder 4.5., este artigo apresenta a criação do componente ItemRender CheckBox Selecionar na Grid, conforme aplicação ilustrada pela Figura 1.

ItemRender Selecionar
Figura 1. ItemRender Selecionar

Os leitores iniciantes podem ser auxiliados pelo 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.

Para facilitar o entendimento do leitor, foram listados e representados, através de figuras, cada fase da criação do respectivo componente.

Aberta a ferramenta Adobe Flash Builder, pelo menu File – opção New – Flex Project, conforme apresenta a Figura 2, é possível criar novo projeto.

Novo Projeto Flex
Figura 2. Novo Projeto Flex

O usuário é direcionado ao novo projeto Flex, acessível pela tela ‘New Flex Project’, apresentada na figura 3.

Na tela ‘New Flex Project’, aba Project Location, apresentada pela Figura 3, deve ser informado:

  • Project name: Nome do projeto (exemplificado na Figura como ItemRenderGrid);
  • Folder: Diretório do projeto (na Figura exemplificada como P:\www\flex\ItemRenderGrid);
  • 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.

Aba Localização do Projeto
Figura 3. Aba Localização do Projeto

Pelo botão “Next”, é possível o usuário prosseguir as configurações do projeto.

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.
Configurações do Servidor
Figura 4. Configurações do Servidor

No exemplo, apresentado pela Figura 4, informado folder public.

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.
Configurações Finais do Projeto
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.

A estrutura do projeto ItemRenderGrid, pode ser observada na figura 6.

Projeto ItemRenderGrid
Figura 6. Projeto ItemRenderGrid

Na figura 6 é apresentada a estrutura hierárquica criada para o projeto.

Seguindo com a criação do projeto, o usuário deve clicar com o botão direito do mouse sobre o projeto, no menu File – opção New – Package, conforme figura 7.

Criação de Pacotes
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 dois pacotes.

Pela Figura 8 é possível observar a criação do pacote itemrender.

Pacote ItemRender
Figura 8. Pacote ItemRender

No campo Name deve ser informado br.com.itemrender, conforme figura 8.

Pelo botão ‘Finish’ é concluída a criação do pacote correspondente.

Observação: o mesmo processo foi realizado para a criação do pacote model.

A estrutura do projeto com os dois pacotes criados, pode ser observada pela figura 9.

Estrutura do Projeto ItemRender
Figura 9. Estrutura do Projeto ItemRender

Sendo adicionada na estrutura os pacotes com as nomenclaturas correspondentes.

Com o botão direito do mouse sobre o pacote itemrender, o usuário deve clicar no menu File – opção New – MXML Component, conforme figura 10.

MXML Component
Figura 10. MXML Component

Onde o usuário é direcionado a tela ‘New MXML Component’, mostrada pela figura 11.

Na tela New MXML Component, deve ser definido:

  • Name: Nome do componente itemrender, no exemplo chamado ItemRenderSelecionar.
  • Based on: Componente pai, no exemplo chamado ‘.spark.components.gridClasses.GridItemRenderer’.
New MXML Component
Figura 11. New MXML Component

Width e Height: Largura e altura do componente, no caso adotado 100% e 100%, respectivamente.

Pela Listagem 1 é apresentada a codificação do componente ItemRenderSelecionar. 

<?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"
		      clipAndEnableScrolling="true"
		      width="100%" height="100%">

	<s:HGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
		<s:CheckBox id="sel" selected="@{data.SEL}" />
	</s:HGroup>

</s:GridItemRenderer>
Listagem 1. Codificação do Componente ItemRenderSelecionar

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 a center e verticalAlign igual a middle.

No componente checkbox foi alterado o atributo selected, inserindo o objeto data com seu atributo SEL.

Lembre-se: todos os ItemRenders possuem objeto data.

Também foi necessária a criação do objeto Pessoa que será utilizado pelo itemrender. Para criação da classe Pessoa foram necessários os mesmos passos da criação do componente, porém ao invés de criar um MXML Component, foi criado um ActionScript Class.

Pela Figura 12 é possível visualizar a tela New ActionScript Class, responsável pela criação da classe Pessoa.

Criação da Classe Pessoa
Figura 12. Criação da Classe Pessoa

Nessa tela deve ser informado:

  • Package: Pacote onde está localizada a classe, no exemplo, br.com.model.
  • Name: Nome da classe, no caso, Pessoa.

A Listagem 2 apresenta a codificação da classe Pessoa.

package br.com.model
{
	[Bindable]
	public class Pessoa
	{
		public var SEL : Boolean;
		public var CODIGO : uint;
		public var NOME : String;

		public function Pessoa()
		{
			this.SEL = false;
			this.CODIGO = 0;
			this.NOME = "";
		}
	}
}
Listagem 2. codificação da classe Pessoa

A classe Pessoa, apresentada pela Listagem 2, possui atributos SEL, CODIGO, NOME, sendo em seu método construtor setados parâmetros defaults para o objeto.

  • A classe Pessoa é utilizada para valorização da Grid.
  • Deve ser utilizado o atributo [Bindable] do Flex para a classe.

Importante: o atributo Pessoa SEL é o mesmo utilizado no Componente ItemRenderSelecionar, data.SEL.

Aplicação Principal - Index.mxml (Application)

O index possui um datagrid e um botão.

  • No datagrid se define o gridcolumn, pelo qual defini-se os datafields SEL, CODIGO, NOME os quais são os mesmos nomes dos atributos da classe Pessoa.
  • No gridcolumn SEL inserimos o caminho do itemrender.
  • Para finalizar o datagrid deve ser setado o dataprovider do datagrid para uma variável do tipo lista (ArrayCollection).
  • No botão altera-se o texto da label para “Qual é o Item Selecionado?” e adiciona-se no evento click o método onClick.
  • Pela Listagem 3 é apresentada a 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>
				<!-- Item Render Selecionar -->
				<s:GridColumn width="50" dataField="SEL" headerText="Sel"
							  itemRenderer="br.com.itemrender.ItemRenderSelecionar"></s:GridColumn>

				<s:GridColumn width="100" dataField="CODIGO" headerText="Código"></s:GridColumn>
				<s:GridColumn dataField="NOME" headerText="Nome"></s:GridColumn>
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>
	<s:Button label="Qual é o Item Selecionado?" click="onClick(event)"/>
</s:VGroup>
Listagem 3. Codificação Visual da classe principal

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.

<?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()" >
Listagem 4. Cabeçalho Aplicação

Na Listagem 4 é invocada 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.

<fx:Script>
	<![CDATA[
		import br.com.model.Pessoa;

		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import mx.events.FlexEvent;

		[Bindable] private var pessoa : Pessoa;
		[Bindable] private var lista : ArrayCollection;

		protected function onInit():void
		{
			lista = new ArrayCollection();

			this.valorizaGrid();
		}

		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);
		}

		protected function onClick(event:MouseEvent):void
		{
			for each (pessoa in lista) {
				if ( pessoa.SEL == true ) {
					Alert.show("O Item Selecionado é: " + pessoa.NOME);
				}
			}
		}

	]]>
</fx:Script>
Listagem 5. Codificação AS (ActionScript) da Aplicação

Pode ser observado que o método onInit() apresentado na listagem 4 é criado na Listagem 5.

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.

Pelo método onClick é apresentado um Alerta ao usuário sobre qual item foi selecionado na Grid.

Abaixo pode ser observada a codificação completa do projeto ItemRenderGrid.

<?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()" >

	<fx:Script>
		<![CDATA[
			import br.com.model.Pessoa;

			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;

			[Bindable] private var pessoa : Pessoa;
			[Bindable] private var lista : ArrayCollection;

			protected function onInit():void
			{
				lista = new ArrayCollection();

				this.valorizaGrid();
			}

			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);
			}

			protected function onClick(event:MouseEvent):void
			{
				for each (pessoa in lista) {
					if ( pessoa.SEL == true ) {
						Alert.show("O Item Selecionado é: " + pessoa.NOME);
					}
				}
			}

		]]>
	</fx:Script>

	<s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
		<s:DataGrid width="600" height="180" dataProvider="{lista}">
			<s:columns>
				<s:ArrayList>
					<!-- Item Render Selecionar -->
					<s:GridColumn width="50" dataField="SEL" headerText="Sel"
								  itemRenderer="br.com.itemrender.ItemRenderSelecionar"></s:GridColumn>

					<s:GridColumn width="100" dataField="CODIGO" headerText="Código"></s:GridColumn>
					<s:GridColumn dataField="NOME" headerText="Nome"></s:GridColumn>
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>
		<s:Button label="Qual é o Item Selecionado?" click="onClick(event)"/>
	</s:VGroup>

</s:Application>
Listagem 6. Aplicação Principal - Index.mxml
package br.com.model
{
	[Bindable]
	public class Pessoa
	{
		public var SEL : Boolean;
		public var CODIGO : uint;
		public var NOME : String;

		public function Pessoa()
		{
			this.SEL = false;
			this.CODIGO = 0;
			this.NOME = "";
		}
	}
}
Listagem 7. Classe Pessoa
<?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"
		clipAndEnableScrolling="true"
		width="100%" height="100%" >

	<s:HGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
		<s:CheckBox id="sel" selected="@{data.SEL}" />
	</s:HGroup>

</s:GridItemRenderer>
Listagem 8. ItemRenderSelecionar

Pela figura 13, é possível observar a aplicação final.

Aplicação Principal
Figura 13. Aplicação Principal

A figura 14 apresenta o evento click no botão “Qual é o Item Selecionado?”.

Item Selecionado
Figura 14. Item Selecionado

A tela apresenta ao usuário o item selecionado e aguarda a confirmação do mesmo.

Conclusão

Neste artigo foi apresentada de forma prática e didática a criação de um ItemRender 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”.

Referências: