Examples with FlexItem org.dominokit.domino.ui.grid.flex.FlexItem used on opensource projects

Example 1 with FlexItem

use of org.dominokit.domino.ui.grid.flex.FlexItem in project nalu-examples by NaluKit.

the class ErrorComponent method render.

@Override
public void render() {
    this.dialog = ModalDialog.create(">>To Be Set<<").large().setAutoClose(false);
    this.errorIcon = new Image(64, 64);
    this.errorIcon.setAttribute("src", "media/images/bug-128.png");
    this.route = DominoElement.div().element();
    this.message = DominoElement.div().styler(style -> {
        style.setMarginBottom("12px");
    }).element();
    DominoElement messageElement = DominoElement.div().styler(style -> {
        style.setWidth("100%");
    }).appendChild(DominoElement.div().styler(style -> style.setFloat("left")).appendChild(DominoElement.div().setTextContent("Route:").styler(style -> {
        style.setMarginBottom("6px");
        style.setProperty("font-weight", "bold");
    })).appendChild(DominoElement.div().appendChild(this.route).styler(style -> {
        style.setMarginBottom("24px");
        style.setProperty("font-weight", "bold");
    })).appendChild(DominoElement.div().setTextContent("Message:").styler(style -> {
        style.setMarginBottom("6px");
        style.setProperty("font-weight", "bold");
    })).appendChild(DominoElement.div().appendChild(this.message).styler(style -> {
        style.setMarginBottom("24px");
        style.setProperty("font-weight", "bold");
    })));
    FlexLayout flexLayout = FlexLayout.create().style().add("fill-height").get().setDirection(FlexDirection.LEFT_TO_RIGHT);
    FlexItem flexItemLeft = FlexItem.create().setAlignSelf(FlexAlign.START).setOrder(1).appendChild(this.errorIcon);
    flexLayout.appendChild(flexItemLeft);
    FlexItem flexItemRight = FlexItem.create().styler(style -> style.setMarginLeft("24px")).setAlignSelf(FlexAlign.START).setFlexGrow(1).setOrder(2).appendChild(messageElement);
    flexLayout.appendChild(flexItemRight);
    this.dialog.appendChild(flexLayout);
    this.dialog.appendFooterChild(Button.create("OK").addClickListener(e -> {
        this.hide();
        this.getController().doRouteHome();
    }));
}

Example 2 with FlexItem

use of org.dominokit.domino.ui.grid.flex.FlexItem in project nalu-examples by NaluKit.

the class ErrorComponent method render.

@Override
public void render() {
    this.dialog = ModalDialog.create(">>To Be Set<<").large().setAutoClose(false);
    this.errorIcon = new Image(64, 64);
    this.errorIcon.setAttribute("src", "media/images/bug-128.png");
    this.route = DominoElement.div().element();
    this.message = DominoElement.div().styler(style -> {
        style.setMarginBottom("12px");
    }).element();
    DominoElement messageElement = DominoElement.div().styler(style -> {
        style.setWidth("100%");
    }).appendChild(DominoElement.div().styler(style -> style.setFloat("left")).appendChild(DominoElement.div().setTextContent("Route:").styler(style -> {
        style.setMarginBottom("6px");
        style.setProperty("font-weight", "bold");
    })).appendChild(DominoElement.div().appendChild(this.route).styler(style -> {
        style.setMarginBottom("24px");
        style.setProperty("font-weight", "bold");
    })).appendChild(DominoElement.div().setTextContent("Message:").styler(style -> {
        style.setMarginBottom("6px");
        style.setProperty("font-weight", "bold");
    })).appendChild(DominoElement.div().appendChild(this.message).styler(style -> {
        style.setMarginBottom("24px");
        style.setProperty("font-weight", "bold");
    })));
    FlexLayout flexLayout = FlexLayout.create().style().add("fill-height").get().setDirection(FlexDirection.LEFT_TO_RIGHT);
    FlexItem flexItemLeft = FlexItem.create().setAlignSelf(FlexAlign.START).setOrder(1).setFlexGrow(1).appendChild(this.errorIcon);
    flexLayout.appendChild(flexItemLeft);
    FlexItem flexItemRight = FlexItem.create().styler(style -> style.setMarginLeft("24px")).setAlignSelf(FlexAlign.START).setOrder(2).appendChild(messageElement);
    flexLayout.appendChild(flexItemRight);
    this.dialog.appendChild(flexLayout);
    this.dialog.appendFooterChild(Button.create("OK").addClickListener(e -> {
        this.hide();
        this.getController().doRouteHome();
    }));
}

