Fixes #8422tags/8.0.0.rc1
import com.google.gwt.dom.client.EventTarget; | import com.google.gwt.dom.client.EventTarget; | ||||
import com.google.gwt.dom.client.NativeEvent; | import com.google.gwt.dom.client.NativeEvent; | ||||
import com.google.gwt.event.shared.HandlerRegistration; | import com.google.gwt.event.shared.HandlerRegistration; | ||||
import com.vaadin.client.ComponentConnector; | import com.vaadin.client.ComponentConnector; | ||||
import com.vaadin.client.ConnectorHierarchyChangeEvent; | import com.vaadin.client.ConnectorHierarchyChangeEvent; | ||||
import com.vaadin.client.ConnectorHierarchyChangeEvent.ConnectorHierarchyChangeHandler; | import com.vaadin.client.ConnectorHierarchyChangeEvent.ConnectorHierarchyChangeHandler; | ||||
updateStaticCellFromState(row.join(columns), | updateStaticCellFromState(row.join(columns), | ||||
cellGroupEntry.getKey()); | cellGroupEntry.getKey()); | ||||
} | } | ||||
row.setStyleName(rowState.styleName); | |||||
} | } | ||||
private void updateStaticCellFromState(Grid.StaticSection.StaticCell cell, | private void updateStaticCellFromState(Grid.StaticSection.StaticCell cell, |
* @return column id for this cell | * @return column id for this cell | ||||
*/ | */ | ||||
public String getColumnId(); | public String getColumnId(); | ||||
/** | |||||
* Returns the custom style name for this cell. | |||||
* | |||||
* @return the style name or null if no style name has been set | |||||
*/ | |||||
public String getStyleName(); | |||||
/** | |||||
* Sets a custom style name for this cell. | |||||
* | |||||
* @param styleName | |||||
* the style name to set or null to not use any style name | |||||
*/ | |||||
public void setStyleName(String styleName); | |||||
} | } |
* @see Column#setId(String) | * @see Column#setId(String) | ||||
*/ | */ | ||||
FooterCell join(String... columnIdsToMerge); | FooterCell join(String... columnIdsToMerge); | ||||
/** | |||||
* Returns the custom style name for this row. | |||||
* | |||||
* @return the style name or null if no style name has been set | |||||
*/ | |||||
public String getStyleName(); | |||||
/** | |||||
* Sets a custom style name for this row. | |||||
* | |||||
* @param styleName | |||||
* the style name to set or null to not use any style name | |||||
*/ | |||||
public void setStyleName(String styleName); | |||||
} | } |
* @return column id for this cell | * @return column id for this cell | ||||
*/ | */ | ||||
public String getColumnId(); | public String getColumnId(); | ||||
/** | |||||
* Returns the custom style name for this cell. | |||||
* | |||||
* @return the style name or null if no style name has been set | |||||
*/ | |||||
public String getStyleName(); | |||||
/** | |||||
* Sets a custom style name for this cell. | |||||
* | |||||
* @param styleName | |||||
* the style name to set or null to not use any style name | |||||
*/ | |||||
public void setStyleName(String styleName); | |||||
} | } |
* @see Column#setId(String) | * @see Column#setId(String) | ||||
*/ | */ | ||||
HeaderCell join(String... columnIdsToMerge); | HeaderCell join(String... columnIdsToMerge); | ||||
/** | |||||
* Returns the custom style name for this row. | |||||
* | |||||
* @return the style name or null if no style name has been set | |||||
*/ | |||||
public String getStyleName(); | |||||
/** | |||||
* Sets a custom style name for this row. | |||||
* | |||||
* @param styleName | |||||
* the style name to set or null to not use any style name | |||||
*/ | |||||
public void setStyleName(String styleName); | |||||
} | } |
return internalGetCell(section.getInternalIdForColumn(column)); | return internalGetCell(section.getInternalIdForColumn(column)); | ||||
} | } | ||||
/** | |||||
* Returns the custom style name for this row. | |||||
* | |||||
* @return the style name or null if no style name has been set | |||||
*/ | |||||
public String getStyleName() { | |||||
return getRowState().styleName; | |||||
} | |||||
/** | |||||
* Sets a custom style name for this row. | |||||
* | |||||
* @param styleName | |||||
* the style name to set or null to not use any style name | |||||
*/ | |||||
public void setStyleName(String styleName) { | |||||
getRowState().styleName = styleName; | |||||
} | |||||
/** | /** | ||||
* Returns the cell in this section that corresponds to the given | * Returns the cell in this section that corresponds to the given | ||||
* internal column id. | * internal column id. | ||||
public GridStaticCellType getCellType() { | public GridStaticCellType getCellType() { | ||||
return cellState.type; | return cellState.type; | ||||
} | } | ||||
/** | |||||
* Returns the custom style name for this cell. | |||||
* | |||||
* @return the style name or null if no style name has been set | |||||
*/ | |||||
public String getStyleName() { | |||||
return cellState.styleName; | |||||
} | |||||
/** | |||||
* Sets a custom style name for this cell. | |||||
* | |||||
* @param styleName | |||||
* the style name to set or null to not use any style | |||||
* name | |||||
*/ | |||||
public void setStyleName(String styleName) { | |||||
cellState.styleName = styleName; | |||||
row.section.markAsDirty(); | |||||
} | |||||
/** | /** | ||||
* Reads the declarative design from the given table cell element. | * Reads the declarative design from the given table cell element. |
* rows. | * rows. | ||||
*/ | */ | ||||
public boolean defaultHeader = false; | public boolean defaultHeader = false; | ||||
/** | |||||
* The style name for the row. Null if none. | |||||
*/ | |||||
public String styleName = null; | |||||
} | } | ||||
/** The state of a header or footer cell. */ | /** The state of a header or footer cell. */ |
protected Grid<Person> createGrid() { | protected Grid<Person> createGrid() { | ||||
Grid<Person> grid = new Grid<>(); | Grid<Person> grid = new Grid<>(); | ||||
grid.addColumn(Person::getEmail).setCaption("Email"); | |||||
grid.addColumn(Person::getEmail).setCaption("Email").setId("email"); | |||||
Column<Person, String> fistNameColumn = grid | Column<Person, String> fistNameColumn = grid | ||||
.addColumn(Person::getFirstName).setCaption("First Name"); | |||||
.addColumn(Person::getFirstName).setCaption("First Name") | |||||
.setId("firstName"); | |||||
Column<Person, String> lastNameColumn = grid | Column<Person, String> lastNameColumn = grid | ||||
.addColumn(Person::getLastName).setCaption("Last Name"); | |||||
.addColumn(Person::getLastName).setCaption("Last Name") | |||||
.setId("lastName"); | |||||
Column<Person, String> phoneColumn = grid | Column<Person, String> phoneColumn = grid | ||||
.addColumn(Person::getPhoneNumber).setCaption("Phone Number"); | |||||
.addColumn(Person::getPhoneNumber).setCaption("Phone Number") | |||||
.setId("phone"); | |||||
grid.addColumn(person -> person.getAddress().getStreetAddress()) | grid.addColumn(person -> person.getAddress().getStreetAddress()) | ||||
.setCaption("Street Address"); | |||||
.setCaption("Street Address").setId("street"); | |||||
grid.addColumn(person -> person.getAddress().getPostalCode(), | grid.addColumn(person -> person.getAddress().getPostalCode(), | ||||
new NumberRenderer()).setCaption("Postal Code"); | |||||
new NumberRenderer()).setCaption("Postal Code").setId("zip"); | |||||
grid.addColumn(person -> person.getAddress().getCity()) | grid.addColumn(person -> person.getAddress().getCity()) | ||||
.setCaption("City"); | |||||
.setCaption("City").setId("city"); | |||||
grid.getEditor().setEnabled(true); | grid.getEditor().setEnabled(true); | ||||
* License for the specific language governing permissions and limitations under | * License for the specific language governing permissions and limitations under | ||||
* the License. | * the License. | ||||
*/ | */ | ||||
package com.vaadin.v7.tests.components.grid; | |||||
package com.vaadin.tests.components.grid; | |||||
import com.vaadin.server.VaadinRequest; | import com.vaadin.server.VaadinRequest; | ||||
import com.vaadin.tests.components.AbstractTestUIWithLog; | |||||
import com.vaadin.tests.components.beanitemcontainer.BeanItemContainerGenerator; | |||||
import com.vaadin.tests.util.Person; | |||||
import com.vaadin.ui.Button; | import com.vaadin.ui.Button; | ||||
import com.vaadin.ui.Button.ClickEvent; | |||||
import com.vaadin.ui.Button.ClickListener; | |||||
import com.vaadin.v7.ui.Grid; | |||||
import com.vaadin.v7.ui.Grid.FooterCell; | |||||
import com.vaadin.v7.ui.Grid.FooterRow; | |||||
import com.vaadin.v7.ui.Grid.HeaderCell; | |||||
import com.vaadin.v7.ui.Grid.HeaderRow; | |||||
import com.vaadin.v7.ui.Grid.SelectionMode; | |||||
import com.vaadin.ui.Grid; | |||||
import com.vaadin.ui.Grid.SelectionMode; | |||||
import com.vaadin.ui.components.grid.FooterCell; | |||||
import com.vaadin.ui.components.grid.FooterRow; | |||||
import com.vaadin.ui.components.grid.HeaderCell; | |||||
import com.vaadin.ui.components.grid.HeaderRow; | |||||
public class GridHeaderStyleNames extends AbstractTestUIWithLog { | |||||
public class GridHeaderStyleNames extends GridEditorUI { | |||||
private HeaderCell ageHeaderCell; | |||||
private HeaderCell nameHeaderCell; | |||||
private HeaderCell mergedCityCountryCell; | private HeaderCell mergedCityCountryCell; | ||||
private FooterCell ageFooterCell; | |||||
private FooterCell nameFooterCell; | |||||
private HeaderRow headerRow; | private HeaderRow headerRow; | ||||
private FooterRow footerRow; | private FooterRow footerRow; | ||||
private boolean stylesOn = true; | |||||
@Override | @Override | ||||
protected void setup(VaadinRequest request) { | protected void setup(VaadinRequest request) { | ||||
Grid grid = new Grid(); | |||||
Grid<Person> grid = createGrid(); | |||||
grid.setItems(createTestData()); | |||||
grid.setSelectionMode(SelectionMode.MULTI); | grid.setSelectionMode(SelectionMode.MULTI); | ||||
grid.setContainerDataSource( | |||||
BeanItemContainerGenerator.createContainer(100)); | |||||
ageHeaderCell = grid.getDefaultHeaderRow().getCell("age"); | |||||
nameHeaderCell = grid.getDefaultHeaderRow().getCell("firstName"); | |||||
grid.getDefaultHeaderRow().setStyleName("foo"); | grid.getDefaultHeaderRow().setStyleName("foo"); | ||||
headerRow = grid.prependHeaderRow(); | headerRow = grid.prependHeaderRow(); | ||||
mergedCityCountryCell = headerRow.join("city", "country"); | |||||
mergedCityCountryCell = headerRow.join("city", "street"); | |||||
mergedCityCountryCell.setText("Merged cell"); | mergedCityCountryCell.setText("Merged cell"); | ||||
grid.setColumns("email", "firstName", "city", "street", "lastName", | |||||
"zip"); | |||||
addComponent(grid); | addComponent(grid); | ||||
footerRow = grid.appendFooterRow(); | footerRow = grid.appendFooterRow(); | ||||
ageFooterCell = footerRow.getCell("age"); | |||||
nameFooterCell = footerRow.getCell("firstName"); | |||||
getPage().getStyles().add( | getPage().getStyles().add( | ||||
".age {background-image: linear-gradient(to bottom,green 2%, #efefef 98%) !important;}"); | |||||
".name {background-image: linear-gradient(to bottom,green 2%, #efefef 98%) !important;}"); | |||||
getPage().getStyles().add( | getPage().getStyles().add( | ||||
".valo .v-grid-header .v-grid-cell.city-country {background-image: linear-gradient(to bottom,yellow 2%, #efefef 98%) !important;}"); | ".valo .v-grid-header .v-grid-cell.city-country {background-image: linear-gradient(to bottom,yellow 2%, #efefef 98%) !important;}"); | ||||
getPage().getStyles().add( | getPage().getStyles().add( | ||||
".valo .v-grid-footer .v-grid-cell.age-footer {background-image: linear-gradient(to bottom,blue 2%, #efefef 98%) !important;}"); | |||||
".valo .v-grid-footer .v-grid-cell.name-footer {background-image: linear-gradient(to bottom,blue 2%, #efefef 98%) !important;}"); | |||||
getPage().getStyles().add( | getPage().getStyles().add( | ||||
".valo .v-grid .v-grid-row.custom-row > * {background-image: linear-gradient(to bottom,purple 2%, #efefef 98%);}"); | ".valo .v-grid .v-grid-row.custom-row > * {background-image: linear-gradient(to bottom,purple 2%, #efefef 98%);}"); | ||||
setCellStyles(true); | setCellStyles(true); | ||||
setRowStyles(true); | setRowStyles(true); | ||||
Button b = new Button("Toggle styles"); | |||||
b.addClickListener(new ClickListener() { | |||||
private boolean stylesOn = true; | |||||
@Override | |||||
public void buttonClick(ClickEvent event) { | |||||
setCellStyles(!stylesOn); | |||||
setRowStyles(!stylesOn); | |||||
stylesOn = !stylesOn; | |||||
} | |||||
Button button = new Button("Toggle styles"); | |||||
button.addClickListener(event -> { | |||||
setCellStyles(!stylesOn); | |||||
setRowStyles(!stylesOn); | |||||
stylesOn = !stylesOn; | |||||
}); | }); | ||||
addComponent(b); | |||||
addComponent(button); | |||||
} | } | ||||
protected void setCellStyles(boolean set) { | protected void setCellStyles(boolean set) { | ||||
if (set) { | if (set) { | ||||
ageHeaderCell.setStyleName("age"); | |||||
ageFooterCell.setStyleName("age-footer"); | |||||
nameHeaderCell.setStyleName("name"); | |||||
nameFooterCell.setStyleName("name-footer"); | |||||
mergedCityCountryCell.setStyleName("city-country"); | mergedCityCountryCell.setStyleName("city-country"); | ||||
} else { | } else { | ||||
ageHeaderCell.setStyleName(null); | |||||
ageFooterCell.setStyleName(null); | |||||
nameHeaderCell.setStyleName(null); | |||||
nameFooterCell.setStyleName(null); | |||||
mergedCityCountryCell.setStyleName(null); | mergedCityCountryCell.setStyleName(null); | ||||
} | } | ||||
* License for the specific language governing permissions and limitations under | * License for the specific language governing permissions and limitations under | ||||
* the License. | * the License. | ||||
*/ | */ | ||||
package com.vaadin.v7.tests.components.grid; | |||||
package com.vaadin.tests.components.grid; | |||||
import org.junit.Assert; | import org.junit.Assert; | ||||
import org.junit.Before; | import org.junit.Before; | ||||
import org.junit.Test; | import org.junit.Test; | ||||
import org.openqa.selenium.By; | |||||
import org.openqa.selenium.WebElement; | import org.openqa.selenium.WebElement; | ||||
import com.vaadin.testbench.elements.GridElement; | |||||
import com.vaadin.testbench.elements.ButtonElement; | import com.vaadin.testbench.elements.ButtonElement; | ||||
import com.vaadin.testbench.elements.GridElement; | |||||
import com.vaadin.testbench.elements.GridElement.GridCellElement; | import com.vaadin.testbench.elements.GridElement.GridCellElement; | ||||
import com.vaadin.testbench.parallel.TestCategory; | import com.vaadin.testbench.parallel.TestCategory; | ||||
import com.vaadin.tests.tb3.SingleBrowserTest; | import com.vaadin.tests.tb3.SingleBrowserTest; | ||||
return grid.getHeaderCell(0, 3); | return grid.getHeaderCell(0, 3); | ||||
} | } | ||||
private WebElement getMergedHeaderCellContent() { | |||||
return getMergedHeaderCell().findElement( | |||||
By.cssSelector("div.v-grid-column-header-content")); | |||||
} | |||||
private GridCellElement getAgeFooterCell() { | |||||
private GridCellElement getNameFooterCell() { | |||||
return grid.getFooterCell(0, 2); | return grid.getFooterCell(0, 2); | ||||
} | } | ||||
private WebElement getAgeFooterCellContent() { | |||||
return getAgeFooterCell().findElement( | |||||
By.cssSelector("div.v-grid-column-footer-content")); | |||||
} | |||||
@Test | @Test | ||||
public void cellStyleNamesCanBeAddedAndRemoved() { | public void cellStyleNamesCanBeAddedAndRemoved() { | ||||
ButtonElement toggleStyles = $(ButtonElement.class) | ButtonElement toggleStyles = $(ButtonElement.class) | ||||
private void assertStylesSet(boolean set) { | private void assertStylesSet(boolean set) { | ||||
if (set) { | if (set) { | ||||
assertHasStyleName( | assertHasStyleName( | ||||
"Footer cell should have the assigned 'age-footer' class name", | |||||
getAgeFooterCell(), "age-footer"); | |||||
"Footer cell should have the assigned 'name-footer' class name", | |||||
getNameFooterCell(), "name-footer"); | |||||
assertHasStyleName( | assertHasStyleName( | ||||
"Header cell should have the assigned 'age' class name", | |||||
getAgeHeaderCell(), "age"); | |||||
"Header cell should have the assigned 'name' class name", | |||||
getAgeHeaderCell(), "name"); | |||||
assertHasStyleName( | assertHasStyleName( | ||||
"The merged header cell should have the assigned 'city-country' class name", | "The merged header cell should have the assigned 'city-country' class name", | ||||
getMergedHeaderCell(), "city-country"); | getMergedHeaderCell(), "city-country"); | ||||
} else { | } else { | ||||
assertHasNotStyleName( | assertHasNotStyleName( | ||||
"Footer cell should not have the removed 'age-footer' class name", | |||||
getAgeFooterCell(), "age-footer"); | |||||
"Footer cell should not have the removed 'name-footer' class name", | |||||
getNameFooterCell(), "name-footer"); | |||||
assertHasNotStyleName( | assertHasNotStyleName( | ||||
"Header cell should not have the removed 'age' class name", | |||||
getAgeHeaderCell(), "age"); | |||||
"Header cell should not have the removed 'name' class name", | |||||
getAgeHeaderCell(), "name"); | |||||
assertHasNotStyleName( | assertHasNotStyleName( | ||||
"Ther merged header cell should not have the removed 'city-country' class name", | "Ther merged header cell should not have the removed 'city-country' class name", | ||||
getMergedHeaderCell(), "city-country"); | getMergedHeaderCell(), "city-country"); | ||||
getAgeHeaderCell(), "v-grid-cell"); | getAgeHeaderCell(), "v-grid-cell"); | ||||
assertHasStyleName( | assertHasStyleName( | ||||
"The default v-grid-cell style name should not be removed from the footer cell", | "The default v-grid-cell style name should not be removed from the footer cell", | ||||
getAgeFooterCell(), "v-grid-cell"); | |||||
getNameFooterCell(), "v-grid-cell"); | |||||
assertHasStyleName( | assertHasStyleName( | ||||
"The default v-grid-cell style name should not be removed from the merged header cell", | "The default v-grid-cell style name should not be removed from the merged header cell", | ||||
getMergedHeaderCell(), "v-grid-cell"); | getMergedHeaderCell(), "v-grid-cell"); | ||||
return grid.getHeaderCell(1, 2); | return grid.getHeaderCell(1, 2); | ||||
} | } | ||||
private WebElement getAgeHeaderCellContent() { | |||||
return getAgeHeaderCell().findElement( | |||||
By.cssSelector("div.v-grid-column-header-content")); | |||||
} | |||||
private WebElement getFooterRow() { | private WebElement getFooterRow() { | ||||
return grid.getFooterRow(0); | return grid.getFooterRow(0); | ||||
} | } |