Showing posts with label htmltext. Show all posts
Showing posts with label htmltext. Show all posts

Wednesday, 16 March 2011

Flex4, Flex3, how to load an html to TextArea with htmlText property

problem: 
not something important... how to load a simple html file... or a plain text file

solution:
In this example I will create the "l" object where is a URLLoader.
The TextArea object is the "ta_plateu" object where is at "main" module on design time.
I have placed the htmlText: "Loading... please wait..."; this text will be appeared to the user till the download is completed and with this text I can discriminate if I have downloaded or not the text. (Of course this is not the perfect discrimination way, and it doesn't work well if the loaded text contains the "Loading..." text also).
use the follow code... accordingly:somewhere in your code you have to request the file...
      if (main.ta_plateu.htmlText.search("Loading...")>-1) {
        var l:URLLoader = new URLLoader;l.dataFormat=URLLoaderDataFormat.BINARY;
        l.load(new URLRequest("http://www.mycompany.com/docs/plateu_ital_text.html"));
        l.addEventListener(Event.COMPLETE,Plateu_download_completed);
      }
now you have to implement the listener "Plateu_download_completed" where will be triggered when the download is completed:
    public function Plateu_download_completed(event:Event):void{
      main.ta_plateu.htmlText=URLLoader(event.target).data;
    }

notes:
On this example are not checked the error conditions... you have to implement and the other events like I have done Event.COMPLETE.
Also the "l" object is not global in the class. Multiple call of the 1st block where you do the download request will have no so good performance. Its better to define the "l" object in the class (not in a function of your class) and remove the event listener in the "Plateu_download_completed" function.

Thursday, 17 February 2011

Flex4, how to use mx:TextArea and mx:RichTextArea in Spark world

situation
With new spark components, some old ms components are not implemented yet in spark version, or are exist and it is complex in use.

benefits
with this ms version of these two components, you allow the user to use a nice editor with format text abilities, and represent this formated text (it is html encoded) using only one property, the htmltext.
Till now in Flex 4 and Spark we have no these two power and easy to use components, we hope Adobe to be reasonable and to do not downgrade us more!

problem
how to add mx:TextArea and mx:RichTextArea in spark application? the mx complents doesn't exist in components pallete

solution
open the mxml source code... and insert the two follow lines.
    <mx:RichTextEditor x="0" y="50" width="400" height="200"/>
    <mx:TextArea x="0" y="210" width="400" height="100" />
these lines are creating the RichTextArea and TextArea on you design place.

Wednesday, 2 February 2011

How to Display HTML text in the Spark TextArea

 It isn’t immediately obvious how to display HTML text in a Spark TextArea. Back in the MX days we had textArea.htmlText which is pretty easy to use. But no such beast on the Spark version.
With a Spark text component you have to run your HTML text through a multi-dimensional phase-inducer which is handily provided through spark.utils.TextFlowUtil.importFromString( myHTMLtext );
But you don’t send the output of the importFromString method to the textArea.text. No, no, no. That would be toooo easy. With Spark there’s a new thingy called textFlow. That’s what gets the output of the importFromString() method.

Here’s a very simple example
myTextArea.textFlow = spark.utils.TextFlowUtil.importFromString(
  'some <span fontWeight="bold">bold</span> text.' );

There are a few issues that I’ve found with the new Spark Text components. First, I cannot get embeded <span> tags to render. For instance I can’t change the fontWeight to bold and also change the fontSize to, say, 16 on the same text. I’m not sure what’s up with that.
Also, I cannot get unordered-lists to display at all. Perhaps these are just issues that will be resolved when Flex4 is ready for primetime. If you know anything about this I’d love to read about it in the comments.
One interesting bonus I found is that creating a link automatically turns the text blue and underlines it. I’m not sure how you would override that but it’s nice that it doesn’t show up as just regular un-formatted text.
What’s funny is that starting out this was just going to be a simple example with two text fields where you could type in your HTML and then see it rendered below. Then I thought I’d add a button to make the selected text bold. And then italic. And on and on. Sometimes I just don’t know when to quit.
More examples at  Setting text in a Spark RichText control in Flex 4 at blog.FlexExamples.com.

Note also that you may use the old mx:TextArea where support your favorite htmltext propetry
open the source view of your mxml, and drop the follow lines
    <mx:TextArea x="0" y="2" width="400" height="200">
    </mx:TextArea>