Example 3 with FlexItem

use of org.dominokit.domino.ui.grid.flex.FlexItem in project domino-ui-demo by DominoKit.

the class FlexLayoutViewImpl method initFlexItems.

@SampleMethod
private void initFlexItems() {
    Slider orderSlider = Slider.create(6);
    Slider flexGrowSlider = Slider.create(10);
    Slider flexShrinkSlider = Slider.create(10);
    TextBox flexBasisTextBox = TextBox.create("Flex Basis").setHelperText("Default size of an element before the remaining space is distributed");
    RadioGroup<String> targetBlockRadioGroup = RadioGroup.create("target-block", "Target block # to play with");
    RadioGroup<String> alignSelfRadioGroup = RadioGroup.create("align-self", "Align self");
    flexItemsCard.setBodyPaddingTop("40px").appendChild(Row.create().appendChild(Column.span4().appendChild(targetBlockRadioGroup.appendChild(Radio.create("0", "1")).appendChild(Radio.create("1", "2")).appendChild(Radio.create("2", "3")).appendChild(Radio.create("3", "4")).appendChild(Radio.create("4", "5")).horizontal()))).appendChild(Row.create().appendChild(Column.span4().appendChild(orderSlider.withThumb()).appendChild(h(5).textContent("Order"))).appendChild(Column.span4().appendChild(flexGrowSlider.withThumb()).appendChild(h(5).textContent("Flex Grow"))).appendChild(Column.span4().appendChild(flexShrinkSlider.withThumb()).appendChild(h(5).textContent("Flex Shrink")))).appendChild(Row.create().appendChild(Column.span6().appendChild(flexBasisTextBox)).appendChild(Column.span6().appendChild(alignSelfRadioGroup.appendChild(Radio.create(FlexAlign.START.name(), "Start")).appendChild(Radio.create(FlexAlign.END.name(), "End")).appendChild(Radio.create(FlexAlign.CENTER.name(), "Center")).appendChild(Radio.create(FlexAlign.STRETCH.name(), "Stretch")).appendChild(Radio.create(FlexAlign.BASE_LINE.name(), "Base line")).horizontal())));
    FlexLayout flexLayout = FlexLayout.create().style().addCss("demo-flex-layout-container").addCss("fill-height").get().setDirection(FlexDirection.LEFT_TO_RIGHT);
    Map<String, FlexItem<HTMLDivElement>> items = new HashMap<>();
    for (int i = 0; i < 5; i++) {
        FlexItem<HTMLDivElement> item = FlexItem.create().style().addCss("demo-flex-layout-block").addCss(colorOf(i + 1).getBackground()).get().setAlignSelf(FlexAlign.START).setOrder(i + 1).appendChild(h(4));
        items.put(i + "", item);
        flexLayout.appendChild(item);
    }
    flexItemsCard.appendChild(div().css("demo-flex-layout-result-container").add(flexLayout).element());
    orderSlider.addSlideHandler(value -> items.get(targetBlockRadioGroup.getValue()).setOrder((int) value));
    flexGrowSlider.addSlideHandler(value -> items.get(targetBlockRadioGroup.getValue()).setFlexGrow((int) value));
    flexShrinkSlider.addSlideHandler(value -> items.get(targetBlockRadioGroup.getValue()).setFlexShrink((int) value));
    alignSelfRadioGroup.addChangeHandler(value -> items.get(targetBlockRadioGroup.getValue()).setAlignSelf(FlexAlign.valueOf(value)));
    flexBasisTextBox.addChangeHandler(value -> items.get(targetBlockRadioGroup.getValue()).setFlexBasis(value));
    targetBlockRadioGroup.addChangeHandler(value -> {
        FlexItem flexItem = items.get(targetBlockRadioGroup.getValue());
        flexGrowSlider.setValue(flexItem.getFlexGrow());
        orderSlider.setValue(flexItem.getOrder());
        flexShrinkSlider.setValue(flexItem.getFlexShrink());
        flexBasisTextBox.setValue(isNull(flexItem.getFlexBasis()) ? "" : flexItem.getFlexBasis());
        alignSelfRadioGroup.setValue(flexItem.getAlignSelf().name());
    });
    targetBlockRadioGroup.setValue("2");
}

