Browse Source

Provide a way to set styles for Header/Footer Cells and Rows in a Grid (#8499)

Fixes #8422
tags/8.0.0.rc1
Denis 7 years ago
parent
commit
40ab6dc039

+ 1
- 1
client/src/main/java/com/vaadin/client/connectors/grid/GridConnector.java View File

@@ -30,7 +30,6 @@ import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.EventTarget;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.event.shared.HandlerRegistration;

import com.vaadin.client.ComponentConnector;
import com.vaadin.client.ConnectorHierarchyChangeEvent;
import com.vaadin.client.ConnectorHierarchyChangeEvent.ConnectorHierarchyChangeHandler;
@@ -341,6 +340,7 @@ public class GridConnector extends AbstractListingConnector
updateStaticCellFromState(row.join(columns),
cellGroupEntry.getKey());
}
row.setStyleName(rowState.styleName);
}

private void updateStaticCellFromState(Grid.StaticSection.StaticCell cell,

+ 15
- 0
server/src/main/java/com/vaadin/ui/components/grid/FooterCell.java View File

@@ -87,4 +87,19 @@ public interface FooterCell extends Serializable {
* @return column id for this cell
*/
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);
}

+ 15
- 0
server/src/main/java/com/vaadin/ui/components/grid/FooterRow.java View File

@@ -115,4 +115,19 @@ public interface FooterRow extends Serializable {
* @see Column#setId(String)
*/
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);
}

+ 15
- 0
server/src/main/java/com/vaadin/ui/components/grid/HeaderCell.java View File

@@ -87,4 +87,19 @@ public interface HeaderCell extends Serializable {
* @return column id for this cell
*/
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);
}

+ 15
- 0
server/src/main/java/com/vaadin/ui/components/grid/HeaderRow.java View File

@@ -115,4 +115,19 @@ public interface HeaderRow extends Serializable {
* @see Column#setId(String)
*/
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);
}

+ 40
- 0
server/src/main/java/com/vaadin/ui/components/grid/StaticSection.java View File

