MXML - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

Mai 11

Flash Builder DataGrid DragEvent

Escrito por Felipe Borella em 1, 2.0, 2009, 4, 6, Adobe, app, AR, back, bar, BI, Bindable, C#, class, collection, control, Controls, DataGrid, DataProvider, event, events, exemplo, Flex, fonte, fonts, for, function, handle, html, ide, IE, if, int, label, library, Links, MXML, Number, O, on, Pessoal, pt, Ria’s Geral, S+S, spark, string, tag, TAT, web, web 2.0, XML, XP @ 05 11th, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários

Olá pessoal beleza?

Pois é em ritmo de AudiCup.
Eis que então o pessoal da Audi entrou em contato comigo essa semana para fazer algo em Web 2.0 para cadastrar os times que irão participar da AudiCup.

Segue os links abaixo:
http://www.audi.com/com/brand/en/experience/sponsoring/sportsponsoring/the_audi_cup_2011.html
http://www.audi.com/com/brand/en/experience/sponsoring/sportsponsoring/the_audi_cup_2011/schedule_and_tickets.html

Inter , estaremos contigo ..
Tu és minha paixão !
Não importa o que digam
Sempre levarei comigo
Minha camisa vermelha ..
e a cachaça na mão
O Gigante me espera ..
Para começar a festa !

O exemplo é mais ou menos o que esta abaixo:

Veja o Fonte é simples:

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="application1_creationCompleteHandler(event)">
	<fx:Declarations>

	fx:Declarations>
	<fx:Script>
		[CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.CloseEvent;
			import mx.controls.Alert;
			import mx.events.DragEvent;
			import mx.events.FlexEvent;
			import mx.managers.DragManager;

			[Bindable]
			private var time:Time;

			[Bindable]
			private var times:ArrayCollection;			

			[Bindable]
			private var timesConvocados:ArrayCollection=new ArrayCollection();

			private function onDrop(event:DragEvent):void 
				if(event.dragSource.formats.toString() == "items,itemsByIndex,caretIndex") 
					var dragList:Array = event.dragSource.dataForFormat('items') as Array;
					var draggedTimes:Time = dragList[0] as Time;

					if(draggedTimes.fifa == 'N') 
						Alert.show("Não foi possível adicionar este time!nn"+draggedTimes.nome+" não tem mundial de Clubes FIFA!", "AudiCup");
						event.preventDefault();
						event.target.hideDropFeedback(event);
						DragManager.showFeedback(DragManager.NONE);
					
				}
			}	

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			
				times=new ArrayCollection();
				time=new Time();
				time.id=1;
				time.nome="FC Barcelona";
				time.fifa="S";
				times.addItem(time);

				time=new Time();
				time.id=2;
				time.nome="SC Internacional de Porto Alegre";
				time.fifa="S";
				times.addItem(time);

				time=new Time();
				time.id=3;
				time.nome="FC Bayern";
				time.fifa="S";
				times.addItem(time);

				time=new Time();
				time.id=4;
				time.nome="AC Milan";
				time.fifa="S";
				times.addItem(time);

				time=new Time();
				time.id=5;
				time.nome="Grêmio de Porto Alegre";
				time.fifa="N";
				times.addItem(time);

				time=new Time();
				time.id=6;
				time.nome="SC Juventude de Caxias do Sul";
				time.fifa="N";
				times.addItem(time);
			

		]]>
	fx:Script>
	<s:Label x="10" y="10" fontSize="14" fontWeight="bold" text="Audi Cup 2011 Meet the best"/>

	<mx:DataGrid x="10" y="32" width="250" height="200" dataProvider="times"
				dragEnabled="true" dragMoveEnabled="true" dropEnabled="true">
		<mx:columns>
			<mx:DataGridColumn dataField="nome" headerText="Times Disponíveis"/>
		mx:columns>
	mx:DataGrid>

	<mx:DataGrid x="268" y="32" width="250" height="200" dataProvider="timesConvocados"
				 dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" dragDrop="onDrop(event);">
		<mx:columns>
			<mx:DataGridColumn dataField="nome" headerText="Convoque você mesmo - Arraste"/>
		mx:columns>
	mx:DataGrid>
s:Application>

package

	[Bindable]
	public class Time
	
		public var id:Number;
		public var nome:String;
		public var fifa:String;

		public function Time()
		
		
	}
}

Felipe Borella.

Mai 3

Controlando quando é criado o componente filho adicionado por State

Escrito por Cognitiva Soluções em 1, 2009, 4, 6, Adobe, app, AR, BI, blog, Blogs, Componente, Curso, err, erro, Flex, Flex 4, Google, IE, image, library, mg, MXML, O, on, problema, RIA, Ria’s Geral, spark, state, TAT, UI, XML @ 05 3rd, 2011 | via http://blog.cognitivasolucoes.com | Sem comentários

Um problema comum para quem não esta muito habituado a usar o?State?do Flex 4 é tentar acessar um objeto filho que não foi construído ainda. Sendo exibido erro de execução.

