Kevin Hoyt

I recently came across Mike Givens’ blog post on an ActionScript method for truncating strings. He uses some nice data-binding to store the full text string of a truncated value in the tool tip of the control. Inspired by the concept, I couldn’t resist playing around with the idea a little myself. I made a few changes along the way including putting the truncation algorithm in a TextInput control subclass I called TruncatedTextInput.

In creating a TextInput control subclass, I opted to use the MXML approach vs. the pure ActionScript approach. I prefer this approach as it insulates me from having to understand the core component model too deeply. I just register for the events I’m interested in knowing about and I’m off and running. I feel this is a bit cleaner, but it’s not without its limitations depending on how far you want to subclass an existing control.

While I initially stored the original full string in the tool tip of the control, I found it easier to store the value in a variable for future reference. This gave me the option of not displaying a tool tip when the complete text value was visible in the control. I used ActionScript�s implicit access methods to store the value in a variable. Implicit access methods are an approach I’m very fond of as they provide a great degree of flexibility (pardon the pun) when architecting Flex applications.

Another variable I store/expose is the string to be used at the end of a truncation to designated visually that it has indeed been truncated - I called this the “tail”

From a Flex developers perspective there’s a little known ActionScript class called TextFormat. In a classic Flash ActionScript context, the TextFormat class allows us to style our text fields in an object-oriented fashion. In the context of this Flex application, the TextFormat class lets us measure the width of a string in pixels given a specific set of styles that might be applied to that value. What this class allows me to do in this case is to dynamically determine how much of the string will fit in the visible portion of the control irregardless of the size of the control itself.

When truncating text, I like strings to be broken on whole words. That is that rather than truncate in the middle of the word if that�s what fits, I like keep “seeking” backwards until I find a space that indicates a whole word. That is subsequently the point at which I truncate and add the desired notation. The method that performs truncation and the method that gets a TextFormat class for a given UI control are both declared as static. The idea is that methods might be useful as a utility elsewhere in the application, or in other applications altogether.

Note that the TextInput control does actually have a property that references the contained TextField and therein the TextFormat class for that field, but that those are all undocumented properties. For this example, I wanted to stay within the realm of what�s documented. I’ve included a Captivate recording of the TruncatedTextInput component in action, and the source is available for download.

This entry was posted on Thursday, June 16th, 2005 at 1:28 pm and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.