PDA

View Full Version : ListView, OnKeyDown and Chrome



Algiano
30 Jul 2010, 6:15 AM
Hi,

I'm having some trouble capturing OnKeyDown events in a ListView in Chrome.

I sink the events and then add the relevant listener in order to capture the key events as such:



sinkEvents(Event.ONKEYDOWN);
addListener(Events.OnKeyDown, getKeyListener());


This works fine in IE and FF (note: I use OnKeyPress for Safari and Opera). However, this should also work fine in Chrome, but it doesn't.

The only way I've found to elicit some kind of response from Chrome is to use DOM and sink the events that way, i.e.:



DOM.sinkEvents( getElement(), Event.ONKEYDOWN );
DOM.addEventListener( getElement(), new EventListener() {...} );


This captures the OnKeyDown event, but as we all know, GWT only allows one listener for each element which means that adding this listener removes any previous listeners added to the ListView (i.e. OnClick, OnDblClick, etc etc).

Any ideas on how to capture key downs in Chrome? (Note: key press doesn't get detected either).

Thanks,
Ale

sven
30 Jul 2010, 6:18 AM
Is it possible that can you post some small testcase that implements EntryPOint? If setting up the EventListner manually works, than it should also work the other way.

Algiano
30 Jul 2010, 6:51 AM
Sven,

The code is below. Just tested it cross-browser and this seems to work :-/

Not entirely sure what's different in my code other than the larger amount of events attached... It's particularly strange because the event works fine in FF but not in Chrome. There is also the added complexity of multiple layouts etc, but not sure how that could have an impact.

Now I'm even more lost! :)

Ale



public void onModuleLoad() {
ListStore<BaseModel> store = new ListStore<BaseModel>();
BaseModel bm = new BaseModel();
bm.set("name", "name");
bm.set("shortName", "shortName");
store.add(bm);

final ContentPanel panel = new ContentPanel();
panel.setAnimCollapse(false);
panel.setFrame(true);
panel.setWidth(535);
panel.setAutoHeight(true);
panel.setBodyBorder(false);

ListView<BaseModel> view = new ListView<BaseModel>();

view.setTemplate(getTemplate());
view.setStore(store);
view.setItemSelector("div.thumb-wrap");


view.sinkEvents(Event.ONKEYDOWN);
view.addListener(Events.OnKeyDown, new Listener<ListViewEvent>() {
public void handleEvent(ListViewEvent be) {
MessageBox.alert("OnKeyDown", "OnKeyDown", null);
}
});

panel.add(view);

RootPanel.get().add(panel);
}
private native String getTemplate() /*-{
return ['<tpl for=".">',
'<div class="thumb-wrap" id="{name}" style="border: 1px solid white">',
'<div class="thumb"><img src="" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'].join("");

}-*/;

Algiano
30 Jul 2010, 1:33 PM
Sven,

The code is below. Just tested it cross-browser and this seems to work :-/

Not entirely sure what's different in my code other than the larger amount of events attached... It's particularly strange because the event works fine in FF but not in Chrome. There is also the added complexity of multiple layouts etc, but not sure how that could have an impact.

Now I'm even more lost! :)

Ale



public void onModuleLoad() {
ListStore<BaseModel> store = new ListStore<BaseModel>();
BaseModel bm = new BaseModel();
bm.set("name", "name");
bm.set("shortName", "shortName");
store.add(bm);

final ContentPanel panel = new ContentPanel();
panel.setAnimCollapse(false);
panel.setFrame(true);
panel.setWidth(535);
panel.setAutoHeight(true);
panel.setBodyBorder(false);

ListView<BaseModel> view = new ListView<BaseModel>();

view.setTemplate(getTemplate());
view.setStore(store);
view.setItemSelector("div.thumb-wrap");


view.sinkEvents(Event.ONKEYDOWN);
view.addListener(Events.OnKeyDown, new Listener<ListViewEvent>() {
public void handleEvent(ListViewEvent be) {
MessageBox.alert("OnKeyDown", "OnKeyDown", null);
}
});

panel.add(view);

RootPanel.get().add(panel);
}
private native String getTemplate() /*-{
return ['<tpl for=".">',
'<div class="thumb-wrap" id="{name}" style="border: 1px solid white">',
'<div class="thumb"><img src="" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'].join("");

}-*/;

sven
31 Jul 2010, 6:26 AM
That makes it even harder to guess what might be wrong.

Try to remove some things from your real application to find out what exactly courses this. Maybe there is an exception somewhere?

Algiano
31 Jul 2010, 7:33 AM
That makes it even harder to guess what might be wrong.

Try to remove some things from your real application to find out what exactly courses this. Maybe there is an exception somewhere?

I'm going to try eliminating bits of code until I find the exact reason.

I'll let you know if it's anything GXT related or just me related :)

Jangla
10 Aug 2010, 1:11 AM
While my comment isn't realted to GWT but ExtJS, I've noticed that listeners attached to fields don't fire at all in Chrome. Period.