TextArea styling htmlText

Hi,
How can I style my html content of a TextArea? I tried it
like this but it keeps throwing errors:
var h1:Object = new Object();
h1.fontFamily = "DistrictThin";
h1.color = "#FFCC00";
h1.fontSize = 30;
h1.leading = 15;
h1.display = "block";
var css:StyleSheet = new StyleSheet();
css.setStyle("h1",h1);
var styledTxt:TextArea = new TextArea();
styledTxt.width = textBox.width;
styledTxt.height = textBox.height;
textBox.addChild(styledTxt);
styledTxt.styleSheet = css;
styledTxt.htmlText = '<h1>Lorem
Ipsum</h1><p>dolor sit amet dolor sit amet dolor sit
amet</p>';
Error: Error #2009: This method cannot be used on a text
field with a style sheet.
at flash.text::TextField/set defaultTextFormat()
at mx.core::UITextField/set
htmlText()[C:\dev\GMC\sdk\frameworks\mx\core\UITextField.as:314]
at
mx.controls::TextArea/mx.controls:TextArea::commitProperties()[C:\dev\GMC\sdk\frameworks\ mx\controls\TextArea.as:1787]
at
mx.core::UIComponent/validateProperties()[C:\dev\GMC\sdk\frameworks\mx\core\UIComponent.a s:5218]
at
mx.managers::LayoutManager/mx.managers:LayoutManager::validateProperties()[C:\dev\GMC\sdk \frameworks\mx\managers\LayoutManager.as:517]
at
mx.managers::LayoutManager/mx.managers:LayoutManager::doPhasedInstantiation()[C:\dev\GMC\ sdk\frameworks\mx\managers\LayoutManager.as:658]
at Function/
http://adobe.com/AS3/2006/builtin::apply()
at
mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher2()[C:\dev\GMC\sdk\framework s\mx\core\UIComponent.as:7789]
at
mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher()[C:\dev\GMC\sdk\frameworks \mx\core\UIComponent.as:7732]
at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
at flash.utils::Timer/flash.utils:Timer::tick()
Thanks!

I'm having loads of problems figuring out how to put CSS in a
Label. I try to just put the css in the actual html:
<mx:Label x="0" y="0" width="100%">
<mx:htmlText><![CDATA[<style
type="text/css">h1{font-weight:bold}</style><h1>Header
Text</h1>]]></mx:htmlText>
</mx:Label>
But this doesn't work at all. I'm using the 2.0.1 SDK. How do
I apply CSS styles to the html elements?

Similar Messages

Flex Mobile textArea styling the text?

I've read in several documents about TLF not supported in Flex Mobile. I then read about text fields vs textArea and css Style sheets.
I'm trying to keep this really simple 1. cause I'm learning 2. So I can build on best practices 3. I'm still learning....
Example:
Main
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"
creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
   import mx.events.FlexEvent;
   [Bindable]
   private var xmlInfo:XML;
   import mx.rpc.events.ResultEvent;
   protected function info_resultHandler(event:ResultEvent):void
    xmlInfo = new XML(event.result.text);← I want to say this is where I need to tell Flex how to interprit the incoming text format.
   protected function creationCompleteHandler(event:FlexEvent):void
    infoXML.send();
]]>
</fx:Script>
<fx:Declarations>
   <s:HTTPService id="infoXML" url="assets/data.xml"
         resultFormat="e4x"
         result="info_resultHandler(event)"/>
</fx:Declarations>
<s:TextArea id="spInfo" text="{xmlInfo}" width="100%"/>
</s:View>
data.xml
<?xml version="1.0" encoding="utf-8"?>
<info>
<text><![CDATA[<b>Bold</b>Not bold<font face="Arial">Arial text</font>Not Arial
]]>
</text>
</info>
Mobile app output
<b>Bold</b>Not bold<font face="Arial">Arial text</font>Not Arial
Thank you in advance.

