Tag Archives: bug

alpha & rotation issue for textArea with htmlText

I had been playing with this for one of a project requirement.

Description of scenario:

  • Embedded fonts ‘Times New Roman’ both, using default font manager (Batik) as well as AFE
  • The application consists of two text area components
  • For 1st textarea, I am setting text using ‘text’ property and setting font family, size and color using setStyle().
  • For second, I am providing text related information via ‘htmlText’ property.
  • Using a slider I should be able to change alpha value of both textArea components.

Behavioral problems:

  • When I change value using slider, the alpha effect is applied and visible for 1st textarea, but in case of second, alpha value gets applied but text has no visible impact of alpha.
  • When I rotate both textArea components using, 1st gets rotated, but not second. In case of both textareas, I am referring and using embedded font only. (font family ‘TNR’ in example)

I expect both textAreas behave identical.

As far as I know and received primary feedback from a famous flexer guy, my code is right. If I consider this, there is definitely a limitation / bug in flex SDK. Hence I suggested a new task in SDK.

Here is a code I had written to simulate the SDK limitation / bug:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Style>
		@font-face
		{
			src: url('/assets/fonts/times-new-roman.ttf');
			fontFamily: "TNR";
			font-weight:normal;
			font-style:normal;

			advancedAntiAliasing: true;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.events.SliderEvent;

			private function init():void
			{
				basicTxt.text = "This is a sample text!";
			}

			private function onChange(event:SliderEvent):void
			{
				basicTxt.alpha = event.value;
				htmlTxt.alpha = event.value;
			}

			private function doRotate(event:MouseEvent):void
			{
				basicTxt.rotation = 20;
				htmlTxt.rotation = 20;
			}
		]]>
	</mx:Script>
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="70%" height="50%">
			<mx:TextArea id="basicTxt" width="80%" backgroundColor="blue" fontSize="36" height="100%" fontFamily="TNR"/>
			<mx:TextArea id="htmlTxt" width="80%" backgroundColor="blue" height="100%">
			<mx:htmlText>
					<![CDATA[<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="TNR" SIZE="36" COLOR="#000000" LETTERSPACING="0" KERNING="0">This is a sample text!</FONT></P></TEXTFORMAT>]]>
				</mx:htmlText>
			</mx:TextArea>
		</mx:HBox>
		<mx:HSlider minimum="0" maximum="1" value="1" change="onChange(event)" />
		<mx:Button label="Rotate" click="doRotate(event)" />
	</mx:VBox>
</mx:Application>

I will appreciate if anyone can give some ideas / pointers to work around.

A statement can change the life

This makes very generic sense – this is about my experience in terms of software programming.

My team was facing big pain to solve a very small – simple looking issue. Everything was logically simple and correct.

In flex 3, I disabled TextInput something like under:

objTextInput.enabled = false;

After that I tried to change color through stylesheet (CSS) and it did not work. Contradictory I was able to change font-family and font size of the same component in same fashion, and was working fine.

Changing to objTextInput.enabled = true; worked perfectly fine as expected!

What can I consider this as? A bug in Flex 3 SDK or bug in my understanding? 😉

%d bloggers like this: