Flash Builder 4.5/ Flex/ Flex 4.5

Corretor ortográfico em aplicações Flash/Flex/AIR

Já pensou em ter uma aplicação que possa corrigir erros ortográficos em alguns aplicativos, por exemplo, aplicações de edição de textos públicos, licitatórios, organizadores de documentos virtuais, edição de textos, em fim uma gama de aplicações são pertinentes ao assunto. E A Adobe tem há algum tempo uma biblioteca gratuita que você pode usar para adicionar essa funcionabilidade ao seu aplicativo.

A Squiggly, além de gratuita ela se baseia em dicionário público e open-source que é bastante utilizado nos navegadores Chrome, Firefox e a suite de office open-source Open-Office. Tem alguns bugs conhecidos, mais nada que lhe impeça de criar essa função em seu aplicativo.

E cá entre nós, praticamente 50% dos sistemas não tem um corretor ortográfico em campos como comentários adicionais, preenchimento de dados específicos como descrição de produtos, e acaba afetando, ou vai dizer que todo o texto que seu sistema controla é feito pelo Word?

Vamos lá fazer um exemplo.

Passo 1 – Criar um projeto
Passo 2 – Baixar o SWC do Squiggly.
Passo 3 – Adicionar o SWC’s do Squiggly no diretório lib de seu projeto. Os SWCs você vai encontrar direto na pasta libs do arquivo .zip que você baixou. Veja como ficou o meu abaixo.
squiggly

Agora, o resto é fácil. Veja um exemplo abaixo que criei. Lembre-se estou usando o Flex 4.5, funciona com Flash, AIR 2.0+ e em projetos Actionscript 3.0 puro. No .zip que você baixar vai encontrar vários exemplos.

Publicador

<?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">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|Form s|FormItem
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");
		}
		s|Form s|FormHeading
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");
		}
	</fx:Style>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:Form x="170" y="45" width="487" height="486">
			<s:FormItem label="Título do post:" width="100%">
				<s:TextInput id="campoTitulo" width="100%"/>
			</s:FormItem>
			<s:FormItem label="Post:" width="100%">
				<s:TextArea id="campoCorpoTexto" width="100%" height="300">
 
				</s:TextArea>
			</s:FormItem>
			<s:Button width="135" height="35" label="Publicar" fontWeight="bold"/>
	</s:Form>
</s:Application>

Ok, até ai tudo bem, o problema agora é o seguinte, por padrão o Squiggly trás apenas o idioma en_US, para o corretor, o que nos faz pesquisar no Google e tentar achar outros idiomas, já que é gratuito e eu mencionei OpenOffice, então facilmente eu consigo esse dicionário em pt_BR. Ah! achei.

Com o dicionário em mãos, eu vou criar a seguinte estrutura em meu projeto.

squiggly_pt_br

Veja que tem a estrutura en_US, pt_BR dentro da pasta dictionaries, essas pastas por padrão estão dentro do pacote que você baixou do squiggly. Você vai encontrar ela (en_US) dentro da pasta src.

Agora o que você precisa fazer é mapear essa nova biblioteca que você adicionou(pt_BR) ao AdobeSpellingConfig.xml que está no projeto, ele tem o atual código.

<?xml version="1.0" encoding='UTF-8'?>
<spellingConfig>
  <languageResource language="English" languageCode="en_US" ruleFile="dictionaries/en_US/en_US.aff" dictionaryFile="dictionaries/en_US/en_US.dic"/>
</spellingConfig>

Troque por essa:

<?xml version="1.0" encoding='UTF-8'?>
<spellingConfig>
  <languageResource language="English" languageCode="en_US" ruleFile="dictionaries/en_US/en_US.aff" dictionaryFile="dictionaries/en_US/en_US.dic"/>
  <languageResource language="Português Brasil" languageCode="pt_BR" ruleFile="dictionaries/pt_BR/pt_BR.aff" dictionaryFile="dictionaries/pt_BR/pt_BR.dic"/>
</spellingConfig>

Adicione quantos idiomas você quiser. Agora voltamos ao código de nossa aplicação.

Eu peguei o código e apliquei as dependências do Squiggly. Então, veja como ficou.

