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

Example 51 with WText

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

the class WConfirmationButtonExample method addAjaxExample.

/**
 * This is used to reproduce a WComponents bug condition to make sure we do not re-create it once it is fixed.
 * See https://github.com/BorderTech/wcomponents/issues/1266.
 */
private void addAjaxExample() {
    add(new WHeading(HeadingLevel.H2, "Confirm as ajax trigger"));
    final String before = "Before";
    final String after = "After";
    final WText ajaxContent = new WText("Before");
    final WPanel target = new WPanel(WPanel.Type.BOX);
    add(target);
    target.add(ajaxContent);
    WButton confirmWithAjax = new WButton("Replace");
    confirmWithAjax.setMessage("Are you sure?");
    confirmWithAjax.setAction(new Action() {

        @Override
        public void execute(final ActionEvent event) {
            ajaxContent.setText(before.equals(ajaxContent.getText()) ? after : before);
        }
    });
    add(confirmWithAjax);
    add(new WAjaxControl(confirmWithAjax, target));
}

Example 52 with WText

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

the class WRowExample method createRow.

/**
 * Creates a row containing columns with the given widths.
 *
 * @param gap the horizontal gap between columns
 * @param colWidths the percentage widths for each column
 * @return a WRow containing columns with the given widths
 */
private WRow createRow(final Size gap, final int[] colWidths) {
    WRow row = new WRow(gap);
    for (int i = 0; i < colWidths.length; i++) {
        WColumn col = new WColumn(colWidths[i]);
        WPanel box = new WPanel(WPanel.Type.BOX);
        box.add(new WText(colWidths[i] + "%"));
        col.add(box);
        row.add(col);
    }
    return row;
}

Example 53 with WText

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

the class WRowExample method addAppLevelCSSExample.

/**
 * Build an example with undefined column widths then use application-level CSS and a htmlClass property to define the widths.
 */
private void addAppLevelCSSExample() {
    String htmlClass = "my_local_class";
    add(new WHeading(HeadingLevel.H2, "App defined widths"));
    add(new ExplanatoryText("This example shows the use of a htmlClass and app-specific CSS (in this case inline)" + " to style the columns including responsive widths" + " which kick in at 1000px and 900px"));
    WRow row = new WRow();
    row.setHtmlClass(htmlClass);
    add(row);
    WColumn col1 = new WColumn();
    String col1HtmlClass = "my_col1";
    col1.setHtmlClass(col1HtmlClass);
    col1.add(new ExplanatoryText("This is some text content in the first column."));
    row.add(col1);
    WColumn col2 = new WColumn();
    String col2HtmlClass = "my_col2";
    col2.setHtmlClass(col2HtmlClass);
    col2.add(new ExplanatoryText("Some content in column 2."));
    row.add(col2);
    WColumn col3 = new WColumn();
    col3.add(new ExplanatoryText("Some content in column 3."));
    row.add(col3);
    String columnClass = ".wc-column";
    String rowSelector = "." + htmlClass;
    // .column is the local name of WColumn's XML element and is part of the client side API.
    String columnSelector = rowSelector + " > " + columnClass;
    String css = columnSelector + " {width: 20%; background-color: #f0f0f0; padding: 0.5em;}" + columnSelector + " + " + columnClass + " {margin-left: 0.5em}" + columnSelector + "." + col2.getHtmlClass() + " {width: 60%;}" + // when the screen goes below 1000px wide
    "@media only screen and (max-width: 1000px) {" + rowSelector + " {display: block;}" + columnSelector + " {display: inline-block; box-sizing: border-box;}" + columnSelector + " + " + columnClass + " {margin-left: 0}" + columnSelector + "." + col1.getHtmlClass() + " {display: block; width: 100%; margin-bottom: 0.5em;} " + columnSelector + " ~ " + columnClass + " {width: calc(50% - 0.25em); background-color: #f0f000}" + "." + col2.getHtmlClass() + " {margin-right: 0.25em}" + "." + col2.getHtmlClass() + " + " + columnClass + " {margin-left: 0.25em;}" + // when the screen goes below 900px wide;
    "}\n@media only screen and (max-width: 900px) {" + columnSelector + // the importants are becauseI am lazy
    " {width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; background-color: #ff0 !important;}" + "." + col2.getHtmlClass() + " {margin-bottom: 0.5em;}\n}";
    WText cssText = new WText("<style type='text/css'>" + css + "</style>");
    cssText.setEncodeText(false);
    add(cssText);
}

Example 54 with WText

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

the class WTabSetExample method constructExample.

/**
 * Helper to do the work of the constructor since we do not really want to call over-rideable methods in a
 * constructor.
 */
private void constructExample() {
    add(new WHeading(HeadingLevel.H2, "Examples showing TabSet Type property."));
    add(new WHeading(HeadingLevel.H3, "Tabs at the top"));
    WTabSet tabset0 = new SampleWTabset();
    add(tabset0);
    add(new WHeading(HeadingLevel.H3, "Tabs at the top with explicit TYPE"));
    /* Explicitly setting TYPE_TOP is superfluous */
    WTabSet tabset1 = new SampleWTabset(WTabSet.TYPE_TOP);
    add(tabset1);
    add(new WHeading(HeadingLevel.H3, "Tabs on the LEFT"));
    WTabSet tabset1a = new SampleWTabset(WTabSet.TYPE_LEFT);
    add(tabset1a);
    add(new WHeading(HeadingLevel.H3, "Tabs on the RIGHT"));
    WTabSet tabset1b = new SampleWTabset(WTabSet.TYPE_RIGHT);
    add(tabset1b);
    add(new WHeading(HeadingLevel.H3, "ACCORDION tabs"));
    WTabSet tabset1c = new SampleWTabset(TabSetType.ACCORDION);
    add(tabset1c);
    add(new WHorizontalRule());
    /* Content height */
    add(new WHeading(HeadingLevel.H2, "Examples showing content height property."));
    add(new WHeading(HeadingLevel.H3, "Tall content."));
    WTabSet htabset1 = new SampleWTabset();
    htabset1.setContentHeight(TALL_CONTENT);
    add(htabset1);
    WTabSet htabset1a = new SampleWTabset(WTabSet.TYPE_LEFT);
    htabset1a.setContentHeight(TALL_CONTENT);
    add(htabset1a);
    WTabSet htabset1b = new SampleWTabset(WTabSet.TYPE_RIGHT);
    htabset1b.setContentHeight(TALL_CONTENT);
    add(htabset1b);
    WTabSet htabset1c = new SampleWTabset(TabSetType.ACCORDION);
    htabset1c.setContentHeight(TALL_CONTENT);
    add(htabset1c);
    add(new WHeading(HeadingLevel.H3, "Short content."));
    WTabSet htabset1d = new SampleWTabset();
    htabset1d.setContentHeight(SHORT_CONTENT);
    add(htabset1d);
    WTabSet htabset1e = new SampleWTabset(WTabSet.TYPE_LEFT);
    htabset1e.setContentHeight(SHORT_CONTENT);
    add(htabset1e);
    WTabSet htabset1f = new SampleWTabset(WTabSet.TYPE_RIGHT);
    htabset1f.setContentHeight(SHORT_CONTENT);
    add(htabset1f);
    WTabSet htabset1g = new SampleWTabset(TabSetType.ACCORDION);
    htabset1g.setContentHeight(SHORT_CONTENT);
    add(htabset1g);
    add(new WHorizontalRule());
    add(new WHeading(HeadingLevel.H2, "Examples showing disabled property."));
    /* NOTE: WTabSet does not currently implement SubordinateTarget therefore one cannot create a subordinate
		 * control to disable/enable a WTabSet.
		 */
    WTabSet disabledTabset = new SampleWTabset();
    disabledTabset.setDisabled(true);
    add(disabledTabset);
    add(new WHeading(HeadingLevel.H2, "Examples showing accordion's single property."));
    WTabSet singleOpenAccordionabset = new SampleWTabset(WTabSet.TYPE_ACCORDION);
    singleOpenAccordionabset.setSingle(true);
    add(singleOpenAccordionabset);
    add(new WHorizontalRule());
    /* NOTE: no example of the hidden property because WTabSet is not a subordinate target. This is inconsistent
		 * with the schema. */
    add(new WHeading(HeadingLevel.H2, "Setting the initially active tab"));
    add(new WHeading(HeadingLevel.H3, "Server side with tabs on the left, with second tab initially active."));
    WTabSet tabset3 = new WTabSet(WTabSet.TYPE_LEFT);
    tabset3.setContentHeight("10em");
    tabset3.addTab(new WText("Some content should go in here."), "First tab", WTabSet.TAB_MODE_SERVER, 'i');
    WPanel largeContent2 = new WPanel();
    largeContent2.setLayout(new FlowLayout(Alignment.VERTICAL));
    largeContent2.add(new WText(LONG_TEXT));
    largeContent2.add(new WText(LONG_TEXT));
    largeContent2.add(new WText(LONG_TEXT));
    tabset3.addTab(largeContent2, "Second tab which is much longer", WTabSet.TAB_MODE_SERVER, 'e');
    WImage image = new WImage("/image/success.png", "success");
    image.setCacheKey("eg-image-tab");
    WDecoratedLabel tabLabel = new WDecoratedLabel(image, new WText("Third tab"), null);
    tabset3.addTab(new WText("The tab button for this tab has an image!"), tabLabel, WTabSet.TAB_MODE_SERVER, 'h');
    // Set 2nd tab active
    tabset3.setActiveIndex(1);
    add(tabset3);
    add(new WHeading(HeadingLevel.H3, "Client side with tabs on the right and the third tab initially active."));
    WText thirdContent = new WText("Some more content should go into here.");
    WTabSet tabset4 = new WTabSet(WTabSet.TYPE_RIGHT);
    tabset4.setContentHeight("10em");
    tabset4.addTab(new WText("Some content should go into here."), "First tab", WTabSet.TAB_MODE_CLIENT);
    tabset4.addTab(new WText(LONG_TEXT), "Second tab which is longer", WTabSet.TAB_MODE_CLIENT);
    tabset4.addTab(thirdContent, "Third tab", WTabSet.TAB_MODE_CLIENT);
    // Set 3rd tab active
    tabset4.setActiveTab(thirdContent);
    add(tabset4);
    add(new WHeading(HeadingLevel.H3, "Client side with showing lots of tabs."));
    add(new ExplanatoryText("This will effectively show what happens when tabs need to wrap. You should do everything possible to avoid this situation."));
    WTabSet tabset5 = new WTabSet();
    tabset5.addTab(new WText("Tab 1."), "First tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 2."), "Second tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 3."), "Third tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 4."), "Fourth tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 5."), "Fifth tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 6."), "Sixth tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 7."), "Seventh tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 8."), "Eighth tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 9."), "Nineth tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 10."), "Tenth tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 11."), "Eleventh tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 12."), "Twelfth tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 13."), "Thirteenth tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 14."), "Fourteenth tab", WTabSet.TAB_MODE_CLIENT);
    tabset5.addTab(new WText("Tab 15."), "Fifteenth tab", WTabSet.TAB_MODE_CLIENT);
    add(tabset5);
    add(new WHorizontalRule());
    add(new WHeading(HeadingLevel.H2, "Using WSubordinateControl"));
    WTabSet targetTabset = new SampleWTabset();
    add(targetTabset);
    WFieldLayout layout = new WFieldLayout(WFieldLayout.LAYOUT_STACKED);
    add(layout);
    final WCheckBox disabledControllerCb = new WCheckBox();
    final WCheckBox hiddenControllerCb = new WCheckBox();
    layout.addField("disable tabset", disabledControllerCb);
    layout.addField("hide tabset", hiddenControllerCb);
    // Build & add the subordinate
    SubordinateBuilder builder = new SubordinateBuilder();
    builder.condition().equals(hiddenControllerCb, String.valueOf(true));
    builder.whenTrue().hide(targetTabset);
    builder.whenFalse().show(targetTabset);
    add(builder.build());
    builder = new SubordinateBuilder();
    builder.condition().equals(disabledControllerCb, String.valueOf(true));
    builder.whenTrue().disable(targetTabset);
    builder.whenFalse().enable(targetTabset);
    add(builder.build());
}

Example 55 with WText

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

the class SimpleTabs_Test method createSimpleTabs.

/**
 * @return a simple tabs for testing.
 */
private static WComponent createSimpleTabs() {
    SimpleTabs tabs = new SimpleTabs();
    tabs.addTab(new WText("tab1content"), "tab1name");
    tabs.addTab(new WText("tab2content"), "tab2name");
    tabs.addTab(new WText("tab3content"), "tab3name");
    return tabs;
}