Hi,
How could do a field (ListSelect) in a Form with a button on right?
I see in other post a TextField with button on right the code is like this (Author Syam’s),
public class ActionTextField extends CustomComponent implements Field{
-....
}This works fine!! But now i need the same but with a ListSelect
Is possible to do it?
Thanks so much!!!
Hi,
Without going into details I think you should use the CustomField when creating new Field implementations for Form. Take a look at:
vaadin.com/addon/customfield
Done!!
public class ListSelectField extends CustomField implements Container.Viewer {
private HorizontalLayout layout = new HorizontalLayout();
private ListSelect field=new ListSelect();
private Button button = new Button();
private Button button2 = new Button();
private VerticalLayout vl=new VerticalLayout();
public ListSelectField() {
//Field
field.setSizeUndefined();
field.setItemCaptionPropertyId("fullname");
field.setRows(4);
field.setNullSelectionAllowed(false);
field.setNewItemsAllowed(false);
field.setImmediate(true);
field.setRequired(true);
field.addContainerProperty("fullname", String.class, null);
field.addContainerProperty("email", String.class, null);
field.addContainerProperty("smsphone", String.class, null);
//Buttons
button.setStyleName("icon-only");
button.setIcon(new ThemeResource("img/book_open.png"));
button.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
// TODO Auto-generated method stub
getWindow().addWindow(new SearchWindow());
}
});
button2.setStyleName("icon-only");
button2.setIcon(new ThemeResource("img/cross.png"));
button2.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
// TODO Auto-generated method stub
field.removeItem(field.getValue());
}
});
//layouts
layout.setSizeFull();
vl.setSizeUndefined();
vl.setSpacing(true);
vl.setHeight(100, UNITS_PERCENTAGE);
vl.addComponent(button);
vl.addComponent(button2);
layout.addComponent(field);
layout.addComponent(vl);
vl.setComponentAlignment(button2, Alignment.BOTTOM_CENTER);
super.setWidth(100, UNITS_PERCENTAGE);;
setWidth(100, UNITS_PERCENTAGE);;
layout.setWidth(100, UNITS_PERCENTAGE);;
field.setWidth(100, UNITS_PERCENTAGE);;
field.setRows(5);
layout.setExpandRatio(field, 1.0f);
layout.setSpacing(true);
setCompositionRoot(layout);
}
@Override
public Class<?> getType() {
return ListSelect.class;
}
@Override
public Container getContainerDataSource() {
// TODO Auto-generated method stub
return field.getContainerDataSource();
}
@Override
public void setContainerDataSource(Container newDataSource) {
// TODO Auto-generated method stub
field.setContainerDataSource(newDataSource);
}
}
public class MyFormFieldFactory extends DefaultFieldFactory implements FormFieldFactory {
private Field f;
public Field createField(Item item, final Object propertyId, Component uiContext) {
if ("to".equals(propertyId)) {
f=new ListSelectField();
Works fine!!! Other think is possible align the text field (Mensaje) to up ???
Feedback is something could be better done!!
Thanks
Should be. Try adding a custom style name to that field (Mensaje), then check that caption element using Firebug/Web Inspector to see what classname is applied to it and style with CSS accordingly.
What feedback, do you mean the form, the required indicators and error indicators? If so, I agree, they are quite hideous (and I’m the one to blame). I’ll try to do something about them in the next major version.
No , I do not mean the form (I’m worried…sorry for my english).
I was referring to my code! I’am a newbie
The ListSelect error indicator do not work, how might I do to display an error if It have no items ?
You did a good job!!! Don’t worry!!
I could bring you and your team a little idea:
You could put a small (or big…:P)section with tips:
Sometimes I lose a lot of time looking at the forum. Remember I’m newbie.