GWT Cell Tree Right Click Selection - gwt

So I have created a CellTree and what I want to do is select the cell that receives a right click so that when I open my context menu to do things, I will know what cell I am working with. Maybe I am going about it the wrong way, I can override the onBrowserEvent method and detect when someone right clicks on the tree but I can't figure out which cell is being clicked so I can manually select it. Has anyone found a solution for this problem?

The solution consists of two steps:
1)
Add a TreeViewModel to the constructor of your CellTree. With that model you can set the names of your elements in the tree. Here is a simple implementation from the API:
private static class CustomTreeModel implements TreeViewModel {
/**
* Get the {#link NodeInfo} that provides the children of the specified
* value.
*/
public <T> NodeInfo<?> getNodeInfo(T value) {
/*
* Create some data in a data provider. Use the parent value as a prefix
* for the next level.
*/
ListDataProvider<String> dataProvider = new ListDataProvider<String>();
for (int i = 0; i < 2; i++) {
dataProvider.getList().add(value + "." + String.valueOf(i));
}
// Return a node info that pairs the data with a cell.
return new DefaultNodeInfo<String>(dataProvider, new TextCell());
}
/**
* Check if the specified value represents a leaf node. Leaf nodes cannot be
* opened.
*/
public boolean isLeaf(Object value) {
// The maximum length of a value is ten characters.
return value.toString().length() > 10;
}
}
2) When you receive the right click Event, get the EventTarget name and compare it with the name of that item you set using the model.

I found a solution, I hope this helps others as I have been searching for this for a long time. There might be a better way, but here is how I accomplished the functionality that I desired:
In the cells that I used inside my tree, I did an override on the onbrowserevent to catch the mouse events and set the selection model. With abstract cells you can sink events you want it to listen to and in my case I chose mouse down.
public class CustomContactCell extends AbstractCell<ContactInfo> {
private SetSelectionModel<ContactInfo> selectionModel;
public CustomContactCell(SetSelectionModel<ContactInfo> selectionModel) {
super("mousedown");
this.selectionModel = selectionModel;
}
#Override
public void render(Context context, ContactInfo value, SafeHtmlBuilder sb) {
...
}
#Override
public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context, Element parent, ContactInfo value, NativeEvent event, ValueUpdater<ContactInfo> valueUpdater) {
if (event.getButton() == NativeEvent.BUTTON_RIGHT) {
if (selectionModel != null) {
selectionModel.clear();
selectionModel.setSelected(value, true);
}
}
super.onBrowserEvent(context, parent, value, event, valueUpdater);
}
}

Related

I want to attach a widget to a cell built using TableCellBuilder in GWT . How do I do it?

