Olá pessoal,
Hoje irei demonstrar uma funcionalidade bem interessante do Flex/Flash Builder. A qual é a capacidade de melhor organizar seus componentes customizados na Tree View Mode e Flex Properties.
É muito comum desenvolvedores criarem componentes para suas APP, porém os 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.
Ex: Todo componente que é criado por padrão o mesmo não faz parte de nenhum pacote. Assim quando você utiliza o mesmo em projetos o namespace aparece exatamente o caminho package no qual o componente se encontra. Contudo se você observar as LIB distribuídas pela rede, você sempre vê algo assim: “xmlns:mx=”http://www.adobe.com/2006/mxml””. Isso acontece por que os desenvolvedores se preocuparam em empacotar de uma forma padrão e mais sugestiva.
Requisitos para realização deste artigo:
• Flex ou Flash Builder
• Conhecimento básico em Mxml e Ascript.
Este artigo resolvi escrevê-lo, depois de ter visto o assunto e conversado com duas pessoas muitos influentes na comunidade Flex, Mario Junior e Igor Costa (http://www.igorcosta.org/?p=186) . Assim quero compartilhar com vocês este conhecimento e passando também os devidos créditos às referencias acima.
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: Este irá ser uma extensão do componente nativo ComboBox este 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: Este irá 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
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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 extente 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
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 27 28 29 30 31 32 33 34 35 36 37 38 |
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á exibido ao desenvolvedor para definir um titulo para o Panel.
Pessoal se vocês forem utilizar estes componentes pelo Design View, vocês perceberão que ambos estão agrupados numa pasta chamada Custom, contudo se formos comercializarmos estes componentes não fica interessante disponibiliza-los assim, já que se o usuário criar novos componentes os mesmos ficarão agrupados junto com os 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 criar um arquivo default se no caso você criou um, o Flex Builder é inteligente suficiente para fazer um merge do seu XML xom 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.
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 27 28 29 |
<?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> |
Neste arquivos contem algumas tags importantes são elas:
1 – namespaces: Esta tag como o nome já diz, é responsável por criar um namespace padrão, assim quando você for utilizá-los em sua aplicação você não precisa indicar o caminho exato onde o mesmo se encontra, basto apenas fazer a seguinte declaração na classe: xmlns”HTTP://www.imaster.com.br/2009/mxml” Este é um nome sugestivo pode ser qualquer outro.
2 – categories: Esta tag define quais serão as categorias existentes para a sua biblioteca. Esta 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.
3 – components: Define qual componente será vinculado a uma determinada categoria. Esta por sua vez 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 seja exibida na perspectiva Flex Properties.
Abaixo estão as properties tags suportadas pelo
1 2 3 4 5 | "textfield id=”” label=”” multiline=”false/true”"<br /> "combo id=”” label=””"<br /> "colorpicker id=”” label=””"<br /> "filepicker id=”” label=””"<br /> "slider id=”” label=””"<br /> |
Parece ser complexa a configuração deste arquivo, contudo com o tempo você ira se habituá-lo.
Agora vamos ao ultimo 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
1 2 3 4 5 |
<?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.
Certo agora que os componentes estão criados e mapeados devemos então realizar algumas configurações nas propriedades da Library para que realmente possamos utilizar nossos comonentes, pois caso vocês tenha tentado compilar e capturar estes componentes no projeto ImasterFlex vocês não serão capaz de utiliza-los por um motivo simples, eles não estarão visíveis para o Components View, assim para que os mesmos 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 assim como na figura abaixo.
Agora vá em Flex Library Compiler e define os seguintes campos: Namespace URL e Manifest, veja a figura abaixo:
Certo pessoal 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 exibido cada um em sua respectiva categoria.
Na figura acima vocês podem observar que no nosso componente CustomComboBox nos temos a possibilidade de definir um valor default para o ser exibido no mesmo. 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 como também para uma melhor organização de seus componentes.
Qualquer duvida ou sugestão postem comentários.
