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

Example 11 with WFieldLayout

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

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

the class ButtonOptionsExample method getButtonControls.

/**
 * build the button controls field set.
 *
 * @param errors the error pane from the page.
 * @return a field set for the controls.
 */
private WFieldSet getButtonControls(final WValidationErrors errors) {
    // Options Layout
    WFieldSet fieldSet = new WFieldSet("Button configuration");
    WFieldLayout layout = new WFieldLayout();
    layout.setLabelWidth(30);
    layout.addField("Text", tfButtonLabel);
    layout.addField("AccessKey", tfAccesskey);
    layout.addField("Render as link", cbRenderAsLink);
    layout.addField("Disabled", cbDisabled);
    layout.addField("setImage ('/image/pencil.png')", cbSetImage);
    layout.addField("Image Position", ddImagePosition);
    // Apply Button
    WButton apply = new WButton("Apply");
    apply.setAction(new ValidatingAction(errors, fieldSet) {

        @Override
        public void executeOnValid(final ActionEvent event) {
            applySettings();
        }
    });
    fieldSet.add(layout);
    fieldSet.add(apply);
    return fieldSet;
}

Example 13 with WFieldLayout

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

the class WDropdownOptionsExample method applySettings.

/**
 * Apply the settings from the control table to the drop down.
 */
private void applySettings() {
    container.reset();
    infoPanel.reset();
    // create the list of options.
    List<String> options = new ArrayList<>(Arrays.asList(OPTIONS_ARRAY));
    if (cbNullOption.isSelected()) {
        options.add(0, "");
    }
    // create the dropdown.
    final WDropdown dropdown = new WDropdown(options);
    // set the dropdown type.
    dropdown.setType((DropdownType) rbsDDType.getSelected());
    // set the selected option if applicable.
    String selected = (String) rgDefaultOption.getSelected();
    if (selected != null && !NONE.equals(selected)) {
        dropdown.setSelected(selected);
    }
    // set the width.
    if (nfWidth.getValue() != null) {
        dropdown.setOptionWidth(nfWidth.getValue().intValue());
    }
    // set the tool tip.
    if (tfToolTip.getText() != null && tfToolTip.getText().length() > 0) {
        dropdown.setToolTip(tfToolTip.getText());
    }
    // set misc options.
    dropdown.setVisible(cbVisible.isSelected());
    dropdown.setDisabled(cbDisabled.isSelected());
    // add the action for action on change, ajax and subordinate.
    if (cbActionOnChange.isSelected() || cbAjax.isSelected() || cbSubmitOnChange.isSelected()) {
        final WStyledText info = new WStyledText();
        info.setWhitespaceMode(WhitespaceMode.PRESERVE);
        infoPanel.add(info);
        dropdown.setActionOnChange(new Action() {

            @Override
            public void execute(final ActionEvent event) {
                String selectedOption = (String) dropdown.getSelected();
                info.setText(selectedOption);
            }
        });
    }
    // this has to be below the set action on change so it is
    // not over written.
    dropdown.setSubmitOnChange(cbSubmitOnChange.isSelected());
    // add the ajax target.
    if (cbAjax.isSelected()) {
        WAjaxControl update = new WAjaxControl(dropdown);
        update.addTarget(infoPanel);
        container.add(update);
    }
    // add the subordinate stuff.
    if (rbsDDType.getValue() == WDropdown.DropdownType.COMBO) {
        // This is to work around a WComponent Subordinate logic flaw.
        cbSubordinate.setSelected(false);
    }
    if (cbSubordinate.isSelected()) {
        WComponentGroup<SubordinateTarget> group = new WComponentGroup<>();
        container.add(group);
        WSubordinateControl control = new WSubordinateControl();
        container.add(control);
        for (String option : OPTIONS_ARRAY) {
            buildSubordinatePanel(dropdown, option, group, control);
        }
        // add a rule for none selected.
        Rule rule = new Rule();
        control.addRule(rule);
        rule.setCondition(new Equal(dropdown, ""));
        rule.addActionOnTrue(new Hide(group));
    }
    WFieldLayout flay = new WFieldLayout();
    flay.setLabelWidth(25);
    container.add(flay);
    flay.addField("Configured dropdown", dropdown);
    flay.addField((WLabel) null, new WButton("Submit"));
}

