how to make a clickable image cell?

[tong123123]

I want to make a column of clickable image inside a celltable,  if user click the image, a new tab page is created.
the problem is  how to make such a clickable image cell column?

[tanteanni]

Should be possible with ActionCell or ButtonCell. The image could be easily added via render method. look at examples on gwt showcase like this.

An image could be added to every kind of cell i think (from example):

String imageHtml = AbstractImagePrototype.create(image).getHTML();

...

@Override
    public void render(Context context, ContactInfo value, SafeHtmlBuilder sb) {
      // Value can be null, so do a null check..
      if (value == null) {
        return;
      }

      // Add the contact image.
      sb.appendHtmlConstant("<tr><td rowspan='3'>");
      sb.appendHtmlConstant(imageHtml);
      sb.appendHtmlConstant("</td>");

...

[Thomas Broyer]

On Thursday, April 19, 2012 9:45:40 AM UTC+2, tong123123 wrote:

I want to make a column of clickable image inside a celltable,  if user click the image, a new tab page is created.
the problem is  how to make such a clickable image cell column?

How about https://www.google.fr/search?q=clickable+ImageCell ? 

[tong123123]

I try the following method but fail, the click event and keydown event has no respond.

package com.mycompany.project.client;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;

// ClickableImageCell extends ClickableTextCell
/*
 * http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/cell/client/AbstractCell.html#AbstractCell%28java.lang.String...%29
 */
public class ClickableImageCell2 extends AbstractCell<String>{
   
    public ClickableImageCell2() {
          /*
           * Let the parent class know that our cell responds to click events and
           * keydown events.
           */
          super("click", "keydown");
        }
   
    public void onBrowserEvent(Context context, Element parent, String value,
        NativeEvent event, ValueUpdater<String> valueUpdater) {
          // Check that the value is not null.

          if (value == null) {
            return;
          }
   

          // Call the super handler, which handlers the enter key.
          super.onBrowserEvent(context, parent, value, event, valueUpdater);
   
          // On click, perform the same action that we perform on enter.
          if ("click".equals(event.getType())) {
            this.onEnterKeyDown(context, parent, value, event, valueUpdater);
          }
    }
   
    /**
     * By convention, cells that respond to user events should handle the enter
     * key. This provides a consistent user experience when users use keyboard
     * navigation in the widget.
     */
    protected void onEnterKeyDown(Context context, Element parent,
        String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
      Window.alert("You clicked " + value);
    }
 


    @Override
    public void render(Context context, String value, SafeHtmlBuilder sb) {
        // TODO Auto-generated method stub
        if (value != null){
            sb.appendHtmlConstant("<img src =\"" + value + "\" alt=\"image\" />");
        }
    }

}

what is the problem? I see the doc and it said

AbstractCell(java.lang.String... consumedEvents)
          Construct a new AbstractCell with the specified consumed events.

and I already pass "click" and "keydown" in the constructor.

[tong123123]

for further information, the onBrowserEvent is not triggered when click or keydown

the value is not null, the code is

ClickableImageCell2 clickableImageCell2 = new ClickableImageCell2();
        Column<Contact, String> clickableImageColumn2 = new Column<Contact, String>(clickableImageCell2){

            @Override
            public String getValue(Contact object) {

                // TODO Auto-generated method stub

                return "/images/line.png";
            }
           
        };

Moreover, I give up to use ImageResources because it fails for unknown reason.

[tong123123]

I got some insight but still not clear, it show that

public void onBrowserEvent(Context context, Element parent, String value,
        NativeEvent event, ValueUpdater<String> valueUpdater)

in ClickableImageCell2 is not override

public void onBrowserEvent(Context context, Element parent, C value,
      NativeEvent event, ValueUpdater<C> valueUpdater)

in AbstractCell,
but why in the api,
http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/cell/client/AbstractCell.html#onBrowserEvent%28com.google.gwt.cell.client.Cell.Context,%20com.google.gwt.dom.client.Element,%20C,%20com.google.gwt.dom.client.NativeEvent,%20com.google.gwt.cell.client.ValueUpdater%29

Class ContactCell,

@Override
    public void onBrowserEvent(Context context, Element parent, Contact value,
        NativeEvent event, ValueUpdater<Contact> valueUpdater) 

is override of AbstractCell?

[tong123123]

I found the answer finally, I wrongly import the
com.google.gwt.user.client.Element;
instead of
com.google.gwt.dom.client.Element;

[Interbooker App]

I'm not really sure if this is the best implementation, but it works for me. -- First, add this to your constructor:

public HeaderCell() {

   super("click", "keydown");

}

-- Then, override the onBrowserEvent:

@Override

    public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {

      // Let AbstractCell handle the keydown event.

      super.onBrowserEvent(context, parent, value, event, valueUpdater);

   

      // Handle the click event.

      if ("click".equals(event.getType())) {

        EventTarget eventTarget = event.getEventTarget();

       // in here we check whether the cell that was being clicked is an image, not the entire cell

        if(eventTarget.toString().contains("img src") && !eventTarget.toString().contains("<div class")){

            // do something if it's indeed the image that was clicked

        }

      }

    }

Cheers, Lin

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/nImJY4gKNjcJ.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Kei Kei]

my method is similar to you, but I found one problem using these kind of method, the respond to click event is hard coded in

public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater)

for example,
if I create an instance of HeaderCell() headerCell1, and then I create another instance headerCell2, click on these two instances will have the same response hard code in the class HeaderCell().


// do something if it's indeed the image that was clicked

what should I do if I want click on each instance of HeaderCell() will have its custom logic?

[Interbooker App]

Let's say I created this for my AbstractCell:

sb.appendHtmlConstant("<div class = 'contactCell'>");

sb.appendHtmlConstant("<table>");      

sb.appendHtmlConstant("<tr>");

sb.appendHtmlConstant("<td id = contactId'>");    

sb.appendHtmlConstant("John Doe");    

sb.appendHtmlConstant("</td>");

sb.appendHtmlConstant("<td id = contactImage rowspan='3'>");    

sb.appendHtmlConstant("<img src = some_imge_url width=60 height=60>");

sb.appendHtmlConstant("</td>");

sb.appendHtmlConstant("</tr>");

sb.appendHtmlConstant("</table>");

sb.appendHtmlConstant("</div>");

Then, if I want the image to respond, I can check it by doing this:

EventTarget eventTarget = event.getEventTarget();

if(eventTarget.toString().contains("<td id=\"contactImage\">") && !eventTarget.toString().contains("<div class")){        

           Window.alert("image clicked!");

}else if(eventTarget.toString().contains("<td id=\"contactId\">") && !eventTarget.toString().contains("<div class")){         

           Window.alert("id clicked!");

}

Just try printing out eventTarget, then you'll see what kind of response you get when you click on the cell