Events handling in GWT - gwt

I want to do something like this:
I want a cell table in which each cell is a class which I have written. I need to add a click event for the cell table. So How can I get which cell was clicked. As Cell is a class which I have defined, based on the clicked cell I need to perform some action. Can I somehow get the object details of the cell which was clicked. For e.g
I need a excel sheet which is like cell table, each cell in the excel sheet is a class I have defined, say the class holds the values like:
CellClass{
boolean isempty;
string name;
int id;
}
Now If i click in the excel sheet, how can I get which cell was clicked, so that I can tell user the name of the cell and whether it is empty or not.

Use ClickableTextCell to make clickable cell. Refer below Code detail:
nameCell = new ClickableTextCell() {
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String data, SafeHtmlBuilder sb) {
super.render(context, "", sb);
sb.appendHtmlConstant("<input type=text value='"+data+"' />);
};
nameColumn = new Column<Document, String>(nameCell) {
#Override
public String getValue(Document object) {
//code
}
};

Note that there is only one instance of a Cell for each Column, not every value is represented by a Cell instance. The structure you describe above would be the structure of the data you set in CellTable.setRowData.
A Cell has to declare the events it's interested in, via the super constructor in AbstractCell or the getConsumedEvents method defined in Cell. In your case the "click" event.
You can then implement the onBrowserEvent method in your custom cell and react to the click. A context will be passed to this method indicating which row and column the event refers to (see Cell.Context) as well as the key and value associated with the click.
In your case, the custom Cell would look something like this:
public class MyCell extends AbstractCell<String> {
public MyCell() {
super("click");
}
#Override
public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
// Handle the click event.
if ("click".equals(event.getType())) {
// Ignore clicks that occur outside of the outermost element.
EventTarget eventTarget = event.getEventTarget();
if (parent.getFirstChildElement().isOrHasChild(Element.as(eventTarget))) {
doAction(value, valueUpdater);
}
}
}
}
You can also intercept the event at the Column level.
You can find more information in the Dev Guide

Related

GWT CellTable: How to Update A TextBox Dynamically

I have the following CellTable
When the user clicks the Pay Min. CheckBox, it should copy the value from the Due Now column over to the Pay Today text field AND recalculate the total for the Pay Today column.
Here is the code for the CheckboxCell (Pay Min.) and the TextInputCell (Pay Today) columns:
private Column<AccountInvoice, Boolean> buildPayMin() {
columnPayMin = new Column<AccountInvoice, Boolean>(new CheckboxCell(true, false)) {
#Override
public Boolean getValue(AccountInvoice object) {
return object.isPayMinimum();
}
#Override
public void onBrowserEvent(Context context, Element elem, AccountInvoice object, NativeEvent event){
// Get event type
int eventType = Event.as(event).getTypeInt();
// See if this is a 'change' event
if (eventType == Event.ONCHANGE) {
String value = columnMinDue.getValue(object);
// Get the cell to copy the value from
TextInputCell cell = (TextInputCell) columnPayToday.getCell();
// Re-create the view data for the cell
TextInputCell.ViewData viewData = new TextInputCell.ViewData(value);
cell.setViewData(object, viewData);
// Refresh
cellTable.redraw();
event.preventDefault();
event.stopPropagation();
}
}
};
columnPayMin.setDataStoreName(columnPayMinHeader);
columnPayMin.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
columnPayMin.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
return columnPayMin;
}
// -----------------------------------------------------------
private Column<AccountInvoice, String> buildPayToday() {
columnPayToday = new Column<AccountInvoice, String>(new TextInputCell()) {
#Override
public String getValue(AccountInvoice object) {
return object.getPaymentAmount();
}
};
columnPayToday.setDataStoreName(columnPayTodayHeader);
columnPayToday.setFieldUpdater(new FieldUpdater<AccountInvoice, String>() {
#Override
public void update(int index, AccountInvoice object, String value) {
object.setPaymentAmount(value);
cellTable.redraw();
}
});
return columnPayToday;
}
I can get the value to copy over, but the total for the Pay Today column doesn't refresh. It seems to refresh only when a value is manually entered into the Pay Today text field. I even tried doing:
columnPayToday.getFieldUpdater().update(context.getIndex(), object, value);
which didn't help either.
Thanks for any help you might provide.
ViewData represents a temporary value in your TextInputCell. When you call cellTable.redraw(), the TextInputCell reverts to the original value (the one from getValue() method for that column).
Do not redraw the table if you want to modify only the "view" state of TextInputCell, or call accountInvoice.setPayToday# (or whatever method is there) to update the object and then call refresh() on your ListDataProvider (which is a more efficient way to update a table compared to redraw).

