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

Example 1 with WPanel

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

the class BorderLayoutExample method createPanelWithText.

/**
 * Convenience method to create a WPanel with the given title and text.
 *
 * @param title the panel title.
 * @param text the panel text.
 * @return a new WPanel with the given title and text.
 */
private WPanel createPanelWithText(final String title, final String text) {
    WPanel panel = new WPanel(WPanel.Type.CHROME);
    panel.setTitleText(title);
    WText textComponent = new WText(text);
    textComponent.setEncodeText(false);
    panel.add(textComponent);
    return panel;
}

Example 2 with WPanel

use of com.github.bordertech.wcomponents.WPanel 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 WPanel

use of com.github.bordertech.wcomponents.WPanel 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] + "%"));
    }
}

Example 4 with WPanel

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

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

the class FlowLayoutExample method addBoxesWithDiffContent.

/**
 * Adds a set of boxes to the given panel.
 *
 * @param panel the panel to add the boxes to.
 * @param amount the number of boxes to add.
 */
private static void addBoxesWithDiffContent(final WPanel panel, final int amount) {
    for (int i = 1; i <= amount; i++) {
        WPanel content = new WPanel(WPanel.Type.BOX);
        content.setLayout(new FlowLayout(FlowLayout.VERTICAL, 3));
        for (int j = 1; j <= i; j++) {
            content.add(new WText(Integer.toString(i)));
        }
        panel.add(content);
    }
}