<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CODIGO.actionscript &#187; componente</title>
	<atom:link href="http://www.codigoactionscript.org/category/componente/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.codigoactionscript.org</link>
	<description>Blog de programación en ActionScript. Tips, tutoriales, ejemplos de Adobe Flash, Flex y AIR</description>
	<lastBuildDate>Fri, 30 Sep 2011 11:25:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Error de selección de color en el componente RichTextEditor de Flex</title>
		<link>http://www.codigoactionscript.org/error-de-seleccion-de-color-en-el-componente-richtexteditor-de-flex/</link>
		<comments>http://www.codigoactionscript.org/error-de-seleccion-de-color-en-el-componente-richtexteditor-de-flex/#comments</comments>
		<pubDate>Fri, 30 Apr 2010 14:44:58 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[componente]]></category>
		<category><![CDATA[Flash Builder 4]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[mxml]]></category>
		<category><![CDATA[ColorPicker]]></category>
		<category><![CDATA[componentes]]></category>
		<category><![CDATA[RicheTextEditor]]></category>

		<guid isPermaLink="false">http://www.codigoactionscript.org/?p=605</guid>
		<description><![CDATA[<img width="310" height="80" src="http://www.codigoactionscript.org/wp-content/uploads/2010/04/thumb1.jpg" class="attachment-310x85 wp-post-image" alt="thumb1" title="thumb1" /><p>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 [...]
Related posts:<ol>
<li><a href='http://www.codigoactionscript.org/acceder-a-los-itemrenderer-de-un-componente-lista-en-flex/' rel='bookmark' title='Acceder a los itemRenderer de un componente lista en Flex'>Acceder a los itemRenderer de un componente lista en Flex</a></li>
<li><a href='http://www.codigoactionscript.org/modificar-datos-en-componentes-flex-con-itemeditors/' rel='bookmark' title='Modificar datos en componentes Flex con ItemEditors'>Modificar datos en componentes Flex con ItemEditors</a></li>
<li><a href='http://www.codigoactionscript.org/como-personalizar-el-icono-del-panel-de-alerta-de-flex/' rel='bookmark' title='Cómo personalizar el icono del panel de Alerta de Flex'>Cómo personalizar el icono del panel de Alerta de Flex</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Hoy andaba trabajando con el componente <a href="http://livedocs.adobe.com/flex/3/langref/mx/controls/RichTextEditor.html">RichTextEditor</a> de <a href="http://www.cristalab.com/tips/tags/flex">Flex</a> y me encontré con un fallo del componente en relación a la selección del color desde el <a href="http://livedocs.adobe.com/flex/3/langref/mx/controls/ColorPicker.html">ColorPicker</a> para una selección de texto. Este bug ya venía de <a href="http://www.cristalab.com/tips/tags/flex">Flex</a> 3, y parece que en <a href="http://www.cristalab.com/tips/tags/flashbuilder">Flash Builder 4</a> sigue sin solucionarse.</p>
<p>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 <img src='http://www.codigoactionscript.org/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> </p>
<p>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.</p>
<div align="center"><img src="http://l4c.me/uploads/richtexteditor-1272636790_full550.jpg" alt="" /></div>
<p>En cuanto al código, únicamente necesitaremos escuchar los eventos de apertura y cierre del colorPicker, y modificar la propiedad editable del TrextArea.</p>
<p>Podemos crearnos un componente propio que extienda del componente RichTextEditor implementando este código. Este sería el componente:</p>
<div id="codigo">
<div class="igBar"><span id="lactionscript-2"><a href="#" onclick="javascript:showPlainTxt('actionscript-2'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-2">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;?<span style="color: #0066CC;">xml</span> <span style="color: #0066CC;">version</span>=<span style="color: #ff0000;">"1.0"</span> encoding=<span style="color: #ff0000;">"utf-8"</span>?&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;mx:RichTextEditor xmlns:fx=<span style="color: #ff0000;">"http://ns.adobe.com/mxml/2009"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; xmlns:s=<span style="color: #ff0000;">"library://ns.adobe.com/flex/spark"</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; xmlns:mx=<span style="color: #ff0000;">"library://ns.adobe.com/flex/mx"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; creationComplete=<span style="color: #ff0000;">"init()"</span>&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &lt;fx:Script&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!<span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">events</span>.<span style="color: #006600;">DropdownEvent</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> init<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">colorPicker</span>.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>DropdownEvent.<span style="color: #006600;">OPEN</span>, colorPickerOpen<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">colorPicker</span>.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>DropdownEvent.<span style="color: #0066CC;">CLOSE</span>, colorPickerClose<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> colorPickerOpen<span style="color: #66cc66;">&#40;</span>event:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">textArea</span>.<span style="color: #006600;">editable</span>=<span style="color: #000000; font-weight: bold;">false</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> colorPickerClose<span style="color: #66cc66;">&#40;</span>event:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">this</span>.<span style="color: #006600;">textArea</span>.<span style="color: #006600;">editable</span>=<span style="color: #000000; font-weight: bold;">true</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span>&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &lt;/fx:Script&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;/mx:RichTextEditor&gt; </div>
</li>
</ol>
</div>
</div>
</div>
</div>
<p></p>
<p>Related posts:<ol>
<li><a href='http://www.codigoactionscript.org/acceder-a-los-itemrenderer-de-un-componente-lista-en-flex/' rel='bookmark' title='Acceder a los itemRenderer de un componente lista en Flex'>Acceder a los itemRenderer de un componente lista en Flex</a></li>
<li><a href='http://www.codigoactionscript.org/modificar-datos-en-componentes-flex-con-itemeditors/' rel='bookmark' title='Modificar datos en componentes Flex con ItemEditors'>Modificar datos en componentes Flex con ItemEditors</a></li>
<li><a href='http://www.codigoactionscript.org/como-personalizar-el-icono-del-panel-de-alerta-de-flex/' rel='bookmark' title='Cómo personalizar el icono del panel de Alerta de Flex'>Cómo personalizar el icono del panel de Alerta de Flex</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.codigoactionscript.org/error-de-seleccion-de-color-en-el-componente-richtexteditor-de-flex/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

