Examples with WRow com.github.bordertech.wcomponents.WRow used on opensource projects

Example 1 with WRow

use of com.github.bordertech.wcomponents.WRow in project wcomponents by BorderTech.

the class WRowExample method createRow.

/**
 * Creates a row containing columns with the given widths.
 *
 * @param hgap the horizontal gap between columns, in pixels.
 * @param colWidths the percentage widths for each column.
 * @return a WRow containing columns with the given widths.
 */
private WRow createRow(final int hgap, final int[] colWidths) {
    WRow row = new WRow(hgap);
    for (int i = 0; i < colWidths.length; i++) {
        WColumn col = new WColumn(colWidths[i]);
        WPanel box = new WPanel(WPanel.Type.BOX);
        box.add(new WText(colWidths[i] + "%"));
        col.add(box);
        row.add(col);
    }
    return row;
}

Example 2 with WRow

use of com.github.bordertech.wcomponents.WRow in project wcomponents by BorderTech.

the class WColumnRenderer_Test method testPaintWhenEmpty.

@Test
public void testPaintWhenEmpty() throws IOException, SAXException {
    WColumn column = new WColumn(100);
    // A Column is not valid by itself, so we must add it to a row.
    WRow row = new WRow();
    row.add(column);
    assertSchemaMatch(row);
}

Example 3 with WRow

use of com.github.bordertech.wcomponents.WRow in project wcomponents by BorderTech.

the class WColumnRenderer_Test method testPaint.

@Test
public void testPaint() throws IOException, SAXException, XpathException {
    WRow row = new WRow();
    WColumn column = new WColumn(100);
    row.add(column);
    column.add(new WLabel("dummy"));
    assertSchemaMatch(row);
    assertXpathEvaluatesTo(column.getId(), "//ui:column/@id", row);
    assertXpathEvaluatesTo("100", "//ui:column/@width", row);
    assertXpathNotExists("//ui:column/@align", row);
    column.setAlignment(WColumn.Alignment.LEFT);
    assertSchemaMatch(row);
    assertXpathNotExists("//ui:column/@align", row);
    column.setAlignment(WColumn.Alignment.CENTER);
    assertSchemaMatch(row);
    assertXpathEvaluatesTo("center", "//ui:column/@align", row);
    column.setAlignment(WColumn.Alignment.RIGHT);
    assertSchemaMatch(row);
    assertXpathEvaluatesTo("right", "//ui:column/@align", row);
}

Example 4 with WRow

use of com.github.bordertech.wcomponents.WRow in project wcomponents by BorderTech.

the class WRowExample method createRow.

/**
 * Creates a row containing columns with the given widths.
 *
 * @param gap the horizontal gap between columns
 * @param colWidths the percentage widths for each column
 * @return a WRow containing columns with the given widths
 */
private WRow createRow(final Size gap, final int[] colWidths) {
    WRow row = new WRow(gap);
    for (int i = 0; i < colWidths.length; i++) {
        WColumn col = new WColumn(colWidths[i]);
        WPanel box = new WPanel(WPanel.Type.BOX);
        box.add(new WText(colWidths[i] + "%"));
        col.add(box);
        row.add(col);
    }
    return row;
}

Example 5 with WRow

use of com.github.bordertech.wcomponents.WRow in project wcomponents by BorderTech.

the class WRowExample method addAppLevelCSSExample.

/**
 * Build an example with undefined column widths then use application-level CSS and a htmlClass property to define the widths.
 */
private void addAppLevelCSSExample() {
    String htmlClass = "my_local_class";
    add(new WHeading(HeadingLevel.H2, "App defined widths"));
    add(new ExplanatoryText("This example shows the use of a htmlClass and app-specific CSS (in this case inline)" + " to style the columns including responsive widths" + " which kick in at 1000px and 900px"));
    WRow row = new WRow();
    row.setHtmlClass(htmlClass);
    add(row);
    WColumn col1 = new WColumn();
    String col1HtmlClass = "my_col1";
    col1.setHtmlClass(col1HtmlClass);
    col1.add(new ExplanatoryText("This is some text content in the first column."));
    row.add(col1);
    WColumn col2 = new WColumn();
    String col2HtmlClass = "my_col2";
    col2.setHtmlClass(col2HtmlClass);
    col2.add(new ExplanatoryText("Some content in column 2."));
    row.add(col2);
    WColumn col3 = new WColumn();
    col3.add(new ExplanatoryText("Some content in column 3."));
    row.add(col3);
    String columnClass = ".wc-column";
    String rowSelector = "." + htmlClass;
    // .column is the local name of WColumn's XML element and is part of the client side API.
    String columnSelector = rowSelector + " > " + columnClass;
    String css = columnSelector + " {width: 20%; background-color: #f0f0f0; padding: 0.5em;}" + columnSelector + " + " + columnClass + " {margin-left: 0.5em}" + columnSelector + "." + col2.getHtmlClass() + " {width: 60%;}" + // when the screen goes below 1000px wide
    "@media only screen and (max-width: 1000px) {" + rowSelector + " {display: block;}" + columnSelector + " {display: inline-block; box-sizing: border-box;}" + columnSelector + " + " + columnClass + " {margin-left: 0}" + columnSelector + "." + col1.getHtmlClass() + " {display: block; width: 100%; margin-bottom: 0.5em;} " + columnSelector + " ~ " + columnClass + " {width: calc(50% - 0.25em); background-color: #f0f000}" + "." + col2.getHtmlClass() + " {margin-right: 0.25em}" + "." + col2.getHtmlClass() + " + " + columnClass + " {margin-left: 0.25em;}" + // when the screen goes below 900px wide;
    "}\n@media only screen and (max-width: 900px) {" + columnSelector + // the importants are becauseI am lazy
    " {width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; background-color: #ff0 !important;}" + "." + col2.getHtmlClass() + " {margin-bottom: 0.5em;}\n}";
    WText cssText = new WText("<style type='text/css'>" + css + "</style>");
    cssText.setEncodeText(false);
    add(cssText);
}