?Existe a propriedade itemCreationPolicy?que pode ser setada como immediate ou deferred(default). Setando ela como immediate o componente será criado quando a aplicação é inicializada. Evitando o erro de execução.

Abr 7

ArrayCollection XML FileReference Flex

Escrito por Felipe Borella em 1, 4, 6, Adobe, app, AR, back, BI, Bindable, carregar, collection, control, Controls, dados, DataGrid, DataProvider, encode, encoder, err, erro, error, eval, event, EventListener, Evento, falha, filter, Flex, fonte, for, function, git, ide, IE, label, layout, lista, MXML, O, on, pt, reference, RIA, Ria’s Geral, RoR, string, tag, TAT, Tema, UI, utils, Ved, XML, XP @ 04 7th, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários

Opa.

Resolvi criar este post pois ja havia feito isso para trabalho de faculdade, então, compratilhando o conhecimento adquirido.

Segue abaixo aplicação e os fonte com as explicações:
Clique em Listar e depois salvar.

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	backgroundColor="white">
?
	<mx:Script>
		[CDATA[
			import mx.rpc.xml.SimpleXMLEncoder;
			import mx.utils.ObjectUtil;
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
?
			private var fr:FileReference;
			private static const FILE_TYPES:Array=[new FileFilter("Arquivo XML", "*.xml")];
			private static const DEFAULT_FILE_NAME:String="trabalho.xml";
			[Bindable]
			public var arr:ArrayCollection=new ArrayCollection(
					[{id:1, nome:"Felipe Borella", cidade:"Marau"},
					{id:2, nome:"Mario Junior", cidade:"Rio de Janeiro"},
					{id:3, nome:"Bãrdei Futebol Clube", cidade:"Marau"},
					{id:4, nome:"Janderson Futebol Clube", cidade:"Rio de Janeiro"}]);
?
			private function iniciar():void
			{
				var xml:XML=objectToXML(arr.source);
				txt1.text=ObjectUtil.toString(arr.source);
				txt2.text=xml.toXMLString();
			}
?
?
			private function objectToXML(obj:Object):XML
			{
				var qName:QName=new QName("pessoa");
				var xmlDocument:XMLDocument=new XMLDocument();
				var simpleXMLEncoder:SimpleXMLEncoder=new SimpleXMLEncoder(xmlDocument);
				var xmlNode:XMLNode=simpleXMLEncoder.encodeValue(obj, qName, xmlDocument);
				var xml:XML=new XML(xmlDocument.toString());
				trace(xml.toXMLString());
				return xml;
			}
?
			private function onLoadFileClick():void
			{
				//cria a instancia do FileReference
				fr=new FileReference();
				//adiciona o evento para a escuta quando o arquivo for selecionado 
				fr.addEventListener(Event.SELECT, onFileSelect);
				//adiciona o evento para a escuta quando o arquivo for cancelado
				fr.addEventListener(Event.CANCEL, onCancel);
				//abri somente arquivos XML
				fr.browse(FILE_TYPES);
			}
?
			//chamado quando o usuario seleciona o arquivo
			private function onFileSelect(e:Event):void
			{
				//quando o arquivo for carregado dispara a escuta da funcao onLoadComplete
				fr.addEventListener(Event.COMPLETE, onLoadComplete);
				// adiciona a escuta quando acontece erro ao carregar arquivo
				fr.addEventListener(IOErrorEvent.IO_ERROR, onLoadError);
				//carrega o conteudo do arquivo
				fr.load();
			}
?
			//Chamado quando o usuario cancela
			private function onCancel(e:Event):void
			{
				trace("File Browse Canceled");
				fr=null;
			}
?
			//chama completa o arquivo carregado
			private function onLoadComplete(e:Event):void
			{
				//recupera os dados do arquivo como um byte array
				var data:ByteArray=fr.data;
				//le o arquivo como uma string e coloca em um text area
				txt2.text=data.readUTFBytes(data.bytesAvailable);
				//limpa a instancia do arquivo tipo filereference
				fr=null;
			}
?
			//quando ocorrer erros ao carregar
			private function onLoadError(e:IOErrorEvent):void
			{
				trace("Error loading file : " + e.text);
			}
?
			//chamadoquando o usuario digita no textarea
			private function onInputChange():void
			{
				//habilita o botao se ha texto para salvar
				saveButton.enabled=(txt2.text.length > 0);
			}
?
			//chamado quando o usuario clica o botao de carregar
			private function onSaveClick():void
			{
				//criando instancia de File Reference
				fr=new FileReference();
?
				//escuta para falha quando foi salvo
				fr.addEventListener(Event.COMPLETE, onFileSave);
?
				//escuta  para quando cancelar
				fr.addEventListener(Event.CANCEL, onCancel);
?
				//escuta para quando ha erros no salvar
				fr.addEventListener(IOErrorEvent.IO_ERROR, onSaveError);
?
				//abre a caixa para saber onde salvar o XML usando o nome default
				fr.save('n'+txt2.text, DEFAULT_FILE_NAME);
			}
?
			//chamado quando o arquivo for salvo
			private function onFileSave(e:Event):void
			{
				trace("File Saved");
				fr=null;
				Alert.show('Salvo com sucesso');
			}
?
			//chamado se o usuario cancela a caixa de dialogo
			private function onCance2l(e:Event):void
			{
				Alert.show('Arquivo cancelado', 'Sistema');
				fr=null;
			}
?
			//chamado se ocorrer erro enquanto salva o arquivo
			private function onSaveError(e:IOErrorEvent):void
			{
				Alert.show('Erro '+ e.text);
				fr=null;
			}
		]]>
	mx:Script>