GWT: Pass click event from widget contained in cell to the column

I have a widget that I render in a GWT cell, which extends the AbstractCell, via the render function below. The column is created as below with the getValue and the FieldUpdater (update) function being defined. The intent is to set selected row to correspond to the clicked widget. However, when I click on the widget, the onBrowserEvent function of the cell is not called. I think this is happening because the widget in question contains a FlexTable within it.
I verified this by setting a breakpoint in the function AbstractCellTable.onBrowserEvent2 and noticed that the function does not fire a cell event since the
else if (section == getTableBodyElement())
return false. This is false because the section is a sub-section of the table body element corresponding to the table that I inserted via the widget.
Is there a way to pass the click in the inner table (widget) to the outer cell table?
//Render function to add widget to cell
public void render(Context context, MyItem value, SafeHtmlBuilder sb) {
if (value != null) {
SafeHtml safeValue = SafeHtmlUtils.fromTrustedString(value
.getWidget().getElement().getString());
sb.append(safeValue);
}
}
//Creating the corresponding column, setting up the field update,
// and adding the column to cell table
// Create Cell
MyItemCell myItemCell = new MyItemCell();
// Create Column
Column<MyItem, MyItem> myItemColumn = new Column<MyItem, MyItem>(myItemCell) {
#Override
public MyItem getValue(MyItem object) {
return object;
}
};
// add field updater
myItemColumn.setFieldUpdater(new FieldUpdater<MyItem, MyItem>() {
#Override
public void update(int index, MyItem object, MyItem value) {
// This function, for some reason,
// is not getting called when I click
// on the widget corresponding to MyItem
MyDataTable.this.getSelectionModel().setSelected(object, true);
}
});
// Add column to table
this.getDataTable().addColumn(myItemColumn);
FieldUpdater method is called when updating values in the column.
To catch click event, if I am not wrong then MyItemCell is your custom cell. so inside that cell implement onBrowserEvent event and handle click event there.
public void onBrowserEvent(final Event event) {
// TODO Auto-generated method stub
super.onBrowserEvent(event);
if (DOM.eventGetType(event) == Event.ONCLICK) {
System.out.println("event type -->> " + event.getType());
}
}

How can I wrap the text inside the GWT CellTable cell?

I need to wrap the text of the column. My column size is small. So if i set column width some of the letters are not visible. Since the length of the text is bigger than the column size. If there is a space in the text then it wraps itself. So I need to wrap the text.
For example, emailColumn it's value is xxxxxxxxxxxxx#XXXXXXX.com.
I expect the result as xxxxxxxxxxx#x in the first line and xxxx.xom in the next line.
Is it possible?
I tried wrap text inside cell table, we can achieve this by creating custom column.
Create one abstract cell column for cell table,append html contant in that cell and add column to cell table like this.
Add this code in your main java file, which contains cell table and paste below code in neccessary place.
WrappedColumn<T> textDetail = new WrappedColumn<T>() {
// This is method in wrapped details column java file.
public WrapDetails getValue(T object) {
return new WrapDetails( T.<your method1 for wrap text>(), T.<your method2 for wrap text>());
}
};
<your cell table>.addColumn(textDetail);
Create new java file named like 'WrapDetails.java' for render dynamic data and paste below code.
public class WrapDetails extends Composite {
String mail_id;
String website;
public WrapDetails(String id, String site) {
this.mail_id = id;
this.website = site;
}
}
Create new java file for wrap text column with named 'WrappedColumn.java' and paste below code.
public abstract class WrappedColumn<T> extends Column<T, WrapDetails> {
public WrappedColumn() {
super(new WrapDetailsColumnCell());
}
/**
* Return the passed-in object.
* #param object The value to get
*/
#Override
public WrapDetails getValue(T object) {
return null;
}
}
Create new java file named as 'WrapDetailsColumnCell.java' and paste below code.
public class WrapDetailsColumnCell extends AbstractCell<WrapDetails> implements Cell<WrapDetails>{
String mail_id, website;
/**
* Add this constructor, if you want click event for this column.
*/
public WrapDetailsColumnCell() {
super("click", "keydown");
}
/**
* This method provides style for your wrap data
*
*/
#Override
public void render(Context context, WrapDetails value, SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<div><table width='100%'>");
sb.appendHtmlConstant("<tr><td><div style='your style here'>"+mail_id+"</div></td></tr>");
sb.appendHtmlConstant("<tr><td><div style='your style here'>"+website+"</div></td></tr>");
sb.appendHtmlConstant("</table></div>");
}
/**
* This method update cell value on click event.
*
*/
#Override
public void onBrowserEvent(Context context, Element parent,WrapDetails value, NativeEvent event, ValueUpdater<FaxDetails> valueUpdater) {
super.onBrowserEvent(context, parent, value, event, valueUpdater);
setValue(context, parent, value);
valueUpdater.update(value);
}
}
It is working for me well. After tried this, let me know any issue if you get. Have a fun.

