com.vaadin.flow.component.html.Div Java Examples

public DraggableItem(EffectAllowed effectAllowed) {
    dragHandle = new Div();
    dragHandle.setHeight("50px");
    dragHandle.setWidth("80px");
    dragHandle.getStyle().set("background", "#000 ");
    dragHandle.getStyle().set("margin", "5 10px");
    dragHandle.getStyle().set("display", "inline-block");

    setDraggable(true);
    setDragData(effectAllowed);
    addDragStartListener(DnDCustomComponentView.this::onDragStart);
    addDragEndListener(DnDCustomComponentView.this::onDragEnd);

    setHeight("50px");
    setWidth("200px");
    getStyle().set("border", "1px solid black");
    getStyle().set("display", "inline-block");

    add(dragHandle, new Span(effectAllowed.toString()));
}
 

private Div createDropLane(DropEffect dropEffect) {
    String identifier = dropEffect == null ? "no-effect"
            : dropEffect.toString();

    Div lane = createLane(identifier);

    DropTarget<Div> dropTarget = DropTarget.create(lane);
    dropTarget.setActive(true);
    if (dropEffect != null) {
        dropTarget.setDropEffect(dropEffect);
    }
    dropTarget.addDropListener(event -> addLogEntry("Drop: "
            + event.getEffectAllowed() + " " + event.getDropEffect()
            + (data ? (" " + event.getDragData()) : "")));

    return lane;
}
 

@Override
public void add(Component... components) {
    Arrays.stream(components).forEach(component -> {
        if (component instanceof LeftNavigationItem || component instanceof LeftClickableItem || component instanceof LeftSubmenu) {
            Div div = new Div(component);
            div.getStyle()
                    .set("padding", "0 var(--app-layout-space-s)")
                    .set("flex-shrink", "0")
                    .set("box-sizing","border-box");
            div.setWidth("100%");
            menu.add(div);
        } else {
            component.getElement().getStyle().set("flex-shrink", "0");
            menu.add(component);
        }
    });
}
 

public ExceptionsDuringPropertyUpdatesView() {
    Div msg = new Div();
    msg.setId("message");

    add(msg);

    getModel().setText("a");

    getElement().addPropertyChangeListener("text", event -> {
        throw new RuntimeException(
                "Intentional exception in property sync handler for 'text'");
    });
    getElement().addPropertyChangeListener("title", event -> {
        throw new IllegalStateException(
                "Intentional exception in property sync handler for 'title'");
    });
    getElement().addPropertyChangeListener("name", event -> msg
            .setText("Name is updated to " + getModel().getName()));
}
 

public InvisibleDefaultPropertyValueView() {
    PolymerDefaultPropertyValue template = new PolymerDefaultPropertyValue();
    template.setVisible(false);
    template.setId("template");
    add(template);

    Div div = new Div();
    div.setId("email-value");
    add(div);

    add(createButton("Show email value", "show-email",
            event -> div.setText(template.getEmail())));

    add(createButton("Make template visible", "set-visible",
            event -> template.setVisible(true)));
}
 

public SerializeUIView() {
    Div label = new Div();
    label.setId("message");

    NativeButton button = createButton("Serialize", "serialize", event -> {
        UI ui = UI.getCurrent();
        try {
            byte[] serialize = SerializationUtils.serialize(ui);

            String result = serialize.length > 0 ?
                    "Successfully serialized ui" :
                    "Serialization failed";
            label.setText(result);
        }catch(SerializationException se) {
            label.setText(se.getMessage());
        }
    });

    add(label, button);
}
 

private void createEventLog() {
    eventLog = new Div();
    eventLog.add(new Text("Events:"));
    eventLog.add(new NativeButton("Clear", event -> {
        eventLog.getChildren().filter(component -> component instanceof Div)
                .forEach(eventLog::remove);
        eventCounter = 0;
    }));
    eventLog.add(new NativeButton("Data: " + data, event -> {
        data = !data;
        event.getSource().setText("Data: " + data);
    }));
    eventLog.setHeightFull();
    eventLog.setWidth("400px");
    eventLog.getStyle().set("display", "inline-block").set("border",
            "2px " + "solid");
}
 

public SelectView() {
    Div log = new Div();
    log.setId("log");

    Element select = new Element("select");
    for (int i = 1; i < 10; i++) {
        select.appendChild(
                new Element("option").setAttribute("id", "id" + i)
                        .setAttribute("value", "value" + i)
                        .setText("Visible text " + i));
    }
    select.setAttribute("id", "input");
    select.addEventListener("change", e -> {
        log.setText("Value is '"
                + e.getEventData().getString("element.value") + "'");
    }).synchronizeProperty("element.value");
    add(log);
    getElement().appendChild(select);
}
 

@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);

}
 

@Override
protected void init(VaadinRequest request) {
    Push push = getClass().getAnnotation(Push.class);

    getPushConfiguration().setPushMode(push.value());
    getPushConfiguration().setTransport(push.transport());

    Div div = new Div();
    div.setText("Just a label");
    div.setId("label");
    add(div);
    Element area = ElementFactory.createTextarea();
    area.addPropertyChangeListener("value", "change", event -> {
    });
    area.setAttribute("id", "text");
    getElement().appendChild(area);
}
 

@Override
protected void init(VaadinRequest request) {
    getPushConfiguration().setPushMode(PushMode.AUTOMATIC);

    VaadinSession.getCurrent().setErrorHandler(event -> {
        Div div = new Div();
        div.addClassName("error");
        div.setText("An error! " + event.getThrowable().getClass());
        add(div);
    });

    final NativeButton button = new NativeButton("Click for NPE!",
            event -> {
                ((String) null).length(); // Null-pointer exception
            });
    button.setId("npeButton");
    add(button);

}
 

private Div createDropLane(DropEffect dropEffect) {
    String identifier = dropEffect == null ? "no-effect"
            : dropEffect.toString();

    Div lane = createLane(identifier);

    DropTarget<Div> dropTarget = DropTarget.create(lane);
    dropTarget.setActive(true);
    if (dropEffect != null) {
        dropTarget.setDropEffect(dropEffect);
    }
    dropTarget.addDropListener(event -> addLogEntry("Drop: "
            + event.getEffectAllowed() + " " + event.getDropEffect()
            + (data ? (" " + event.getDragData()) : "")));

    return lane;
}
 

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.addPropertyChangeListener("value", "change",
            event -> {
            });
    syncOnChangeInitialValue.addEventListener("change", e -> {
        syncOnChangeInitialValueLabel
                .setText("Server value in change listener: "
                        + syncOnChangeInitialValue.getProperty("value"));
    });
    syncOnChangeInitialValue.setProperty("value", "initial");

    getElement().appendChild(syncOnChangeInitialValue);
    add(syncOnChangeInitialValueLabel);
}
 

private Component createDraggableBox(EffectAllowed effectAllowed) {
    String identifier = "test";

    Div box = createBox(identifier);

    DragSource<Div> dragSource = DragSource.create(box);
    dragSource.setDraggable(true);
    if (effectAllowed != null) {
        dragSource.setEffectAllowed(effectAllowed);
    }
    dragSource.addDragStartListener(event -> {
        addLogEntry("Start: " + event.getComponent().getText());
        if (data) {
            dragSource.setDragData(identifier);
        }
    });
    dragSource.addDragEndListener(event -> {
        addLogEntry("End: " + event.getComponent().getText() + " "
                + event.getDropEffect());
    });
    return box;
}
 

@Override
protected void onShow() {
    Div div = new Div();
    div.getElement().setAttribute("id", "test-element");
    add(div);

    ShadowRoot shadowRoot = div.getElement().attachShadow();
    Element shadowDiv = ElementFactory.createDiv();
    shadowDiv.setText("Div inside shadow DOM");
    shadowDiv.setAttribute("id", "shadow-div");
    shadowRoot.appendChild(shadowDiv);
    Element shadowLabel = ElementFactory
            .createLabel("Label inside shadow DOM");
    shadowLabel.setAttribute("id", "shadow-label");
    shadowRoot.appendChild(shadowLabel);

    NativeButton removeChild = createButton(
            "Remove the last child from the shadow root", "remove",
            event -> shadowRoot.removeChild(shadowLabel));
    add(removeChild);
}
 

