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

Example 31 with WFieldLayout

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

the class LinkOptionsExample 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("Link configuration");
    WFieldLayout layout = new WFieldLayout();
    layout.setLabelWidth(30);
    layout.addField("Link text", tfLinkLabel);
    layout.addField("Link address", tfUrlField);
    layout.addField("Link AccessKey", tfAccesskey).getLabel().setHint("A single upper case letter or digit.");
    layout.addField("Render as button", cbRenderAsButton);
    layout.addField("Disabled", cbDisabled);
    layout.addField("Open in a new window", cbOpenNew);
    layout.addField("setImage ('/image/attachment.png')", cbSetImage);
    layout.addField("Image Position", ddImagePosition);
    layout.setMargin(new com.github.bordertech.wcomponents.Margin(0, 0, 6, 0));
    // 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 32 with WFieldLayout

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

the class WAudioExample 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("Disable", cbDisable);
    layout.addField("Show only play/pause", cbControls);
    layout.addField((WLabel) null, btnApply);
    // enable disable option only when control 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 Enable(cbDisable));
    rule.addActionOnFalse(new Disable(cbDisable));
    control.addRule(rule);
    // allow config to change without reloading the whole page.
    add(new WAjaxControl(btnApply, audio));
    // add the audio to the UI
    add(audio);
}

Example 33 with WFieldLayout

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

the class WButtonExample method addDefaultSubmitButtonExample.

/**
 * Examples showing how to set a WButton as the default submit button for an input control.
 */
private void addDefaultSubmitButtonExample() {
    add(new WHeading(HeadingLevel.H3, "Default submit button"));
    add(new ExplanatoryText("This example shows how to use an image as the only content of a WButton. " + "In addition this text field submits the entire screen using the image button to the right of the field."));
    // We use WFieldLayout to lay out a label:input pair. In this case the input is a
    // compound control of a WTextField and a WButton.
    WFieldLayout imageButtonFieldLayout = new WFieldLayout();
    imageButtonFieldLayout.setLabelWidth(25);
    add(imageButtonFieldLayout);
    // the text field and the button both need to be defined explicitly to be able to add them into a wrapper
    WTextField textFld = new WTextField();
    // and finally we get to the actual button
    WButton button = new WButton("Flag this record for follow-up");
    button.setImage("/image/flag.png");
    button.getImageHolder().setCacheKey("eg-button-flag");
    button.setActionObject(button);
    button.setAction(new ExampleButtonAction());
    // we can set the image button to be the default submit button for the text field.
    textFld.setDefaultSubmitButton(button);
    // There are many way of putting multiple controls in to a WField's input.
    // We are using a WContainer is the one which is lowest impact in the UI.
    WContainer imageButtonFieldContainer = new WContainer();
    imageButtonFieldContainer.add(textFld);
    // Use a WText to push the button off of the text field by an appropriate (user-agent determined) amount.
    // an en space is half an em. a none-breaking space \u00a0 could also be used but will have no effect on inter-node wrapping
    imageButtonFieldContainer.add(new WText("\u2002"));
    imageButtonFieldContainer.add(button);
    // Finally add the input wrapper to the WFieldLayout
    imageButtonFieldLayout.addField("Enter record ID", imageButtonFieldContainer);
}

Example 34 with WFieldLayout

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

the class WRadioButtonTriggerActionExample method setup.

/**
 * Add controls to the UI.
 */
private void setup() {
    setLayout(new FlowLayout(FlowLayout.VERTICAL));
    WFieldSet fset = new WFieldSet("Select a meal");
    add(fset);
    fset.setMargin(new Margin(null, null, Size.LARGE, null));
    WFieldLayout flay = new WFieldLayout(WFieldLayout.LAYOUT_STACKED);
    fset.add(flay);
    flay.setLabelWidth(0);
    flay.addField("Breakfast", rb1);
    flay.addField("Lunch", rb2);
    flay.addField("Dinner", rb3);
    /*
		 * NOTE: you should never use submitOnChange with a WRadioButton
		 */
    fset.add(new WAjaxControl(mealSelections, textBox));
    mealSelections.setActionOnChange(new Action() {

        @Override
        public void execute(final ActionEvent event) {
            String selection = null;
            if (rb1.isSelected()) {
                selection = "Breakfast selected";
            }
            if (rb2.isSelected()) {
                selection = "Lunch selected";
            }
            if (rb3.isSelected()) {
                selection = "Dinner selected";
            }
            text1.setText(selection + " : " + (new Date()).toString());
        }
    });
    textBox.add(text1);
    add(textBox);
    add(mealSelections);
}

Example 35 with WFieldLayout

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

the class GridLayoutOptionsExample method getLayoutControls.

/**
 * build the list controls field set.
 *
 * @param errors the error box to be linked to the apply button.
 * @return a field set for the controls.
 */
private WFieldSet getLayoutControls(final WValidationErrors errors) {
    // Options Layout
    WFieldSet fieldSet = new WFieldSet("List configuration");
    WFieldLayout layout = new ControlFieldLayout();
    fieldSet.add(layout);
    // options.
    columnCount.setDecimalPlaces(0);
    columnCount.setMinValue(0);
    columnCount.setNumber(DEFAULT_COLUMN_COUNT);
    columnCount.setMandatory(true);
    layout.addField("Number of Columns", columnCount);
    rowCount.setDecimalPlaces(0);
    rowCount.setMinValue(0);
    rowCount.setNumber(DEFAULT_ROW_COUNT);
    rowCount.setMandatory(true);
    layout.addField("Number of Rows", rowCount);
    hGap.setDecimalPlaces(0);
    hGap.setMinValue(0);
    hGap.setNumber(0);
    hGap.setMandatory(true);
    layout.addField("Horizontal Gap", hGap);
    vGap.setDecimalPlaces(0);
    vGap.setMinValue(0);
    vGap.setNumber(0);
    vGap.setMandatory(true);
    layout.addField("Vertical Gap", vGap);
    boxCount.setDecimalPlaces(0);
    boxCount.setMinValue(0);
    boxCount.setNumber(DEFAULT_BOX_COUNT);
    boxCount.setMandatory(true);
    layout.addField("Number of Boxes", boxCount);
    layout.addField("Visible", cbVisible);
    layout.addField("Allow responsive design", cbResponsive);
    // Apply Button
    WButton apply = new WButton("Apply");
    apply.setAction(new ValidatingAction(errors, this) {

        @Override
        public void executeOnValid(final ActionEvent event) {
            applySettings();
        }
    });
    layout.addField(apply);
    fieldSet.add(new WAjaxControl(apply, container));
    fieldSet.setMargin(new Margin(null, null, Size.LARGE, null));
    return fieldSet;
}