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.

6 thoughts on “Corretor ortográfico em aplicações Flash/Flex/AIR

  1. Olá Igor,

    Parabéns pelo post! Consegui colocar o Squiggly pra rodar aqui.

    No entanto, estou tendo problemas de desempenho. Como os arquivos são relativamente grandes (948kb p/ a aff e 4,4mb para o dic), na primeira vez que carrego um componente que usa o dicionário a aplicação “congela” por uns 15s. Isso compromete muito a experiência do usuário, já que ele não consegue nem clicar em nada mais na aplicação e fica sem nenhum feedback.

    Isso acontece nas suas aplicações? Será que tem uma forma de contornar isso?

    Att,

    • Oi Alexandre

      Você nao deve embedar o aff ou dic para sua app, ela de fato serve apenas para consulta. Esse congelamento é super estranho. O que de fato me deixou curioso como você fez. Ja que o Flex usa ele apenas para consultar ele fica na parte server, o Squiggly apenas consulta dados desse arquivo existente no servidor, igual como é feito no Firefox.

  2. Igor, eu fiz praticamente igual ao seu exemplo. Creio que a única diferença significativa é que estou usando Flex 3.5, e não 4.5, como você.

    Eu tenho um RichText personalizado, que, quando é iniciado, chama algumas funções. Uma delas é a de iniciar o corretor. Veja como ela está:

    public function iniciarCorretorOrtografico():void
    {
    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:”dictionaries/pt_BR/pt_BR.aff”, dict:”dictionaries/pt_BR/pt_BR.dic”});
    SpellingConfiguration.resourceTable = dicionarios;
    SpellUI.enableSpelling(this.textArea, ‘pt_BR’);
    }

    Eu não fiz embed nesses arquivos. Eles estão na pasta pública do servidor. É só na primeira vez durante a execução da aplicação que o carregamento demora. Depois acho que os arquivos ficam na memória e não se percebe mais delay.

      • Igor, consegui o dicionario, fiz o exemplo idêntico ao postado acima, só que ao digitar nos campos não acontece nada. Qual seria o comportamento ao digitar uma palavra como “tests”?
        dentro da pasta flex_src ficou :
        – dictionaries/pt_BR/pt_BR.aff e pt_BR.dic
        – AdobeSpellingConfig.xml
        – index.mxml

        os arquivos swc estão dentro da pasta : flex_libs

        att.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *