If you've ever used the `restrict` property on the Flex TextInput control - you've probably wished that it was more than just a string property. While it does allow you to specify characters, and character ranges like A-Z or 0-9, it isn't nearly as convenient or as robust as a regex.

Here is a simple subclass of TextInput that implements the same functionality as `restrict` but using a regular expression.

View the sample application ...and the source code.

 
package com.appdivision.components
{
    import flash.events.TextEvent;
    import mx.controls.TextInput;
 
    public class RegexTextInput extends TextInput
    {
 
        private var _regex:RegExp;
 
        public function RegexTextInput()
        {
            super();
        }
 
        [Bindable]
        public function set regex(value:RegExp):void
        {
            if (value != _regex)
            {
                _regex = value;
            }
        }
 
        public function get regex():RegExp
        {
            return _regex;
        }
 
        override protected function childrenCreated():void
        {
            super.childrenCreated()
 
            addEventListener(TextEvent.TEXT_INPUT, handleTextInput);
        }
 
        public function handleTextInput(event:TextEvent):void
        {
            if (regex)
            {
                 // What the text will be if this input is allowed to happen
                 var textToBe:String = "";
                // Accomidate for a selection
                if (selectionBeginIndex > 0)
                {
                    textToBe += text.substr(0, selectionBeginIndex)
                }
                textToBe += event.text;
                if (selectionEndIndex > 0)
                {
                    textToBe += text.substr(selectionEndIndex, text.length - selectionEndIndex);
                }
                var match:Object = regex.exec(textToBe);
                if (!match || match[0] != textToBe)
                {
                    // The textToBe didn't match the expression... stop the event
                    event.preventDefault();
                }
            }
        }
    }
}
 

Enjoy.

A long overdue update for FlowContainer. A lot of you have emailed me asking for verticalAlign and horizontalAlign to be added to the flowcontainer. A combination of be not being able to do it, and me not getting around to it has resulted in it not being done yet. But today one of my colleagues Curt Elasser decided to take on the task himself. I've put up the demo again with added comboBoxes to set the vertical and horizontal alignment. Feel free to take a look

Here is the source
and
Here is the demo

Feel free to use this in any project you want.

Thanks again and feel free to leave comments

Eric

I'm not posting how to do it for list, as that's not what i was working on - but it should be fairly straight forward and should use very similar (if not the same code).

 
override public function scrollToIndex(index:int):Boolean{
//super.scrollToIndex(index);
var newVPos:int;
var newHPos:int;
 
var firstIndex:int = scrollPositionToIndex(horizontalScrollPosition, verticalScrollPosition);
var numItemsVisible:int = ((listItems.length - offscreenExtraRowsTop - offscreenExtraRowsBottom) *
(listItems[0].length - offscreenExtraColumnsLeft - offscreenExtraColumnsRight));
if (index >= firstIndex + numItemsVisible || index < firstIndex)
{
newVPos = Math.min(indexToRow(index), maxVerticalScrollPosition);
newHPos = Math.min(indexToColumn(index), maxHorizontalScrollPosition);
 
try
{
iterator.seek(CursorBookmark.FIRST, scrollPositionToIndex(horizontalScrollPosition, verticalScrollPosition));
//super.horizontalScrollPosition = newHPos;
//super.verticalScrollPosition = newVPos;
 
var p:Parallel = new Parallel(this);
var ap:AnimateProperty = new AnimateProperty(this);
var ap2:AnimateProperty = new AnimateProperty(this);
ap.property = 'verticalScrollPosition';
ap2.property = 'horizontalScrollPosition';
 
ap.toValue = newVPos;
ap2.toValue = newHPos;
 
p.addChild(ap);
p.addChild(ap2);
 
p.play();
 
}
catch(e:ItemPendingError)
{
}
return true;
}
return false;
}
 

NEW VERSION OF COMPONENT RELEASED HERE

This is a project that I released a while ago when i was keeping the blog at blog.3r1c.net. I've since expanded and want to release it again, as I know people used it, and they may have lost the source.
This component allows you to flow child containers logically in a vertical or horizontal manner. Try to click the buttons inside the container, and watch how they animate to a larger size, and the rest of the items flow gracefully. In the following demo you can also adjust the vertical scroll position, horizontal scroll position, width and height of the container on the fly, and watch all of the children dynamically update.

Here is the source
and
Here is the demo

Feel free to use this in any project you want, but if you do gimme a link in here cuz I'd love to see it in the wild!

Thanks again and feel free to leave comments

Eric

This class allows you to embed anchors into your application much like in HTML.  It allows you to anchor to a dynamic point or UIComponent within a container.  Since you construct the anchor manager you can dynamically create managers for many different containers across the application.  You can also pass in whether to animate the scrolling, where to anchor (nearest edge, top, middle, or bottom), duration, and the easing algorithm to use.  You can also add events to the anchorManager that will tell you when it is scrolling, and when the scrolling has finished.

The example I've posted HERE shows all of these features, try to click on the button that you're anchored to to dynamically move it around.  The manager will know this and anchor to the new position the next time.

I've also posted the source and the sample application HERE.