Skip to main content

DPU Dialogues - Styling of DPUs with PoolParty

Abstract

DPU Dialogues - Styling of DPUs with PoolParty

Basic Layout With One Text Field:
@Override
public void buildDialogLayout() {

        final VerticalLayout mainLayout = new VerticalLayout();
        mainLayout.setWidth("100%");
        mainLayout.setMargin(true);
        mainLayout.setSpacing(true);

        mainLayout.addComponent(new Label(ctx.tr("MyDpu.dialog.label")));

        tfConfigSample = new TextField(ctx.tr("MyDpu.dialog.tfSample.caption"));
        tfConfigSample.setWidth("100%");
        tfConfigSample.setNullRepresentation("");
        tfConfigSample.setRequired(false);
        tfConfigSample.setImmediate(true);
        mainLayout.addComponent(tfConfigSample); 

    setCompositionRoot(mainLayout);
}
Validation of a Textbox - Simple

A value is required. When the configuration is saved, it displays a custom error. This does not provide inline validation.

@Override
public void buildDialogLayout() {
    final VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setWidth("100%");
    mainLayout.setMargin(true);
    mainLayout.setSpacing(true);

    mainLayout.addComponent(new Label(ctx.tr("MyDpu.dialog.label")));

    tfConfigSample = new TextField(ctx.tr("MyDpu.dialog.tfSample.caption"));
    tfConfigSample.setWidth("100%");
    tfConfigSample.setNullRepresentation("");
    tfConfigSample.setRequired(true);
        tfConfigSample.setImmediate(true);
    mainLayout.addComponent(tfConfigSample);

    setCompositionRoot(mainLayout);
}


 @Override
    public MyDpuConfig_V1 getConfiguration() throws DPUConfigException {
        final MyDpuConfig_V1 c = new MyDpuConfig_V1();

                if (!tfConfigSample.isValid()) {
            throw new DPUConfigException(ctx.tr("MyDpu.dialog.label.notValid"));
        }

        c.setConfigSample(tfConfigSample.getValue());
        return c;
    }


Validation of a Textbox - Custom

When the configuration is saved, it displays a custom error. Also it provides inline validation, as the user is editing the configuration

@Override
public void buildDialogLayout() {
    final VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setWidth("100%");
    mainLayout.setMargin(true);
    mainLayout.setSpacing(true);

    mainLayout.addComponent(new Label(ctx.tr("MyDpu.dialog.label")));

    tfConfigSample = new TextField(ctx.tr("MyDpu.dialog.tfSample.caption"));
    tfConfigSample.setWidth("100%");
    tfConfigSample.setNullRepresentation("");
    tfConfigSample.setRequired(true);
        tfConfigSample.setImmediate(true);
    tfConfigSample.addValidator(value -> {
        if (tfConfigSample.getValue().isEmpty() || tfConfigSample.getValue().length() < 3) {
            throw new Validator.InvalidValueException(ctx.tr("MyDpu.dialog.label.notValid"));
        }
    });
    mainLayout.addComponent(tfConfigSample);

    setCompositionRoot(mainLayout);
}


 @Override
    public MyDpuConfig_V1 getConfiguration() throws DPUConfigException {
        final MyDpuConfig_V1 c = new MyDpuConfig_V1();

        try {
                tfConfigSample.validate();
                } catch (Validator.InvalidValueException e) {
                throw new DPUConfigException(e.getMessage(), e);
                }

        c.setConfigSample(tfConfigSample.getValue());
        return c;
    }


Combo Box With NO Option to Add New Items
ComboBox cbMode = new ComboBox(ctx.tr("BatchLinkingDbpedia.dialog.processingmode.caption"));
cbMode.addItem(BatchLinkingDbpediaConfig_V1.Mode.OPTIMISTIC);
cbMode.setItemCaption(BatchLinkingDbpediaConfig_V1.Mode.OPTIMISTIC, ctx.tr("BatchLinkingDbpedia.dialog.processingmode.optimistic"));
cbMode.addItem(BatchLinkingDbpediaConfig_V1.Mode.CONSERVATIVE);
cbMode.setItemCaption(BatchLinkingDbpediaConfig_V1.Mode.CONSERVATIVE, ctx.tr("BatchLinkingDbpedia.dialog.processingmode.conservative"));
cbMode.setInvalidAllowed(false);
cbMode.setNullSelectionAllowed(false);
cbMode.setImmediate(true);
mainLayout.addComponent(cbMode);


# Set value to config object
c.setLinkingMode((BatchLinkingDbpediaConfig_V1.Mode)cbMode.getValue());


# Get value from config object
cbMode.setValue(c.getLinkingMode());
Combo Box With the Ability to Insert New Items

This concerns items, which are not simple strings.

See the code below, important is the 'cbTypeOfLinkProduced.setNewItemsAllowed(true);' option, plus 'newItemHandler' to process new entries (if they are not just simple strings)

ComboBox cbTypeOfLinkProduced  = new ComboBox(ctx.tr("BatchLinkingDbpedia.dialog.linkprooduced.caption"));
cbTypeOfLinkProduced.setInvalidAllowed(false);
cbTypeOfLinkProduced.setNullSelectionAllowed(false);
cbTypeOfLinkProduced.setNewItemsAllowed(true);
cbTypeOfLinkProduced.setTextInputAllowed(true);
cbTypeOfLinkProduced.setImmediate(true);
cbTypeOfLinkProduced.addValidator(value -> {
    if (!isValidIri(value)) {
        throw new Validator.InvalidValueException(ctx.tr("BatchLinkingDbpedia.dialog.linkprooduced.invalid"));
    }
});
// Custom handling for new items
cbTypeOfLinkProduced.setNewItemHandler(new AbstractSelect.NewItemHandler() {
    @Override
    public void addNewItem(String newItemCaption) {
        try {
                        IRI newLink = VF.createIRI(newItemCaption);
                        cbTypeOfLinkProduced.addItem(newLink);

                        // Remember to set the selection to the new item
                        cbTypeOfLinkProduced.select(newLink);            
        } catch (Exception e) {
            throw new Validator.InvalidValueException(ctx.tr("BatchLinkingDbpedia.dialog.linkprooduced.invalid"));
        }
    }
});
mainLayout.addComponent(cbTypeOfLinkProduced);


# Saving the configuration to the config object - in "getConfiguration" method:
cbTypeOfLinkProduced.validate();
c.setLinkUri((IRI)cbTypeOfLinkProduced.getValue());


# Reading the configuration from the config object - in "setConfiguration" method:
comboBox.addItem(SAMEAS);
..
comboBox.addItem(c.getLinkUri());
comboBox.select(c.getLinkUri());
Create New Button

When creating a new button, use the following additional styles:

button.addStyleName("Button Button--sm Button--primary");