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.


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:

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: