Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    DynamicForm width bug with many FormItems in 1 row / 2nd title-column titleWidth bug

    Hi Isomorphic,

    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);
    		}
    	}
    }
    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
    Attached Files

    #2
    titleWidth affects alternating columns, regardless of whether that column actually contains mostly titles or mostly items. So the fourth column does not get assigned the titleWidth, and is not expected to get that width.

    Similarly, given the defaults for colWidths, the SpinnerItems would be expected to split space in exactly the way they have; the second column is width "*" by default and the third gets the titleWidth.

    For both problems, it looks like you simply need to set colWidths to the sizes you actually want, and ignore titleWidth.

    Comment


      #3
      Hi Isomorphic,

      thanks for the advice, this worked.

      Best regards
      Blama

      Comment

      Working...
      X