Examples with Div com.vaadin.flow.component.html.Div used on opensource projects

Example 6 with Div

use of com.vaadin.flow.component.html.Div in project flow by vaadin.

the class DependencyView method onShow.

@Override
protected void onShow() {
    add(new Text("This test initially loads a stylesheet which makes all text red, a JavaScript for logging window messages, a JavaScript for handling body click events and an HTML which sends a window message"), new Hr(), new HtmlComponent(), new Hr());
    Div clickBody = new Div();
    clickBody.setText("Hello, click the body please");
    clickBody.setId("hello");
    add(clickBody);
    NativeButton jsOrder = new NativeButton("Test JS order", e -> {
        getPage().addJavaScript("/test-files/js/set-global-var.js");
        getPage().addJavaScript("/test-files/js/read-global-var.js", LoadMode.LAZY);
    });
    jsOrder.setId("loadJs");
    /* HTML imports */
    NativeButton htmlOrder = new NativeButton("Test HTML order", e -> {
        getPage().addHtmlImport("base://" + htmlImport2.getResourceUri().toString());
        // This failure can only be seen in the browser console
        getPage().addHtmlImport("/doesnotexist.html");
        // Can't test JS/HTML order because of #765
        getPage().addHtmlImport("base://" + htmlImport3.getResourceUri().toString());
    });
    htmlOrder.setId("loadHtml");
    /* HTML & JS order */
    NativeButton mixedOrder = new NativeButton("Test HTML & JS order", e -> {
        getPage().addHtmlImport("/test-files/html/combinedMixed.html");
    });
    mixedOrder.setId("loadMixed");
    NativeButton allBlue = new NativeButton("Load 'everything blue' stylesheet", e -> {
        getPage().addStyleSheet("/test-files/css/allblueimportant.css");
    });
    allBlue.setId("loadBlue");
    NativeButton loadUnavailableResources = new NativeButton("Load unavailable resources", e -> {
        getPage().addStyleSheet("/not-found.css");
        getPage().addHtmlImport("/not-found.html");
        getPage().addJavaScript("/not-found.js");
    });
    loadUnavailableResources.setId("loadUnavailableResources");
    Div log = new Div();
    log.setId("log");
    add(jsOrder, htmlOrder, mixedOrder, allBlue, loadUnavailableResources, new Hr(), log);
}

Example 7 with Div

use of com.vaadin.flow.component.html.Div 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 Div

use of com.vaadin.flow.component.html.Div in project flow by vaadin.

the class LoadingIndicatorView method divWithText.

private static Div divWithText(String text) {
    Div div = new Div();
    div.setText(text);
    return div;
}

Example 9 with Div

use of com.vaadin.flow.component.html.Div 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);
}

Example 10 with Div

use of com.vaadin.flow.component.html.Div in project flow by vaadin.

the class SynchronizedPropertyView method addSyncWithInitialValue.

private void addSyncWithInitialValue() {
    add(new Text("Synchronized on 'change' event with initial value"));
    final Div syncOnChangeInitialValueLabel = new Div();
    syncOnChangeInitialValueLabel.setId("syncOnChangeInitialValueLabel");
    Element syncOnChangeInitialValue = ElementFactory.createInput();
    syncOnChangeInitialValueLabel.setText("Server value on create: " + syncOnChangeInitialValue.getProperty("value"));
    syncOnChangeInitialValue.setAttribute("id", "syncOnChangeInitialValue");
    syncOnChangeInitialValue.synchronizeProperty("value", "change");
    syncOnChangeInitialValue.addEventListener("change", e -> {
        syncOnChangeInitialValueLabel.setText("Server value in change listener: " + syncOnChangeInitialValue.getProperty("value"));
    });
    syncOnChangeInitialValue.setProperty("value", "initial");
    getElement().appendChild(syncOnChangeInitialValue);
    add(syncOnChangeInitialValueLabel);
}