Examples with Element com.vaadin.flow.dom.Element used on opensource projects

Example 6 with Element

use of com.vaadin.flow.dom.Element in project flow by vaadin.

the class ComponentRenderer method setupTemplateWhenAttached.

private void setupTemplateWhenAttached(UI ui, Element owner, ComponentRendering rendering, DataKeyMapper<SOURCE> keyMapper) {
    String appId = ui.getInternals().getAppId();
    Element templateElement = rendering.getTemplateElement();
    owner.appendChild(templateElement);
    Element container = new Element("div", false);
    owner.appendVirtualChild(container);
    rendering.setContainer(container);
    String templateInnerHtml;
    if (keyMapper != null) {
        String nodeIdPropertyName = "_renderer_" + templateElement.getNode().getId();
        templateInnerHtml = String.format("<%s appid=\"%s\" nodeid=\"[[item.%s]]\"></%s>", componentRendererTag, appId, nodeIdPropertyName, componentRendererTag);
        rendering.setNodeIdPropertyName(nodeIdPropertyName);
    } else {
        COMPONENT component = createComponent(null);
        if (component != null) {
            container.appendChild(component.getElement());
            templateInnerHtml = String.format("<%s appid=\"%s\" nodeid=\"%s\"></%s>", componentRendererTag, appId, component.getElement().getNode().getId(), componentRendererTag);
        } else {
            templateInnerHtml = "";
        }
    }
    templateElement.setProperty("innerHTML", templateInnerHtml);
}

Example 7 with Element

use of com.vaadin.flow.dom.Element in project flow by vaadin.

the class ElementStyleView method onShow.

@Override
protected void onShow() {
    Element mainElement = getElement();
    mainElement.getStyle().set("--foo", RED_BORDER);
    Div div = new Div();
    div.setId("red-border");
    div.getElement().getStyle().set("border", "var(--foo)");
    div.setText("Div");
    Div div2 = new Div();
    div2.setId("green-border");
    div2.setText("Div 2");
    div2.getStyle().set("--foo", GREEN_BORDER);
    div2.getElement().getStyle().set("border", "var(--foo)");
    add(div, div2);
}

Example 8 with Element

use of com.vaadin.flow.dom.Element in project flow by vaadin.

the class HistoryView method addStatus.

private void addStatus(String text) {
    Element statusRow = addRow(Element.createText(text));
    statusRow.getClassList().add("status");
}

Example 9 with Element

use of com.vaadin.flow.dom.Element in project flow by vaadin.

the class NavigationTriggerView method addMessage.

private void addMessage(String message) {
    Element element = ElementFactory.createDiv(message);
    element.getClassList().add("message");
    getElement().appendChild(element);
}

Example 10 with Element

use of com.vaadin.flow.dom.Element in project flow by vaadin.

the class SynchronizedPropertyView method addSyncMultipleProperties.

private void addSyncMultipleProperties() {
    add(new Text("Synchronize 'value' on 'input' event and 'valueAsNumber' on 'blur'"));
    Div valueLabel = new Div();
    valueLabel.setId("multiSyncValueLabel");
    Div valueAsNumberLabel = new Div();
    valueAsNumberLabel.setId("multiSyncValueAsNumberLabel");
    Element multiSync = ElementFactory.createInput("number");
    multiSync.setAttribute("id", "multiSyncValue");
    multiSync.synchronizeProperty("valueAsNumber", "blur");
    multiSync.synchronizeProperty("value", "input");
    multiSync.addEventListener("input", e -> {
        valueLabel.setText("Server value: " + multiSync.getProperty("value"));
    });
    multiSync.addEventListener("blur", e -> {
        valueAsNumberLabel.setText("Server valueAsNumber: " + multiSync.getProperty("valueAsNumber"));
    });
    getElement().appendChild(multiSync);
    add(valueLabel, valueAsNumberLabel);
}