use of com.github.bordertech.wcomponents.WHeading 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());
}
use of com.github.bordertech.wcomponents.WHeading in project wcomponents by BorderTech.
the class WRadioButtonSelectExample method addDisabledExamples.
/**
* Examples of disabled state. You should use {@link WSubordinateControl} to set and manage the disabled state
* unless there is no facility for the user to enable a control.
*
* If you want to prevent the user enabling and interacting with a WRadioButtonSeelct then you should consider using
* the readOnly state instead of the disabled state.
*/
private void addDisabledExamples() {
add(new WHeading(HeadingLevel.H2, "Disabled WRadioButtonSelect examples"));
WFieldLayout layout = new WFieldLayout();
add(layout);
WRadioButtonSelect select = new WRadioButtonSelect("australian_state");
select.setDisabled(true);
layout.addField("Disabled with no selection", select);
select = new WRadioButtonSelect("australian_state");
select.setDisabled(true);
select.setFrameless(true);
layout.addField("Disabled with no selection no frame", select);
select = new SelectWithSelection("australian_state");
select.setDisabled(true);
layout.addField("Disabled with selection", select);
}
use of com.github.bordertech.wcomponents.WHeading in project wcomponents by BorderTech.
the class WRadioButtonSelectExample method addSingleColumnSelectExample.
/**
* adds a WRadioButtonSelect with LAYOUT_COLUMN in 1 column simply by not setting the number of columns. This is
* superfluous as you should use LAYOUT_STACKED (the default) instead.
*/
private void addSingleColumnSelectExample() {
add(new WHeading(HeadingLevel.H3, "WRadioButtonSelect laid out in a single column"));
add(new ExplanatoryText("When layout is COLUMN, setting the layoutColumnCount property to one, or forgetting to set it at all (default is " + "one) is a little bit pointless."));
final WRadioButtonSelect select = new WRadioButtonSelect("australian_state");
select.setButtonLayout(WRadioButtonSelect.LAYOUT_COLUMNS);
add(new WLabel("One column", select));
add(select);
}
use of com.github.bordertech.wcomponents.WHeading in project wcomponents by BorderTech.
the class WRadioButtonSelectExample method addColumnSelectExample.
/**
* adds a WRadioButtonSelect with LAYOUT_COLUMN in 3 columns.
*/
private void addColumnSelectExample() {
add(new WHeading(HeadingLevel.H3, "WRadioButtonSelect laid out in three columns"));
add(new ExplanatoryText("Setting the layout to COLUMN will make the radio buttons be rendered in 'n' columns. The number of columns is" + " determined by the layoutColumnCount property."));
final WRadioButtonSelect select = new WRadioButtonSelect("australian_state");
select.setButtonLayout(WRadioButtonSelect.LAYOUT_COLUMNS);
select.setButtonColumns(3);
add(new WLabel("Three column selection", select));
add(select);
add(new WHeading(HeadingLevel.H3, "Options equal to columns"));
String[] options = new String[] { "Dog", "Cat", "Bird" };
final WRadioButtonSelect select2 = new WRadioButtonSelect(options);
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() == null ? NO_SELECTION : "The selected animal is: " + select2.getSelected();
text.setText(output);
}
});
select2.setDefaultSubmitButton(update);
add(new WLabel("Three columns and three options", select2));
add(select2);
add(update);
add(text);
add(new WAjaxControl(update, text));
}
use of com.github.bordertech.wcomponents.WHeading in project wcomponents by BorderTech.
the class WRadioButtonSelectExample method makeFramelessExample.
/**
* Make a simple editable example without a frame.
*/
private void makeFramelessExample() {
add(new WHeading(HeadingLevel.H3, "WRadioButtonSelect without its frame"));
add(new ExplanatoryText("When a WRadioButtonSelect is frameless it loses some of its coherence, especially when its WLabel is hidden or " + "replaced by a toolTip. Using a frameless WRadioButtonSelect is useful within an existing WFieldLayout as it can provide a more " + "consistent user interface but only if it has a relatively small number of options."));
final WRadioButtonSelect select = new SelectWithSelection("australian_state");
select.setFrameless(true);
add(new WLabel("Frameless with default selection", select));
add(select);
}
Aggregations