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

Example 1 with ColumnLayout

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

the class WLabelExample method addAntiPatternExamples.

/**
 * Add examples you should never follow. DO NOT use the following as examples of what to do: these are examples of what NOT to do.
 */
private void addAntiPatternExamples() {
    add(new WHeading(HeadingLevel.H2, "WLabel anti-patterns"));
    add(new ExplanatoryText("These are here for testing purposes and must not be used as examples to follow.\n" + "Turn on debugging (bordertech.wcomponents.debug.enabled=true) to get much more information."));
    add(new WHeading(HeadingLevel.H3, "Poor but not erroneous uses of WLabel"));
    WPanel errorLayoutPanel = new WPanel();
    errorLayoutPanel.setLayout(new FlowLayout(FlowLayout.VERTICAL, Size.LARGE));
    add(errorLayoutPanel);
    // label not for anything should not be a WLabel
    errorLayoutPanel.add(new WLabel("I am not 'for' anything"));
    // WLabel for something which is not labellable
    errorLayoutPanel.add(new WLabel("I am for a component which should not be labelled", errorLayoutPanel));
    // If the WLabel is 'for' something that is not in the tree it becomes 'for' the WApplication. This is not necessarily a good thing!!!
    WCheckBox notHere = new WCheckBox();
    errorLayoutPanel.add(new WLabel("My component wasn't added", notHere));
    /*
		 * The examples which follow MUST NEVER BE USED! They cause ERRORS.
		 * They are here purely for framework testing.
		 */
    add(new WHeading(HeadingLevel.H3, "Very bad uses of WLabel"));
    errorLayoutPanel = new WPanel();
    errorLayoutPanel.setLayout(new FlowLayout(FlowLayout.VERTICAL, Size.LARGE));
    add(errorLayoutPanel);
    /*
		 * Nested WLabels: very bad
		 */
    errorLayoutPanel.add(new ExplanatoryText("This example shows nested WLabels. This is a contravention of the HTML specification."));
    WPanel nestingErrorPanel = new WPanel();
    nestingErrorPanel.setLayout(new ColumnLayout(new int[] { 50, 50 }, Size.LARGE, Size.MEDIUM));
    errorLayoutPanel.add(nestingErrorPanel);
    WTextField outerField = new WTextField();
    WLabel outerLabel = new WLabel("I am an outer label", outerField);
    nestingErrorPanel.add(outerLabel);
    WTextField innerField = new WTextField();
    WLabel innerLabel = new WLabel("Inner label", innerField);
    // add the inner label to the outer label: this is the ERROR
    outerLabel.add(innerLabel);
    nestingErrorPanel.add(innerField);
    nestingErrorPanel.add(outerField);
    /*
		 * It is permissible to place certain simple form control components into
		 * a WLabel under the following conditions:
		 * there must be no more than one such component in the WLabel;
		 * the component MUST be one which outputs a simple HTML form control
		 * (and I am not going to tell you which they are);
		 * The WLabel must be 'for' the nested component or not 'for' anything.
		 */
    errorLayoutPanel.add(new ExplanatoryText("This example shows a WLabel with a nested simple form control WTextField but the WLabel is not " + "'for' the WTextField. This is a contravention of the HTML specification."));
    WTextField notMyField = new WTextField();
    notMyField.setToolTip("This field should not be in the label it is in");
    WTextField myField = new WTextField();
    WLabel myFieldLabel = new WLabel("I am not the label for my nested text field", myField);
    nestingErrorPanel = new WPanel();
    nestingErrorPanel.setLayout(new ColumnLayout(new int[] { 50, 50 }, Size.LARGE, Size.MEDIUM));
    errorLayoutPanel.add(nestingErrorPanel);
    nestingErrorPanel.add(myFieldLabel);
    nestingErrorPanel.add(myField);
    // adding the 'wrong' WTextField to a WLabel is what causes this error
    myFieldLabel.add(notMyField);
    add(new ExplanatoryText("The next field has a label explicitly set to only white space."));
    WTextField emptyLabelTextField = new WTextField();
    WLabel emptyLabel = new WLabel(" ", emptyLabelTextField);
    add(emptyLabel);
    add(emptyLabelTextField);
    add(new WHeading(HeadingLevel.H2, "Unlabelled controls"));
    add(new ExplanatoryText("These controls must be labelled but are not."));
    WFieldLayout fieldsFlat = new WFieldLayout();
    add(fieldsFlat);
    fieldsFlat.addField((WLabel) null, new WTextField());
    fieldsFlat.addField((WLabel) null, new WTextArea());
    fieldsFlat.addField((WLabel) null, new WDateField());
    fieldsFlat.addField((WLabel) null, new WCheckBox());
    fieldsFlat.addField((WLabel) null, new WCheckBoxSelect(new String[] { "Apple", "Cherry", "Orange", "Pineapple" }));
}

Example 2 with ColumnLayout

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

the class ColumnLayoutRenderer method doRender.

/**
 * Paints the given WPanel's children.
 *
 * @param component the container to paint.
 * @param renderContext the RenderContext to paint to.
 */
@Override
public void doRender(final WComponent component, final WebXmlRenderContext renderContext) {
    WPanel panel = (WPanel) component;
    XmlStringBuilder xml = renderContext.getWriter();
    ColumnLayout layout = (ColumnLayout) panel.getLayout();
    int childCount = panel.getChildCount();
    Size hgap = layout.getHorizontalGap();
    String hgapString = hgap == null ? null : hgap.toString();
    Size vgap = layout.getVerticalGap();
    String vgapString = vgap == null ? null : vgap.toString();
    int cols = layout.getColumnCount();
    xml.appendTagOpen("ui:columnlayout");
    xml.appendOptionalAttribute("hgap", hgapString);
    xml.appendOptionalAttribute("vgap", vgapString);
    xml.appendClose();
    // Column Definitions
    for (int col = 0; col < cols; col++) {
        xml.appendTagOpen("ui:column");
        int width = layout.getColumnWidth(col);
        xml.appendOptionalAttribute("width", width > 0, width);
        switch(layout.getColumnAlignment(col)) {
            case LEFT:
                // left is assumed if omitted
                break;
            case RIGHT:
                xml.appendAttribute("align", "right");
                break;
            case CENTER:
                xml.appendAttribute("align", "center");
                break;
            default:
                throw new IllegalArgumentException("Invalid alignment: " + layout.getColumnAlignment(col));
        }
        xml.appendEnd();
    }
    for (int i = 0; i < childCount; i++) {
        xml.appendTag("ui:cell");
        WComponent child = panel.getChildAt(i);
        child.paint(renderContext);
        xml.appendEndTag("ui:cell");
    }
    xml.appendEndTag("ui:columnlayout");
}

Example 3 with ColumnLayout

use of com.github.bordertech.wcomponents.layout.ColumnLayout 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 4 with ColumnLayout

use of com.github.bordertech.wcomponents.layout.ColumnLayout 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 5 with ColumnLayout

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

the class ColumnLayoutExample method addExample.

/**
 * Adds an example to the set of examples.
 *
 * @param colWidths the percentage widths for each column.
 */
private void addExample(final int[] colWidths) {
    add(new WHeading(HeadingLevel.H2, getTitle(colWidths)));
    WPanel panel = new WPanel();
    panel.setLayout(new ColumnLayout(colWidths));
    add(panel);
    for (int i = 0; i < colWidths.length; i++) {
        panel.add(new BoxComponent(colWidths[i] + "%"));
    }
}