HTMLStyle
by Ruben
This is a component I developed for the sake of simplifying the process of formatting html-text in Flex.
Check it out:
Demo
Source
Documentation
HTMLStyle works pretty much the same as the
<local:HMTLStyle id="myHTMLStyle"> <![CDATA[ .someStyleClass { color: #FF0000; } ]]> </local:HMTLStyle> <mx:TextArea styleSheet="{myHTMLStyle.styleSheet}" />
The component also has a source property which can be set to target an external css file..
If you have any ideas or feedback please drop a comment, I'm very curious as to what you all have to say..
Comments (also 4 trackbacks, click to show)
Trackbacks:
Hi Ruben,
Nice component! Should be very handy in texteditors in a CMS!
I tried the demo, and found a bug! If you add an element like an Unorderd List (ul) it’s been applied to all text. Then, when you remove the UL from the editor, the remaining text still got a nice little bullet.
Ewout
Thanks for the feedback. However I think that the UL-issue lies with Flex its html-handling skills. In the demo the user inputted text is merely copied to the two other textfields, without any additional actions..
It’s kind of hard to explain, but if you really want to find out about it you can have a look at the demo source
Don’t know why, but the download source doesn’t work.
The dubug message:
Error: Error #2009: This method cannot be used on a text field with a style sheet.
at flash.text::TextField/setTextFormat()
at mx.core::UITextField/validateNow()[C:\dev\GMC\sdk\frameworks\mx\core\UITextField.as:1432]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher2()[C:\dev\GMC\sdk\frameworks\mx\core\UIComponent.as:7789]
at mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher()[C:\dev\GMC\sdk\frameworks\mx\core\UIComponent.as:7732]
Hey Kirill, could it be that you are attempting to apply TextFormat to text that also gets its style from the HTMLStyle tag?
The HTMLStyle component stores its style declarations in StyleSheet objects, and text in Flex (and Flash too) can only get styles from either StyleSheets or TextFormat, not both at the same time..
Well, i have downlaod your source demo, and opened it in Flex. I didn’t change anything.
Not to question your honesty or anything, but I find that hard to believe since in my demo there is no TextFormat used whatsoever, and the error you posted occured at the setTextFormat() method..
Are you absolutely sure you ran the demo and didn’t just mean that you used the classes in your own project?
I just extract files from .zip and launch demo.mxml in Flex.
For this i create a new Project from folder with extracted files.
I don’t add your component to my project and i dont change anythis in your source.
I did the exact same thing (created a new project in Flex with the files from the downloaded source) and I had no trouble whatsoever. You are using Flex Builder 2, right?
Really like what you created here, nice!
I’m only using the external stylesheet for Anchor hover and rollover effects for my and do not need to toggle back and forth.
Do you know of a solution that does not require the createComplete to load the function. Would rather these styles be set on the page without having to call this function after the Application has loaded.
All I’m trying to do is set anchor hover and rollover states via an external style sheet. Have you seen any quick, simple examples of this?
Any help would be greatly appreciated.
Thanks,
Matt
Hi Ruben. Thank you for this excellent helper.
However, I’ve found a situation when HTMLStyle’s styleSheet doesn’t propagate. It happens when the application uses states – mx:State and when HTMLStyle instance is defined in the default (”) mx:State.
However, even when compiling demo.mxml, I get two warnings on lines 80 and 86: Data binding will not be able to detect assignments to ’styleSheet’. Those warnings are same as the ones I get in my code that uses mx:State. So I’ve tried to add an explicit event to styleSheet property, i.e. [Bindable(event="styleSheetGotChanged")] public var styleSheet:StyleSheet= new StyleSheet() and then I dispatched new event at every place where styleSheet was asisigned to, but that didn’t help.
Now question: is there any specific reason why in HTMLStyle init() must be called from application’s CREATION_COMPLETE event when using CDATA content CSS rather than source? Couldn’t I just directly invoke it from HTMLStyle constructor, or from application’s early events e.g. creationComplete?
My line of thought is: since HTMLInstance.styleSheet doesn’t get bound to (for whatever Flex reason) properly in other mx:State states, how about having HTMLStyle instance in default mx:State and assigning its styleSheet to a variable, which I then use in other ms:State states?
thank you
@Matt: Thanks for the kind words, in this actual blog-post I wrote down a hypothetical example of how to use HTMLStyle in its simplest form, that should be sufficient. If not then just say so and I will have a look at your project.
Do mind that I will have very little time in the next seven days..
@Peter: Unfortunately I currently do not have the time to look into the situation you’re describing, I will look at it when I have more time (as I said hopefully in about seven days).
I really appreciate that you are giving me feedback about your experiences with the HTMLStyle component, so thanks!
Hi Ruben,
I cant get the zip file with source. Can you point it out?
Thanks a lot,
Mika
I never ever post but this time I will,Thanks alot for the great blog.
played with it, and had it running smoothly after 5 mins.
Btw. I discovered a easy way to refresh the styles after loading an stylesheet.
use:
mx.styles.StyleManager.clearStyleDeclaration( “”, true )
instead of:
// trick the TextArea class into thinking we’re actually changing the text
// so that it will update it’s appearance:
dummyText.text = ” ” + dummyText.text;
dummyText.text = dummyText.text.slice(1);
thanks Leon! that’s awesome!