Java Code Examples for com.vaadin.flow.component.html.Div#setId()

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

public PreserveOnRefreshView() {
    // create unique content for this instance
    final String uniqueId = Long.toString(new Random().nextInt());

    final Div componentId = new Div();
    componentId.setId(COMPONENT_ID);
    componentId.setText(uniqueId);
    add(componentId);

    // add an element to keep track of number of attach events
    attachCounter = new Div();
    attachCounter.setId(ATTACHCOUNTER_ID);
    attachCounter.setText("0");
    add(attachCounter);

    // also add an element as a separate UI child. This is expected to be
    // transferred on refresh (mimicking dialogs and notifications)
    final Element looseElement = new Element("div");
    looseElement.setProperty("id", NOTIFICATION_ID);
    looseElement.setText(uniqueId);
    UI.getCurrent().getElement().insertChild(0, looseElement);

    StreamResource resource = new StreamResource("filename",
            () -> new ByteArrayInputStream(
                    "foo".getBytes(StandardCharsets.UTF_8)));
    Anchor download = new Anchor("", "Download file");
    download.setHref(resource);
    download.setId("link");
    add(download);
}
 

@EventHandler
private void valueUpdated() {
    Div div = new Div();
    div.setId("value-update");
    div.setText(getStatus().getMessage());
    ((HasComponents) getParent().get()).add(div);
}
 

private void addLogEntry(String eventDetails) {
    Div div = new Div();
    eventCounter++;
    div.add(eventCounter + ": " + eventDetails);
    div.setId("event-" + eventCounter);
    eventLog.add(div);
}
 

private Div createLane(String identifier) {
    Div lane = new Div();
    lane.add(identifier);
    lane.setId("lane-" + identifier);
    lane.getStyle().set("margin", "20px").set("border", "1px solid black")
            .set("display", "inline-block");
    lane.setHeightFull();
    lane.setWidth("150px");
    return lane;
}
 

public WaitForVaadinView() {
    message = new Div();
    message.setText("Not updated");
    message.setId("message");

    button = new NativeButton("Click to update", e -> waitAndUpdate());

    add(message, button);
}
 

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 DomListenerOnAttachView() {
    Div status = new Div();
    status.setText("Waiting for event");
    status.setId("status");

    Element element = new Element("event-on-attach");
    element.addEventListener("attach", event -> {
        status.setText("Event received");
    });

    getElement().appendChild(element, status.getElement());
}
 

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

    NativeButton updateMessageButton = createButton("Update", "update",
            event -> message.setText("Updated"));

    NativeButton closeSessionButton = createButton("Close session",
            "close-session",
            event -> VaadinSession.getCurrent().close());

    NativeButton enableNotificationButton = createButton(
            "Enable session expired notification", "enable-notification",
            event -> enableSessionExpiredNotification());

    NativeButton causeExceptionButton = createButton("Cause exception",
            "cause-exception",
            event -> showInternalError());

    NativeButton resetSystemMessagesButton = createButton(
            "Reset system messages", "reset-system-messages",
            event -> resetSystemMessages());

    add(message, updateMessageButton, closeSessionButton,
            enableNotificationButton, causeExceptionButton,
            resetSystemMessagesButton);
}
 

public CountUIsView() {
    Div count = new Div();
    add(count);
    count.setId("uis");

    // Don't show the UIs number right away on the component CTOR. Make it
    // explicit via action. At this point all UIs should be already
    // initialized
    NativeButton showUisNumber = new NativeButton("Show created UIs number",
            event -> count.setText(String.valueOf(
                    TestingServiceInitListener.getNotNavigatedUis())));
    add(showUisNumber);
}
 

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

public DependencyFilterView() {
    super("");
    Div filtered = new Div();
    filtered.setText("filtered");
    filtered.setId("filtered-css");
    add(filtered);
}
 

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

    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().addJavaScript("/not-found.js");
            });
    loadUnavailableResources.setId("loadUnavailableResources");

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

    add(jsOrder, allBlue, loadUnavailableResources, new Hr(), log);
}
 

