Custom FormItem - Learn JBStrap

Creating a custom FormItem

The JBStrap framework provides numerous ready to use input fields for developers. In the framework, these are called FormItem components. These built in FormItem components cover most bases, but in the case you need to make your own, the framework provides support for that too. The FormItem components also have every functionality of regular components, along with the extra features needed for value handling. These FormItem components can be used on their own, or together with a Form component.

Every FormItem component (including the custom ones) must extend from the FormItem class. When extending the new class, you must specify the type of data that the component will handle. The FormItem class is an abstract class, that requires the implementation of two methods. The setDefaultValue method is responsible for setting the component’s default value, that will be used by the Form Item. The drawEditor method must contain the HTML Code of the Form Item, that will be displayed on the user interface. Every other method that is needed for the operation of the component is provided by the framework. If needed, you can overwrite these default methods.

Implementation

In this example, you will create a Form Item component, that is used to input passwords. The difference between this custom component and the default PasswordItem, is that this component will check the strength of the inputted password, and will inform the user about it. The inputted text will not be visible, they will be replaced by dots. The color of the input field border will change, reflecting the strength of the password, along with a line of text under the input field, informing the user about the password strength.

  Source code of the password input field:  
        
import java.io.StringWriter;

import com.jbstrap.ui.Animatable;
import com.jbstrap.ui.Clickable;
import com.jbstrap.ui.Draggable;
import com.jbstrap.ui.Editable;
import com.jbstrap.ui.Focusable;
import com.jbstrap.ui.HandleKeyboardEvents;
import com.jbstrap.ui.HandleMouseEvents;
import com.jbstrap.ui.bootstrap.FormItemState;
import com.jbstrap.ui.components.form.FormItem;

public class PasswordItemWithStrengthMeter extends FormItem<String, PasswordItemWithStrengthMeter> implements Animatable<PasswordItemWithStrengthMeter>,
Clickable<PasswordItemWithStrengthMeter>, Editable<PasswordItemWithStrengthMeter>, Focusable<PasswordItemWithStrengthMeter>,
HandleKeyboardEvents<PasswordItemWithStrengthMeter>, HandleMouseEvents<PasswordItemWithStrengthMeter>, Draggable<PasswordItemWithStrengthMeter> {

	/**
	 * The available password strength
	 */
	private enum Strength {
		NONE("No password", FormItemState.ERROR, -1, -1),
		WEAK("Weak", FormItemState.WARNING, 0, 3),
		MEDIUM("Medium", FormItemState.INFO, 4, 6),
		STRONG("Strong", FormItemState.SUCCESS, 7, 10);

		private String message;
		private FormItemState state;
		private int minimum;
		private int maximum;

		Strength(final String message, final FormItemState state, final int min, final int max) {
			this.message = message;
			this.state = state;
			this.minimum = min;
			this.maximum = max;
		}

		public static Strength getStrengthByScore(final int score) {
			for (final Strength t : Strength.values()) {
				if (t.minimum <= score && t.maximum >= score) {
					return t;
				}
			}
			return Strength.NONE;
		}
	}
	/**
	 * Create new Password item with strength meter
	 * @param name The form item name
	 * @param title The form item label text
	 */
	public PasswordItemWithStrengthMeter(final String name, final String title) {
		super(null, name, title, null);
		setAttribute("editorType", "PasswordItem");
		setAttribute("type", "password");
		addStyleClass("form-control");
		setDataType(String.class);
		addValueChangeHandler(event -> {
			final Strength strength = calculatePasswordStrength(getValue());
			setState(strength.state);
			setDescription(strength.message);
		});
	}
	/**
	 * Draw form item to the HTML DOM
	 */
	@Override
	protected void drawEditor(final StringWriter writer) {
		writer.write(openTag("input"));
		writer.write(closeTag("input"));
	}

	/**
	 * Set form item default value
	 */
	@Override
	public PasswordItemWithStrengthMeter setDefaultValue(final Object defaultValue) {
		this.defaultValue = ((defaultValue == null) ? null : defaultValue.toString());
		return this;
	}

	/**
	 * Calculate the password strength
	 * The method calculates the complexity of the password and returns the corresponding Strength value
	 */
	private Strength calculatePasswordStrength(final String password) {
		if (password == null || password.isEmpty()) {
			return Strength.NONE;
		}
		//total score of password
		int iPasswordScore = 0;

		if( password.length() < 8 ) {
			return Strength.WEAK;
		} else if( password.length() >= 10 ) {
			iPasswordScore += 2;
		} else {
			iPasswordScore += 1;
		}

		//if it contains one digit, add 2 to total score
		if( password.matches("(?=.*[0-9]).*") ) {
			iPasswordScore += 2;
		}

		//if it contains one lower case letter, add 2 to total score
		if( password.matches("(?=.*[a-z]).*") ) {
			iPasswordScore += 2;
		}


		//if it contains one upper case letter, add 2 to total score
		if( password.matches("(?=.*[A-Z]).*") ) {
			iPasswordScore += 2;
		}

		//if it contains one special character, add 2 to total score
		if( password.matches("(?=.*[~!@#$%^&*()_-]).*") ) {
			iPasswordScore += 2;
		}

		return Strength.getStrengthByScore(iPasswordScore);
	}
}

This form item is ready to be used as a standalone component, or together with a Form and FormItem components.

  Using the newly created form item on a page:  
        
public class PasswordItemTestPage extends BasePage {
        public void build() {
                addComponent(new PasswordItemWithStrengthMeter("password", "Enter new password"));
        }
}