?
	<mx:DataGrid x="10" y="10" dataProvider="{arr}" width="299">
		<mx:columns>
			<mx:DataGridColumn headerText="Nome" dataField="nome"/>
			<mx:DataGridColumn headerText="Cidade" dataField="cidade"/>
		mx:columns>
	mx:DataGrid>
	<mx:Button id="saveButton" x="412" y="130" label="Salvar" click="onSaveClick()"/>
	<mx:TextArea id="txt1" x="10" y="175" width="228" height="231" editable="false"/>
	<mx:TextArea id="txt2" x="246" y="175" width="228" height="231" editable="false"/>
	<mx:Button x="346" y="130" label="Listar" click="iniciar()"/>
?
mx:Application>

Valeu ai!

Felipe
Marau-RS

Mar 22

Singleton Action Script

Escrito por Felipe Borella em 1, 6, action, Action Script, Adobe, app, AR, class, classe, control, Controls, Design, Design Pattern, err, erro, error, exemplo, Flex, for, function, if, label, layout, MXML, O, on, pattern, Pessoal, pt, Ria’s Geral, RoR, singleton, string, TAT, Teste, UI, UX, XML @ 03 22nd, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários

Dae Pessoal.

Hoje vamos falar sobre Singleton em Action Script.
Singleton é um modelo de Design Pattern que simplifica o acesso ao objeto, apenas instanciando a mesma. Veja no exemplo a Classe que eu fiz e o seu uso.

package br.com.fborella
{
	public class Singleton
	{
		private static var instance:Singleton;
		public var auxiliar:String;
?
		public function Singleton(enforcer:SingletonEnforcer)
		{
			if (enforcer == null)
				throw new Error("é possivel apenas uma instância");
		}
?
		public static function getInstance():Singleton
		{
			if (instance == null)
				instance=new Singleton(new SingletonEnforcer);
			return instance;
		}
	}
}
//Esse class abaixo e para bloquear qualquer acesso ao construtor.  
class SingletonEnforcer {
?
}

Usando a mesma:

xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<fx:Script>
		[CDATA[
			import mx.controls.Alert;
			import br.com.fborella.Singleton;
?
			public var instancia:Singleton = Singleton.getInstance();
?
            public function clique():void{
            	instancia.auxiliar = 'Teste Singleton';
            	Alert.show(instancia.auxiliar);
            }
		]]>
	fx:Script>
	<s:Button label="Clique aqui" click="clique()"/>
s:Application>

Valeu ai pessoal..

Felipe

Mar 14

Metadata Exclude

Escrito por DClick Team em 1, 4, Actionscript, Adobe, AR, auto, blog, class, classe, Componente, components, Desenvolvedor, efeito, Estilo, event, Evento, exemplo, flash, flash builder, Flex, for, function, git, IE, if, image, int, mg, mudanças, MXML, O, on, processo, rest, RIA, Ria’s Geral, spark, TAT, TextInput, Twitter, UI, Ved, XML @ 03 14th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários

Twitter!

Continuando com a nossa série de posts sobre metadatas, dessa vez foi falar da metadata exclude. Essa metadata tem como principal objetivo esconder uma propriedade, efeito, evento ou estilo de um componente quando adicionado via MXML.

A metadata exclude não tem nenhuma utilidade quando estamos criando nosso componente sem utilizar nenhum outro componente como base, pois caso nosso objetivo seja esconder uma propriedade basta utilizarmos um modificador de acesso diferente de public, e caso seja esconder um efeito, evento ou estilo, basta não adicionar as metadatas Effect, Event ou Style.

Mas enfim, vamos a um exemplo prático.

No nosso exemplo, vamos extender a classe TextInput para criar uma nova caixa de texto chamada CPFInput. A CPFInput apenas limitará o usuário a digitar os valores entre 0 e 9, pontos e traços.

Criando a classe CPFInput.

PLAIN TEXT

CODE:

package
{
? ? import spark.components.TextInput;
? ?
? ? public class CPFInput extends TextInput
? ? {
? ? ? ? public function CPFInput()
? ? ? ? {
? ? ? ? ? ? super();
? ? ? ? ? ? this.restrict = “0-9.\-”;
? ? ? ? }
? ? }
}

Criamos a nossa classe CPFInput e criamos uma restrição para digitar apenas os valores necessários.

Utilizando a nossa classe.

