Thursday, January 20, 2011

Tween Runtime Errors with RSLs

If you decide to use Runtime Shared Libraries and get a missing Tween class RTE as your application is starting, you need to swap the order that the RTEs are loaded. What's happening is that the datavisualization.swc relies upon the framework.swc, but it loads before the framework.swc, causing the RTE.

The fix is simple. In the Flex Library path tab, move the datavisualization.swc below the framework.swc (see picture). This will load the framework before the datavisualization.

If you are compiling via the command line, make sure the datavisualization RSL entry in your flex-config.xml file is after the framework RSL entry.

Sunday, January 2, 2011

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.