[flexcoders] Problem with measureHTMLText when using different font-sizes

2007-03-28 Thread ewoermann
Hi

I need to resize a TextArea to show all the text it got populated
with. The TextArea has to display htmlText, so I use measureHTMLText
to get the width and height of a string. According to that I calculate
the dimensions of the TextArea.

Now this all works, unless I change the font, its weight or size.
Below is an example to demonstrate this. Does anyone now how to get
the correct TextLineMetrics for styled fonts? Or does anyone have a
better way to solve this problem?

If you run the code below, you will see 3 TextAreas. The 1st one just
displays normal text, is editable and the height is fixed. Beneath it
is a Button when clicked updates the other two TextAreas to contain
the same text as the first one, but formatted as htmlText. The text in
the second TextArea is not styled, whereas in the third one it has a
greater font size. Now, if you add text to the first component and
click update, the second one resizes correctly and displays all the
text, but the third one only resizes to the same height as the second
one and because of its greater font size, might not display all the text.

?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Style
.customTextAreaStyle
{
font-size:16;
}
/mx:Style
mx:Script
![CDATA[
[Bindable]
private var __someHTMLText:String = This is an example 
of
bHTMLText/b.;

private function onUpdateBtnClick():void
{
__someHTMLText = userInput.text;

resizeTextArea(defaultStyleTextArea);
resizeTextArea(customStyleTextArea);
}

private function resizeTextArea(textArea:TextArea):void
{
if (textArea.htmlText == )
{
textArea.height = 0;
return;
}

var numberOfLines:uint = 1;

var wordArray:Array = textArea.htmlText.split( 
);
var measureString:String = new String();

var l:uint = wordArray.length;
for (var i:uint = 0; i  l; i++)
{
measureString = 
measureString.concat(wordArray[i],  );
if 
(measureHTMLText(measureString).width  textArea.width)
{
numberOfLines++;
measureString = wordArray[i] + 
 ;
}
}

// height = textHeight * numberOfLines + 
2-pixel gutter top +
2-pixel gutter bottom.
textArea.height = 
measureHTMLText(textArea.htmlText).height *
numberOfLines + 4;
}
]]
/mx:Script
mx:HBox width=100% height=100%
mx:VBox width=200 height=100%
mx:TextArea id=userInput text={__someHTMLText} 
width=100%
height=100%/
mx:Button id=updateTextBtn label=Update Text
click=onUpdateBtnClick()/
/mx:VBox
mx:TextArea id=defaultStyleTextArea 
htmlText={__someHTMLText}
width=200 selectable=false 
verticalScrollPolicy=off/
mx:TextArea id=customStyleTextArea 
htmlText={__someHTMLText}
styleName=customTextAreaStyle
width=200 selectable=false 
verticalScrollPolicy=off/
/mx:HBox
/mx:Application

Hope anyone can help
Masi.



Re: [flexcoders] Problem with measureHTMLText when using different font-sizes

2007-03-28 Thread Daniel Freiman

yeah, measureHTMLText will give you trouble for this type of problem.  If
you're only resizing the height and keeping the same width, you can use
textArea.textHeight and resize the textarea to that (plus border, padding,
etc).  The only thing to look out for is that the textHeight property is up
to date when you ask for it.  It probably will be but if it's not you may
need to call one of the validation functions (such as validateNow()) on the
TextArea or the TextArea's UITextField.

- Dan Freiman

On 28 Mar 2007 07:31:53 -0700, ewoermann [EMAIL PROTECTED] wrote:


  Hi

I need to resize a TextArea to show all the text it got populated
with. The TextArea has to display htmlText, so I use measureHTMLText
to get the width and height of a string. According to that I calculate
the dimensions of the TextArea.

Now this all works, unless I change the font, its weight or size.
Below is an example to demonstrate this. Does anyone now how to get
the correct TextLineMetrics for styled fonts? Or does anyone have a
better way to solve this problem?

If you run the code below, you will see 3 TextAreas. The 1st one just
displays normal text, is editable and the height is fixed. Beneath it
is a Button when clicked updates the other two TextAreas to contain
the same text as the first one, but formatted as htmlText. The text in
the second TextArea is not styled, whereas in the third one it has a
greater font size. Now, if you add text to the first component and
click update, the second one resizes correctly and displays all the
text, but the third one only resizes to the same height as the second
one and because of its greater font size, might not display all the text.

?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Style
.customTextAreaStyle
{
font-size:16;
}
/mx:Style
mx:Script
![CDATA[
[Bindable]
private var __someHTMLText:String = This is an example of
bHTMLText/b.;

private function onUpdateBtnClick():void
{
__someHTMLText = userInput.text;

resizeTextArea(defaultStyleTextArea);
resizeTextArea(customStyleTextArea);
}

private function resizeTextArea(textArea:TextArea):void
{
if (textArea.htmlText == )
{
textArea.height = 0;
return;
}

var numberOfLines:uint = 1;

var wordArray:Array = textArea.htmlText.split( );
var measureString:String = new String();

var l:uint = wordArray.length;
for (var i:uint = 0; i  l; i++)
{
measureString = measureString.concat(wordArray[i],  );
if (measureHTMLText(measureString).width  textArea.width)
{
numberOfLines++;
measureString = wordArray[i] +  ;
}
}

// height = textHeight * numberOfLines + 2-pixel gutter top +
2-pixel gutter bottom.
textArea.height = measureHTMLText(textArea.htmlText).height *
numberOfLines + 4;
}
]]
/mx:Script
mx:HBox width=100% height=100%
mx:VBox width=200 height=100%
mx:TextArea id=userInput text={__someHTMLText} width=100%
height=100%/
mx:Button id=updateTextBtn label=Update Text
click=onUpdateBtnClick()/
/mx:VBox
mx:TextArea id=defaultStyleTextArea htmlText={__someHTMLText}
width=200 selectable=false verticalScrollPolicy=off/
mx:TextArea id=customStyleTextArea htmlText={__someHTMLText}
styleName=customTextAreaStyle
width=200 selectable=false verticalScrollPolicy=off/
/mx:HBox
/mx:Application

Hope anyone can help
Masi.

 



Re: [flexcoders] Problem with measureHTMLText when using different font-sizes

2007-03-28 Thread masi woermann

Thanks for the quick reply. I've changed the code in the example as you said
and with validation it works like a charm. Somehow it does not  measures
accurately in the app where I actually need it, but that problem obviously
resides somewhere else.

Cheers
Masi