Examples with CheckBox org.dominokit.domino.ui.forms.CheckBox used on opensource projects

Example 1 with CheckBox

use of org.dominokit.domino.ui.forms.CheckBox in project domino-ui-demo by DominoKit.

the class FormsValidationsViewImpl method initValidations.

@SampleMethod
private void initValidations() {
    FieldsGrouping fieldsGrouping = FieldsGrouping.create();
    TextBox name = TextBox.create("Name").groupBy(fieldsGrouping);
    TextBox surename = TextBox.create("Surename").groupBy(fieldsGrouping);
    TextBox email = TextBox.create("Email").groupBy(fieldsGrouping);
    RadioGroup<String> gender = RadioGroup.<String>create("gender", "Gender").appendChild(Radio.create("male", "Male")).appendChild(Radio.create("female", "Female")).horizontal().setShowRequiredIndicator(false).groupBy(fieldsGrouping);
    TextArea description = TextArea.create("Description").groupBy(fieldsGrouping);
    TextBox password = TextBox.password("Password").groupBy(fieldsGrouping);
    CheckBox termsAndConditions = CheckBox.create("I have read and accept the terms").groupBy(fieldsGrouping);
    Select language = Select.create("Language").appendChild(SelectOption.create("english", "English")).appendChild(SelectOption.create("france", "France")).appendChild(SelectOption.create("arabic", "Arabic")).groupBy(fieldsGrouping);
    fieldsGrouping.setAutoValidation(true).setRequired(true);
    validationsCard.appendChild(Row.create().addColumn(Column.span12().appendChild(name))).appendChild(Row.create().addColumn(Column.span12().appendChild(surename))).appendChild(Row.create().addColumn(Column.span12().appendChild(email))).appendChild(Row.create().addColumn(Column.span12().appendChild(gender))).appendChild(Row.create().addColumn(Column.span12().appendChild(description))).appendChild(Row.create().addColumn(Column.span12().appendChild(password))).appendChild(Row.create().addColumn(Column.span12().appendChild(language))).appendChild(Row.create().addColumn(Column.span12().appendChild(termsAndConditions))).appendChild(Row.create().addColumn(Column.span12().appendChild(Button.createPrimary("REGISTER").addClickListener(evt -> {
        ValidationResult validationResult = fieldsGrouping.validate();
        if (validationResult.isValid()) {
            fieldsGrouping.clear();
        } else {
            Notification.createDanger("Error " + validationResult.getErrorMessage()).show();
        }
    }))));
}

Example 2 with CheckBox

use of org.dominokit.domino.ui.forms.CheckBox in project domino-ui-demo by DominoKit.

the class GridLayoutViewImpl method initLayoutSamples.

