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

public MultipleAnchorsView() {
    boolean isRouterLink = true;
    Div anchorDivContainer = new Div();

    for (int i = 0; i < NUMBER_OF_ANCHORS; i++) {
        String anchorDivId = ANCHOR_DIV_ID_BASE + i;
        Div anchorDiv = new Div();
        anchorDiv.setId(anchorDivId);
        anchorDiv.setText("I am an anchor div #" + i);

        Anchor anchorUrl = ScrollView.createAnchorUrl(isRouterLink,
                ANCHOR_URL_ID_BASE + i,
                MultipleAnchorsView.class.getCanonicalName() + '#'
                        + anchorDivId,
                "Anchor url #" + i);
        isRouterLink = !isRouterLink;

        add(anchorUrl);
        anchorDivContainer.add(ScrollView.createSpacerDiv(200), anchorDiv);
    }

    add(ScrollView.createSpacerDiv(1000), anchorDivContainer, ScrollView.createSpacerDiv(1000));
}
 

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

    createEventLog();
    add(eventLog);

    Div dropLane = createDropLane(DropEffect.MOVE);
    Div startLane = createLane("start");
    box = createDraggableBox(EffectAllowed.MOVE);
    startLane.add(createDisableButton(), createEnableButton(), box);

    add(startLane, dropLane);
    addLogEntry(box.getId() + "enabled!");
}
 

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

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

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

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

