GWT: Add an event handler on all div elements - gwt

How to add an event handler on all div elements with GWT?
I tried the following code but the window alerts are not fired up (But "etvoila" class is set up):
private NodeList<Element> pageDIVElements;
public void initDiv() {
MyDIVEventHandler handler = new MyDIVEventHandler();
pageDIVElements = Document.get().getElementsByTagName("div");
for (int i = 0; i < pageDIVElements.getLength(); i++) {
Element elem = pageDIVElements.getItem(i);
elem.addClassName("etvoila");
com.google.gwt.user.client.Element castedElem = (com.google.gwt.user.client.Element) elem;
DOM.setEventListener(castedElem, handler);
}
class MyDIVEventHandler implements EventListener {
private Element divElement;
#Override
public void onBrowserEvent(Event event) {
Window.alert("Yeepee");
if (event.equals(Event.ONMOUSEOVER)) {
Window.alert("ONMOUSEOVER");
divElement = Element.as(((NativeEvent) event).getEventTarget());
divElement.setPropertyString("background-color", "#C6D4E6");
} else if (event.equals(Event.ONMOUSEOUT)) {
divElement = Element.as(((NativeEvent) event).getEventTarget());
divElement.setAttribute("background-color", "");
}else if (event.equals(Event.ONCLICK)) {
divElement = Element.as(((NativeEvent) event).getEventTarget());
divElement.setAttribute("background-color", "");
Window.alert("ONCLICK");
}
}
}
What is wrong in this method?

Looks like you negelected to sink the events that you want the listener to be notified of.
In this case for example I would add the following into initDiv to element or the relevant children.
DOM.sinkEvents(elem, Event.ONCLICK | Event.ONMOUSEOUT | Event.ONMOUSEOVER);

Similarly to this question, you can wrap it in a Label.
NodeList<Element> elems = Document.get().getElementsByTagName("div");
for (int i = 0; i < elems.getLength(); i++) {
Element elem = elems.get(i);
Label l = Label.wrap(elem);
l.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("yay!");
}
});
}

Related

TextBox not firing valueChangedEvent in GWT

I have this code and do action is never fired
TextBox textbox = new TextBox();
textbox .addValueChangeHandler(new ValueChangeHandler<String>() {
#Override
public void onValueChange(ValueChangeEvent<String> event) {
//do action
}
});
what am I doing wrong ?
One information a forgot the textBox was setEnable(true), is for this reason i don't use other handler.
I find a solution the way to fire the event is when the textBox was set and for that i use coutTotal.setText("someText") but for fire the event i need to use coutTotal.setValue("sometext", true)
private void computeTotal() {
Double total = 0.0;
for (int i = 0; i < discloserPanel.getWidgetCount(); i++) {
if (discloserPanel.getWidget(i) instanceof LigneCout) {
LigneCout ligneCout = (LigneCout) discloserPanel.getWidget(i);
total += ligneCout.getSousTotal();
}
}
coutTotal.setValue(FormHelper.prepareDoubleForForm(total, 0), true);
}

How to make GWT Datagrid have its first column fixed and scroll horizontally and vertically