@Override
protected void onShow() {
    Div version = new Div();
    version.setId("version");
    add(version);
    String client = "window.Vaadin.Flow.clients[Object.keys(Vaadin.Flow.clients).filter(k => k !== 'TypeScript')]";
    String versionJs = "var msg = '';" + "var versionInfoMethod = " + client
            + ".getVersionInfo;" + "if (versionInfoMethod) {"
            + "  msg += 'version: '+versionInfoMethod().flow;" + "} else {" //
            + "  msg += 'versionInfoMethod not published';" //
            + "}" //
            + "$0.innerHTML = msg;";
    getPage().executeJs(versionJs, version);

    Div productionMode = new Div();
    productionMode.setId("productionMode");
    add(productionMode);
    String productionModeJs = "var productionMode = " + client
            + ".productionMode;"
            + "$0.innerText = 'Production mode: '+productionMode;";
    getPage().executeJs(productionModeJs, productionMode);

    Div div = new Div();
    div.setId("poll");
    div.setText("Click to poll using JS API");
    getPage().executeJs("$0.addEventListener('click', function() {"
            + client + ".poll();" //
            + "});", div);
    add(div);

    Span pollCounter = new Span("No polls");
    pollCounter.setId("pollCounter");
    add(pollCounter);
    UI.getCurrent().addPollListener(e -> {
        pollCount++;
        pollCounter.setText("Poll called " + pollCount + " times");
    });
}
 

@EventHandler
private void sync() {
    Div div = new Div();
    div.setId("synced-msg");
    div.setText(getStatus().getMessage());
    ((HasComponents) getParent().get()).add(div);
}
 

private Div createDiv(String id, String text) {
    Div div = new Div();
    div.setId(id);
    div.setText(text);
    return div;
}
 

public DnDAttachDetachView() {
    setSizeFull();

    buttonSwitchViews.setText("Click to detach OR attach");
    buttonSwitchViews.setId(SWAP_BUTTON_ID);
    buttonSwitchViews.getStyle().set("border", "1px solid black");
    buttonSwitchViews.setHeight("20px");
    buttonSwitchViews.setWidth("200px");

    buttonRemoveAdd.setText("Click to detach AND attach");
    buttonRemoveAdd.setId(MOVE_BUTTON_ID);
    buttonRemoveAdd.getStyle().set("border", "1px solid black");
    buttonRemoveAdd.setHeight("20px");
    buttonRemoveAdd.setWidth("200px");

    add(buttonSwitchViews, buttonRemoveAdd);

    Div div = new Div();
    div.setText("Text To Drag");
    div.setId(DRAGGABLE_ID);
    div.getStyle().set("background-color", "grey");
    add(div);

    add(view1);
    view1.setWidth("500px");
    view1.setHeight("500px");
    view1.getStyle().set("background-color", "pink");
    view1.setId(VIEW_1_ID);

    view2.setWidth("500px");
    view2.setHeight("500px");
    view2.setId(VIEW_2_ID);

    // need to set the effect allowed and drop effect for the simulation
    DragSource<Div> dragSource = DragSource.create(div);
    dragSource.addDragStartListener(
            event -> add(new Span("Start: " + counter)));
    dragSource.setEffectAllowed(EffectAllowed.COPY);

    DropTarget<Div> dt = DropTarget.create(view1);
    dt.setDropEffect(DropEffect.COPY);

    buttonSwitchViews.addClickListener(event -> {
        if (getChildren().anyMatch(component -> component == view1)) {
            remove(div, view1);
            add(view2);
        } else {
            remove(view2);
            add(div, view1);
        }
    });
    buttonRemoveAdd.addClickListener(event -> {
        remove(div, view1);
        add(div, view1);
    });
    DropTarget.configure(view1).addDropListener(this::onDrop);
}
 

public DnDView() {
    setWidth("1000px");
    setHeight("800px");
    getStyle().set("display", "flex");

    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");
    add(eventLog);

    Div startLane = createLane("start");
    startLane.add(createDraggableBox(null));
    Stream.of(EffectAllowed.values()).map(this::createDraggableBox)
            .forEach(startLane::add);

    Div noEffectLane = createDropLane(null);
    Div copyDropLane = createDropLane(DropEffect.COPY);
    Div moveDropLane = createDropLane(DropEffect.MOVE);
    Div linkDropLane = createDropLane(DropEffect.LINK);
    Div noneDropLane = createDropLane(DropEffect.NONE);

    Div deactivatedLane = createDropLane(DropEffect.COPY);
    deactivatedLane.setId("lane-deactivated");
    deactivatedLane.getChildren().findFirst().ifPresent(
            component -> component.getElement().setText("deactivated"));
    DropTarget.configure(deactivatedLane, false);

    eventLog.add(createToggleDropTargetsButton(noEffectLane, copyDropLane,
            moveDropLane, linkDropLane, noneDropLane));
    eventLog.add(createToggleDragSourcesButton(startLane));

    add(startLane, noEffectLane, copyDropLane, moveDropLane, linkDropLane,
            noneDropLane, deactivatedLane);
}