del.icio.us

  •  

News Aggregators

« Encapsulating remote services in Flex 2 | Main | Creating the ActionScript 3.0 UML Diagrams »

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c3f0b53ef00d834a6185753ef

Listed below are links to weblogs that reference Styling Flex TextArea content with CSS:

Comments

K___H

This works pretty good, but the textField property of the resulting StyledTextArea is lost on the compiler (i.e. there are errors in the compiler when trying to compile something like:

styledTxt.textField.getTextFormat(beginIdx,endIdx);

So I modified the StyledTextArea class to the following (and can use theTextField in place of textField):

package com.flashlit.shared.component
{
import flash.text.TextFieldAutoSize;
import flash.text.TextFieldType;
import mx.controls.TextArea;
import flash.text.TextField;

/**
* This class provides a simple workaround to let you set
* the property of a TextArea control.
*/
public class StyledTextArea extends TextArea
{
/**
* Overrides the TextArea.createChildren()
* method to use a StyledUITextField object instead of
* a UITextField object.
*/
public var theTextField:TextField;

override protected function createChildren():void
{
textField = new StyledUITextField();

textField.autoSize = TextFieldAutoSize.NONE;
textField.enabled = enabled;
textField.ignorePadding = true;
textField.multiline = true;
textField.selectable = true;
textField.styleName = this;
textField.tabEnabled = true;
textField.type = TextFieldType.INPUT;
textField.useRichTextClipboard = true;
textField.wordWrap = true;

addChild(textField);

theTextField = textField;

super.createChildren();
}
}
}

Rob Dixon

KH,

That's a great addition. It gets around the problem of not being able to reference the internal textField property of a TextArea.

You could also do this without creating another variable by adding this function to the StyledTextArea class:

public function getTextField():UITextField
{
return this.textField;
}

Then you can do something like this:

styledTxt.getTextField().getTextFormat(beginIdx,endIdx);

Thanks for the suggestion!

Austin K

One note. If you extend UITextField and override the validateNow() method:

override public function validateNow():void {
}

you will be able to still apply the stylesheet and not get the annoying error when the text stylesheet gets applied. I dont know if this totally solves the problem in all cases as you're essentially not running the validateNow method but just with a stub.

Best,

Austin

Steve

Great job on this very handy component! I've started testing it for a content manager I'm trying to put together in Flex 2. One of the big drawbacks is not having a handy way to preview content a user is entering. No WYSIWYG HTML editor for flash that I know of...

One addition I made was to build a default stylesheet class so that this can be useful as soon as its included into an application.

From your example, it looks something like this:

package mypackage
{
import flash.text.StyleSheet;

public class PreviewHTMLStyles extends StyleSheet
{
function PreviewHTMLStyles():void {
var h1:Object = new Object();
h1.fontFamily = "Verdana, Arial, Geneva, sans";
h1.fontWeight = "bold";
h1.color = "#000000";
h1.fontSize = 20;
h1.leading = 10;

var h2:Object = new Object();
h2.fontFamily = "Verdana, Arial, Geneva, sans";
h2.fontWeight = "bold";
h2.color = "#333333";
h2.fontSize = 16;
h2.leading = 4;

var para:Object = new Object();
para.fontFamily = "Georgia, Times New Roman, serif";
para.fontStyle = "normal";
para.leading = 4;
para.fontSize = 12;
para.color = "#666666";
para.display = "block";

var a:Object = new Object();
para.fontFamily = "Georgia, Times New Roman, serif";
a.fontStyle = "normal";
a.leading = 4;
a.fontSize = 12;
a.color = "#0066FF";
a.textDecoration = "underline";

setStyle("h1", h1);
setStyle("h2", h2);
setStyle("p", para);
setStyle("a", a);
}
}
}

Thanks a lot once again for releasing this!

sectore

Rob,

thanks for your great workaround. I have been looking around the Flex community to find a solution for styling Textareas with CSS, especially with the pseudo format "a:hover".

Now I can add a "HoverStyle"-object as described above
[CODE]
var aHover:Object = new Object();
aHover.color = "#DD6600";
[/CODE]
and set this style to your text-component
[CODE]
ss.setStyle("a:hover", aHover);
[/CODE]

It work's excellent :-)

Thanks again!

sectore
--
http://www.websector.de/

JabbyPanda

I am in love with this workaround, finally we can assign CSS Stylesheet to HTML Text inside mx:TextArea component.

Although this workaround does not yet work when the StyledTextArea is dynamically added in the runtime to the container via addChild :(

JabbyPanda

OK, I applied

override public function validateNow():void {
}

to StyledUITextField and now StyledTextArea can be dynamically added at the runtime to the container via addChild :)


It is possible to write something by user in this StyledTextArea?

Nikolay Nedev

why in StyledTextArea can't write?
are there anybody know ?

Maikel Sibbald

What is the way to to this?? I want this in th RichTextEditor.

"Good news: Flex 2.0.1 now supports CSS styling within textArea components, so the following workaround is no longer needed. I'll keep this article posted for posterity. -- Rob"

Rob Dixon

Thanks for your comments. Alas the Rich Text Editor component does not support stylesheets. If you have a Rich Text Editor instance called "editor" for example, and you try to apply a stylesheet like this, you'll get error #2009:

editor.textArea.styleSheet = myStyleSheet;

There's a simple reason: if you have CSS applied to a field, and someone edits the text, how do you know which style to apply to the new text? It's a tricky problem and tools like Dreamweaver have solved it, but the Rich Text Editor component alone cannot.

This is the same reason why a TextArea's editable property is automatically set to false when you assign something to its styleSheet property.

Having said that, there is a hack that lets you edit text in a field that has a stylesheet already set. After setting the styleSheet and displaying the results, you can set the .styleSheet property to null and set the .editable property to true. Then you can type inside the styled TextArea.

It's a hollow victory though. You can type, but you can't apply individual styles. When you detach the stylesheet and start editing, it starts treating the styles as TextFormat styles as opposed to CSS styles.

For example, let's say your original text uses an H1 HTML tag, and you have set up a H1 CSS style declaration. It will show up nicely styled after you apply the stylesheet to the TextArea, but later when you set the .styleSheet property to null and .editable to true, the .htmlText content changes. Instead of using the H1 style it changes to use a combination of a TEXTFORMAT tag, a P tag, and a FONT tag. In other words it changes from using a CSS model to a Flash TextFormat model. And once it's done that, you lose all onnection to the original H1 CSS style.

So you can see that there doesn't seem to be an easy way to edit text in a TextArea or a Rich Text Editor control without losing CSS formatting information.

Because this is such a hack I won't post the code right now, but if you really need it let me know.

zah

Gread job!
How can I do the same with a Text component, which extends Label?

Jeroen

Hi, I'm not able to make it work on a TextArea. Check out: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1257217&enterthread=y

It keeps throwing a #2009 error.

vaibhav

hi

i want to change the design of rich text editor component in flex 3. pls email me the method and if possible mail me the code.

thanx in advance

- pareekvaibhav@gmail.com

Andre

I am looking for a similar fix with Actionscript 3.0. Any ideas where I might find one? Thanks and best regards, Andre

Canbey

Thanks. override validateNow perfectly workaround problem.

Yortz

Hi, first of all lemme thanks you for this wonderful contribution. Actually I am using your StyledTextArea on one of my project and is working great, tough, I got some problems when trying to embed fonts: the result is that they don't display in my (yours) StyledTextArea comp. Actually I have understand that i cannot apply a style to the StyledTextArea but i have to use the css file that i am parsing to get my desidered font. Below is the code i am using to parsing xml and css into the StyledTextArea.


private function loadCSS():void
{
var loader2:URLLoader = new URLLoader();
loader2.addEventListener(Event.COMPLETE, completeCSSHandler)

var request:URLRequest = new URLRequest("../css/text.css");
try {
loader2.load(request);
} catch (error:Error) {
trace("Unable to load requested document.");
}
}
private function loadXML():void
{
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, completeHandler)

var request:URLRequest = new URLRequest("../text/text.xml");
try {
loader.load(request);
} catch (error:Error) {
trace("Unable to load requested document.");
}
}
private function completeCSSHandler(event):void
{
var loader:URLLoader = URLLoader(event.target);
var css:StyleSheet = new StyleSheet();
css.parseCSS(loader.data);
ta.styleSheet = css;

}
private function completeHandler(event):void
{
var loader:URLLoader = URLLoader(event.target);

ta.htmlText = loader.data;

}