Quando vamos utilizar a classe CPFInput, ainda é possivel determinar um valor para a propriedade restrict. Caso haja mudanças nessa propriedade a nossa classe irá perder todo o sentido, e não será mais útil no contexto aplicado. Para evitar isso vamos adicionar a metadata Exclude.

Utilizando a metadata.

PLAIN TEXT

CODE:

package
{
? ? import spark.components.TextInput;
? ?
? ? [Exclude(name="restrict", kind="property")]
? ? public class CPFInput extends TextInput
? ? {
? ? ? ? public function CPFInput()
? ? ? ? {
? ? ? ? ? ? super();
? ? ? ? ? ? this.restrict = “0-9.\-”;
? ? ? ? }
? ? }
}

Em sintaxe: [Exclude(name="nome da propriedade, evento, efeito ou estilo", kind="property,event,effect,style")]
Nesse passo, adicionamos a metadata Exclude para esconder a propriedade restrict.

Verificando as mudanças.

Agora não é mais possível ver a propriedade restrict quando utilizamos o componente via MXML.

Informações adicionais.

Apesar da metadata Exclude “esconder” a propriedade, o que o Flash Builder faz é simplesmente removê-la do auto-complete, caso o desenvolvedor digite a propriedade e atribua um valor a ela, o processo funcionará normalmente. Isso acontece pois não temos como alterar o modificador de acesso da propriedade, e somente “mascarar” o seu acesso.

Mar 13

Metadata DefaultProperty

Escrito por DClick Team em 2009, 4, 6, Actionscript, Adobe, app, AR, blog, class, classe, Componente, Componentes, components, DataProvider, exemplo, Flex, function, ide, IE, if, int, layout, library, MXML, NaN, O, on, padrão, pt, RIA, Ria’s Geral, spark, tag, TAT, Twitter, UI, XML, XP @ 03 13th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários

Uma das grandes vantagens de utilizar o MXML é ter a facilidade de compor os componentes através da utilização de tags e atributos. Basicamente todo arquivo MXML segue a estrutura:

PLAIN TEXT

CODE:

“valor”>
? ?
? ? ? ?
? ?

Entender essa estrutura é simples, estamos setando novos valores para as propriedades do nosso componente base. Em exemplo prático temos:

PLAIN TEXT

CODE:

“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″>
? ?
? ? ? ?
? ?
? ?
? ?
? ?

Saber que uma instância da classe VerticalLayout está sendo atribuída a propriedade layout da classe Application é fácil, mas onde estamos atribuindo a instância da classe Group uma vez que ela não segue a estrutura base do MXML?

Para facilitar a utilização dos componentes no MXML, a Adobe criou a metadata DefaultProperty que, assim como o nome diz, determina uma propriedade a ser utilizada como padrão no MXML caso não haja sua especificação na composição do componentes, isso explica como conseguimos atribuir uma instância da classe Group em uma determinada propriedade da classe Application sem a necessidade de declará-la.

Vamos então criar um exemplo funcional de um componente com a metadata DefaultProperty?

Utilizando a metadada.

PLAIN TEXT

CODE:

package
{
? ? import spark.components.DropDownList;
? ?
? ? [DefaultProperty("prompt")]
? ? public class NewDropDownList extends DropDownList
? ? {
? ? ? ? public function NewDropDownList()
? ? ? ? {
? ? ? ? ? ? super();
? ? ? ? }
? ? }
}

Em sintaxe: [DefaultProperty("propriedade")]
No exemplo estou extendendo a classe DropDownList e apenas determinando que sua propriedade default é a propriedade prompt.

Utilizando a Classe DropDownList.

PLAIN TEXT

CODE:

? ?
? ? ? ? Selecione um item
? ?

Na classe DropDownList precisamos abrir a tag da propriedade prompt antes de atribuir o seu valor.

Utilizando a Classe NewDropDownList.

PLAIN TEXT

CODE:

? ? Selecione um item

Na nossa classe recém criada não precisamos abrir a tag da propriedade, pois avisamos o compilador que nossa propriedade padrão é o prompt, logo, qualquer valor atribuído diretamente a tag do componente base será direcionado a propriedade padrão.

Não posso deixar de comentar que a metadata DefaultProperty adicionada na classe NewDropDownList sobrescreveu a DefaultProperty dataProvider que ele herda da classe SkinnableDataContainer, logo muito cuidado na hora de utilizar essa metadata em componentes extendidos!

Mar 12

Metadata ArrayElementType

Escrito por DClick Team em 1, 4, 6, action, Actionscript, Adobe, AR, blog, class, classe, Componente, Componentes, err, erro, exemplo, Flex, for, if, image, int, lista, mg, MXML, Number, O, on, pt, RIA, Ria’s Geral, SDK, string, TAT, Twitter, UI, XML @ 03 12th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários

Em sintaxe: [ArrayElementType("pacote.Classe")]

Verificando o erro de compilação para objetos de diferentes tipos.

Na imagem estou tentando adicionar um objeto do tipo String na minha Array de Numbers.

Projeto compilado.

