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

Example 6 with WColumn

use of com.github.bordertech.wcomponents.WColumn 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);
}

Example 7 with WColumn

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

the class WRowRenderer_Test method testRenderedWithMargins.

@Test
public void testRenderedWithMargins() throws IOException, SAXException, XpathException {
    WRow row = new WRow();
    row.add(new WColumn(100));
    assertXpathNotExists("//ui:row/ui:margin", row);
    Margin margin = new Margin(0);
    row.setMargin(margin);
    assertXpathNotExists("//ui:row/ui:margin", row);
    margin = new Margin(GAP);
    row.setMargin(margin);
    assertSchemaMatch(row);
    assertXpathEvaluatesTo(GAP.toString(), "//ui:row/ui:margin/@all", row);
    assertXpathEvaluatesTo("", "//ui:row/ui:margin/@north", row);
    assertXpathEvaluatesTo("", "//ui:row/ui:margin/@east", row);
    assertXpathEvaluatesTo("", "//ui:row/ui:margin/@south", row);
    assertXpathEvaluatesTo("", "//ui:row/ui:margin/@west", row);
    margin = new Margin(Size.SMALL, Size.MEDIUM, Size.LARGE, Size.XL);
    row.setMargin(margin);
    assertSchemaMatch(row);
    assertXpathEvaluatesTo("", "//ui:row/ui:margin/@all", row);
    assertXpathEvaluatesTo(Size.SMALL.toString(), "//ui:row/ui:margin/@north", row);
    assertXpathEvaluatesTo(Size.MEDIUM.toString(), "//ui:row/ui:margin/@east", row);
    assertXpathEvaluatesTo(Size.LARGE.toString(), "//ui:row/ui:margin/@south", row);
    assertXpathEvaluatesTo(Size.XL.toString(), "//ui:row/ui:margin/@west", row);
}

Example 8 with WColumn

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

the class WRowRenderer_Test method testRenderedFormatWithColumn.

@Test
public void testRenderedFormatWithColumn() throws IOException, SAXException, XpathException {
    WRow row = new WRow();
    row.add(new WColumn(100));
    assertSchemaMatch(row);
    assertXpathExists("//ui:row/ui:column", row);
    assertXpathEvaluatesTo(row.getId(), "//ui:row/@id", row);
    assertXpathEvaluatesTo("", "//ui:row/@gap", row);
}

Example 9 with WColumn

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

the class WRowRenderer_Test method testRenderedWithSmallGap.

@Test
public void testRenderedWithSmallGap() throws IOException, SAXException, XpathException {
    WRow row = new WRow(GAP);
    row.add(new WColumn(100));
    assertSchemaMatch(row);
    assertXpathEvaluatesTo(GAP.toString(), "//ui:row/@gap", row);
}

Example 10 with WColumn

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

the class WColumnRenderer_Test method testRendererCorrectlyConfigured.

@Test
public void testRendererCorrectlyConfigured() {
    WColumn component = new WColumn();
    Assert.assertTrue("Incorrect renderer supplied", getWebXmlRenderer(component) instanceof WColumnRenderer);
}