Hi there!
I’ve a question concerning forms. Is it possible to have a complex form on a Tabsheet with 2 ore more tabs? How can i do that?
Thank you,
Matthias
I have the same problem and I don’t now why not exist in samples some good solution how to create complex form with tabs and validation. In most complex and real apps edits in form have some dependency to each other and requirments.
Hi,
Test this:
package org.vaadin.forum.sample;
import com.vaadin.Application;
import com.vaadin.ui.Field;
import com.vaadin.ui.Form;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Window;
public class SimpleAddressBook extends Application {
@Override
public void init() {
final Window mainWindow = new Window("Panel Caption Test");
Panel p = new Panel();
p.setSizeUndefined();
p.setCaption("Vaadin Forum - Form with Tabsheet - Test");
p.setWidth( p.getCaption().length()+"em" );
final TabSheet tabs = new TabSheet();
final FormLayout personalInfo = new FormLayout();
tabs.addTab( personalInfo, "Personal Info" );
final FormLayout profile = new FormLayout();
tabs.addTab( profile, "Profile" );
final FormLayout history = new FormLayout();
tabs.addTab( history, "History" );
final Form form = new Form() {
@Override
protected void attachField(Object propertyId, Field field) {
if ("name".equals( propertyId ) ||
"surname".equals( propertyId ) ||
"email".equals( propertyId ) ||
"address".equals( propertyId ) ) {
personalInfo.addComponent( field );
} else if ("profile".equals( propertyId )) {
profile.addComponent( field );
} else if ("history".equals( propertyId )) {
history.addComponent( field );
}
}
};
form.addField("name", new TextField("Name"));
form.addField("surname", new TextField("Surname"));
form.addField("email", new TextField("Email"));
form.addField("address", new TextField("Address"));
form.addField("profile", new TextArea("Profile"));
form.addField("history", new TextArea("History"));
p.setContent( tabs );
mainWindow.addComponent(p);
setMainWindow(mainWindow);
}
}
HTH,
Javi
I stack with this problem and make some more complex form. I’m using tabsheet, validation and "
jonatan.contexthelp
" addon → https://vaadin.com/directory#addon/contexthelp
I created simple project in Eclipse using SQLContainer and HSQLDB that you can see how this works in practise.
You can find there also some more aspects like how to make some custom looking button or window etc.
For know this is all what I can do learning java for the first time with vaadin for couple of days soo project may have some bugs and inproper solutions.
Eclipse project packet into zip you can find here → http://sdrv.ms/SPEHQD
Some snippets:
Window with form:
public class ComplexForm extends Window {
public Form form = new Form();
public Button btnSave = new Button();
public Button btnCancel = new Button();
public KontrahFieldFactory kontrahFieldFactory;
public ComplexForm(final HelloworldApplication app) {
Panel p = new Panel();
final TabSheet tabs = new TabSheet();
tabs.setSizeFull();
tabs.setStyleName(Reindeer.TABSHEET_SMALL);
final FormLayout personalInfo = new FormLayout();
tabs.addTab( personalInfo, "Personal data" );
final FormLayout profile = new FormLayout();
tabs.addTab( profile, "Company" );
kontrahFieldFactory = new KontrahFieldFactory(app);
form = new Form() {
@Override
protected void attachField(Object propertyId, Field field) {
if ("IMIE".equals( propertyId ) ||
"NAZWISKO".equals( propertyId )) {
personalInfo.addComponent( field );
} else if ("ID_FIRMA".equals( propertyId )) {
profile.addComponent(field);
}
}
@Override
public void setItemDataSource(Item newDataSource) {
if (newDataSource != null) {
super.setItemDataSource(newDataSource);
if (newDataSource.getItemProperty("ID_FIRMA").getValue() != null) {
kontrahFieldFactory.cbFirmy.select(new RowId(new Object[] { newDataSource.getItemProperty("ID_FIRMA").getValue() }));
}
} else {
super.setItemDataSource(null);
}
}
};
form.setWriteThrough(false);
form.setStyleName(Reindeer.LAYOUT_BLACK);
form.setFormFieldFactory(kontrahFieldFactory);
p.setContent(tabs);
this.addComponent(p);
btnSave.setCaption("Save");
btnSave.setClickShortcut(KeyCode.ENTER, null);
btnSave.setStyleName(Reindeer.BUTTON_SMALL);
btnSave.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
try {
form.commit();
try {
app.getDataSource().getKontrahContainer().commit();
} catch (UnsupportedOperationException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
((Window) getWindow().getParent()).removeWindow(getWindow());
} catch (Exception e) {
getWindow().showNotification("Save error", e.getMessage(), Notification.TYPE_ERROR_MESSAGE);
}
}
});
btnCancel.setCaption("Cancel");
btnCancel.setClickShortcut(KeyCode.ESCAPE, null);
btnCancel.setStyleName(Reindeer.BUTTON_SMALL);
btnCancel.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
form.discard();
try {
app.getDataSource().getKontrahContainer().rollback();
} catch (UnsupportedOperationException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
((Window) getWindow().getParent()).removeWindow(getWindow());
}
});
HorizontalLayout footer = new HorizontalLayout();
footer.setSpacing(true);
footer.addComponent(btnCancel);
footer.addComponent(btnSave);
this.addComponent(footer);
this.setWidth("400px");
this.center();
this.setCaption("Customer edit");
this.setClosable(false);
this.setModal(true);
}
}Custom class extending DefaultFieldFactory
public class KontrahFieldFactory extends DefaultFieldFactory implements FormFieldFactory {
private final HelloworldApplication app;
public final ComboBox cbFirmy = new ComboBox();
public KontrahFieldFactory(final HelloworldApplication application) {
this.app = application;
cbFirmy.setCaption("Firma");
cbFirmy.setNewItemsAllowed(false);
cbFirmy.setNullSelectionAllowed(false);
cbFirmy.setContainerDataSource(app.getDataSource().getFirmyContainer());
cbFirmy.setItemCaptionPropertyId("NAZWA");
cbFirmy.setItemCaptionMode(AbstractSelect.ITEM_CAPTION_MODE_PROPERTY);
cbFirmy.setImmediate(true);
cbFirmy.setWidth("200px");
}
@Override
public Field createField(Item item, Object propertyId, Component uiContext) {
String pid = (String)propertyId;
if ("ID_FIRMA".equals(pid)) {
return cbFirmy;
}
Field field;
field = super.createField(item, propertyId, uiContext);
field.setWidth("200px");
if (field instanceof TextField) {
((TextField) field).setNullRepresentation("");
}
if ("IMIE".equals(pid)) {
field.setCaption("Imie");
app.getContextHelp().addHelpForComponent(field, "Fill with your <b><i>first name</i></b>");
return new HelpFieldWrapper(field, app.getContextHelp());
}
if ("NAZWISKO".equals(pid)) {
field.setCaption("Nazwisko");
field.setRequired(true);
field.setRequiredError("Nazwisko is required");
field.addValidator(new StringLengthValidator("Nazwisko must have at least 3 characters", 3, 100, false));
return field;
}
return null;
}
}I am speechless,
such great postings - thank you!
Matthias