|
Warning
|
Values updated in the browser are by default not sent back to the server. See the Retrieving User Input tutorial to learn how to get data back to the server. |
Attributes are mainly used for initial configuration of an element. Attribute values are always stored as strings.
Element nameField = ElementFactory.createInput();
nameField.setAttribute("id", "nameField");
nameField.setAttribute("placeholder", "John Doe");
nameField.setAttribute("autofocus", "");The above example expressed as HTML would look like <input id=nameField placeholder="John Doe" autofocus>.
You can also investigate and manipulate attributes that have already been set.
// "John Doe"
String placeholder = nameField.getAttribute("placeholder");
// true
nameField.hasAttribute("autofocus");
nameField.removeAttribute("autofocus");
// ["id", "placeholder"]
nameField.getAttributeNames().toArray();Properties are mainly used for dynamically changing the settings of an element after it has been initialized.
In the browser, any JavaScript value can be used as a property value.
You can use different variations of the setProperty method for setting a property value as String, boolean, double and JsonValue.
Element element = ElementFactory.createInput();
element.setProperty("value", "42.2");Similarly, the value of a property can be fetched as any of those types using different getProperty method variations.
The value will be converted according to JavaScript type coercion rules if it is fetched as some other type than how it was set.
For instance, a property set as a non-empty string will result in true if fetched as a boolean.
// true, since any non-empty string is true in JavaScript
boolean helloBoolean = element.getProperty("value", true);
// 42, string is parsed to a JS number and truncated to an int
int helloInt = element.getProperty("value", 0);|
Warning
|
There are many cases where you can use either an attribute or a property with the same name for the same effect. In some cases only one of them works, in other cases the attribute is considered when the element is initialized, but after initialization only the property is effective. Please check documentation specific to the element you’re using to find out whether a feature should be configured using a property or an attribute. |
Class names for elements can be added, removed and inspected using the collection returned by the getClassList method.
You cannot modify the classList or className properties directly using setProperty.
Using element.getProperty("className") you can get all of the set classes as a concatenated string.
element.getClassList().add("error");
element.getClassList().add("critical");
element.getClassList().remove("primary");
element.getProperty("className"); // will return "error critical".|
Note
|
You can set the element’s class attribute using element.setAttribute("class", "foo bar");.
This will clear any previously set classList property.
You can get the element’s class attribute using element.getAttribute('class') which will return the contents of the classList property as a single concatenated string.
|
Element inline styles can be set using the Style object returned by element.getStyle().
Style property names should always be in the camelCase format, e.g. backgroundColor
instead of background-color.
element.getStyle().set("color", "red");
// Note the camelCase, not dash - separated
element.getStyle().set("fontWeight", "bold");
// Note the camelCase, not dash - separated
element.getStyle().remove("backgroundColor");
element.getStyle().has("cursor");|
Note
|
You cannot set the element’s style attribute using the element.setAttribute method.
However you can use element.getAttribute('style') to get all the style rules in a single concatenated string.
|
The element’s textContent property can be set using the setTextContent method.
Note that this removes all children of the element and replaces them with a single text node with the given value.
|
Tip
|
ElementFactory provides helpers for creating elements with a given text content.
|
Element element = ElementFactory.createDiv("Hello world"); // <div>Hello world</div>
element.appendChild(ElementFactory.createSpan()); // <div>Hello world<span></span></div>
element.setTextContent("Replacement text"); // <div>Replacement text</div>You can fetch the element’s textContent with the getTextContent method,
but note that it returns a concatenation of the textContent
property values of the element and all its child nodes. The child nodes are iterated recursively.
element.setTextContent("Welcome back ");
Element name = ElementFactory.createStrong("Rudolph Reindeer");
element.appendChild(name);
element.getTextContent(); // will return "Welcome back Rudolph Reindeer"