Example 4 with FlexItem

use of org.dominokit.domino.ui.grid.flex.FlexItem in project domino-ui-demo by DominoKit.

the class FlexLayoutViewImpl method initLayoutPlayground.

@SampleMethod
private void initLayoutPlayground() {
    RadioGroup<String> alignItemsRadioGroup = RadioGroup.<String>create("align-items").hide();
    CheckBox fillHeightCheckBox = CheckBox.create("Fill height");
    RadioGroup<String> directionsRadioGroup = RadioGroup.create("direction");
    RadioGroup<String> justifyContentRadioGroup = RadioGroup.create("justify-content");
    // ********* settings part ********* //
    Button addBlockButton = Button.create("ADD BLOCK");
    Button resetButton = Button.create("RESET");
    RadioGroup<String> wrapRadioGroup = RadioGroup.create("wrap", "Wrap");
    layoutPlaygroundCard.setBodyPaddingTop("40px").appendChild(Row.create().appendChild(Column.span6().appendChild(directionsRadioGroup.setHelperText("Containers inside Flex Layout can have different directions").setLabel("Directions").appendChild(Radio.create(FlexDirection.LEFT_TO_RIGHT.name(), "Left to right").check()).appendChild(Radio.create(FlexDirection.RIGHT_TO_LEFT.name(), "Right to left")).appendChild(Radio.create(FlexDirection.TOP_TO_BOTTOM.name(), "Top to bottom")).appendChild(Radio.create(FlexDirection.BOTTOM_TO_TOP.name(), "Bottom to top")).horizontal())).appendChild(Column.span2().appendChild(fillHeightCheckBox)).appendChild(Column.span4().appendChild(wrapRadioGroup.appendChild(Radio.create(FlexWrap.NO_WRAP.name(), "No wrap").check()).appendChild(Radio.create(FlexWrap.WRAP_TOP_TO_BOTTOM.name(), "Wrap top to bottom")).appendChild(Radio.create(FlexWrap.WRAP_BOTTOM_TO_TOP.name(), "Wrap bottom to top")).horizontal()))).appendChild(Row.create().appendChild(Column.span6().appendChild(justifyContentRadioGroup.setHelperText("Containers inside Flex Layout can be placed in different ways").setLabel("Justify Content").appendChild(Radio.create(FlexJustifyContent.START.name(), "Start").check()).appendChild(Radio.create(FlexJustifyContent.END.name(), "End")).appendChild(Radio.create(FlexJustifyContent.CENTER.name(), "Center")).appendChild(Radio.create(FlexJustifyContent.SPACE_BETWEEN.name(), "Space between")).appendChild(Radio.create(FlexJustifyContent.SPACE_AROUND.name(), "Space around")).appendChild(Radio.create(FlexJustifyContent.SPACE_EVENLY.name(), "Space evenly")).horizontal())).appendChild(Column.span6().appendChild(alignItemsRadioGroup.setHelperText("Containers inside Flex Layout can be aligned in different ways").setLabel("Align items").appendChild(Radio.create(FlexAlign.START.name(), "Start")).appendChild(Radio.create(FlexAlign.END.name(), "End")).appendChild(Radio.create(FlexAlign.CENTER.name(), "Center")).appendChild(Radio.create(FlexAlign.STRETCH.name(), "Stretch").check()).appendChild(Radio.create(FlexAlign.BASE_LINE.name(), "Base line")).horizontal()))).appendChild(Row.create().fullSpan(column -> column.appendChild(resetButton.linkify().style().addCss(Styles.pull_right)).appendChild(addBlockButton.linkify().style().addCss(Styles.pull_right))));
    // ********* flex layout part ********* //
    FlexLayout flexLayout = FlexLayout.create().style().addCss("demo-flex-layout-container").get().appendChild(FlexItem.create().style().addCss("demo-flex-layout-block").get().appendChild(h(4))).appendChild(FlexItem.create().style().addCss("demo-flex-layout-block").get().appendChild(h(4))).appendChild(FlexItem.create().style().addCss("demo-flex-layout-block").get().appendChild(h(4))).setDirection(FlexDirection.LEFT_TO_RIGHT);
    layoutPlaygroundCard.appendChild(div().css("demo-flex-layout-result-container").add(flexLayout).element());
    // ********* listeners part ********* //
    directionsRadioGroup.addChangeHandler(direction -> {
        FlexDirection flexDirection = FlexDirection.valueOf(direction);
        if (fillHeightCheckBox.isChecked() || isVerticalDirection(flexDirection)) {
            flexLayout.style().addCss("fill-height");
        } else {
            flexLayout.style().removeCss("fill-height");
        }
        flexLayout.setDirection(flexDirection);
    });
    fillHeightCheckBox.addChangeHandler(value -> {
        if (value) {
            alignItemsRadioGroup.show();
            flexLayout.style().addCss("fill-height");
        } else {
            alignItemsRadioGroup.hide();
            flexLayout.style().removeCss("fill-height");
        }
    });
    justifyContentRadioGroup.addChangeHandler(direction -> flexLayout.setJustifyContent(FlexJustifyContent.valueOf(direction)));
    alignItemsRadioGroup.addChangeHandler(direction -> flexLayout.setAlignItems(FlexAlign.valueOf(direction)));
    wrapRadioGroup.addChangeHandler(value -> flexLayout.setWrap(FlexWrap.valueOf(value)));
    List<FlexItem<HTMLDivElement>> dynamicAddedItems = new ArrayList<>();
    addBlockButton.addClickListener(evt -> {
        FlexItem<HTMLDivElement> item = FlexItem.create().style().addCss("demo-flex-layout-block").get().appendChild(h(4));
        flexLayout.appendChild(item);
        dynamicAddedItems.add(item);
    });
    resetButton.addClickListener(evt -> {
        for (FlexItem<HTMLDivElement> dynamicAddedItem : dynamicAddedItems) {
            dynamicAddedItem.remove();
        }
        dynamicAddedItems.clear();
    });
}

