--- /dev/null
+package com.itmill.toolkit.automatedtests.featurebrowser;
+
+import com.itmill.toolkit.ui.Accordion;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.VerticalLayout;
+
+/**
+ * Accordion is a derivative of TabSheet, a vertical tabbed layout that places
+ * the tab contents between the vertical tabs.
+ */
+public class AccordionExample extends CustomComponent {
+ public AccordionExample() {
+ // Create a new accordion
+ final Accordion accordion = new Accordion();
+ setCompositionRoot(accordion);
+
+ // Add a few tabs to the accordion.
+ for (int i = 0; i < 5; i++) {
+ // Create a root component for a accordion tab
+ VerticalLayout layout = new VerticalLayout();
+ accordion.addComponent(layout);
+
+ // The accordion tab label is taken from the caption of the root
+ // component. Notice that layouts can have a caption too.
+ layout.setCaption("Tab " + (i + 1));
+
+ // Add some components in each accordion tab
+ Label label = new Label("These are the contents of Tab " + (i + 1)
+ + ".");
+ layout.addComponent(label);
+
+ TextField textfield = new TextField("Some text field");
+ layout.addComponent(textfield);
+ }
+ }
+}
import com.itmill.toolkit.ui.Button;\r
import com.itmill.toolkit.ui.CheckBox;\r
import com.itmill.toolkit.ui.CustomComponent;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
import com.itmill.toolkit.ui.Label;\r
import com.itmill.toolkit.ui.Link;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
import com.itmill.toolkit.ui.Panel;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
import com.itmill.toolkit.ui.Button.ClickEvent;\r
\r
/**\r
\r
public ButtonExample() {\r
\r
- final OrderedLayout main = new OrderedLayout();\r
+ final VerticalLayout main = new VerticalLayout();\r
main.setMargin(true);\r
setCompositionRoot(main);\r
\r
- final OrderedLayout horiz = new OrderedLayout(\r
- OrderedLayout.ORIENTATION_HORIZONTAL);\r
+ final HorizontalLayout horiz = new HorizontalLayout();\r
+ horiz.setWidth("100%");\r
main.addComponent(horiz);\r
final Panel basic = new Panel("Basic buttons");\r
basic.setStyleName(Panel.STYLE_LIGHT);\r
import com.itmill.toolkit.ui.CustomComponent;\r
import com.itmill.toolkit.ui.Label;\r
import com.itmill.toolkit.ui.Layout;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
import com.itmill.toolkit.ui.TabSheet;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
\r
/**\r
* This example is a (simple) demonstration of client-side caching. The content\r
\r
public ClientCachingExample() {\r
\r
- final OrderedLayout main = new OrderedLayout();\r
+ final VerticalLayout main = new VerticalLayout();\r
main.setMargin(true);\r
setCompositionRoot(main);\r
\r
final TabSheet ts = new TabSheet();\r
main.addComponent(ts);\r
\r
- Layout layout = new OrderedLayout();\r
+ Layout layout = new VerticalLayout();\r
layout.setMargin(true);\r
Label l = new Label("This is a normal label, quick to render.");\r
l.setCaption("A normal label");\r
\r
ts.addTab(layout, "Normal", null);\r
\r
- layout = new OrderedLayout();\r
+ layout = new VerticalLayout();\r
layout.setMargin(true);\r
l = new Label("Slow label - until cached client side.") {\r
+ @Override\r
public void paintContent(PaintTarget target) throws PaintException {\r
try {\r
Thread.sleep(3000);\r
package com.itmill.toolkit.automatedtests.featurebrowser;
+import java.net.MalformedURLException;
+import java.net.URL;
+
import com.itmill.toolkit.data.Property.ValueChangeEvent;
import com.itmill.toolkit.terminal.ExternalResource;
import com.itmill.toolkit.ui.Embedded;
-import com.itmill.toolkit.ui.ExpandLayout;
import com.itmill.toolkit.ui.Select;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Window.Notification;
/**
* Demonstrates the use of Embedded and "suggesting" Select by creating a simple
* @author IT Mill Ltd.
* @see com.itmill.toolkit.ui.Window
*/
-public class EmbeddedBrowserExample extends ExpandLayout implements
+public class EmbeddedBrowserExample extends VerticalLayout implements
Select.ValueChangeListener {
// Default URL to open.
select.addListener(this);
select.setValue(urls[0]);
+ select.setWidth("100%");
+
// configure the embedded and add to layout
emb.setType(Embedded.TYPE_BROWSER);
+ emb.setSizeFull();
addComponent(emb);
// make the embedded as large as possible
- expand(emb);
+ setExpandRatio(emb, 1);
}
public void valueChange(ValueChangeEvent event) {
final String url = (String) event.getProperty().getValue();
if (url != null) {
- // the selected url has changed, let's go there
- emb.setSource(new ExternalResource(url));
+ try {
+ // the selected url has changed, let's go there
+ @SuppressWarnings("unused")
+ URL u = new URL(url);
+ emb.setSource(new ExternalResource(url));
+
+ } catch (MalformedURLException e) {
+ getWindow().showNotification("Invalid address",
+ e.getMessage() + " (example: http://www.itmill.com)",
+ Notification.TYPE_WARNING_MESSAGE);
+ }
+
}
}
-
}
package com.itmill.toolkit.automatedtests.featurebrowser;
import java.util.HashMap;
+import java.util.Iterator;
import com.itmill.toolkit.data.Item;
import com.itmill.toolkit.data.Property;
import com.itmill.toolkit.ui.Button;
import com.itmill.toolkit.ui.Component;
import com.itmill.toolkit.ui.Embedded;
-import com.itmill.toolkit.ui.ExpandLayout;
+import com.itmill.toolkit.ui.HorizontalLayout;
import com.itmill.toolkit.ui.Label;
import com.itmill.toolkit.ui.Layout;
-import com.itmill.toolkit.ui.OrderedLayout;
import com.itmill.toolkit.ui.Select;
import com.itmill.toolkit.ui.SplitPanel;
import com.itmill.toolkit.ui.TabSheet;
import com.itmill.toolkit.ui.Table;
import com.itmill.toolkit.ui.Tree;
+import com.itmill.toolkit.ui.VerticalLayout;
import com.itmill.toolkit.ui.Window;
import com.itmill.toolkit.ui.Button.ClickEvent;
{ "Getting started", "Choices, choices",
"Some variations of simple selects", SelectExample.class },
// Layouts
- { "Getting started", "Layouts", "Laying out components",
+ { "Layouts", "Basic layouts", "Laying out components",
LayoutExample.class },
+ // Layouts
+ { "Layouts", "Accordion", "Play the Accordion!",
+ AccordionExample.class },
// Wrangling data: ComboBox
{ "Wrangling data", "ComboBox", "ComboBox - the swiss army select",
ComboBoxExample.class },
"Table (\"grid\")",
"Table with bells, whistles, editmode and actions (contextmenu)",
TableExample.class },
+ // Wrangling data: Form
+ { "Wrangling data", "Form", "Every application needs forms",
+ FormExample.class },
// Wrangling data: Tree
{ "Wrangling data", "Tree", "A hierarchy of things",
TreeExample.class },
// END
};
+ @Override
public void init() {
// Need to set a theme for ThemeResources to work
tree.addListener(this);
tree.setImmediate(true);
tree.expandItemsRecursively(rootId);
+ for (Iterator i = container.getItemIds().iterator(); i.hasNext();) {
+ Object id = i.next();
+ if (container.getChildren(id) == null) {
+ tree.setChildrenAllowed(id, false);
+ }
+ }
split.addComponent(tree);
table.setImmediate(true);
split2.addComponent(table);
- final ExpandLayout exp = new ExpandLayout();
+ final VerticalLayout exp = new VerticalLayout();
+ exp.setSizeFull();
exp.setMargin(true);
split2.addComponent(exp);
- final OrderedLayout wbLayout = new OrderedLayout(
- OrderedLayout.ORIENTATION_HORIZONTAL);
+ final HorizontalLayout wbLayout = new HorizontalLayout();
Button b = new Button("Open in sub-window", new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
Component component = (Component) ts.getComponentIterator()
.next();
String caption = ts.getTabCaption(component);
try {
- component = (Component) component.getClass().newInstance();
+ component = component.getClass().newInstance();
} catch (Exception e) {
// Could not create
return;
}
Window w = new Window(caption);
- w.setWidth(640);
+ w.setWidth("640px");
if (Layout.class.isAssignableFrom(component.getClass())) {
w.setLayout((Layout) component);
} else {
Window w = getWindow(caption);
if (w == null) {
try {
- component = (Component) component.getClass()
- .newInstance();
+ component = component.getClass().newInstance();
} catch (final Exception e) {
// Could not create
return;
wbLayout.addComponent(b);
exp.addComponent(wbLayout);
- exp.setComponentAlignment(wbLayout, OrderedLayout.ALIGNMENT_RIGHT,
- OrderedLayout.ALIGNMENT_TOP);
+ exp.setComponentAlignment(wbLayout, VerticalLayout.ALIGNMENT_RIGHT,
+ VerticalLayout.ALIGNMENT_TOP);
ts = new TabSheet();
ts.setSizeFull();
ts.addTab(new Label(""), "Choose example", null);
exp.addComponent(ts);
- exp.expand(ts);
+ exp.setExpandRatio(ts, 1);
final Label status = new Label(
"<a href=\"http://www.itmill.com/developers/\">Developer Area</a>"
+ " | <a href=\"http://www.itmill.com/documentation/\">Documentation</a>");
status.setContentMode(Label.CONTENT_XHTML);
exp.addComponent(status);
- exp.setComponentAlignment(status, OrderedLayout.ALIGNMENT_RIGHT,
- OrderedLayout.ALIGNMENT_VERTICAL_CENTER);
+ exp.setComponentAlignment(status, VerticalLayout.ALIGNMENT_RIGHT,
+ VerticalLayout.ALIGNMENT_VERTICAL_CENTER);
// select initial section ("All")
tree.setValue(rootId);
public void valueChange(ValueChangeEvent event) {
if (event.getProperty() == tree) {
final Object id = tree.getValue();
+ if (id == null) {
+ return;
+ }
final Item item = tree.getItem(id);
//
String newSection;
--- /dev/null
+package com.itmill.toolkit.automatedtests.featurebrowser;
+
+import com.itmill.toolkit.data.Item;
+import com.itmill.toolkit.data.Validator;
+import com.itmill.toolkit.data.util.BeanItem;
+import com.itmill.toolkit.ui.BaseFieldFactory;
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.Component;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.Field;
+import com.itmill.toolkit.ui.Form;
+import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+
+/**
+ * This example demonstrates the most important features of the Form component:
+ * binding Form to a JavaBean so that form fields are automatically generated
+ * from the bean properties, creation of custom field editors using a
+ * FieldFactory, customizing the form without FieldFactory, buffering
+ * (commit/discard) and validation. Please note that the example is quite a bit
+ * more complex than real use, as it tries to demonstrate more features than
+ * needed in general case.
+ */
+public class FormExample extends CustomComponent {
+
+ static final String cities[] = { "Amsterdam", "Berlin", "Helsinki",
+ "Hong Kong", "London", "Luxemburg", "New York", "Oslo", "Paris",
+ "Rome", "Stockholm", "Tokyo", "Turku" };
+
+ /** Compose the demo. */
+ public FormExample() {
+
+ // Example data model
+ final Address dataModel = new Address();
+ Button peekDataModelState = new Button("Show the data model state",
+ new Button.ClickListener() {
+
+ public void buttonClick(ClickEvent event) {
+ getWindow().showNotification(
+ dataModel.getAddressAsText());
+ }
+ });
+
+ // Example form
+ final AddressForm form = new AddressForm("Contact Information");
+ form.setDataSource(dataModel);
+ form
+ .setDescription("Please enter valid name and address. Fields marked with * are required. "
+ + "If you try to commit with invalid values, a form error message is displayed. "
+ + "(Address is required but failing to give it a value does not display an error.)");
+
+ // Layout the example
+ VerticalLayout root = new VerticalLayout();
+ root.setMargin(true);
+ root.setSpacing(true);
+ root.addComponent(form);
+ root.addComponent(peekDataModelState);
+ setCompositionRoot(root);
+ }
+
+ public static class AddressForm extends Form {
+ public AddressForm(String caption) {
+
+ setCaption(caption);
+
+ // Use custom field factory to modify the defaults on how the
+ // components are created
+ setFieldFactory(new MyFieldFactory());
+
+ // Add Commit and Discard controls to the form.
+ Button commit = new Button("Save", this, "commit");
+ Button discard = new Button("Reset", this, "discard");
+ HorizontalLayout footer = new HorizontalLayout();
+ footer.addComponent(commit);
+ footer.addComponent(discard);
+ setFooter(footer);
+ }
+
+ public void setDataSource(Address dataModel) {
+
+ // Set the form to edit given datamodel by converting pojo used as
+ // the datamodel to Item
+ setItemDataSource(new BeanItem(dataModel));
+
+ // Ensure that the fields are shown in correct order as the
+ // datamodel does not force any specific order.
+ setVisibleItemProperties(new String[] { "name", "streetAddress",
+ "postalCode", "city" });
+
+ // For examples sake, customize some of the form fields directly
+ // here. The alternative way is to use custom field factory as shown
+ // above.
+ getField("name").setRequired(true);
+ getField("name").setRequiredError("Name is missing");
+ getField("streetAddress").setRequired(true); // No error message
+ getField("postalCode").setRequired(true); // No error message
+ replaceWithSelect("city", cities, cities).setNewItemsAllowed(true);
+
+ // Set the form to act immediately on user input. This is
+ // automatically transports data between the client and the server
+ // to do server-side validation.
+ setImmediate(true);
+
+ // Enable buffering so that commit() must be called for the form
+ // before input is written to the data. (Form input is not written
+ // immediately through to the underlying object.)
+ setWriteThrough(false);
+ }
+ }
+
+ /**
+ * This is example on how to customize field creation. Any kind of field
+ * components could be created on the fly.
+ */
+ static class MyFieldFactory extends BaseFieldFactory {
+
+ @Override
+ public Field createField(Item item, Object propertyId,
+ Component uiContext) {
+
+ Field field = super.createField(item, propertyId, uiContext);
+
+ if ("postalCode".equals(propertyId)) {
+ ((TextField) field).setColumns(5);
+ field.addValidator(new PostalCodeValidator());
+ }
+
+ return field;
+ }
+
+ }
+
+ /**
+ * This is an example of how to create a custom validator for automatic
+ * input validation.
+ */
+ static class PostalCodeValidator implements Validator {
+
+ public boolean isValid(Object value) {
+ if (value == null || !(value instanceof String)) {
+ return false;
+ }
+
+ return ((String) value).matches("[0-9]{5}");
+ }
+
+ public void validate(Object value) throws InvalidValueException {
+ if (!isValid(value)) {
+ throw new InvalidValueException(
+ "Postal code must be a five digit number.");
+ }
+ }
+ }
+
+ /**
+ * Contact information data model created as POJO. Note that in many cases
+ * it would be a good idea to implement Item -interface for the datamodel to
+ * make it directly bindable to form (without BeanItem wrapper)
+ */
+ public static class Address {
+ String name = "";
+ String streetAddress = "";
+ String postalCode = "";
+ String city;
+
+ public String getAddressAsText() {
+ return name + "\n" + streetAddress + "\n" + postalCode + " "
+ + (city == null ? "" : city);
+ }
+
+ public void setName(String name) {
+ this.name = name;
+ }
+
+ public String getName() {
+ return name;
+ }
+
+ public void setStreetAddress(String address) {
+ streetAddress = address;
+ }
+
+ public String getStreetAddress() {
+ return streetAddress;
+ }
+
+ public void setPostalCode(String postalCode) {
+ this.postalCode = postalCode;
+ }
+
+ public String getPostalCode() {
+ return postalCode;
+ }
+
+ public void setCity(String city) {
+ this.city = city;
+ }
+
+ public String getCity() {
+ return city;
+ }
+ }
+
+}
--- /dev/null
+/*
+@ITMillApache2LicenseForJavaFiles@
+ */
+
+package com.itmill.toolkit.automatedtests.featurebrowser;
+
+import java.util.Collection;
+import java.util.Date;
+import java.util.GregorianCalendar;
+import java.util.Vector;
+
+import com.itmill.toolkit.data.Container;
+import com.itmill.toolkit.data.Item;
+import com.itmill.toolkit.data.Property;
+import com.itmill.toolkit.data.Container.Indexed;
+import com.itmill.toolkit.data.util.BeanItem;
+import com.itmill.toolkit.ui.AbstractField;
+import com.itmill.toolkit.ui.BaseFieldFactory;
+import com.itmill.toolkit.ui.CheckBox;
+import com.itmill.toolkit.ui.Component;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.Field;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.Table;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+import com.itmill.toolkit.ui.Button.ClickListener;
+
+/**
+ * This example demonstrates the use of generated columns in a table. Generated
+ * columns can be used for formatting values or calculating them from other
+ * columns (or properties of the items).
+ *
+ * For the data model, we use POJOs bound to a custom Container with BeanItem
+ * items.
+ *
+ * @author magi
+ */
+public class GeneratedColumnExample extends CustomComponent {
+ /**
+ * The business model: fill-up at a gas station.
+ */
+ public class FillUp {
+ Date date;
+ double quantity;
+ double total;
+
+ public FillUp() {
+ }
+
+ public FillUp(int day, int month, int year, double quantity,
+ double total) {
+ date = new GregorianCalendar(year, month - 1, day).getTime();
+ this.quantity = quantity;
+ this.total = total;
+ }
+
+ /** Calculates price per unit of quantity (€/l). */
+ public double price() {
+ if (quantity != 0.0) {
+ return total / quantity;
+ } else {
+ return 0.0;
+ }
+ }
+
+ /** Calculates average daily consumption between two fill-ups. */
+ public double dailyConsumption(FillUp other) {
+ double difference_ms = date.getTime() - other.date.getTime();
+ double days = difference_ms / 1000 / 3600 / 24;
+ if (days < 0.5) {
+ days = 1.0; // Avoid division by zero if two fill-ups on the
+ // same day.
+ }
+ return quantity / days;
+ }
+
+ /** Calculates average daily consumption between two fill-ups. */
+ public double dailyCost(FillUp other) {
+ return price() * dailyConsumption(other);
+ }
+
+ // Getters and setters
+
+ public Date getDate() {
+ return date;
+ }
+
+ public void setDate(Date date) {
+ this.date = date;
+ }
+
+ public double getQuantity() {
+ return quantity;
+ }
+
+ public void setQuantity(double quantity) {
+ this.quantity = quantity;
+ }
+
+ public double getTotal() {
+ return total;
+ }
+
+ public void setTotal(double total) {
+ this.total = total;
+ }
+ };
+
+ /**
+ * This is a custom container that allows adding BeanItems inside it. The
+ * BeanItem objects must be bound to an object. The item ID is an Integer
+ * from 0 to 99.
+ *
+ * Most of the interface methods are implemented with just dummy
+ * implementations, as they are not needed in this example.
+ */
+ public class MySimpleIndexedContainer implements Container, Indexed {
+ Vector items;
+ Object itemtemplate;
+
+ public MySimpleIndexedContainer(Object itemtemplate) {
+ this.itemtemplate = itemtemplate;
+ items = new Vector(); // Yeah this is just a test
+ }
+
+ public boolean addContainerProperty(Object propertyId, Class type,
+ Object defaultValue) throws UnsupportedOperationException {
+ throw new UnsupportedOperationException();
+ }
+
+ public Item addItem(Object itemId) throws UnsupportedOperationException {
+ throw new UnsupportedOperationException();
+ }
+
+ public Object addItem() throws UnsupportedOperationException {
+ throw new UnsupportedOperationException();
+ }
+
+ /**
+ * This addItem method is specific for this container and allows adding
+ * BeanItem objects. The BeanItems must be bound to MyBean objects.
+ */
+ public void addItem(BeanItem item) throws UnsupportedOperationException {
+ items.add(item);
+ }
+
+ public boolean containsId(Object itemId) {
+ if (itemId instanceof Integer) {
+ int pos = ((Integer) itemId).intValue();
+ if (pos >= 0 && pos < items.size()) {
+ return items.get(pos) != null;
+ }
+ }
+ return false;
+ }
+
+ /**
+ * The Table will call this method to get the property objects for the
+ * columns. It uses the property objects to determine the data types of
+ * the columns.
+ */
+ public Property getContainerProperty(Object itemId, Object propertyId) {
+ if (itemId instanceof Integer) {
+ int pos = ((Integer) itemId).intValue();
+ if (pos >= 0 && pos < items.size()) {
+ Item item = (Item) items.get(pos);
+
+ // The BeanItem provides the property objects for the items.
+ return item.getItemProperty(propertyId);
+ }
+ }
+ return null;
+ }
+
+ /** Table calls this to get the column names. */
+ public Collection getContainerPropertyIds() {
+ Item item = new BeanItem(itemtemplate);
+
+ // The BeanItem knows how to get the property names from the bean.
+ return item.getItemPropertyIds();
+ }
+
+ public Item getItem(Object itemId) {
+ if (itemId instanceof Integer) {
+ int pos = ((Integer) itemId).intValue();
+ if (pos >= 0 && pos < items.size()) {
+ return (Item) items.get(pos);
+ }
+ }
+ return null;
+ }
+
+ public Collection getItemIds() {
+ Vector ids = new Vector(items.size());
+ for (int i = 0; i < items.size(); i++) {
+ ids.add(Integer.valueOf(i));
+ }
+ return ids;
+ }
+
+ public Class getType(Object propertyId) {
+ return BeanItem.class;
+ }
+
+ public boolean removeAllItems() throws UnsupportedOperationException {
+ throw new UnsupportedOperationException();
+ }
+
+ public boolean removeContainerProperty(Object propertyId)
+ throws UnsupportedOperationException {
+ throw new UnsupportedOperationException();
+ }
+
+ public boolean removeItem(Object itemId)
+ throws UnsupportedOperationException {
+ throw new UnsupportedOperationException();
+ }
+
+ public int size() {
+ return items.size();
+ }
+
+ public Object addItemAt(int index) throws UnsupportedOperationException {
+ // TODO Auto-generated method stub
+ return null;
+ }
+
+ public Item addItemAt(int index, Object newItemId)
+ throws UnsupportedOperationException {
+ // TODO Auto-generated method stub
+ return null;
+ }
+
+ public Object getIdByIndex(int index) {
+ return Integer.valueOf(index);
+ }
+
+ public int indexOfId(Object itemId) {
+ return ((Integer) itemId).intValue();
+ }
+
+ public Object addItemAfter(Object previousItemId)
+ throws UnsupportedOperationException {
+ // TODO Auto-generated method stub
+ return null;
+ }
+
+ public Item addItemAfter(Object previousItemId, Object newItemId)
+ throws UnsupportedOperationException {
+ // TODO Auto-generated method stub
+ return null;
+ }
+
+ public Object firstItemId() {
+ return new Integer(0);
+ }
+
+ public boolean isFirstId(Object itemId) {
+ return ((Integer) itemId).intValue() == 0;
+ }
+
+ public boolean isLastId(Object itemId) {
+ return ((Integer) itemId).intValue() == (items.size() - 1);
+ }
+
+ public Object lastItemId() {
+ return new Integer(items.size() - 1);
+ }
+
+ public Object nextItemId(Object itemId) {
+ int pos = indexOfId(itemId);
+ if (pos >= items.size() - 1) {
+ return null;
+ }
+ return getIdByIndex(pos + 1);
+ }
+
+ public Object prevItemId(Object itemId) {
+ int pos = indexOfId(itemId);
+ if (pos <= 0) {
+ return null;
+ }
+ return getIdByIndex(pos - 1);
+ }
+ }
+
+ /** Formats the dates in a column containing Date objects. */
+ class DateColumnGenerator implements Table.ColumnGenerator {
+ /**
+ * Generates the cell containing the Date value. The column is
+ * irrelevant in this use case.
+ */
+ public Component generateCell(Table source, Object itemId,
+ Object columnId) {
+ Property prop = source.getItem(itemId).getItemProperty(columnId);
+ if (prop.getType().equals(Date.class)) {
+ Label label = new Label(String.format("%tF",
+ new Object[] { (Date) prop.getValue() }));
+ label.addStyleName("column-type-date");
+ return label;
+ }
+
+ return null;
+ }
+ }
+
+ /** Formats the value in a column containing Double objects. */
+ class ValueColumnGenerator implements Table.ColumnGenerator {
+ String format; /* Format string for the Double values. */
+
+ /** Creates double value column formatter with the given format string. */
+ public ValueColumnGenerator(String format) {
+ this.format = format;
+ }
+
+ /**
+ * Generates the cell containing the Double value. The column is
+ * irrelevant in this use case.
+ */
+ public Component generateCell(Table source, Object itemId,
+ Object columnId) {
+ Property prop = source.getItem(itemId).getItemProperty(columnId);
+ if (prop.getType().equals(Double.class)) {
+ Label label = new Label(String.format(format,
+ new Object[] { (Double) prop.getValue() }));
+
+ // Set styles for the column: one indicating that it's a value
+ // and a more
+ // specific one with the column name in it. This assumes that
+ // the column
+ // name is proper for CSS.
+ label.addStyleName("column-type-value");
+ label.addStyleName("column-" + (String) columnId);
+ return label;
+ }
+ return null;
+ }
+ }
+
+ /** Table column generator for calculating price column. */
+ class PriceColumnGenerator implements Table.ColumnGenerator {
+ public Component generateCell(Table source, Object itemId,
+ Object columnId) {
+ // Retrieve the item.
+ BeanItem item = (BeanItem) source.getItem(itemId);
+
+ // Retrieves the underlying POJO from the item.
+ FillUp fillup = (FillUp) item.getBean();
+
+ // Do the business logic
+ double price = fillup.price();
+
+ // Create the generated component for displaying the calcucated
+ // value.
+ Label label = new Label(String.format("%1.2f €",
+ new Object[] { new Double(price) }));
+
+ // We set the style here. You can't use a CellStyleGenerator for
+ // generated columns.
+ label.addStyleName("column-price");
+ return label;
+ }
+ }
+
+ /** Table column generator for calculating consumption column. */
+ class ConsumptionColumnGenerator implements Table.ColumnGenerator {
+ /**
+ * Generates a cell containing value calculated from the item.
+ */
+ public Component generateCell(Table source, Object itemId,
+ Object columnId) {
+ Indexed indexedSource = (Indexed) source.getContainerDataSource();
+
+ // Can not calculate consumption for the first item.
+ if (indexedSource.isFirstId(itemId)) {
+ Label label = new Label("N/A");
+ label.addStyleName("column-consumption");
+ return label;
+ }
+
+ // Index of the previous item.
+ Object prevItemId = indexedSource.prevItemId(itemId);
+
+ // Retrieve the POJOs.
+ FillUp fillup = (FillUp) ((BeanItem) indexedSource.getItem(itemId))
+ .getBean();
+ FillUp prev = (FillUp) ((BeanItem) source.getItem(prevItemId))
+ .getBean();
+
+ // Do the business logic
+ return generateCell(fillup, prev);
+ }
+
+ public Component generateCell(FillUp fillup, FillUp prev) {
+ double consumption = fillup.dailyConsumption(prev);
+
+ // Generate the component for displaying the calculated value.
+ Label label = new Label(String.format("%3.2f l",
+ new Object[] { new Double(consumption) }));
+
+ // We set the style here. You can't use a CellStyleGenerator for
+ // generated columns.
+ label.addStyleName("column-consumption");
+ return label;
+ }
+ }
+
+ /** Table column generator for calculating daily cost column. */
+ class DailyCostColumnGenerator extends ConsumptionColumnGenerator {
+ @Override
+ public Component generateCell(FillUp fillup, FillUp prev) {
+ double dailycost = fillup.dailyCost(prev);
+
+ // Generate the component for displaying the calculated value.
+ Label label = new Label(String.format("%3.2f €",
+ new Object[] { new Double(dailycost) }));
+
+ // We set the style here. You can't use a CellStyleGenerator for
+ // generated columns.
+ label.addStyleName("column-dailycost");
+ return label;
+ }
+ }
+
+ /**
+ * Custom field factory that sets the fields as immediate.
+ */
+ public class ImmediateFieldFactory extends BaseFieldFactory {
+ @Override
+ public Field createField(Class type, Component uiContext) {
+ // Let the BaseFieldFactory create the fields
+ Field field = super.createField(type, uiContext);
+
+ // ...and just set them as immediate
+ ((AbstractField) field).setImmediate(true);
+
+ return field;
+ }
+ }
+
+ public GeneratedColumnExample() {
+ final Table table = new Table();
+
+ // Define table columns. These include also the column for the generated
+ // column, because we want to set the column label to something
+ // different than the property ID.
+ table
+ .addContainerProperty("date", Date.class, null, "Date", null,
+ null);
+ table.addContainerProperty("quantity", Double.class, null,
+ "Quantity (l)", null, null);
+ table.addContainerProperty("price", Double.class, null, "Price (€/l)",
+ null, null);
+ table.addContainerProperty("total", Double.class, null, "Total (€)",
+ null, null);
+ table.addContainerProperty("consumption", Double.class, null,
+ "Consumption (l/day)", null, null);
+ table.addContainerProperty("dailycost", Double.class, null,
+ "Daily Cost (€/day)", null, null);
+
+ // Define the generated columns and their generators.
+ table.addGeneratedColumn("date", new DateColumnGenerator());
+ table
+ .addGeneratedColumn("quantity", new ValueColumnGenerator(
+ "%.2f l"));
+ table.addGeneratedColumn("price", new PriceColumnGenerator());
+ table.addGeneratedColumn("total", new ValueColumnGenerator("%.2f €"));
+ table.addGeneratedColumn("consumption",
+ new ConsumptionColumnGenerator());
+ table.addGeneratedColumn("dailycost", new DailyCostColumnGenerator());
+
+ // Create a data source and bind it to the table.
+ MySimpleIndexedContainer data = new MySimpleIndexedContainer(
+ new FillUp());
+ table.setContainerDataSource(data);
+
+ // Generated columns are automatically placed after property columns, so
+ // we have to set the order of the columns explicitly.
+ table.setVisibleColumns(new Object[] { "date", "quantity", "price",
+ "total", "consumption", "dailycost" });
+
+ // Add some data.
+ data.addItem(new BeanItem(new FillUp(19, 2, 2005, 44.96, 51.21)));
+ data.addItem(new BeanItem(new FillUp(30, 3, 2005, 44.91, 53.67)));
+ data.addItem(new BeanItem(new FillUp(20, 4, 2005, 42.96, 49.06)));
+ data.addItem(new BeanItem(new FillUp(23, 5, 2005, 47.37, 55.28)));
+ data.addItem(new BeanItem(new FillUp(6, 6, 2005, 35.34, 41.52)));
+ data.addItem(new BeanItem(new FillUp(30, 6, 2005, 16.07, 20.00)));
+ data.addItem(new BeanItem(new FillUp(2, 7, 2005, 36.40, 36.19)));
+ data.addItem(new BeanItem(new FillUp(6, 7, 2005, 39.17, 50.90)));
+ data.addItem(new BeanItem(new FillUp(27, 7, 2005, 43.43, 53.03)));
+ data.addItem(new BeanItem(new FillUp(17, 8, 2005, 20, 29.18)));
+ data.addItem(new BeanItem(new FillUp(30, 8, 2005, 46.06, 59.09)));
+ data.addItem(new BeanItem(new FillUp(22, 9, 2005, 46.11, 60.36)));
+ data.addItem(new BeanItem(new FillUp(14, 10, 2005, 41.51, 50.19)));
+ data.addItem(new BeanItem(new FillUp(12, 11, 2005, 35.24, 40.00)));
+ data.addItem(new BeanItem(new FillUp(28, 11, 2005, 45.26, 53.27)));
+
+ // Have a check box that allows the user to make the quantity
+ // and total columns editable.
+ final CheckBox editable = new CheckBox(
+ "Edit the input values - calculated columns are regenerated");
+ editable.setImmediate(true);
+ editable.addListener(new ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ table.setEditable(editable.booleanValue());
+
+ // The columns may not be generated when we want to have them
+ // editable.
+ if (editable.booleanValue()) {
+ table.removeGeneratedColumn("quantity");
+ table.removeGeneratedColumn("total");
+ } else {
+ // In non-editable mode we want to show the formatted
+ // values.
+ table.addGeneratedColumn("quantity",
+ new ValueColumnGenerator("%.2f l"));
+ table.addGeneratedColumn("total", new ValueColumnGenerator(
+ "%.2f €"));
+ }
+ // The visible columns are affected by removal and addition of
+ // generated columns so we have to redefine them.
+ table.setVisibleColumns(new Object[] { "date", "quantity",
+ "price", "total", "consumption", "dailycost" });
+ }
+ });
+
+ // Use a custom field factory to set the edit fields as immediate.
+ // This is used when the table is in editable mode.
+ table.setFieldFactory(new ImmediateFieldFactory());
+
+ // Setting the table itself as immediate has no relevance in this
+ // example,
+ // because it is relevant only if the table is selectable and we want to
+ // get the selection changes immediately.
+ table.setImmediate(true);
+
+ table.setHeight("300px");
+
+ VerticalLayout layout = new VerticalLayout();
+ layout.setMargin(true);
+ layout
+ .addComponent(new Label(
+ "Table with column generators that format and calculate cell values."));
+ layout.addComponent(table);
+ layout.addComponent(editable);
+ layout.addComponent(new Label(
+ "Columns displayed in blue are calculated from Quantity and Total. "
+ + "Others are simply formatted."));
+ layout.setExpandRatio(table, 1);
+ layout.setSizeUndefined();
+ setCompositionRoot(layout);
+ // setSizeFull();
+ }
+}
import com.itmill.toolkit.ui.Button;\r
import com.itmill.toolkit.ui.CustomComponent;\r
import com.itmill.toolkit.ui.Label;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
import com.itmill.toolkit.ui.TextField;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
import com.itmill.toolkit.ui.Button.ClickEvent;\r
\r
/**\r
*/\r
public class JavaScriptAPIExample extends CustomComponent {\r
\r
- public static final String txt = "(more examples will be added here as the APIs are made public)<br/><br/><A href=\"javascript:itmill.forceSync();\">javascript:itmill.forceSync();</A>";\r
+ public static final String txt = "<p>For advanced client side programmers Toolkit offers a simple method which can be used to force sync client with server. This may be needed for example if another part of a mashup changes things on server.</p> (more examples will be added here as the APIs are made public)<br/><br/><A href=\"javascript:itmill.forceSync();\">javascript:itmill.forceSync();</A>";\r
\r
- private final OrderedLayout main;\r
+ private final VerticalLayout main;\r
private final Label l;\r
private final TextField editor = new TextField();\r
\r
public JavaScriptAPIExample() {\r
// main layout\r
- main = new OrderedLayout();\r
+ main = new VerticalLayout();\r
main.setMargin(true);\r
setCompositionRoot(main);\r
editor.setRows(7);\r
}\r
});\r
main.addComponent(b);\r
- main.setComponentAlignment(b, OrderedLayout.ALIGNMENT_RIGHT,\r
- OrderedLayout.ALIGNMENT_VERTICAL_CENTER);\r
+ main.setComponentAlignment(b, VerticalLayout.ALIGNMENT_RIGHT,\r
+ VerticalLayout.ALIGNMENT_VERTICAL_CENTER);\r
\r
// \r
Label l = new Label(\r
+ "The client will be synchronized on reload, when you click a button, "\r
+ "or when itmill.forceSync() is called.") {\r
\r
+ @Override\r
public void paintContent(PaintTarget target) throws PaintException {\r
\r
super.paintContent(target);\r
label = l;\r
}\r
\r
+ @Override\r
public void run() {\r
try {\r
Thread.sleep(500);\r
import com.itmill.toolkit.ui.CustomComponent;\r
import com.itmill.toolkit.ui.GridLayout;\r
import com.itmill.toolkit.ui.Label;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
import com.itmill.toolkit.ui.Panel;\r
\r
/**\r
+ " This is an indented row. \n Same indentation here.";\r
\r
public LabelExample() {\r
-\r
- final OrderedLayout main = new OrderedLayout();\r
- main.setMargin(true);\r
- setCompositionRoot(main);\r
-\r
final GridLayout g = new GridLayout(2, 4);\r
- main.addComponent(g);\r
+ g.setMargin(true);\r
+ setCompositionRoot(g);\r
+ g.setWidth("100%");\r
\r
// plain w/o caption\r
- Panel p = new Panel("Plain");\r
- p.setDebugId(p.getCaption());\r
- p.setStyleName(Panel.STYLE_LIGHT);\r
+ Panel p = getExpamplePanel("Plain");\r
Label l = new Label("A plain label without caption.");\r
l.setDebugId("label1");\r
p.addComponent(l);\r
g.addComponent(p);\r
// plain w/ caption\r
- p = new Panel("Plain w/ caption + tooltip");\r
- p.setDebugId(p.getCaption());\r
- p.setStyleName(Panel.STYLE_LIGHT);\r
+ p = getExpamplePanel("Plain w/ caption + tooltip");\r
l = new Label("A plain label with caption.");\r
l.setCaption("Label caption");\r
l.setDebugId("label2");\r
p.addComponent(l);\r
g.addComponent(p);\r
// plain w/ xhtml\r
- p = new Panel("Plain w/ XHTML content");\r
- p.setDebugId(p.getCaption());\r
- p.setStyleName(Panel.STYLE_LIGHT);\r
+ p = getExpamplePanel("Plain w/ XHTML content");\r
l = new Label(xhtml);\r
l.setDebugId("label3");\r
p.addComponent(l);\r
g.addComponent(p);\r
// xhtml w/ xhtml\r
- p = new Panel("XHTML-mode w/ XHTML content");\r
- p.setDebugId(p.getCaption());\r
- p.setStyleName(Panel.STYLE_LIGHT);\r
+ p = getExpamplePanel("XHTML-mode w/ XHTML content");\r
l = new Label(xhtml);\r
l.setDebugId("label4");\r
l.setContentMode(Label.CONTENT_XHTML);\r
p.addComponent(l);\r
g.addComponent(p);\r
// plain w/ preformatted\r
- p = new Panel("Plain w/ preformatted content");\r
- p.setDebugId(p.getCaption());\r
- p.setStyleName(Panel.STYLE_LIGHT);\r
+ p = getExpamplePanel("Plain w/ preformatted content");\r
l = new Label(pre);\r
l.setDebugId("label5");\r
p.addComponent(l);\r
g.addComponent(p);\r
// preformatted w/ preformatted\r
- p = new Panel("Preformatted-mode w/ preformatted content");\r
- p.setDebugId(p.getCaption());\r
- p.setStyleName(Panel.STYLE_LIGHT);\r
+ p = getExpamplePanel("Preformatted-mode w/ preformatted content");\r
l = new Label(pre);\r
l.setDebugId("label6");\r
l.setContentMode(Label.CONTENT_PREFORMATTED);\r
g.addComponent(p);\r
\r
}\r
+\r
+ private Panel getExpamplePanel(String caption) {\r
+ Panel p = new Panel(caption);\r
+ p.setDebugId(p.getCaption());\r
+ p.addStyleName(Panel.STYLE_LIGHT);\r
+ return p;\r
+ }\r
}\r
\r
import com.itmill.toolkit.ui.CustomComponent;\r
import com.itmill.toolkit.ui.GridLayout;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
import com.itmill.toolkit.ui.Label;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
import com.itmill.toolkit.ui.Panel;\r
import com.itmill.toolkit.ui.TabSheet;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
\r
/**\r
* A few examples of layout possibilities.\r
\r
public LayoutExample() {\r
\r
- final OrderedLayout main = new OrderedLayout();\r
+ final VerticalLayout main = new VerticalLayout();\r
main.setMargin(true);\r
setCompositionRoot(main);\r
\r
final GridLayout g = new GridLayout(2, 5);\r
+ g.setWidth("100%");\r
main.addComponent(g);\r
\r
// panel\r
TabSheet ts = new TabSheet();\r
g.addComponent(ts, 0, 1, 1, 1);\r
\r
- OrderedLayout ol = new OrderedLayout();\r
+ VerticalLayout ol = new VerticalLayout();\r
ol.setDebugId("VerticalOrderedLayout");\r
ol.setMargin(true);\r
ol.addComponent(new Label("Component 1"));\r
ol.addComponent(new Label("Component 3"));\r
ts.addTab(ol, "Vertical OrderedLayout", null);\r
\r
- ol = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);\r
- ol.setDebugId("HorizontalOrderedLayout");\r
- ol.setMargin(true);\r
- ol.addComponent(new Label("Component 1"));\r
- ol.addComponent(new Label("Component 2"));\r
- ol.addComponent(new Label("Component 3"));\r
- ts.addTab(ol, "Horizontal OrderedLayout", null);\r
+ HorizontalLayout hl = new HorizontalLayout();\r
+ hl.setDebugId("HorizontalOrderedLayout");\r
+ hl.setMargin(true);\r
+ hl.addComponent(new Label("Component 1"));\r
+ hl.addComponent(new Label("Component 2"));\r
+ hl.addComponent(new Label("Component 3"));\r
+ ts.addTab(hl, "Horizontal OrderedLayout", null);\r
\r
final GridLayout gl = new GridLayout(3, 3);\r
gl.setDebugId("GridLayout");\r
package com.itmill.toolkit.automatedtests.featurebrowser;
-import java.util.Date;
-
import com.itmill.toolkit.data.Item;
import com.itmill.toolkit.ui.AbstractSelect;
import com.itmill.toolkit.ui.Button;
import com.itmill.toolkit.ui.CustomComponent;
import com.itmill.toolkit.ui.NativeSelect;
-import com.itmill.toolkit.ui.OrderedLayout;
import com.itmill.toolkit.ui.RichTextArea;
import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.VerticalLayout;
import com.itmill.toolkit.ui.Window;
import com.itmill.toolkit.ui.Button.ClickEvent;
import com.itmill.toolkit.ui.Button.ClickListener;
*/
public NotificationExample() {
// Main layout
- final OrderedLayout main = new OrderedLayout();
+ final VerticalLayout main = new VerticalLayout();
+ main.setSizeUndefined();
+ main.setSpacing(true);
main.setMargin(true); // use theme-specific margin
setCompositionRoot(main);
getWindow().showNotification((String) caption.getValue(),
(String) message.getValue(),
((Integer) type.getValue()).intValue());
- getWindow().setCaption(new Date().toString());
}
});
main.addComponent(b);
- main.setComponentAlignment(b, OrderedLayout.ALIGNMENT_RIGHT,
- OrderedLayout.ALIGNMENT_VERTICAL_CENTER);
+ main.setComponentAlignment(b, VerticalLayout.ALIGNMENT_RIGHT,
+ VerticalLayout.ALIGNMENT_VERTICAL_CENTER);
}
}
import com.itmill.toolkit.ui.Button;\r
import com.itmill.toolkit.ui.CustomComponent;\r
import com.itmill.toolkit.ui.Label;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
import com.itmill.toolkit.ui.RichTextArea;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
import com.itmill.toolkit.ui.Button.ClickEvent;\r
\r
/**\r
+ "See the <A href=\"http://www.itmill.com/documentation/itmill-toolkit-5-reference-manual/\">manual</a> "\r
+ "for more information.";\r
\r
- private final OrderedLayout main;\r
+ private final VerticalLayout main;\r
private final Label l;\r
private final RichTextArea editor = new RichTextArea();\r
private final Button b;\r
\r
public RichTextExample() {\r
// main layout\r
- main = new OrderedLayout();\r
+ main = new VerticalLayout();\r
main.setMargin(true);\r
setCompositionRoot(main);\r
+\r
+ editor.setWidth("100%");\r
+\r
// Add the label\r
l = new Label(txt);\r
l.setContentMode(Label.CONTENT_XHTML);\r
}\r
});\r
main.addComponent(b);\r
- main.setComponentAlignment(b, OrderedLayout.ALIGNMENT_RIGHT,\r
- OrderedLayout.ALIGNMENT_VERTICAL_CENTER);\r
+ main.setComponentAlignment(b, VerticalLayout.ALIGNMENT_RIGHT,\r
+ VerticalLayout.ALIGNMENT_VERTICAL_CENTER);\r
}\r
\r
}\r
import com.itmill.toolkit.ui.ComboBox;\r
import com.itmill.toolkit.ui.CustomComponent;\r
import com.itmill.toolkit.ui.Field;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
import com.itmill.toolkit.ui.ListSelect;\r
import com.itmill.toolkit.ui.NativeSelect;\r
import com.itmill.toolkit.ui.OptionGroup;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
import com.itmill.toolkit.ui.Panel;\r
import com.itmill.toolkit.ui.TwinColSelect;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
\r
/**\r
* Shows some basic fields for value input; TextField, DateField, Slider...\r
};\r
\r
public SelectExample() {\r
- final OrderedLayout main = new OrderedLayout();\r
+ final VerticalLayout main = new VerticalLayout();\r
main.setMargin(true);\r
setCompositionRoot(main);\r
\r
- final OrderedLayout horiz = new OrderedLayout(\r
- OrderedLayout.ORIENTATION_HORIZONTAL);\r
+ final HorizontalLayout horiz = new HorizontalLayout();\r
+ horiz.setWidth("100%");\r
main.addComponent(horiz);\r
final Panel single = new Panel("Single selects");\r
single.setStyleName(Panel.STYLE_LIGHT);\r
package com.itmill.toolkit.automatedtests.featurebrowser;\r
\r
import java.util.Iterator;\r
-import java.util.LinkedList;\r
-import java.util.List;\r
import java.util.Random;\r
import java.util.Set;\r
\r
import com.itmill.toolkit.ui.Button;\r
import com.itmill.toolkit.ui.CheckBox;\r
import com.itmill.toolkit.ui.CustomComponent;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
+import com.itmill.toolkit.ui.TabSheet;\r
import com.itmill.toolkit.ui.Table;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
import com.itmill.toolkit.ui.Button.ClickEvent;\r
\r
/**\r
Button deselect;\r
\r
public TableExample() {\r
+ VerticalLayout margin = new VerticalLayout();\r
+ margin.setMargin(true);\r
+\r
+ TabSheet root = new TabSheet();\r
+ setCompositionRoot(margin);\r
+ margin.addComponent(root);\r
+\r
// main layout\r
- final OrderedLayout main = new OrderedLayout();\r
+ final VerticalLayout main = new VerticalLayout();\r
+ root.addComponent(main);\r
+ main.setCaption("Basic Table");\r
main.setMargin(true);\r
- setCompositionRoot(main);\r
\r
// "source" table with bells & whistlesenabled\r
source = new Table("All creatures");\r
source.setPageLength(7);\r
- source.setWidth(550);\r
+ source.setWidth("550px");\r
source.setColumnCollapsingAllowed(true);\r
source.setColumnReorderingAllowed(true);\r
source.setSelectable(true);\r
source.setDebugId("AllCreatures");\r
\r
// x-selected button row\r
- final OrderedLayout horiz = new OrderedLayout(\r
- OrderedLayout.ORIENTATION_HORIZONTAL);\r
+ final HorizontalLayout horiz = new HorizontalLayout();\r
+\r
horiz.setMargin(false, false, true, false);\r
main.addComponent(horiz);\r
saveSelected = new Button("Save selected");\r
// "saved" table, minimalistic\r
saved = new Table("Saved creatures");\r
saved.setPageLength(5);\r
- saved.setWidth(550);\r
+ saved.setWidth("550px");\r
saved.setSelectable(false);\r
saved.setColumnHeaderMode(Table.COLUMN_HEADER_MODE_HIDDEN);\r
saved.setRowHeaderMode(Table.ROW_HEADER_MODE_ID);\r
b.setImmediate(true);\r
main.addComponent(b);\r
\r
+ GeneratedColumnExample gencols = new GeneratedColumnExample();\r
+ gencols.setCaption("Generated Columns");\r
+ root.addComponent(gencols);\r
}\r
\r
// set up the properties (columns)\r
if (action == ACTION_HIRE) {\r
// set HIRED property to true\r
item.getItemProperty(PROPERTY_HIRED).setValue(Boolean.TRUE);\r
- source.requestRepaint();\r
if (saved.containsId(target)) {\r
item = saved.getItem(target);\r
item.getItemProperty(PROPERTY_HIRED).setValue(Boolean.TRUE);\r
- saved.requestRepaint();\r
}\r
getWindow().showNotification("Hired", "" + item);\r
\r
// loop each selected and copy to "saved" table\r
final Set selected = (Set) source.getValue();\r
int s = 0;\r
-\r
- // The set can return the items in quite any order, but\r
- // for testing purposes they always have to be in the\r
- // same order.\r
- List ordered = new LinkedList(selected);\r
- java.util.Collections.sort(ordered);\r
-\r
- // Now move the items to the other table\r
- for (final Iterator it = ordered.iterator(); it.hasNext();) {\r
+ for (final Iterator it = selected.iterator(); it.hasNext();) {\r
final Object id = it.next();\r
if (!saved.containsId(id)) {\r
final Item item = source.getItem(id);\r
}\r
}\r
getWindow().showNotification("Saved " + s);\r
- saved.requestRepaint();\r
\r
} else if (b == hireSelected) {\r
// loop each selected and set property HIRED to true\r
final Property p = item.getItemProperty(PROPERTY_HIRED);\r
if (p.getValue() == Boolean.FALSE) {\r
p.setValue(Boolean.TRUE);\r
- source.requestRepaint();\r
s++;\r
}\r
if (saved.containsId(id)) {\r
// also update "saved" table\r
item = saved.getItem(id);\r
item.getItemProperty(PROPERTY_HIRED).setValue(Boolean.TRUE);\r
- saved.requestRepaint();\r
}\r
}\r
getWindow().showNotification("Hired " + s);\r
if (source.containsId(id)) {\r
s++;\r
source.removeItem(id);\r
- source.requestRepaint();\r
}\r
}\r
getWindow().showNotification("Deleted " + s);\r
import com.itmill.toolkit.event.Action;
import com.itmill.toolkit.ui.AbstractSelect;
import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.HorizontalLayout;
import com.itmill.toolkit.ui.Label;
-import com.itmill.toolkit.ui.OrderedLayout;
import com.itmill.toolkit.ui.Panel;
import com.itmill.toolkit.ui.TextField;
import com.itmill.toolkit.ui.Tree;
TextField editor;
public TreeExample() {
- final OrderedLayout main = new OrderedLayout(
- OrderedLayout.ORIENTATION_HORIZONTAL);
+ final HorizontalLayout main = new HorizontalLayout();
+ main.setWidth("100%");
main.setDebugId("mainLayout");
main.setMargin(true);
setCompositionRoot(main);
// Panel w/ Tree
Panel p = new Panel("Select item");
p.setStyleName(Panel.STYLE_LIGHT);
- p.setWidth(250);
+ p.setWidth("250px");
// Description
p.addComponent(new Label(desc));
// Tree with a few items
editor.setColumns(15);
p.addComponent(editor);
main.addComponent(p);
+ main.setExpandRatio(p, 1);
}
public Action[] getActions(Object target, Object sender) {
final Property p = item.getItemProperty(CAPTION_PROPERTY);
p.setValue(caption);
if (parent != null) {
+ tree.setChildrenAllowed(parent, true);
tree.setParent(id, parent);
+ tree.setChildrenAllowed(id, false);
}
return id;
}
import com.itmill.toolkit.ui.CustomComponent;\r
import com.itmill.toolkit.ui.DateField;\r
import com.itmill.toolkit.ui.Field;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
import com.itmill.toolkit.ui.InlineDateField;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
import com.itmill.toolkit.ui.Panel;\r
import com.itmill.toolkit.ui.Slider;\r
import com.itmill.toolkit.ui.TextField;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
import com.itmill.toolkit.ui.Window.Notification;\r
\r
/**\r
public class ValueInputExample extends CustomComponent {\r
\r
public ValueInputExample() {\r
- final OrderedLayout main = new OrderedLayout();\r
+ final VerticalLayout main = new VerticalLayout();\r
main.setMargin(true);\r
setCompositionRoot(main);\r
\r
};\r
\r
// TextField\r
- OrderedLayout horiz = new OrderedLayout(\r
- OrderedLayout.ORIENTATION_HORIZONTAL);\r
+ HorizontalLayout horiz = new HorizontalLayout();\r
+ horiz.setWidth("100%");\r
main.addComponent(horiz);\r
Panel left = new Panel("TextField");\r
left.setStyleName(Panel.STYLE_LIGHT);\r
right.addComponent(tf);\r
\r
// DateFields\r
-\r
Date d = new Date(98, 1, 22, 13, 14, 15);\r
-\r
- horiz = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);\r
+ horiz = new HorizontalLayout();\r
+ horiz.setWidth("100%");\r
main.addComponent(horiz);\r
left = new Panel("DateField");\r
left.setStyleName(Panel.STYLE_LIGHT);\r
// int slider\r
Slider slider = new Slider(0, 100);\r
slider.setDebugId("Slider1");\r
- slider.setSize(300);\r
+ slider.setWidth("300px");\r
slider.setImmediate(true);\r
slider.addListener(new Slider.ValueChangeListener() {\r
public void valueChange(ValueChangeEvent event) {\r
left.addComponent(slider);\r
// double slider\r
slider = new Slider(0.0, 1.0, 1);\r
+ slider.setOrientation(Slider.ORIENTATION_VERTICAL);\r
slider.setDebugId("Slider2");\r
slider.setImmediate(true);\r
slider.addListener(new Slider.ValueChangeListener() {\r
import com.itmill.toolkit.ui.Button;\r
import com.itmill.toolkit.ui.CustomComponent;\r
import com.itmill.toolkit.ui.Label;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
import com.itmill.toolkit.ui.Window;\r
import com.itmill.toolkit.ui.Button.ClickEvent;\r
\r
*/\r
public class WindowingExample extends CustomComponent {\r
\r
- public static final String txt = "<p>There are two main types of windows: application-level windows, and"\r
- + "\"subwindows\". </p><p> A subwindow is rendered as a \"inline\" popup window"\r
+ public static final String txt = "<p>There are two main types of windows: application-level windows, and "\r
+ + "\"sub windows\".</p><p>A sub window is rendered as a \"inline\" popup window"\r
+ " within the (native) browser window to which it was added. You can create"\r
- + " a subwindow by creating a new Window and adding it to a application-level window, for instance"\r
+ + " a sub window by creating a new Window and adding it to a application-level window, for instance"\r
+ " your main window. </p><p> In contrast, you create a application-level window by"\r
+ " creating a new Window and adding it to the Application. Application-level"\r
+ " windows are not shown by default - you need to open a browser window for"\r
+ " the url representing the window. You can think of the application-level"\r
+ " windows as separate views into your application - and a way to create a"\r
- + " \"native\" browser window. </p><p> Depending on your needs, it's also"\r
+ + " \"native\" browser window.</p><p>Depending on your needs, it's also"\r
+ " possible to create a new window instance (with it's own internal state)"\r
+ " for each new (native) browser window, or you can share the same instance"\r
+ " (and state) between several browser windows (the latter is most useful"\r
private URL windowUrl = null;\r
\r
public WindowingExample() {\r
- final OrderedLayout main = new OrderedLayout();\r
+ final VerticalLayout main = new VerticalLayout();\r
main.setMargin(true);\r
setCompositionRoot(main);\r
\r
l.setContentMode(Label.CONTENT_XHTML);\r
main.addComponent(l);\r
\r
- main.addComponent(new Button("Create a new subwindow",\r
+ Button b = new Button("Create a new subwindow",\r
new Button.ClickListener() {\r
public void buttonClick(ClickEvent event) {\r
final Window w = new Window("Subwindow");\r
+ w.setWidth("50%");\r
final Label l = new Label(txt);\r
l.setContentMode(Label.CONTENT_XHTML);\r
w.addComponent(l);\r
getApplication().getMainWindow().addWindow(w);\r
}\r
- }));\r
- main.addComponent(new Button("Create a new modal window",\r
- new Button.ClickListener() {\r
- public void buttonClick(ClickEvent event) {\r
- final Window w = new Window("Modal window");\r
- w.setModal(true);\r
- final Label l = new Label(txt);\r
- l.setContentMode(Label.CONTENT_XHTML);\r
- w.addComponent(l);\r
- getApplication().getMainWindow().addWindow(w);\r
- }\r
- }));\r
- main.addComponent(new Button(\r
- "Open a application-level window, with shared state",\r
+ });\r
+ b.setStyleName(Button.STYLE_LINK);\r
+ main.addComponent(b);\r
+ b = new Button("Create a new modal window", new Button.ClickListener() {\r
+ public void buttonClick(ClickEvent event) {\r
+ final Window w = new Window("Modal window");\r
+ w.setWidth("50%");\r
+ w.setModal(true);\r
+ final Label l = new Label(txt);\r
+ l.setContentMode(Label.CONTENT_XHTML);\r
+ w.addComponent(l);\r
+ getApplication().getMainWindow().addWindow(w);\r
+ }\r
+ });\r
+ b.setStyleName(Button.STYLE_LINK);\r
+ main.addComponent(b);\r
+ b = new Button("Open a application-level window, with shared state",\r
new Button.ClickListener() {\r
public void buttonClick(ClickEvent event) {\r
if (windowUrl == null) {\r
getApplication().getMainWindow().open(\r
new ExternalResource(windowUrl), "_new");\r
}\r
- }));\r
- main.addComponent(new Button(\r
+ });\r
+ b.setStyleName(Button.STYLE_LINK);\r
+ main.addComponent(b);\r
+ b = new Button(\r
"Create a new application-level window, with it's own state",\r
new Button.ClickListener() {\r
public void buttonClick(ClickEvent event) {\r
getApplication().getMainWindow().open(\r
new ExternalResource(w.getURL()), "_new");\r
}\r
- }));\r
+ });\r
+ b.setStyleName(Button.STYLE_LINK);\r
+ main.addComponent(b);\r
\r
}\r
\r