PDA

View Full Version : How to create a composite field



zeroed
8 Sep 2011, 1:35 PM
Hi,

I have a form with bunch of fields.

Now I need a field to be a sum of TextField + Button on the right of it.

I started to think on AdapterField with composite element inside it.

I created the following:



public class SelectUserField extends LayoutContainer {

private TextField<String> userName = new TextField<String>();
private Button selectButton = new Button("...");

public SelectUserField() {
setLayout(new RowLayout(Orientation.HORIZONTAL));
userName.setValue(SessionData.getCurrentUser());
add(userName, new RowData(1, 1));
add(selectButton, new RowData(-1, 1));
}
}


And inserted it on form:



SelectUserField selectUserField = new SelectUserField();
AdapterField selectUserFieldAdapter = new AdapterField(selectUserField);
selectUserFieldAdapter.setFieldLabel("Target User");
fieldSet.add(selectUserFieldAdapter, formData);


formData is:



private FormData formData = new FormData("-20");


The result is: I don't see this field at all.

What am I doing wrong?

micgala
9 Sep 2011, 1:57 AM
Try using GXT's TriggerField class.
That class is composed by a a Field + a button.

Simply set the icon via setTriggerStyle, and override onTriggerClick for performing your onClick operation.

The DateField is an example of a field extending TriggerField.

Regards,
Michel.

sven
9 Sep 2011, 1:59 AM
You can also take a look at FileUploadField as that one shows a real GXT Button next to a field.

zeroed
9 Sep 2011, 7:09 AM
Thanks guys for help!

I copied the behavior from FileUploadField and everything works amazing now!



/**
* Custom form field, used to select a user in popup window.
*/
public class SelectUserField extends TextField<String> {

private Button button;
private AbstractImagePrototype buttonIcon;
private int buttonOffset = 3;
private BaseEventPreview focusPreview;

/**
* Creates a new select user field.
*/
public SelectUserField() {
focusPreview = new BaseEventPreview();
focusPreview.setAutoHide(false);
ensureVisibilityOnSizing = true;
setWidth(150);
}

/**
* Returns the button icon class.
*/
public AbstractImagePrototype getButtonIconStyle() {
return buttonIcon;
}

/**
* Returns the button offset.
*/
public int getButtonOffset() {
return buttonOffset;
}

public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);
if ((event.getTypeInt() != Event.ONCLICK)) {
button.onBrowserEvent(event);
}
}

/**
* Sets the button icon class.
*
* @param buttonIconStyle
* the button icon style
*/
public void setButtonIcon(AbstractImagePrototype buttonIconStyle) {
this.buttonIcon = buttonIconStyle;
}

/**
* Sets the number of pixels between the input element and the browser
* button (defaults to 3).
*/
public void setButtonOffset(int buttonOffset) {
this.buttonOffset = buttonOffset;
}

@Override
public void setReadOnly(boolean readOnly) {
this.readOnly = readOnly;
if (button != null) {
button.setEnabled(!readOnly);
}
}

@Override
protected void afterRender() {
super.afterRender();
el().removeStyleName(fieldStyle);
}

@Override
protected void doAttachChildren() {
super.doAttachChildren();
ComponentHelper.doAttach(button);
}

@Override
protected void doDetachChildren() {
super.doDetachChildren();
ComponentHelper.doDetach(button);
}

@Override
protected El getFocusEl() {
return input;
}

@Override
protected El getInputEl() {
return input;
}

@Override
protected El getStyleEl() {
return input;
}

@Override
protected void onBlur(ComponentEvent ce) {
Rectangle rec = button.el().getBounds();
if (rec.contains(BaseEventPreview.getLastXY())) {
ce.stopEvent();
return;
}
super.onBlur(ce);
focusPreview.remove();
}

@Override
protected void onDetach() {
super.onDetach();
if (focusPreview != null) {
focusPreview.remove();
}
}

@Override
protected void onFocus(ComponentEvent ce) {
super.onFocus(ce);
focusPreview.add();
}

@Override
protected void onRender(Element target, int index) {
El wrap = new El(DOM.createDiv());
wrap.addStyleName("x-form-field-wrap");
wrap.addStyleName("x-form-file-wrap");

input = new El(DOM.createInputText());
input.addStyleName(fieldStyle);
input.addStyleName("x-form-file-text");
input.setId(XDOM.getUniqueId());

if (GXT.isIE && target.getTagName().equals("TD")) {
input.setStyleAttribute("position", "static");
}

wrap.appendChild(input.dom);

setElement(wrap.dom, target, index);

button = new Button("...");
button.getFocusSupport().setIgnore(true);
button.addStyleName("x-form-file-btn");
button.setIcon(buttonIcon);
button.render(wrap.dom);
super.onRender(target, index);
super.setReadOnly(true);
}

@Override
protected void onResize(int width, int height) {
super.onResize(width, height);
input.setWidth(width - button.getWidth() - buttonOffset, true);
}
}