Component extensibility

The easiest way to develop a custom component is to extend a component. Listed here are solutions that give existing components custom settings, properties, or functionalities. We can use this solution if we want to use a component in the same way in several places in our application, or when we want to enhance a component's functionality in order to perform a given task.

How to implement it

When extending a component, you need to create a new component with an existing component as an ancestor. A new component must extend an existing component. Of course, all the settings and methods that were found in the existing component can be used in the new component due to inheritance. This is how you create a new component with existing but also completely new features.

Take the example of creating a button that will save the contents of a form component to the database. During the save, data validation is performed. If data is found to be valid, it will be saved. Invalid data results in an error message to the user and interrupts the save process. These buttons created can be used in several places in an application by simply adding our button components to the page. In the below example, the SaveButton represents such a button.

  Source code of the custom component SaveButton:  
        
public class SaveButton extends Button implements ClickEventHandler {

	private final Form form;

	/**
	 * Create my custom save button
	 * @param form An instance of the form we want to save
	 */
	public SaveButton(final Form form) {
		super(Icon.SAVE, "Save");
		this.form = Objects.requireNonNull(form, "A savable form instance is required");
		addClickHandler(this);
	}
	/**
	 * Get the form instance
	 * @return The instance of the form that the button will save
	 */
	public Form getForm() {
		return this.form;
	}
	/**
	 * The button click handler implementing the form save procedure
	 */
	@Override
	public void onClick(final MouseEvent event) {
		if (form != null && form.isValid()) {
			try {
				form.save();
			} catch (final Exception e) {
				showNotification(NotificationType.ERROR, "Form save", "Form save exception, exception message: " + e.getMessage());
			}
		} else {
			showNotification(NotificationType.WARNING, "Form data is incorrect.", "Please correct any incorrect information on the form and try saving again.");
		}
	}
}

The component in the example above can then be used on any page as a built-in component. When creating the button, you must specify the instance of the Form component to which you want to save the data. The save is implemented by the button itself. The button is displayed with a 'SAVE' icon and a 'Save' caption.

  Example of reusing the button created above:  
        
public class SaveButtonTestPage extends BasePage {
    @Override
	public void build() {
        Form form = new Form("exampleDS");
        addComponents(
			form,
            new SaveButton(form)
        );
    }
}