muito bacana essa calculadora de hipotecas.  dê uma olhada, interaja, simule e veja que a última tela, que parece uma planilha Excel, mostra gráficos bacanas quando você clica numa linha: MortgageCalculator…(read more)

o artigo é longo e muito detalhado, e traz algumas coisas que eu não sabia (flex teria limitações de precisão de cálculos matemáticos, por exemplo).   vale a leitura. aqui vai o resumo: At this stage if looks are your only concern, then Flex…(read more)

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

"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ê 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.

DownloadSource

O desenvolvedor deve pensar não só em entregar o trabalho no prazo, é preciso ter cuidado com a segurança da aplicação. [More]

O codeDraw é um projeto openSource de edição visual para criar gráficos vetoriais para aplicações flex, flash, TASC e haXe. Com ele podemos criar movieClips graficamente e logo exportar para as2, as3.

codeDraw integra um pequeno núcleo de gestão de objectos gráficos em tempo de execução,  Atualmente o codeDraw possui 4 ferramentas : Desenho e seleção, painel de propriedades, camadas e filtros. Ainda se encontra em estado prematuro mas tem bastante potencial, facilita muito em situações onde a necessidade de criar imagens vetoriais em code para flex.

Fonte: made in flex

É pessoal, últimamente tenho dedicado algumas horas para conhecer melhor a plataforma da Microsoft, e conforme prometido, vou dando o meu feedback aqui no blog.

Primeiramente comecei a assistir os WebCasts oficiais da MSDN, o conteúdo, apesar de ser muuuito comercial, é bem interessante:

• Introdução ao Silverlight 3.0
• Silverlight 3.0 para Desenvolvedores
• Criando interatividade com o Expression Blend 3.0
• Overview e novos recursos do Expression Web 3.0

O mais engraçado é quando se referem a “tecnologia concorrente”, rsrsrrs…

Apesar de tudo, até agora tenho gostado bastante, mas devo confessar uma coisa, tudo que vi é realmente muito parecido com o que temos no Flex, pra vocês terem uma idéia, dêem uma olhada no component explorer do Silverlight.

Um link que vale muito a pena, é o blog do Rene de Paula.

Por enquanto fico por aqui, em breve mais novidades.

Há uns dias atrás pensei em criar minha própria biblioteca de reflexão no AS3. Basicamente é só manipular o resultado do método describeType(object) que retorna um XML com todas as informações do objeto passado como argumento.

No entanto, achei uma biblioteca que é muito útil e bem completa para isso, segue a dica:

SpiceLib: http://www.spicefactory.org/spicelib/docs/as3/current/manual/reflection.php#intro

Reflexão, para quem não conhece, é um recurso muito útil que te permite fazer uma introspecção em um objeto e obter informações dele. No Adobe Flex, reflexão pode ser muito útil para criação de componentes genéricos e mais “inteligentes” para que se comportem de acordo com um objeto informado. Realmente é uma feature muito interessante, em Java usamos reflexão largamente para desenvolvimento de frameworks.

Isso ae pessoal.. segue a dica para quem precisar trabalhar com reflexão em AS3.

Abraços.

################################################

English version

################################################

Hello All.

Some days ago I thought about to create my own Reflection library for AS3. Basically it’s just to manipulate the output of the method describeType (object) that returns an XML containing all the information about the object passed as argument.

Therefore, I found a library that already to do this:

SpiceLib: http://www.spicefactory.org/spicelib/docs/as3/current/manual/reflection.php#intro

Reflection, for who don’t know, is a powerfull feature for obtain object’s information using introspection. This is very usefull for building generic components and smarter for them behaviors itself according with the object passed as argument.

That’s all folks, cheers!

Recebi esta notícia de um amigo meu, a notícia é de 2008 mas mesmo assim quis compartilhar com vocês.
É gratificante saber que o Flex é usado por grandes empresas ou entidades em softwares de missão crítica, isso nos mostra que o Flex é uma ferramenta robusta reconhecida mundialmente.

Aqui o link da notícia: OTAN adota o Adobe Flex para Sistema de Suporte

O Adobe Tour estará no Brasil nos dias 16/08, 18/08 20/08, com o foco na Plataforma Flash, o Evangelista que falará para nós é Lee Brimelow. [More]