MaxCharacterStatus Component

The MaxCharacterStatus control provides a mechanism to make the user aware of the fact that a TextInput or TextArea has a limit on the amount of characters that can be entered. It shows a visual clue in the form of a bar that fills the length of the monitored control as the maxChars limit is approached.

By default, the MaxCharacterStatus will be invisible until the monitoredComponent gains focus. This behavior can be overridden by setting the showOnFocusOut property to true.

The status bar will lay on top of the border unless you add padding. This is only important if you want the status bar to be fully within the bounds of the monitored component, or if you're using custom borders.

Since the MaxCharacterStatus class is not an extension of TextArea or TextInput, it was intended to be attached to the displayList of the monitoredComponent. Why did I do it this way? Mainly to see if I could. I think in production I would simply override TextArea and TextInput, adding the bits to display the status bar. However, given that it's meant to be injected into it's host component, it is recommended to be instantiated in a creationComplete event handler like so:

 private function onCreationComplete( event:FlexEvent ):void
 {
      var mcs:MaxCharacterStatus = new MaxCharacterStatus(myTextInput);
      myTextInput.addChild(mcs);
 }

The <bell:MaxCharacterStatus> tag inherits all of the tag attributes of its superclass (UIComponent), and adds the following tag attributes:

Properties 
    monitoredComponent="{TextArea|TextInput}"
    showOnFocusOut="false"
     
  Styles
    paddingBottom="0"
    paddingLeft="0"
    paddingRight="0"
    paddingTop="0"
    statusBarColor="0xFF0000"
    verticalAlign="top|bottom"

A demo.
The MaxCharacterStatus source for download.