html map area

[Rockster]

Hi,

is there anyone who has used the HTML <MAP> and <AREA> tags. I don't
see this in the standard GWT 1.4.6x
api. Could someone help me with this ?

Kind regards,
Rockster.

[Peter Blazejewicz]

hi Rockster,

I've already tried some time ago but haven't had time for that,
tonight I give it quick look and here you are: quick implementation
of w3school Map tag example:
http://www.w3schools.com/tags/tag_map.asp

well, it works in Design view in GWT Designer plugin as well :D
(www.instantiations.com):

// START WITH USAGE SAMPLE:

package com.mycompany.project.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.LoadListener;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class ImageMap implements EntryPoint {
public void onModuleLoad() {
//
RootPanel rootPanel = RootPanel.get();
// CREATE IMAGE
final Image image = new Image();
image.setUrl("http://www.w3schools.com/tags/planets.gif");
rootPanel.add(image);
// CREATE SHAPES
AreaWidget sun = new AreaWidget("rect", "0 0 82 126", "Sun",
new SolarSystemCommand("Sun"));
AreaWidget mercury = new AreaWidget("circle", "90 58 3", "Mercury",
new SolarSystemCommand("Mercury"));
AreaWidget venus = new AreaWidget("circle", "124 58 8", "Venus",
new SolarSystemCommand("Venus"));
// CREATE MAP
final MapWidget map = new MapWidget(new AreaWidget[] { sun, mercury,
venus });
map.setID("planetmap");
map.setName("planetmap");
rootPanel.add(map);
// wait till image is loaded to bind map
image.addLoadListener(new LoadListener() {
/* @Override */
public void onError(Widget sender) {
}

/* @Override */
public void onLoad(Widget sender) {
map.bindImage(image);
}

});
}
// just sample command
class SolarSystemCommand implements Command {
String cell;

public SolarSystemCommand(String cell) {
this.cell = cell;
}

public void execute() {
Window.alert("You've clicked: " + cell);
}
}
}

names for classes are arbitrary and can be changed, you can change
implementation (e.g. create Shape/Coords classes),

implementation for widgets:

MAP:


package com.mycompany.project.client;

import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Widget;

public class MapWidget extends Widget {
private AreaWidget[] items;

public MapWidget() {
super();
setElement(DOM.createElement("map"));
sinkEvents(Event.ONCLICK);
}

public MapWidget(AreaWidget[] areas) {
this();
items = areas;
if (items != null && items.length > 0) {
for (int i = 0; i < items.length; i++) {
DOM.appendChild(getElement(), items[i].getElement());
}
}
}

public void bindImage(Image image) {
usemap(image.getElement(), getName());
}

native void usemap(Element element, String name)/*-{
element.useMap = "#"+name;
}-*/;

public String getID() {
return DOM.getElementAttribute(getElement(), "id");
}

public String getName() {
return DOM.getElementAttribute(getElement(), "name");
}

/* @Override */
public void onBrowserEvent(Event event) {
switch (DOM.eventGetType(event)) {
case Event.ONCLICK:
if (items != null && items.length > 0) {
Element target = DOM.eventGetTarget(event);
for (int i = 0; i < items.length; i++) {
if (DOM.compare(target, items[i].getElement())) {
Command command = items[i].getCommand();
if (command != null) {
DeferredCommand.addCommand(command);
}
}
}
DOM.eventPreventDefault(event);
return;
}
}
super.onBrowserEvent(event);
}

public void setID(String id) {
DOM.setElementAttribute(getElement(), "id", (id == null) ? "" : id);
}

public void setName(String name) {
DOM.setElementAttribute(getElement(), "name", (name == null) ? ""
: name);
}

}


// AREA UIObject (not Widget because we don't need events and all that
stuff):

package com.mycompany.project.client;

import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.UIObject;

public class AreaWidget extends UIObject {
private Command command;

public AreaWidget() {
setElement(DOM.createElement("area"));
DOM.setElementAttribute(getElement(), "href", "#");
}

public AreaWidget(String shape, String coords, String alt, Command
command) {
this();
setShape(shape);
setCoords(coords);
setAlt(alt);
this.command = command;
}

Command getCommand() {
return command;
}

void setAlt(String alt) {
DOM.setElementAttribute(getElement(), "alt", (alt == null) ? "area"
: alt);
}

void setCoords(String coords) {
DOM.setElementAttribute(getElement(), "coords", (coords == null) ?
""
: coords);
}

void setShape(String shape) {
DOM.setElementAttribute(getElement(), "shape", (shape == null) ? ""
: shape);
}

}


Let me know how it works for you,
:D
tested on IE/FF/Safari on WinXP box,

regards,
Peter

[Rockster]

Hi Peter,

this is great, seems to work me !!!

Thank you,
Rockster

On Jan 12, 1:27 am, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:
> hiRockster,