Examples with DominoElement org.dominokit.domino.ui.utils.DominoElement used on opensource projects

Example 1 with DominoElement

use of org.dominokit.domino.ui.utils.DominoElement 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 DominoElement

use of org.dominokit.domino.ui.utils.DominoElement 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 DominoElement

use of org.dominokit.domino.ui.utils.DominoElement in project domino-ui-demo by DominoKit.

the class SteppersViewImpl method customColors.

@SampleMethod
private void customColors() {
    TextBox nameTextBox = TextBox.create("Name").setRequired(true).setAutoValidation(true).setFixErrorsPosition(true).addLeftAddOn(Icons.ALL.label());
    TextBox emailTextBox = TextBox.create("Email").setRequired(true).setAutoValidation(true).setFixErrorsPosition(true).addLeftAddOn(Icons.ALL.email());
    TextBox phone = ElementUtil.numbersOnly(TextBox.create("Phone")).setRequired(true).setAutoValidation(true).setFixErrorsPosition(true).addLeftAddOn(Icons.ALL.phone());
    Button nextButton = Button.createDefault("Next").linkify().styler(style -> style.setMinWidth("120px").addCss(Styles.m_l_5, Styles.m_r_5));
    Button prevButton = Button.createDefault("Previous").linkify().styler(style -> style.setMinWidth("120px").addCss(Styles.m_l_5, Styles.m_r_5));
    Button finishButton = Button.createDefault("Finish").linkify().styler(style -> style.setMinWidth("120px").addCss(Styles.m_l_5, Styles.m_r_5));
    DominoElement<HTMLDivElement> completeContent = DominoElement.div().css(Styles.align_center).appendChild(h(3).textContent("Setup completed!")).appendChild(Icons.ALL.checkbox_multiple_marked_circle_outline_mdi().size48().setColor(Color.GREEN));
    Stepper stepper = Stepper.create().setStepStateColors(new Stepper.StepStateColors() {

        @Override
        public Color inactive() {
            return Color.BLACK;
        }

        @Override
        public Color active() {
            return Color.TEAL;
        }

        @Override
        public Color error() {
            return Color.PINK;
        }

        @Override
        public Color completed() {
            return Color.BLUE;
        }

        @Override
        public Color disabled() {
            return Color.BLUE_GREY;
        }
    }).apply(self -> self.appendChild(Step.create("Contact name", "Contact name step").appendChild(Row.create().appendChild(span6().appendChild(nameTextBox.apply(nameBox -> {
        KeyboardEvents.listenOnKeyDown(nameBox.getInputElement()).onEnter(evt -> {
            if (self.getActiveStep().validate().isValid()) {
                self.getActiveStep().complete();
            }
        });
    })))).addValidator(nameTextBox::validate).addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive()) {
            nameTextBox.focus();
        }
    })).appendChild(Step.create("Contact emailTextBox", "Contact emailTextBox step").disable().appendChild(Row.create().appendChild(span6().appendChild(emailTextBox.apply(emailBox -> {
        KeyboardEvents.listenOnKeyDown(emailBox.getInputElement()).onEnter(evt -> {
            if (self.getActiveStep().validate().isValid()) {
                self.getActiveStep().complete();
            }
        });
    })))).addValidator(emailTextBox::validate).addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive()) {
            emailTextBox.focus();
        }
    })).appendChild(Step.create("Contact phone", "Contact phone step").appendChild(Row.create().appendChild(span6().appendChild(phone.apply(phoneBox -> {
        KeyboardEvents.listenOnKeyDown(phoneBox.getInputElement()).onEnter(evt -> {
            if (self.getActiveStep().validate().isValid()) {
                self.getActiveStep().complete();
                self.complete(completeContent);
            }
        });
    })))).addValidator(phone::validate).addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive()) {
            phone.focus();
        }
    })).setStepFooter(FlexLayout.create().setJustifyContent(FlexJustifyContent.SPACE_AROUND).appendChild(FlexItem.create().css(Styles.align_center).appendChild(prevButton.hide().addClickListener(evt -> {
        self.previous();
    }))).appendChild(FlexItem.create().css(Styles.align_center).appendChild(finishButton.hide().addClickListener(evt -> {
        if (self.getActiveStep().validate().isValid()) {
            self.getActiveStep().complete();
            self.complete(completeContent);
        }
    }))).appendChild(FlexItem.create().css(Styles.align_center).appendChild(nextButton.addClickListener(evt -> {
        if (self.getActiveStep().validate().isValid()) {
            self.getActiveStep().complete();
        }
    })))).addStateChangeListener((oldState, step, thisStepper) -> {
        prevButton.toggleDisplay(!step.isFirstStep());
        nextButton.toggleDisplay(!step.isLastStep());
        finishButton.toggleDisplay(step.isLastStep());
    }).addCompleteListener(thisStepper -> Notification.create("All steps completed").show()));
    element.appendChild(Card.create("CUSTOM COLORS STEPPER").appendChild(Row.create().addColumn(span12().appendChild(stepper))).element());
}

