Search in sources :

Example 11 with WText

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

the class ColumnLayoutExample 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, "Automatic (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.\n" + "In this case the columns are: 20% and left, 50% and center, 30% and right; and the columns break to full width and are forced to " + "left aligned at 1000px."));
    WPanel panel = new WPanel();
    panel.setHtmlClass(htmlClass);
    panel.setLayout(new ColumnLayout(new int[] { 0, 0, 0 }, new Alignment[] { Alignment.LEFT, Alignment.CENTER, Alignment.RIGHT }));
    add(panel);
    panel.add(new BoxComponent("Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."));
    panel.add(new BoxComponent("Praesent eu turpis convallis, fringilla elit nec, ullamcorper purus. Proin dictum ac nunc rhoncus fringilla. " + "Pellentesque habitant morbi tristique senectus et netus et malesuada fames."));
    panel.add(new BoxComponent("Vestibulum vehicula a turpis et efficitur. Integer maximus enim a orci posuere, id fermentum magna dignissim. " + "Sed condimentum, dui et condimentum faucibus, quam erat pharetra."));
    panel.add(new BoxComponent("Left"));
    panel.add(new BoxComponent("Center"));
    panel.add(new BoxComponent("Right"));
    // .columnLayout is the local name of ColumnLayout and is guranteed, row is now part of the WComponents CSS API but _may_ change.
    String rowSelector = "." + htmlClass + " > .wc-columnlayout > .wc-row";
    String columnSelector = rowSelector + " > .wc-column";
    String css = columnSelector + " {width: 20%}" + columnSelector + // the first column in the layout
    ":first-child {width: 50%}" + columnSelector + // the last column in the layout
    ":last-child {width: 30%;}" + rowSelector + // sibling rows in the column layout
    " + .wc-row {margin-top: 0.5em;}" + // when the screen goes below 1000px wide
    "@media only screen and (max-width: 1000px) {" + rowSelector + " {display: block;}" + columnSelector + ", " + columnSelector + ":first-child, " + columnSelector + ":last-child " + " {display: inline-block; box-sizing: border-box; width: 100%; text-align: left;} " + columnSelector + " + .wc-column {margin-top: 0.25em;}}";
    WText cssText = new WText("<style type='text/css'>" + css + "</style>");
    cssText.setEncodeText(false);
    add(cssText);
    add(new WHorizontalRule());
}
Also used : Alignment(com.github.bordertech.wcomponents.layout.ColumnLayout.Alignment) WText(com.github.bordertech.wcomponents.WText) WPanel(com.github.bordertech.wcomponents.WPanel) ColumnLayout(com.github.bordertech.wcomponents.layout.ColumnLayout) ExplanatoryText(com.github.bordertech.wcomponents.examples.common.ExplanatoryText) WHeading(com.github.bordertech.wcomponents.WHeading) WHorizontalRule(com.github.bordertech.wcomponents.WHorizontalRule)

Example 12 with WText

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

the class DataTableBeanProviderExample method createTable.

/**
 * Creates and configures the table to be used by the example. The table is configured with global rather than user
 * data. Although this is not a realistic scenario, it will suffice for this example.
 *
 * @return a new configured table.
 */
private WDataTable createTable() {
    WDataTable tbl = new WDataTable();
    tbl.addColumn(new WTableColumn("First name", new WText()));
    tbl.addColumn(new WTableColumn("Last name", new WText()));
    tbl.addColumn(new WTableColumn("DOB", new WText()));
    return tbl;
}
Also used : WTableColumn(com.github.bordertech.wcomponents.WTableColumn) WText(com.github.bordertech.wcomponents.WText) WDataTable(com.github.bordertech.wcomponents.WDataTable)

Example 13 with WText

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

the class WDefinitionListExample method addListItems.

/**
 * Adds some items to a definition list.
 *
 * @param list the list to add the items to.
 */
