Error de selección de color en el componente RichTextEditor de Flex

Posted by admin | componente,Flash Builder 4,Flex,mxml | Friday 30 April 2010 9:44 am

Hoy andaba trabajando con el componente RichTextEditor de Flex y me encontré con un fallo del componente en relación a la selección del color desde el ColorPicker para una selección de texto. Este bug ya venía de Flex 3, y parece que en Flash Builder 4 sigue sin solucionarse.

El fallo consiste en que si desde el colorPicker introducimos directamente el código del color en el campo de texto al presionar la tecla ENTER para validar el color introducido, este ENTER nos introduce tambien un salto de línea dentro de la caja de texto del editor haciendo a su vez que el texto seleccionado desaparezca. Un error del compomente bastante impresentable :(

Pero la solución es bastante fácil. Basta con hacer que el TextArea del componente no sea editable en el momento en el que abrimos el colorPicker, de manera de que el ENTER de validación del color no afectará al texto. Una vez cerrado el colorPicker volveremos a hacer editable el texto.

En cuanto al código, únicamente necesitaremos escuchar los eventos de apertura y cierre del colorPicker, y modificar la propiedad editable del TrextArea.

Podemos crearnos un componente propio que extienda del componente RichTextEditor implementando este código. Este sería el componente:

Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:RichTextEditor xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.                    xmlns:s="library://ns.adobe.com/flex/spark"
  4.                    xmlns:mx="library://ns.adobe.com/flex/mx"
  5.                    creationComplete="init()">
  6.     <fx:Script>
  7.         <![CDATA[
  8.             import mx.events.DropdownEvent;
  9.             private function init():void
  10.             {
  11.                 this.colorPicker.addEventListener(DropdownEvent.OPEN, colorPickerOpen);
  12.                 this.colorPicker.addEventListener(DropdownEvent.CLOSE, colorPickerClose);
  13.             }
  14.             private function colorPickerOpen(event:Event):void
  15.             {
  16.                 this.textArea.editable=false;
  17.             }
  18.             private function colorPickerClose(event:Event):void
  19.             {
  20.                 this.textArea.editable=true;
  21.             }
  22.         ]]>
  23.     </fx:Script>
  24. </mx:RichTextEditor>

Post relacinonados:

  1. Acceder a los itemRenderer de un componente lista en Flex
  2. Modificar datos en componentes Flex con ItemEditors
  3. Cómo personalizar el icono del panel de Alerta de Flex

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

Get Adobe Flash playerPlugin by wpburn.com wordpress themes