Uma funcionalidade bem interessante do Flex/Flash Builder é a capacidade de melhor organizar seus componentes customizados na Tree View Mode e Flex Properties. É muito comum desenvolvedores criarem componentes para suas APP,
mas eles mesmos sempre reclamam que o Flex Builder não os organiza
devidamente bem. Contudo estes são pensamentos de desenvolvedores que
não conhecem o poder da ferramenta.

Outro ponto que irei abordar neste artigo é a forma de como se deve
proceder para aqueles que querem criar componentes e distribuí-los
comercialmente ou não.

Por exemplo, todo componente que é criado, por padrão, não faz parte de
nenhum pacote. Assim, quando você o utiliza em projetos, no
namespace aparece exatamente o caminho package no qual o componente se
encontra. Contudo, se você observar as LIB distribuídas pela rede, vai notar que sempre vê algo assim: “xmlns:mx=”http://www.adobe.com/2006/mxml””. Isso
acontece porque os desenvolvedores se preocuparam em empacotar de uma
forma padrão e mais sugestiva.

Requisitos

• Flex ou Flash Builder

• Conhecimento básico em Mxml e Ascript.

Agora, mãos à obra.

Passo 1

Vamos criar dois simples componentes apenas para efeito didático. Lista de componentes e suas características:

1. CustomCombox:  será uma extensão do
   componente nativo ComboBox. Ele terá um DataProvider pré definido com
   os seguintes valores: “RG CPF – CNPJ” e estas opções estarão
   disponível visualmente no “Show View Flex Properties”.
2. CustomPanel: será uma extensão do componente Panel e apenas isso.

Então, agora vamos criar um Library Project e um Project Flex com os seguintes nomes respectivamente ImasterLib e um ImasterFlex, ficando da seguinte maneira.

Fig 1: Estrutura de diretórios e arquivos do artigo.

Então vamos criar o primeiro componente, CustomCombox.as

package com.core.customComboBox {
 
	import mx.collections.ArrayCollection;
	import mx.controls.ComboBox;
 
	/**
	 * @author Fabiel Prestes
	 */
	public class CustomComboBox extends ComboBox {
 
		[Bindable]
		private var _dataProvider:ArrayCollection = new ArrayCollection([{label:'RG'},
																		 {label:'CPF'}, 
																		 {label:'CNPJ'}]);
		[Bindable]
		private var _valueDefault:String;
 
		public function CustomComboBox() {
			super();
		}
 
		override protected function childrenCreated():void {
			super.childrenCreated();
 
			this.dataProvider = _dataProvider;
 
			for each(var objT:Object in this.dataProvider){
				if(objT.label == _valueDefault)
					this.selectedItem = objT;
			}	
		}
 
		[Inspectable(enumeration="CPF,CNPJ,RG")]
		public function set valueDefault(value:String):void{
			_valueDefault = value;
		}
 
		public function get valueDefault():String{
			return _valueDefault;
		}
 
	}
}

O componente acima não tem nada de complexo, apenas estende ComboBox e tem métodos set e get para valueDefault.
Esta propriedade será exibida no View Flex Properties, esta é a
novidade do artigo. Criar propriedade defaults para os componentes para
serem comercializados.

Agora vamos criar o componente CustomPanel.as

package com.core.customPanel {
 
	import mx.containers.Panel;
 
	/**
	 * @author Fabiel Prestes
	 */
	public class CustomPanel extends Panel{
 
		[Bindable]
		private var _titulo:String;
 
		public function CustomPanel() {
			super();
		}
 
		override protected function childrenCreated():void{
			super.childrenCreated();
 
			this.title = this._titulo;
		}
 
		/**
		 * Define um titulo para o componente
		 */
		public function set titulo(value:String):void{
			this._titulo = value;
		}
 
		/**
		 * Retorna o titulo definido para o componente.
		 */
		public function get titulo():String{
			return this._titulo;
		}
 
	}
}

O componente acima é mais simples ainda do que o anterior, já que
neste temos apenas uma propriedade TextField que será exibida ao
desenvolvedor para definir um título para o Panel.

Se você for utilizar estes componentes pelo Design View,
perceberá que ambos estão agrupados numa pasta chamada Custom. Contudo, se formos comercializar estes componentes não é interessante disponibilizá-los assim, já que se o usuário criar novos
componentes eles ficarão agrupados junto aos seus. Para que
isso não aconteça devemos criar dois arquivos, sendo eles: Design.xml e Manifest.xml.

O Design.xml sempre é criado pelo Flex
Builder em tempo de execução, para poder montar as visões Components e
Flex Properties. Caso você não tenha um o Flex Builder, deve criar um arquivo
default. Se você criou um, o Flex Builder é inteligente
o suficiente para fazer um merge do seu XML com o padrão.

A principal função deste arquivo é separar cada componente em
categorias e especificar, caso necessário, quais as propriedades que
estarão visíveis no Flex Properties.

Então aí segue o código.

