Component Enabled State

Implicitly Enabled and Disabled Components🎯

An implicitly disabled component is automatically goes into enabled state again when removed from a container made disabled. Similar to this, if an enabled component is joined to a container that is disabled, it will be implicitly disabled.

Examples: Implicitly enabled and disabled components

FormLayout form = new FormLayout();
// the entire form is disabled
form.setEnabled(false); 
TextField name = new TextField("Name");
// since it is not attached yet, prints true,
System.out.println(name.isEnabled());

Button submit = new Button("Submit");
// the submit button is explicitly disabled
submit.setEnabled(false);
 // prints false
System.out.println(submit.isEnabled());

 // attaches children
form.add(name, submit);

// prints false
System.out.println(name.isEnabled()); 
 // false get printed
System.out.println(submit.isEnabled());

// the name field gets detached
form.remove(name); 
System.out.println(name.isEnabled()); // prints true

// the submit button gets detached
form.remove(submit); // the submit button gets detached

// prints false since it was explicitly disabled
System.out.println(submit.isEnabled())

You can also try this code with Online Java Compiler

Run Code

Overriding Default Disabled Behavior💯

Disabled components, by default, prevent client-side user interaction. Even when disabled, complex (composite) components occasionally need to retain some functionality. For instance, you might want to restrict access to a registration form until a user checks the box next to the license agreement.

Enabling Property Changes

By making some RPC-client-side calls that are typically denied for disabled components, you can override the default disabled behavior.

The first way to do this is to tell the server which property needs to be synchronized when you call addPropertyChangeListener().

Example: Using the checkbox, this Polymer template component manages its own enabled state. The checkbox enables and disables the component and is never disabled.

@Tag("registration-form")
@JsModule("./src/registration-form.js")
public class RegistrationForm
        extends PolymerTemplate<TemplateModel>
        implements HasEnabled {

    @Id
    private TextField name;

    @Id
    private TextField email;

    @Id
    private Button submit;

    @Id
    private Element enable;

    public RegistrationForm() {
        enable.addPropertyChangeListener("checked", "checked-changed",
                this::handleEnabled);
        setEnabled(false);
    }

    private void handleEnabled(
            PropertyChangeEvent event) {
        setEnabled((Boolean) event.getValue());
    }

    @EventHandler
    private void register() {
        String userName = name.getValue();
        String userEmail = email.getValue();
        System.out.println("Register user with name='"
                + userName
                + "' and email='" + userEmail + "'");
    }
}

You can also try this code with Online Java Compiler

Run Code

Here is its template file:

class RegistrationForm extends PolymerElement {

    static get template() {
        return html`
            <vaadin-text-field id='name'>
                {{name}}
            </vaadin-text-field>
            <vaadin-text-field id='email'>
                {{email}}
            </vaadin-text-field>
            <vaadin-button id='submit'
                on-click='register'>
                Register
            </vaadin-button>
            <vaadin-checkbox
                id='enable'
                label='Accept License Agreement'>
            </vaadin-checkbox>`;
    }

    static get is() {
        return 'registration-form';
    }
}

customElements.define(RegistrationForm.is,
        RegistrationForm);

You can also try this code with Online Java Compiler

Run Code

• If the template, which is its parent, is disabled, the checkbox is also implicitly disabled. As a result, the checkbox is not compatible with RPC.

• The checked property is synchronized using the addPropertyChangeListener() method and an additional "checked-changed" argument.

• For the disabled element, the following RPC communications are blocked:
  • Property changes
  • DOM events
  • (With @EventHandler annotation) Event handler methods. For instance, the event handler method register() is blocked when the component is disabled.
  • Client delegate methods (annotated with @ClientCallable)
     

The @Synchronize annotation in combination with the DisabledUpdateMode is an alternative. Argument value, ALWAYS.

Example: Using the @Synchronize annotation for the property getter in your component.

@Synchronize(property = "prop", value = "prop-changed",
            allowUpdates = DisabledUpdateMode.ALWAYS)
public String getProp() {
    return getElement().getProperty("prop");
}

You can also try this code with Online Java Compiler

Run Code

Enabling DOM Events

There are two methods for turning on DOM events. One option is:

1. an addEventListener() overload method in the Element API, or
2. the @DomEvent annotation.

Example: Using the DisabledUpdateMode.ALWAYS parameter of the addEventListener() overload method, it is possible to unblock a DOM event for a disabled element.

public Notification() {
    getElement().addEventListener("opened-changed",
            event -> System.out.println("Opened"))
      .setDisabledUpdateMode(DisabledUpdateMode.ALWAYS);
}

You can also try this code with Online Java Compiler

Run Code

Example: Using the @DomEvent annotation and the parameter value allowUpdates = DisabledUpdateMode, one can unblock a DOM event for a disabled component. ALWAYS:

@DomEvent(value = "click",
          allowUpdates = DisabledUpdateMode.ALWAYS)
public class CustomEvent
        extends ComponentEvent<Component> {
}

You can also try this code with Online Java Compiler

Run Code

Enabling Server-Handler Methods

You can unblock server-handler methods for disabled components by specifying DisabledUpdateMode if they are annotated with @ClientCallable or @EventHandler. As a value, ALWAYS.

Example: Specifying DisabledUpdateMode.ALWAYS

@EventHandler(DisabledUpdateMode.ALWAYS)
private void eventHandler() {
}

@ClientCallable(DisabledUpdateMode.ALWAYS)
private void clientRequest() {
}

You can also try this code with Online Java Compiler

Run Code

Frequently Asked Questions

What is the component-enabled state?

A component that is enabled enables user interaction. This is the initial setting.

What is the component disabled state?

When setEnabled(false) is directly called on a component, that component is explicitly disabled. The user cannot use the component, and server-to-client communication is prevented.

What is DOM?

Web documents have a programming interface called the Document Object Model (DOM). So that software can alter the document's structure, style, and content, it serves as a representation of the page. Programming languages can communicate with a page by interacting with the nodes and objects that the DOM uses to represent the document.

Are events part of DOM?

Events generated by the DOM (Document Object Model) can be caused by user interactions or the browser and serve as a signal that something has happened or is happening.

How do DOM events work?

The bubble and capture phases of DOM events involve document traversal. Before any event handlers are fired, the order in which the event traverses the parent chain is decided. This means that altering an event handler's elements won't change which elements call their event handlers.

Conclusion

This Blog covered all the necessary points about the Component Enabled State. We also looked at various sub topics like Overriding Default Disabled Behaviour, Enabling property changes, and enabling server handler methods.

Refer to our guided paths on Coding Ninjas Studio for aptitude preparation. Enroll in our courses like data analytics, data science, machine learning, database management, etc. Refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Happy Learning!