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());
}
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;
}
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"));
}
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());
}
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;
}
Aggregations