At first I used the Grid.
After creating a new version of the GWT, I want to replace the Grid on the CellTable.
Check out the javadoc for details. My example is like the one you'll find there (just a little extended):
public void onModuleLoad() {
final CellTable<Row> table = new CellTable<Row>();
TextColumn<Row> firstColumn = new TextColumn<Starter.Row>() {
#Override
public String getValue(Row object) {
return object.firstColumn;
}
};
table.addColumn(firstColumn, "header one");
TextColumn<Row> secondColumn = new TextColumn<Starter.Row>() {
#Override
public String getValue(Row object) {
return object.secondColumn;
}
};
table.addColumn(secondColumn, "header two");
TextColumn<Row> thirdColumn = new TextColumn<Starter.Row>() {
#Override
public String getValue(Row object) {
return object.thirdColumn;
}
};
table.addColumn(thirdColumn, "header three");
table.setRowCount(getList().size());
final ListDataProvider<Row> dataProvider = new ListDataProvider<Starter.Row>(getList());
dataProvider.addDataDisplay(table);
final SingleSelectionModel<Row> selectionModel = new SingleSelectionModel<Starter.Row>();
table.setSelectionModel(selectionModel);
Button btn = new Button("delete entry");
btn.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Row selected = selectionModel.getSelectedObject();
if (selected != null) {
dataProvider.getList().remove(selected);
}
}
});
RootPanel.get().add(table);
RootPanel.get().add(btn);
}
private class Row {
private String firstColumn;
private String secondColumn;
private String thirdColumn;
public Row(String firstColumn, String secondColumn, String thirdColumn) {
this.firstColumn = firstColumn;
this.secondColumn = secondColumn;
this.thirdColumn = thirdColumn;
}
}
private LinkedList<Row> getList() {
LinkedList<Row> list = new LinkedList<Row>();
list.add(new Row("first", "entry", "foo"));
list.add(new Row("second", "entry", "foo"));
list.add(new Row("third", "entry", "foo"));
list.add(new Row("fourth", "entry", "foo"));
return list;
}
Or you can just run the cycle like that
#UiHandler("combo")
public void onChange(ChangeEvent e) {
textBoxes.clear();
searchFields.clear();
while(resultsTable.getColumnCount()!=0) {
resultsTable.removeColumn(0);
}
resultsTable.redraw();
Where resultsTable is a CellTable
CellTable as part of new DataPresentationWidgets used just to display data. So you should delete according member from list of data which CellTable using to display.
Related
I've got two classes in my Vaadin 7 project. I'm having a hard time displaying the table in my main UI class. MyTable.java and DocUI.java. How can I get my table to show/display in DocUI.java when I load localhost:8080?
public class MyTable extends DocUI{
public MyTable() {
Table table = new Table("The Brightest Stars");
table.addContainerProperty("Name", String.class, null);
table.addContainerProperty("Mag", Float.class, null);
Object newItemId = table.addItem();
Item row1 = table.getItem(newItemId);
row1.getItemProperty("Name").setValue("Sirius");
row1.getItemProperty("Mag").setValue(-1.46f);
table.addItem(new Object[] {"Canopus", -0.72f}, 2);
table.addItem(new Object[] {"Arcturus", -0.04f}, 3);
table.addItem(new Object[] {"Alpha Centauri", -0.04f}, 4);
table.setPageLength(table.size());
}
}
public class DocUI extends UI {
// new addition 4/28
public String[] userString = { "jacob.smith#example.com",
"isabella.johnson#example.com", "ethan.williams#example.com",
"emma.jones#example.com", "michael.brown#example.com" };
// create combo box
public ComboBox comboBox1 = new ComboBox("Random Combo Box") {
};
#WebServlet(value = "/*", asyncSupported = true)
#VaadinServletConfiguration(productionMode = false, ui = DocUI.class)
public static class Servlet extends VaadinServlet {
}
#Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
Button button = new Button("Click Me");
Button button2 = new Button("I am button 2");
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
layout.addComponent(new Label("Thank you for clicking"));
}
});
#SuppressWarnings("deprecation")
FieldGroup form = new FieldGroup();
layout.setSizeFull();
layout.addComponent(button);
layout.addComponent(button2);
addComponent(MyTable.table);
//new addition 4/28
layout.addComponent(comboBox1);
comboBox1.setInputPrompt("Select a value");
comboBox1.addItems("--add new user--", "jacob.smith#example.com", "isabella.johnson#example.com","ethan.williams#example.com","emma.jones#example.com","michael.brown#example.com");
}
}
Do you know Java ?
Don´t extend from UI in MyTable.
public class MyTable{
private Table table;
public MyTable() {
this.table = new Table("The Brightest Stars");
/* do something with table */
}
public function getTable() {
return this.table;
}
}
Know you can create a MyTable-Object and then use it to getTable and add it to the layout.
Is there a default way to allow the users deselect a selected row?
If not, I want to make the row to be deselected on another click. How can I achieve it?
In the bellow I attached the code piece for my tree grid tg
// ---------------------- set up columns ------------------------ \\
// set up name column
ColumnConfig<ProductMapping, String> cc1 = new ColumnConfig<ProductMapping, String>(new ValueProvider<ProductMapping, String>(){
#Override
public String getValue(ProductMapping object) {
return object.getName();
}
#Override
public void setValue(ProductMapping object, String value) {
object.setName(value);
}
#Override
public String getPath() {
return "name";
}
});
cc1.setWidth(200);
cc1.setHeader("Name");
// setup solution column
ColumnConfig<ProductMapping, String> cc2 = new ColumnConfig<ProductMapping, String>(new ValueProvider<ProductMapping, String>() {
#Override
public String getValue(ProductMapping object) {
return object.getSolution();
}
#Override
public void setValue(ProductMapping object, String value) {
object.setSolution(value);
}
#Override
public String getPath() {
return "solution";
}
});
cc2.setHeader("Solution");
cc2.setWidth(200);
// setup condition column
ColumnConfig<ProductMapping, String> cc3 = new ColumnConfig<ProductMapping, String>(new ValueProvider<ProductMapping, String>() {
#Override
public String getValue(ProductMapping object) {
return object.getCondition();
}
#Override
public void setValue(ProductMapping object, String value) {
object.setCondition(value);
}
#Override
public String getPath() {
return "condition";
}
});
cc3.setHeader("Condition");
cc3.setWidth(200);
// create column model
List<ColumnConfig<ProductMapping,?>> ccl = new LinkedList<ColumnConfig<ProductMapping,?>>();
ccl.add( cc1);
ccl.add( cc2);
ccl.add( cc3);
ColumnModel<ProductMapping> cm = new ColumnModel<ProductMapping>(ccl);
// Create the tree grid using the store, column model and column config for the tree column
tg = new TreeGrid<ProductMapping>(treeStore, cm, ccl.get(0));
// tg.getSelectionModel().get
tg.addRowClickHandler(new RowClickEvent.RowClickHandler(){
#Override
public void onRowClick(RowClickEvent event) {
tgRowClicked(event);
}
});
I've created a vaadin table. When I do right-click it shows context menu with +New... text and when I click on it - it shows modal window with two tables. Every table has the same fuctionality.
The problem is that every time I open and close modal window it adds duplicates for context menu items on modal tables(on the main page it works correct). Moreover - it adds several modal windows when I click on modal table context menu (for example if I open window 5 times - it add 5 context menu items and 5 modal windows for clicked modal context menus)
The only way to return to one item - restart whole application.
What is the problem?
Every my table looks like this
#Component("taskTable")
#Scope("prototype")
public class TaskTable extends AbstractObjectTable {
#Autowired
private TaskService taskService;
#Autowired
private NewTaskWindow taskWindow;
#Autowired
private ShowTaskDetailsWindow detailsWindow;
private Action[] action = new Action[] { new Action("+New...") };
#Override
public Table createTable() {
caption = "Tasks";
headers = new String[] { "Description", "Project", "Status", "Weight", "Developer", "ID" };
this.addActionHandler(new Handler() {
#Override
public Action[] getActions(Object target, Object sender) {
return action;
}
#Override
public void handleAction(Action action, Object sender, Object target) {
switch(action.getCaption()) {
case "+New...": {
PmcUi.getCurrent().addWindow(taskWindow.createWindow());
break;
}
}
//what to do for action
}
});
this.addItemClickListener(new ItemClickListener(){
#Override
public void itemClick(ItemClickEvent event) {
if (event.isDoubleClick()) {
PmcUi.getCurrent().addWindow(detailsWindow.createWindow());
}
return;
}
});
return super.createTable();
}
#Override
protected IndexedContainer projectDatasource() {
IndexedContainer indexedContainer = new IndexedContainer();
for(String header: headers) {
indexedContainer.addContainerProperty(header, String.class, "");
}
List<Task> tasks = taskService.findAllTasks();
for(int i = 0; i < tasks.size(); i++) {
Object id = indexedContainer.addItem();
Task item = tasks.get(i);
indexedContainer.getContainerProperty(id, headers[0]).setValue(item.getDescription());
indexedContainer.getContainerProperty(id, headers[1]).setValue(item.getTaskProject());
indexedContainer.getContainerProperty(id, headers[2]).setValue(item.getStatus());
indexedContainer.getContainerProperty(id, headers[3]).setValue(item.getWeight());
indexedContainer.getContainerProperty(id, headers[4]).setValue(item.getTaskDeveloper());
indexedContainer.getContainerProperty(id, headers[5]).setValue(item.getTaskId());
}
return indexedContainer;
}
}
Where AbstractObjectTable
public abstract class AbstractObjectTable extends Table {
protected String caption;
protected String[] headers = null;
protected Table createTable() {
this.setContainerDataSource(projectDatasource());
this.setVisibleColumns(headers);
this.setSelectable(true);
this.setImmediate(true);
return this;
}
protected abstract IndexedContainer projectDatasource();
}
My +New... modal windows looks similar to that
#Component("newTaskWindow")
public class NewTaskWindow {
private Window createTaskWindow;
#Autowired
private TaskService taskService;
public Window createWindow() {
createTaskWindow = new Window("New Task");
initWindow();
fillWindow();
return createTaskWindow;
}
private void initWindow() {
createTaskWindow.setSizeUndefined();
createTaskWindow.setResizable(false);
createTaskWindow.setModal(true);
createTaskWindow.addCloseListener(new CloseListener() {
#Override
public void windowClose(CloseEvent e) {
Notification.show("Closed");
}
});
}
private void fillWindow() {
final TextField taskDescription = new TextField("Description");
final ComboBox taskProject = new ComboBox("Select project");
final ComboBox taskDeveloper = new ComboBox("Select developer");
final TextField taskWeight = new TextField("Task weight");
final TextField taskStatus = new TextField("Task status");
Button create = new Button("Create");
create.addClickListener(new Button.ClickListener() {
#Override
public void buttonClick(ClickEvent event) {
Task task = new Task();
task.setTaskId(UUID.randomUUID().toString());
task.setStatus(taskStatus.getValue());
task.setTaskDeveloper(taskDeveloper.getValue().toString());
task.setTaskProject(taskProject.getValue().toString());
task.setWeight(taskWeight.getValue());
task.setDescription(taskDescription.getValue());
taskService.insertTask(task);
createTaskWindow.close();
}
});
Button close = new Button("Cancel");
close.addClickListener(new Button.ClickListener() {
#Override
public void buttonClick(ClickEvent event) {
createTaskWindow.close();
}
});
HorizontalLayout layout = new HorizontalLayout(create, close);
FormLayout formLayout = new FormLayout(taskProject, taskDeveloper, taskWeight, taskStatus,
taskDescription, layout);
formLayout.setMargin(true);
createTaskWindow.setContent(formLayout);
}
}
And my details windows also have similar architecture.
#Component("showTaskDetailsWindow")
public class ShowTaskDetailsWindow {
private Window showDetailsWindow;
#Autowired
private TaskService taskService;
public Window createWindow() {
showDetailsWindow = new Window("Show details");
initWindow();
fillWindow();
return showDetailsWindow;
}
private void initWindow() {
showDetailsWindow.setSizeUndefined();
showDetailsWindow.setResizable(false);
showDetailsWindow.setModal(true);
showDetailsWindow.addCloseListener(new CloseListener() {
#Override
public void windowClose(CloseEvent e) {
Notification.show("Closed");
}
});
}
private void fillWindow() {
final TextField taskDescription = new TextField("Description");
final TextField taskProject = new TextField("Task project");
final TextField taskDeveloper = new TextField("Task developer");
final TextField taskWeight = new TextField("Task weight");
final TextField taskStatus = new TextField("Task status");
FormLayout formLayout = new FormLayout(taskProject, taskDeveloper, taskWeight, taskStatus, taskDescription);
formLayout.setMargin(true);
showDetailsWindow.setContent(formLayout);
}
}
What is the problem? Why it is continuously multiplying?
The problem is your getActions implementation
#Override
public Action[] getActions(Object target, Object sender) {
return new Action[] { new Action("+New...")};
}
You should create one instance of the "new Action("+New...")" item and store it for example in the TaskTable object.
The getActions(..) should alsways return the same instance.
If you always create a new action, it just adds them to the already existing actions.
Looks like the createTable() method of the TaskTable class is called too many times but the provided code doesn't show where that method is called. That causes that multiple action handlers and item click listeners are added to a table.
So i have here a Cellbutton :
Column<dateiles, String> column_2 = new Column<dateiles, String>(new ButtonCell()) {
#Override
public String getValue(dateiles object) {
int s = object.comments.size();
String ss = String.valueOf(s);
return ss;
}
};
cellTable.addColumn(column_2, "Comments");
cellTable.setColumnWidth(column_2, "100px");
i want to add to my buttons for each cell column a Tooltip but how is it possible
this.addCellPreviewHandler(new Handler<Tabletype>() {
#Override
public void onCellPreview(final CellPreviewEvent<Tabletype> event) {
int columnID = event.getColumn();
}
});
}
Just replace tabletype with the object you definded when instantiating the table ( The T of CellTable<T> ) Then with the columnID you can detect the right column.
I have a webapp in which I need to get some data from the file and fill to the table. Here is the code of the page with this table:
public class Rules extends ContentPanel{
private final ServerManagementAsync serverManagementSvc = GWT.create(ServerManagement.class);
private ArrayList<PropertyItem> propslist;
private ArrayList<PropertyItem> itemArrayList;
private EditorGrid<PropertyItem> grid;
public Rules(final String customerId){
setLayout(new FlowLayout(10));
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Name");
column.setWidth(220);
TextField<String> text = new TextField<String>();
text.setAllowBlank(false);
column.setEditor(new CellEditor(text));
configs.add(column);
column = new ColumnConfig();
column.setId("type");
column.setHeader("Type");
column.setWidth(220);
TextField<String> typeText = new TextField<String>();
typeText.setAllowBlank(false);
column.setEditor(new CellEditor(typeText));
configs.add(column);
column = new ColumnConfig();
column.setId("value");
column.setHeader("Value");
column.setWidth(220);
configs.add(column);
final ListStore<PropertyItem> store = new ListStore<PropertyItem>();
propslist = getPropslist(customerId);
for (PropertyItem propertyItem: propslist){
store.insert(propertyItem, 0);
}
ColumnModel cm = new ColumnModel(configs);
setHeading("Settings");
setFrame(true);
setWidth(600);
setLayout(new FitLayout());
grid = new EditorGrid<PropertyItem>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
add(grid);
ToolBar toolBar = new ToolBar();
setTopComponent(toolBar);
setButtonAlign(Style.HorizontalAlignment.RIGHT);
addButton(new Button("Refresh", new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent ce) {
store.insert(getPropslist(customerId), 5);
}
}));
addButton(new Button("Add", new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent ce) {
store.commitChanges();
}
}));
}
public ArrayList<PropertyItem> getPropslist(String customerId){
itemArrayList = new ArrayList<PropertyItem>();
AsyncCallback<ArrayList<PropertyItem>> callback = new AsyncCallback<ArrayList<PropertyItem>>() {
#Override
public void onFailure(Throwable throwable) {
}
#Override
public void onSuccess(ArrayList<PropertyItem> propertyItems) {
itemArrayList = propertyItems;
Window.alert("read successful");
}
}
};
serverManagementSvc.getProperties(customerId, callback);
return itemArrayList;
}
}
When I run my app I See only columns names and no data in the cells(and no cells of course). As the example I used this one: Ext GWT 2.2.6 Explorer(Grid)
I don't understand what could cause such proplem. What can be the reason of this?
Because your propsList is being populated Asynchronously the grid is being rendered before the server call returns.
To fix this first make the store a private property like the grid
Next, move the code that populates your store:
for (PropertyItem propertyItem: propslist){
store.insert(propertyItem, 0);
}
into the onSuccess Method of your callback.
Lastly, you may also need to call :
grid.reconfigure(grid.getStore(), grid.getColumnModel());
Just to get the Grid to render again.