Currently GWT DataGrid header does this trick with a fixed header row during a vertical scroll. Is there a way to acheive the same on an entire (first) column?
I have implemented ScrolledGrid that freezes first column in DataGrid. You need to use it instead of DataGrid in order to make first column be frozen.
import com.google.gwt.dom.client.*;
import com.google.gwt.event.dom.client.ScrollEvent;
import com.google.gwt.event.dom.client.ScrollHandler;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.client.ui.HeaderPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
/**
*
* #author Yuri Plaksyuk
*/
public class ScrolledGrid extends DataGrid {
private final Text cssText;
private boolean addedClass = false;
private int currentScrollLeft = 0;
public ScrolledGrid() {
cssText = Document.get().createTextNode("");
StyleElement styleElement = Document.get().createStyleElement();
styleElement.setType("text/css");
styleElement.appendChild(cssText);
HeaderPanel headerPanel = (HeaderPanel) getWidget();
headerPanel.getElement().insertFirst(styleElement);
final ScrollPanel scrollPanel = (ScrollPanel) headerPanel.getContentWidget();
scrollPanel.addScrollHandler(new ScrollHandler() {
#Override
public void onScroll(ScrollEvent event) {
int scrollLeft = scrollPanel.getHorizontalScrollPosition();
if (scrollLeft != currentScrollLeft) {
StringBuilder css = new StringBuilder();
if (scrollLeft > 0) {
css.append(".ScrolledGrid-frozen {");
css.append("background-color: inherit;");
css.append("}");
css.append(".ScrolledGrid-frozen div {");
css.append("position: absolute;");
css.append("left: ").append(scrollLeft).append("px;");
css.append("width: ").append(getColumnWidth(getColumn(0))).append(";");
css.append("padding-left: 1.3em;");
css.append("padding-right: 0.5em;");
css.append("margin-top: -0.7em;");
css.append("white-space: nowrap;");
css.append("background-color: inherit;");
css.append("}");
}
else
css.append(".ScrolledGrid-frozen { }");
css.append("th.ScrolledGrid-frozen { background-color: white; }");
cssText.setData(css.toString());
if (!addedClass) {
NodeList<TableRowElement> rows;
TableRowElement row;
TableCellElement cell;
rows = getTableHeadElement().getRows();
for (int i = 0; i < rows.getLength(); ++i) {
row = rows.getItem(i);
cell = row.getCells().getItem(0);
cell.setInnerHTML("<div>" + cell.getInnerHTML() + "</div>");
cell.addClassName("ScrolledGrid-frozen");
}
rows = getTableBodyElement().getRows();
for (int i = 0; i < rows.getLength(); ++i) {
row = rows.getItem(i);
cell = row.getCells().getItem(0);
cell.addClassName("ScrolledGrid-frozen");
}
addedClass = true;
}
currentScrollLeft = scrollLeft;
}
}
});
}
}
Unfortunately, some CSS values are hard-coded.
I adapted Yuri's solution to achieve the following goals:
does not flicker
copes with arbitrary row-heights
works with SelectionModel
more uniform solution
It does not mess with the columns itself, but instead shows arbitrary "frozen" information on row-level.
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.dom.client.*;
import com.google.gwt.event.dom.client.ScrollEvent;
import com.google.gwt.event.dom.client.ScrollHandler;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DefaultCellTableBuilder;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.HeaderPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
/**
* #author Daniel Lintner
*
* A DataGrid extension with the ability to display some row-level-information
* when scrolling left (horizontal), hence important columns out of sight of the user.
*/
public class FrozenDataGrid extends DataGrid
{
//textnode getting updated dynamically when scolling horizontally
private Text cssText;
//the latest scroll-position
private int currentScrollLeft = 0;
//an object extracting String-info from your rowdata
private FrozenValueProvider valueProvider;
//inject basic styling into the document - once
//this is how the frozen row-info looks like
static
{
Text baseCss = Document.get().createTextNode("");
StyleElement styleElement = Document.get().createStyleElement();
styleElement.setType("text/css");
styleElement.appendChild(baseCss);
StringBuilder css = new StringBuilder();
css.append(".ScrolledGrid-base {");
css.append("position: absolute;");
css.append("background-color: gray;");
css.append("padding: .3em;");
css.append("padding-left: .5em;");
css.append("padding-right: .5em;");
css.append("border-radius: 3px 3px;");
css.append("transition: opacity 500ms;");
css.append("color: white;");
css.append("margin-top: 2px;");
css.append("white-space: nowrap;");
css.append("}");
baseCss.setData(css.toString());
Document.get().getBody().insertFirst(styleElement);
}
public FrozenDataGrid()
{
super();
init();
}
public FrozenDataGrid(int pageSize, DataGrid.Resources resources)
{
super(pageSize, resources);
init();
}
public void init()
{
//create a css textnode
cssText = Document.get().createTextNode("");
//create dynamic css Style
StyleElement styleElement = Document.get().createStyleElement();
styleElement.setType("text/css");
styleElement.appendChild(cssText);
//append the initial style condition
//todo the name of this style might be built dynamically per instance - if multiple grid-instances exist/not the use-case by now
StringBuilder css = new StringBuilder();
css.append(".ScrolledGrid-frozen {");
css.append("opacity:0;");
css.append("}");
cssText.setData(css.toString());
//set a custom CellTableBuilder in order to inject the info-div to the row
setTableBuilder(new DefaultCellTableBuilder(this)
{
#Override
public void buildRowImpl(final Object rowValue, final int absRowIndex)
{
//do what DefaultCellTableBuilder does
super.buildRowImpl(rowValue, absRowIndex);
//only do something if there is a valueProvider
if(valueProvider != null) {
//we do this deferred because this row has to created first in order to access it
Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand()
{
#Override
public void execute()
{
createInfoDiv(getTableBodyElement().getRows().getItem(absRowIndex % getPageSize()), rowValue);
}
});
}
}
});
//fetch the ScrollPanel from the grid
HeaderPanel headerPanel = (HeaderPanel) getWidget();
headerPanel.getElement().insertFirst(styleElement);
final ScrollPanel scrollPanel = (ScrollPanel) headerPanel.getContentWidget();
//setup a timer handling the left-offset-css thing
//we use a timer to be able to cancel this operation -> e.g. continuous scroll
final Timer timer = new Timer(){
#Override
public void run() {
StringBuilder css = new StringBuilder();
//we need to left-offset the info-divs
if (scrollPanel.getHorizontalScrollPosition() > 100)
{
css.append(".ScrolledGrid-frozen {");
css.append("left: ").append(3 + scrollPanel.getHorizontalScrollPosition()).append("px;");
css.append("opacity: 1;");
css.append("}");
}
//we are close to the leftmost scroll position: info hidden
else
{
css.append(".ScrolledGrid-frozen {");
css.append("opacity:0;");
css.append("}");
}
cssText.setData(css.toString());
}
};
//track scrolling
scrollPanel.addScrollHandler(new ScrollHandler()
{
#Override
public void onScroll(ScrollEvent event)
{
//cancel previous actions to scroll events
if(timer.isRunning())
timer.cancel();
//actual horizontal scrollposition
int scrollLeft = scrollPanel.getHorizontalScrollPosition();
//a horizontal scroll takes places
if (scrollLeft != currentScrollLeft)
{
//first we hide the row-info
StringBuilder css = new StringBuilder();
css.append(".ScrolledGrid-frozen {");
css.append("opacity:0;");
css.append("}");
cssText.setData(css.toString());
//render left offset after a delay
timer.schedule(500);
//remember the current horizontal position
currentScrollLeft = scrollLeft;
}
}
});
}
private void createInfoDiv(TableRowElement row, Object value)
{
//create a div element and add value and style to it
DivElement div = Document.get().createDivElement();
div.setInnerText(valueProvider.getFrozenValue(value));
div.addClassName("ScrolledGrid-base");
div.addClassName("ScrolledGrid-frozen");
//we add it to the first child of the row, because added as child of the row directly
// confuses the CellTable with coordinating header positions
row.getFirstChildElement().insertFirst(div);
}
public void setFrozenValueProvider(FrozenValueProvider valueProvider) {
this.valueProvider = valueProvider;
}
public interface FrozenValueProvider<T>{
String getFrozenValue(T data);
}
}
Hope this helps developers on this rarely and unsatisfactorily solved problem.
And... there is still room for improvement left.
Cheers Dan