I have a table declared and initialised in the following manner
TableRowBuilder detailCell;
detailCell = startRow();
TableCellBuilder td = detailCell.startTD();
Now I have an anchor declared and initialised in the following manner
Anchor removeAnchor = new Anchor(rowValue);
removeAnchor.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent arg0) {
Window.alert("clicked");
}
});
td.html(new SafeHtmlBuilder().appendHtmlConstant(removeAnchor.toString()).toSafeHtml());
detailCell.endTD();
Because I am not directly appending that anchor to the cell , the click event is not being handled. What I want is to append the anchor to the cell.How do I do it?
How about using JSNI
http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html#calling
public void onModuleLoad() {
exportStaticMethod();
HTML html=new HTML("<a onclick='doAlert()'>hello</a>");
RootPanel.get().add(html);
}
public final static void doAlert(){
Window.alert("hello");
}
public static native void exportStaticMethod() /*-{
$wnd.doAlert =
$entry(#com.akjava.gwt.test2.client.GWTTest2::doAlert());
}-*/;
It's not the use case of the CellTable.
You can create a custom Cell for your use case :
http://www.gwtproject.org/doc/latest/DevGuideUiCustomCells.html
static class AnchorCell extends AbstractCell<String> {
/**
* The HTML templates used to render the cell.
*/
interface Templates extends SafeHtmlTemplates {
/**
* The template for this Cell, which includes a balise.
*
* #param value the safe value. Since the value type is {#link SafeHtml},
* it will not be escaped before including it in the template.
* Alternatively, you could make the value type String, in which
* case the value would be escaped.
* #return a {#link SafeHtml} instance
*/
#SafeHtmlTemplates.Template("<a href=\"javascript:;\">{0}</div>")
SafeHtml cell(SafeHtml value);
}
/**
* Create a singleton instance of the templates used to render the cell.
*/
private static Templates templates = GWT.create(Templates.class);
public AnchorCell() {
/*
* Sink the click and keydown events. We handle click events in this
* class. AbstractCell will handle the keydown event and call
* onEnterKeyDown() if the user presses the enter key while the cell is
* selected.
*/
super("click", "keydown");
}
/**
* Called when an event occurs in a rendered instance of this Cell. The
* parent element refers to the element that contains the rendered cell, NOT
* to the outermost element that the Cell rendered.
*/
#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())) {
// Ignore clicks that occur outside of the outermost element.
EventTarget eventTarget = event.getEventTarget();
if (parent.getFirstChildElement().isOrHasChild(Element.as(eventTarget))) {
doAction(value, valueUpdater);
}
}
}
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
/*
* Always do a null check on the value. Cell widgets can pass null to
* cells if the underlying data contains a null, or if the data arrives
* out of order.
*/
if (value == null) {
return;
}
// If the value comes from the user, we escape it to avoid XSS attacks.
SafeHtml safeValue = SafeHtmlUtils.fromString(value);
SafeHtml rendered = templates.cell(safeValue);
sb.append(rendered);
}
/**
* onEnterKeyDown is called when the user presses the ENTER key will the
* Cell is selected. You are not required to override this method, but its a
* common convention that allows your cell to respond to key events.
*/
#Override
protected void onEnterKeyDown(Context context, Element parent, String value, NativeEvent event,
ValueUpdater<String> valueUpdater) {
doAction(value, valueUpdater);
}
private void doAction(String value, ValueUpdater<String> valueUpdater) {
// Alert the user that they selected a value.
Window.alert("You clicked on " + value);
// Trigger a value updater. In this case, the value doesn't actually
// change, but we use a ValueUpdater to let the app know that a value
// was clicked.
valueUpdater.update(value);
}
}

How can I observe the changed state of model items in an ObservableList?

I have an ObservableList of model items. The model item is enabled for property binding (the setter fires a property changed event). The list is the content provider to a TableViewer which allows cell editing. I also intend to add a way of adding new rows (model items) via the TableViewer so the number of items in the list may vary with time.
So far, so good.
As this is all within an eclipse editor, I would like to know when the model gets changed. I just need one changed event from any changed model item in order to set the editor 'dirty'. I guess I could attach some kind of listener to each individual list item object but I wonder if there is a clever way to do it.
I think that I might have a solution. The following class is an inline Text editor. Changes to the model bean (all instances) are picked up using the listener added in doCreateElementObservable. My eclipse editor just needs to add its' own change listener to be kept informed.
public class InlineEditingSupport extends ObservableValueEditingSupport
{
private CellEditor cellEditor;
private String property;
private DataBindingContext dbc;
IChangeListener changeListener = new IChangeListener()
{
#Override
public void handleChange(ChangeEvent event)
{
for (ITableEditorChangeListener listener : listenersChange)
{
listener.changed();
}
}
};
public InlineEditingSupport(ColumnViewer viewer, DataBindingContext dbc, String property)
{
super(viewer, dbc);
cellEditor = new TextCellEditor((Composite) viewer.getControl());
this.property = property;
this.dbc = dbc;
}
protected CellEditor getCellEditor(Object element)
{
return cellEditor;
}
#Override
protected IObservableValue doCreateCellEditorObservable(CellEditor cellEditor)
{
return SWTObservables.observeText(cellEditor.getControl(), SWT.Modify);
}
#Override
protected IObservableValue doCreateElementObservable(Object element, ViewerCell cell)
{
IObservableValue value = BeansObservables.observeValue(element, property);
value.addChangeListener(changeListener); // ADD THIS LINE TO GET CHANGE EVENTS
return value;
}
private List<ITableEditorChangeListener> listenersChange = new ArrayList<ITableEditorChangeListener>();
public void addChangeListener(ITableEditorChangeListener listener)
{
listenersChange.remove(listener);
listenersChange.add(listener);
}
public void removeChangeListener(ITableEditorChangeListener listener)
{
listenersChange.remove(listener);
}
}

How do I tell a GWT cell widget data has changed via the Event Bus?