@@ -204,6 +204,25 @@ public abstract class StaticSection<ROW extends StaticSection.StaticRow<?>>
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
* internal column id.
@@ -515,6 +534,27 @@ public abstract class StaticSection<ROW extends StaticSection.StaticRow<?>>
public GridStaticCellType getCellType() {
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.

+ 5
- 0
shared/src/main/java/com/vaadin/shared/ui/grid/SectionState.java View File

@@ -46,6 +46,11 @@ public class SectionState implements Serializable {
* rows.
*/
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. */

+ 10
- 7
uitest/src/main/java/com/vaadin/tests/components/grid/GridEditorUI.java View File

@@ -66,20 +66,23 @@ public class GridEditorUI extends AbstractTestUI {
protected Grid<Person> createGrid() {
Grid<Person> grid = new Grid<>();

grid.addColumn(Person::getEmail).setCaption("Email");
grid.addColumn(Person::getEmail).setCaption("Email").setId("email");
Column<Person, String> fistNameColumn = grid
.addColumn(Person::getFirstName).setCaption("First Name");
.addColumn(Person::getFirstName).setCaption("First Name")
.setId("firstName");
Column<Person, String> lastNameColumn = grid
.addColumn(Person::getLastName).setCaption("Last Name");
.addColumn(Person::getLastName).setCaption("Last Name")
.setId("lastName");

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())
.setCaption("Street Address");
.setCaption("Street Address").setId("street");
grid.addColumn(person -> person.getAddress().getPostalCode(),
new NumberRenderer()).setCaption("Postal Code");
new NumberRenderer()).setCaption("Postal Code").setId("zip");
grid.addColumn(person -> person.getAddress().getCity())
.setCaption("City");
.setCaption("City").setId("city");

grid.getEditor().setEnabled(true);


uitest/src/main/java/com/vaadin/v7/tests/components/grid/GridHeaderStyleNames.java → uitest/src/main/java/com/vaadin/tests/components/grid/GridHeaderStyleNames.java View File

@@ -13,80 +13,76 @@
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.vaadin.v7.tests.components.grid;
package com.vaadin.tests.components.grid;

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.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 FooterCell ageFooterCell;
private FooterCell nameFooterCell;
private HeaderRow headerRow;
private FooterRow footerRow;

private boolean stylesOn = true;

@Override
protected void setup(VaadinRequest request) {
Grid grid = new Grid();
Grid<Person> grid = createGrid();
grid.setItems(createTestData());
grid.setSelectionMode(SelectionMode.MULTI);
grid.setContainerDataSource(
BeanItemContainerGenerator.createContainer(100));

ageHeaderCell = grid.getDefaultHeaderRow().getCell("age");
nameHeaderCell = grid.getDefaultHeaderRow().getCell("firstName");
grid.getDefaultHeaderRow().setStyleName("foo");
headerRow = grid.prependHeaderRow();
mergedCityCountryCell = headerRow.join("city", "country");
mergedCityCountryCell = headerRow.join("city", "street");
mergedCityCountryCell.setText("Merged cell");

grid.setColumns("email", "firstName", "city", "street", "lastName",
"zip");
addComponent(grid);

footerRow = grid.appendFooterRow();
ageFooterCell = footerRow.getCell("age");
nameFooterCell = footerRow.getCell("firstName");

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(
".valo .v-grid-header .v-grid-cell.city-country {background-image: linear-gradient(to bottom,yellow 2%, #efefef 98%) !important;}");
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(
".valo .v-grid .v-grid-row.custom-row > * {background-image: linear-gradient(to bottom,purple 2%, #efefef 98%);}");

setCellStyles(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) {
if (set) {
ageHeaderCell.setStyleName("age");
ageFooterCell.setStyleName("age-footer");
nameHeaderCell.setStyleName("name");
nameFooterCell.setStyleName("name-footer");
mergedCityCountryCell.setStyleName("city-country");
} else {
ageHeaderCell.setStyleName(null);
ageFooterCell.setStyleName(null);
nameHeaderCell.setStyleName(null);
nameFooterCell.setStyleName(null);
mergedCityCountryCell.setStyleName(null);
}


uitest/src/test/java/com/vaadin/v7/tests/components/grid/GridHeaderStyleNamesTest.java → uitest/src/test/java/com/vaadin/tests/components/grid/GridHeaderStyleNamesTest.java View File

@@ -13,16 +13,15 @@
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.vaadin.v7.tests.components.grid;
package com.vaadin.tests.components.grid;

import org.junit.Assert;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;

import com.vaadin.testbench.elements.GridElement;
import com.vaadin.testbench.elements.ButtonElement;
import com.vaadin.testbench.elements.GridElement;
import com.vaadin.testbench.elements.GridElement.GridCellElement;
import com.vaadin.testbench.parallel.TestCategory;
import com.vaadin.tests.tb3.SingleBrowserTest;
@@ -42,20 +41,10 @@ public class GridHeaderStyleNamesTest extends SingleBrowserTest {
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);
}

private WebElement getAgeFooterCellContent() {
return getAgeFooterCell().findElement(
By.cssSelector("div.v-grid-column-footer-content"));
}

@Test
public void cellStyleNamesCanBeAddedAndRemoved() {
ButtonElement toggleStyles = $(ButtonElement.class)
@@ -84,21 +73,21 @@ public class GridHeaderStyleNamesTest extends SingleBrowserTest {
private void assertStylesSet(boolean set) {
if (set) {
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(
"Header cell should have the assigned 'age' class name",
getAgeHeaderCell(), "age");
"Header cell should have the assigned 'name' class name",
getAgeHeaderCell(), "name");
assertHasStyleName(
"The merged header cell should have the assigned 'city-country' class name",
getMergedHeaderCell(), "city-country");
} else {
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(
"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(
"Ther merged header cell should not have the removed 'city-country' class name",
getMergedHeaderCell(), "city-country");
@@ -108,7 +97,7 @@ public class GridHeaderStyleNamesTest extends SingleBrowserTest {
getAgeHeaderCell(), "v-grid-cell");
assertHasStyleName(
"The default v-grid-cell style name should not be removed from the footer cell",
getAgeFooterCell(), "v-grid-cell");
getNameFooterCell(), "v-grid-cell");
assertHasStyleName(
"The default v-grid-cell style name should not be removed from the merged header cell",
getMergedHeaderCell(), "v-grid-cell");
@@ -144,11 +133,6 @@ public class GridHeaderStyleNamesTest extends SingleBrowserTest {
return grid.getHeaderCell(1, 2);
}

private WebElement getAgeHeaderCellContent() {
return getAgeHeaderCell().findElement(
By.cssSelector("div.v-grid-column-header-content"));
}

private WebElement getFooterRow() {
return grid.getFooterRow(0);
}

Loading…
Cancel
Save