GWT CEll Browser Real Time Update

has someone been able to correctly to update a cell browser at runtime, i.e. when u remove a node or add a node, the change is reflected immediately in the CEll Browser, because I am using a List and when i am making a change it is not being updated on the spot
You can use ListDataProvider setList(...) method for dynamic updates. Here is an example how I update cell browser via RPC:
private void loadAllData(final ListDataProvider<Data> dataProvider) {
dBservice.getAllData(new AsyncCallback<List<Data>>() {
public void onSuccess(List<Data> result) {
dataProvider.setList(result);
}
public void onFailure(Throwable caught) {
caught.printStackTrace();
}
});
}
to refresh a cellBrowser you have to close all the child on the root node.
anyway something like this
for (int i = 0; i < cellBrowser.getRootTreeNode().getChildCount(); i++) {
cellBrowser.getRootTreeNode().setChildOpen(i, false);
}
the AsyncDataProvider calls refreshes data
private final class Model implements TreeViewModel{
private List<ZonaProxy> zonaList = null;
private List<CategoriaProxy> categoriaList = null;
public void setCategoriaList(List<CategoriaProxy> categoriaList) {
this.categoriaList = categoriaList;
}
public void setListZona(List<ZonaProxy> zonaList) {
this.zonaList = zonaList;
}
#SuppressWarnings({ "unchecked", "rawtypes" })
public <T> NodeInfo<?> getNodeInfo(T value) {
CategoryDataProvider dataProvider1 = new CategoryDataProvider();
return new DefaultNodeInfo(dataProvider1, new CategoriaCell());
}
/**
* Check if the specified value represents a leaf node. Leaf nodes cannot be
* opened.
*/
public boolean isLeaf(Object value) {
if (value instanceof CategoriaProxy){
if (((CategoriaProxy) value).getLivello() == 3) {
return true;
}
}
return false;
}
}
private class CategoryDataProvider extends AsyncDataProvider<CategoriaProxy>
{
#Override
protected void onRangeChanged(HasData<CategoriaProxy> display)
{
requests.categoriaRequest().findAllCategorias(0, 8).with().fire(new Receiver<List<CategoriaProxy>>() {
#Override
public void onSuccess(List<CategoriaProxy> values) {
updateRowCount(values.size(), true);
updateRowData(0, values);
}
});
}
}
it Works.
Apparently it is not enough to change the data provider and refresh it.
You need also to force the affected cell to close and reopen it, as in this example
public void updateCellBrowser(String id) {
TreeNode node = getNode(cellBrowser.getRootTreeNode(),id);
if(node != null && ! node.isDestroyed()) {
TreeNode parent = node.getParent();
int index = node.getIndex();
parent.setChildOpen(index, false,true);
parent.setChildOpen(index, true, true);
}
}
In my particular example the cell ids are pathnames hence the following
implementation of getNode().
private TreeNode getNode(TreeNode node, String id) {
for(int i=0; i < node.getChildCount(); i++)
if(node.isChildOpen(i)) {
Object value = node.getChildValue(i);
if(value instanceof String) {
String nodeId = ((String) value);
if(id.equals(nodeId))
return node.setChildOpen(i, true);
if(id.startsWith(nodeId))
getNode(node.setChildOpen(i, true),id);
}
}
return null;
}

