Examples with FlowLayout com.github.bordertech.wcomponents.layout.FlowLayout used on opensource projects

Example 6 with FlowLayout

use of com.github.bordertech.wcomponents.layout.FlowLayout in project wcomponents by BorderTech.

the class FlowLayoutRenderer_Test method testRenderGap.

@Test
public void testRenderGap() throws IOException, SAXException, XpathException {
    WPanel panel = new WPanel();
    for (FlowLayout.Alignment a : FlowLayout.Alignment.values()) {
        panel.setLayout(new FlowLayout(a, GAP));
        assertSchemaMatch(panel);
        assertXpathEvaluatesTo(GAP.toString(), "//ui:panel/ui:flowlayout/@gap", panel);
    }
}

Example 7 with FlowLayout

use of com.github.bordertech.wcomponents.layout.FlowLayout in project wcomponents by BorderTech.

the class WButtonExample method addImageExamples.

/**
 * An example to cover the gamut of image buttons both with and without visible text and with both renderAsLink and
 * render as button.
 */
private void addImageExamples() {
    // Button rendered with an image only
    add(new WHeading(HeadingLevel.H2, "Image buttons"));
    add(new ExplanatoryText("This example shows how to use an image inside a WButton."));
    add(new WHeading(HeadingLevel.H3, "Just an image"));
    add(new ExplanatoryText("This example shows how to use an image as the only content of a WButton. " + "The button must still have text content to adequately explain the button's purpose."));
    add(new WHeading(HeadingLevel.H4, "Image in a button"));
    add(makeImageButton("Save", false));
    add(new WHeading(HeadingLevel.H4, "Image button without button style"));
    add(new ExplanatoryText("This example shows how to use an image as the only content of a WButton when styled to be without its button appearance. " + "If you are creating a button containing only an image you should be careful as it may not be obvious to the application user that the 'image' is actually a 'button'." + "The button must still have text content to adequately explain the button's purpose."));
    add(makeImageButton("Save", true));
    add(new ExplanatoryText("Button using a WImage description as the text equivalent."));
    WButton button = new WButton();
    WImage buttonImage = new WImage("/image/tick.png", "Mark as OK");
    button.setImage(buttonImage.getImage());
    add(button);
    add(new WHeading(HeadingLevel.H3, "Image and text"));
    add(new ExplanatoryText("This example shows how to use an image and text as the content of a button."));
    add(new WHeading(HeadingLevel.H4, "Rendered as a button"));
    WPanel buttonLayoutPanel = new WPanel(WPanel.Type.BOX);
    buttonLayoutPanel.setLayout(new FlowLayout(FlowLayout.LEFT, 6, 0, FlowLayout.ContentAlignment.BOTTOM));
    add(buttonLayoutPanel);
    buttonLayoutPanel.add(makeImageButtonWithPosition("Image on the North", ImagePosition.NORTH));
    buttonLayoutPanel.add(makeImageButtonWithPosition("Image on the East", ImagePosition.EAST));
    buttonLayoutPanel.add(makeImageButtonWithPosition("Image on the South", ImagePosition.SOUTH));
    buttonLayoutPanel.add(makeImageButtonWithPosition("Image on the West", ImagePosition.WEST));
    add(new WHeading(HeadingLevel.H4, "Rendered as a link"));
    add(new ExplanatoryText("This example shows how to use an image and text as the content of a button without the button styling."));
    buttonLayoutPanel = new WPanel(WPanel.Type.BOX);
    buttonLayoutPanel.setLayout(new FlowLayout(FlowLayout.LEFT, 6, 0, FlowLayout.ContentAlignment.BOTTOM));
    add(buttonLayoutPanel);
    buttonLayoutPanel.add(makeImageButtonWithPosition("Image on the North", ImagePosition.NORTH, true));
    buttonLayoutPanel.add(makeImageButtonWithPosition("Image on the East", ImagePosition.EAST, true));
    buttonLayoutPanel.add(makeImageButtonWithPosition("Image on the South", ImagePosition.SOUTH, true));
    buttonLayoutPanel.add(makeImageButtonWithPosition("Image on the West", ImagePosition.WEST, true));
    add(new WHeading(HeadingLevel.H4, "Using theme icons"));
    add(new ExplanatoryText("These examples show ways to add an icon to a button using 'HtmlClassUtil'."));
    // \u200b is a zero-width space.
    WButton iconButton = new WButton("\u200b");
    iconButton.setToolTip("Edit");
    iconButton.setHtmlClass(HtmlClassProperties.ICON_EDIT);
    add(iconButton);
    iconButton = new WButton("Save");
    iconButton.setHtmlClass(HtmlClassProperties.ICON_SAVE_BEFORE);
    add(iconButton);
    iconButton = new WButton("Search");
    iconButton.setHtmlClass(HtmlClassProperties.ICON_SEARCH_AFTER);
    add(iconButton);
    add(new ExplanatoryText("These examples show ways to add a Font-Awesome icon to a button using 'setHtmlClass'."));
    // \u200b is a zero-width space.
    iconButton = new WButton("\u200b");
    iconButton.setToolTip("Open Menu");
    iconButton.setHtmlClass(HtmlIconUtil.getIconClasses("fa-bars"));
    add(iconButton);
    iconButton = new WButton("With text content");
    iconButton.setHtmlClass(HtmlIconUtil.getIconClasses("fa-hand-o-left", HtmlIconUtil.IconPosition.BEFORE));
    add(iconButton);
    iconButton = new WButton("Right icon with text content");
    iconButton.setHtmlClass(HtmlIconUtil.getIconClasses("fa-hand-o-right", HtmlIconUtil.IconPosition.AFTER));
    add(iconButton);
}

