Examples with ExplanatoryText com.github.bordertech.wcomponents.examples.common.ExplanatoryText used on opensource projects

Example 1 with ExplanatoryText

use of com.github.bordertech.wcomponents.examples.common.ExplanatoryText 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 ExplanatoryText

use of com.github.bordertech.wcomponents.examples.common.ExplanatoryText in project wcomponents by BorderTech.

the class WCheckBoxSelectExample method addInsideAFieldLayoutExamples.

/**
 * When a WCheckBoxSelect is added to a WFieldLayout the legend is moved. The first CheckBoxSelect has a frame, the
 * second doesn't
 */
private void addInsideAFieldLayoutExamples() {
    add(new WHeading(HeadingLevel.H3, "WCheckBoxSelect inside a WFieldLayout"));
    add(new ExplanatoryText("When a WCheckBoxSelect is inside a WField its label is exposed in a way which appears and behaves like a regular " + "HTML label. This allows WCheckBoxSelects to be used in a layout with simple form controls (such as WTextField) and produce a " + "consistent and predicatable interface. The third example in this set uses a null label and a toolTip to hide the labelling " + "element. This can lead to user confusion and is not recommended."));
    WFieldLayout layout = new WFieldLayout();
    layout.setLabelWidth(25);
    add(layout);
    String[] options = new String[] { "Dog", "Cat", "Bird", "Turtle" };
    WCheckBoxSelect select = new WCheckBoxSelect(options);
    layout.addField("Select some animals", select);
    String[] options2 = new String[] { "Parrot", "Galah", "Cockatoo", "Lyre" };
    select = new WCheckBoxSelect(options2);
    layout.addField("Select some birds", select);
    select.setFrameless(true);
    // a tooltip can be used as a label stand-in even in a WField
    String[] options3 = new String[] { "Carrot", "Beet", "Brocolli", "Bacon - the perfect vegetable" };
    select = new WCheckBoxSelect(options3);
    layout.addField((WLabel) null, select);
    select.setToolTip("Veggies");
    select = new WCheckBoxSelect("australian_state");
    layout.addField("Select a state", select).getLabel().setHint("This is an ajax trigger");
    add(new WAjaxControl(select, layout));
}

Example 3 with ExplanatoryText

use of com.github.bordertech.wcomponents.examples.common.ExplanatoryText in project wcomponents by BorderTech.

the class WCheckBoxSelectExample method addFlatSelectExample.

/**
 * WCheckBoxSelect layout options These examples show the various ways to lay out the options in a WCheckBoxSelect
 * NOTE: the default (if no buttonLayout is set) is LAYOUT_STACKED. adds a WCheckBoxSelect with LAYOUT_FLAT
 */
private void addFlatSelectExample() {
    add(new WHeading(HeadingLevel.H3, "WCheckBoxSelect with flat layout"));
    add(new ExplanatoryText("Setting the layout to FLAT will make thecheck boxes be rendered in a horizontal line. They will wrap when they reach" + " the edge of the parent container."));
    final WCheckBoxSelect select = new WCheckBoxSelect("australian_state");
    select.setToolTip("Make a selection");
    select.setButtonLayout(WCheckBoxSelect.LAYOUT_FLAT);
    add(select);
}

Example 4 with ExplanatoryText

use of com.github.bordertech.wcomponents.examples.common.ExplanatoryText in project wcomponents by BorderTech.

the class WCheckBoxSelectExample method addReadOnlyExamples.

/**
 * Examples of readonly states.
 */