<?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="startMeuCorretor(event)">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|Form s|FormItem
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");
		}
		s|Form s|FormHeading
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import com.adobe.linguistics.spelling.SpellUI;
			import com.adobe.linguistics.spelling.framework.ResourceTable;
			import com.adobe.linguistics.spelling.framework.SpellingConfiguration;
 
			import mx.events.FlexEvent;
 
			protected function startMeuCorretor(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				var dicionarios:ResourceTable = new ResourceTable();
			//opcional	dicionarios.setResource("en_US", {rule:"dicionaries/en_US/en_US.aff", dict:"dicionaries/en_US/en_US.dic"});
				dicionarios.setResource("pt_BR", {rule:"dicionaries/pt_BR/pt_BR.aff", dict:"dicionaries/pt_BR/pt_BR.dic"});
				SpellingConfiguration.resourceTable = dicionarios;
 
			}
 
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:Form x="170" y="45" width="487" height="486">
			<s:FormItem label="Título do post:" width="100%">
				<s:TextInput id="campoTitulo" width="100%" creationComplete="SpellUI.enableSpelling(campoTitulo, 'pt_BR');"/>
			</s:FormItem>
			<s:FormItem label="Post:" width="100%">
				<s:TextArea id="campoCorpoTexto" width="100%" height="300" creationComplete="SpellUI.enableSpelling(campoCorpoTexto,'pt_BR')">
 
				</s:TextArea>
			</s:FormItem>
			<s:Button width="135" height="35" label="Publicar" fontWeight="bold"/>
	</s:Form>
</s:Application>

Resultado final:

squiggly_post

Com isso, basta publicar sua aplicação com todas as dependências de dicionários e arquivos e sua aplicação estará pronta para corrigir os assassinos de palavras portuguesas.

Aproveita, é simples, legal de implementar. Até o próximo post.

Flash Builder/ Flash Builder 4.5/ Flex/ Flex para Gerentes

Criando aplicações Flex com o SAP netweaver gateway

O futuro do Flex não está reservado apenas ao mundo Mobile, com quase todas as vagas preenchidas para o próximo curso e lançamento da RIACycle(www.riacycle.com/flexmobile) a Adobe recentemente anunciou uma parceria inédia com a SAP.

A SAP é amplamente utilizada no mercado global de grandes corporações, repito, GIGANTES corporações usam o SAP.

No SaPPhire Now, principal evento da SAP, a Adobe lançou um protocolo de integração junto ao netweaver gateway que é também um produto novo da SAP para navegação e consumo dos dados que são gerados pelo NetWeaver , versão 7.0.2 acima, que já possui suporte ao gateway.



See how to build a simple Flex tablet application using SAP data accessed through the SAP NetWeaver Gateway. (9:58)

Vale muito a pena você assistir o video abaixo onde mostra a integração já nativa no Flash Builder Premium para uma nova release que sai em Junho, já com tal recurso. Visite também a página no Adobe Labs falando sobre essas aplicações Flex e SAP netweaver.

AIR 2.0/ Dicas/ Dicas e truques/ Flex/ Flex Builder 4/ Livros/ RIA

Livro Flex 4 Avançado

A editora Novatec, recentemente lançou o livro Flex 4 Avançado, que conta com um excelente conteúdo programático e uma ótima tradução.

Se você quer aprender mais a fundo o Adobe Flex 4 e Adobe AIR, você deve comprar esse livro, nós indicamos por que avaliarmos o livro técnicamente, e ele passou pela nossa análise.

Analisamos pontos de referencia, técnicas e macetes já dados no livro em Inglês e querendo ou não acabam se perdendo com traduções mal feitas. Esse livro me surpreendeu por que sua tradução está muito bem feita, e preservou também esses macetes que salvam em horas turbulentas.

O melhor disso tudo é que não só avaliamos o livro como também conseguimos um desconto para todos os leitores desse blog e também a comunidade Flex Brasileira.

Valendo até 31/12/2011 quando você comprar esse livro ou qualquer outro livro no site da Novatec, você ganha 20% de desconto inserindo o código promocional FLEXBRA

Estamos sorteando 1 cópia desse livro Flex 4 Avançado, veja meu Tweet. E também siga também a @novateceditora no Twitter, eles fazem diariamente outras promoções.

AIR Mobile/ Flex/ Flex 4/ Flex Builder 4/ Flex Mobile Framework/ iPad/ Iphone

Novo curso da RIACycle Flex para dispositivos móveis

Como vocês viram no último post a Adobe recentemente lançou o Flex 4.5 e Flash Builder 4.5 para criação de aplicações móveis usando o Flex.

Criação de aplicações móveis com Flex tem sido um debate pertinente em nosso dia-a-dia, assim como várias palestras.
bannerflexmobile