No caso da minha Array ser preenchida corretamente com os elementos do tipo associado, a compilação não gera erro.

Informações adicionais.

Apesar do ganho que temos na verificação em tempo de compilação, a metadata ArrayElementType não é válida quando acessamos o array via ActionScript, por isso a utilizamos quando criamos componentes visuais e não em objetos de negócio como fiz no meu exemplo.

Mar 11

States Flash Builder

Escrito por Felipe Borella em 1, 2009, 4, 6, Adobe, app, AR, BI, Bindable, collection, Componente, DataProvider, event, events, exemplo, flash, flash builder, Flex, Flex 3, for, function, handle, html, ide, IE, if, Iniciando, label, library, mudanças, MXML, O, on, Pessoal, problema, problemas, pt, Ria’s Geral, spark, state, TAT, TextInput, UI, XML @ 03 11th, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários

Dae pessoal.

Estou iniciando ainda no FX4 ou Flash Builder como queiram, então tenho minhas dificuldades ainda, mas é muito bom o resultado que estou vendo. Esse dias me deparei com alguns problemas com states que no Flex 3 eu fzia algo do tipo:

Fx3

<mx:State name="logonState">
	<mx:SetProperty target="{textInputNome}" name="visible" value="true" />

Bom as mudanças para o FX4 foram muitas onde no próprio componente adicionamos essas propriedades.
Logo no inicio fiquei de cara achava mais dificil sei la, mas achei que é algo que melhorou muito, ou seja,
sim ficou melhor ja me acostumei e achei mais “clean” o negocio.

veja o exemplo que fiz abaixo:
FX4

e o Codigo fica esse

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"
			   currentState="state1" viewSourceURL="srcview/index.html">
	<fx:Declarations>
?
	fx:Declarations>
	<fx:Script>
		[CDATA[
			import mx.collections.ArrayCollection;
?
			import spark.events.IndexChangeEvent;
			[Bindable]
			private var arrayCollection:ArrayCollection=new ArrayCollection([
				{prop:'state1'},{prop:'state2'}]);
?
?
?
?
			protected function comboBox_changeHandler(event:IndexChangeEvent):void
			{
				this.currentState=comboBox.selectedItem.prop;
			}
?
		]]>
	fx:Script>
	<s:states>
		<s:State name="state1"/>
		<s:State name="state2"/>
	s:states>
	<mx:Form>
		<mx:FormItem>
			<s:TextInput id="textInput1" text.state1="FELIPE" text.state2="BORELLA"/>
		mx:FormItem>
		<mx:FormItem>
			<s:TextInput id="textInput2" text.state1="BORELLA" text.state2="FELIPE"/>
		mx:FormItem>
		<mx:FormItem>
			<s:ComboBox id="comboBox" labelField="prop" dataProvider="{arrayCollection}"
						change="comboBox_changeHandler(event)" selectedIndex="0"/>
		mx:FormItem>
	mx:Form>
s:Application>

Felipe!

Mar 7

TextArea com Linhas.

Escrito por Felipe Borella em 1, 2009, 4, 6, Adobe, app, AR, back, bar, Blend, blog, Blogs, boolean, break, chrome, class, classe, classes, Componente, components, control, err, event, EventListener, events, exemplo, flash, Flex, fonts, for, function, gc, html, ide, IE, if, int, internet, label, layout, library, MXML, NaN, Number, O, on, override, pt, Ria’s Geral, Scroll, spark, state, string, strings, Stroke, TAT, UI, UML, update, XML, XP @ 03 7th, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários

Daeee galera!
Esse port é para mostra um Skin bacana que catei na internet.
Original em http://flexdevtips.blogspot.com/2010/07/spark-textarea-with-line-numbers.html

Vamos ao Skin:

xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:mx="library://ns.adobe.com/flex/mx"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
			 creationComplete="created(event)"
			 alpha.disabled="0.5"
			 blendMode="normal">
?
	<fx:Metadata>
		[CDATA[
		[HostComponent("spark.components.TextArea")]
		]]>
	fx:Metadata>
?
	<fx:Script fb:purpose="styling">
		private var lineBreakChanged:Boolean;
?
		private var paddingChanged:Boolean;
?
		private var verticalAlignChanged:Boolean;
?
		/* Define the skin elements that should not be colorized.
		For text area, the skin itself is colorized but the individual parts are not. */
		static private const exclusions:Array = ["background", "scroller"];
?
		/**
		 * @private
		 */
		override public function get colorizeExclusions():Array {
			return exclusions;
		}
?
		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
		static private const contentFill:Array = ["bgFill"];
?
		/**
		 *  @private
		 */
		override public function get contentItems():Array {
			return contentFill
		}
		;