I have a GWT Cell Tree that I use to display a file structure from a CMS. I am using a AsyncDataProvider that loads data from a custom RPC class I created. I also have a Web Socket system that will broadcast events (File create, renamed, moved, deleted etc) from other clients also working in the system.
What I am trying to wrap my head around is when I recieve one of these events, how I correctly update my Cell Tree?
I suppose this problem would be analogus to having two instances of my Cell Tree on the page, which are presenting the same server-side data and wanting to ensure that when the user updated one, that the other updated as well, via using the EventBus.
I feel this should be pretty simple but I have spent about 6 hours on it now with no headway. My code is included below:
NOTE: I am not using RequestFactory even though it may look like I am it is my custom RPC framework. Also, FileEntity is just a simple representation of a file which has a name accessible by getName().
private void drawTree() {
// fileService is injected earlier on and is my own custom rpc service
TreeViewModel model = new CustomTreeModel(new FileDataProvider(fileService));
CellTree tree = new CellTree(model, "Root");
tree.setAnimationEnabled(true);
getView().getWorkspace().add(tree);
}
private static class CustomTreeModel implements TreeViewModel {
// I am trying to use a single AsyncDataProvider so I have a single point of loading data which I can manipulate (Not sure if this is the correct way to go)
public CustomTreeModel(FileDataProvider dataProvider) {
this.provider = provider;
}
public <T> NodeInfo<?> getNodeInfo(final T value) {
if (!(value instanceof FileEntity)) {
// I already have the root File loaded in my presenter, if we are at the root of the tree, I just add it via a list here
ListDataProvider<FileEntity> dataProvider = new ListDataProvider<FileEntity>();
dataProvider.getList().add(TreeWorkspacePresenter.rootFolder);
return new DefaultNodeInfo<FileEntity>(dataProvider,
new FileCell());
} else {
// Otherwise I know that we are loading some tree child data, and I invoke the AsyncProvider to load it from the server
provider.setFocusFile(value);
return new DefaultNodeInfo<FileEntity>(provider,
new FileCell());
}
}
public boolean isLeaf(Object value) {
if(value == null || value instanceof Folder)
return false;
return true;
}
}
public class FileDataProvider extends AsyncDataProvider<FileEntity> {
private FileEntity focusFile;
private FileService service;
#Inject
public FileDataProvider(FileService service){
this.service = service;
}
public void setFocusFile(FileEntity focusFile){
this.focusFile = focusFile;
}
#Override
protected void onRangeChanged(HasData<FileEntity> display) {
service.getChildren(((Folder) focusFile),
new Reciever<List<FileEntity>>() {
#Override
public void onSuccess(List<FileEntity> files) {
updateRowData(0, files);
}
#Override
public void onFailure(Throwable error) {
Window.alert(error.toString());
}
});
}
}
/**
* The cell used to render Files.
*/
public static class FileCell extends AbstractCell<FileEntity> {
private FileEntity file;
public FileEntity getFile() {
return file;
}
#Override
public void render(Context context, FileEntity file, SafeHtmlBuilder sb) {
if (file != null) {
this.file = file;
sb.appendEscaped(file.getName());
}
}
}
Currently there is no direct support for individual tree item refresh even in the latest gwt version.
But there is a workaround for this. Each tree item is associated with an value. Using this value you can get the corresponding tree item.
In your case, i assume, you know which item to update/refresh ie you know which File Entity has changed. Use this file entity to search for the corresponding tree item. Once you get the tree item you just need to expand and collapse or collapse and expand its parent item. This makes parent item to re-render its children. Your changed file entity is one among the children. So it get refreshed.
public void refreshFileEntity(FileEntity fileEntity)
{
TreeNode fileEntityNode = getFileEntityNode(fileEntity, cellTree.getRootTreeNode()
// For expnad and collapse run this for loop
for ( int i = 0; i < fileEntityNode.getParent().getChildCount(); i++ )
{
if ( !fileEntityNode.getParent().isChildLeaf( i ) )
{
fileEntityNode.getParent().setChildOpen( i, true );
}
}
}
public TreeNode getFileEntityNode(FileEntity fileEntity, TreeNode treeNode)
{
if(treeNode.getChildren == null)
{
return null;
}
for(TreeNode node : treeNode.getChildren())
{
if(fileEntity.getId().equals( node.getValue.getId() ))
{
return node;
}
getEntityNode(fileEntity, node);
}
}
You can use the dataprovider to update the celltree.
You can update the complete cell tree with:
provider.setList(pList);
provider.refresh();
If you want to update only a special cell you can get the listwrapper from the dataprovider and only set one element.
provider.getList().set(12, element);

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;
}
}