Importing a text flow from an XML object in Flex 4

by Peter deHaan on June 25, 2009

in RichText (Spark), TextFlow, TextFlowUtil, beta1

The following example shows how you can import a TextFlow object from an XML object in Flex 4 by using the static TextFlowUtil.importFromXML() method.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/ -->
<s:Application name="TextFlowUtil_importFromXML_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import spark.utils.TextFlowUtil;
 
            XML.ignoreWhitespace = false;
 
            [Bindable]
            private var theXML:XML = <div textAlign="justify" paragraphSpaceBefore="20">
                    <p><span fontWeight="bold">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Sed vel lacus dignissim tellus lobortis pulvinar eget tempus dui. <span fontStyle="italic">Mauris et lacus velit, ac dictum augue.</span> Etiam non nisi eu nisl aliquet ullamcorper. Etiam pellentesque, purus vel pulvinar bibendum, libero orci pharetra erat, in dictum ipsum lacus in tortor. Suspendisse auctor, odio non ornare laoreet, diam dolor varius lacus, quis eleifend sem erat vel ipsum. Nunc tortor purus, suscipit eu semper ac, auctor nec lorem. Etiam tempor dignissim nisi, sed imperdiet quam dignissim et. In a neque mauris, at feugiat ante. Aliquam vel elit enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit dapibus turpis, ut euismod metus venenatis eget. Maecenas in orci nunc, nec consequat augue. Vestibulum egestas lacus vel risus faucibus tempor. Pellentesque purus tortor, sodales id tempus et, aliquet vel libero. Morbi dolor justo, feugiat at facilisis eget, mollis vel sem. Cras ut mi dui. Cras fringilla, dui pellentesque congue vehicula, felis nisl molestie turpis, ut eleifend arcu augue in magna. Nunc adipiscing mi ac urna laoreet aliquam pretium mauris sagittis. Quisque eu mi sit amet sem mollis tincidunt.</p>
                    <p>Cras nec mi tortor, id pretium sem. <span lineThrough="true">In hendrerit viverra orci quis condimentum.</span> Maecenas et arcu quis arcu volutpat consectetur quis vel tellus. <span color="#FF0000">Donec dapibus, est cursus convallis porta, dolor enim ullamcorper neque, eu aliquet elit risus at neque.</span> Proin eget tortor non velit pretium mattis eget vitae neque. Fusce sollicitudin odio at neque molestie et tempus est condimentum. Proin dignissim egestas egestas. Proin luctus, velit at ultricies aliquam, leo sapien tempor purus, tristique semper mauris velit ut turpis. Donec vestibulum mattis tellus, at molestie massa luctus vitae. Donec auctor, mi quis commodo condimentum, nisl sapien pharetra lorem, id venenatis felis sapien quis lacus. Cras dapibus, tortor porttitor varius vulputate, lorem elit auctor turpis, a consectetur enim magna eget mi. Sed dapibus volutpat semper. Sed rhoncus pulvinar semper. Etiam in mi nec massa venenatis cursus quis in massa. Quisque pulvinar nulla quis neque lobortis molestie. Phasellus ullamcorper cursus volutpat. Mauris dictum felis at est sodales tincidunt. Aliquam congue nibh vitae dolor dignissim ut tincidunt sem commodo. Sed sit amet turpis ac lectus molestie facilisis vitae at neque. Phasellus nec justo tortor.</p>
                </div>;
        ]]>
    </fx:Script>
 
    <s:RichText id="richTxt"
            textFlow="{TextFlowUtil.importFromXML(theXML)}"
            left="20" right="20"
            verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

{ 10 comments… read them below or add one }

1 RosieGp June 30, 2009 at 7:00 am

Hi Peter,
I’m new to flex. I’m trying to do combox and text input in my app. but having some problem. Is there a way that i can post my problem in your blog or email it you.

Reply

2 judah June 30, 2009 at 9:35 am

Hi Peter,

I’m getting a warning, “1172: Definition spark.utils:TextFlowUtil could not be found.”

on this line:
import spark.utils.TextFlowUtil;

when i checked the package contents the only thing in utils is:
import spark.utils.LabelUtil;

Reply

3 Peter deHaan July 1, 2009 at 4:50 pm

judah,

You probably need to download a current Flex 4 SDK. http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Peter

Reply

4 Jack Fox July 7, 2009 at 6:40 pm

Hi Petter:
I’m getting the same warning:“1172: Definition spark.utils:TextFlowUtil could not be found.” like judah
And I had download the last SDK(flex_sdk_4.0.0.7219) from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
This warning is also exist! Could you kindly help to explain these issue, please?

Reply

5 Peter deHaan July 7, 2009 at 7:28 pm

Jack Fox,

Flex 4.0.0.7219 is actually a fairly old SDK (it is the beta 1 SDK — circa May 13, 2009). You’ll need a newer Nightly Flex SDK build from the same page. The current latest Nightly Flex 4 SDK is 4.0.0.8411 from July 7, 2009.

And just because I happened to have that already open in my SVN, the TextFlowUtil.as class was added in build 4.0.0.7826; “[svn:fx-trunk] 7826: Added a new utility class, spark.util.TextFlowUtil, for importing a TextFlow from TLF markup or exporting a TextFlow to TFL markup.”

Peter

6 Paul July 5, 2009 at 1:26 pm

Peter,

Your site is fantastic and has been a constant source of answers as I learn Flex. I have gotten very good at it and an app I tried to write in HTML/Javascript years ago is now coming to fruition, partly thanks to your posts.

I’m sorry for adding this to a blog post, but I couldn’t find any way to email you directly…I have a question:

Is there a way to link Actionscript files (.as) that are not compiled at runtime? What I want to do is allow users of my software to write their own Actionscript to extend the application’s functionality on their own. The idea would be to have a script block that references a source file such as customscripts.as and have the application use the scripts on the fly rather than have it compiled in at runtime.

Thanks, and again sorry for putting an unrelated reply on your post.

– Paul

Reply

7 Rob McKeown July 16, 2009 at 12:47 pm

This probably isn’t the best place for me to respond to you, but what you are trying to do can be accomplished by dynamically loading a swf file at runtime. Anyone writing extensions for your app, would compile them into a SWC file. Then, in your app, you can open the SWC (it is really just a zip file with some added stuff) and load the library.swf file into your application. It isn’t as straightforward as you might like but it is possible. I posted some related resources on my blog at http://agileui.blogspot.com/2009/06/it-is-possible-to-do-this-in-air.html.

You would probably want to provide an SDK (just a SWC file really) with the interfaces that developers need to implement in order to plug into your app.

This is exactly how I am implementing third-party integration plugins for Klok

Reply

8 Pan July 7, 2009 at 12:04 am

Hi Peter
I want use the tag ,but flex 4 does’t use the tag ,I don’t konw use that

Reply

9 Peter deHaan July 7, 2009 at 11:34 am

Pan,

Sorry, this blog eats HTML tags. You’ll need to escape your < tags as &lt; and your > tags as &gt;

Peter

Reply

10 nisha July 7, 2009 at 8:25 pm

hi
m new in flex
so plz tell me how to use flex builder for implementing flex apaplication.
i want to implement simple flex application that consist of textbox,butto ,datagrid
so plz……….. cooperate
plz snd me help on my email nisha_dec_engg@yahoo.com

thanku vry much
nisha

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post: Displaying icons in a Spark List control in Flex 4

Next post: Setting the background color on a Spark SimpleText control in Flex 4