?
		/**
		 *  @private
		 */
		override protected function commitProperties():void {
			super.commitProperties();
?
			if (lineBreakChanged) {
				updateStringStyle("lineBreak");
				lineBreakChanged = false;
?
				if (textDisplay != null) {
					if (getStyle("lineBreak") == "explicit") {
						if (textDisplay.percentWidth == 100) {
							textDisplay.width = NaN;
						}
					} else if (textDisplay.percentWidth != 100) {
						textDisplay.percentWidth = 100;
					}
				}
			}
			if (paddingChanged) {
				updatePadding();
				paddingChanged = false;
			}
			if (verticalAlignChanged) {
				updateStringStyle("verticalAlign");
				verticalAlignChanged = false;
			}
		}
?
		/**
		 * @private
		 */
		override protected function initializationComplete():void {
			useChromeColor = true;
			super.initializationComplete();
		}
?
		/**
		 *  @private
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			if (getStyle("borderVisible") == true) {
				border.visible = true;
				shadow.visible = true;
				background.left = background.top = background.right = background.bottom = 1;
				scroller.left = scroller.top = scroller.right = scroller.bottom = 1;
			} else {
				border.visible = false;
				shadow.visible = false;
				background.left = background.top = background.right = background.bottom = 0;
				scroller.left = scroller.top = scroller.right = scroller.bottom = 0;
			}
?
			borderStroke.color = getStyle("borderColor");
			borderStroke.alpha = getStyle("borderAlpha");
?
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
?
		/**
		 *  @private
		 */
		private function updatePadding():void {
			if (!textDisplay)
				return;
?
			// Push padding styles into the textDisplay
			var padding:Number;
?
			padding = getStyle("paddingLeft");
			if (textDisplay.getStyle("paddingLeft") != padding)
				textDisplay.setStyle("paddingLeft", padding);
?
			padding = getStyle("paddingTop");
			if (textDisplay.getStyle("paddingTop") != padding)
				textDisplay.setStyle("paddingTop", padding);
?
			padding = getStyle("paddingRight");
			if (textDisplay.getStyle("paddingRight") != padding)
				textDisplay.setStyle("paddingRight", padding);
?
			padding = getStyle("paddingBottom");
			if (textDisplay.getStyle("paddingBottom") != padding)
				textDisplay.setStyle("paddingBottom", padding);
		}
?
		/**
		 *  @private
		 */
		private function updateStringStyle(styleName:String):void {
			if (!textDisplay)
				return;
?
			// Push style into the textDisplay
			var style:String;
?
			style = getStyle(styleName);
			if (textDisplay.getStyle(styleName) != style) {
				textDisplay.setStyle(styleName, style);
			}
		}
?
		/**
		 *  @private
		 */
		override public function styleChanged(styleProp:String):void {
			var allStyles:Boolean = !styleProp || styleProp == "styleName";
?
			super.styleChanged(styleProp);
?
			if (allStyles || styleProp.indexOf("lineBreak") == 0) {
				lineBreakChanged = true;
				invalidateProperties();
			}
			if (allStyles || styleProp.indexOf("padding") == 0) {
				paddingChanged = true;
				invalidateProperties();
			}
			if (allStyles || styleProp.indexOf("verticalAlign") == 0) {
				verticalAlignChanged = true;
				invalidateProperties();
			}
		}
	fx:Script>
?
	<fx:Script>
		[CDATA[
			import mx.events.FlexEvent;
?
			/**
			 * @private
			 */
			private static const focusExclusions:Array = ["textDisplay"];
?
			/**
			 *  @private
			 */
			override public function get focusSkinExclusions():Array {
				return focusExclusions;
			}
?
			protected function created(event:FlexEvent):void {
				updateLineNumbers(event);
				hostComponent.addEventListener(FlexEvent.UPDATE_COMPLETE, updateLineNumbers, false, 0, true);
			}
?
			private var _lines:int = 0;
?
			private function updateLineNumbers(event:Event):void {
				var lines:int = textDisplay.mx_internal::textContainerManager.numLines;
				if (lines != _lines) {
					var old:int = _lines;
					this._lines = lines;
					var diff:int = lines - old;
					var linesString:String;
					var i:int;
					if (diff > 0) {
						linesString = lineNumbersLabel.text;
						for (i = old + 1; i <= _lines; i++) {
							if (i > 1) {
								linesString += "n";
							}
							linesString += i.toString(10);
						}
					} else {
						linesString = "";
						for (i = 1; i <= _lines; i++) {
							if (i > 1) {
								linesString += "n";
							}
							linesString += i.toString(10);
						}
					}
					lineNumbersLabel.text = linesString;
				}
			}
		]]>
	fx:Script>
?
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	s:states>
?
	
	
	<s:Rect id="border"
			bottom="0"
			left="0"
			right="0"
			top="0">
		<s:stroke>
			
			<s:SolidColorStroke id="borderStroke"
								weight="1"/>
		s:stroke>
	s:Rect>
?
	
	
	
		
			
			
		
	
?
	
	
	
		
			
		
	
?
	
	
		
			
				
			
			
			
				
					
				
			
			
				
					
				
			
		
?
		
			
			
		
	
?

E ao Uso do mesmo no componente

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" width="100%" height="100%">
	<fx:Declarations>
?
	fx:Declarations>
?
	<s:TextArea width="400" height="200" skinClass="br.com.fborella.SkinTextArea">
	s:TextArea>