Example 14 with WFieldLayout

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

the class WDropdownOptionsExample method getDropDownControls.

/**
 * build the drop down controls.
 *
 * @return a field set containing the dropdown controls.
 */
private WFieldSet getDropDownControls() {
    WFieldSet fieldSet = new WFieldSet("Drop down configuration");
    WFieldLayout layout = new WFieldLayout();
    layout.setLabelWidth(25);
    fieldSet.add(layout);
    rbsDDType.setButtonLayout(WRadioButtonSelect.LAYOUT_FLAT);
    rbsDDType.setSelected(WDropdown.DropdownType.NATIVE);
    rbsDDType.setFrameless(true);
    layout.addField("Dropdown Type", rbsDDType);
    nfWidth.setMinValue(0);
    nfWidth.setDecimalPlaces(0);
    layout.addField("Width", nfWidth);
    layout.addField("ToolTip", tfToolTip);
    layout.addField("Include null option", cbNullOption);
    rgDefaultOption.setButtonLayout(WRadioButtonSelect.LAYOUT_COLUMNS);
    rgDefaultOption.setButtonColumns(2);
    rgDefaultOption.setSelected(NONE);
    rgDefaultOption.setFrameless(true);
    layout.addField("Default Option", rgDefaultOption);
    layout.addField("Action on change", cbActionOnChange);
    layout.addField("Ajax", cbAjax);
    WField subField = layout.addField("Subordinate", cbSubordinate);
    // .getLabel().setHint("Does not work with Dropdown Type COMBO");
    layout.addField("Submit on change", cbSubmitOnChange);
    layout.addField("Visible", cbVisible);
    layout.addField("Disabled", cbDisabled);
    // Apply Button
    WButton apply = new WButton("Apply");
    fieldSet.add(apply);
    WSubordinateControl subSubControl = new WSubordinateControl();
    Rule rule = new Rule();
    subSubControl.addRule(rule);
    rule.setCondition(new Equal(rbsDDType, WDropdown.DropdownType.COMBO));
    rule.addActionOnTrue(new Disable(subField));
    rule.addActionOnFalse(new Enable(subField));
    fieldSet.add(subSubControl);
    apply.setAction(new Action() {

        @Override
        public void execute(final ActionEvent event) {
            applySettings();
        }
    });
    return fieldSet;
}

Example 15 with WFieldLayout

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

the class WVideoExample method buildUI.

/**
 * Build the UI for this example.
 */
private void buildUI() {
    // build the configuration options UI.
    WFieldLayout layout = new WFieldLayout(WFieldLayout.LAYOUT_STACKED);
    layout.setMargin(new Margin(null, null, Size.LARGE, null));
    add(layout);
    layout.addField("Autoplay", cbAutoPlay);
    layout.addField("Loop", cbLoop);
    layout.addField("Mute", cbMute);
    layout.addField("Disable", cbDisable);
    layout.addField("Show separate play/pause", cbControls);
    layout.addField((WLabel) null, btnApply);
    // add the video to the UI
    add(video);
    // disable mute and enable disable if PLAY_PAUSE is used
    WSubordinateControl control = new WSubordinateControl();
    add(control);
    Rule rule = new Rule();
    rule.setCondition(new Equal(cbControls, Boolean.TRUE.toString()));
    rule.addActionOnTrue(new Disable(cbMute));
    rule.addActionOnTrue(new Enable(cbDisable));
    rule.addActionOnFalse(new Enable(cbMute));
    rule.addActionOnFalse(new Disable(cbDisable));
    control.addRule(rule);
    // Allow the config to be updated without reloading the whole UI.
    add(new WAjaxControl(btnApply, video));
}