DynamicForm - multiple columns

[l.arcangeli]

Hi there,
I'm on latest nightly of SmartGWT EP Eval 4.1d, developing with an IE 9.
I defined a DynamicForm like this:

public KioskEditForm(ListGrid referredGrid) {
	this.referredGrid = referredGrid;
	this.referredGridCurrCriteria = referredGrid.getCriteria();
	setDataSource(this.referredGrid.getDataSource());
	setWidth(WIDTH);
	setHeight(HEIGHT);
	setNumCols(4);
	setColWidths(100, "*", 80, 50);
	setAutoFocus(true);
	setUseAllDataSourceFields(false);

	setCellBorder(1);
}

filled with some Items, including:

[...]
ftpHostItem = new TextItem(KioskDSFields.FTPHOST.getAlias());
ftpHostItem.setStartRow(true);
ftpHostItem.setRequired(true);
ftpHostItem.setWidth("*");

ftpPortItem = new TextItem(KioskDSFields.FTPPORT.getAlias());
ftpPortItem.setEndRow(true);
ftpPortItem.setRequired(true);
ftpPortItem.setWidth("*");

ftpUserItem = new TextItem(KioskDSFields.FTPUSER.getAlias());
ftpUserItem.setColSpan(4);
ftpUserItem.setRequired(true);
ftpUserItem.setWidth("100%");
[...]

(setCellBorder() method is called due debug purposes). Result of rendered Form is visible into JPEG in attachment.
I'm not able (just tried several combinations of form-defined columns width, span, cell width, setStart\EndRow() etc. etc.) to get "FTP port" TextItem filling all reserved space (difference between other Items could be seen into red squared area into JPEG).

Any ideas?

Thanks a lot.

Luca.

[Isomorphic]

FTP Port is already filling the columns. You have set the size of those two columns to 80 and 50 pixels respectively.

[l.arcangeli]

Yes, but FTP port TextArea is some pixels shorter (or misaligned) than other TextArea items defined into form.

I see setting explicitly the width of TextArea 5 pixels lesser than form-defined column (in this case 50 - 5 = 45 pixels), solve this problem (meanwhile I added some other code).

ftpPortItem = new TextItem(KioskDSFields.FTPPORT.getAlias());
ftpPortItem.setLength(5);
ftpPortItem.setMask(">[0-9][0-9][0-9][0-9][0-9]");
ftpPortItem.setMaskPromptChar(" ");
ftpPortItem.setEndRow(true);
ftpPortItem.setRequired(true);
ftpPortItem.setWidth(45);

In attachment (sshotALIGN.jpg), the new graphical result.

In your opinion, is this correct or it's an "empirical" solution and I'm wrong about something?

Thanks, Luca.

[Isomorphic]

We're not sure what you mean about the "alignment" here, but note that when you have the "setCellBorder" feature enabled to show the table structure, this will render slightly differently, because space is needed to show the border between cells for debug purposes.

[l.arcangeli]

Yes, I agree about "setCellBorder" settings.
What I mean is the right bound of "FTP port" TextItem that is not "align" with other TextItems.

I tried with:
- setWidth(50), according to form-defined setColWidths(150, "*", 80, 50);
- setWidth(45), for "manual" alignment;
- setWidth("*");

In 1st and 3th case (the most logical width, imo) TextArea right bound goes "beyond" ideal alignment of other component.

Here is the complete code of form:

public KioskEditForm(ListGrid referredGrid) {
	this.referredGrid = referredGrid;
	this.referredGridCurrCriteria = referredGrid.getCriteria();

	setDataSource(this.referredGrid.getDataSource());

	setWidth(WIDTH);
	setHeight(HEIGHT);

	setNumCols(4);
	setColWidths(150, "*", 80, 50);
	setAutoFocus(true);
	setUseAllDataSourceFields(false);

	aliasItem = new TextItem(KioskDSFields.NAME.getAlias());
	aliasItem.setColSpan(4);
	aliasItem.setRequired(true);
	aliasItem.setWidth("100%");

	iNetAddressItem = new TextItem(KioskDSFields.INETADDRESS.getAlias());
	iNetAddressItem.setColSpan(4);
	iNetAddressItem.setRequired(true);
	iNetAddressItem.setWidth("100%");

	regDateItem = new DateItem(KioskDSFields.REGDATE.getAlias());
	regDateItem.setColSpan(4);
	regDateItem.setRequired(true);
	regDateItem.setWrapTitle(false);

	groupItem = new SelectItem(KioskDSFields.GROUP.getAlias());
	groupItem.setColSpan(4);
	groupItem.setRequired(true);
	groupItem.setWidth("100%");
	groupItem.setOptionDataSource(KioskGroupDS.getInstance());
	groupItem.setValueField(KioskGroupDSFields.ID.getAlias());
	groupItem.setDisplayField(KioskGroupDSFields.NAME.getAlias());
	groupItem.setAutoFetchData(true);
	String groupId = referredGridCurrCriteria.getAttribute(KioskGroupDSFields.ID.getAlias());

	ftpHostItem = new TextItem(KioskDSFields.FTPHOST.getAlias());
	ftpHostItem.setStartRow(true);
	ftpHostItem.setRequired(true);
	ftpHostItem.setWidth("*");

	ftpPortItem = new TextItem(KioskDSFields.FTPPORT.getAlias());
	ftpPortItem.setLength(5);
	ftpPortItem.setMask(">[0-9][0-9][0-9][0-9][0-9]");
	ftpPortItem.setMaskPromptChar(" ");
	ftpPortItem.setEndRow(true);
	ftpPortItem.setRequired(true);
	ftpPortItem.setWidth(45);

	IntegerRangeValidator ftpPortValidator = new IntegerRangeValidator();
	ftpPortValidator.setMin(1025);
	ftpPortValidator.setMax(65535);
	ftpPortValidator.setErrorMessage(I18n.MSG.kioskFtpPortRangeError());

	ftpPortItem.setValidators(ftpPortValidator);

	ftpUserItem = new TextItem(KioskDSFields.FTPUSER.getAlias());
	ftpUserItem.setColSpan(4);
	ftpUserItem.setRequired(true);
	ftpUserItem.setWidth("100%");

	ftpPasswordItem = new PasswordItem(KioskDSFields.FTPPASSWORD.getAlias());
	ftpPasswordItem.setColSpan(4);
	ftpPasswordItem.setRequired(true);
	ftpPasswordItem.setWidth("100%");

	ftpRepeatPasswordItem = new PasswordItem("repeatPassword", I18n.CST.kioskRepeatFtpPasswordTitle());
	ftpRepeatPasswordItem.setColSpan(4);
	ftpRepeatPasswordItem.setRequired(true);
	ftpRepeatPasswordItem.setWidth("100%");

	MatchesFieldValidator matchesValidator = new MatchesFieldValidator();
	matchesValidator.setOtherField(KioskDSFields.FTPPASSWORD.getAlias());
	matchesValidator.setErrorMessage(I18n.MSG.kioskFtpPassowrdNotMatchError());
	ftpRepeatPasswordItem.setValidators(matchesValidator);

	addInfoItem = new TextAreaItem(KioskDSFields.ADDINFO.getAlias());
	addInfoItem.setColSpan(4);
	addInfoItem.setTitleOrientation(TitleOrientation.TOP);
	addInfoItem.setLength(2048);
	addInfoItem.setWidth("100%");

	saveBtn = new ButtonItem("saveBtn", I18n.CST.saveBtnLbl());
	saveBtn.setColSpan(4);
	saveBtn.setWidth(60);
	saveBtn.setIcon("[SKIN]/actions/add.png");
	saveBtn.setAlign(Alignment.CENTER);
	saveBtn.addClickHandler(new MyClickHandler());
	
	this.setFields(
			aliasItem, iNetAddressItem, regDateItem, groupItem,
			new RowSpacerItem(),
			ftpHostItem, ftpPortItem, ftpUserItem, ftpPasswordItem, ftpRepeatPasswordItem,
			new RowSpacerItem(),
			addInfoItem,
			new RowSpacerItem(),
			saveBtn
			);
}

This is just curiosity, just to better understand SmartGWT behaviour.

Thanks, again

Luca.

[Isomorphic]

Most likely the problem is that "Registration Date:" is longer than the 100 pixels you have configured for column #1. Form columns will not perfectly align if you overflow a column.