<?xml version="1.0" encoding="utf-8"?>
<design>
 
	<namespaces>
		<namespace prefix="imasterLib" uri="http://www.imaster.com/2009/mxml"/>
	</namespaces>
 
	<categories>
		<category id="categoriaComboBox" label="Custons ComboBox" defaultExpand="true"/>
		<category id="categoriaPanel" label="Custons Panels" defaultExpand="true"/>
	</categories>
 
	<components>
		<component name="CustomComboBox" namespace="imasterLib" category="categoriaComboBox"
				   displayName="CustomComboBox">
			<mxmlProperties>
				<combo id="valueDefault" name="Valor Padrão:" />
			</mxmlProperties>
		</component>
 
		<component name="CustomPanel" namespace="imasterLib" category="categoriaPanel"
				   displayName="CustomPanel">
			<mxmlProperties>
				<textfield id="titulo" name="Titulo do painel:" />
			</mxmlProperties>
		</component>
	</components>
 
</design>

Este arquivos contêm algumas tags importantes, são elas:

01. namespaces: como o nome já diz, é
a tag responsável por criar um namespace padrão. Assim, quando for
utilizá-los em sua aplicação, você não precisa indicar o caminho exato
onde ele se encontra, basta apenas fazer a seguinte declaração na
classe: xmlns”HTTP://www.imaster.com.br/2009/mxml”. Este nome
é uma sugestão, pode ser qualquer outro.

02. categories: define quais serão as categorias existentes para a sua biblioteca. Possui três atributos:

a) Id: Define um id para a categoria criada.

b) Label: Define um nome de exibição para a categoria.

c) defaultExpand: Atributo opcional, se definido como true indica que a tree sempre estará expandida qual o usuário selecionar o Design View.

03. components: define qual componente será vinculado a uma determinada categoria. Possui o seguinte atributo:

a) component: nesta tag você ira definir qual componente será vinculado a qual
categoria, a qual namespace e um nome que será exibido na perspeciva
Components.

i. Name: Nome do componente

ii. Namespace: Qual namespace será vinculado o componente.

iii. Category: Qual a categoria que o componente irá pertencer.

iv. mxmlProperties: Propriedade muito útil quando você deseja que propriedades comuns sejam exibidas na perspectiva Flex Properties.

Abaixo estão as properties tags suportadas pelo <mxmlProperties

“textfield id=”” label=”” multiline=”false/true””
“combo id=”” label=”””
“colorpicker id=”” label=”””
“filepicker id=”” label=”””
“slider id=”” label=”””

Parece ser complexa a configuração deste arquivo, contudo com o tempo você irá habituar-se a ele.

Agora vamos ao último arquivo de configuração e o mais importante:
Manifest.xml. Este arquivo basicamente define quais componentes de sua
biblioteca estarão disponíveis para ser embutidos no seu SCW.

Manifest.xml

<?xml version="1.0" encoding="utf-8"?>
<componentPackage>
	<component id="CustomComboBox" class="com.core.customComboBox.CustomComboBox" />
	<component id="CustomPanel" class="com.core.customPanel.CustomPanel" />
</componentPackage>

Como vocês podem ver, este arquivo é realmente simples e totalmente intuitivo.

Agora que os componentes estão criados e mapeados, devemos realizar algumas configurações nas propriedades da Library,
para que realmente possamos utilizar nossos componentes. Caso vocês
tenha tentado compilar e capturar estes componentes no projeto
ImasterFlex, vocês não serão capaz de utilizá-los por um motivo simples:
eles não estarão visíveis para o Components View. Assim, para que eles fiquem visíveis, antes devemos fazer os seguintes passos:

Passo 2

Clique com o botão direito na LIbrary > properties > Flex Library Build Path > na aba Assests. Nesta aba marque os arquivos Design.xml e Manifest.xml, como na figura abaixo.

Agora vá em Flex Library Compiler e defina os seguintes campos: Namespace URL e Manifest, veja a figura abaixo:

Agora, com os passos acima configurados, é so abrir o arquivo ImasterFlex.mxml do projeto ImasterFlex e ir na visão View Mode, assim como na figura abaixo.

Na figura acima vocês podem observar que nossos componentes estão sendo exibidos cada um em sua respectiva categoria.

Na figura acima vocês podem observar que, no nosso componente CustomComboBox,
temos a possibilidade de definir um valor default para ser
exibido nele. Lembrando que estes valores estão sendo pegos da tag [Inspectable(enumeration=”CPF,CNPJ,RG”)] e não do dataProvider definido manualmente na classe.

É isso, pessoal. Com estes passos vocês estará apto a criar
componentes para comercialização e também para uma melhor
organização de seus componentes.

 Qualquer dúvida ou sugestão postem comentários.

DownloadSource

*

Este artigo foi escrito depois de discutir o assunto com duas pessoas muitos influentes na comunidade Flex, Mario Junior
e Igor Costa. Além de transmitir o conhecimento, quero também dar os devidos
créditos a essas referências.