private void initLayoutSamples() {
    GridLayout gridLayout = GridLayout.create().style().setHeight("500px").get();
    gridLayout.getContentElement().style().addCss("demo-layout-section", "demo-content");
    gridLayout.getHeaderElement().style().addCss("demo-layout-section", "demo-header");
    gridLayout.getFooterElement().style().addCss("demo-layout-section", "demo-l-footer");
    gridLayout.getLeftElement().style().addCss("demo-layout-section", "demo-left");
    gridLayout.getRightElement().style().addCss("demo-layout-section", "demo-right");
    gridLayout.getContentElement().appendChild(span().textContent("Content").element());
    gridLayout.getHeaderElement().appendChild(span().textContent("Header").element());
    gridLayout.getFooterElement().appendChild(span().textContent("Footer").element());
    gridLayout.getLeftElement().appendChild(span().textContent("Left").element());
    gridLayout.getRightElement().appendChild(span().textContent("Right").element());
    Slider headerSlider = Slider.create(6, 0, 0).withThumb().setStep(1);
    headerSlider.addChangeHandler(value -> {
        if (value == 0) {
            gridLayout.hideHeader();
        } else {
            gridLayout.setHeaderSpan(SectionSpan.valueOf("_" + value));
        }
    });
    Slider leftSlider = Slider.create(6, 0, 0).withThumb().setStep(1);
    CheckBox leftSpanUpCheck = CheckBox.create("Span Up");
    CheckBox leftSpanDownCheck = CheckBox.create("Span Down");
    leftSpanUpCheck.addChangeHandler(value -> {
        if (leftSlider.getValue() > 0) {
            gridLayout.setLeftSpan(SectionSpan.valueOf("_" + leftSlider.getValue()), value, leftSpanDownCheck.getValue());
        }
    });
    leftSpanDownCheck.addChangeHandler(value -> {
        if (leftSlider.getValue() > 0) {
            gridLayout.setLeftSpan(SectionSpan.valueOf("_" + leftSlider.getValue()), leftSpanUpCheck.getValue(), value);
        }
    });
    leftSlider.addChangeHandler(value -> {
        if (value == 0) {
            gridLayout.hideLeft();
        } else {
            gridLayout.setLeftSpan(SectionSpan.valueOf("_" + value), leftSpanUpCheck.getValue(), leftSpanDownCheck.getValue());
        }
    });
    Slider rightSlider = Slider.create(6, 0, 0).withThumb().setStep(1);
    CheckBox rightSpanUpCheck = CheckBox.create("Span Up");
    CheckBox rightSpanDownCheck = CheckBox.create("Span Down");
    rightSpanUpCheck.addChangeHandler(value -> {
        if (rightSlider.getValue() > 0) {
            gridLayout.setRightSpan(SectionSpan.valueOf("_" + rightSlider.getValue()), value, rightSpanDownCheck.getValue());
        }
    });
    rightSpanDownCheck.addChangeHandler(value -> {
        if (rightSlider.getValue() > 0) {
            gridLayout.setRightSpan(SectionSpan.valueOf("_" + rightSlider.getValue()), rightSpanUpCheck.getValue(), value);
        }
    });
    rightSlider.addChangeHandler(value -> {
        if (value == 0) {
            gridLayout.hideRight();
        } else {
            gridLayout.setRightSpan(SectionSpan.valueOf("_" + value), rightSpanUpCheck.getValue(), rightSpanDownCheck.getValue());
        }
    });
    Slider footerSlider = Slider.create(6, 0, 0).withThumb().setStep(1);
    footerSlider.addChangeHandler(value -> {
        if (value == 0) {
            gridLayout.hideFooter();
        } else {
            gridLayout.setFooterSpan(SectionSpan.valueOf("_" + value));
        }
    });
    Slider gapSlider = Slider.create(10, 0, 0).withThumb().setStep(1).addChangeHandler(value -> gridLayout.setGap(value + "px"));
    element.appendChild(Card.create().appendChild(Row.create().addColumn(Column.span2().appendChild(headerSlider).appendChild(h(5).textContent("Header"))).addColumn(Column.span2().appendChild(leftSlider).appendChild(h(5).textContent("Left")).appendChild(leftSpanUpCheck).appendChild(leftSpanDownCheck)).addColumn(Column.span2().appendChild(rightSlider).appendChild(h(5).textContent("Right")).appendChild(rightSpanUpCheck).appendChild(rightSpanDownCheck)).addColumn(Column.span2().appendChild(footerSlider).appendChild(h(5).textContent("Footer"))).addColumn(Column.span2().appendChild(gapSlider).appendChild(h(5).textContent("Gap")))).appendChild(gridLayout).element());
    element.appendChild(Card.create("USAGE").appendChild(BlockHeader.create("Basic", "Grid layout is a 12 columns grid based layout with a content section and another 4 optional sections: Header. Footer, Left and Right. ").appendChild(a().attr("href", "https://developer.mozilla.org/en-US/docs/Web/CSS/grid").textContent("Please checkout css grid on MDN")).appendChild(br())).appendChild(h(5).textContent("The GridLayout is a single div element that can hold up to 5 other divs for each section")).appendChild(br()).appendChild(h(5).textContent("The Content")).appendChild(h(6).textContent("Content section is the only section in the GridLayout by default, it covers all 12 rows and columns of the grid by default.")).appendChild(br()).appendChild(h(5).textContent("Creating a grid layout")).appendChild(CodeCard.preBlock("GridLayout gridLayout = GridLayout.create()\n" + "                .style()\n" + "                .setHeight(\"500px\").get();")).appendChild(h(6).textContent("This will create a gridlayout of 500px.")).appendChild(br()).appendChild(h(5).textContent("Changing a section size")).appendChild(CodeCard.preBlock("gridLayout.setHeaderSpan(SectionSpan._2);\n" + "gridLayout.setLeftSpan(SectionSpan._3);\n" + "gridLayout.setRightSpan(SectionSpan._4);\n" + "gridLayout.setFooterSpan(SectionSpan._2);")).appendChild(h(6).textContent("You can span a section to cover up to 6 rows or columns.")).appendChild(br()).appendChild(h(4).textContent("Adding elements to the gridLayout sections")).appendChild(br()).appendChild(CodeCard.preBlock("gridLayout.getContentElement().appendChild(otherElement);\n" + "gridLayout.getHeaderElement().appendChild(otherElement);\n" + "gridLayout.getLeftElement().appendChild(otherElement);\n" + "gridLayout.getRightElement().appendChild(otherElement);\n" + "gridLayout.getFooterElement().appendChild(otherElement);\n")).appendChild(h(6).textContent("You have to span a section to make the appended elements show up.")).appendChild(br()).appendChild(h(5).textContent("Hiding a section")).appendChild(CodeCard.preBlock("gridLayout.hideHeader();\n" + "gridLayout.hideLeft();\n" + "gridLayout.hideRight();\n" + "gridLayout.hideFooter();\n")).appendChild(h(6).textContent("You can hide all sections except the content section.")).appendChild(br()).element());
}