Example 4 with DominoElement

use of org.dominokit.domino.ui.utils.DominoElement in project domino-ui-demo by DominoKit.

the class SteppersViewImpl method verticalStepper.

@SampleMethod
private void verticalStepper() {
    TextBox nameTextBox = TextBox.create("Name").setRequired(true).setAutoValidation(true).setFixErrorsPosition(true).addLeftAddOn(Icons.ALL.label());
    TextBox emailTextBox = TextBox.create("Email").setRequired(true).setAutoValidation(true).setFixErrorsPosition(true).addLeftAddOn(Icons.ALL.email());
    TextBox phone = ElementUtil.numbersOnly(TextBox.create("Phone")).setRequired(true).setAutoValidation(true).setFixErrorsPosition(true).addLeftAddOn(Icons.ALL.phone());
    Button nextButton = Button.createDefault("Next").linkify().styler(style -> style.setMinWidth("120px").addCss(Styles.m_l_5, Styles.m_r_5));
    Button prevButton = Button.createDefault("Previous").linkify().styler(style -> style.setMinWidth("120px").addCss(Styles.m_l_5, Styles.m_r_5));
    Button finishButton = Button.createDefault("Finish").linkify().styler(style -> style.setMinWidth("120px").addCss(Styles.m_l_5, Styles.m_r_5));
    DominoElement<HTMLDivElement> completeContent = DominoElement.div().css(Styles.align_center).appendChild(h(3).textContent("Setup completed!")).appendChild(Icons.ALL.checkbox_multiple_marked_circle_outline_mdi().size48().setColor(Color.GREEN));
    Stepper stepper = Stepper.create().addStateChangeListener((oldState, step, stepper1) -> {
        DomGlobal.console.info("Step state changed : from STEPPER. for STEP : " + step.getIndex() + " old State : " + oldState.name());
    }).setDirection(Stepper.StepperDirection.VERTICAL).apply(self -> self.appendChild(Step.create("Contact name", "Contact name step").appendChild(Row.create().appendChild(span6().appendChild(nameTextBox.apply(nameBox -> {
        KeyboardEvents.listenOnKeyDown(nameBox.getInputElement()).onEnter(evt -> {
            if (self.getActiveStep().validate().isValid()) {
                self.getActiveStep().complete();
            }
        });
    })))).addValidator(nameTextBox::validate).addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive()) {
            nameTextBox.focus();
        }
    })).appendChild(Step.create("Contact emailTextBox", "Contact emailTextBox step").addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive() && oldState == Stepper.StepState.INACTIVE) {
            DomGlobal.console.info("Step state changed : STEP - 2 : for step " + step.getIndex() + " old state : " + oldState.name());
        }
    }).appendChild(Row.create().appendChild(span6().appendChild(emailTextBox.apply(emailBox -> {
        KeyboardEvents.listenOnKeyDown(emailBox.getInputElement()).onEnter(evt -> {
            if (self.getActiveStep().validate().isValid()) {
                self.getActiveStep().complete();
            }
        });
    })))).addValidator(emailTextBox::validate).addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive()) {
            emailTextBox.focus();
        }
    })).appendChild(Step.create("Contact phone", "Contact phone step").appendChild(Row.create().appendChild(span6().appendChild(phone.apply(phoneBox -> {
        KeyboardEvents.listenOnKeyDown(phoneBox.getInputElement()).onEnter(evt -> {
            if (self.getActiveStep().validate().isValid()) {
                self.getActiveStep().complete();
                self.complete(completeContent);
            }
        });
    })))).addValidator(phone::validate).addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive()) {
            phone.focus();
        }
    })).setStepFooter(FlexLayout.create().setJustifyContent(FlexJustifyContent.SPACE_AROUND).appendChild(FlexItem.create().css(Styles.align_center).appendChild(prevButton.hide().addClickListener(evt -> {
        self.previous();
    }))).appendChild(FlexItem.create().css(Styles.align_center).appendChild(finishButton.hide().addClickListener(evt -> {
        if (self.getActiveStep().validate().isValid()) {
            self.getActiveStep().complete();
            self.complete(completeContent);
        }
    }))).appendChild(FlexItem.create().css(Styles.align_center).appendChild(nextButton.addClickListener(evt -> {
        if (self.getActiveStep().validate().isValid()) {
            self.getActiveStep().complete();
        }
    })))).addStateChangeListener((oldState, step, thisStepper) -> {
        prevButton.toggleDisplay(!step.isFirstStep());
        nextButton.toggleDisplay(!step.isLastStep());
        finishButton.toggleDisplay(step.isLastStep());
    }).addCompleteListener(thisStepper -> Notification.create("All steps completed").show()));
    element.appendChild(Card.create("VERTICAL STEPPER").appendChild(Row.create().appendChild(span12().appendChild(stepper))).element());
}

