import com.itmill.toolkit.demo.sampler.features.link.LinkCurrentWindow;
import com.itmill.toolkit.demo.sampler.features.link.LinkNoDecorations;
import com.itmill.toolkit.demo.sampler.features.link.LinkSizedWindow;
+import com.itmill.toolkit.demo.sampler.features.notifications.NotificationCustom;
+import com.itmill.toolkit.demo.sampler.features.notifications.NotificationError;
+import com.itmill.toolkit.demo.sampler.features.notifications.NotificationHumanized;
+import com.itmill.toolkit.demo.sampler.features.notifications.NotificationTray;
+import com.itmill.toolkit.demo.sampler.features.notifications.NotificationWarning;
import com.itmill.toolkit.terminal.ClassResource;
import com.itmill.toolkit.terminal.DownloadStream;
import com.itmill.toolkit.terminal.ExternalResource;
}),
+ new FeatureSet("Notifications", new Feature[] {
+ new NotificationHumanized(), // humanized
+ new NotificationWarning(), // warning
+ new NotificationTray(), // tray
+ new NotificationError(), // error
+ new NotificationCustom(), // error
+ }),
+
}),
new FeatureSet("Unsorted", new Feature[] {
if (f instanceof FeatureSet) {
newRow();
Label title = new Label(f.getName());
- title.setWidth("100%");
- title
- .setStyleName((c.isRoot(f) ? "section"
- : "subsection"));
-
if (c.isRoot(f)) {
- // newRow();
+ title.setWidth("100%");
+ title.setStyleName("section");
addComponent(title, 0, getCursorY(), getColumns() - 1,
getCursorY());
} else {
+ title.setStyleName("subsection");
addComponent(title);
}
setComponentAlignment(title, ALIGNMENT_LEFT,
ALIGNMENT_VERTICAL_CENTER);
} else {
+ if (getCursorX() == 0) {
+ space();
+ }
Button b = new Button();
b.setStyleName(Button.STYLE_LINK);
b.addStyleName("screenshot");
*/
public void buttonClick(ClickEvent event) {
getWindow().showNotification(
- event.getButton().getCaption() + " clicked");
+ "\"" + event.getButton().getCaption() + "\" clicked");
}
}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.demo.sampler.APIResource;
+import com.itmill.toolkit.demo.sampler.Feature;
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;
+import com.itmill.toolkit.ui.Window;
+
+public class NotificationCustom extends Feature {
+
+ @Override
+ public String getDescription() {
+ return "Notifications are lightweight informational messages,"
+ + " used to inform the user of various events.<br/>"
+ + "The notification can have a caption, a richtext"
+ + " description, and an icon. Position and delay can"
+ + " also be customized.<br/> Not that more often than"
+ + " not, less is more: try to make the messages short"
+ + " and to the point.";
+ }
+
+ @Override
+ public APIResource[] getRelatedAPI() {
+ return new APIResource[] { new APIResource(Window.class),
+ new APIResource(Window.Notification.class) };
+ }
+
+ @Override
+ public Class[] getRelatedFeatures() {
+ return new Class[] { NotificationHumanized.class,
+ NotificationWarning.class, NotificationError.class,
+ NotificationTray.class };
+ }
+
+ @Override
+ public NamedExternalResource[] getRelatedResources() {
+ return new NamedExternalResource[] { new NamedExternalResource(
+ "Monolog Boxes and Transparent Messages",
+ "http://humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages/") };
+
+ }
+
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.data.Item;
+import com.itmill.toolkit.data.Property;
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.NativeSelect;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.RichTextArea;
+import com.itmill.toolkit.ui.Slider;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+import com.itmill.toolkit.ui.Window.Notification;
+
+public class NotificationCustomExample extends OrderedLayout {
+
+ private static final Object CAPTION_PROPERTY = new Object();
+
+ public NotificationCustomExample() {
+ setSpacing(true);
+
+ final TextField caption = new TextField("Caption");
+ caption
+ .setDescription("Main info; a short caption-only notification is often most effective.");
+ caption.setWidth("200px");
+ addComponent(caption);
+
+ final RichTextArea description = new RichTextArea();
+ description.setCaption("Description");
+ description.setWidth("400px");
+ description
+ .setDescription("Additional information; try to keep it short.");
+ addComponent(description);
+
+ OrderedLayout horiz = new OrderedLayout(
+ OrderedLayout.ORIENTATION_HORIZONTAL);
+ horiz.setSpacing(true);
+ addComponent(horiz);
+
+ final NativeSelect position = new NativeSelect("Position");
+ position.setNullSelectionAllowed(false);
+ horiz.addComponent(position);
+ initPositionItems(position);
+
+ final NativeSelect style = new NativeSelect("Style");
+ position.setNullSelectionAllowed(false);
+ horiz.addComponent(style);
+ initTypeItems(style);
+
+ final Slider delay = new Slider("Delay (msec), -1 means click to hide");
+ delay
+ .setDescription("Delay before fading<br/>Pull all the way to the left to get -1, which means forever (click to hide).");
+ delay.setWidth("400px");
+ delay.setHeight("20px");
+ delay.setMin(Notification.DELAY_FOREVER);
+ delay.setMax(10000);
+ addComponent(delay);
+
+ // TODO icon select
+
+ Button show = new Button("Show notification",
+ new Button.ClickListener() {
+ // "Inline" click listener; this is where the
+ // notification is actually created and shown.
+ public void buttonClick(ClickEvent event) {
+ // create Notification instance and customize
+ Notification n = new Notification((String) caption
+ .getValue(), (String) description.getValue(),
+ (Integer) style.getValue());
+ n.setPosition((Integer) position.getValue());
+ Double d = (Double) delay.getValue();
+ n.setDelayMsec(d.intValue()); // sec->msec
+ getWindow().showNotification(n);
+ }
+ });
+ addComponent(show);
+ setComponentAlignment(show, ALIGNMENT_RIGHT, ALIGNMENT_VERTICAL_CENTER);
+
+ }
+
+ /*
+ * Helper to fill the position select with the various possibilities
+ */
+ private void initPositionItems(NativeSelect position) {
+ position.addContainerProperty(CAPTION_PROPERTY, String.class, null);
+ position.setItemCaptionPropertyId(CAPTION_PROPERTY);
+ Item i = position.addItem(Notification.POSITION_TOP_LEFT);
+ Property c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Top left");
+ i = position.addItem(Notification.POSITION_CENTERED_TOP);
+ c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Top centered");
+ i = position.addItem(Notification.POSITION_TOP_RIGHT);
+ c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Top right");
+ i = position.addItem(Notification.POSITION_CENTERED);
+ c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Centered");
+ i = position.addItem(Notification.POSITION_BOTTOM_LEFT);
+ c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Bottom left");
+ i = position.addItem(Notification.POSITION_CENTERED_BOTTOM);
+ c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Bottom, centered");
+ i = position.addItem(Notification.POSITION_BOTTOM_RIGHT);
+ c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Bottom right");
+ position.setValue(Notification.POSITION_CENTERED);
+ }
+
+ /*
+ * Helper to fill the position select with the various possibilities
+ */
+ private void initTypeItems(NativeSelect type) {
+ type.addContainerProperty(CAPTION_PROPERTY, String.class, null);
+ type.setItemCaptionPropertyId(CAPTION_PROPERTY);
+ Item i = type.addItem(Notification.TYPE_HUMANIZED_MESSAGE);
+ Property c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Humanized");
+ i = type.addItem(Notification.TYPE_WARNING_MESSAGE);
+ c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Warning");
+ i = type.addItem(Notification.TYPE_ERROR_MESSAGE);
+ c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Error");
+ i = type.addItem(Notification.TYPE_TRAY_NOTIFICATION);
+ c = i.getItemProperty(CAPTION_PROPERTY);
+ c.setValue("Tray");
+
+ type.setValue(Notification.TYPE_HUMANIZED_MESSAGE);
+ }
+
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.demo.sampler.APIResource;
+import com.itmill.toolkit.demo.sampler.Feature;
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;
+import com.itmill.toolkit.ui.Window;
+
+public class NotificationError extends Feature {
+
+ @Override
+ public String getDescription() {
+ return "Notifications are lightweight informational messages,"
+ + " used to inform the user of various events. The"
+ + " <i>Error</i> variant is modal, and is to be used for"
+ + " messages that must be seen by the user.<br/>"
+ + " The <i>Error</i> message must be closed by clicking"
+ + " the notification.<br/> Candidates for an"
+ + " <i>Error</i> notification include 'Save failed',"
+ + " 'Permission denied', and other situations that the"
+ + " user must be made aware of.<br/>It's a good idea to"
+ + " provide hints about what went wrong, and how the user'"
+ + " can proceed to correct the situation.";
+ }
+
+ @Override
+ public APIResource[] getRelatedAPI() {
+ return new APIResource[] { new APIResource(Window.class),
+ new APIResource(Window.Notification.class) };
+ }
+
+ @Override
+ public Class[] getRelatedFeatures() {
+ return new Class[] { NotificationHumanized.class,
+ NotificationWarning.class, NotificationTray.class };
+ }
+
+ @Override
+ public NamedExternalResource[] getRelatedResources() {
+ return null;
+ }
+
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+import com.itmill.toolkit.ui.Window.Notification;
+
+public class NotificationErrorExample extends OrderedLayout {
+
+ public NotificationErrorExample() {
+ setSpacing(true);
+
+ final TextField caption = new TextField("Caption", "Upload failed");
+ caption.setWidth("200px");
+ addComponent(caption);
+
+ final TextField description = new TextField(
+ "Description",
+ "Invoices-2008.csv could not be read.<br/>"
+ + "Perhaps the file is damaged, or in the wrong format?<br/>"
+ + "Try re-exporting and uploading the file again.");
+ description.setWidth("300px");
+ addComponent(description);
+
+ Button show = new Button("Show notification",
+ new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ getWindow().showNotification(
+ (String) caption.getValue(),
+ (String) description.getValue(),
+ Notification.TYPE_ERROR_MESSAGE);
+
+ }
+ });
+ addComponent(show);
+ setComponentAlignment(show, ALIGNMENT_RIGHT, ALIGNMENT_VERTICAL_CENTER);
+
+ }
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.demo.sampler.APIResource;
+import com.itmill.toolkit.demo.sampler.Feature;
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;
+import com.itmill.toolkit.ui.Window;
+
+public class NotificationHumanized extends Feature {
+
+ @Override
+ public String getDescription() {
+ return "Notifications are lightweight informational messages,"
+ + " used to inform the user of various events. The"
+ + " <i>Humanized</i> variant is an implementation of"
+ + " the <i>transparent message</i> -pattern, and is meant"
+ + " to indicate non-critical events while interrupting"
+ + " the user as little as possible.<br/>"
+ + "The <i>Humanized</i> message quickly fades away once"
+ + " the user interacts with the application (e.g. moves"
+ + " mouse, types)<br/> Candidates for a"
+ + " <i>Humanized</i> notification include 'XYZ saved',"
+ + " 'Added XYZ', and other messages that the user can"
+ + " safely ignore, once the application is familliar.";
+ }
+
+ @Override
+ public APIResource[] getRelatedAPI() {
+ return new APIResource[] { new APIResource(Window.class),
+ new APIResource(Window.Notification.class) };
+ }
+
+ @Override
+ public Class[] getRelatedFeatures() {
+ return new Class[] { NotificationWarning.class };
+ }
+
+ @Override
+ public NamedExternalResource[] getRelatedResources() {
+ return new NamedExternalResource[] { new NamedExternalResource(
+ "Monolog Boxes and Transparent Messages",
+ "http://humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages/") };
+ }
+
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+
+public class NotificationHumanizedExample extends OrderedLayout {
+
+ public NotificationHumanizedExample() {
+ setSpacing(true);
+
+ final TextField caption = new TextField("Caption", "Document saved");
+ caption.setWidth("200px");
+ addComponent(caption);
+
+ final TextField description = new TextField("Description",
+ "Invoices-2008.csv");
+ description.setWidth("300px");
+ addComponent(description);
+
+ Button show = new Button("Show notification",
+ new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ getWindow().showNotification(
+ (String) caption.getValue(),
+ (String) description.getValue());
+
+ }
+ });
+ addComponent(show);
+ setComponentAlignment(show, ALIGNMENT_RIGHT, ALIGNMENT_VERTICAL_CENTER);
+
+ }
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.demo.sampler.APIResource;
+import com.itmill.toolkit.demo.sampler.Feature;
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;
+import com.itmill.toolkit.ui.Window;
+
+public class NotificationTray extends Feature {
+
+ @Override
+ public String getDescription() {
+ return "Notifications are lightweight informational messages,"
+ + " used to inform the user of various events. The"
+ + " <i>Tray</i> variant shows up in the lower left corner,"
+ + " and is meant to interrupt the user as little as possible"
+ + " even if it's shown for a while. "
+ + "The <i>Tray</i> message fades away after a few moments"
+ + " once the user interacts with the application (e.g. moves"
+ + " mouse, types)<br/> Candidates for a"
+ + " <i>Tray</i> notification include 'New message received',"
+ + " 'Job XYZ completed' - generally notifications about events"
+ + " that have been delayed, or occur in the background"
+ + " (as opposed to being a direct result of the users last action.)";
+ }
+
+ @Override
+ public APIResource[] getRelatedAPI() {
+ return new APIResource[] { new APIResource(Window.class),
+ new APIResource(Window.Notification.class) };
+ }
+
+ @Override
+ public Class[] getRelatedFeatures() {
+ return new Class[] { NotificationHumanized.class,
+ NotificationWarning.class };
+ }
+
+ @Override
+ public NamedExternalResource[] getRelatedResources() {
+ return new NamedExternalResource[] { new NamedExternalResource(
+ "Monolog Boxes and Transparent Messages",
+ "http://humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages/") };
+ }
+
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+import com.itmill.toolkit.ui.Window.Notification;
+
+public class NotificationTrayExample extends OrderedLayout {
+
+ public NotificationTrayExample() {
+ setSpacing(true);
+
+ final TextField caption = new TextField("Caption", "New message");
+ caption.setWidth("200px");
+ addComponent(caption);
+
+ final TextField description = new TextField("Description",
+ "<b>John:</b> Could you upload Invoices-2008.csv so that...");
+ description.setWidth("300px");
+ addComponent(description);
+
+ Button show = new Button("Show notification",
+ new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ getWindow().showNotification(
+ (String) caption.getValue(),
+ (String) description.getValue(),
+ Notification.TYPE_TRAY_NOTIFICATION);
+
+ }
+ });
+ addComponent(show);
+ setComponentAlignment(show, ALIGNMENT_RIGHT, ALIGNMENT_VERTICAL_CENTER);
+
+ }
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.demo.sampler.APIResource;
+import com.itmill.toolkit.demo.sampler.Feature;
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;
+import com.itmill.toolkit.ui.Window;
+
+public class NotificationWarning extends Feature {
+
+ @Override
+ public String getDescription() {
+ return "Notifications are lightweight informational messages,"
+ + " used to inform the user of various events. The"
+ + " <i>Warning</i> variant is an implementation of"
+ + " the <i>transparent message</i> -pattern, and is meant"
+ + " to interrupt the user as little as possible, while"
+ + " still drawing the needed attention."
+ + "The <i>Warning</i> message fades away after a few moments"
+ + " once the user interacts with the application (e.g. moves"
+ + " mouse, types)<br/> Candidates for a"
+ + " <i>Warning</i> notification include 'You canceled XYZ',"
+ + " 'XYZ deleted', and other situations that the user should"
+ + " be made aware of, but are probably intentional.";
+ }
+
+ @Override
+ public APIResource[] getRelatedAPI() {
+ return new APIResource[] { new APIResource(Window.class),
+ new APIResource(Window.Notification.class) };
+ }
+
+ @Override
+ public Class[] getRelatedFeatures() {
+ return new Class[] { NotificationHumanized.class };
+ }
+
+ @Override
+ public NamedExternalResource[] getRelatedResources() {
+ return new NamedExternalResource[] { new NamedExternalResource(
+ "Monolog Boxes and Transparent Messages",
+ "http://humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages/") };
+ }
+
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.notifications;
+
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+import com.itmill.toolkit.ui.Window.Notification;
+
+public class NotificationWarningExample extends OrderedLayout {
+
+ public NotificationWarningExample() {
+ setSpacing(true);
+
+ final TextField caption = new TextField("Caption", "Upload canceled");
+ caption.setWidth("200px");
+ addComponent(caption);
+
+ final TextField description = new TextField("Description",
+ "Invoices-2008.csv will not be processed");
+ description.setWidth("300px");
+ addComponent(description);
+
+ Button show = new Button("Show notification",
+ new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ getWindow().showNotification(
+ (String) caption.getValue(),
+ (String) description.getValue(),
+ Notification.TYPE_WARNING_MESSAGE);
+
+ }
+ });
+ addComponent(show);
+ setComponentAlignment(show, ALIGNMENT_RIGHT, ALIGNMENT_VERTICAL_CENTER);
+
+ }
+}