Caros Amigos,
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.
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.
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, 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’)
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 ItemRenderGrid, 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 o 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 dois pacotes.
7) Pela Figura 8 é possível observar a criação do 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.
8) A estrutura do projeto com os dois 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 itemrender, 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 ItemRenderSelecionar.
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.
11) Pela Listagem 1 é apresentada a codificação do componente ItemRenderSelecionar.
Listagem 1: 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="cent
...
15/02/2013 12:40:00
2013
2013
2
0
