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

Example 6 with ExplanatoryText

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

the class WLabelExample method addNullLabelExample.

/**
 * Example of when and how to use a null WLabel.
 */
private void addNullLabelExample() {
    add(new WHeading(HeadingLevel.H2, "How to use accessible null WLabels"));
    add(new ExplanatoryText("These examples shows how sometime a null WLabel is the right thing to do." + "\n This example uses a WFieldSet as the labelled component and it has its own \"label\"."));
    // We want to add a WFieldSet to a WFieldLayout but without an extra label.
    WFieldLayout fieldsFlat = new WFieldLayout();
    fieldsFlat.setMargin(new Margin(null, null, Size.XL, null));
    add(fieldsFlat);
    WFieldSet fs = new WFieldSet("Do you like Bananas?");
    fieldsFlat.addField((WLabel) null, fs);
    // now add the WRadioButtons to the WFieldSet using an inner WFieldLayout
    WFieldLayout innerLayout = new WFieldLayout(WFieldLayout.LAYOUT_STACKED);
    // The content will be a group of WRadioButtons
    RadioButtonGroup group1 = new RadioButtonGroup();
    WRadioButton rb1 = group1.addRadioButton(1);
    WRadioButton rb2 = group1.addRadioButton(2);
    // make the labels for the radio buttons
    WLabel rb1Label = new WLabel("", rb1);
    WImage labelImage = new WImage("/image/success.png", "I still like bananas");
    labelImage.setHtmlClass("wc-valign-bottom");
    rb1Label.add(labelImage);
    WLabel rb2Label = new WLabel("", rb2);
    labelImage = new WImage("/image/error.png", "I still dislike bananas");
    labelImage.setHtmlClass("wc-valign-bottom");
    rb2Label.add(labelImage);
    innerLayout.addField(rb1Label, rb1);
    innerLayout.addField(rb2Label, rb2);
    // add the content to the WFieldLayout - the order really doesn't matter.
    fs.add(group1);
    fs.add(innerLayout);
}

Example 7 with ExplanatoryText

use of com.github.bordertech.wcomponents.examples.common.ExplanatoryText 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 }, 12, 6));
    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 8 with ExplanatoryText

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

the class WButtonExample method addClientOnlyExamples.

/**
 * Examples showing use of client only buttons.
 */
private void addClientOnlyExamples() {
    // client command button
    add(new WHeading(HeadingLevel.H2, "Client command buttons"));
    add(new ExplanatoryText("These examples show buttons which do not submit the form"));
    // client command buttons witho a command
    WButton nothingButton = new WButton("Do nothing");
    add(nothingButton);
    nothingButton.setClientCommandOnly(true);
    nothingButton = new WButton("Do nothing link");
    add(nothingButton);
    nothingButton.setRenderAsLink(true);
    nothingButton.setClientCommandOnly(true);
    // client command buttons with command.
    HelloButton helloButton = new HelloButton("Hello");
    add(helloButton);
    helloButton = new HelloButton("Hello link");
    helloButton.setRenderAsLink(true);
    add(helloButton);
}

Example 9 with ExplanatoryText

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

the class WButtonExample method addAntiPatternExamples.

/**
 * Examples of what not to do when using WButton.
 */
private void addAntiPatternExamples() {
    add(new WHeading(HeadingLevel.H2, "WButton anti-pattern examples"));
    add(new WMessageBox(WMessageBox.WARN, "These examples are purposely bad and should not be used as samples of how to use WComponents but samples of how NOT to use them."));
    add(new WHeading(HeadingLevel.H3, "WButton without a good label"));
    add(new WButton("\u2002"));
    add(new ExplanatoryText("A button without a text label is very bad"));
    add(new WHeading(HeadingLevel.H3, "WButton with a WImage but without a good label"));
    WButton button = new WButton("");
    button.setImage("/image/help.png");
    add(button);
    add(new ExplanatoryText("A button without a text label is very bad, even if you think the image is sufficient. The text label becomes the image alt text."));
}

Example 10 with ExplanatoryText

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

the class WRadioButtonSelectExample method addAntiPatternExamples.

/**
 * Examples of what not to do when using WRadioButtonSelect.
 */