Example 3 with CheckBox

use of org.dominokit.domino.ui.forms.CheckBox in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method editableTable.

@SampleMethod
private void editableTable() {
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("edit_save", "").styleCell(element -> element.style.setProperty("vertical-align", "top")).setCellRenderer(cell -> Icons.ALL.pencil_mdi().clickable().setTooltip("Edit").addClickListener(evt -> cell.getTableRow().edit()).element()).setEditableCellRenderer(cell -> Icons.ALL.content_save_mdi().clickable().setTooltip("Save").addClickListener(evt -> {
        if (cell.getTableRow().validate().isValid()) {
            cell.getTableRow().save();
        }
    }).element())).addColumn(ColumnConfig.<Contact>create("id", "#").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).textAlign("right").asHeader().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + ""))).addColumn(ColumnConfig.<Contact>create("status", "Status").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    }).setEditableCellRenderer(cell -> {
        CheckBox activeCheckBox = CheckBox.create("").setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().isActive());
        cell.setDirtyRecordHandler(dirty -> dirty.setActive(activeCheckBox.getValue()));
        return activeCheckBox.element();
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName())).setEditableCellRenderer(cell -> {
        TextBox nameBox = TextBox.create().setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().getName());
        cell.setDirtyRecordHandler(dirty -> dirty.setName(nameBox.getValue()));
        return nameBox.element();
    })).addColumn(ColumnConfig.<Contact>create("gender", "Gender").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).setEditableCellRenderer(cell -> {
        Select<Gender> genderSelect = Select.<Gender>create().styler(style -> style.setMinWidth("100px")).setFieldStyle(FieldStyle.ROUNDED).appendChild(SelectOption.create(Gender.male, "Male", "Male")).appendChild(SelectOption.create(Gender.female, "female", "female")).value(cell.getRecord().getGender());
        cell.setDirtyRecordHandler(dirty -> dirty.setGender(genderSelect.getValue()));
        return genderSelect.element();
    }).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).setEditableCellRenderer(cell -> {
        Select<EyeColor> eyeColorSelect = Select.<EyeColor>create().setFieldStyle(FieldStyle.ROUNDED).appendChild(SelectOption.create(EyeColor.blue, "Blue", "Blue")).appendChild(SelectOption.create(EyeColor.brown, "Brown", "Brown")).appendChild(SelectOption.create(EyeColor.green, "Green", "Green")).value(cell.getRecord().getEyeColor());
        cell.setDirtyRecordHandler(dirty -> dirty.setEyeColor(eyeColorSelect.getValue()));
        return eyeColorSelect.element();
    }).textAlign("center")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> ContactUiUtils.getBalanceElement(cell.getRecord())).setEditableCellRenderer(cell -> {
        DoubleBox doubleBox = DoubleBox.create().setFieldStyle(FieldStyle.ROUNDED).setMaxValue(4000.0).value(cell.getRecord().getBalance());
        cell.setDirtyRecordHandler(dirty -> dirty.setBalance(doubleBox.getValue().doubleValue()));
        cell.setCellValidator(doubleBox::validate);
        return doubleBox.element();
    })).addColumn(ColumnConfig.<Contact>create("email", "Email").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail())).setEditableCellRenderer(cell -> {
        EmailBox emailBox = EmailBox.create().setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().getEmail());
        cell.setDirtyRecordHandler(dirty -> dirty.setEmail(emailBox.getValue()));
        return emailBox.element();
    })).addColumn(ColumnConfig.<Contact>create("phone", "Phone").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone())).setEditableCellRenderer(cell -> {
        TelephoneBox telephoneBox = TelephoneBox.create().setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().getPhone());
        cell.setDirtyRecordHandler(dirty -> dirty.setPhone(telephoneBox.getValue()));
        return telephoneBox.element();
    })).addColumn(ColumnConfig.<Contact>create("badges", "Badges").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    })).setDirtyRecordHandlers(Contact::new, (originalRecord, dirtyRecord) -> {
        originalRecord.setActive(dirtyRecord.isActive());
        originalRecord.setPhone(dirtyRecord.getPhone());
        originalRecord.setEmail(dirtyRecord.getEmail());
        originalRecord.setBalance(dirtyRecord.getBalance());
        originalRecord.setEyeColor(dirtyRecord.getEyeColor());
        originalRecord.setGender(dirtyRecord.getGender());
        originalRecord.setName(dirtyRecord.getName());
    });
    LocalListDataStore<Contact> localListDataStore = new LocalListDataStore<>();
    DataTable<Contact> table = new DataTable<>(tableConfig, localListDataStore);
    element.appendChild(Card.create("EDITABLE TABLE", "Render cells as editable fields and save the row data.").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        localListDataStore.setData(subList(contacts));
    });
}

Example 4 with CheckBox

use of org.dominokit.domino.ui.forms.CheckBox 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();
    });
}