private void addReadOnlyExamples() {
    add(new WHeading(HeadingLevel.H3, "Read-only WCheckBoxSelect examples"));
    add(new ExplanatoryText("These examples all use the same list of options: the states and territories list from the editable examples above." + " When the readOnly state is specified only those options which are selected are output."));
    // NOTE: when there are 0 or 1 selections the frame is not rendered.
    add(new WHeading(HeadingLevel.H4, "Read only with no selection"));
    WCheckBoxSelect select = new WCheckBoxSelect("australian_state");
    add(select);
    select.setReadOnly(true);
    select.setToolTip("Read only with no selection");
    add(new WText("end of unselected read only example"));
    add(new WHeading(HeadingLevel.H4, "Read only with one selection"));
    select = new SelectWithSingleSelected("australian_state");
    add(select);
    select.setReadOnly(true);
    select.setToolTip("Read only with one selection");
    add(new WHeading(HeadingLevel.H4, "Read only with many selections and no frame"));
    select = new SelectWithSingleSelected("australian_state");
    add(select);
    select.setReadOnly(true);
    select.setToolTip("Read only with many selections");
    select.setFrameless(true);
    add(new WHeading(HeadingLevel.H4, "Read only with many selections and COLUMN layout"));
    select = new SelectWithSingleSelected("australian_state");
    add(select);
    select.setReadOnly(true);
    select.setToolTip("Read only with many selections");
    select.setButtonLayout(WCheckBoxSelect.LAYOUT_COLUMNS);
    select.setButtonColumns(3);
    // read only in a WFieldLayout
    add(new WHeading(HeadingLevel.H4, "Read only in a WFieldLayout"));
    add(new ExplanatoryText("Each read only example is preceded by an editable example with the same options and selection. This is to ensure the" + " CSS works properly."));
    WFieldLayout layout = new WFieldLayout();
    layout.setLabelWidth(25);
    add(layout);
    // no selections
    select = new WCheckBoxSelect("australian_state");
    select.setFrameless(true);
    layout.addField("No selections were made", select);
    select = new WCheckBoxSelect("australian_state");
    select.setFrameless(true);
    select.setReadOnly(true);
    layout.addField("No selections were made (read only)", select);
    // one selection
    select = new SelectWithSingleSelected("australian_state");
    select.setFrameless(true);
    layout.addField("One selection was made", select);
    select = new SelectWithSingleSelected("australian_state");
    select.setFrameless(true);
    select.setReadOnly(true);
    layout.addField("One selection was made (read only)", select);
    // many selections
    select = new SelectWithManySelected("australian_state");
    layout.addField("Many selections with frame", select);
    select = new SelectWithManySelected("australian_state");
    select.setReadOnly(true);
    layout.addField("Many selections with frame (read only)", select);
    // columns with selections
    select = new SelectWithSingleSelected("australian_state");
    select.setButtonLayout(WCheckBoxSelect.LAYOUT_COLUMNS);
    select.setButtonColumns(3);
    select.setFrameless(true);
    layout.addField("many selections, frameless, COLUMN layout (3 columns)", select);
    select = new SelectWithManySelected("australian_state");
    select.setReadOnly(true);
    select.setButtonLayout(WCheckBoxSelect.LAYOUT_COLUMNS);
    select.setButtonColumns(3);
    select.setFrameless(true);
    layout.addField("many selections, frameless, COLUMN layout (3 columns) (read only)", select);
    // flat with selections
    select = new SelectWithManySelected("australian_state");
    select.setButtonLayout(WCheckBoxSelect.LAYOUT_FLAT);
    select.setFrameless(true);
    layout.addField("Many selections, frameless, FLAT layout", select);
    select = new SelectWithManySelected("australian_state");
    select.setReadOnly(true);
    select.setButtonLayout(WCheckBoxSelect.LAYOUT_FLAT);
    select.setFrameless(true);
    layout.addField("Many selections, frameless, FLAT layout (read only)", select);
}

Example 5 with ExplanatoryText

use of com.github.bordertech.wcomponents.examples.common.ExplanatoryText in project wcomponents by BorderTech.

the class WCheckBoxSelectExample method addColumnSelectExample.

/**
 * adds a WCheckBoxSelect with LAYOUT_COLUMN in 2 columns.
 */
private void addColumnSelectExample() {
    add(new WHeading(HeadingLevel.H3, "WCheckBoxSelect laid out in columns"));
    add(new ExplanatoryText("Setting the layout to COLUMN will make the check boxes be rendered in 'n' columns. The number of columns is" + " determined by the layoutColumnCount property."));
    final WCheckBoxSelect select = new WCheckBoxSelect("australian_state");
    select.setToolTip("Make a selection");
    select.setButtonLayout(WCheckBoxSelect.LAYOUT_COLUMNS);
    select.setButtonColumns(2);
    add(select);
    add(new WHeading(HeadingLevel.H3, "Options equal to columns"));
    String[] options = new String[] { "Dog", "Cat", "Bird" };
    final WCheckBoxSelect select2 = new WCheckBoxSelect(options);
    select2.setToolTip("Animals");
    select2.setButtonColumns(3);
    final WTextField text = new WTextField();
    text.setReadOnly(true);
    text.setText(NO_SELECTION);
    WButton update = new WButton("Select Animals");
    update.setAction(new Action() {

        @Override
        public void execute(final ActionEvent event) {
            String output = select2.getSelected().isEmpty() ? NO_SELECTION : "The selected animals are: " + select2.getSelected();
            text.setText(output);
        }
    });
    select2.setDefaultSubmitButton(update);
    add(select2);
    add(update);
    add(text);
    add(new WAjaxControl(update, text));
}