how to make a clickable image cell?

1886 views
Skip to first unread message

tong123123

unread,
Apr 19, 2012, 3:45:40 AM4/19/12
to google-we...@googlegroups.com
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

unread,
Apr 19, 2012, 4:46:29 AM4/19/12
to google-we...@googlegroups.com
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

unread,
Apr 19, 2012, 5:18:41 AM4/19/12
to google-we...@googlegroups.com


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?

tong123123

unread,
Apr 20, 2012, 3:39:49 AM4/20/12
to google-we...@googlegroups.com
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

unread,
Apr 20, 2012, 3:42:52 AM4/20/12
to google-we...@googlegroups.com
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

unread,
Apr 20, 2012, 4:14:44 AM4/20/12
to google-we...@googlegroups.com
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

unread,
Apr 20, 2012, 4:38:04 AM4/20/12
to google-we...@googlegroups.com
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

unread,
Apr 25, 2012, 4:10:23 AM4/25/12
to google-we...@googlegroups.com

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

unread,
Apr 30, 2012, 4:59:15 AM4/30/12
to google-we...@googlegroups.com
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

unread,
May 1, 2012, 4:23:47 AM5/1/12
to google-we...@googlegroups.com
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
Reply all
Reply to author
Forward
0 new messages