#sampler {
background-color: white;
}
-#sampler .i-expandlayout-topbar {
+#sampler .i-orderedlayout-topbar {
border-bottom: 1px solid #999;
}
#sampler .i-button-screenshot {
border: 3px solid #eeeeee;
+ overflow: hidden;
+}
+#sampler .i-button-screenshot img {
+ margin-top: -2px;
+ margin-left: -3px;
}
#sampler tr.i-table-row-section {
font-weight: bold;
}
+#sampler .i-panel-content-light {
+ border-top: 0px;
+}
+
#sampler .feature-main {
padding: 20px;
}
padding: 20px;
line-height: 20px;
}
+#sampler .feature-info div.i-link a {
+ color: white;
+ line-height: 20px;
+}
#sampler .feature-name {
font-size: 22px;
font-weight: bold;
import com.itmill.toolkit.demo.sampler.features.buttons.ButtonLink;
import com.itmill.toolkit.demo.sampler.features.buttons.ButtonPush;
import com.itmill.toolkit.demo.sampler.features.buttons.ButtonSwitch;
+import com.itmill.toolkit.demo.sampler.features.commons.Tooltips;
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.ui.ExpandLayout;
import com.itmill.toolkit.ui.GridLayout;
import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.Panel;
import com.itmill.toolkit.ui.SplitPanel;
import com.itmill.toolkit.ui.Table;
import com.itmill.toolkit.ui.Tree;
new FeatureSet("Components", new Feature[] {
// Components
+
+ new FeatureSet("Commons",
+ new Feature[] { new Tooltips(), // tooltips
+
+ }),
+
new FeatureSet("Buttons", new Feature[] {
new ButtonPush(), // basic
new ButtonLink(), // link
// Handle REST -style urls
public DownloadStream handleURI(URL context, String relativeUri) {
+
Feature f = features.getFeatureByPath(relativeUri);
if (f != null) {
setFeature(f);
public void show(Component c) {
if (getCompositionRoot() != c) {
+ c.setSizeFull();
setCompositionRoot(c);
}
}
}
- private class FeatureGrid extends GridLayout implements FeatureList {
+ private class FeatureGrid extends Panel implements FeatureList {
+
+ GridLayout grid = new GridLayout(5, 1);
FeatureGrid() {
- super(5, 1);
- setWidth("100%");
- setMargin(true);
- setSpacing(true);
+ setSizeFull();
+ getLayout().setWidth("100%");
+ grid.setWidth("100%");
+ grid.setSpacing(true);
+ addComponent(grid);
+ setStyleName(Panel.STYLE_LIGHT);
}
private void newRow() {
- while (getCursorX() > 0) {
- space();
+ while (grid.getCursorX() > 0) {
+ grid.space();
}
- setRows(getRows() + 1);
+ grid.setRows(grid.getRows() + 1);
}
public void setFeatureContainer(HierarchicalContainer c) {
- removeAllComponents();
+ grid.removeAllComponents();
Collection features = c.getItemIds();
for (Iterator it = features.iterator(); it.hasNext();) {
final Feature f = (Feature) it.next();
if (c.isRoot(f)) {
title.setWidth("100%");
title.setStyleName("section");
- addComponent(title, 0, getCursorY(), getColumns() - 1,
- getCursorY());
+ grid.addComponent(title, 0, grid.getCursorY(), grid
+ .getColumns() - 1, grid.getCursorY());
} else {
title.setStyleName("subsection");
- addComponent(title);
+ grid.addComponent(title);
}
- setComponentAlignment(title, ALIGNMENT_LEFT,
- ALIGNMENT_VERTICAL_CENTER);
+ grid.setComponentAlignment(title,
+ GridLayout.ALIGNMENT_LEFT,
+ GridLayout.ALIGNMENT_VERTICAL_CENTER);
} else {
- if (getCursorX() == 0) {
- space();
+ if (grid.getCursorX() == 0) {
+ grid.space();
}
Button b = new Button();
b.setStyleName(Button.STYLE_LINK);
((SamplerWindow) getWindow()).setFeature(f);
}
});
- addComponent(b);
+ grid.addComponent(b);
}
}
}
f = null; // break while if no new found
String part = parts.remove(0);
for (int i = 0; i < fs.length; i++) {
- if (fs[i].getPathName().equals(part)) {
+ if (fs[i].getPathName().equalsIgnoreCase(part)) {
if (parts.isEmpty()) {
return fs[i];
} else if (fs[i] instanceof FeatureSet) {
@Override
public NamedExternalResource[] getRelatedResources() {
return new NamedExternalResource[] {
+
+ new NamedExternalResource("CSS used", getThemeBase()
+ + "prominentprimaryaction/styles.css"),
+
new NamedExternalResource(
- "LukeW: Primary & Secondary Actions in Web Forms",
+ "Article: Primary & Secondary Actions in Web Forms (LukeW)",
"http://www.lukew.com/resources/articles/psactions.asp"),
new NamedExternalResource(
- "UI Pattern Factory: Primary & Secondary Actions",
+ "Article: Primary & Secondary Actions (UI Pattern Factory)",
"http://uipatternfactory.com/p=primary-and-secondary-actions/") };
}
-
}
public ProminentPrimaryActionExample() {
setSpacing(true);
- OrderedLayout horiz = new OrderedLayout(ORIENTATION_HORIZONTAL);
- horiz.setSpacing(true);
- addComponent(horiz);
- Button primary = new Button("Save", this);
- horiz.addComponent(primary);
- Button secondary = new Button("Cancel", this);
- secondary.setStyleName(Button.STYLE_LINK);
- horiz.addComponent(secondary);
-
- horiz = new OrderedLayout(ORIENTATION_HORIZONTAL);
- horiz.setSpacing(true);
- addComponent(horiz);
- primary = new Button("Sign up", this);
- horiz.addComponent(primary);
- secondary = new Button("or Sign in", this);
- secondary.setStyleName(Button.STYLE_LINK);
- horiz.addComponent(secondary);
-
- horiz = new OrderedLayout(ORIENTATION_HORIZONTAL);
- horiz.setSpacing(true);
- addComponent(horiz);
- primary = new Button("Login", this);
- horiz.addComponent(primary);
- secondary = new Button("Forgot your password?", this);
- secondary.setStyleName(Button.STYLE_LINK);
- horiz.addComponent(secondary);
+ { // Cancel / Save
+ OrderedLayout horiz = new OrderedLayout(ORIENTATION_HORIZONTAL);
+ horiz.setSpacing(true);
+ horiz.setMargin(true);
+ addComponent(horiz);
+ Button secondary = new Button("Cancel", this);
+ secondary.setStyleName(Button.STYLE_LINK);
+ horiz.addComponent(secondary);
+ Button primary = new Button("Save", this);
+ horiz.addComponent(primary);
+ }
+
+ { // Sign up / Sign in
+ OrderedLayout horiz = new OrderedLayout(ORIENTATION_HORIZONTAL);
+ horiz.setSpacing(true);
+ horiz.setMargin(true);
+ addComponent(horiz);
+ Button primary = new Button("Sign up", this);
+ primary.addStyleName("primary");
+ horiz.addComponent(primary);
+ Button secondary = new Button("or Sign in", this);
+ secondary.setStyleName(Button.STYLE_LINK);
+ horiz.setComponentAlignment(secondary, ALIGNMENT_LEFT,
+ ALIGNMENT_VERTICAL_CENTER);
+ horiz.addComponent(secondary);
+ }
+
+ { // Login / Forgot password?
+ OrderedLayout vert = new OrderedLayout();
+ vert.setSpacing(true);
+ vert.setMargin(true);
+ addComponent(vert);
+ Button primary = new Button("Login", this);
+ vert.addComponent(primary);
+ vert.setComponentAlignment(primary, OrderedLayout.ALIGNMENT_RIGHT,
+ OrderedLayout.ALIGNMENT_BOTTOM);
+ Button secondary = new Button("Forgot your password?", this);
+ secondary.setStyleName(Button.STYLE_LINK);
+ vert.addComponent(secondary);
+ }
}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.commons;
+
+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.AbstractComponent;
+
+public class Tooltips extends Feature {
+
+ @Override
+ public String getDescription() {
+ return "Most components can have a <i>description</i>,"
+ + " which is shown as a <i>\"tooltip\"</i>.<br/>"
+ + "Descriptions may have rich content.<br/>"
+ + "Note that <i>description</i> is more generic term than"
+ + " <i>tooltip</i> - a component might choose to show"
+ + " the description in another way, if that's more appropriate"
+ + " for that compoenent.)";
+ }
+
+ @Override
+ public APIResource[] getRelatedAPI() {
+ return new APIResource[] { new APIResource(AbstractComponent.class) };
+ }
+
+ @Override
+ public Class[] getRelatedFeatures() {
+ // TODO Auto-generated method stub
+ return null;
+ }
+
+ @Override
+ public NamedExternalResource[] getRelatedResources() {
+ // TODO Auto-generated method stub
+ return null;
+ }
+
+}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.commons;
+
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.RichTextArea;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+
+public class TooltipsExample extends OrderedLayout {
+
+ public TooltipsExample() {
+ setSpacing(true);
+
+ /* Plain tooltip (description) */
+ Button plain = new Button("Mouse over for plain tooltip");
+ // add the tooltip:
+ plain.setDescription("A simple plaintext tooltip");
+ addComponent(plain);
+
+ /* Richtext tooltip (description) */
+ Button rich = new Button("Mouse over for richtext tooltip");
+ rich.setStyleName(Button.STYLE_LINK);
+ // add the tooltip:
+ rich
+ .setDescription("<h2><img src=\"../ITMILL/themes/sampler/icons/comment_yellow.gif\"/>A richtext tooltip</h2>"
+ + "<ul>"
+ + "<li>HTML formatting</li><li>Images<br/>"
+ + "</li><li>etc...</li></ul>");
+ addComponent(rich);
+
+ /* Edit */
+ final RichTextArea rte = new RichTextArea();
+ rte
+ .setValue("Click <b>Edit Tooltip</b> to edit this tooltip, then <b>Apply</b>");
+ rte.setVisible(false); // hide editor initially
+ addComponent(rte);
+ Button apply = new Button("Edit Tooltip", new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ if (rte.isVisible()) {
+ rte.setVisible(false);
+ event.getButton().setDescription((String) rte.getValue());
+ event.getButton().setCaption("Edit Tooltip");
+ } else {
+ rte.setVisible(true);
+ event.getButton().setCaption("Apply");
+ }
+ }
+ });
+ apply.setDescription((String) rte.getValue());
+ addComponent(apply);
+
+ }
+}
initPositionItems(position);
final NativeSelect style = new NativeSelect("Style");
- position.setNullSelectionAllowed(false);
+ style.setNullSelectionAllowed(false);
horiz.addComponent(style);
initTypeItems(style);
projects / vaadin-framework.git / commitdiff