@Override
protected Div initContent() {
    Div div = new Div();
    nameField = new NameField();
    nameField.setId(NAME_FIELD_ID);
    Div name = new Div();
    name.setText("Name on server: " + nameField.getName());
    name.setId(NAME_ID);
    nameField.addNameChangeListener(e -> {
        name.setText("Name on server: " + nameField.getName());
    });
    div.add(name, nameField);
    return 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 EnabledView() {
    setId("main");

    Div div = new Div();
    div.setText("Target to enable/disable");
    div.setId("enabled");
    div.getElement().setEnabled(false);

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

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

    NativeButton updateEnableButton = createButton(
            "Change enable state for buttons", "enableButton", event -> {
                updateStyle.getElement()
                        .setEnabled(!updateStyle.getElement().isEnabled());
                updateStyle.setClassName("disabled",
                        !updateStyle.getElement().isEnabled());
            });

    add(div, updateStyle, updateEnableButton);
}
 

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

public FireEventComponent() {
    Input number1 = new Input();
    number1.setId("number1");

    Input number2 = new Input();
    number2.setId("number2");

    NativeButton button = new NativeButton("Add numbers");
    button.setId("button");

    button.addClickListener(event -> {
        try {
            double n1 = Double.parseDouble(number1.getValue());
            double n2 = Double.parseDouble(number2.getValue());
            dispatchSum(n1, n2);
        } catch (NumberFormatException e) {
            dispatchError(e.getMessage());
        }
    });

    add(number1, number2, button);

    Div div = new Div();
    NativeButton button1 = new NativeButton("Button 1",
            event -> buttonConsumer.accept(OptionsType.NoBubble_NoCancel));
    button1.setId("b1");
    NativeButton button2 = new NativeButton("Button 2",
            event -> buttonConsumer.accept(OptionsType.Bubble_NoCancel));
    button2.setId("b2");
    NativeButton button3 = new NativeButton("Button 3",
            event -> buttonConsumer.accept(OptionsType.Bubble_Cancel));
    button3.setId("b3");
    div.add(button1, button2, button3);
    add(div);
}
 

public LeftSubmenu(String caption, Component icon, List<Component> submenuElements) {
    submenuContainer = new LeftSubmenuContainer();
    submenuContainer.getStyle()
            .set("border-radius", "var(--app-layout-menu-button-border-radius)")
            .set("background", "var(--app-layout-drawer-submenu-background-color)");
    getSubmenuContainer().add(submenuElements.toArray(new Component[]{}));
    applyParentToItems(submenuElements.stream());
    toggleWrapper = new Div();
    toggleWrapper.getStyle().set("position", "relative");

    item = new LeftIconItem(caption, icon);
    item.setHighlightCondition((routerLink, event) -> false);
    item.setHighlightAction((routerLink, highlight) -> {
    });
    ironIcon = new IronIcon("vaadin", "chevron-down-small");
    ironIcon.addClassName("collapse-icon");

    ironIcon.getElement().getStyle()
            .set("fill", "var(--expand-icon-fill-color)")
            .set("position", "absolute")
            .set("right", "var(--app-layout-menu-toggle-button-padding)")
            .set("top", "50%")
            .set("transform", "translate(0%, -50%) rotate(0deg)")
            .set("transition", "transform 0.3s ease")
            .set("pointer-events", "none");

    item.add(ironIcon);
    toggleWrapper.add(item);
    getContent().getElement().appendChild(toggleWrapper.getElement());
    getContent().addCollapsibleContent(submenuContainer);
    getContent().getElement().getStyle().set("width", "100%");
    this.caption = caption;
    this.icon = icon;
}
 

public Top() {
    contentPanel.setSizeFull();
    getElement().getClassList().addAll(Arrays.asList("app-layout-behaviour-" + getStyleName(), "app-layout"));
    appBar.add(titleWrapper, paperTabWrapper, appBarElementWrapper);
    paperTabWrapper.setFlexGrow(1.0, titleWrapper);
    paperTabWrapper.setWidth("100%");
    paperTabWrapper.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
    appBar.setWidth("100%");
    appBar.setHeight("100%");

    appBarElements = new Div();
    appBarElements.setHeight("100%");
    appBarElements.getElement().setAttribute("slot", "app-bar-content");
    contentHolder = new Div();
    contentHolder.setHeight("100%");
    contentHolder.setWidth("100%");
    contentHolder.getElement().setAttribute("slot", "application-content");

    appBarElements.add(appBar);
    appBarElementWrapper.setSpacing(false);
    appBarElementWrapper.add(appBarElementContainer);
    appBarElementContainer.setHeight("100%");
    appBarElementWrapper.setAlignItems(FlexComponent.Alignment.START);
    titleWrapper.setHeight("100%");
    titleWrapper.setAlignItems(FlexComponent.Alignment.CENTER);
    menuButton.setIcon(VaadinIcon.ARROW_LEFT.create());
    menuButton.addThemeNames(ButtonVariant.LUMO_TERTIARY.getVariantName(), ButtonVariant.LUMO_ICON.getVariantName(), ButtonVariant.LUMO_LARGE.getVariantName());
    getElement().appendChild(appBarElements.getElement(), contentHolder.getElement());
}
 

public SystemView() {
    setAlignItems(Alignment.CENTER);
    Div infoDiv = new Div();
    infoDiv.add(new H3("JVM"));
    Grid<Tuple2<String, String>> appMetadataGrid = new Grid<>();
    appMetadataGrid.setItems(systemInfo());
    appMetadataGrid.addColumn(Tuple2::getT1).setHeader("Name");
    appMetadataGrid.addColumn(Tuple2::getT2).setHeader("Value");
    appMetadataGrid.setWidth("1280px");
    infoDiv.add(appMetadataGrid);
    add(infoDiv);
}
 

public DashboardView(@Autowired RSocketBrokerHandlerRegistry handlerRegistry,
                     @Autowired ServiceRoutingSelector serviceRoutingSelector,
                     @Autowired RSocketBrokerManager rSocketBrokerManager) {
    this.handlerRegistry = handlerRegistry;
    this.serviceRoutingSelector = serviceRoutingSelector;
    this.rSocketBrokerManager = rSocketBrokerManager;
    setAlignItems(Alignment.CENTER);
    //---- top
    HorizontalLayout top = new HorizontalLayout();
    top.setAlignItems(Alignment.CENTER);
    add(top);
    // brokers panel
    Panel brokersPanel = new Panel("Brokers");
    brokersPanel.add(brokersCount);
    top.add(brokersPanel);
    // apps panel
    Panel appsPanel = new Panel("Apps");
    appsPanel.add(appsCount);
    top.add(appsPanel);
    // services panel
    Panel servicePanel = new Panel("Services");
    servicePanel.add(servicesCount);
    top.add(servicePanel);
    // connections panel
    Panel connectionPanel = new Panel("Connections");
    connectionPanel.add(connectionsCount);
    top.add(connectionPanel);
    // requests count panel
    Panel requestsPanel = new Panel("Requests");
    requestsPanel.add(requestsCounter);
    top.add(requestsPanel);
    //--- last ten apps
    Div div2 = new Div();
    div2.add(new H3("Last apps"));
    appMetadataGrid.addColumn(AppMetadata::getName).setHeader("App Name");
    appMetadataGrid.addColumn(AppMetadata::getIp).setHeader("IP");
    appMetadataGrid.addColumn(AppMetadata::getConnectedAt).setHeader("Timestamp");
    appMetadataGrid.setWidth("1024px");
    div2.add(appMetadataGrid);
    add(div2);
}
 

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

/**
 * Adds a demo that shows how the component looks like with specific
 * variants applied.
 *
 * @param componentSupplier
 *            a method that creates the component to which variants will be
 *            applied to
 * @param addVariant
 *            a function that adds the new variant to the component
 * @param removeVariant
 *            a function that removes the variant from the component
 * @param variantToThemeName
 *            function that converts variant to an html theme name
 * @param variants
 *            list of variants to show in the demos
 * @param <T>
 *            variants' type
 * @param <C>
 *            component's type
 */
protected <T extends Enum<?>, C extends Component & HasTheme> void addVariantsDemo(
        Supplier<C> componentSupplier, BiConsumer<C, T> addVariant,
        BiConsumer<C, T> removeVariant,
        Function<T, String> variantToThemeName, T... variants) {

    C component = componentSupplier.get();
    component.setId(COMPONENT_WITH_VARIANTS_ID);

    Div message = new Div();
    message.setText(
            "Toggle a variant to see how the component's appearance will change.");

    Div variantsToggles = new Div();
    variantsToggles.setId(VARIANT_TOGGLE_BUTTONS_DIV_ID);
    for (T variant : variants) {
        if (variant.name().startsWith("LUMO_")) {
            String variantName = variantToThemeName.apply(variant);
            variantsToggles
                    .add(new NativeButton(
                            getButtonText(variantName,
                                    component.getThemeNames()
                                            .contains(variantName)),
                            event -> {
                                boolean variantPresent = component
                                        .getThemeNames()
                                        .contains(variantName);
                                if (variantPresent) {
                                    removeVariant.accept(component,
                                            variant);
                                } else {
                                    addVariant.accept(component, variant);
                                }
                                event.getSource().setText(getButtonText(
                                        variantName, !variantPresent));
                            }));

        }
    }
    addCard("Theme variants usage", message, component, variantsToggles);
}
 

public TopLarge() {
    contentPanel.setSizeFull();

    paperTabWrapper.getElement().getStyle()
            .set("flex-grow", "1")
            .set("flex-shrink", "1")
            .set("align-self", "flex-end");
    paperTabWrapper.setWidthFull();
    paperTabWrapper.setHeight("var(--app-layout-bar-height)");
    paperTabWrapper.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);

    getElement().getClassList().addAll(Arrays.asList("app-layout-behaviour-" + getStyleName(), "app-layout"));
    appBar.add(titleWrapper, appBarElementWrapper);
    appBar.setFlexGrow(1.0, titleWrapper);
    appBar.setWidthFull();
    appBar.setHeightFull();
    appBarWrapper.add(appBar, paperTabWrapper);
    appBarWrapper.setMargin(false);
    appBarWrapper.setPadding(false);
    appBarWrapper.setSpacing(false);
    appBarElements = new Div();
    appBarElements.setHeightFull();
    appBarElements.getElement().setAttribute("slot", "app-bar-content");
    contentElement = new Div();
    contentElement.setHeightFull();
    contentElement.setWidthFull();
    contentElement.getElement().setAttribute("slot", "application-content");
    appBarElements.add(appBarWrapper);
    appBarElementWrapper.setSpacing(false);
    appBarElementWrapper.add(appBarElementContainer);
    appBarElementContainer.setHeightFull();
    appBarElementWrapper.setAlignItems(FlexComponent.Alignment.START);
    titleWrapper.setHeightFull();
    titleWrapper.setWidthFull();
    titleWrapper.setAlignItems(FlexComponent.Alignment.CENTER);
    titleWrapper.setHeight("var(--app-layout-bar-height)");

    appBarElementWrapper.setAlignItems(FlexComponent.Alignment.START);
    appBarElementWrapper.setHeight("var(--app-layout-bar-height)");
    menuButton.setIcon(VaadinIcon.ARROW_LEFT.create());
    menuButton.addThemeNames(ButtonVariant.LUMO_TERTIARY.getVariantName(), ButtonVariant.LUMO_ICON.getVariantName(), ButtonVariant.LUMO_LARGE.getVariantName());
    getElement().appendChild(appBarElements.getElement(), contentElement.getElement());
}