Truncating text with the Spark RichText control in Flex 4

The following example shows how you can truncate text in the Spark RichText control in Flex 4 by setting the maxDisplayedLines property and specifying the maximum number of visible lines.

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/27/truncating-text-with-the-spark-richtext-control-in-flex-gumbo/ -->
<s:Application name="Spark_RichText_maxDisplayedLines_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="truncation:">
                <s:HSlider id="slider"
                        minimum="-1"
                        maximum="22" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:RichText id="richText"
            maxDisplayedLines="{slider.value}"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:text><fx:String source="dummy.txt" /></s:text>
    </s:RichText>
 
</s:Application>

View source is enabled in the following example.

You can also set the maxDisplayedLines property using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/27/truncating-text-with-the-spark-richtext-control-in-flex-gumbo/ -->
<s:Application name="Spark_RichText_maxDisplayedLines_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="truncation:">
                <s:HSlider id="slider"
                        minimum="-1"
                        maximum="22"
                        change="slider_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function slider_changeHandler(evt:Event):void {
                richText.maxDisplayedLines = slider.value;
            }
        ]]>
    </fx:Script>
 
    <s:RichText id="richText"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:text><fx:String source="dummy.txt" /></s:text>
    </s:RichText>
 
</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.

7 thoughts on “Truncating text with the Spark RichText control in Flex 4

  1. hey …
    i hav to looking for solution to connect to oracle database from AIR application …the application is installed on machine is not same as one database is installed on … i know its not the right post to ask abt oracle connectivity … but i cudnt find any such post … and hopefully u will read comments on ur latest post more likely than ur older posrt … if u do anything abt how to solve my problem plz let me know here or if possible on email address i provided as i cudnt find anything on it so far … thanks in advance
    PS : same request is posted on ur air examples site too .. i just really need a solution :|
    regards
    Yogesh Gaur

  2. yogesh gaur,

    I don’t think you can talk directly to a database from ActionScript/AIR (but I could be wrong). I believe that you’ll need to proxy DB requests through a server-side-script using ColdFusion/Java/PHP/<other>.

    Your best bet would be to ask in the FlexCoders list and see what suggestions everybody has.

    Peter

  3. hi Peter deHaan ,
    thanks for the quick reply …you are correct that u cannot connect directly to a database from ActionScript/AIR atleast oracle ( i hav seen one api for mysql connection but its still in development ) … i also know u can use httpservice request in air application …. but whenever i use it ..since i hav to give full url “http://://page location … its giving me server error and request fail error .. if u do know anything abt it .. ur help will be directly appreciated .. in the meanwhile i will post about the same on http://www.flexcoders.com
    thanks again
    Yogesh

  4. Truncating text is always hard, the most difficult part is knowing where to start eliding so it fits in the available space — does this code do the right thing for that?

  5. Hi

    This is a nice feature, but is it possible to disable the truncation inside words?
    For example my text is:

    this text ends with a longlonglong word.

    If i truncate it at 100 pixels, the text will be:

    this text ends with a longlon…

    By my client wants to have:

    this text ends with a…

    So basically truncation should cut the whole word, and not in the middle of it.
    If its not possible can you tell me the function which handles the text truncation?
    Thanks.

Comments are closed.