Example 5 with DominoElement

use of org.dominokit.domino.ui.utils.DominoElement in project domino-ui-demo by DominoKit.

the class SteppersViewImpl method customIcons.

@SampleMethod
private void customIcons() {
    TextBox nameTextBox = TextBox.create("Name").setRequired(true).setAutoValidation(true).setFixErrorsPosition(true).addLeftAddOn(Icons.ALL.label());
    TextBox emailTextBox = TextBox.create("Email").setRequired(true).setAutoValidation(true).setFixErrorsPosition(true).addLeftAddOn(Icons.ALL.email());
    TextBox phone = ElementUtil.numbersOnly(TextBox.create("Phone")).setRequired(true).setAutoValidation(true).setFixErrorsPosition(true).addLeftAddOn(Icons.ALL.phone());
    Button nextButton = Button.createDefault("Next").linkify().styler(style -> style.setMinWidth("120px").addCss(Styles.m_l_5, Styles.m_r_5));
    Button prevButton = Button.createDefault("Previous").linkify().styler(style -> style.setMinWidth("120px").addCss(Styles.m_l_5, Styles.m_r_5));
    Button finishButton = Button.createDefault("Finish").linkify().styler(style -> style.setMinWidth("120px").addCss(Styles.m_l_5, Styles.m_r_5));
    DominoElement<HTMLDivElement> completeContent = DominoElement.div().css(Styles.align_center).appendChild(h(3).textContent("Setup completed!")).appendChild(Icons.ALL.checkbox_multiple_marked_circle_outline_mdi().size48().setColor(Color.GREEN));
    Function<Step, DominoElement<HTMLElement>> stepIconSupplier = (step) -> DominoElement.of(span()).apply(self -> {
        if (step.getIndex() == 0) {
            self.appendChild(Icons.ALL.account_mdi().size18());
        } else if (step.getIndex() == 1) {
            self.appendChild(Icons.ALL.contact_mail_mdi().size18());
        } else {
            self.appendChild(Icons.ALL.contact_phone_mdi().size18());
        }
    });
    Stepper stepper = Stepper.create().setStepNumberRenderer(new Stepper.StepNumberRenderer() {

        @Override
        public Node inactiveElement(Step step, Stepper.StepStateColors stepStateColors) {
            return stepIconSupplier.apply(step).css(stepStateColors.inactive().getBackground()).element();
        }

        @Override
        public Node activeElement(Step step, Stepper.StepStateColors stepStateColors) {
            return stepIconSupplier.apply(step).css(stepStateColors.active().getBackground()).element();
        }

        @Override
        public Node errorElement(Step step, Stepper.StepStateColors stepStateColors) {
            return stepIconSupplier.apply(step).css(stepStateColors.error().getBackground()).element();
        }

        @Override
        public Node completedElement(Step step, Stepper.StepStateColors stepStateColors) {
            return stepIconSupplier.apply(step).css(stepStateColors.completed().getBackground()).element();
        }

        @Override
        public Node disabledElement(Step step, Stepper.StepStateColors stepStateColors) {
            return stepIconSupplier.apply(step).css(stepStateColors.disabled().getBackground()).element();
        }
    }).apply(self -> self.appendChild(Step.create("Contact name", "Contact name step").appendChild(Row.create().appendChild(span6().appendChild(nameTextBox.apply(nameBox -> {
        KeyboardEvents.listenOnKeyDown(nameBox.getInputElement()).onEnter(evt -> {
            if (self.getActiveStep().validate().isValid()) {
                self.getActiveStep().complete();
            }
        });
    })))).addValidator(nameTextBox::validate).addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive()) {
            nameTextBox.focus();
        }
    })).appendChild(Step.create("Contact emailTextBox", "Contact emailTextBox step").appendChild(Row.create().appendChild(span6().appendChild(emailTextBox.apply(emailBox -> {
        KeyboardEvents.listenOnKeyDown(emailBox.getInputElement()).onEnter(evt -> {
            if (self.getActiveStep().validate().isValid()) {
                self.getActiveStep().complete();
            }
        });
    })))).addValidator(emailTextBox::validate).addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive()) {
            emailTextBox.focus();
        }
    })).appendChild(Step.create("Contact phone", "Contact phone step").appendChild(Row.create().appendChild(span6().appendChild(phone.apply(phoneBox -> {
        KeyboardEvents.listenOnKeyDown(phoneBox.getInputElement()).onEnter(evt -> {
            if (self.getActiveStep().validate().isValid()) {
                self.getActiveStep().complete();
                self.complete(completeContent);
            }
        });
    })))).addValidator(phone::validate).addStateChangeListener((oldState, step, stepper1) -> {
        if (step.isActive()) {
            phone.focus();
        }
    })).setStepFooter(FlexLayout.create().setJustifyContent(FlexJustifyContent.SPACE_AROUND).appendChild(FlexItem.create().css(Styles.align_center).appendChild(prevButton.hide().addClickListener(evt -> {
        self.previous();
    }))).appendChild(FlexItem.create().css(Styles.align_center).appendChild(finishButton.hide().addClickListener(evt -> {
        if (self.getActiveStep().validate().isValid()) {
            self.getActiveStep().complete();
            self.complete(completeContent);
        }
    }))).appendChild(FlexItem.create().css(Styles.align_center).appendChild(nextButton.addClickListener(evt -> {
        if (self.getActiveStep().validate().isValid()) {
            self.getActiveStep().complete();
        }
    })))).addStateChangeListener((oldState, step, thisStepper) -> {
        prevButton.toggleDisplay(!step.isFirstStep());
        nextButton.toggleDisplay(!step.isLastStep());
        finishButton.toggleDisplay(step.isLastStep());
    }).addCompleteListener(thisStepper -> Notification.create("All steps completed").show()));
    element.appendChild(Card.create("CUSTOM ICONS STEPPER").appendChild(Row.create().addColumn(span12().appendChild(stepper))).element());
}