Examples with Alignment com.github.bordertech.wcomponents.layout.ColumnLayout.Alignment used on opensource projects

Example 1 with Alignment

use of com.github.bordertech.wcomponents.layout.ColumnLayout.Alignment in project wcomponents by BorderTech.

the class ColumnLayoutExample 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, "Automatic (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.\n" + "In this case the columns are: 20% and left, 50% and center, 30% and right; and the columns break to full width and are forced to " + "left aligned at 1000px."));
    WPanel panel = new WPanel();
    panel.setHtmlClass(htmlClass);
    panel.setLayout(new ColumnLayout(new int[] { 0, 0, 0 }, new Alignment[] { Alignment.LEFT, Alignment.CENTER, Alignment.RIGHT }));
    add(panel);
    panel.add(new BoxComponent("Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."));
    panel.add(new BoxComponent("Praesent eu turpis convallis, fringilla elit nec, ullamcorper purus. Proin dictum ac nunc rhoncus fringilla. " + "Pellentesque habitant morbi tristique senectus et netus et malesuada fames."));
    panel.add(new BoxComponent("Vestibulum vehicula a turpis et efficitur. Integer maximus enim a orci posuere, id fermentum magna dignissim. " + "Sed condimentum, dui et condimentum faucibus, quam erat pharetra."));
    panel.add(new BoxComponent("Left"));
    panel.add(new BoxComponent("Center"));
    panel.add(new BoxComponent("Right"));
    // .columnLayout is the local name of ColumnLayout and is guranteed, row is now part of the WComponents CSS API but _may_ change.
    String rowSelector = "." + htmlClass + " > .wc-columnlayout > .wc-row";
    String columnSelector = rowSelector + " > .wc-column";
    String css = columnSelector + " {width: 20%}" + columnSelector + // the first column in the layout
    ":first-child {width: 50%}" + columnSelector + // the last column in the layout
    ":last-child {width: 30%;}" + rowSelector + // sibling rows in the column layout
    " + .wc-row {margin-top: 0.5em;}" + // when the screen goes below 1000px wide
    "@media only screen and (max-width: 1000px) {" + rowSelector + " {display: block;}" + columnSelector + ", " + columnSelector + ":first-child, " + columnSelector + ":last-child " + " {display: inline-block; box-sizing: border-box; width: 100%; text-align: left;} " + columnSelector + " + .wc-column {margin-top: 0.25em;}}";
    WText cssText = new WText("<style type='text/css'>" + css + "</style>");
    cssText.setEncodeText(false);
    add(cssText);
    add(new WHorizontalRule());
}

Example 2 with Alignment

use of com.github.bordertech.wcomponents.layout.ColumnLayout.Alignment in project wcomponents by BorderTech.

the class ColumnLayoutExample method addAlignmentExample.

/**
 * Build an example using column alignments.
 */
private void addAlignmentExample() {
    add(new WHeading(HeadingLevel.H2, "Column Alignments: Left, Center, Right"));
    WPanel panel = new WPanel();
    panel.setLayout(new ColumnLayout(new int[] { 33, 33, 33 }, new Alignment[] { Alignment.LEFT, Alignment.CENTER, Alignment.RIGHT }));
    add(panel);
    panel.add(new BoxComponent("Left"));
    panel.add(new BoxComponent("Center"));
    panel.add(new BoxComponent("Right"));
    panel.add(new BoxComponent("Left"));
    panel.add(new BoxComponent("Center"));
    panel.add(new BoxComponent("Right"));
    add(new WHorizontalRule());
}

Example 3 with Alignment

use of com.github.bordertech.wcomponents.layout.ColumnLayout.Alignment in project wcomponents by BorderTech.

the class ColumnLayoutRenderer_Test method testDoRender.

