Geek Answers Handbook

How to add a string listener to Flextable in GWT?

How to add a row listener to a specific row or all rows in a table? I need to add the type "onMouseOver" for string listeners so that when you hover over them they change the background color of the string, as getRowFormatter allows.

+4
source share
4 answers

Suppose GWT 1.5.3:

PRESS EVENTS OPERATION

If you use FlexTable and you need a click event handler, you can use FlexTable.addTableListener() and register your own TableListener . The TableListener object TableListener to implement an onCellClicked , which will give you the row number.

CALLING OTHER EVENTS (e.g. HOVER)

If you need to handle events other than a click (for example, hover), GWT currently does not have a ready-made interface for this. You pretty much left your own to implement them yourself. There are two ways to do this that I can think of now:

  • Quick and dirty, possibly using JSNI, which gives you the ability to embed Javascript in your GWT code. I have not used a lot of JSNI (except for really difficult workarounds that are not worth the effort of writing it in pure GWT) in my code, so I cannot show you an example; but frankly, I will not recommend this, as it reduces maintainability and extensibility.

  • If you need a custom GWT interface, you can create a new class that inherits HTMLTable or FlexTable. In the constructor, call the sinkEvents function with the necessary events. (e.g. for freezing, you probably need sinkEvents (Event.ONMOUSEOVER)). Then you need the onBrowserEvent function, which handles the mouseover.

    A quick template of what the code should look like:

     import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; import com.google.gwt.user.client.ui.FlexTable; public class FlexTableWithHoverHandler extends FlexTable { public FlexTableWithHoverHandler() { super(); sinkEvents(Event.ONMOUSEOVER); } @Override public void onBrowserEvent(Event event) { switch(DOM.eventGetType(event)) { case Event.ONMOUSEOVER: // Mouse over handling code here break; default: break; } } }

    The best way to code this is to look at the GWT source code ( sinkEvent search) and get an idea of ​​how to do it in the GWT way.

+5
source 
 // this is click final FlexTable myTable = new FlexTable(); myTable.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { Cell cell = myTable.getCellForEvent(event); int receiverRowIndex = cell.getRowIndex(); // <- here! } });
+11
source

It was very easy for me to add javascript directly to the TR element. My code assumes the widget's DOM parent is TD and grandparent is TR, so you must be sure you know your DOM.

Here is my code. Nice and simple, no JSNI or GWT DOM event management required.

TableRowElement rowElement = (TableRowElement) checkbox.getElement (). getParentElement (). getParentElement ();

rowElement.setAttribute ("onMouseOver", "this.className = '" + importRecordsResources.css (). normalActive () + "'");

rowElement.setAttribute ("onMouseOut", "this.className = '" + importRecordsResources.css (). normal () + "'");

+1
source

I just did it like this:

 protected void handleRowsSelectionStyles(ClickEvent event) { int selectedRowIndex = fieldTable.getCellForEvent(event).getRowIndex(); int rowCount = fieldTable.getRowCount(); for (int row = 0; row < rowCount; row++) { Element rowElem = fieldTable.getRowFormatter().getElement(row); rowElem.setClassName(row == selectedRowIndex ? "row selected" : "row"); } }

You call this method from the cells you want to click.

 int row = 0; for (final RowDataProxy rowData : rowDataList) { Label fieldName = new Label(rowData.name()); fieldName.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { handleRowsSelectionStyles(event); } }); fieldTable.setWidget(row++, 0, fieldName); }

Best wishes,

Zeid Hamdy

0
source

More articles:


All Articles