s:Application>

Lembre-se de colocar o arquivo no seu pacore e ajustar o mesmo no skinClass

Exemplo:

Abraço

Felipe

Mar 7

BlazeDS – do básico ao avançado – Parte 1

Escrito por DClick Team em 1, 2009, 4, 6, action, Actionscript, Adobe, AMF, apache, app, AR, arte, auto, BI, Blazeds, blog, botão, class, classe, cliente, código, código fonte, Componente, componente flex, Componentes, comunicação, configuração, control, Controls, Crossdomain, custom, dados, demo, developer, Diversos, Documentação, Download, Eclipse, err, erro, event, Evento, events, exemplo, Exemplos, falha, flash, Flex, fonte, for, framework, Frameworks, function, Galileo, git, handle, Hibernate, HTTPService, ide, IE, if, image, instalação, int, Java, library, LOB, Messaging, mg, MXML, NaN, O, on, opensource, Outros, Plugin, problema, problemas, pt, reference, referencia, Remoting, RIA, Ria’s Geral, runtime, screen, Screencast, screencasts, Segurança, Sem categoria, server, serviço, Serviços, servidor, site, spark, Spring, string, tag, TAT, Tecnologia, Twitter, UI, uint, web, Webservice, window, XML @ 03 7th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários

BlazeDS é uma aplicação Java opensource mantida pela Adobe, sob licensa GNU Lesser General Public License, Version 3 (LGPL v3), que fornece um conjunto de serviços, todos sobre o protocolo HTTP(Hyper Text Transfer Protocol), para permitir uma aplicação Flex fazer chamadas a serviços remotos Java, retornando os dados tanto de forma assíncrona como em tempo real.

Por utilizar o formato de dados binário chamado AMF(Action Message Format) para a serialiazação e deserialização de dados, a comunicação entre uma aplicação Flex e o servidor Web se torna muito otimizada. Existem estudos feitos comparando as diversas tecnologias, como o Jamesward, mostrando o potencial do AMF.

Outra grande vantagem quando usamos o BlazeDS é a facilidade de ter classe Java automaticamente convertida para uma classe ActionScript e vice-versa.

O BlazeDS pode ser baixado do site da Adobe em dois formatos:

Turnkey – Versão que já vem com exemplos e servidor tomcat pré configurado
Binary – Versão com os binários

Você pode optar também por fazer o download do código fonte. A documentação também está disponível neste link.

Entendendo os arquivos de configuração do BlazeDS
A estrutura de arquivos do BlazeDS é bem simples, quando descompactamos o blazeds.war, presente na versão binária, podemos ver a seguinte estrutura:

Devemos nos atentar a duas pastas. A pasta lib, que contém todos os jars necessários, e a pasta flex, que contém todos os arquivos de configuração do BlazeDS. Vamos ver o que cada arquivo significa:

services-config.xml: É neste arquivo que estão as principais configurações do BlazeDS como segurança, logging, serviços disponíveis (Canais), fábricas para a integração com Frameworks Java como Spring e EJB3 e as referências para os outros três arquivos de configuração.
remoting-config.xml: É nesse arquivo que iremos configurar os serviços Java para serem “consumidos” pela aplicação Flex. Sempre quando configuramos este arquivo, iremos trabalhar com o componente Flex chamado RemoteObject.
message-config.xml: Aqui é configurado tudo o que for relacionado com mensageria, sempre necessário quando trabalhamos com os componentes Flex Consumer e Producer. Um exemplo da utilização desta tecnologia seria fazer um bate bapo, ou até mesmo aplicações colaborativas, onde é desejável a iteração simultânea de diversos usuários.
proxy-config.xml: Além da possibilidade de utilizarmos o componente RemoteObject, o Flex disponibiliza mais duas formas de integração: O HTTPService e o WebService. Porém, por questões de segurança, os serviços só podem ser chamados quando os mesmos estão no mesmo domínio que a aplicação, ou que exista uma configuração específica que permita um cliente Flex fazer a consulta (esta configuração é feita por um arquivo chamado crossdomain.xml e está sempre no servidor onde está o serviço chamado). Caso uma das duas condições acima não seja satisfeita, deveremos utilizar o BlazeDS como proxy , e é ai que configuração deste arquivo se torna necessário.

Criando o seu primeiro projeto com o BlazeDS

Para criar o projeto iremos precisar de:

Feito os downloads e a instalação do Eclipse e FlashBuilder, vamos iniciar o FlashBuilder para criar o projeto.
Antes de criar o projeto, vamos configurar o Tomcat:

Nas preferências do Eclipse, vá em Server — Runtime Environments e clique em Add…
Na pasta Apache selecione Apache Tomcat v6.0 e clique em Next
Selecione a pasta onde você descompactou o Tomcat e clique em Finish

Feito a configuração do Tomcat, vamos criar o projeto:

Vá em File – New – Flex Project
Preencha os dados do primeiro passo como na imagem abaixo e clique em Next
Neste passo vamos configurar os dados do servidor. Deixe tudo configurado como na imagem e clique em Next

