Introduction
In this article we are going to learn about the Element API and its variations using Vaadin.
Vaadin is a web Framework that is open source and has built-in support for both Java script and AJAX. By using Google Web Toolkit, you may also incorporate outside functionality onto it. Vaadin saves developers time because it produces rich content in the browser devoid of the use of any markup files
A portion of an element can be updated and questioned using the Element API. Server-side elements' property and attribute values can be modified using the Element API.
Attribute
The primary purpose of attributes is to first configure elements.
Values for attributes are always kept as strings.
Example: Adding attributes to the element's nameField.
Element nameField = ElementFactory.createInput();
nameField.setAttribute("id", "nameField");
nameField.setAttribute("placeholder", "Rohan");
nameField.setAttribute("autofocus", "");
Example: The same example as the one before, but in HTML form.
<input id="nameField" placeholder="Rohan" autofocus>Property
-
Changing an element's parameters dynamically after initialization is the major usage of properties.
-
Any JavaScript value may be utilised in the browser as a property value.
-
The setProperty() function comes in a variety of iterations that let you set a property's value as a String, boolean, double, or JsonValue.
For illustration, set the property value to a double.
Element element = ElementFactory.createInput();
element.setProperty("value", "42.2");
The getProperty() method can also be used in several ways to retrieve a property's value as a String, boolean, double, or JsonValue.
The value is converted if you retrieve a property's value as a different type from the one you used to set it using JavaScript type coercion rules. For instance, if a property is set to be a non-empty String and retrieved as a boolean, it returns true.
“Recommended Topic, procedure call in compiler design“
Using Attributes vs. Properties: Differences
Use characteristics and properties with caution:
1. A similar-sounding trait or property can frequently be used to achieve the same result, and both are effective.
2. However, in some circumstances:
-
only one of them functions, or
-
The property has effect after initialization, and the attribute is only taken into account when the element is initialised.
Listening to User Events Using the Element API
You can use the addEventListener() method provided by the Element API to listen to any browser event.
Example: Making a click event using the addEventListener() function.
Element helloButton = ElementFactory
.createButton("Say hello");
helloButton.addEventListener("click", e -> {
Element response = ElementFactory
.createDiv("Hello!");
getElement().appendChild(response);
});
getElement().appendChild(helloButton);
The event is sent to the server for processing when the "Say hello" button is clicked in the browser, and a new "Hello!" element is also added to the DOM.
Data Access From Events
By adding the necessary event data to the DomListenerRegistration that the addEventListener() method returns, you can obtain further details about the element or user interaction.
As an illustration, define the necessary event data using the addEventData() method.
helloButton.addEventListener("click", this::handleClick)
.addEventData("event.shiftKey")
.addEventData("element.offsetWidth");
private void handleClick(DomEvent event) {
JsonObject eventData = event.getEventData();
boolean shiftKey = eventData
.getBoolean("event.shiftKey");
double width = eventData
.getNumber("element.offsetWidth");
String text = "Shift " + (shiftKey ? "down" : "up");
text += " on button whose width is " + width + "px";
Element response = ElementFactory.createDiv(text);
getElement().appendChild(response);
}
1. The client sends the requested event data values as a JSON object.
2. The event.getEventData() method in the listener can be used to get the event data.
3. Make sure to employ:
-
based on the data type, the appropriate getter;
-
the same keys that were given to the addEventData() function as parameters.
34+ registered 