@Override
protected void init(VaadinRequest request) {
    message = new Div();
    message.setId("message");
    message.setText("default");

    NativeButton lockButton = new NativeButton("Lock UI for too long");
    lockButton.addClickListener(e -> {
        setHeartBeats();
        message.setText(LOCKING_ENDED);
    });
    NativeButton checkButton = new NativeButton("Test communication",
            e -> message.setText(ALL_OK));


    lockButton.setId("lock");
    checkButton.setId("check");

    add(lockButton, checkButton, message);
}
 

public PreserveOnRefreshReAddView() {
    Text text1 = new Text("Text");
    Text text2 = new Text("Another Text");

    Div container = new Div();
    container.setId("container");

    NativeButton setText = new NativeButton("Set text", e -> {
        container.removeAll();
        container.add(text1);
    });
    NativeButton setAnotherText = new NativeButton("Set another text",
            e -> {
                container.removeAll();
                container.add(text2);
            });

    setText.setId("set-text");
    setAnotherText.setId("set-another-text");

    add(setText, setAnotherText, container);
}
 

@Override
protected void init(VaadinRequest request) {
    /*
     * Read push settings from the UI instead of the the navigation target /
     * router layout to preserve the structure of these legacy testing UIs
     */
    Push push = getClass().getAnnotation(Push.class);

    getPushConfiguration().setPushMode(push.value());
    getPushConfiguration().setTransport(push.transport());

    rootLayout = new Div();
    add(rootLayout);

    input = new Input();
    input.setVisible(false);
    input.setValue("foo");
    input.setId("input");
    rootLayout.add(input);

    NativeButton doUpdateButton = new NativeButton("Do Update",
            event -> doUpdate());
    doUpdateButton.setId("update");

    rootLayout.add(doUpdateButton);
}
 

private Component createDraggableBox(EffectAllowed effectAllowed) {
    String identifier = effectAllowed == null ? NO_EFFECT_SETUP
            : effectAllowed.toString();

    Div box = createBox(identifier);

    DragSource<Div> dragSource = DragSource.create(box);
    dragSource.setDraggable(true);
    if (effectAllowed != null) {
        dragSource.setEffectAllowed(effectAllowed);
    }
    dragSource.addDragStartListener(event -> {
        addLogEntry("Start: " + event.getComponent().getText());
        if (data) {
            dragSource.setDragData(identifier);
        }
    });
    dragSource.addDragEndListener(event -> {
        addLogEntry("End: " + event.getComponent().getText() + " "
                + event.getDropEffect());
    });
    return box;
}
 

public TemplateMappingDetectorContainer() {
    TemplateMappingDetector detector3 = new TemplateMappingDetector();
    detector3.setId("detector2");
    TemplateMappingDetectorComposite detector4 = new TemplateMappingDetectorComposite();
    detector4.setId("detector3");
    Div detector5 = new Div();
    detector5.setId("detector4");
    detector5.setText("The template itself: " + isTemplateMapped());
    container.add(detector3, detector4, detector5);
}
 

public DnDCustomComponentView() {
    Stream.of(EffectAllowed.values()).map(DraggableItem::new)
            .forEach(this::add);

    dropTarget = new Div();
    dropTarget.add(new Text("Drop Here"));
    dropTarget.setWidth("200px");
    dropTarget.setHeight("200px");
    dropTarget.getStyle().set("border", "solid 1px pink");
    add(dropTarget);

    DropTarget.create(dropTarget).addDropListener(event -> event.getSource()
            .add(new Span(event.getDragData().get().toString())));
}
 