private void addListItems(final WDefinitionList list) {
    // Example of adding multiple data items at once.
    list.addTerm("Colours", new WText("Red"), new WText("Green"), new WText("Blue"));
    // Example of adding multiple data items using multiple calls.
    list.addTerm("Shapes", new WText("Circle"));
    list.addTerm("Shapes", new WText("Square"), new WText("Triangle"));
}
Also used : WText(com.github.bordertech.wcomponents.WText)

Example 14 with WText

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

the class ListLayoutExample method addExample.

/**
 * Adds an example to the set of examples.
 *
 * @param heading the heading for the example
 * @param layout the layout for the panel
 */
private void addExample(final String heading, final ListLayout layout) {
    add(new WHeading(HeadingLevel.H2, heading));
    WPanel panel = new WPanel();
    panel.setLayout(layout);
    add(panel);
    for (String item : EXAMPLE_ITEMS) {
        panel.add(new WText(item));
    }
    add(new WHorizontalRule());
}
Also used : WText(com.github.bordertech.wcomponents.WText) WPanel(com.github.bordertech.wcomponents.WPanel) WHeading(com.github.bordertech.wcomponents.WHeading) WHorizontalRule(com.github.bordertech.wcomponents.WHorizontalRule)

Example 15 with WText

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

the class MenuBarExample method buildMenuBar.

/**
 * Builds up a menu bar for inclusion in the example.
 *
 * @param selectedMenuText the WText to display the selected menu item.
 * @return a menu bar for the example.
 */
private WMenu buildMenuBar(final WText selectedMenuText) {
    WMenu menu = new WMenu();
    // The Colours menu just shows simple text
    WSubMenu colourMenu = new WSubMenu("Colours");
    colourMenu.setMode(WSubMenu.MenuMode.LAZY);
    colourMenu.setAccessKey('C');
    addMenuItem(colourMenu, "Red", selectedMenuText);
    addMenuItem(colourMenu, "Green", selectedMenuText);
    addMenuItem(colourMenu, "Blue", selectedMenuText);
    colourMenu.addSeparator();
    colourMenu.add(new WMenuItem("Disable colour menu", new ToggleDisabledAction(colourMenu)));
    menu.add(colourMenu);
    // The Shapes menu shows grouping of items
    WSubMenu shapeMenu = new WSubMenu("Shapes");
    shapeMenu.setAccessKey('S');
    addMenuItem(shapeMenu, "Circle", selectedMenuText);
    WMenuItemGroup triangleGroup = new WMenuItemGroup("Triangles");
    shapeMenu.add(triangleGroup);
    shapeMenu.setMode(WSubMenu.MenuMode.DYNAMIC);
    addMenuItem(triangleGroup, "Equilateral", selectedMenuText);
    addMenuItem(triangleGroup, "Isosceles", selectedMenuText);
    addMenuItem(triangleGroup, "Scalene", selectedMenuText);
    addMenuItem(triangleGroup, "Right-angled", selectedMenuText);
    addMenuItem(triangleGroup, "Obtuse", selectedMenuText);
    WMenuItemGroup quadGroup = new WMenuItemGroup("Quadrilaterals");
    shapeMenu.add(quadGroup);
    addMenuItem(quadGroup, "Square", selectedMenuText);
    addMenuItem(quadGroup, "Rectangle", selectedMenuText);
    addMenuItem(quadGroup, "Rhombus", selectedMenuText);
    addMenuItem(quadGroup, "Trapezoid", selectedMenuText);
    addMenuItem(quadGroup, "Parallelogram", selectedMenuText);
    shapeMenu.addSeparator();
    shapeMenu.add(new WMenuItem("Disable shape menu", new ToggleDisabledAction(shapeMenu)));
    menu.add(shapeMenu);
    // The Image menu shows use of decorated labels and images
    WDecoratedLabel imageLabel = new WDecoratedLabel(new WImage("/image/wrench.png", "spanner"), new WText("Images"), null);
    WSubMenu imageMenu = new WSubMenu(imageLabel);
    imageMenu.add(createImageMenuItem("/image/flag.png", "Flag", "eg-menu-image-1", selectedMenuText));
    imageMenu.add(createImageMenuItem("/image/attachment.png", "Attachment", "eg-menu-image-2", selectedMenuText));
    imageMenu.add(createImageMenuItem("/image/settings.png", "Settings", "eg-menu-image-3", selectedMenuText));
    imageMenu.addSeparator();
    imageMenu.add(new WMenuItem("Disable image menu", new ToggleDisabledAction(imageMenu)));
    menu.add(imageMenu);
    WSubMenu sitesMenu = new WSubMenu("External apps");
    sitesMenu.add(new WMenuItem("External website", "http://www.example.com/"));
    WMenuItem google = new WMenuItem("Example (new window)", "http://www.example.com/");
    google.setTargetWindow("exampleWindow");
    sitesMenu.add(google);
    menu.add(sitesMenu);
    // Add an item to toggle the states of all the menus
    menu.add(new WMenuItem("Toggle top-level menus", new ToggleDisabledAction(colourMenu, shapeMenu, imageMenu, sitesMenu)));
    menu.add(new WMenuItem("Link", "http://www.example.com"));
    menu.add(new WMenuItem("No Action"));
    WMenuItem itemWithIcon = new WMenuItem("Help");
    itemWithIcon.setAction(new Action() {

        @Override
        public void execute(final ActionEvent event) {
        // do something
        }
    });
    itemWithIcon.setHtmlClass(HtmlClassProperties.ICON_HELP_BEFORE);
    menu.add(itemWithIcon);
    WMenuItem itemWithImage = new WMenuItem(new WDecoratedLabel(new WImage("/image/home.png", "home"), new WText("Home"), null));
    menu.add(itemWithImage);
    menu.add(new WMenuItem(new WDecoratedLabel(new WImage("/image/settings.png", "settings"), new WText("Settings Menu"), null)));
    itemWithImage = new WMenuItem(new WDecoratedLabel(new WImage("/image/flag.png", "flag")));
    itemWithImage.setAccessibleText("flag this view");
    menu.add(itemWithImage);
    return menu;
}
Also used : Action(com.github.bordertech.wcomponents.Action) WSubMenu(com.github.bordertech.wcomponents.WSubMenu) WMenuItem(com.github.bordertech.wcomponents.WMenuItem) WMenuItemGroup(com.github.bordertech.wcomponents.WMenuItemGroup) WText(com.github.bordertech.wcomponents.WText) ActionEvent(com.github.bordertech.wcomponents.ActionEvent) WMenu(com.github.bordertech.wcomponents.WMenu) WImage(com.github.bordertech.wcomponents.WImage) WDecoratedLabel(com.github.bordertech.wcomponents.WDecoratedLabel)

