Hello I’m trying to build a form designer using the drag and drop addon. The component overlaps the two buttons on the right and each component has its own caption size I have no idea how to set them all to the largest caption size.
please help…
Create Component Function
public Component createField(String id, String caption) {
Component field;
switch (id) {
case "btnLabel":
Label labelField = uiComponents.create(Label.class);
labelField.unwrap(com.vaadin.ui.DateField.class).addFocusListener(event -> {
loadContextMenu(labelField);
});
labelField.setValue(caption);
field = labelField;
break;
case "btnDate":
DateField dateField = uiComponents.create(DateField.class);
dateField.setStyleName("caption-on-left");
dateField.setCaption(caption);
dateField.unwrap(com.vaadin.ui.DateField.class).addFocusListener(event -> {
loadContextMenu(dateField);
});
field = dateField;
break;
case "btnText":
TextField textField = uiComponents.create(TextField.class);
textField.setStyleName("caption-on-left");
textField.setCaption(caption);
textField.unwrap(com.vaadin.ui.TextField.class).addFocusListener(event -> {
loadContextMenu(textField);
});
field = textField;
break;
case "btnTextArea":
TextArea textArea = uiComponents.create(TextArea.class);
textArea.setStyleName("caption-on-left");
textArea.setCaption(caption);
textArea.unwrap(com.vaadin.ui.TextField.class).addFocusListener(event -> {
loadContextMenu(textArea);
});
field = textArea;
break;
case "btnInteger":
TextField integerField = uiComponents.create(TextField.class);
integerField.setStyleName("caption-on-left");
integerField.setCaption(caption);
integerField.setDatatype(Datatypes.get(Integer.class));
integerField.unwrap(com.vaadin.ui.TextField.class).addFocusListener(event -> {
loadContextMenu(integerField);
});
field = integerField;
break;
case "btnCurrency":
CurrencyField currencyField = uiComponents.create(CurrencyField.class);
currencyField.setStyleName("caption-on-left");
currencyField.setCaption(caption);
currencyField.unwrap(com.vaadin.ui.TextField.class).addFocusListener(event -> {
loadContextMenu(currencyField);
});
field = currencyField;
break;
case "btnDecimal":
TextField decimalField = uiComponents.create(TextField.class);
decimalField.setStyleName("caption-on-left");
decimalField.setCaption(caption);
decimalField.setDatatype(Datatypes.get(BigDecimal.class));
decimalField.unwrap(com.vaadin.ui.TextField.class).addFocusListener(event -> {
loadContextMenu(decimalField);
});
field = decimalField;
break;
case "btnEmail":
TextField emailField = uiComponents.create(TextField.class);
emailField.setStyleName("caption-on-left");
emailField.setCaption(caption);
emailField.addValidator(new Field.Validator() {
private final String EMAIL_REGEX =
"^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@"
+ "[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$";
private final Pattern PATTERN = Pattern.compile(EMAIL_REGEX);
@Override
public void validate(Object value) throws ValidationException {
String email = value.toString();
if ((value == null) || "".equals(email) || !PATTERN.matcher(email).matches()) {
throw new ValidationException("Invalid Email");
}
}
});
emailField.unwrap(com.vaadin.ui.TextField.class).addFocusListener(event -> {
loadContextMenu(emailField);
});
field = emailField;
break;
case "btnDropdown":
LookupField lookupField = uiComponents.create(LookupField.class);
lookupField.setStyleName("caption-on-left");
lookupField.setCaption(caption);
lookupField.unwrap(ComboBox.class).addFocusListener(event -> {
loadContextMenu(lookupField);
});
field = lookupField;
break;
case "btnSingleChoice":
RadioButtonGroup radioButtonGroup = uiComponents.create(RadioButtonGroup.class);
radioButtonGroup.setStyleName("caption-on-left");
radioButtonGroup.setCaption(caption);
radioButtonGroup.unwrap(com.vaadin.ui.RadioButtonGroup.class).addFocusListener(event -> {
loadContextMenu(radioButtonGroup);
});
field = radioButtonGroup;
break;
case "btnMultipleChoice":
CheckBoxGroup checkBoxGroup = uiComponents.create(CheckBoxGroup.class);
checkBoxGroup.setStyleName("caption-on-left");
checkBoxGroup.setCaption(caption);
checkBoxGroup.unwrap(com.vaadin.ui.CheckBoxGroup.class).addFocusListener(event -> {
loadContextMenu(checkBoxGroup);
});
field = checkBoxGroup;
break;
case "btnImage":
Image image = uiComponents.create(Image.class);
//image.unwrap(com.vaadin.ui.Image.class).addFocusListener(event -> {
// loadContextMenu(image);
//});
field = image;
break;
case "btnFile":
UploadField uploadField = uiComponents.create(UploadField.class);
uploadField.setStyleName("caption-on-left");
uploadField.unwrap(com.vaadin.ui.TextField.class).addFocusListener(event -> {
loadContextMenu(uploadField);
});
field = uploadField;
break;
default:
field = uiComponents.create(TextField.class);
}
field.setId(id + "_" + UUID.randomUUID().toString());
field.setWidth("100%");
return field;
}
Dashboard Drag and drop create
public Component createDashboardElement(Component component) {
HBoxLayout layout = uiComponents.create(HBoxLayout.class);
layout.setStyleName("dashboard-" + component.getId());
layout.setWidth("100%");
layout.setSpacing(true);
Label countLabel = uiComponents.create(Label.class);
countLabel.setStyleName("label-count");
countLabel.setWidth("30px");
Label titleLabel = uiComponents.create(Label.class);
titleLabel.setIcon(((Button) component).getIcon());
layout.add(countLabel);
layout.add(titleLabel);
String caption = templateEditHelper.createUniqueCaption(dashboard, ((Button) component).getCaption());
Component field = templateEditHelper.createField(component.getId(), caption);
layout.add(field);
Button deleteButton = uiComponents.create(Button.class);
deleteButton.addStyleName(HaloTheme.BUTTON_BORDERLESS_COLORED);
deleteButton.addStyleName("button-remove");
deleteButton.setIcon("font-icon:TIMES");
BaseAction action = new BaseAction("remove") {
@Override
public void actionPerform(Component component) {
ComponentContainer hBox = (ComponentContainer) component.getParent();
DDVerticalLayout ddLayout = (DDVerticalLayout) hBox.getParent();
ddLayout.remove(hBox);
updateDashboardComponents(ddLayout);
}
};
action.setCaption("");
deleteButton.setAction(action);
layout.add(createContextButton());
layout.add(deleteButton);
layout.expand(field);
return layout;
}