private void addAntiPatternExamples() {
    add(new WHeading(HeadingLevel.H2, "WRadioButtonSelect anti-pattern examples"));
    add(new WMessageBox(WMessageBox.WARN, "These examples are purposely bad and should not be used as samples of how to use WComponents but samples of how NOT to use them."));
    // Even compound controls need a label
    add(new WHeading(HeadingLevel.H3, "WRadioButtonSelect with no labelling component"));
    add(new ExplanatoryText("All input controls, even those which are complex and do not output labellable HTML elements, must be associated with" + " a WLabel or have a toolTip."));
    add(new WRadioButtonSelect("australian_state"));
    // submitOnChange is a WRadioButtonSelect no no!!
    add(new WHeading(HeadingLevel.H3, "WRadioButtonSelect with submitOnChange"));
    add(new ExplanatoryText("SubmitOnChange is bad in most cases but terrible with radio buttons because there is no way to change the selection" + " between non-contiguous options using the keyboard without having multiple page submits.\nIn the following example try to change " + "the selection from 'Outside Australia' to 'Queensland' using only your keyboard. To make this easier the WRadioButtonSelect has" + " an access key of 'M'"));
    final WRadioButtonSelect select = new SelectWithSelection("australian_state");
    final WTextField selected = new WTextField();
    selected.setReadOnly(true);
    select.setActionOnChange(new Action() {

        @Override
        public void execute(final ActionEvent event) {
            // does not matter what this is
            selected.setText(select.getValueAsString());
        }
    });
    select.setSubmitOnChange(true);
    // now put them all into the UI
    WFieldLayout layout = new WFieldLayout();
    add(layout);
    WField selectField = layout.addField("Make a selection to update the page", select);
    selectField.getLabel().setAccessKey('M');
    layout.addField("Selected option", selected);
    // Too many options anti-pattern
    add(new WHeading(HeadingLevel.H3, "WRadioButtonSelect with too many options"));
    add(new ExplanatoryText("Don't use a WRadioButtonSelect if you have more than a handful of options. A good rule of thumb is fewer than 10."));
    // use the country code list at your peril!!
    WRadioButtonSelect rbsTooBig = new WRadioButtonSelect(new String[] { "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" });
    rbsTooBig.setButtonLayout(WRadioButtonSelect.LAYOUT_COLUMNS);
    rbsTooBig.setButtonColumns(6);
    rbsTooBig.setFrameless(true);
    rbsTooBig.setToolTip("Select your country of birth");
    add(rbsTooBig);
    // Don't use a radioButtonSelect if the user can make no selection unless you provide a null option
    add(new WHeading(HeadingLevel.H3, "Optional WRadioButtonSelect with no null option"));
    add(new ExplanatoryText("Once a radio button group has a selection it cannot be removed. If a WRadioButtonSelect is not mandatory it should" + " include a 'none of these' type null option.\nWhat happens if you make a selection in the following but then change your mind" + " (even ugly chairs are not your scene). To concentrate the mind I have made a selection for you."));
    WRadioButtonSelect noneOfTheAboveSelect = new SelectWithSelection(new String[] { "spike", "broken glass", "ugly chair", "wet paint" });
    noneOfTheAboveSelect.setButtonLayout(WRadioButtonSelect.LAYOUT_FLAT);
    noneOfTheAboveSelect.setFrameless(true);
    layout = new WFieldLayout();
    add(layout);
    layout.addField("Where would you like to sit?", noneOfTheAboveSelect);
    // don't use a yes/no group of radio buttons for something which should be a checkbox
    add(new WHeading(HeadingLevel.H3, "Yes/No options"));
    add(new ExplanatoryText("If the only answers to your question is one of yes or no then you do not have a group of radio buttons, you have a check box.\n" + "In the following example the WRadioButtonSelect should be a WCheckBox and the label be 'I agree to the terms and conditions'"));
    layout = new WFieldLayout();
    add(layout);
    WRadioButtonSelect yesNoSelect = new WRadioButtonSelect(new String[] { "yes", "no" });
    yesNoSelect.setButtonLayout(WRadioButtonSelect.LAYOUT_FLAT);
    yesNoSelect.setFrameless(true);
    layout.addField("Do you agree to the terms and conditions?", yesNoSelect);
    add(new WHeading(HeadingLevel.H3, "No options"));
    add(new ExplanatoryText("An interactive WRadioButtonSelect with no options is rather pointless."));
    layout = new WFieldLayout();
    add(layout);
    layout.addField("Select from no options", new WRadioButtonSelect());
}