Aggregations

WText (com.github.bordertech.wcomponents.WText)100 Test (org.junit.Test)63 WPanel (com.github.bordertech.wcomponents.WPanel)18 WCollapsible (com.github.bordertech.wcomponents.WCollapsible)10 WDecoratedLabel (com.github.bordertech.wcomponents.WDecoratedLabel)10 WHeading (com.github.bordertech.wcomponents.WHeading)10 UIContext (com.github.bordertech.wcomponents.UIContext)9 WTabSet (com.github.bordertech.wcomponents.WTabSet)7 DefaultWComponent (com.github.bordertech.wcomponents.DefaultWComponent)6 WList (com.github.bordertech.wcomponents.WList)6 WebXmlRenderContext (com.github.bordertech.wcomponents.servlet.WebXmlRenderContext)6 MockResponse (com.github.bordertech.wcomponents.util.mock.MockResponse)6 MockServletConfig (com.github.bordertech.wcomponents.util.mock.servlet.MockServletConfig)6 ActionEvent (com.github.bordertech.wcomponents.ActionEvent)5 WFieldLayout (com.github.bordertech.wcomponents.WFieldLayout)5 WHorizontalRule (com.github.bordertech.wcomponents.WHorizontalRule)5 WImage (com.github.bordertech.wcomponents.WImage)5 WTableColumn (com.github.bordertech.wcomponents.WTableColumn)5 WTextField (com.github.bordertech.wcomponents.WTextField)5 ExplanatoryText (com.github.bordertech.wcomponents.examples.common.ExplanatoryText)5