TextField events not fired in a CardPanel?

[gelgey]

I have a TextField with a listener attached to validate input as it is typed.

This works fine when the TextField is added directly to a container.

But when I put this TextField into a CardPanel it seems that the listeners are no longer active (or events are no longer fired).

There's probably a good reason for not firing off these events in a CardPanel, but I'm wondering if there is any way around this restriction?

[kolli]

well i have been working cardpanel with textfield, combo BOx and all of them works fine for me..
Can you post some code so that we can check whats going on??

[gelgey]

I have a method for creating a text field with a simple key listener and a tooltip:



private TextField<String> getTextField() {
return new TextField<String>() {{
this.setFieldLabel("Foo");
this.setToolTip("Hello");
this.addListener(Events.KeyUp, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent event) {
GWT.log("[Events.KeyUp] field.rawValue=" + event.field.getRawValue(), null);
}
});
}};
}
I also have a LayoutContainer with two elements: a card panel containing the text field, and another instance of the text field:



@Override protected void onRender(Element parent, int index) {
super.onRender(parent, index);
add(getCardPanelWithTextField());
add(getTextField());
}

private CardPanel getCardPanelWithTextField() {
return new CardPanel() {{
this.add(getTextField());
}};
}
When the container is displayed, I see two text fields: the top one is in the card panel, and the bottom one is in the container.

When I enter data in the bottom text field, the GWT console shows the expected log data on key presses. And the tooltip works.

But when I focus on the text field in the card panel, there is no console output when keys are pressed, and no tooltip visible.

That's a distillation of my actual code, which has more elements in the container and more elements in the CardPanel; and the container itself is an element of an enclosing CardPanel in a wizard.

[gelgey]

I did some slight refactoring and now everything is working ... not actually sure what is different but I can now see evidence of the listener & tooltip functioning correctly for the text field in the card panel.

Odd.

[kolli]

well that is good that you got it working..
keep going..

[gelgey]

Okay, I think I have figured out the problem I was having.

If there are two text fields in a CardPanel, then only the first one will show a tooltip and fire off events. When the second text field in the panel is set as the active item, you can enter text into the field but there will be no tooltip and no events fired. On resetting the first text field as the active item then tooltips/events are restored.

Here's some example code that demonstrates the issue:



class Sandbox extends LayoutContainer {

// Two text fields.
private final TextField<String> foo = getTextField("foo");
private final TextField<String> bar = getTextField("bar");

// The text fields are wrapped in FormPanels inside the CardPanel.
private final Component fooItem = getWrappedField(foo);
private final Component barItem = getWrappedField(bar);

// The card panel containing the form panels.
private final CardPanel cp = new CardPanel() {{
this.add(fooItem);
this.add(barItem);
this.setActiveItem(fooItem);
}};

@Override protected void onRender(Element parent, int index) {
super.onRender(parent, index);
this.add(getOptionsGroup());
this.add(cp);
}

// Create a text field with a tooltip and a KeyPress listener.
private TextField<String> getTextField(final String name) {
TextField<String> field = new TextField<String>();
field.setFieldLabel(name);
field.setToolTip("This is a tool tip for field '" + name + "'");
field.addListener(Events.KeyPress, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent event) {
GWT.log("Field '" + name + "' got a KeyPress event", null);
}
});
return field;
}

// Create a form panel for displaying the text field correctly.
private FormPanel getWrappedField(final TextField<String> field) {
return new FormPanel() {{
this.setHeaderVisible(false);
this.setSize(300, 50);
this.add(field);
}};
}

// Show some buttons for selecting 'foo' or 'bar'.
private RadioGroup getOptionsGroup() {
final Radio chooseFoo = new Radio() {{
this.setBoxLabel("foo");
}};
final Radio chooseBar = new Radio() {{
this.setBoxLabel("bar");
}};
return new RadioGroup() {{
this.setOrientation(Orientation.VERTICAL);
this.add(chooseFoo);
this.add(chooseBar);
this.addListener(Events.Change, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent event) {
if (chooseFoo == event.field.getValue()) {
cp.setActiveItem(fooItem);
} else if (chooseBar == event.field.getValue()) {
cp.setActiveItem(barItem);
}
}
});
}};
}

}
This will create a component that shows two radio buttons "foo" and "bar". When one is chosen, a text field is shown. The label of that text field will be "foo" or "bar" as appropriate, and the text field shows a tool tip with the appropriate name. There is also a listener of key press events that writes to the GWT console.

When the card panel is initialized with setActiveItem(fooItem), then the "foo" text field works as expected (tooltip and key press events are shown). But when the "bar" option is chosen, no tooltips or events are shown for its text field.

Conversely, when the card panel is initialized with setActiveItem(barItem), then the "bar" text field works as expected, but the "foo" text field does not.

I've tried this repeatedly, refreshing and restarting the application, and get the same results (using gxt-1.5.3).

So ... it looks like the card panel (or the CardLayout that it uses) is only delegating events and showing tooltips for the first component in its list, and not the active item?

Any suggestions on how to get around this problem would be appreciated. Or maybe I'm doing something incorrectly?

[sven]

There were a few issues with cardlayout. Try to call "layout" after you set the new active item.

[gelgey]

Calling layout() on the card panel after a setActiveItem() call seems to fix this issue ... thanks.