GXT Nuggets: Hipocrite's combo box

Bananas for the code monkey

Ever faced a situation where you want to show the user some information 'X' but you actually need 'Y' for the backend logic? Say you have an employee entity with a employee details and a auto-generated PK. You have designed a form to show the employee details, based on the user selection (in a drop-down combo). A hiprocrite's combo is up for this task. It shows employee name/number in the UI but secretly holds the PK deep down.

You may wonder why all the fuss, why not just set the state in the drop down. Works wonderfully provided you 'remember' the state's 'key'. If I have 10 such forms, this involves 10 if() stmts atleast. To overcome this and let the contract-driven design make life easier for us, I re-invented the combo box. I added an adaptive behaviour in form of DynamicProperyEditor. This enables us to query for various model properties without excessive intrusion.

public class DynamicPropertyEditor<Data extends BaseModelData> extends ListModelPropertyEditor<BaseModelData>{ private String propertyName; public DynamicPropertyEditor(String property) { this.propertyName = property; } public String getStringValue(Data value){ return value.get(propertyName); } public String getPropertyName() { return propertyName; } } public class X10ComboBox<D extends BaseModelData> extends ComboBox<D> { private DynamicPropertyEditor<D> dynamicPropertyEditor = null; public DynamicPropertyEditor<D> getDynamicPropertyEditor(){ return dynamicPropertyEditor; } public void setDynamicPropertyEditor(DynamicPropertyEditor<D> dynamicPropertyEditor) { this.dynamicPropertyEditor = dynamicPropertyEditor; } @Override public ListModelPropertyEditor<D> getPropertyEditor() { .... } }

GXT Nuggets: Preventive form validation

Bananas for the code monkey

It is always a good idea to prevent users from doing unwarranted things. Thats the whole idea of client side validation. (Client-side validation is one good way of catching errors before the code hits server, so....blah blah).

The general notion in UI is to accept user input using forms.(XSS, URL mangling etc left aside). In GXT, we can actually mandate/direct the hasty users to enter the correct data without cluttering the UI with error messages. The notion is simple, prevent the buttons from being enabled until all the validations are honored.

This is achieved using a FormButtonBinding object. The actual code:

private FormPanel createLabelSearchPanel(String formHeader, String keywordLabel, String submitLabel) { FormPanel formPanel = new FormPanel(); formPanel.setLabelAlign(FormPanel.LabelAlign.RIGHT); formPanel.setHeading(formHeader); formPanel.setFieldWidth(DashboardConstants.FIELD_WIDTH); formPanel.setLabelWidth(DashboardConstants.LABEL_WIDTH); formPanel.setFrame(true); formPanel.setAutoHeight(true); FormData formData = new FormData("-10"); TextField<BaseModelData> textField = TextFieldFactory.getDefault().getTextField(keywordLabel, "(Enter Search Key)", ""); formPanel.add(textField, formData); Button searchButton = new Button(submitLabel, new SubmitButtonListener(formPanel)); formPanel.getButtonBar().add(searchButton); FormButtonBinding binding = new FormButtonBinding(formPanel); binding.addButton(searchButton); formPanel.setButtonAlign(HorizontalAlignment.CENTER); return formPanel; } ------------------------------------------ private TextField<BaseModelData> createTextField(final String fieldLabel, final String defaultText, final String defaultValue) { final TextField<BaseModelData> textField = new TextField<BaseModelData>(); textField.setFieldLabel(fieldLabel); textField.setEmptyText(defaultText); textField.setSelectOnFocus(true); textField.setAllowBlank(true); return textField; }