public VisibilityView() {
    setId("main");

    Div div = new Div();
    div.setText("Target to make visible/invisible");
    div.setId("visibility");
    div.setVisible(false);

    Label label = new Label("Nested element");
    label.setId("nested-label");
    div.add(label);

    NativeButton updateVisibility = createButton("Update visibility",
            "updateVisibiity",
            event -> div.setVisible(!div.isVisible()));

    NativeButton updateLabelVisibility = createButton(
            "Update label visibility", "updateLabelVisibiity",
            event -> label.setVisible(!label.isVisible()));

    NativeButton updateStyle = createButton(
            "Update target element property", "updateProperty", event -> {
                div.setClassName("foo");
                label.setClassName("bar");
            });

    add(div, updateVisibility, updateStyle, updateLabelVisibility);
}
 

private Card addCard(String tabName, String tabUrl, String heading,
        Component... components) {
    Div tab = tabComponents.computeIfAbsent(tabUrl, url -> {
        navBar.addLink(tabName, getTabUrl(tabUrl));
        return new Div();
    });

    if (heading != null && !heading.isEmpty()) {
        tab.add(new H3(heading));
    }

    Card card = new Card();
    card.getElement().getNode().runWhenAttached(ui -> {
        WhenDefinedManager.get(ui).whenDefined(components, () -> {
            if (components != null && components.length > 0) {
                card.add(components);
            }

            List<SourceCodeExample> list = sourceCodeExamples.get(heading);
            if (list != null) {
                list.stream().map(this::createSourceContent)
                        .forEach(card::add);
            }
        });
    });

    tab.add(card);
    return card;
}
 

@Override
protected void onShow() {
    Label label = new Label();
    label.setId("in-memory");
    label.setText("In memory element");
    getElement().appendVirtualChild(label.getElement());
    getElement().executeJs("window.inMemoryConnector.init(this, $0)",
            label);
    Div target = new Div();
    target.setId("target");
    add(target);
    add(createButton("Add copy of in-memory element to the target", "copy",
            event -> getElement().callJsFunction("useInMemoryElement",
                    target)));
}
 

public LongPollingPushView() {
    Div parent = new Div();
    Span child = new Span("Some text");
    child.setId("child");
    parent.add(child);
    add(parent);
    parent.setVisible(false);

    add(createButton("Toggle visibility", "visibility",
            e -> parent.setVisible(!parent.isVisible())));
}
 

private Div createBox(String identifier) {
    Div box = new Div();
    box.setText(identifier);
    box.setWidth("100px");
    box.setHeight("60px");
    box.getStyle().set("border", "1px solid").set("margin", "10px");
    box.setId("box-" + identifier);
    return box;
}
 

public ScrollView() {
    Div anchorDiv = new Div();
    anchorDiv.setText("I'm the anchor div");
    anchorDiv.setId(ANCHOR_DIV_ID);

    add(createSpacerDiv(300), anchorDiv, createSpacerDiv(2000),
            createAnchorUrl(false, SIMPLE_ANCHOR_URL_ID, ANCHOR_URL,
                    "Go to anchor div (simple link)"),
            createAnchorUrl(true, ROUTER_ANCHOR_URL_ID, ANCHOR_URL,
                    "Go to anchor div (router-link)"),
            createAnchorUrl(true, TRANSITION_URL_ID,
                    LongToOpenView.class.getCanonicalName(),
                    "Go to different page (router-link)"));
}
 

public PolymerTemplateWithoutShadowRootView() {
    Div distractor1 = new Div();
    Div distractor2 = new Div();
    distractor1.setId("content");
    distractor2.setId("content");
    add(distractor1);
    add(new Template());
    add(distractor2);
}
 

public ToggleNullListView() {
    Div container = new Div();

    ServerModelNullListTemplate template = new ServerModelNullListTemplate();
    NativeButton button = createButton("Toggle template", TOGGLE_BUTTON_ID,
            event -> {
                if (template.getParent().isPresent()) {
                    container.remove(template);
                } else {
                    container.add(template);
                }
            });
    add(button, container);
}
 

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.addPropertyChangeListener("valueAsNumber", "blur", event -> {
    });
    multiSync.addPropertyChangeListener("value", "input", event -> {
    });

    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);
}