E através disso, acabamos de lançar o curso Flex para dispositivos móveis na RIACycle onde eu sou o instrutor.

Participe, são vagas limitadas.

Flex/ Flex 4/ Flex Builder 4/ HTML 5

Flex 4 e Geolocation usando no navegador do seu desktop

Mundo moderno, Web moderna, querendo ou não você vai acabar criando ou vendo em algum site, a integração da sua localização com o aplicativo, e isso acaba virando regra em algumas opções que temos por ai. Imagine você ter formulários mais inteligentes, que ao invés de pegar o endereço completo do cliente, você pega sua latitude, longitude e o número da residência e complemento. Bingo! Você cativa inúmeros usuários.

O HTML 5, ou melhor HTML, tem uma API em Javascript padronizada pela W3C, que possui essa funcionabilidade, pegar sua localização através de IP ou registro do seu ponto de acesso wi-fi caso esteja cadastrado na base do NIC ou coisa parecida.

Essa API ao menos funciona nos seguintes navegadores (Firefox 3.5+, Chrome 8+, IE9+,Opera 10.6+,Safari 5), conseqüentemente se seu usuário tiver um navegador anterior a essas versões, peça-o gentilmente para atualizar, assim você consegue usar essa funcionabilidade.

Infelizmente, o Flash Player ainda não tira proveito disso. Logo em breve acredito que ele utilize esse artifício. Hoje o Adobe AIR 2.5 possui API pronta para isso, só que para celular, para Desktop você tem que fazer um workaround, ou no popular brasileiro, da-se um jeito.

O Flash Player comunica-se muito bem com o Javascript, e vice-versa. Por que não usar esse canal de comunicação e criarmos nosso aplicativo Flex que tire proveito da API do navegador já padronizada e usar a classe External Interface do Flash Player para pegar a latitude, longitude e por ai vai.

Mão na massa, ou melhor no código!

Supondo que você já tenha o Flash Builder devidamente instalado. você pode seguir o passo-a-passo.

1. Crie um novo Projeto em seu Flash Builder
2. geo

Analise a extrutura de nosso projeto, veja que existe uma pasta chamada html-template, abra ela e você vai ver que existe 3 arquivos e 1 diretório, index.template.html, playerProdutInstall.swf, swfobject.js e o diretório history

O que nos interesse nesse momento é o index.template.html, caso você esteja usando o Flash Builder puro sem nenhum editor de HTML, você pode clicar sobre o botão direito do mouse em cima do arquivo, escolher a opção Open With- > Text Editor.

Como a publicação do Flash Builder é inteiramente dinâmica, queremos que nossa função de pegar o geolocation seja dinamica. Ou melhor, respeite a execução do projeto sempre que você der um build ou run.

3. Próximo passo é criar a função em javascript nesse arquivo de index.template.html para pegar o geolocation.

Para inserir o código em Javascript, coloque no intervalo .

        

Criei 2 funções, 1 que fará a requisição, para o navegador, e automaticamente ele vai pedir ao seu usuário para permitir ou não o uso de sua posição para aquela aplicação em questão. Aparecendo um pequeno alerta do navegador. É interessante notar ou avisar ao seu usuário sobre isso, por que o alerta de pedido de geolocation é um alerta similar a barra de lembrar senha do navegador, e poucos podem não prestar atenção a essa barra e ficar sem saber o que fazer em algum determinado momento em sua aplicação.

geo2

Preste atenção na função document.getElementById, eu uso o js para aplicar o envio automático da minha localização através da passagem de parametro do meu swf, aplicando a sintaxe básica do SWFObject.

Não esqueça de marcar a opção , caso contrário ele não vai enviar a posição ou se comunicar com o js.
Por que alterar o index.template.html?

Por que sempre que você publica ou executa o Run no Flash Builder ele gera novamente um arquivo de html, swf, js sempre. Então se você altera ele uma única vez no template, você não precisará fazer isso sempre.

Okay, feito isso. Vamos ao Flex.

Crie uma nova Classe e estenda da classe EventDispatcher, eu chamei minha classe de GeoLocation.as.

