典型的ImageMap应用程序:
我正在努力让区域元素的处理程序解雇。
现状:
onmousedown=myJsOnMouseDownFunction()
,onmouseover
等。我正在寻找一种GWT方法来实现相同的动态行为。我在java代码中实现了处理程序(参见下面的示例)。如何将它们插入Area元素或ImageMapArea小部件?这是我的ImageMapArea
包装AreaElement:
public class ImageMapArea extends Widget implements HasMouseDownHandlers, HasMouseOverHandlers, HasMouseOutHandlers
{
private AreaElement areaElement;
public ImageMapArea() {
areaElement = Document.get().createAreaElement();
super.setElement(areaElement);
}
public AreaElement getAreaElement() { return areaElement; }
@Override
public HandlerRegistration addMouseDownHandler(final MouseDownHandler handler)
{
return super.addDomHandler(handler, MouseDownEvent.getType());
}
@Override
public HandlerRegistration addMouseOutHandler(final MouseOutHandler handler)
{
return super.addDomHandler(handler, MouseOutEvent.getType());
}
@Override
public HandlerRegistration addMouseOverHandler(final MouseOverHandler handler)
{
return super.addDomHandler(handler, MouseOverEvent.getType());
}
}
以下是我将它编织在一起的方式:
// Setup ImageMap.
Image map = new Image("MyMap.svg");
ImageMap imageMap = new ImageMap();
map.getElement().setAttribute("usemap", "#" + "dynmap");
imageMap.setName("dynmap");
// Add area.
ImageMapArea area = new ImageMapArea();
area.getAreaElement().setShape("poly");
area.getAreaElement().setCoords(<string representing the coordinates of area>);
area.getAreaElement().setPropertyInt("aid", 1); // ID to dynamically identify the area element.
area.getAreaElement().setAlt("This is region #1");
area.getAreaElement().setTitle("This is region #1"); // Tooltip works so above coordinates are good.
area.setStylePrimaryName("area");
area.addStyleDependentName("out");
// Add handlers -- those that do not fire.
area.addMouseDownHandler(handlerDown);
area.addMouseOutHandler(handlerOut);
area.addMouseOverHandler(handlerOver);
// Handler example.
final MouseDownHandler handlerDown = new MouseDownHandler()
{
@Override
public void onMouseDown(MouseDownEvent event)
{
final Object source = event.getSource();
final ImageMapArea area = (ImageMapArea) source; // A breakpoint here never stopped.
if (area != null)
{
final int areaIndex = area.getAreaElement().getPropertyInt("aid");
if (areaIndex != areaSelectedIndex)
{
area.removeStyleDependentName("over");
area.addStyleDependentName("selected");
areaSelectedIndex = areaIndex;
... // Other dynamic actions that depend upon the area/region triggering this event.
}
}
}
};
答案 0 :(得分:0)
我不知道为什么我的问题中的处理程序不会触发,但是从this获取灵感导致this ImageMapArea implementation,我找到了一种有效的方法:诀窍是求助于本机javascript (JSNI)设置onmouse
回拨 - JSNI Google Doc here。
如果有人发现它有用,我可以使用ImageMapArea
的更新版本来设置原生处理程序。
public class ImageMapArea extends Widget
{
private AreaElement areaElement;
private ArrayList<Hook> onMouseDownHooks = null;
private ArrayList<Hook> onMouseOutHooks = null;
private ArrayList<Hook> onMouseOverHooks = null;
public ImageMapArea() {
areaElement = Document.get().createAreaElement();
super.setElement(areaElement);
this.setupNativeHandlers(areaElement);
}
public AreaElement getAreaElement() { return areaElement; }
public void addMouseDownHandler(final Hook handler)
{
if (onMouseDownHooks == null)
onMouseDownHooks = new ArrayList<Hook>(1);
onMouseDownHooks.add(handler);
}
public void addMouseOutHandler(final Hook handler)
{
if (onMouseOutHooks == null)
onMouseOutHooks = new ArrayList<Hook>(1);
onMouseOutHooks.add(handler);
}
public void addMouseOverHandler(final Hook handler)
{
if (onMouseOverHooks == null)
onMouseOverHooks = new ArrayList<Hook>(1);
onMouseOverHooks.add(handler);
}
private void onMouseDown()
{
if (onMouseDownHooks != null && !onMouseDownHooks.isEmpty())
{
for (int i = 0; i < onMouseDownHooks.size(); ++i)
{
final Hook hook = onMouseDownHooks.get(i);
hook.execute();
}
}
}
private void onMouseOut()
{
if (onMouseOutHooks != null && !onMouseOutHooks.isEmpty())
{
for (int i = 0; i < onMouseOutHooks.size(); ++i)
{
final Hook hook = onMouseOutHooks.get(i);
hook.execute();
}
}
}
private void onMouseOver()
{
if (onMouseOverHooks != null && !onMouseOverHooks.isEmpty())
{
for (int i = 0; i < onMouseOverHooks.size(); ++i)
{
final Hook hook = onMouseOverHooks.get(i);
hook.execute();
}
}
}
private native void setupNativeHandlers(final AreaElement elem) /*-{
var self = this;
elem.onmousedown = function(){
self.@bkg.gwt.resources.client.widget.ImageMapArea::onMouseDown()();
};
elem.onmouseout = function(){
self.@bkg.gwt.resources.client.widget.ImageMapArea::onMouseOut()();
};
elem.onmouseover = function(){
self.@bkg.gwt.resources.client.widget.ImageMapArea::onMouseOver()();
};
}-*/;
}
上面的 Hook
只不过是Scheduler.ScheduledCommand
。
除了处理程序在回调命令而不是GWT鼠标处理程序中实现之外,其他所有工作都与以前相同;上面的ImageMapArea
负责设置本机JSNI回调。
改进是使用Hook.execute
参数定义ImageMapArea
,以便所有区域可以共享相同的Hook回调对象。