I have a cell table in GWT with textcells and buttoncell ,Now i want to add a hyperlinkCell in my celltable , is this possible ?
TextCell jobStatusCell = new TextCell();
jobStatusColumn = new Column<EmployerJobs, String>(jobStatusCell) {
#Override
public String getValue(EmployerJobs object) {
// int status = object.getJobStatusId();
/*
* if(status ==1) { return ""; } else
*/
// return "post job";
return "view";
}
};
I want some thing like this
HyperlinkCell jobStatusCell = new HyperLinkCell();
Thanks
do you mean this HyperlinkCell?
If not, you can write a normal hyperlink (linkCell )and put it as the content of a cell.
Try using the following Cell implementation
Be sure that you provide cell's value as an array of 2 String objects like:
String[] value = new String[2];
value[HyperTextCell.LINK_INDEX] = "http://www.google.com";
value[HyperTextCell.TEXT_INDEX] = "Search on google";
public class HyperTextCell extends AbstractCell<String[]> {
interface Template extends SafeHtmlTemplates {
#Template("<a target=\"_blank\" href=\"{0}\">{1}</a>")
SafeHtml hyperText(SafeUri link, String text);
}
private static Template template;
public static final int LINK_INDEX = 0, URL_INDEX = 1;
/**
* Construct a new ImageCell.
*/
public HyperTextCell() {
if (template == null) {
template = GWT.create(Template.class);
}
}
#Override
public void render(Context context, String[] value, SafeHtmlBuilder sb) {
if (value != null) {
// The template will sanitize the URI.
sb.append(template.hyperText(UriUtils.fromString(value[LINK_INDEX]), value[URL_INDEX]));
}
}
}
Related
I try to add button into rowExpander content:
so i have:
ButtonCell<Integer> viewButtonCell = new ButtonCell<Integer>();
and row expander
RowExpander<XX> expander = new RowExpander<XX>(identity, new AbstractCell<XX>() {
#Override
public void render(Context context, XX value, SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<span>");
viewButtonCell.render(context, value.getId(), sb);
sb.appendHtmlConstant("</span>");
}
ButtonCell is rendered OK i can see it BUT I cannot click it, no selecthandler from ButtonCell is call :(.
Any ideas how can I make selectHandlerActive for this button ?
Thanks
i created some new RowExpander :
public class MTPRowExpander<M> extends RowExpander<M> {
public static int id = 0;
public static interface WidgetFactory<M> {
public Widget createWidget(M model);
}
private WidgetFactory<M> wf;
private Set<Integer> expandedRows;
public MTPRowExpander(IdentityValueProvider<M> valueProvider,WidgetFactory<M> wf) {
this(valueProvider,GWT.<RowExpanderAppearance<M>> create(RowExpanderAppearance.class),wf);
}
public MTPRowExpander(IdentityValueProvider<M> valueProvider,final RowExpanderAppearance<M> appearance, WidgetFactory<M> wf) {
super(valueProvider, null, appearance);
this.wf = wf;
expandedRows = new HashSet<Integer>();
}
#Override
protected boolean beforeExpand(M model, Element body, XElement row,int rowIndex) {
if (expandedRows.contains(rowIndex)) {
return true;
} else {
expandedRows.add(rowIndex);
return super.beforeExpand(model, body, row, rowIndex);
}
}
#Override
protected String getBodyContent(final M model, int rowIndex) {
final int curentid = id++;
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
Widget widget = wf.createWidget(model);
com.google.gwt.dom.client.Element item = grid.getElement().childElement(".widget" + curentid);
item.appendChild(widget.getElement());
ComponentHelper.setParent(grid, widget);
}
});
return "<div class='widget" + curentid + "'></div>";
}
}
I know that this solution is not perfect but I didnt know how to resolve problem at more proper way.
I am using DataGrid in a GWT. One of the column is TextIntputCell. I want to place one tooltip on the same cell to show the updated value at each FieldUpdter Event.
Following is the code.
TextInputCell commentCell= new TextInputCell();{
#Override
public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
String imagePath = GWT.getModuleBaseURL() + "/images/about.png";
sb.appendHtmlConstant(" ");
sb.appendHtmlConstant("<img src = '" + imagePath + "'height = '20px' width = '20px' title='"+value+"'/>");
}
};
commentColumn = new Column<RegisteredClasses, String>(commentCell) {
#Override
public String getValue(RegisteredClasses object) {
return "";
}
};
FieldUpdater<RegisteredClasses, String> commentUpdater = new FieldUpdater<RegisteredClasses, String>() {
#Override
public void update(int index, RegisteredClasses object, String value) {
if(value != null ){
object.setCommentsByContractor(value);
}
}
};
commentColumn.setFieldUpdater(commentUpdater);
table.addColumn(commentColumn, localizableResource.onAcceptanceComment());
table.setColumnWidth(commentColumn, "280px");
This is not working as the render event is called once only. Is there any way to call it explicitly.
With all the values in textcoloumn.
I want to add image cell.
I don't want use Gwt-Ext or Smart client.
My code
private CellTable<FDocument> getDocumentTable() {
if (documentTable == null) {
documentTable = new CellTable<FDocument>();
documentTable.setSize("600px", "300px");
documentTable.addColumn(nameColumnD, "NAME");
documentTable.addColumn(sizeColumnD, "SIZE");
documentTable.addColumn(modified_by_ColumnD, "MODIFIED BY");
documentTable.addColumn(dateColumnD, "MODIFIED ON");
documentTable.addColumn(majorVersion, "Major Version");
}
return documentTable;
}
TextColumn<FDocument> nameColumnD = new TextColumn<FDocument>() {
#Override
public String getValue(FDocument object) {
return object.getName();
}
};
TextColumn<FDocument> sizeColumnD = new TextColumn<FDocument>() {
#Override
public String getValue(FDocument object) {
return object.getSize();
}
};
..// similarly all the coloumn.
I want to add to image Cell. How to do it.
edited
ImageCell imageCell=new ImageCell();
Column<FDocument,String> iconColumn = new Column<FDocument, String>(imageCell){
#Override
public String getValue(FDocument object) {
// TODO Auto-generated method stub
return object.getImageUrl(object);
}
};
in FDocument Class
public String getImageUrl(FilenetDocument object){
if(object.getMimeType().equals("text/plain")){
return "url(Txt16.gif)";
}else{
if(object.getMimeType()=="application/x-filenet-publishtemplate"){
return "url(PublishTemplate16.gif)";
}else{
if(object.getMimeType()=="application/x-filenet-filetype-msg"){
return "url(Msg16.gif)";
}else{
if(object.getMimeType()=="application/x-filenet-workflowdefinition"){
return "url(WorkflowDefinition16.gif)";
}else{
if(object.getMimeType()=="application/msword"){
return "url(Doc16.gif)";
}else{
return "url(Txt16.gif)";
}
}
}
}
}
Override render method which can be used to add any type of HTML content as Column in CellTable
TextColumn<FDocument> iconColumn = new TextColumn<FDocument>() {
#Override
public String getValue(FDocument object) {
return "";
}
#Override
protected void render(Context context, SafeHtml value, SafeHtmlBuilder sb) {
if (value != null) {
sb.appendHtmlConstant("<p style=\"textalign:center;\"><img src=\"icon.gif\"\></p>");
}
}
};
In your function getImageUrl(), the return is a css style, not path to an image...
So either implement a new Cell which render with the style you provide, or use a ImageResourceCell with your static icons, or try the render method provided by Hardik Mishra but update getImageUrl() to return a PATH to an image.
Here is the code I tried to make the flextable's cell editable
The flex table is loaded with db values, when user clicks on the cell of flextable, it has to become editable and the user entered value has to be stored in db, after the user clicks submit button which is present at each row.
I'm using EditTextCell(), to make the cell editable but it not becoming editable when I test it. I have included all my codes below. Please let me know , if i'm missing anything.
private List<PendingChange<?>> pendingChanges = new ArrayList<PendingChange<?>>();
private List<AbstractEditableCell<?, ?>> editableCells = new ArrayList<AbstractEditableCell<?, ?>>();
CellTable cellTable= new CellTable<MessageEvent>();
EditTextCell editCell = new EditTextCell();
protected FlexTable flextable;
//flextable creation
private final void createWorkflows(List<MessageEvent> theWorkflowMessageEvents, boolean isSelectAll) {
int row = 1;
if (theWorkflowMessageEvents != null) {
for (final MessageEvent workflowMessageEvent : theWorkflowMessageEvents) {
flextable.getRowFormatter().setStyleName(row,ACTIVE_COLLECTION);
flextable.getCellFormatter().setHorizontalAlignment(row, 0, HasHorizontalAlignment.ALIGN_LEFT);
flextable.getCellFormatter().setWordWrap(row, 0, false);
flextable.setText(row, 0, workflowMessageEvent.getTransferReceived());
flextable.getCellFormatter().setHorizontalAlignment(row, 1, HasHorizontalAlignment.ALIGN_LEFT);
flextable.getCellFormatter().setWordWrap(row, 1, false);
flextable.setText(row, 1, workflowMessageEvent.getLoadReceived());
makeFlexTableEditable() ;
Button submitButton= new Button("Submit");
flextable.getCellFormatter().setHorizontalAlignment(row, 3, HasHorizontalAlignment.ALIGN_LEFT);
flextable.getCellFormatter().setWordWrap(row, 3, false);
flextable.setWidget(row, 3,submitButton );
submitWorklow(submitButton,row, workflowMessageEvent);
flextable.getRowFormatter().setVisible(row, true);
row++;
}
}
}
//adding flextable to main panel
protected void displayPendingWorkflows(final List<MessageEvent> theWorkflowMessageEvents) {
this.createPendingWorkflows(theWorkflowMessageEvents, false);
//some code
mainPanel.add(flextable);
mainPanel.add(cellTable);
}
//code for making flex table editable for TransferReceived column
private void makeFlexTableEditable() {
addColumn(new EditTextCell(), new GetValue() {
#Override
public String getValue(MessageEvent workflowMessageEvent) {
return workflowMessageEvent.getTransferReceived();
}
}, new FieldUpdater<MessageEvent, String>() {
public void update(int index, MessageEvent workflowMessageEvent, String value) {
try { pendingChanges.add(new TransferReceived(workflowMessageEvent, value));
}catch (Exception e) {
}
}
});
}
private <C> Column<MessageEvent, String> addColumn(EditTextCell cell,
final GetValue<String> getter,FieldUpdater<MessageEvent, String> fieldUpdater) {
Column<MessageEvent, String> transColumn = new Column<MessageEvent, String>(cell){
#Override
public String getValue(MessageEvent object) {
return getter.getValue(object);
}
};
transColumn.setFieldUpdater(fieldUpdater);
if (cell instanceof AbstractEditableCell<?, ?>) {
editableCells.add((AbstractEditableCell<?, ?>) cell);
}
cellTable.addColumn(transColumn);
return transColumn;
}
/**
* A pending change to a {#link MessageEvent}. Changes aren't committed
* immediately to illustrate that cells can remember their pending changes.
*
* #param <T> the data type being changed
*/
private abstract static class PendingChange<T> {
private final MessageEvent message;
private final T value;
public PendingChange(MessageEvent message, T value) {
this.message = message;
this.value = value;
}
/**
* Commit the change to the contact.
*/
public void commit() {
doCommit(message, value);
}
/**
* Update the appropriate field in the .
*
* #param message to update
* #param value the new value
*/
protected abstract void doCommit(MessageEvent message, T value);
}
/**
* Updates the Transfered Received.
*/
private static class TransferReceived extends PendingChange<String> {
public TransferReceived(MessageEvent message, String value) {
super(message, value);
}
#Override
protected void doCommit(MessageEvent message, String value) {
message.setTransferReceived(value);
}
}
/**
* Get a cell value from a record.
*
* #param <C> the cell type
*/
private static interface GetValue<C> {
C getValue(MessageEvent message);
}
I did something like this in my app. Sorry if the syntax is a bit off but the main idea is to use a clickevent and then get this events position and exchange the widget in that position.
final FlexTable flexTable = new FlexTable();
flexTable.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Cell cell = flexTable.getCellForClickEvent(event);
final int row = cell.getRow();
final int column = cell.getIndex();
final TextBox textBox = new TextBox();
// Get the text from the cell in some way. Maybe use flextTable.getHTML(row, column) or what ever you prefer
// textBox.setText("Something other than this");
textBox.addKeyDownHandler(new KeyDownHandler() {
public void onKeyDownEvent(KeyDownEvent event) {
int code = event.getNativeKeyCode();
if (KeyCodes.KEY_ENTER == code) {
flexTable.setWidget(row, column, new Label(textBox.getText()));
}
}
});
flexTable.setWidget(row, column, textBox);
// You may also need something like this
textBox.setFocus(true);
}
});
I have tried this but didn't work
Column<ContactInfo, String> imageColumn = new Column<ContactInfo, String>(new ImageCell()) {
#Override
public String getValue(ContactInfo object) {
return "contact.jpg";
}
};
imageColumn.setFieldUpdater(new FieldUpdater<ContactInfo, String>() {
#Override
public void update(int index, ContactInfo object, String value) {
Window.alert("You clicked " + object.firstName);
}
});
cellTable.addColumn(imageColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));
public class ButtonImageCell extends ButtonCell{
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String value, SafeHtmlBuilder sb) {
SafeHtml html = SafeHtmlUtils.fromTrustedString(new Image(value).toString());
sb.append(html);
}
}
in use:
final Column<ReportDTOProxy, String> buttonImageCellTest = new Column<ProxyObject, String>(new ButtonImageCell()) {
#Override
public String getValue(ProxyObject row) {
//url to image
return row.getImageUrl();
}
};
You can extend ImageCell class and override 2 it's methods - getConsumedEvents and onBrowserEvent. Example:
private class MyImageCell extends ImageCell{
#Override
public Set<String> getConsumedEvents() {
Set<String> consumedEvents = new HashSet<String>();
consumedEvents.add("dblclick");
return consumedEvents;
}
#Override
public void onBrowserEvent(Context context, Element parent,
String value, NativeEvent event,
ValueUpdater<String> valueUpdater) {
switch (DOM.eventGetType((Event)event)) {
case Event.ONDBLCLICK:
// TODO
break;
default:
break;
}
}
}
I did something similar mixing a Button cell with the renderer from an ImageCell....
ButtonCell bc = new ButtonCell() {
#Override
public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
if (data != null) {
ImageResource icon = Icons.BUNDLE.pieChart();
SafeHtml html = SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create(icon).getHTML());
sb.append(html);
}
}
};
You get the idea. The only problem is that it does not display the "hand" icon when you hover over it.... likely it can be fixed by setting the CSS.
You can try this rather than using ButtonCell or ImageCell. This will work for sure. As I have implemented for my requirement. Let me know how does it goes..
ClickableTextCell imageCell = new ClickableTextCell() {
#Override
public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
if (data != null) {
String imagePath = "icon.png";
sb.append(imagePath);
}
}
};
Column<ContactInfo, String> imageColumn = new Column<ContactInfo, String>(imageCell) {
#Override
public String getValue(ContactInfo object) {
return "";
}
};
imageColumn.setFieldUpdater(new FieldUpdater<ContactInfo, String>() {
#Override
public void update(int index, ContactInfo object, String value) {
Window.alert("You clicked " + object.firstName);
}
});
cellTable.addColumn(imageColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));
A good solution for this issue, if you use ActionCell that is able to handle clicking. The use of it is a bit complicatied, but for me it worked pretty well.
First you need to initialize ActionCell with a delegate, in the constructor, write new ActionCell.Delegate<your class>. In this override the method execute and in that write your code that handle the clicking event.
The other thing you need to do is building up a html from the image. The SafeHtmlUtils class gives you a very easy way to do that. It's fromTrustedString method helps you building up the html:
SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create ("Your image from a resource class").getHTML());
This way the SafeHtml field can be initalized and if you give the ActionCell's contructor the SafeHtml and the Delegate, that it will do the work for you.
In this example a button will be initialized with the image from the bundle file in it. You can make it without the button if you override the render method of the ActionCell and append the SafeHtmlBuilder in the method with the same SafeHtml variable as above.
My code looks like the following:
IdentityColumn<Type> imageCell = new IdentityColumn<Type>(new ActionCell<Type>("AnyString",
new ActionCell.Delegate<Type>() {
#Override
public void execute(final Type item) {
"your code"
}
}) {
#Override
public void render(Context context, Type value, SafeHtmlBuilder sb) {
if (value != null) {
SafeHtml html = SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create(resource.image).getHTML());
sb.append(html);
}
}
});
You'd rather override the method in an another class but I didn't want to split them for this post. It worked for me very well, I hope it will help other's too.
I got all the above and added them in my app. Thanks to all. stackoverflow rocks!
ButtonCell bc = new ButtonCell() {
#Override
public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
if (data != null) {
ImageResource icon = Connector.imageResources.minus();
Image image = new Image(icon);
//fix the mouse pointer
image.getElement().getStyle().setCursor(Cursor.POINTER);
//Do something with the DATA
image.setTitle("Delete " + data.asString());
SafeHtml html = SafeHtmlUtils.fromTrustedString(image.toString());
sb.append(html);
}
}
};
Column<InstanceProperty, String> imageColumn = new Column<InstanceProperty, String>(bc) {
#Override
public String getValue(InstanceProperty object) {
//return the DATA
return object.getKey();
}
};
imageColumn.setFieldUpdater(new FieldUpdater<InstanceProperty, String>() {
#Override
public void update(int index, InstanceProperty property,
String value) {
//you can also use the DATA to do something
InstancePropertiesTable.this.dataProvider.getList().remove(index);
}
});
addColumn(imageColumn, "");
This worked for me:
public class ButtonImageCell extends ButtonCell{
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String renderedHtmlStr, SafeHtmlBuilder sb) {
sb.appendHtmlConstant(renderedHtmlStr);
}
}
In a class containing CellTable table:
TableResources resources = GWT.create(TableResources.class);
ImageResourceRenderer imageRenderer = new ImageResourceRenderer();
...
Column<MyRecord, String> buttonCol = new Column<MyRecord, String>(new ButtonImageCell()) {
#Override
public String getValue(MyRecord record) {
if(record.isOn())
return imageRenderer.render(resources.getOnImg()).asString();
else
return imageRenderer.render(resources.getOffImg()).asString();
}
};
buttonCol.setFieldUpdater(new FieldUpdater<MyRecord, String>() {
public void update(int index, MyRecordobject, String value) {
if (Window.confirm("Do stuff?")) {
//todo: stuff
}
}
});
...
table.addColumn(buttonCol, "");
Where the ImageResource comes from (resources):
public interface TableResources extends CellTable.Resources {
interface TableStyle extends CellTable.Style {
}
#Source("/images/on.png")
ImageResource getOnImg();
#Source("/images/off.png")
ImageResource getOffImg();
}
You need to sinkEvents() with appropriate bits.
Refer to answer of Question Adding ClickHandler to div which contains many other widget.