GWT : Creating a dynamic FlexTable

For the sake of creating a dynamic FlexTable we will be considering a scenario where a user needs to enter the languages he/she knows along with other options.


Lets get started with the coding :


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.Anchor;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.HTMLTable.Cell;

public class DynamicTable implements EntryPoint {

    public void onModuleLoad() {
       
        final FlexTable table = new FlexTable();
        table.setCellSpacing(5);
        table.setCellPadding(3);

        //table heading columns
        table.setText(0, 0, "Language");
        table.setText(0, 1, "Proficiency Level");
        table.setText(0, 2, "Read");
        table.setText(0, 3, "Write");
        table.setText(0, 4, "Speak");
        table.setText(0, 5, "");
       
        //controls to enter languages
        final TextBox language = new TextBox();

        final ListBox proficiency = new ListBox(false);
        proficiency.addItem("Select", "select");
        proficiency.addItem("Beginner", "1");
        proficiency.addItem("Proficient", "2");
        proficiency.addItem("Expert", "3");

        final CheckBox read = new CheckBox();
        final CheckBox write = new CheckBox();
        final CheckBox speak = new CheckBox();

        Button add = new Button("Add");
               
        //adding input controls to table
        table.setWidget(1, 0, language);
        table.setWidget(1, 1, proficiency);
        table.setWidget(1, 2, read);
        table.setWidget(1, 3, write);
        table.setWidget(1, 4, speak);
        table.setWidget(1, 5, add);

        //adding handlers
  
        //table handler
        table.addClickHandler(new ClickHandler() {
              @Override
              public void onClick(ClickEvent event) {

                  FlexTable ft = (FlexTable) event.getSource();
                  Cell c = ft.getCellForEvent(event);
                  if(c != null) {

                      int cellIndex = c.getCellIndex();
                       int rowIndex = c.getRowIndex();

                       if(cellIndex == 5) {
                           if(rowIndex != 0 && rowIndex != (ft.getRowCount()-1)) {
                               ft.removeRow(rowIndex);
                           }
                       }
                   }
              }
            }
         );

        //Add button handler
        add.addClickHandler(new ClickHandler() {
                          
                public void onClick(ClickEvent event) {
                  
                    String lang = language.getText();
                    String pl = proficiency.getItemText(proficiency.getSelectedIndex());
                  
                    String r = "No";
                    if(read.getValue()) { r = "Yes"; }
                  
                    String w = "No";
                    if(write.getValue()) { w = "Yes"; }
                  
                    String s = "No";
                    if(speak.getValue()) { s = "Yes"; }
                  
                    int numRows = table.getRowCount();
                  
                    numRows = table.insertRow(numRows-1);
                  
                    table.setText(numRows, 0, lang);
                    table.setText(numRows, 1, pl);
                    table.setText(numRows, 2, r);
                    table.setText(numRows, 3, w);
                    table.setText(numRows, 4, s);

                    Anchor anchor = new Anchor("Remove");
                    table.setWidget(numRows, 5, anchor);
                  
                    language.setText("");
                    proficiency.setSelectedIndex(0);
                    read.setText("");
                    write.setText("");
                    speak.setText("");
                }
            }
        );

        RootPanel.get().add(table);
    }
}


Ofcourse many improvements coube be made here, like having a drop down for selection of languages instead of the text box to enter, validation of the input, and having checkbox with boolean value set instead of have the text Yes or No, that's left for you :)