Importing a text flow from an XML object in Flex 4

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 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

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 thoughts on “Importing a text flow from an XML object in Flex 4

  1. 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.

  2. 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;

      1. 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

  3. 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

    1. 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

  4. 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

Comments are closed.