Example 5 with FlexItem

use of org.dominokit.domino.ui.grid.flex.FlexItem in project nalu-examples by NaluKit.

the class ErrorComponent method render.

@Override
public void render() {
    dialog = ModalDialog.create("to be set").large().setAutoClose(false);
    Image errorIcon = new Image(64, 64);
    route = DominoElement.div().styler(style -> style.setMarginBottom("12px")).element();
    message = DominoElement.div().styler(style -> style.setMarginBottom("12px")).element();
    content = DominoElement.div();
    DominoElement<HTMLDivElement> messageElement = DominoElement.div().styler(style -> style.setWidth("100%")).appendChild(DominoElement.div().styler(style -> style.setFloat("left")).appendChild(DominoElement.div().setTextContent("Route:").styler(style -> {
        style.setMarginBottom("6px");
        style.setProperty("font-weight", "bold");
    })).appendChild(DominoElement.div().appendChild(route).styler(style -> {
        style.setMarginBottom("24px");
        style.setProperty("font-weight", "normal");
    })).appendChild(DominoElement.div().setTextContent("Message:").styler(style -> {
        style.setMarginBottom("6px");
        style.setProperty("font-weight", "bold");
    })).appendChild(DominoElement.div().appendChild(message).styler(style -> {
        style.setMarginBottom("24px");
        style.setProperty("font-weight", "normal");
    })).appendChild(content));
    FlexLayout flexLayout = FlexLayout.create().style().add("fill-height").get().setDirection(FlexDirection.LEFT_TO_RIGHT);
    FlexItem flexItemLeft = FlexItem.create().setAlignSelf(FlexAlign.START).setOrder(1).appendChild(errorIcon);
    flexLayout.appendChild(flexItemLeft);
    FlexItem flexItemRight = FlexItem.create().styler(style -> style.setMarginLeft("24px")).setAlignSelf(FlexAlign.START).setFlexGrow(1).setOrder(2).appendChild(messageElement);
    flexLayout.appendChild(flexItemRight);
    dialog.appendChild(flexLayout);
    this.dialog.appendFooterChild(Button.create("OK").large().linkify().styler(style -> style.setWidth("128px")).addClickListener(e -> {
        this.hide();
        this.getController().doRouteHome();
    }));
}