package
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.external.ExternalInterface;

	public class GeoLocation extends EventDispatcher
	{

		private var _lat:String = "";
		private var _long:String = "";


		public function GeoLocation()
		{
			super();
			//adiciono primeiro o callback
			ExternalInterface.addCallback("enviarLatLong",geoInfo);
			// Chamo posteriormente o requisitarGeo
			ExternalInterface.call("requisitarGeo");
		}


		[Bindable(event="change")]
		public function get latitude():String
		{
			return _lat;
		}

		public function set latitude(value:String):void
		{
				_lat = value;
		}

		[Bindable(event="change")]
		public function get longitude():String
		{
			return _long;
		}

		public function set longitude(value:String):void
		{
				_long = value;

		}

		private function geoInfo(lati:String,longi:String):void
		{
			_lat = lati;
			_long = longi;
			dispatchEvent(new Event(Event.CHANGE));
		}

	}
}

Com a classe GeoLocation, eu consigo agora pegar as informações de localização, embora eu não tratei nenhum erro, é importante você notar isso quando for implementar, lembrando que essa classe não é visível, ela é apenas para exemplo.

Feito isso, como implementar a classe na sua aplicação Flex?

Simples, dentro do tag , eu instancio a classe, já que a chamada do processo de externo chamei no construtor. Então veja como podemos usar.




	
		
		
	
		
				
		

		
		


E voilá, temos as coordenadas estabelecidas.

geo3

Ok, com a latitude e longitude eu consigo usar o Google Maps for Flash e criar um mapa que aponte.

AMFPHP/ Flex/ Flex 4

Flex 4 com PHP – Primeira Parte

O framework Flex tem uma limitação, ele não comunica-se diretamente com coleções de dados e para isso você precisa de uma linguagem de back-end como php, coldfusion,python, Java, etc para comunicar e trocar dados entre o banco e o lado cliente(flex).

Tem gente que acha isso super complicado, por que envolve uma série de fatores como, configuração, mapeamento, conhecimento da API e tradutores. Na verdade todos são ingredientes chaves para você colocar seu aplicativo Flex em contato com o mundo exterior dos bancos de dados.

A configuração que me refiro é o famoso arquivos services-config.xml onde você vai mapear tudo que for preciso de canais, channels para que os dados trafeguem entre o Flex, php, tradutor e banco de dados em um processo assincrono.
Essa configuração de uma certa forma ajuda a encaixar os dados em um trilho, só que você vai precisar mapear os objetos para deixar tudo bonito e nos conformes como assim voce costuma fazer, deixar organizado a budega.
A api para fazer isso é tudo muito simples, basta você saber usar o RemoteObject,ResultEvent,FaultEvent e o resto é lenda.
Já a parte do tradutores, é que nem você viajar para rússia e tentar falar português por lá. Dificilmente você será entendido, há não ser que você seja muito bom em mimica.
É que funciona assim, os VO (Value Object) do Actionscript 3.0 são tipados, ou seja você tem diferentes tipos de variáveis, sejam elas, string, inteiros ou próprias, e no PHP isso não existe, essa tal de tipação só existe no caso de tipação própria e mesmo assim ainda é virtual e não real, como manda o protocolo.
Com isso você precisa que um tradutor faça o trabalho sujo para você viver o sonho americano da comunicação funcionar perfeitamente e os VO tanto do Actionscript 3.0 quanto do PHP conversem entre sí de modo fácil.
Existem diversos no mercado como o famoso Zend_AMF,AMFPHP,Weborb for PHP ,etc . Cada um tem uma particularidade. Usaremos o mais comum em projetos que é o AMFPHP e por se tratar de ser gratis. Eu sei que você gosta de coisa grátis?!

Read More

AIR 2.0/ Cursos/ Flex 4

Ganhador dos cursos de Flex 4 Essencial e AIR 2.0 Essencial

Foi mais divertido que dificil. Dos 20 participantes do pequeno concurso que fizemos no post anterior rendeu muito assunto para jornal.

O pessoal solta a criatividade geral para ganhar as bolsas do Flex 4 Essencial e AIR 2.0 Essencial.

A parte dificil é escolher a melhor, e para isso chamei o pessoal do escritório para me ajudar. E a que foi mais votada aqui foi essa.

Já disseram que o homem não poderia voar, hoje temos o avião. Anos atrás a infecção era sinal de morte, até por acaso descobrirem a penicilina. Um dia pensaram que a internet não daria certo, hoje o mundo não consegue viver sem ela. Com a internet surgiu uma questão: “Precisamos ter interfaces mais dinâmicas, flexíveis e bonitas”! Nasce então o Flex. Eu quero participar da história da humanidade. Eu quero aprender Flex com vocês!

Essa justificativa foi bem interessante, e escrita pelo Raphael Vinícius do Rio de Janeiro. Ele trabalha ou é dono do site www.b2all.com.br .Parabéns Raphael, você realmente estava inspirado.

