ActiveTextField Component

The class 'ActiveTextField' is abstract and connot be instanced but implements the parent class of the IntegerTextField, NumericTextField and RegExTextField. ActiveTextField is a subclass of Echo's TextField which render an HTML <input> tag.

ActiveTextField extends the Echo TextField by providing a icon and a message which provided feedback to the user during input. ActiveTextFields have three states, 'empty', 'valid' and 'invalid'. The empty state is when there is not text in the field, the valid and invalid states are defined by the implementing subclass.

An icon can be assigned for each of these three states from a list shown below, the default assingment is: 'empty' icon for the empty state, 'error' icon for the invalid state and 'good' icon for the valid state. Icon can be reassigned by application, there no restriction on using an icon to represent multiple states. The icon can be place to the right or left of the input text field. Two sets of icons are provide within the ActiveTextField component, a GIF set for Window's Internet Explorer 6 and a PNG set for all other browsers. The programmer does not need to do anything to implement the correct selection of an icon set.

IconActiveTextFieldIconJavaScript filename
ERRORerror.icon.[png|gif]
GOODgood.icon.[png|gif]
WARNINGwarning.icon.[png|gif]
EMPTYempty.icon.[png|gif]
RIGHT_ARROWrightArrow.icon.[png|gif]
LEFT_ARROWleftArrow.icon.[png|gif]

The AbstractTextField component also support a textual message field which can be positioned above or below the HTML input field. The application can define up to three messages, the default message, and a message for the valid state and another for the invalid state. All of these messages are optional. If the default mesage is defined and the either the invalid or valid message is not defined,the default message will be used.

In addition to the invalid icon and invalid message, the application can define the foreground and background colors to be used during the invalid state.

IntegerTextField

This demo show both a variety of icon and message usage and placement, as well as, a demostration of the IntegerTextField component.

Component Demo...

NumericTextField

This demo shows the behavior of a NumericTextField component. Instructions as buttons are provided for changing the range of the component.

Component Demo...

RegExTextField

This demo shows the behavior of a RegExTextField component. Examples are provided with various input character filters and regular expression validation patterns.

Component Demo...

ActiveTextField - Summary API

                   

    package org.informagen.echo.app;
    
    import org.informagen.echo.app.ActiveTextFieldIcon;
    
    import nextapp.echo.app.Alignment;
    import nextapp.echo.app.Color;
    import nextapp.echo.app.TextField;
    
    public abstract class ActiveTextField extends TextField {
    
        public void setRequired(boolean required)
        public boolean isRequired()
    
        abstract boolean isValid()
    
        public void setEmptyIcon(ActiveTextFieldIcon icon)
        public void setValidIcon(ActiveTextFieldIcon icon)
        public void setInvalidIcon(ActiveTextFieldIcon icon)
        
        public void setIconPosition(int iconPosition)
        public int getIconPosition()
        
        public void setMessage(String message)
        public String getMessage()
        
        public void setValidMessage(String validMessage)
        public String getValidMessage()
        
        public void setInvalidMessage(String invalidMessage)
        public String getInvalidMessage()
        
        public void setMessagePosition(int messagePosition)
        public int getMessagePosition()
        
        public void setInvalidForegroundColor(Color color)
        public Color getInvalidForegroundColor()
        
        public void setInvalidBackgroundColor(Color color)
        public Color getInvalidBackgroundColor()
    }