gwt change meta tag

I would like to change the meta tag in gwt and I have found the metaElement class. But how can I use it?
That's how we do it for updating the description meta tag:
public void onModuleLoad() {
Button btn = new Button("update description");
btn.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
updateDescription();
}
});
RootPanel.get().add(btn);
}
private void updateDescription() {
NodeList<Element> tags = Document.get().getElementsByTagName("meta");
for (int i = 0; i < tags.getLength(); i++) {
MetaElement metaTag = ((MetaElement) tags.getItem(i));
if (metaTag.getName().equals("description")) {
metaTag.setContent("new description");
}
}
}
Iterate over Document.get().getElementsByTagName("meta"), search for your tag by matching the attribute. Then cast the Node to MetaElement.

GWT: Select a TreeItem with right click

I'm capturing a right click event to show a context menu. What I haven't been able to figure out, is how to make the right click actually select the TreeItem, prior to showing of context menu.
All help is appreciated.
private Tree tree = new Tree() {
#Override
public void onBrowserEvent(Event event) {
if (event.getTypeInt() == Event.ONCONTEXTMENU) {
DOM.eventPreventDefault(event);
showContextMenu(event);
}
super.onBrowserEvent(event);
}
#Override
protected void setElement(Element elem) {
super.setElement(elem);
sinkEvents(Event.ONCONTEXTMENU);
}
};
ONMOUSEDOWN event gets fired before ONCONTEXTMENU. Have you tried to listen for onMouseDown events, and set the selected item? Something along these lines:
#Override
public void onBrowserEvent(Event event) {
switch (DOM.eventGetType(event)) {
case Event.ONMOUSEDOWN:
if (DOM.eventGetButton(event) == Event.BUTTON_RIGHT) {
TreeItem selectedItem = findSelectedItem(event);
if (selectedItem != null) {
selectedItem.setSelected(true);
}
} else {
super.onBrowserEvent(event);
}
break;
case Event.ONCONTEXTMENU:
showContextMenu(event);
break;
default:
super.onBrowserEvent(event);
break;
}
and findSelectedItem traverses the tree looking for the selected item:
TreeItem findSelectedItem(Event e) {
return findSelectedItemRecursive(event.getClientX(), event.getClientY());
}
TreeItem findSelectedTreeItemRecursive(TreeItem root, int x, int y) {
if (null == root) {
int count = getItemCount();
for (int i = 0; i < count; i++) {
TreeItem selected = findSelectedTreeItemRecursive(getItem(i), x, y);
if (selected != null) {
return selected;
}
}
return null;
}
int count = item.getChildCount();
for (int i = 0; i < count; i++) {
TreeItem selected = findSelectedTreeItem(item.getChild(i), x, y);
if (selected != null) {
return selected;
}
}
if (x >= item.getAbsoluteLeft()
&& x <= item.getAbsoluteLeft() + item.getOffsetWidth()
&& y >= item.getAbsoluteTop()
&& y <= item.getAbsoluteTop() + item.getOffsetHeight()) {
return item;
}
return null;
}
You can use dedicated overloaded TreeItem :
public class MyTreeItem extends TreeItem implements ContextMenuHandler {
public SBTreeItem(SBItemTree tree, String name) {
super();
Label w = new Label(name);
w.addDomHandler(this, ContextMenuEvent.getType());
setWidget(w);
}
public void onContextMenu(ContextMenuEvent event) {
Window.alert(getSBItem().getName());
event.getNativeEvent().stopPropagation();
}
}
I'd just like to add a couple of links leading to issues about this:
http://code.google.com/p/google-web-toolkit/issues/detail?id=4529&q=right%20click%20selection
http://code.google.com/p/google-web-toolkit/issues/detail?id=4604&q=right%20click%20selection
I know this is an old question, but hopefully here's an answer that will save time for the masses hitting this page from a Google search. IMO, the best way is to use Google's own internal tree searching code -- it's a solution that scales very well with the number of elements in the tree. I
am using GWT 2.5.1.
private void initTree() {
tree = new Tree() {
#Override
public void onBrowserEvent(Event event) {
/*
* If the event is a context menu event, we want the tree item
* to also be selected.
*
* This logic must occur before the call to the superclass
* method so the selection is updated before the context menu
* logic executes. This is useful when we want to make items in
* the context menu invisible/disabled based on the selection.
*/
if (DOM.eventGetType(event) == Event.ONCONTEXTMENU) {
if (getItemCount() > 0) {
// In my use case there is only 1 top-level tree item
TreeItem root = getItem(0);
// Taken from com.google.gwt.user.client.ui.Tree.elementClicked(Element):
ArrayList<Element> chain = new ArrayList<Element>();
collectElementChain(chain, getElement(), DOM.eventGetTarget(event));
TreeItem selection = findItemByChain(chain, 0, root);
/*
* For some reason SelectionEvent will only fire if
* selection is non-null; I am firing the selection
* event manually because I want to know when there has
* been a deselection of an item in the tree.
*/
if (selection != null) {
this.setSelectedItem(selection);
} else {
SelectionEvent.fire(this, null);
}
}
}
super.onBrowserEvent(event);
}
};
tree.setAnimationEnabled(true);
}
//// BEGIN code copied from com.google.gwt.user.client.ui.Tree:
/**
* Collects parents going up the element tree, terminated at the tree root.
*/
private void collectElementChain(ArrayList<Element> chain, Element hRoot,
Element hElem) {
if ((hElem == null) || (hElem == hRoot)) {
return;
}
collectElementChain(chain, hRoot, DOM.getParent(hElem));
chain.add(hElem);
}
private TreeItem findItemByChain(ArrayList<Element> chain, int idx,
TreeItem root) {
if (idx == chain.size()) {
return root;
}
Element hCurElem = chain.get(idx);
for (int i = 0, n = root.getChildCount(); i < n; ++i) {
TreeItem child = root.getChild(i);
if (child.getElement() == hCurElem) {
TreeItem retItem = findItemByChain(chain, idx + 1,
root.getChild(i));
if (retItem == null) {
return child;
}
return retItem;
}
}
return findItemByChain(chain, idx + 1, root);
}
//// END