GWT - Editable CellTable with password column - gwt

I have CellTable with password as one column. I want the password column to be editable.
My code is something like follows
public class EditPasswordTextCell extends EditTextCell {
#Override
protected void edit(Context context, Element parent, String value) {
setValue(context, parent, value);
InputElement input = getInputElement(parent);
input.setAttribute("type", "password"); //$NON-NLS-1$ //$NON-NLS-2$
input.focus();
input.select();
}
}
This brings up a password box when clicking on the cell. But after finished editing and the value shown in the column is in plain text. Then i decided to override the renderer methods. But most of the methods in EditTextCell class are private, so i ended up overriding
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
value = "******"; //$NON-NLS-1$
super.render(context, value, sb);
}
The above code works fine for first rendering and not for the subsequent.
Now the question arises, should i extend from EditTextCell or AbstractEditableCell?

Easy way
You can pass a SafeHtmlRenderer to the EditTextCell constructor. So that renderer could render the normal view instead of using its default template (normal <input>).
Maybe more formal
It seems your cell is different in view mode as in edit mode so a non-EditTextCell class seems appropiate. But anyway, the first way seems easier...

Related

updating GWT(GXT) Buttoncell in a grid at runtime

I am creating a button cell in GXT Grid,
and adding the cell in my grid column like this
myCol.setCell(getButtonCell());
Now all cells are drawn , after that depends on the server call i want to update my cell with a new Value of MyDTO.
So on my RPC success , I want to call this render for all of my cells and update there values.
How can i achieve this.
public ButtonCell<MyDTO> getButtonCell()
{
ButtonCell<MyDTO> cellTest = new ButtonCell<MyDTO>()
{
#Override
public void render(Context context, MyDTO value, SafeHtmlBuilder
sb)
{
sb.appendHtmlConstant(value.getName());
}
A Sencha GXT grid uses a ListStore. To show new data inside the grid, the store needs to be updated. This can be done by calling store.addAll(theNewDataList). Keep in mind to clear the store before adding new values.
Updating the store will force the grid to redraw. During the redraw, the render-method of the ButtonCell will be called. To change the layout of the button, implement inside the render-method what you want to do.
This is an example from the Sencha GXT Explorer (https://examples.sencha.com/gxt/examples/#ExamplePlace:grid_aggregationgrid):
final NumberFormat numberFormat = NumberFormat.getFormat("0.00");
changeColumn.setCell(new PropertyDisplayCell<Double>(new DoublePropertyEditor(numberFormat)) {
#Override
public void render(com.google.gwt.cell.client.Cell.Context context, Double value, SafeHtmlBuilder sb) {
String style = value < 0 ? "red" : "green";
sb.appendHtmlConstant("<span style='color:" + style + "'>");
super.render(context, value, sb);
sb.appendHtmlConstant("</span>");
}
});
In case the value is less than 0 it will render a red string otherwise a green one.
Hope that helps.

Adding style to a ButtonCell

I know my question is considered initially to refer to the "very novice" level, but I have spent quite o lot of time on searching for the answer. I have used in a gwt application a DataGrid and I have attached a diversity of specific Cell widgets (i.e. TextCell, ButtonCell). My concern is how I can add and handle styling to the button of a ButtonCell through custom css. The code which implements the column of ButtonCells looks like as follows:
Column<FilterInfo, String> delButtonColumn = new Column<FilterInfo, String>(new ButtonCell()) {
#Override
public String getValue(FilterInfo object) {
return "X";
}
};
So, how can I add styling to the button (not to the entire Cell)? I suspect that I should also override the render function, however I cannot figure out how the styling is applied
#Override
public void render(Context context, FilterInfo object, SafeHtmlBuilder sb) {
super.render(context, object, sb);
???
}
You can use the setCellStyleNames() method in Column to apply a style that will be applied to every cell of the column. You have to use GWT 2.4 for this to work. It will probably be something like that. Please note that the code was written outside of any IDE, so it may contain errors.
Column<FilterInfo, String> delButtonColumn = new Column<FilterInfo, String>(new ButtonCell()) {
#Override
public String getValue(FilterInfo object) {
return "X";
}
};
delButtonColumn.setCelLStyleNames("yourStyleName");
And the css :
.yourStyleName.gwt-Button{
//your styling here
}

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.

Setting a drag image in GWT 2.4

I need to implement drag and drop for cells in a CellTable. Following the example from the MobileWebApp I implemented a custom draggable cell:
public class DraggableCell extends AbstractCell<ProductProxy>{
interface Templates extends SafeHtmlTemplates {
#SafeHtmlTemplates.Template("<div draggable=\"true\">{0}</div>")
SafeHtml simpleTextTemplate(String text);
}
protected Templates templates = GWT.create(Templates.class);
public DraggableCell() {
super("dragstart");
}
#Override
public void render(Context context, ProductProxy value, SafeHtmlBuilder sb){
sb.append(templates.simpleTextTemplate(value.getName()));
}
#Override
public void onBrowserEvent(Context context, Element parent,
ProductProxy value, NativeEvent event,
ValueUpdater<ProductProxy> valueUpdater) {
final Integer cursorOffsetX = 0;
final Integer cursorOffsetY = 0;
if ("dragstart".equals(event.getType())) {
// Save the ID of the entity
DataTransfer dataTransfer = event.getDataTransfer();
dataTransfer.setData("text", value.getId());
SafeHtmlBuilder sb = new SafeHtmlBuilder();
sb.appendEscaped(value.getSn());
Element element = DOM.createDiv();
element.setInnerHTML(sb.toSafeHtml().asString());
// Set the helper image.
dataTransfer.setDragImage(element, cursorOffsetX, cursorOffsetY);
}
}
I use a new element for the drag image (in the MobileWebApp they just use the parent element), but unfortunately no image is displayed during the drag. I thought that maybe the new element needs to be attached to the DOM first, so I created a helperPanel and attached the element to it:
DOM.getElementById("dragHelperPanel").appendChild(element);
// Set the helper image.
dataTransfer.setDragImage(element, cursorOffsetX, cursorOffsetY);
This works fine in Firefox 6, but no luck in Chrome (using the latest stable version), so maybe this isn't the right way to do it. Any ideas? Thanks!
You can try the GWT Drag & Drop API. I have used it and its a good one even in mobile devices.
http://code.google.com/p/gwt-dnd/
Try the Demo here,
http://allen-sauer.com/com.allen_sauer.gwt.dnd.demo.DragDropDemo/DragDropDemo.html
Its quite simple to implement and don't have any issues so far for me

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().