and this is my text.css file:

@font-face {
fontFamily: "myTTF";
src:url("../fonts/myTTF.ttf");


}
a {
text-decoration:underline;
color:#FF0000;

}
big {

font-size:24;
margin-bottom:-20;
}
formatted {
fontFamily: myTTF;
font-size:12;
text-align: justify;
color: #808080;
}


and finally this is my text.xml

hello world
hello world
hello world

lots of text in here

I am wondering if it would be possible to embed the font to the StyledTextArea so that it always uses myTTF so that i do not have to worry trying to embed the font later.

I can actually get it to work if i remove the StyledTextArea comp and use a regular TextArea by removing the parsing of the stylesheet and declaring into a block what i have into my text.css file.

Of course in that way I am also loosing all the html and tag formatting i am declaring at runtime:(

Any support on this would be highly appreciated.Thanks in advance!

Balaji

Hi all,
I facing a problem in applying CSS in the custom component.
1. I am having the css file.
2. Created the component in action script.
3. Now I need to apply the css for the created custom components with the external css file.

How to apply the css to the components.
Please let me know

Thanks and Regards
Balaji

dedikodu

Any support on this would be highly appreciated.Thanks in advance!

haşere ilaçlama

thanks for the code. css love really: D

Rishi

Hi,
I want to make the textarea as editable with applied css
Thanks

cheap bras

I know you probably get a lot of comments like this cheap wedding dresses, but just wanted to let you know that I really appreciate the work you have put into the blog. I was wondering if I could put a link on my blog because I am sure my followers would love to read it wedding party dresses. Let me know.

The comments to this entry are closed.