> How do you mean with the borders Murray? I've never had
any trouble that
> I'm
> aware of? Isn't it fairly common for textfields in forms
to have a box
> round
> them?
Some browsers (Safari comes to mind) won't do borders at all,
and others (I
don't recall which) can actually get surly when you try. I
don't recommend
that you try to style form elements to that level.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Iain71" <[email protected]> wrote in
message
news:f9up7e$9u1$[email protected]..
> Cheers - font-family - of course. Think it threw me when
I typed font :
> and got
> the drop down menu.
>
> How do you mean with the borders Murray? I've never had
any trouble that
> I'm
> aware of? Isn't it fairly common for textfields in forms
to have a box
> round
> them?
>
> Or is there a better method I could be using?
>

Text styling htmlText

Hi all,
i'm developping with Flex 2, i would use the Component
Text, which accepts HTML. I have no problem with applying
"font color", but i would like to apply a
span class with a
css file.
After searching, i've seen some solutions for
TextArea but they don't work with
Text !
Is their any solutions ?
Thanks for your help,
Anthony

I just apply some css to my form, check this article.
http://blog.kevinhoyt.org/2006/06/01/css-positioning-with-flex-2/
But it looks like only some styles apply.
Rgds
JFB
"Anthony(France)" <[email protected]> wrote
in message
news:fc8qsd$jne$[email protected]..
> Hi all,
>
> i'm developping with Flex 2, i would use the Component
Text, which
> accepts HTML. I have no problem with applying "font
color", but i would
> like to
> apply a
span class with a
css file.
> After searching, i've seen some solutions for
TextArea but they
> don't
> work with
Text !
>
> Is their any solutions ?
> Thanks for your help,
> Anthony
>

Flex TextArea HTMLText issue.

Hi All,
I am using a Flex textArea control and recently i found an interesting behaviour while using htmlText property of the TextArea.
By default the htmlText has "<P align=''left' /> tag.When i added bullets to the text it adds the "<LI>" tag to the text and get rid of the the "<P/>" tag.
The problem is that,when i add bullets and the right align the text,it displays fine on the textArea ,but since the htmlText does not have the "<P/>" tag,when i send the htmlText to the backend to generate the .jpg preview of the screen,it is not aligning the text to right.
Bottom line:"when text right aligned with bullets,htmlText does not have "<P/>" tag and only have "<LI/>" tag.
Does anyone know about this issue?
Any ideas to overcome this issue?
Thanks
Kartik B

Thanks for reply,
i am taking htmlText from another textarea..
code:
var htmltext:String = txtarea.htmlText
var textarea1:TextArea = new TextArea();
textarea1.htmlText = htmltext;
vboxName.addChildAt(textarea1,0);
while tracing value of htmltext
<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="11" COLOR="#000101"
LETTERSPACING="0" KERNING="0">agenda descriptyion</FONT></P></TEXTFORMAT>
<TEXTFORMAT LEADING="2"><LI><FONT FACE="Verdana" SIZE="11" COLOR="#000101"
LETTERSPACING="0" KERNING="0">neethu<FONT FACE="none" COLOR="#FFFFFF"></FONT></FONT></LI></TEXTFORMAT>
Regards,
Manu Lal

TextArea + htmlText + image + last line = BOOOM !!!

Hi all... I'm trying to implement a simple chat with smile. ( AS3 with Flash CS3, 9 )
Here's a screen result ( with "msn smile" for test )
Now my problem is that when i reach to the end line of the textarea ( or textarea changes its size ) if i try to insert another smile i get this exception and TextArea get mad and ugly!
ArgumentError: Error #2025: Il valore fornito per DisplayObject deve essere un elemento secondario del chiamante.
    at flash.text::TextField/set htmlText()
    at fl.controls::TextArea/set htmlText()
(Sorry for the italian language of the error text. It says that the value sent to DisplayObject must be a secondary element of the caller)
If i try to insert simple text it work without problem.
Here's the code:
            mReader.htmlText += "<font color=\"#0000FF\"><b>"+ user + " scrive :</b></font><br>";
            var obj:Object = checkForSmile( msg );
            if(obj.result == 0 )
                mReader.htmlText += "<b>" + msg + "</b><br>";
            else if( obj.result != -1 )
                mReader.htmlText += "<textformat leading=\"17\"><img src=\"" + obj.source + "\" width=\"19\" height=\"19\" hspace=\"0\" vspace=\"0\"/></textformat>";
            mReader.verticalScrollPosition = mReader.maxVerticalScrollPosition;
This problem make me crazy... please someone ever had this problem ? or know how to avoid it ?

Hi kglad.. Thanks for reply.
I did it ( called invalidateRect() ) but it doesn't fix the problem.
Another strange thing is that if i try to continue to insert smile it overwrite all the present smileys with this result:
When i overwrite all the smileys... and continue to add them no others error happens... And the app seems to work properly :\ sob sob....

HTML markups showing up in TextArea

Hi,
The XML I'm getting back that I'm setting into a TextArea shows the HTML markups like this:
"Flex is so cool"
<b> Flex is really cool </b>
How can I make it so that the following is showing instead
"Flex is so cool"
Flex is really cool
Thanks,
K4Flex

You may want to assign the XML text to the TextArea's htmlText property.
Or if that is what you are already doing, then assign it to the text property.
If this post answers your question or helps, please mark it as such. Thanks!
http://www.stardustsystems.com
Adobe Flex Development and Support Services

Transparent TextArea Background not text

i have a textarea with htmltext written...
now my requirement is that i need to make the background of textarea semi-transparent so that text could be read easily.
the only problem is that setting the alpha property makes text transparent too.
i need only the background to be transparent ....
pls somebody help me.

Select the text, hit F8 to turn it into a new MovieClip symbol. Now, inside the new clip, add a layer behind the text. In that layer place a shape - which you also turn into a movieClip and then you can set it's alpha.
On stage you just refer to the text inside of the clip to set it, rather than the text itself:
myClip.theText.text = "Hello World";
If you give the alpha shape behind the text an instance name you can then set the alpha independently too:
myClip.myShape.alpha = .5;

HtmlText & XML.prettyPrinting/ignoreWhitespace issue

i have a module that has a tree component, a advanceddatagrid and a textarea.
you select an item from the tree to populate the advanceddatagrid and then you select an item from the advanceddatagrid to populate the textarea.
problem:
the textarea uses htmlText (which is stored in a table on the DB), but for it to display correctly, I need to set XML.prettyPrinting = false and XML.ignoreWhitespace = false. But then, the tree and advanceddatagrid look at weird with empty nodes (that didnt exist before).
so im stuck with either having my text look correctly in my textarea or having the tree and advanceddatagrid look correct...there must be something im doing wrong.
any help would be awesome!
thanks

I'd run a trace on your first node to make sure you're
getting your XML pull correct first. Also, I generally keep my
.ignoreWhiteSpace = "true" because that helps solve some problems.
Last, I really try to shy away from defining text fields
using a field variable. Rather I assign it using
textFieldName.text = "something something something"
That way, the variable field can be used if I need to play
with those values later on. Run the trace() stuff and tell me what
you get.

Chat with emoticons (TextArea with images)

Hi,
I'm building a chat app with FMS, but I have found with a big
problem trying to add "emoticons" to chat's area: TextArea doesn't
render the images in the middle of the text, it just put it on a
new line. I have looked everywhere and I can't find an easy
solution (a custom control or somehting) to solve this issue.
Somebody has a solution for this ??? It's driving me mad
really...
Thanks !!

where ? in the "img" tag ? (I did that already)
What I want is:
var myText:TextArea;
myText.htmlText = '<b>mike:</b> some text and now
an emoticon <img src="folder/smile.png" /> and the text goes
on';
and that should show the text and the image in the middle...
but what happens is that the image is showed in the next line,
alone.

Word wrap problems in 36.0

When entering text into a web form the text no longer "wraps" at the end of the box. The first part of the text runs off the left side. It is working fine in THIS text entry box but is now a problem on some other sites.
See: http://www.thedirectoryclassifieds.com. Start placing a listing and then start entering text into the description box. Once you reach the end of the line the text does not wrap, just runs off the left side as typing continues. After this testing, just exit (back out) without continuing placing the listing.
When encountering this problem I did a test on another computer that had 35.0.1 and word wrapping worked fine. Then I upgraded to 36.0 on that computer and now the problem is there too.
So this definitely means a problem with 36.0 as it wasn't there in earlier versions.

That particular form control has:
<textarea id="main_description" name="b[description]" '''style="white-space: pre;"''' class="editor field"></textarea>
For the first time in Firefox 36, the white-space property is being honored for textarea controls. So there's your trouble: "pre" means Firefox should emulate the preformatted tag, which requires manual line breaks.
It would be great if you can convince the site to change this to:
<textarea id="main_description" name="b[description]" '''style="white-space: pre-wrap;"''' class="editor field"></textarea>
which is supported by all modern browsers (per the compatibility table here: [https://developer.mozilla.org/docs/Web/CSS/white-space#Browser_compatibility]).
But that likely will take some time, so what is the best short-term workaround? I need to think about that a bit.
To manually hack this form control, you can right-click it and choose Inspect Element (Q). This should open the web console to the Inspector in the lower part of the tab. Firefox should highlight the HTML tag I listed first above, and on the right, show the style rules for it. Under "This Element" you can uncheck the box for that rule to have the textarea styled using default rules. But you would need to do this after each time you load the page, which is a hassle.

Newbie to TLF

We just came to know of the TLF; we have a Flex 3.2 application with many reports that are comprised of numerous Text components; the performance we are experience with rendering all these Text components is subpar for our users as they are accustomed to HTML...does TLF offer a lighter weight/higher performance option, e.g., TextField, for rendering text?

Thanks for the quick response...to clarify, we are wondering if the TextField control is lighter weight than the traditional Text control...we have reports which may have 100+ text controls to display data and the performance of this approach is unacceptable...we have attempted to use Datagrid, TextArea, and HTMLtext but they all have issues with laying out the data in a nice column fashion without scrolls, etc. You can see the application in action:
http://69.198.99.212/portal/
gamls/password
run a search (or you can run a recent search via 'Recent Searches' control)
from the grid, in the Options menu control, select 'View Agent Detail'
Data is coming back very fast via remoting, but the rendering takes 5-6 seconds - we believe because of all the text controls
Thank you for you help.

TextArea hyperlink styling

Although Flex Builder 3 gives a wide variety of controls over
the style of a TextArea, I have not found a property that allows
styling of hyperlinks. I would like to be able to have htmlText
shown in a TextArea to have styling for hyperlinks, including
different styles for the pseudo-classes of hover, etc.
I have seen a couple of complex workarounds for this from FB
2 days, but would love to find a simple or elegant way to
accomplish this.
Thanks in advance,
James

I have found a way to do this reasonably easily. Here is what
I did:
1. Include in <mx:Application>:
creationComplete="defineStyles();"
2. ....which refers to this function and the variable it
needs:
<mx:Script>
<![CDATA[
public var ss:StyleSheet = new StyleSheet();
public function defineStyles():void
this.styledTxt.styleSheet = this.ss;
var h:Object = new Object();
h.color = "#970909";
h.textDecoration = "underline";
ss.setStyle("a:hover", h);
var a:Object = new Object();
a.color = "#0066ff";
a.textDecoration = "none";
ss.setStyle("a:link", a);
var v:Object = new Object();
v.color = "#0066ff";
v.textDecoration = "none";
ss.setStyle("a:visited", v);
var t:Object = new Object();
t.color = "#0066ff";
t.textDecoration = "none";
ss.setStyle("a:active", t);
]]>
</mx:Script>
3. And id your TextArea as id="styledTxt"
-=-=-=-=-=-
You may of course adjust variables above as needed.
I am using this for an application that imports blog postings
through HTTPService, and for my content call I use
htmlText="{gettheItem.lastResult.item.thetext}" referring to that
HTTPService call. I mention this so that you can know that this
styling is working on bulk imported data that has anchor links in
it and is properly showing them with the styling I have specified.
Note that this posting from the Flashlit blog was helpful to
me:
http://rantworld.blogs.com/flashlit/2006/08/styling_flex_te.html
I hope this is helpful,
James

Scrolling a TextArea just after updating htmlText property in AIR - need a workaround

Hi,
There's an annoying bug in AIR (or in the TextArea component itself but showing up only in AIR) because of which, if you do:
my_textarea.htmlText=someLongText;
my_textarea.textField.scrollV=someValue;
the second instruction just does not work, and the textarea scrolls to the beginning (as a consequence of the first assignment).
Has anyone else run into this and have you come up with any workaround?
This only happens in AIR, not FP, and only with TextArea, not with a plain input text.

Thank you for the suggestion.
A delay (or waiting for the next frame) will certainly ensure that the scroll bar is updated, but unfortunately it's not an acceptable solution in my case because you'll see the scroll bar jump for an instant, no matter how short it will bee too much.
(FYI, the fact that the text takes a bit to populate the text field is not relevant since no matter how long it takes it is synchronous)
I have a script that changes the htmlText while you type, in a way that is not visible at all because it just adds link tags around some words in the text (note that links are not underlined nor highlighted in any way by default). This implies reassigning the whole htmlText, which in turn means the scrollV property is reset. So, before i change the text, I store the current value of scrollV into a variable, and after changing the text, I reassign the original scrollV value. All this is done within a function, it is synchronous, so even if it happens while you type you don't notice it (if this was inefficient and slow, which it may be if the text is very long, you would notice that it hangs for an instant, but you'll never notice any movement in the scroll bar or the text as there is no way a frame can be redrawn during the operation).
This trick works perfectly with a textfield without scrollbar. It also works with a TextArea in Flash Player, but it does not work in AIR with TextArea because the text automatically scrolls back to the beginning.
With the delay trick, it would every once in a while jump to the beginning and back where it was which even though very quick would be very annoying since it would be happening all the time.
I think I narrowed this down to a bug in the UIScrollBar component, which I guess is used inside TextArea. If you do the following with a UIScrollBar:
- assign a text field as the scrollbar's target
- empty the textfield (or make the text short enough so that its maxScrollV is 1
Then the scrollbar automatically becomes disabled
- now populate the text field with enough text to exceed its height
- change its scrollV property to anything >1
If you do all this in one method, the scroll bar automatically gets enabled again, but it forces the textfield to scroll back to the beginning while it shouldn't at all.
At the end I solved this by giving up TextArea and using a TextField and a ScrollBar - NOT a UIScrollBar (which doesn't help since it suffers from basically the same problem) but a ScrollBar. ScrollBar doesn't have a target property and doesn't disable/reenable itself automatically, so I just never disable it (I simply make it invisible when i don't need it) and everything works fine.

Textarea BitmapData Clips HTMLtext Italic System Font

When using an italic system font, such as BrushScriptStd.otf (pretty standard on Windows PCs - attached if you don't have it), it renders a capital "B" correctly in the textarea:
public var letB:String = '<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="BrushScriptStd" SIZE="72" COLOR="#000000" LETTERSPACING="0" KERNING="0">B</FONT></P></TEXTFORMAT>';
myTextArea.htmlText = letB;
Looks like this in the flash player in Firefox:
When I try to create a bitmap image of the TextArea, the edge of the italic "B" that "overhangs" the next character position gets clipped off in the rendered bitmap:
I used the BitmapData.draw method to generate the bitmap. I have also tried ImageSnapShot with the same result.
            myTextArea.setStyle("backgroundAlpha", 0.0);
            var myBitmap:BitmapData = new BitmapData(myTextArea.width*1, myTextArea.height*1, true, 0x00000000);
            var m:Matrix = new Matrix();
            m.scale(1, 1);
            myBitmap.draw(myTextArea, m);
            BitmapImageOfB.source = new Bitmap(myBitmap);
BTW - I need to use system fonts (allow the user to be able to create text with any fonts they have on their hard drive.) However, I have tried this with embedding the BrushScriptStd font just to see if that was the problem, but embedding did not change anything.
Is this a bug? Or am I doing something really wrong?

You are quite right about the bounding box. And I can add an extra space, that will allow the portion of the italic character that extends beyond the bounding box to render. If my project were only that simple.
I have discovered that adding a space only works if it is in the same font face as the italic letter being clipped. The ultimate project users often compose type with multiple font faces in a single word (kind of the ransom note effect) as part of their type setting. In addition, some of the font faces have exaggerated swashes that span several letters, which would require you to add several spaces, and on either side since descenders in italic typically run forward under the preceding character.
My application goes further in that I also allow the user to kern / change the space between the letters by using <FONT LETTERSPACING="-5"> in the HTMLtext. This also results in clipping.
So far, the only thing I can come up with, which to my mind is a complete hack, is to take the HTMLtext apart letter by letter. First determine the standard bounding box dimensions so that I can determine the base line and starting line using: measureHTMLtext().ascent etc., as well as the width of both the character and a standard space in that font. Then I would do as you suggested use a hidden TextField to render each letter padded by spaces and make a bitmap of the single character. Then I would position the image in another hidden container, positioning based on the calculated baseline, and substracting the inserted padding spaces to determine the proper x and y for the resulting bitmap. I would keep repeating this until all the letters have been rendered as individual images (talk about your ransom note). Once all the characters had been captured as bitmap images, I could make a bitmap of the hidden container I layed them all back out in.
There has got to be a better way.

How to displaying an image inline in TextArea ,htmlText

Here My code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:TextArea id="myChat" width="271" height="238" backgroundColor="#ffffff" borderThickness="0" editable="false" enabled="true" horizontalScrollPolicy="off" wordWrap="true">
    <mx:htmlText>
    <![CDATA[
          test...<img src='close.png' height='15' width='15'/>test...
    ]]>
    </mx:htmlText>
</mx:TextArea>
</mx:Application>
Thanks in advanced...

You can do in this way...
<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" borderStyle="solid">
<mx:TextArea width="100%" height="100%">
     <mx:htmlText>
        <![CDATA[
           <a href='http://www.adobe.com'><img src='../assets/butterfly.gif'/></a>
        ]]>
     </mx:htmlText>
</mx:TextArea>
</mx:Application>
Hope you got my point!!!
If this post answers your question or helps, please kindly mark it as such.

TextArea styling htmlText

Similar Messages

Maybe you are looking for