Truncating text with the Spark RichText control in Flex 4

by Peter deHaan on May 27, 2009

in Flex4,RichText,RichText (Spark)

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

{ 5 comments… read them below or add one }

1 yogesh gaur May 28, 2009 at 11:53 pm

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

Reply

2 Peter deHaan May 29, 2009 at 7:29 am

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

Reply

3 yogesh gaur May 29, 2009 at 10:05 pm

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

Reply

4 Blaise June 15, 2009 at 11:07 pm

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?

Reply

5 Gregory September 15, 2009 at 4:00 pm

To be honest I am a huge fan of Flex 4, but I have found truncating text tough – thanks for the head up!

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:

Next post: