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

Example 16 with ExplanatoryText

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

the class WRadioButtonSelectExample method addFlatSelectExample.

/*
	 * WRadioButtonSelect layout options
	 * These examples show the various ways to lay out the options in a WRadioButtonSelect
	 * NOTE: the default (if no buttonLayout is set) is LAYOUT_STACKED
	 */
/**
 * adds a WRadioButtonSelect with LAYOUT_FLAT.
 */
private void addFlatSelectExample() {
    add(new WHeading(HeadingLevel.H3, "WRadioButtonSelect with flat layout"));
    add(new ExplanatoryText("Setting the layout to FLAT will make the radio buttons be rendered in a horizontal line. They will wrap when they" + " reach the edge of the parent container."));
    final WRadioButtonSelect select = new WRadioButtonSelect("australian_state");
    select.setButtonLayout(WRadioButtonSelect.LAYOUT_FLAT);
    add(new WLabel("Flat selection", select));
    add(select);
}

Example 17 with ExplanatoryText

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

the class WTabExample method preparePaintComponent.

/**
 * {@inheritDoc}
 */
@Override
protected void preparePaintComponent(final Request request) {
    explanationWithTimeStamp.setText("The time the page was rendered was " + (new Date()).toString());
    tabset1TabClient.setContent(new ExplanatoryText("This content was present when the page first rendered at " + (new Date()).toString()));
    tabset1TabServer.setContent(new ExplanatoryText("This is the content of tab two. It should be noted that mode SERVER is deprecated.\nThis mode poses a" + " number of usability problems and should not be used.\n This content was created at " + (new Date()).toString()));
    tabset1TabLazy.setContent(new ExplanatoryText("This tab content is rendered when the tab opens then remains static. Check the date stamp: " + (new Date()).toString()));
    tabset1TabDynamic.setContent(new ExplanatoryText("This tab content refreshes each time it is opened. Check the date stamp: " + (new Date()).toString()));
    tabset1TabEager.setContent(new ExplanatoryText("This tab content is fetched once asynchronously then remains static. Check the date stamp: " + (new Date()).toString()));
}

Example 18 with ExplanatoryText

use of com.github.bordertech.wcomponents.examples.common.ExplanatoryText 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 19 with ExplanatoryText

use of com.github.bordertech.wcomponents.examples.common.ExplanatoryText 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 20 with ExplanatoryText

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

the class ColumnLayoutExample method addResponsiveExample.

/**
 * Add a column layout which will change its rendering on small screens.
 */
private void addResponsiveExample() {
    add(new WHeading(HeadingLevel.H2, "Default responsive design"));
    add(new ExplanatoryText("This example applies the theme's default responsive design rules for ColumnLayout.\n " + "The columns have width and alignment and there is also a hgap and a vgap."));
    WPanel panel = new WPanel();
    panel.setLayout(new ColumnLayout(new int[] { 33, 33, 33 }, new Alignment[] { Alignment.LEFT, Alignment.CENTER, Alignment.RIGHT }, 12, 18));
    panel.setHtmlClass(HtmlClassProperties.RESPOND);
    add(panel);
    panel.add(new BoxComponent("Left"));
    panel.add(new BoxComponent("Center"));
    panel.add(new BoxComponent("Right"));
    panel.add(new BoxComponent("Left"));
    panel.add(new BoxComponent("Center"));
    panel.add(new BoxComponent("Right"));
}