Para quem não ganhou, e mesmo assim quer fazer só que as coisas estão apertadas por ai. Fala comigo, pelo igorcosta AT gmail.com que eu dou um jeito de te ajudar como sempre fazemos.

AIR 2.0/ Flex/ Flex 4/ Flex Builder 4

Concorra a uma bolsa de estudos para o curso on-line Flex 4 Essencial

Vamos vender um pouco de jabá aqui.

Vocês sabem que temos cursos on-line dos mais variados tipos para e exclusivamente para a plataforma Flash. Não somos tão bons em propaganda, acreditamos que o boca-a-boca gera rendimento, tanto que estamos com quase 1mil alunos já capacitados em 6 meses de operações. (Vlw pessoal).

No próximo sábado dia 25/09 vai ter mais uma turma, e como é de costume, sempre que tem novas turmas, sorteamos 1 até 4 vagas pelo nosso twitter ou no twitter da RIACycle.

Porém, eu sei que nem todo mundo tem twitter ou gosta da onda, então quero sortear uma vaga para esse curso de sábado, aos nossos leitores que vem acompanhando a série de posts sobre o Flex 4 que temos feito por aqui.

Como participar?
É bem e muito simples, Escreva um comentário dizendo por que quer aprender Flex conosco.
Preencha seu nome, e-mail e telefone logo após o porque. Não iremos publicar seu telefone, pode ficar tranquilo.

Regras
O comentário que for mais inteligente, ganha uma bolsa não só para o curso de Flex 4 Essencial como também para o de AIR 2.0 Essencial.

Quantidade?
1 vaga.
Indique aos seus amigos, colegas de trampo.

Flex/ Flex 3 para Flex 4/ Flex 4

Flex 3 para Flex 4: Componentes não visuais

Essa é uma mudança peculiar, no Flex 3 independente de qual seja a função do componente, ele sempre fica no escopo geral do Application.

Por exemplo:

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:ArrayCollection id="blogpost">
			<mx:Object id="postid" titulo="" datapublicada=""/>
			<mx:Object id="postid" titulo="" datapublicada=""/>
			<mx:Object id="postid" titulo="" datapublicada=""/>
	</mx:ArrayCollection>
 
</mx:Application>

Não só ArrayCollection, como HTTPServices, RemoteObject, Producer, Consumer, WebServices, Array, Number, Validadores, Formatadores e até mesmo seus componentes não visuai. Todos esses conhecidos componentes que também são confundidos de classes, podem ser utilizados em qualquer local, contanto que seja dentro do escopo da Application.

No Flex 4, devido a maneira como você cria objetos visuais no atual modelo do pacote Spark, houve a necessidade de tirar essas mudanças, deixando a coisa mais organizada, só que ao meu ver, apenas para dar mais suporte ao Flash Catalyst, por isso que chamo de mudança peculiar.

Então veja só, no Flex 4, todo e qualquer componente que não for visto pelo usuário final deve ficar declarado dentro de um tag, tal tag chamado de . O código do Flex 3 aplicado ao Flex 4 ficaria assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
 
		<s:ArrayCollection id="blogpost">
			<fx:Object id="postid" titulo="" datapublicada=""/>
			<fx:Object id="postid2" titulo="" datapublicada=""/>
			<fx:Object id="postid3" titulo="" datapublicada=""/>
		</s:ArrayCollection>
	</fx:Declarations>
</s:Application>

Então da próxima vez que for usar componentes não visuais, atento para essa dica.

Flex/ Flex 3/ Flex 3 para Flex 4/ Flex 4

Flex 3 para Flex 4: AC_OETags vs. SWFObject

Não ocorreram só mudanças na parte do SDK apenas, o Wrapper que envolve o SWF produzido pelo Flash Builder também mudou. Os engenheiros do SDK notaram que é muito complicado manter o formato AC_OETags em diferentes browsers sem ter que alterá-lo. E também mais complicado ainda é adicionar parametros, adicionar variáveis, uma gama de pequenas dificuldades que acabam gerando algum certo tipo de stress seu na hora de publicar seu projeto.

A grande vantagem do SWFObject é que é um projeto mantido pelo Google, Open-source e continua constantemente sendo atualizado a cada 12 meses de ciclo. É um projeto que faz examente a mesma coisa que o AC_OETags faz, porém de forma mais simples.

No Flex 3 para você embedar uma aplicação Flex ou um SWF feito em Flash Builder, você provavelmente teria isso aqui como código gerado.
Read More