@Test
public void testDoRender() throws IOException, SAXException, XpathException {
    final int[] cols = new int[] { 1, 100 };
    final Alignment[] aligns = new Alignment[] { Alignment.RIGHT, Alignment.CENTER };
    final String text1 = "ColumnRenderer_Test.testPaint.text1";
    final String text2 = "ColumnRenderer_Test.testPaint.text2";
    WPanel container = new WPanel();
    container.setLayout(new ColumnLayout(cols));
    // One element -> 1 row, 2 cols (one empty)
    container.add(new WText(text1));
    assertSchemaMatch(container);
    assertXpathEvaluatesTo("1", "count(//ui:panel/ui:columnlayout)", container);
    assertXpathEvaluatesTo(String.valueOf(cols.length), "count(//ui:panel/ui:columnlayout/ui:column)", container);
    assertXpathEvaluatesTo(text1, "normalize-space(//ui:panel/ui:columnlayout/ui:cell[1])", container);
    assertXpathEvaluatesTo("", "normalize-space(//ui:panel/ui:columnlayout/ui:cell[2])", container);
    // Two elements -> 1 row, 2 cols
    container.add(new WText(text2));
    assertSchemaMatch(container);
    assertXpathEvaluatesTo("1", "count(//ui:panel/ui:columnlayout)", container);
    assertXpathEvaluatesTo(String.valueOf(cols.length), "count(//ui:panel/ui:columnlayout/ui:column)", container);
    assertXpathEvaluatesTo(String.valueOf(cols[0]), "//ui:panel/ui:columnlayout/ui:column[1]/@width", container);
    assertXpathEvaluatesTo(String.valueOf(cols[1]), "//ui:panel/ui:columnlayout/ui:column[2]/@width", container);
    assertXpathEvaluatesTo(text1, "normalize-space(//ui:panel/ui:columnlayout/ui:cell[1])", container);
    assertXpathEvaluatesTo(text2, "normalize-space(//ui:panel/ui:columnlayout/ui:cell[2])", container);
    assertXpathEvaluatesTo("", "//ui:panel/ui:columnlayout/@hgap", container);
    assertXpathEvaluatesTo("", "//ui:panel/ui:columnlayout/@vgap", container);
    // Test hgap, vgap
    container.setLayout(new ColumnLayout(cols, GAP, BIG_GAP));
    assertSchemaMatch(container);
    assertXpathEvaluatesTo(GAP.toString(), "//ui:panel/ui:columnlayout/@hgap", container);
    assertXpathEvaluatesTo(BIG_GAP.toString(), "//ui:panel/ui:columnlayout/@vgap", container);
    // Test Alignment
    container.setLayout(new ColumnLayout(cols, aligns));
    assertSchemaMatch(container);
    assertXpathEvaluatesTo("", "//ui:panel/ui:columnlayout/@hgap", container);
    assertXpathEvaluatesTo("", "//ui:panel/ui:columnlayout/@vgap", container);
    assertXpathEvaluatesTo("right", "//ui:panel/ui:columnlayout/ui:column[1]/@align", container);
    assertXpathEvaluatesTo("center", "//ui:panel/ui:columnlayout/ui:column[2]/@align", container);
    // Test Alignment, hgap, vgap
    container.setLayout(new ColumnLayout(cols, aligns, GAP, BIG_GAP));
    assertSchemaMatch(container);
    assertXpathEvaluatesTo(GAP.toString(), "//ui:panel/ui:columnlayout/@hgap", container);
    assertXpathEvaluatesTo(BIG_GAP.toString(), "//ui:panel/ui:columnlayout/@vgap", container);
    assertXpathEvaluatesTo("right", "//ui:panel/ui:columnlayout/ui:column[1]/@align", container);
    assertXpathEvaluatesTo("center", "//ui:panel/ui:columnlayout/ui:column[2]/@align", container);
}

Example 4 with Alignment

use of com.github.bordertech.wcomponents.layout.ColumnLayout.Alignment in project wcomponents by BorderTech.

the class ColumnLayoutExample method addResponsiveExample.

/**
 * Add a column layout which will change its rendering on small screens.
 */
private void addResponsiveExample() {
    add(new WHeading(HeadingLevel.H2, "Default responsive design"));
    add(new ExplanatoryText("This example applies the theme's default responsive design rules for ColumnLayout.\n " + "The columns have width and alignment and there is also a hgap and a vgap."));
    WPanel panel = new WPanel();
    panel.setLayout(new ColumnLayout(new int[] { 33, 33, 33 }, new Alignment[] { Alignment.LEFT, Alignment.CENTER, Alignment.RIGHT }, Size.LARGE, Size.XL));
    panel.setHtmlClass(HtmlClassProperties.RESPOND);
    add(panel);
    panel.add(new BoxComponent("Left"));
    panel.add(new BoxComponent("Center"));
    panel.add(new BoxComponent("Right"));
    panel.add(new BoxComponent("Left"));
    panel.add(new BoxComponent("Center"));
    panel.add(new BoxComponent("Right"));
}

Example 5 with Alignment

use of com.github.bordertech.wcomponents.layout.ColumnLayout.Alignment in project wcomponents by BorderTech.

the class ColumnLayoutExample method addAutoWidthExample.

/**
 * This example shows a column which does not have widths set in Java. This is a "good thing": widths should be set in CSS.
 */
private void addAutoWidthExample() {
    add(new WHeading(HeadingLevel.H2, "Automatic (app defined) widths"));
    add(new ExplanatoryText("This example shows what happens if you use undefined (0) column width and do not then define them in CSS."));
    WPanel panel = new WPanel();
    panel.setLayout(new ColumnLayout(new int[] { 0, 0, 0 }, new Alignment[] { Alignment.LEFT, Alignment.CENTER, Alignment.RIGHT }));
    add(panel);
    panel.add(new BoxComponent("Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."));
    panel.add(new BoxComponent("Praesent eu turpis convallis, fringilla elit nec, ullamcorper purus. Proin dictum ac nunc rhoncus fringilla. " + "Pellentesque habitant morbi tristique senectus et netus et malesuada fames."));
    panel.add(new BoxComponent("Vestibulum vehicula a turpis et efficitur. Integer maximus enim a orci posuere, id fermentum magna dignissim. " + "Sed condimentum, dui et condimentum faucibus, quam erat pharetra."));
    panel.add(new BoxComponent("Left"));
    panel.add(new BoxComponent("Center"));
    panel.add(new BoxComponent("Right"));
    add(new WHorizontalRule());
}