GWT CellTable, disable ButtonCell when clicked

I'm pretty new to GWT, but I've been making pretty fast progress until now.
I have a cell table, most of which is read only data returned from an RPC.
I have two columns in the cell table that the user can interact with. One is a TextInputCell, one is a ButtonCell.
When the user clicks the ButtonCell, i want to send the value in the TextInputCell for that row to an RPC.
I have all this working.
The part I cannot get to work is that when the button (ButtonCell) is clicked, I want to disable the button in that row until the RPC returns, and then re-enable it. I also want to clear the text in the input cell for that row when the RPC returns.
I cannot figure out how to get handles to the actual ButtonCell object that was clicked or the TextInputCell to monkey with them.
Any help appreciated.
bq
The problem is that there's no object for the button that was clicked. Your ButtonCell creates HTML that renders buttons - every button in the whole column was written by the same button cell, but there's no java object associated with them.
To disable the button directly, you'll have to first create a handle to it. You could do this by rendering an id in the html your ButtonCell creates, and then getting the element by id from the DOM.
What I do in a similar case is just re-render the entire table when there's a state change. It doesn't take that long, and you don't need to store any references (the whole reason you're using CellTable instead of Grid anyway). When you know your button should be disabled, you just render it disabled.
Both of these suggestions would require you to subclass your Cell objects so that you can do some custom rendering. It's not very difficult, but wrapping your head around the order of operations can be confusing. Good luck!
PS: If you just want to disable the button (and not empty the text field), I think onBrowserEvent gives you a handle to the Element that was clicked - you might be able to use that to disable it.
I have gone through this problem, but eventually I solved it.
check this code
package com.ex7.client;
import com.google.gwt.cell.client.ButtonCell;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
public class CWButton extends ButtonCell {
private int row = -1;
private String alternativevalue;
private String exTitle = "";
private String value;
private String title = "";
public CWButton( ) {
super();
}
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String src, SafeHtmlBuilder sb) {
if (row == -1) {
sb.appendHtmlConstant("<button title='" + title + "' >" +value+"</button>");
return;
}
if (row != context.getIndex()) {
sb.appendHtmlConstant("<Button disabled='disabled' title='" + title + "' >"+ value+"</button>");
} else {
sb.appendHtmlConstant("<button title='" + exTitle + "' >"+ alternativevalue+"</button>");
}
}
#Override
public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context,
Element parent, String value, NativeEvent event,
ValueUpdater<String> valueUpdater) {
if (row == -1 || row == context.getIndex()) {
super.onBrowserEvent(context, parent, value, event, valueUpdater);
return;
}
}
public void setTitle(String title) {
this.title = title;
}
public int getRow() {
return row;
}
public String getExTitle() {
return exTitle;
}
public void setExTitle(String exTitle) {
this.exTitle = exTitle;
}
public void setRow(int row) {
this.row = row;
}
public String getAlternativeValue() {
return alternativevalue;
}
public void setAlternativeValue(String alternativeValue) {
this.alternativevalue = alternativeValue;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}

gwt celltable: Possible to only make some cells in a column editable?

I'm using GWT 2.4. When using a CellTable, I've seen its possible to add a column in which all of the cells are editable ...
final TextInputCell nameCell = new TextInputCell();
Column<Contact, String> nameColumn = new Column<Contact, String>(nameCell) {
#Override
public String getValue(Contact object) {
return object.name;
}
};
table.addColumn(nameColumn, "Name");
but what if I don't want every cell in the column to be editable, only specific ones, based on properties in my "Contact" object? How would I set this up? Thanks, - Dave
The way I would do it is extend the TextInputCell and override the render method to render something else, if you don't want the value in that particular row editable.
Something like this:
public class MyTextInputCell extends TextInputCell {
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
YourObject object = getYourObject();
if ( object.isThisCellEditable() ) {
super.render(context,value,sb);
} else {
sb.appendEscaped(value); // our some other HTML. Whatever you want.
}
}
}
In the render method you have access to the cell's context. Context.getIndex() returns the absolute index of the object. I can't remember of the top of my wad right now, but if you do not provide a ProvidesKey implementation when creating your CellTable you will get one that will use the object itself as the key. So you can get the object using Context.getKey().