Wie man Clickhandler auf ImageCell in GWT CellTable hinzufügen?

Question

Ich habe es versucht, aber es hat nicht funktioniert.

Column<ContactInfo, String> imageColumn = new Column<ContactInfo, String>(new ImageCell()) {
       @Override
       public String getValue(ContactInfo object) {
           return "contact.jpg";
          }
        };
        imageColumn.setFieldUpdater(new FieldUpdater<ContactInfo, String>() {

        @Override
        public void update(int index, ContactInfo object, String value) {
        Window.alert("You clicked " + object.firstName);
        }

    });
cellTable.addColumn(imageColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));

Answer 1

public class ButtonImageCell extends ButtonCell{

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, 
            String value, SafeHtmlBuilder sb) {
        SafeHtml html = SafeHtmlUtils.fromTrustedString(new Image(value).toString());
        sb.append(html);
    }
}

im Einsatz:

final Column<ReportDTOProxy, String> buttonImageCellTest = new Column<ProxyObject, String>(new ButtonImageCell()) {
    @Override
    public String getValue(ProxyObject row) {
        //url to image
        return row.getImageUrl();
    }
};

Answer 2

Sie können die Klasse ImageCell erweitern und 2 ihrer Methoden außer Kraft setzen - getConsumedEvents und onBrowserEvent. Beispiel:

    private class MyImageCell extends ImageCell{

    @Override
    public Set<String> getConsumedEvents() {
        Set<String> consumedEvents = new HashSet<String>();
        consumedEvents.add("dblclick");
        return consumedEvents;
    }

    @Override
    public void onBrowserEvent(Context context, Element parent,
            String value, NativeEvent event,
            ValueUpdater<String> valueUpdater) {
            switch (DOM.eventGetType((Event)event)) {
            case Event.ONDBLCLICK:
                // TODO
                break;

            default:
                break;
            }
    }

}

Answer 3

Ich habe etwas Ähnliches gemacht, indem ich eine Button-Zelle mit dem Renderer einer ImageCell gemischt habe: ....

    ButtonCell bc = new ButtonCell() {
        @Override
        public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
            if (data != null) {
                ImageResource icon = Icons.BUNDLE.pieChart();
                SafeHtml html = SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create(icon).getHTML());
                sb.append(html);
            }
        }
    };

Sie haben die Idee. Das einzige Problem ist, dass das "Hand"-Symbol nicht angezeigt wird, wenn man mit dem Mauszeiger darüberfährt.... kann wahrscheinlich durch Einstellen des CSS behoben werden.

Answer 4

Sie können dies versuchen, anstatt ButtonCell oder ImageCell zu verwenden. Dies wird mit Sicherheit funktionieren. Wie ich für meine Anforderung implementiert haben. Lassen Sie mich wissen, wie es geht.

 ClickableTextCell imageCell = new ClickableTextCell() {
        @Override
        public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
            if (data != null) {
                String imagePath = "icon.png";
                sb.append(imagePath);
            }
        }
    };

Column<ContactInfo, String> imageColumn = new Column<ContactInfo, String>(imageCell) {
       @Override
       public String getValue(ContactInfo object) {
           return "";
          }
        };
        imageColumn.setFieldUpdater(new FieldUpdater<ContactInfo, String>() {

        @Override
        public void update(int index, ContactInfo object, String value) {
        Window.alert("You clicked " + object.firstName);
        }

    });
cellTable.addColumn(imageColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));

Answer 5

Eine gute Lösung für dieses Problem ist, wenn Sie ActionCell verwenden, das mit Klicks umgehen kann. Die Verwendung ist ein bisschen kompliziert, aber für mich hat es ziemlich gut funktioniert.

Zuerst müssen Sie ActionCell mit einem Delegaten initialisieren, schreiben Sie in den Konstruktor new ActionCell.Delegate<your class> . In dieser Überschreibung wird die Methode execute und schreiben Sie darin Ihren Code, der das Klickereignis behandelt.

Die andere Sache, die Sie tun müssen, ist eine html aus dem Bild aufzubauen. Die SafeHtmlUtils Klasse gibt Ihnen eine sehr einfache Möglichkeit, dies zu tun. Ihre fromTrustedString-Methode hilft Ihnen beim Aufbau der HTML-Datei:

SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create ("Your image from a resource class").getHTML());

Auf diese Weise kann das SafeHtml-Feld initialisiert werden, und wenn Sie dem ActionCell-Konstruktor das SafeHtml und den Delegaten übergeben, wird er die Arbeit für Sie erledigen.

In diesem Beispiel wird eine Schaltfläche mit dem Bild aus der Bundle-Datei initialisiert. Sie können es ohne die Schaltfläche machen, wenn Sie die Render-Methode der ActionCell überschreiben und den SafeHtmlBuilder in der Methode mit der gleichen SafeHtml-Variable wie oben anhängen.

Mein Code sieht wie folgt aus:

IdentityColumn<Type> imageCell = new IdentityColumn<Type>(new ActionCell<Type>("AnyString", 
                new ActionCell.Delegate<Type>() {

            @Override
            public void execute(final Type item) {
                "your code"
            }
        }) {

            @Override
            public void render(Context context, Type value, SafeHtmlBuilder sb) {
                if (value != null) {
                    SafeHtml html = SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create(resource.image).getHTML());
                    sb.append(html);
                }
            }
        });

Sie würden eher die Methode in einer anderen Klasse überschreiben, aber ich wollte sie für diesen Beitrag nicht aufteilen. Es hat bei mir sehr gut funktioniert, ich hoffe, es hilft auch anderen.