Para selecionar o “Target Runtime”, clique em New e depois escolha o Apache Tomcat 6, como na imagem abaixo.
No último passo não será necessário mudar nada, clique em Finish

Agora vamos criar a classe Java que terá o serviço para retornar a string “HelloBlazeDS”

Crie uma classe Java br.com.dclick.service.RemotingService
Crie o serviço:

1
2
3
4
5
6
7
8

package br.com.dclick.service;
public class RemotingService {

? ? public String sayHello() {
? ? ? ? return “HelloBlazeDS”;
? ? }
? ?
}

Agora vamos configurar o BlazeDS para disponibilizar o serviço que acabamos de criar.

Abra o arquivo remoting-config.xml que está na pasta WebContent/WEB-INF/flex

Para que seja possível chamar os métodos da classe Java, precisamos configurar um destination. Isso é necessário para cada classe Java.
O arquivo fica assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

xml version=“1.0″ encoding=“UTF-8″?>
“remoting-service” class=“flex.messaging.services.RemotingService”>
? ?
? ? ? ? “java-object”
? ? ? ? ? ? class=“flex.messaging.services.remoting.adapters.JavaAdapter”
? ? ? ? ? ? default=“true” />
? ?
? ?
? ? ? ? “my-amf” />
? ?
? ? “blazeServices”>
? ? ? ? ? ? ? ? ? ? br.com.dclick.service.RemotingService
? ? ? ? ? ?

Vamos colocar na aplicação a chamada para o servidor.

A primeira coisa que precisamos fazer é configurar o RemoteObject. Fazer isso é muito simples:

1
2
3
4
5

? ? ? ?
? ? ? ? “services” destination=“blazeServices”
? ? ? ? ? ? ? ? ? ? ? ? result=“services_resultHandler(event)”
? ? ? ? ? ? ? ? ? ? ? ? fault=“services_faultHandler(event)” />
? ?

Alguns detalhes:

* Perceba que a propriedade destination aponta para o destination que configuramos no arquivo remoting-config.xml

* Precisamos declarar um id para poder referenciar o RemoteObject

* Adicionamos um ResultHandler para tratar o resultdo do serviço

* Adicionamos um FaultHandler para tratar a falha do serviço

Os Handlers ficam assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

? ? ? ?
? ? ? ? [CDATA[
? ? ? ? ? ? import mx.controls.Alert;
? ? ? ? ? ? import mx.rpc.events.FaultEvent;
? ? ? ? ? ? import mx.rpc.events.ResultEvent;

? ? ? ? ? ? protected function services_resultHandler(event:ResultEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? Alert.show(event.result.toString());
? ? ? ? ? ? }

? ? ? ? ? ? protected function services_faultHandler(event:FaultEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? Alert.show(event.fault.message);
? ? ? ? ? ? }

? ? ? ? ]]>
? ?

Alguns detalhes:

* A propriedade result do evento ResultEvent vai conter o resultado do serviço. No nosso caso o serviço retorna uma String “HelloBlazeDS”

* A propriedade fault do evento FaultEvent contém os detalhes do erro.

A última coisa é chamar o serviço. Vamos fazer isso no evento creationComplete, como segue:

1
2
3
4

? ? ? ? protected function application1_creationCompleteHandler(event:FlexEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? services.sayHello();
? ? ? ? ? ? }

A aplicação inteira fica assim:

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

? ? ? ? xml version=“1.0″ encoding=“utf-8″?>
“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=“application1_creationCompleteHandler(event)”>
? ?
? ? ? ? [CDATA[
? ? ? ? ? ? import mx.controls.Alert;
? ? ? ? ? ? import mx.events.FlexEvent;
? ? ? ? ? ? import mx.rpc.events.FaultEvent;
? ? ? ? ? ? import mx.rpc.events.ResultEvent;

? ? ? ? ? ? protected function services_resultHandler(event:ResultEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? Alert.show(event.result.toString());
? ? ? ? ? ? }

? ? ? ? ? ? protected function services_faultHandler(event:FaultEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? Alert.show(event.fault.message);
? ? ? ? ? ? }

? ? ? ? ? ? protected function application1_creationCompleteHandler(event:FlexEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? services.sayHello();
? ? ? ? ? ? }

? ? ? ? ]]>
? ?
? ?
? ? ? ? “services” destination=“blazeServices”
? ? ? ? ? ? ? ? ? ? ? ? result=“services_resultHandler(event)”
? ? ? ? ? ? ? ? ? ? ? ? fault=“services_faultHandler(event)” />
? ?

Agora só falta fazer o deploy da aplicação e subir o servidor.

Vá em Window – Show View – Other. Na janela que abrir, digite Servers e clique OK
Na view Servers, clique com o botão direito em Tomcat v6.0 e selecione Add and Remove…
Selecione a aplicação HelloBlazeDS e clique em Add e depois Finish
Na view Servers, clique com o botão direito em Tomcat v6.0 e clique em Run