Java/GWT/FlexTable
Содержание
extends FlexTable implements TableListener
<source lang="java">
package com.jexp.gwt.client;
import java.util.*;
import java.util.Set;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;
import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.History; import com.google.gwt.user.client.HistoryListener; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.rpc.ServiceDefTarget; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.SourcesTableEvents; import com.google.gwt.user.client.ui.TableListener;
public class GWTClient implements EntryPoint, HistoryListener {
private Table table; private void getData(){ ArrayList values = new ArrayList(); values.add( new Person ("A", "H", "E", "6" )); values.add( new Person("B", "G", "E", "19" )); values.add( new Person("C", "F", "A", "17" )); values.add( new Person( "D", "E", "A" , "17")); table.setSource( new SimpleDataSource( (Person[]) values.toArray( new Person[values.size()]) ) ); } public void onModuleLoad() { table = new Table( null, "myTable" ); table.setStyleName("myTable"); RootPanel.get().add(table); getData(); table.addTableListener( new TableListener(){ public void onCellClicked(SourcesTableEvents sender, int row, int cell) { History.newItem( ""+row ); } }); History.addHistoryListener( this ); } public void onHistoryChanged(String historyToken){ table.onCellClicked( table, Integer.parseInt( historyToken ), 0); }
}
class Person { public String firstName; public String lastName; public String company; public String counts; public Person() { } public Person( String firstName, String lastName, String company, String counts ){ this.firstName = firstName; this.lastName = lastName; this.rupany = company; this.counts = counts; }
} class Table extends FlexTable implements TableListener {
private String headerStyle; private String selectedStyle; private TableDataSource source; private int selectedRow; public Table(TableDataSource source, String stylePrefix) { super(); this.setCellPadding(1); this.setCellSpacing(0); this.setWidth("100%"); this.selectedStyle = stylePrefix + "-selected"; this.headerStyle = stylePrefix + "-header"; this.addTableListener(this); this.setSource( source ); } public void onCellClicked(SourcesTableEvents sender, int row, int cell) { this.getRowFormatter() .removeStyleName(selectedRow, selectedStyle); if ((source.getHeaderRow() == null) || (row > 0)) { this.getRowFormatter() .addStyleName(row, selectedStyle); selectedRow = row; } } public void setSource( TableDataSource source ){ for( int i = this.getRowCount(); i > 0; i-- ){ this.removeRow( 0 ); } if( source == null ){ return; } int row = 0; String[] headers = source.getHeaderRow(); if( headers != null ){ for( int i=0; i < headers.length; i++ ){ this.setText( row, i , headers[i] ); } this.getRowFormatter().addStyleName( row, headerStyle ); row++; } int rows = source.getRowCount(); for( int i=0 ; i <rows; i++ ){ String[] values = source.getRow(i); for( int col=0; col < values.length; col++ ){ this.setText( row, col, values[col] ); } row++; } this.selectedRow = 0; this.source = source; }
}
class SimpleDataSource implements TableDataSource { private String[] headers; private String[][] data; public SimpleDataSource(Person[] people) { super(); String[] headers = { "First Name", "Last Name", "Company", "Counts" }; this.headers = headers; this.data = new String[people.length][4]; for( int i=0; i < people.length ; i++ ){ Person p = people[i]; this.data[i][0] = p.firstName; this.data[i][1] = p.lastName; this.data[i][2] = p.rupany; this.data[i][3] = p.counts; } } public int getRowCount() { return data.length; } public String[] getRow(int i) { return data[i]; } public String[] getHeaderRow() { return headers; }
}
interface TableDataSource {
public String[] getHeaderRow(); public int getRowCount(); public String[] getRow(int row);
}
</source>
FlexTable with components
<source lang="java">
package com.jexp.gwt.client; import com.google.gwt.user.client.*; import com.google.gwt.user.client.ui.*; import com.google.gwt.core.client.*; public class GWTClient implements EntryPoint{
private final Object[][] rowData = { { new DeleteButton("Delete"), "A", "B", "C", "D"}, { new DeleteButton("Delete"), "E", "F", "G", "H"}, { new DeleteButton("Delete"), "I", "J", "K", "L"}, }; private final ComponentFlexTable table = new ComponentFlexTable(rowData); private void onCellClicked(SourcesTableEvents sender, final int row, final int cell){ if (row == 0) { return; } final Widget widget = table.getWidget(row, cell); if (widget instanceof Label == false) { return; } final Label label = (Label)widget; final TextBox textBox = new TextBox(); textBox.setText(table.getText(row, cell)); table.setWidget(row, cell, textBox); DeferredCommand.addCommand(new Command() { public void execute() { textBox.setFocus(true); textBox.selectAll(); } }); textBox.addKeyboardListener( new KeyboardListenerAdapter() { public void onKeyPress(Widget sender, char keyCode, int modifiers) { if (keyCode == KeyboardListener.KEY_ENTER) { label.setText(textBox.getText()); table.setWidget(row, cell, label); } else if (keyCode == KeyboardListener.KEY_ESCAPE) { table.setWidget(row, cell, label); } } }); textBox.addFocusListener(new FocusListenerAdapter() { public void onLostFocus(Widget sender) { label.setText(textBox.getText()); table.setWidget(row, cell, label); } }); } public void onModuleLoad() { table.addColumn(""); table.addColumn("Column 1"); table.addColumn("Column 2"); table.addColumn("Column 3"); table.addColumn("Column 4"); RootPanel.get().add(table); table.addTableListener(new TableListener() { public void onCellClicked(SourcesTableEvents sender, final int row, final int cell) { GWTClient.this.onCellClicked(sender, row, cell); } }); } private class DeleteButton extends Button { public DeleteButton(String text) { super(text); addClickListener(new ClickListener() { public void onClick(Widget sender) { table.removeRow(getThisRow()); table.updateRowStyle(); } }); } private int getThisRow() { for (int i=1; i < table.getRowCount(); ++i) { if (table.getWidget(i, 0) == this) { return i; } } return -1; } }
} class ComponentFlexTable extends FlexTable {
protected static final int HEADER_ROW = 0; private int rowIndex = 1; private Object[][] rowData = null; public ComponentFlexTable(Object[][] rowData) { insertRow(HEADER_ROW); getRowFormatter().addStyleName(HEADER_ROW,"ComponentFlexTable-Header"); setCellSpacing(0); addStyleName("ComponentFlexTable"); this.rowData = rowData; createRows(0); updateRowStyle(); } public void createRows(int rowIndex) { if (rowData == null) return; for (int row = rowIndex; row < rowData.length; row++) { addRow(rowData[row]); } } private void addRow(Object[] cellObjects) { for (int i = 0; i < cellObjects.length; i++) { addCell(rowIndex, i, cellObjects[i]); } rowIndex++; } public void addCell(int row, int cell, Object cellObject) { if (cellObject instanceof Widget) setWidget(row, cell, (Widget) cellObject); else setWidget(row, cell,new Label(cellObject.toString())); getCellFormatter().addStyleName(row, cell,"ComponentFlexTable-Cell"); } public void updateRowStyle() { HTMLTable.RowFormatter rf = getRowFormatter(); for (int row = 1; row < getRowCount(); ++row) { if ((row % 2) != 0) { rf.removeStyleName(row,"ComponentFlexTable-EvenRow"); rf.addStyleName(row,"ComponentFlexTable-OddRow"); }else { rf.removeStyleName(row,"ComponentFlexTable-OddRow"); rf.addStyleName(row,"ComponentFlexTable-EvenRow"); } } } public void addColumn(Object columnHeading) { Widget widget = new Label(columnHeading.toString()); int columnIndex = getColumnCount(); widget.setWidth("100%"); widget.addStyleName("ComponentFlexTable-ColumnLabel"); setWidget(HEADER_ROW, columnIndex, widget); getCellFormatter().addStyleName(HEADER_ROW, columnIndex,"ComponentFlexTable-ColumnLabelCell"); } public int getColumnCount() { return getCellCount(HEADER_ROW); }
} ///////////// .ruponentFlexTable {
border-top: thin solid #444444; border-left: thin solid #444444; border-right: thin solid #111111; border-bottom: thin solid #111111; background-color: #505050;
} .ruponentFlexTable-Header { } .ruponentFlexTable-OddRow {
background-color: #cccccc;
} .ruponentFlexTable-EvenRow {
background-color: #505050;
}
.ruponentFlexTable-ColumnLabel {
color: white; padding: 3px;
} .ruponentFlexTable-ColumnLabelCell {
color: white; border-width: 0 0 0 1px; border-style: solid; border-color: white; margin: 0; padding: 0; text-align: center;
} .ruponentFlexTable-Cell {
border-width: 0px 0px 0px 1px; border-style: solid; color: white; border-color: white; padding: 5px;
}
</source>
FlexTable with row style
<source lang="java">
package com.jexp.gwt.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.HTMLTable; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.Widget; public class GWTClient implements EntryPoint{
private static final int HeaderRowIndex = 0; private static final Object[][] rowData = { { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, }; private FlexTable flexTable = new FlexTable(); public void onModuleLoad() { flexTable.insertRow(HeaderRowIndex); flexTable.getRowFormatter().addStyleName(HeaderRowIndex,"FlexTable-Header"); addColumn("Column1"); addColumn("Column12"); addColumn("Column13"); addColumn("Column14"); for (int row = 0; row < rowData.length; row++) { addRow(rowData[row]); } applyDataRowStyles(); flexTable.setCellSpacing(0); flexTable.addStyleName("FlexTable"); RootPanel.get().add(flexTable); } private void addColumn(Object columnHeading) { Widget widget = createCellWidget(columnHeading); int cell = flexTable.getCellCount(HeaderRowIndex); widget.setWidth("100%"); widget.addStyleName("FlexTable-ColumnLabel"); flexTable.setWidget(HeaderRowIndex, cell, widget); flexTable.getCellFormatter().addStyleName( HeaderRowIndex, cell,"FlexTable-ColumnLabelCell"); } private Widget createCellWidget(Object cellObject) { Widget widget = null; if (cellObject instanceof Widget) widget = (Widget) cellObject; else widget = new Label(cellObject.toString()); return widget; } int rowIndex = 1; private void addRow(Object[] cellObjects) { for (int cell = 0; cell < cellObjects.length; cell++) { Widget widget = createCellWidget(cellObjects[cell]); flexTable.setWidget(rowIndex, cell, widget); flexTable.getCellFormatter().addStyleName(rowIndex,cell,"FlexTable-Cell"); } rowIndex++; } private void applyDataRowStyles() { HTMLTable.RowFormatter rf = flexTable.getRowFormatter(); for (int row = 1; row < flexTable.getRowCount(); ++row) { if ((row % 2) != 0) { rf.addStyleName(row, "FlexTable-OddRow"); } else { rf.addStyleName(row, "FlexTable-EvenRow"); } } }
} ////////////////// .FlexTable {
border-top: thin solid #444444; border-left: thin solid #444444; border-right: thin solid #111111; border-bottom: thin solid #111111; background-color: #505050;
} .FlexTable-OddRow {
background-color: #cccccc;
} .FlexTable-EvenRow {
background-color: #505050;
}
.FlexTable-ColumnLabel {
color: white; padding: 3px;
} .FlexTable-ColumnLabelCell {
border-width: 0 0 1px 0; border-style: solid; border-color: white; margin: 0; padding: 0; text-align: center;
} .FlexTable-Cell {
border-width: 0px 0px 0px 1px; border-style: solid; border-color: white; padding: 5px;
}
</source>
Scroll FlexTable
<source lang="java">
package com.jexp.gwt.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.*; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.HTMLTable; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.Widget; public class GWTClient implements EntryPoint{
private static final int HeaderRowIndex = 0; private static final Object[][] rowData = { { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, { "A", "D", "I", "J"}, { "B", "E", "H", "K"}, { "C", "F", "G", "L"}, }; private FlexTable flexTable = new FlexTable(); public void onModuleLoad() { flexTable.insertRow(HeaderRowIndex); flexTable.getRowFormatter().addStyleName(HeaderRowIndex,"FlexTable-Header"); addColumn("Column1"); addColumn("Column12"); addColumn("Column13"); addColumn("Column14"); for (int row = 0; row < rowData.length; row++) { addRow(rowData[row]); } applyDataRowStyles(); flexTable.setCellSpacing(0); flexTable.addStyleName("FlexTable"); ScrollPanel scrollPanel = new ScrollPanel(); flexTable.setWidth("100%"); scrollPanel.add(flexTable); scrollPanel.setSize("300", "200"); RootPanel.get().add(scrollPanel); } private void addColumn(Object columnHeading) { Widget widget = createCellWidget(columnHeading); int cell = flexTable.getCellCount(HeaderRowIndex); widget.setWidth("100%"); widget.addStyleName("FlexTable-ColumnLabel"); flexTable.setWidget(HeaderRowIndex, cell, widget); flexTable.getCellFormatter().addStyleName( HeaderRowIndex, cell,"FlexTable-ColumnLabelCell"); } private Widget createCellWidget(Object cellObject) { Widget widget = null; if (cellObject instanceof Widget) widget = (Widget) cellObject; else widget = new Label(cellObject.toString()); return widget; } int rowIndex = 1; private void addRow(Object[] cellObjects) { for (int cell = 0; cell < cellObjects.length; cell++) { Widget widget = createCellWidget(cellObjects[cell]); flexTable.setWidget(rowIndex, cell, widget); flexTable.getCellFormatter().addStyleName(rowIndex,cell,"FlexTable-Cell"); } rowIndex++; } private void applyDataRowStyles() { HTMLTable.RowFormatter rf = flexTable.getRowFormatter(); for (int row = 1; row < flexTable.getRowCount(); ++row) { if ((row % 2) != 0) { rf.addStyleName(row, "FlexTable-OddRow"); } else { rf.addStyleName(row, "FlexTable-EvenRow"); } } }
}
</source>
Table Mouse Over Event
<source lang="java">
package com.jexp.gwt.client; import java.util.*; import java.util.Set; import com.google.gwt.user.client.ui.ClickListener; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.SourcesTableEvents; import com.google.gwt.user.client.ui.TableListener; import com.google.gwt.user.client.Element; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.History; import com.google.gwt.user.client.HistoryListener; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.rpc.ServiceDefTarget; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.SourcesTableEvents; import com.google.gwt.user.client.ui.TableListener;
public class GWTClient implements EntryPoint, HistoryListener {
private Table table; private void getData(){ ArrayList values = new ArrayList(); values.add( new Person ("A", "H", "E", "6" )); values.add( new Person("B", "G", "E", "19" )); values.add( new Person("C", "F", "A", "17" )); values.add( new Person( "D", "E", "A" , "17")); table.setSource( new SimpleDataSource( (Person[]) values.toArray( new Person[values.size()]) ) ); } public void onModuleLoad() { table = new Table( null, "myTable" ); table.setStyleName("myTable"); RootPanel.get().add(table); getData(); table.addTableListener( new TableListener(){ public void onCellClicked(SourcesTableEvents sender, int row, int cell) { History.newItem( ""+row ); } }); History.addHistoryListener( this ); } public void onHistoryChanged(String historyToken){ table.onCellClicked( table, Integer.parseInt( historyToken ), 0); }
}
class Person { public String firstName; public String lastName; public String company; public String counts; public Person() { } public Person( String firstName, String lastName, String company, String counts ){ this.firstName = firstName; this.lastName = lastName; this.rupany = company; this.counts = counts; }
} class Table extends FlexTable implements TableListener {
private String headerStyle; private String selectedStyle; private TableDataSource source; private int selectedRow; public Table(TableDataSource source, String stylePrefix) { super(); this.setCellPadding(1); this.setCellSpacing(0); this.setWidth("100%"); this.selectedStyle = stylePrefix + "-selected"; this.headerStyle = stylePrefix + "-header"; this.addTableListener(this); this.setSource( source ); sinkEvents(Event.ONMOUSEDOWN | Event.ONMOUSEUP | Event.ONMOUSEOVER |Event.ONMOUSEOUT); } public void onBrowserEvent(Event event) { Element td = getEventTargetCell(event); if (td == null) return; Element tr = DOM.getParent(td); switch (DOM.eventGetType(event)) { case Event.ONMOUSEDOWN: { DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00"); onRowClick(tr); break; } case Event.ONMOUSEUP: { DOM.setStyleAttribute(tr, "backgroundColor", "#ffffff"); break; } case Event.ONMOUSEOVER: { DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00"); onRowRollover(tr); break; } case Event.ONMOUSEOUT: { DOM.setStyleAttribute(tr, "backgroundColor","#ffffff"); break; } } } public void onRowClick(Element event){ } public void onRowRollover(Element event){ }
public void onCellClicked(SourcesTableEvents sender, int row, int cell) { this.getRowFormatter() .removeStyleName(selectedRow, selectedStyle); if ((source.getHeaderRow() == null) || (row > 0)) { this.getRowFormatter() .addStyleName(row, selectedStyle); selectedRow = row; } } public void setSource( TableDataSource source ){ for( int i = this.getRowCount(); i > 0; i-- ){ this.removeRow( 0 ); } if( source == null ){ return; } int row = 0; String[] headers = source.getHeaderRow(); if( headers != null ){ for( int i=0; i < headers.length; i++ ){ this.setText( row, i , headers[i] ); } this.getRowFormatter().addStyleName( row, headerStyle ); row++; } int rows = source.getRowCount(); for( int i=0 ; i <rows; i++ ){ String[] values = source.getRow(i); for( int col=0; col < values.length; col++ ){ this.setText( row, col, values[col] ); } row++; } this.selectedRow = 0; this.source = source; }
}
class SimpleDataSource implements TableDataSource { private String[] headers; private String[][] data; public SimpleDataSource(Person[] people) { super(); String[] headers = { "First Name", "Last Name", "Company", "Counts" }; this.headers = headers; this.data = new String[people.length][4]; for( int i=0; i < people.length ; i++ ){ Person p = people[i]; this.data[i][0] = p.firstName; this.data[i][1] = p.lastName; this.data[i][2] = p.rupany; this.data[i][3] = p.counts; } } public int getRowCount() { return data.length; } public String[] getRow(int i) { return data[i]; } public String[] getHeaderRow() { return headers; }
}
interface TableDataSource {
public String[] getHeaderRow(); public int getRowCount(); public String[] getRow(int row);
}
</source>
Table on Browser Event
<source lang="java">
package com.jexp.gwt.client; import java.util.*; import java.util.Set; import com.google.gwt.user.client.ui.ClickListener; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.SourcesTableEvents; import com.google.gwt.user.client.ui.TableListener; import com.google.gwt.user.client.Element; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.History; import com.google.gwt.user.client.HistoryListener; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.rpc.ServiceDefTarget; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.SourcesTableEvents; import com.google.gwt.user.client.ui.TableListener;
public class GWTClient implements EntryPoint, HistoryListener {
private Table table; private void getData(){ ArrayList values = new ArrayList(); values.add( new Person ("A", "H", "E", "6" )); values.add( new Person("B", "G", "E", "19" )); values.add( new Person("C", "F", "A", "17" )); values.add( new Person( "D", "E", "A" , "17")); table.setSource( new SimpleDataSource( (Person[]) values.toArray( new Person[values.size()]) ) ); } public void onModuleLoad() { table = new Table( null, "myTable" ); table.setStyleName("myTable"); RootPanel.get().add(table); getData(); table.addTableListener( new TableListener(){ public void onCellClicked(SourcesTableEvents sender, int row, int cell) { History.newItem( ""+row ); } }); History.addHistoryListener( this ); } public void onHistoryChanged(String historyToken){ table.onCellClicked( table, Integer.parseInt( historyToken ), 0); }
}
class Person { public String firstName; public String lastName; public String company; public String counts; public Person() { } public Person( String firstName, String lastName, String company, String counts ){ this.firstName = firstName; this.lastName = lastName; this.rupany = company; this.counts = counts; }
} class Table extends FlexTable implements TableListener {
private String headerStyle; private String selectedStyle; private TableDataSource source; private int selectedRow; public Table(TableDataSource source, String stylePrefix) { super(); this.setCellPadding(1); this.setCellSpacing(0); this.setWidth("100%"); this.selectedStyle = stylePrefix + "-selected"; this.headerStyle = stylePrefix + "-header"; this.addTableListener(this); this.setSource( source ); sinkEvents(Event.ONMOUSEDOWN | Event.ONMOUSEUP | Event.ONMOUSEOVER |Event.ONMOUSEOUT); } public void onBrowserEvent(Event event) { Element td = getEventTargetCell(event); if (td == null) return; Element tr = DOM.getParent(td); switch (DOM.eventGetType(event)) { case Event.ONMOUSEDOWN: { DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00"); onRowClick(tr); break; } case Event.ONMOUSEUP: { DOM.setStyleAttribute(tr, "backgroundColor", "#ffffff"); break; } case Event.ONMOUSEOVER: { DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00"); onRowRollover(tr); break; } case Event.ONMOUSEOUT: { DOM.setStyleAttribute(tr, "backgroundColor","#ffffff"); break; } } } public void onRowClick(Element event){ } public void onRowRollover(Element event){ } public void onCellClicked(SourcesTableEvents sender, int row, int cell) { this.getRowFormatter() .removeStyleName(selectedRow, selectedStyle); if ((source.getHeaderRow() == null) || (row > 0)) { this.getRowFormatter() .addStyleName(row, selectedStyle); selectedRow = row; } } public void setSource( TableDataSource source ){ for( int i = this.getRowCount(); i > 0; i-- ){ this.removeRow( 0 ); } if( source == null ){ return; } int row = 0; String[] headers = source.getHeaderRow(); if( headers != null ){ for( int i=0; i < headers.length; i++ ){ this.setText( row, i , headers[i] ); } this.getRowFormatter().addStyleName( row, headerStyle ); row++; } int rows = source.getRowCount(); for( int i=0 ; i <rows; i++ ){ String[] values = source.getRow(i); for( int col=0; col < values.length; col++ ){ this.setText( row, col, values[col] ); } row++; } this.selectedRow = 0; this.source = source; }
}
class SimpleDataSource implements TableDataSource { private String[] headers; private String[][] data; public SimpleDataSource(Person[] people) { super(); String[] headers = { "First Name", "Last Name", "Company", "Counts" }; this.headers = headers; this.data = new String[people.length][4]; for( int i=0; i < people.length ; i++ ){ Person p = people[i]; this.data[i][0] = p.firstName; this.data[i][1] = p.lastName; this.data[i][2] = p.rupany; this.data[i][3] = p.counts; } } public int getRowCount() { return data.length; } public String[] getRow(int i) { return data[i]; } public String[] getHeaderRow() { return headers; }
}
interface TableDataSource {
public String[] getHeaderRow(); public int getRowCount(); public String[] getRow(int row);
}
</source>
Table Single Row Click Event
<source lang="java">
package com.jexp.gwt.client; import java.util.*; import java.util.Set; import com.google.gwt.user.client.ui.ClickListener; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.SourcesTableEvents; import com.google.gwt.user.client.ui.TableListener; import com.google.gwt.user.client.Element; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.History; import com.google.gwt.user.client.HistoryListener; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.rpc.ServiceDefTarget; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.SourcesTableEvents; import com.google.gwt.user.client.ui.TableListener;
public class GWTClient implements EntryPoint, HistoryListener {
private Table table; private void getData(){ ArrayList values = new ArrayList(); values.add( new Person ("A", "H", "E", "6" )); values.add( new Person("B", "G", "E", "19" )); values.add( new Person("C", "F", "A", "17" )); values.add( new Person( "D", "E", "A" , "17")); table.setSource( new SimpleDataSource( (Person[]) values.toArray( new Person[values.size()]) ) ); } public void onModuleLoad() { table = new Table( null, "myTable" ); table.setStyleName("myTable"); RootPanel.get().add(table); getData(); table.addTableListener( new TableListener(){ public void onCellClicked(SourcesTableEvents sender, int row, int cell) { History.newItem( ""+row ); } }); History.addHistoryListener( this ); } public void onHistoryChanged(String historyToken){ table.onCellClicked( table, Integer.parseInt( historyToken ), 0); }
}
class Person { public String firstName; public String lastName; public String company; public String counts; /** Creates a new instance of Person */ public Person() { } public Person( String firstName, String lastName, String company, String counts ){ this.firstName = firstName; this.lastName = lastName; this.rupany = company; this.counts = counts; }
} class Table extends FlexTable implements TableListener {
private String headerStyle; private String selectedStyle; private TableDataSource source; private int selectedRow; public Table(TableDataSource source, String stylePrefix) { super(); this.setCellPadding(1); this.setCellSpacing(0); this.setWidth("100%"); this.selectedStyle = stylePrefix + "-selected"; this.headerStyle = stylePrefix + "-header"; this.addTableListener(this); this.setSource( source ); sinkEvents(Event.ONMOUSEDOWN | Event.ONMOUSEUP | Event.ONMOUSEOVER |Event.ONMOUSEOUT); } public void onBrowserEvent(Event event) { Element td = getEventTargetCell(event); if (td == null) return; Element tr = DOM.getParent(td); switch (DOM.eventGetType(event)) { case Event.ONMOUSEDOWN: { DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00"); onRowClick(tr); break; } case Event.ONMOUSEUP: { DOM.setStyleAttribute(tr, "backgroundColor", "#ffffff"); break; } case Event.ONMOUSEOVER: { DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00"); onRowRollover(tr); break; } case Event.ONMOUSEOUT: { DOM.setStyleAttribute(tr, "backgroundColor","#ffffff"); break; } } } public void onRowClick(Element event){ } public void onRowRollover(Element event){ }
public void onCellClicked(SourcesTableEvents sender, int row, int cell) { this.getRowFormatter() .removeStyleName(selectedRow, selectedStyle); if ((source.getHeaderRow() == null) || (row > 0)) { this.getRowFormatter() .addStyleName(row, selectedStyle); selectedRow = row; } } public void setSource( TableDataSource source ){ for( int i = this.getRowCount(); i > 0; i-- ){ this.removeRow( 0 ); } if( source == null ){ return; } int row = 0; String[] headers = source.getHeaderRow(); if( headers != null ){ for( int i=0; i < headers.length; i++ ){ this.setText( row, i , headers[i] ); } this.getRowFormatter().addStyleName( row, headerStyle ); row++; } int rows = source.getRowCount(); for( int i=0 ; i <rows; i++ ){ String[] values = source.getRow(i); for( int col=0; col < values.length; col++ ){ this.setText( row, col, values[col] ); } row++; } this.selectedRow = 0; this.source = source; }
}
class SimpleDataSource implements TableDataSource { private String[] headers; private String[][] data; public SimpleDataSource(Person[] people) { super(); String[] headers = { "First Name", "Last Name", "Company", "Counts" }; this.headers = headers; this.data = new String[people.length][4]; for( int i=0; i < people.length ; i++ ){ Person p = people[i]; this.data[i][0] = p.firstName; this.data[i][1] = p.lastName; this.data[i][2] = p.rupany; this.data[i][3] = p.counts; } } public int getRowCount() { return data.length; } public String[] getRow(int i) { return data[i]; } public String[] getHeaderRow() { return headers; }
}
interface TableDataSource {
public String[] getHeaderRow(); public int getRowCount(); public String[] getRow(int row);
}
</source>
Use FlexTable
<source lang="java">
package com.jexp.gwt.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.CheckBox; import com.google.gwt.user.client.ui.ruposite; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.ScrollListener; import com.google.gwt.user.client.ui.ScrollPanel; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.Widget; import com.google.gwt.user.client.ui.RootPanel; public class GWTClient implements EntryPoint{
public void onModuleLoad() { FlexTable flexTable = new FlexTable(); flexTable.setWidget(0, 0, new Label("0,0")); flexTable.setWidget(0, 1, new Label("FlexTable")); flexTable.setWidget(0, 2, new Label("0,2")); flexTable.setWidget(1, 0, new Label("1,0")); flexTable.setWidget(1, 1, new Label("1,1")); flexTable.setWidget(1, 2, new Label("1,2")); flexTable.setWidget(2, 0, new Label("2,0")); flexTable.setWidget(2, 1, new Label("2,1")); flexTable.setWidget(2, 2, new Label("2,2")); flexTable.setWidget(3, 0, new Label("3,0 - span columns")); flexTable.setStyleName("panel flexTable"); flexTable.getFlexCellFormatter().setColSpan(3, 0, 3); for (int i = 0; i < flexTable.getRowCount(); i++) { for (int j = 0; j < flexTable.getCellCount(i); j++) { if ((j % 2) == 0) { flexTable.getFlexCellFormatter() .setStyleName(i, j, "tableCell-even"); } else { flexTable.getFlexCellFormatter() .setStyleName(i, j, "tableCell-odd"); } } } RootPanel.get().add(flexTable); }
} ////////////////////////// .flexTable {
width: 150px; height: 150px; position: absolute; left: 15px; top: 350px;
} .panel {
background-color: #C3D9FF; border: 1px solid #000000; padding: 3px; margin: 3px; font-weight: normal;
}
</source>