Example 8 with FlowLayout

use of com.github.bordertech.wcomponents.layout.FlowLayout 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 9 with FlowLayout

use of com.github.bordertech.wcomponents.layout.FlowLayout in project wcomponents by BorderTech.

the class WDateFieldExample method addDateRangeExample.

/**
 * Add date range example.
 */
private void addDateRangeExample() {
    add(new WHeading(WHeading.MAJOR, "Example of a date range component"));
    WFieldSet dateRange = new WFieldSet("Enter the expected arrival and departure dates.");
    add(dateRange);
    WPanel dateRangePanel = new WPanel();
    dateRangePanel.setLayout(new FlowLayout(FlowLayout.LEFT, 6, 0));
    dateRange.add(dateRangePanel);
    final WDateField arrivalDate = new WDateField();
    final WDateField departureDate = new WDateField();
    // One could add some validation rules around this so that "arrival" was always earlier than or equal to "departure"
    WLabel arrivalLabel = new WLabel("Arrival", arrivalDate);
    arrivalLabel.setHint("dd MMM yyyy");
    WLabel departureLabel = new WLabel("Departure", departureDate);
    departureLabel.setHint("dd MMM yyyy");
    dateRangePanel.add(arrivalLabel);
    dateRangePanel.add(arrivalDate);
    dateRangePanel.add(departureLabel);
    dateRangePanel.add(departureDate);
    // subordinate control to ensure that the departure date is only enabled if the arrival date is populated
    WSubordinateControl control = new WSubordinateControl();
    add(control);
    Rule rule = new Rule(new Equal(arrivalDate, null));
    control.addRule(rule);
    rule.addActionOnTrue(new Disable(departureDate));
    rule.addActionOnFalse(new Enable(departureDate));
    control.addRule(rule);
}

Example 10 with FlowLayout

use of com.github.bordertech.wcomponents.layout.FlowLayout in project wcomponents by BorderTech.

the class WLabelExample method addNestedFieldExamples.

/**
 * Examples showing WLabel with a nested input control WComponent.
 * This is VERY dangerous as only a very few WComponents are valid for this scenario. If you go down this route: stop!!
 * These are really here for framework testing, not as examples as to  how to do things.
 */
private void addNestedFieldExamples() {
    add(new WHeading(HeadingLevel.H2, "Label nesting which is technically OK"));
    /* Just because it is OK to do this does not mean you should! So these "examples" have far fewer comments. */
    WPanel errorLayoutPanel = new WPanel();
    errorLayoutPanel.setLayout(new FlowLayout(FlowLayout.VERTICAL, Size.LARGE));
    errorLayoutPanel.setMargin(new Margin(null, null, Size.XL, null));
    add(errorLayoutPanel);
    errorLayoutPanel.add(new ExplanatoryText("This example shows WLabels with a single nested simple form control WTextField." + " This is not a contravention of the HTML specification but you should not do it."));
    WLabel outerLabel = new WLabel("Label with nested WTextField and not 'for' anything");
    errorLayoutPanel.add(outerLabel);
    outerLabel.add(new WTextField());
    WTextField innerField = new WTextField();
    outerLabel = new WLabel("Label 'for' nested WTextField", innerField);
    errorLayoutPanel.add(outerLabel);
    outerLabel.add(innerField);
}