With this example we are going to demonstrate how to create a Dynamic FlexTable example using the Google Web Toolkit, that is an open source set of tools that allows web developers to create and maintain complex JavaScript front-end applications in Java. To create a FlexTable example one should perform the following steps:
- The
DynamicFlexTableclass implements thecom.google.gwt.core.client.EntryPointinterface to allow the class to act as a module entry point. It overrides itsonModuleLoad()method. - Create a new flexTable.
- Create a Button for adding new row and a Button for deleting a row.
- Create a new VerticalPanel. Add the buttons to it.
- Create a new HorizontalPanel.
- Add the VerticalPanel and the FlexTable to the HorizontalPanel.
- Add the HorizontalPanel to the
RootPanel, that is the panel to which all other widgets must ultimately be added.
Let’s take a look at the code snippet that follows:
package com.javacodegeeks.snippets.enterprise;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class DynamicFlexTable implements EntryPoint {
@Override
public void onModuleLoad() {
//Create new Instance of FlexTable
final FlexTable flexTable = new FlexTable();
flexTable.setBorderWidth(3);
//Set table headers
flexTable.setText(0, 0, "N/A");
flexTable.setText(0, 1, "Column 1");
flexTable.setText(0, 2, "Column 2");
//Button for adding new row
Button AddRowButton = new Button("Add Row", new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
addRow(flexTable);
}
});
//Button for deleting row
Button DeleteRowButton = new Button("Delete Row", new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
deleteRow(flexTable);
}
});
VerticalPanel buttonsPanel = new VerticalPanel();
buttonsPanel.add(AddRowButton);
buttonsPanel.add(DeleteRowButton);
HorizontalPanel hp = new HorizontalPanel();
hp.add(flexTable);
hp.add(buttonsPanel);
RootPanel.get().add(hp);
}
// Add row method
private void addRow(FlexTable flexTable) {
int numRows = flexTable.getRowCount();
flexTable.setText(numRows, 0, "Row "+ numRows);
flexTable.setText(numRows, 1, "Item["+ numRows +", 1]");
flexTable.setText(numRows, 2, "Item["+ numRows +", 2]");
}
// Delete row method
private void deleteRow(FlexTable flexTable) {
int numRows = flexTable.getRowCount();
if (numRows > 1) {
flexTable.removeRow(numRows - 1);
}
}
}
This was an example of how to create a Dynamic FlexTable example using the Google Web Toolkit.
