Hi Isomorphic,
please see this testcase and attached screenshot:
As you can see in the screenshot, one SpinnerItem is not taking 50% of the possible place.
Also, the SKU-title is not as wide as the 1st title column.
My aim is to have not-so-wide and wide FormItems in the same form. In order not to squander place and keep the DynamicForm compact, I try to place narrow items belongs to each other next to each other (e.g. given name and surname).
I'm using v10.0p_2015-08-24/PowerEdition Deployment.
Best regards
Blama
please see this testcase and attached screenshot:
Code:
package com.smartgwt.sample.client;
import java.util.Date;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.DateTimeFormat.PredefinedFormat;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.AdvancedCriteria;
import com.smartgwt.client.data.Criterion;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.AutoFitWidthApproach;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.ReadOnlyDisplayAppearance;
import com.smartgwt.client.util.DateDisplayFormatter;
import com.smartgwt.client.util.DateUtil;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.DateChooser;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.BooleanItem;
import com.smartgwt.client.widgets.form.fields.ComboBoxItem;
import com.smartgwt.client.widgets.form.fields.DateItem;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.FormItemIcon;
import com.smartgwt.client.widgets.form.fields.HiddenItem;
import com.smartgwt.client.widgets.form.fields.LinkItem;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.form.fields.SpinnerItem;
import com.smartgwt.client.widgets.form.fields.TextAreaItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.fields.events.FormItemClickHandler;
import com.smartgwt.client.widgets.form.fields.events.FormItemIconClickEvent;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.SectionHeader;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.tab.TabSet;
public class BuiltInDS implements EntryPoint {
private VLayout vL;
private TestForm tF;
private TestWindow tW;
private HLayout hL;
public void onModuleLoad() {
DefaultApperanceSetter.setDefaultApperance();
KeyIdentifier debugKey = new KeyIdentifier();
debugKey.setCtrlKey(true);
debugKey.setKeyName("D");
Page.registerKey(debugKey, new PageKeyHandler() {
public void execute(String keyName) {
SC.showConsole();
}
});
vL = new VLayout(5);
vL.setTop(20);
vL.setLeft(20);
vL.setWidth100();
vL.setHeight100();
hL = new HLayout(5);
IButton showWindow = new IButton("Show window");
showWindow.setWidth(200);
showWindow.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
tW = new TestWindow();
tW.show();
}
});
hL.addMembers(showWindow);
vL.addMembers(hL);
vL.draw();
}
private class TestForm extends DynamicForm {
public TestForm() {
super();
setDataSource(DataSource.get("supplyItem"));
setAutoFetchData(false);
setWidth("95%");
setTitleWidth(180);
setCellPadding(7);
setCanEdit(true);
setNumCols(6);
HiddenItem itemID = new HiddenItem("itemID");
itemID.setFetchMissingValues(false);
// 2 Items (2, 2) + 2x Title
final TextItem itemNameTI = new TextItem("itemName");
itemNameTI.setRequired(true);
itemNameTI.setColSpan(2);
TextItem sku = new TextItem("SKU");
sku.setColSpan(2);
FormItemIcon icon = new FormItemIcon();
icon.setSrc("[SKINIMG]Dialog/say.png");
icon.addFormItemClickHandler(new FormItemClickHandler() {
@Override
public void onFormItemClick(FormItemIconClickEvent event) {
SC.say("<b>Lore ipsum...:</b>");
}
});
sku.setIcons(icon);
// 2 Items (2, 2) + 2x Title
final TextItem itemNameTI2 = new TextItem("itemName");
itemNameTI2.setRequired(true);
itemNameTI2.setColSpan(2);
TextItem sku2 = new TextItem("SKU");
sku2.setColSpan(2);
sku2.setTitle("Long Long SKU title");
FormItemIcon icon2 = new FormItemIcon();
icon2.setSrc("[SKINIMG]Dialog/say.png");
icon2.addFormItemClickHandler(new FormItemClickHandler() {
@Override
public void onFormItemClick(FormItemIconClickEvent event) {
SC.say("<b>Lore ipsum2...:</b>");
}
});
sku2.setIcons(icon2);
// 3 Items (1,1,3) + 1x Title
SpinnerItem unitCostSI = new SpinnerItem("unitCost");
unitCostSI.setTitle("3 fields here");
unitCostSI.setShowHintInField(true);
unitCostSI.setHint("Fake title here");
SpinnerItem unitCostSI2 = new SpinnerItem("unitCost");
unitCostSI2.setShowTitle(false);
unitCostSI2.setShowHintInField(true);
unitCostSI2.setHint("Fake title here");
final TextItem descTI = new TextItem("description");
descTI.setColSpan(3);
descTI.setShowTitle(false);
descTI.setShowHintInField(true);
descTI.setHint("Fake title2 here");
// 2 Items (2,3) + 1x Title
SpinnerItem unitCostSI3 = new SpinnerItem("unitCost");
unitCostSI3.setColSpan(2);
unitCostSI3.setTitle("2 fields here");
unitCostSI3.setShowHintInField(true);
unitCostSI3.setHint("Fake title here");
final ComboBoxItem descCBI = new ComboBoxItem("description");
descCBI.setColSpan(3);
descCBI.setShowTitle(false);
descCBI.setShowHintInField(true);
descCBI.setHint("Fake title2 here");
setFields(itemID, itemNameTI, sku, itemNameTI2, sku2, unitCostSI, unitCostSI2, descTI, unitCostSI3, descCBI);
fetchData(new AdvancedCriteria(new Criterion("itemID", OperatorId.EQUALS, 1)));
}
}
private class TestWindow extends Window {
public TestWindow() {
super();
setPadding(0);
setMargin(0);
setMembersMargin(0);
setModalMaskOpacity(60);
setWidth(750);
setHeight(700);
setPadding(105);
setTitle("New Window");
setShowMinimizeButton(false);
setIsModal(true);
setShowModalMask(true);
setShowHeaderIcon(true);
centerInPage();
tF = new TestForm();
addItem(tF);
}
}
private static class DefaultApperanceSetter {
public static ReadOnlyDisplayAppearance defaultReadOnlyDisplayAppearance = ReadOnlyDisplayAppearance.DISABLED;
private static Integer defaultFormItemHeight = 34;
private static Integer defaultHoverDelay = 500;
public static void setDefaultApperance() {
setShortDatetimeDisplayFormatter();
setFormItemDefaultApperance();
setBooleanItemDefaultApperance();
setButtonDefaultApperance();
setCanvasDefaultApperance();
setComboBoxItemDefaultApperance();
setDateItemDefaultApperance();
setDatePickerDefaultAppearance();
setDynamicFormDefaultApperance();
setLinkItemDefaultApperance();
setListGridDefaultApperance();
setSectionHeaderDefaultApperance();
setSectionStackDefaultApperance();
setSelectItemDefaultApperance();
setSpinnerItemDefaultApperance();
setTabSetDefaultApperance();
setTextAreaItemDefaultApperance();
setTextItemDefaultApperance();
setWindowDefaultApperance();
}
private static void setBooleanItemDefaultApperance() {
BooleanItem bi = new BooleanItem() {
{
setWidth("*");
setHeight(defaultFormItemHeight);
setLabelAsTitle(true);
}
};
BooleanItem.setDefaultProperties(bi);
}
private static void setButtonDefaultApperance() {
Button b = new Button() {
{
setHoverDelay(defaultHoverDelay);
}
};
Button.setDefaultProperties(b);
}
private static void setCanvasDefaultApperance() {
Canvas c = new Canvas() {
{
// setGroupBorderCSS("color: black");
}
};
Canvas.setDefaultProperties(c);
}
private static void setComboBoxItemDefaultApperance() {
ComboBoxItem cbi = new ComboBoxItem() {
{
setWidth("*");
setHeight(defaultFormItemHeight);
setCanSelectText(true);
}
};
ComboBoxItem.setDefaultProperties(cbi);
}
private static void setDateItemDefaultApperance() {
DateItem cbi = new DateItem() {
{
// setWidth("*");
setHeight(defaultFormItemHeight);
setCanSelectText(true);
}
};
DateItem.setDefaultProperties(cbi);
}
private static void setDatePickerDefaultAppearance() {
DateChooser dp = new DateChooser() {
{
setBackgroundColor("#C9C9C9");
setEdgeCenterBackgroundColor("#C9C9C9");
setGroupLabelBackgroundColor("#C9C9C9");
setEdgeBackgroundColor("#C9C9C9");
setStyleName("dateChooser");
setBorder("0px");
setGroupBorderCSS("0px");
}
};
DateChooser.setDefaultProperties(dp);
}
private static void setDynamicFormDefaultApperance() {
DynamicForm df = new DynamicForm() {
{
setReadOnlyDisplay(DefaultApperanceSetter.defaultReadOnlyDisplayAppearance);
// setCanSelectText(false);
setTitleSuffix(":");
setRequiredTitleSuffix(" (*):");
}
};
DynamicForm.setDefaultProperties(df);
}
private static void setFormItemDefaultApperance() {
FormItem fi = new FormItem() {
{
setHeight(defaultFormItemHeight);
setHoverDelay(defaultHoverDelay);
setCanSelectText(true);
}
};
FormItem.setDefaultProperties(fi);
}
private static void setLinkItemDefaultApperance() {
LinkItem li = new LinkItem() {
{
setWidth("*");
setHeight(defaultFormItemHeight);
setCanSelectText(true);
}
};
LinkItem.setDefaultProperties(li);
}
private static void setListGridDefaultApperance() {
ListGrid lg = new ListGrid() {
{
setAutoFitFieldsFillViewport(true);
setShowClippedValuesOnHover(true);
setAutoFitWidthApproach(AutoFitWidthApproach.VALUE);
setCanMultiGroup(false);
setCanEdit(false);
setShowFilterEditor(false);
setCanFreezeFields(false);
setCanReorderFields(false);
setCellHeight(30);
setHeaderHeight(35);
setFixedRecordHeights(true);
setGroupIcon("[SKINIMG]LT/group/group.png");
setGroupIconSize(30);
setGroupLeadingIndent(0);
setHoverDelay(defaultHoverDelay);
}
};
ListGrid.setDefaultProperties(lg);
}
private static void setSectionHeaderDefaultApperance() {
SectionHeader sh = new SectionHeader() {
{
setIconHeight(39);
setIconWidth(39);
}
};
SectionHeader.setDefaultProperties(sh);
}
private static void setSectionStackDefaultApperance() {
SectionStack ss = new SectionStack() {
{
setHeaderHeight(39);
setCanResizeSections(false);
}
};
SectionStack.setDefaultProperties(ss);
}
private static void setSelectItemDefaultApperance() {
SelectItem si = new SelectItem() {
{
setWidth("*");
setHeight(defaultFormItemHeight);
setCanSelectText(true);
}
};
SelectItem.setDefaultProperties(si);
}
private static void setShortDatetimeDisplayFormatter() {
DateUtil.setShortDatetimeDisplayFormatter(new DateDisplayFormatter() {
public String format(Date date) {
if (date == null)
return null;
// final DateTimeFormat dateFormatter =
// DateTimeFormat.getFormat("dd.MM.yyyy HH:mm");
final DateTimeFormat dateFormatter = DateTimeFormat.getFormat(PredefinedFormat.DATE_MEDIUM);
String format = dateFormatter.format(date);
return format;
}
});
}
private static void setSpinnerItemDefaultApperance() {
SpinnerItem cbi = new SpinnerItem() {
{
setWidth("*");
setHeight(defaultFormItemHeight);
setCanSelectText(true);
}
};
SpinnerItem.setDefaultProperties(cbi);
}
private static void setTabSetDefaultApperance() {
TabSet ts = new TabSet() {
{
setTabBarThickness(35);
}
};
TabSet.setDefaultProperties(ts);
}
private static void setTextItemDefaultApperance() {
TextItem ti = new TextItem() {
{
setWidth("*");
setHeight(defaultFormItemHeight);
setCanSelectText(true);
}
};
TextItem.setDefaultProperties(ti);
}
private static void setTextAreaItemDefaultApperance() {
TextAreaItem tai = new TextAreaItem() {
{
setWidth("*");
setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
}
};
TextAreaItem.setDefaultProperties(tai);
}
private static void setWindowDefaultApperance() {
Window w = new Window() {
{
setBackgroundColor("#F5F5F5");
setBodyColor("#F5F5F5");
}
};
Window.setDefaultProperties(w);
}
}
}Also, the SKU-title is not as wide as the 1st title column.
My aim is to have not-so-wide and wide FormItems in the same form. In order not to squander place and keep the DynamicForm compact, I try to place narrow items belongs to each other next to each other (e.g. given name and surname).
I'm using v10.0p_2015-08-24/PowerEdition Deployment.
Best regards
Blama