1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 package info.magnolia.ui.app.showcase.main;
35
36 import info.magnolia.ui.vaadin.grid.MagnoliaTable;
37 import info.magnolia.ui.vaadin.grid.MagnoliaTreeTable;
38 import info.magnolia.ui.vaadin.gwt.client.shared.icon.IconParameters;
39 import info.magnolia.ui.vaadin.icon.BadgeIcon;
40 import info.magnolia.ui.vaadin.icon.ErrorIcon;
41 import info.magnolia.ui.vaadin.icon.HelpIcon;
42 import info.magnolia.ui.vaadin.icon.Icon;
43 import info.magnolia.ui.vaadin.icon.InfoIcon;
44 import info.magnolia.ui.vaadin.icon.LoadingIcon;
45 import info.magnolia.ui.vaadin.icon.WarningIcon;
46
47 import java.util.Date;
48
49 import com.vaadin.data.Item;
50 import com.vaadin.data.Property;
51 import com.vaadin.data.util.HierarchicalContainer;
52 import com.vaadin.server.ExternalResource;
53 import com.vaadin.server.Sizeable.Unit;
54 import com.vaadin.server.ThemeResource;
55 import com.vaadin.shared.ui.MarginInfo;
56 import com.vaadin.shared.ui.label.ContentMode;
57 import com.vaadin.shared.ui.slider.SliderOrientation;
58 import com.vaadin.ui.AbstractSelect;
59 import com.vaadin.ui.AbstractSplitPanel;
60 import com.vaadin.ui.Button;
61 import com.vaadin.ui.CheckBox;
62 import com.vaadin.ui.ComboBox;
63 import com.vaadin.ui.Component;
64 import com.vaadin.ui.CssLayout;
65 import com.vaadin.ui.Embedded;
66 import com.vaadin.ui.GridLayout;
67 import com.vaadin.ui.HorizontalSplitPanel;
68 import com.vaadin.ui.Label;
69 import com.vaadin.ui.Layout;
70 import com.vaadin.ui.Link;
71 import com.vaadin.ui.NativeSelect;
72 import com.vaadin.ui.OptionGroup;
73 import com.vaadin.ui.Panel;
74 import com.vaadin.ui.PasswordField;
75 import com.vaadin.ui.PopupView;
76 import com.vaadin.ui.ProgressIndicator;
77 import com.vaadin.ui.Slider;
78 import com.vaadin.ui.Slider.ValueOutOfBoundsException;
79 import com.vaadin.ui.TextArea;
80 import com.vaadin.ui.TextField;
81 import com.vaadin.ui.Tree;
82 import com.vaadin.ui.VerticalLayout;
83 import com.vaadin.ui.VerticalSplitPanel;
84 import com.vaadin.ui.themes.BaseTheme;
85
86
87
88
89 public class VaadinViewImpl implements VaadinView {
90
91 private final VerticalLayout layout;
92
93 public VaadinViewImpl() {
94 layout = new VerticalLayout();
95 layout.setSpacing(true);
96 layout.setWidth("100%");
97 layout.setMargin(new MarginInfo(true, true, false, true));
98 layout.addComponent(new Label(
99 "The UI elements available in the Vaadin framework that " +
100 "are recommended for use with Magnolia. These fields " +
101 "can be easily added to your app and support Vaadin " +
102 "interaction. Many of these elements are also available " +
103 "within Magnolia Forms/Dialogs."));
104 layout.addComponent(getLabelPreviews());
105 layout.addComponent(getIconsPreview());
106 layout.addComponent(getProgressIndicatorPreviews());
107 layout.addComponent(getImagePreviews());
108 layout.addComponent(getButtonPreviews());
109 layout.addComponent(getTextFieldPreviews());
110 layout.addComponent(getCheckboxPreviews());
111 layout.addComponent(getSelectPreviews());
112
113 layout.addComponent(getMagnoliaPreviews());
114 layout.addComponent(getTreePreviews());
115 layout.addComponent(getSliderPreviews());
116 layout.addComponent(getPanelPreviews());
117 layout.addComponent(getSplitPreviews());
118 layout.addComponent(getPopupViewPreviews());
119 }
120
121 @Override
122 public Component asVaadinComponent() {
123 return layout;
124 }
125
126 private Layout getImagePreviews() {
127 Layout layout = new VerticalLayout();
128 layout.setCaption("External resources");
129 Embedded image = new Embedded("", new ThemeResource("img/logo-magnolia.svg"));
130 image.setWidth("300px");
131 image.setHeight("100px");
132
133 layout.addComponent(image);
134 return layout;
135 }
136
137 private Layout getMagnoliaPreviews() {
138 Layout grid = getPreviewLayout("Magnolia table and tree table");
139 MagnoliaTable table = new MagnoliaTable();
140 table.addContainerProperty("first", String.class, "first");
141 table.addContainerProperty("second", Integer.class, 1);
142 table.addContainerProperty("thid", Date.class, new Date());
143 for (int loop = 0; loop < 3; loop++) {
144 table.addItem();
145 }
146 table.setWidth("100%");
147 table.setHeight("200px");
148 grid.addComponent(table);
149
150 MagnoliaTreeTable tree = new MagnoliaTreeTable();
151 HierarchicalContainer container = new HierarchicalContainer();
152
153 container.addContainerProperty("first", String.class, "first");
154 container.addContainerProperty("second", Integer.class, 1);
155 container.addContainerProperty("thid", Date.class, new Date());
156
157 tree.setContainerDataSource(container);
158 Object root = container.addItem();
159 for (int loop = 0; loop < 3; loop++) {
160 Object itemId = container.addItem();
161 container.setParent(itemId, root);
162 }
163 tree.setCollapsed(root, false);
164 tree.setWidth("100%");
165 tree.setHeight("200px");
166 grid.addComponent(tree);
167
168 return grid;
169 }
170
171 private Layout getPopupViewPreviews() {
172 Layout grid = getPreviewLayout("Popup views");
173
174 Label content = new Label("Simple popup content");
175 content.setSizeUndefined();
176 PopupView pv = new PopupView("Default popup", content);
177 grid.addComponent(pv);
178
179 return grid;
180 }
181
182 private Layout getCheckboxPreviews() {
183 Layout grid = getPreviewLayout("Checkboxes and radiobuttons");
184 CheckBox checkboxcaption = new CheckBox("with caption text");
185
186 OptionGroup group = new OptionGroup("Option group");
187 group.addItem("First");
188 group.addItem("Second");
189 group.addItem("Third");
190
191 OptionGroup checkGroup = new OptionGroup("Option group with multi select");
192 checkGroup.setMultiSelect(true);
193 checkGroup.addItem("First");
194 checkGroup.addItem("Second");
195 checkGroup.addItem("Third");
196
197 grid.addComponent(checkboxcaption);
198 grid.addComponent(group);
199 grid.addComponent(checkGroup);
200 return grid;
201 }
202
203 static void addSelectItems(AbstractSelect s, boolean selectFirst, int num) {
204 s.setNullSelectionAllowed(false);
205 for (int i = 0; i < num; i++) {
206 s.addItem("Item " + i);
207 }
208 if (selectFirst) {
209 s.select(s.getItemIds().iterator().next());
210 }
211 }
212
213 private Layout getSelectPreviews() {
214 Layout grid = getPreviewLayout("Selects");
215
216 ComboBox combo = new ComboBox();
217 addSelectItems(combo, true, 100);
218 grid.addComponent(combo);
219
220 NativeSelect s = new NativeSelect();
221 addSelectItems(s, true, 10);
222 grid.addComponent(s);
223
224 return grid;
225 }
226
227 private Layout getSplitPreviews() {
228 Layout grid = getPreviewLayout("Split panels");
229
230 AbstractSplitPanel panel = new VerticalSplitPanel();
231 panel.setWidth("230px");
232 panel.setHeight("130px");
233 grid.addComponent(panel);
234
235 panel = new HorizontalSplitPanel();
236 panel.setWidth("230px");
237 panel.setHeight("130px");
238 grid.addComponent(panel);
239
240 return grid;
241 }
242
243
244
245
246 private class DemoPanel extends Panel {
247
248 DemoPanel() {
249 super();
250 setWidth("230px");
251 setHeight("120px");
252 setContent(new Label(
253 "<h4>Panel content</h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada volutpat vestibulum. Quisque elementum quam sed sem ultrices lobortis. Pellentesque non ligula ac dolor posuere tincidunt sed eu mi. Integer mattis fringilla nulla, ut cursus mauris scelerisque eu. Etiam bibendum placerat euismod. Nam egestas adipiscing orci sed tristique. Sed vitae enim nisi. Sed ac vehicula ipsum. Nulla quis quam nisi. Proin interdum lacus ipsum, at tristique nibh. Curabitur at ipsum sem. Donec venenatis aliquet neque, sit amet cursus lectus condimentum et. In mattis egestas erat, non cursus metus consectetur ac. Pellentesque eget nisl tellus.",
254 ContentMode.HTML));
255 }
256 }
257
258 private Layout getPanelPreviews() {
259 Layout grid = getPreviewLayout("Panels");
260
261 DemoPanel panel = new DemoPanel();
262 grid.addComponent(panel);
263
264 return grid;
265 }
266
267 private Layout getSliderPreviews() {
268 Layout grid = getPreviewLayout("Sliders");
269
270 Slider s = new Slider();
271 s.setWidth("200px");
272 try {
273 s.setValue(50d);
274 grid.addComponent(s);
275
276 s = new Slider();
277 s.setOrientation(SliderOrientation.VERTICAL);
278 s.setHeight("70px");
279 s.setValue(50d);
280 } catch (ValueOutOfBoundsException e) {
281
282 }
283 grid.addComponent(s);
284
285 return grid;
286 }
287
288 Tree tree;
289
290 private Layout getTreePreviews() {
291 Layout grid = getPreviewLayout("Trees");
292 tree = new Tree();
293 tree.setImmediate(true);
294 tree.setSizeFull();
295
296
297 tree.addContainerProperty("caption", String.class, "");
298 tree.setItemCaptionMode(AbstractSelect.ITEM_CAPTION_MODE_PROPERTY);
299 tree.setItemCaptionPropertyId("caption");
300 for (int i = 1; i <= 3; i++) {
301 final Object id = addCaptionedItem("Division " + i, null);
302 tree.expandItem(id);
303 addCaptionedItem("Team A", id);
304 addCaptionedItem("Team B", id);
305 tree.setItemIcon(id, new ThemeResource(
306 "../runo/icons/16/folder.png"));
307 }
308 grid.addComponent(tree);
309 return grid;
310 }
311
312 private Object addCaptionedItem(String caption, Object parent) {
313
314 final Object id = tree.addItem();
315
316 final Item item = tree.getItem(id);
317
318 final Property p = item.getItemProperty("caption");
319 p.setValue(caption);
320 if (parent != null) {
321 tree.setChildrenAllowed(parent, true);
322 tree.setParent(id, parent);
323 tree.setChildrenAllowed(id, false);
324 }
325 return id;
326 }
327
328 private Layout getIconsPreview() {
329 Layout layout = getPreviewLayout("Magnolia Icons");
330
331 CssLayout layout1 = new CssLayout();
332 Label label1 = new Label("<h4>icon css class</h4>", ContentMode.HTML);
333 label1.setWidth(150, Unit.PIXELS);
334 layout1.addComponent(label1);
335 layout1.addComponent(new Icon("view"));
336 layout1.addComponent(new Icon("edit"));
337 layout1.addComponent(new Icon("search"));
338
339 CssLayout layout2 = new CssLayout();
340 Label label2 = new Label("<h4>icon size</h4>", ContentMode.HTML);
341 label2.setWidth(150, Unit.PIXELS);
342 layout2.addComponent(label2);
343 layout2.addComponent(new Icon("search", 16));
344 layout2.addComponent(new Icon("search"));
345 layout2.addComponent(new Icon("search", 48));
346
347 CssLayout layout3 = new CssLayout();
348 Label label3 = new Label("<h4>icon color</h4>", ContentMode.HTML);
349 label3.setWidth(150, Unit.PIXELS);
350 layout3.addComponent(label3);
351 layout3.addComponent(new Icon("search", Icon.COLOR_INFO));
352 layout3.addComponent(new Icon("search", Icon.COLOR_GREEN_BADGE));
353 layout3.addComponent(new Icon("search", Icon.COLOR_HELP));
354 layout3.addComponent(new Icon("search", Icon.COLOR_WARNING));
355 layout3.addComponent(new Icon("search", Icon.COLOR_ERROR));
356 layout3.addComponent(new Icon("search", "#c09"));
357
358 CssLayout layout4 = new CssLayout();
359 Label label4 = new Label("<h4>composite icons</h4>", ContentMode.HTML);
360 label4.setWidth(150, Unit.PIXELS);
361 layout4.addComponent(label4);
362 layout4.addComponent(new InfoIcon());
363 layout4.addComponent(new WarningIcon());
364 layout4.addComponent(new ErrorIcon());
365 layout4.addComponent(new HelpIcon());
366
367 CssLayout layout5 = new CssLayout();
368 Label label5 = new Label("<h4>badge icon</h4>", ContentMode.HTML);
369 label5.setWidth(150, Unit.PIXELS);
370 layout5.addComponent(label5);
371 for (int m = 0; m <= 12; m++) {
372 BadgeIcon badge;
373 if (m % 2 == 0) {
374 badge = new BadgeIcon();
375 } else {
376 badge = new BadgeIcon(IconParameters.DEFAULT_SIZE, "#fff", Icon.COLOR_GREEN_BADGE, true);
377 }
378 badge.setValue(fib(m));
379 layout5.addComponent(badge);
380 }
381
382 CssLayout layout6 = new CssLayout();
383 Label label6 = new Label("<h4>spinner icon</h4>", ContentMode.HTML);
384 label6.setWidth(150, Unit.PIXELS);
385 layout6.addComponent(label6);
386 layout6.addComponent(new LoadingIcon());
387
388 layout.addComponent(layout1);
389 layout.addComponent(layout2);
390 layout.addComponent(layout3);
391 layout.addComponent(layout4);
392 layout.addComponent(layout5);
393 layout.addComponent(layout6);
394 return layout;
395 }
396
397 private int fib(int n) {
398 if (n <= 1) {
399 return n;
400 } else {
401 return fib(n - 1) + fib(n - 2);
402 }
403 }
404
405 private Layout getLabelPreviews() {
406 Layout grid = getPreviewLayout("Static text");
407
408 Label label = new Label("Plain text, lorem ipsum dolor sit amet consectetur amit.");
409
410 grid.addComponent(label);
411
412 label = new Label("Warning text, lorem ipsum dolor sit.");
413 label.setStyleName("warning");
414 grid.addComponent(label);
415
416 label = new Label("Error text, lorem ipsum dolor.");
417 label.setStyleName("error");
418 grid.addComponent(label);
419
420 return grid;
421 }
422
423 private Layout getProgressIndicatorPreviews() {
424 Layout grid = getPreviewLayout("Progress Indicators");
425
426 ProgressIndicator pi = new ProgressIndicator(0.5f);
427 pi.setPollingInterval(100000000);
428 pi.setCaption("Normal");
429 grid.addComponent(pi);
430
431 pi = new ProgressIndicator(0.5f);
432 pi.setPollingInterval(100000000);
433 pi.setCaption("Indeterminate");
434 pi.setIndeterminate(true);
435 grid.addComponent(pi);
436
437 return grid;
438 }
439
440 private Layout getButtonPreviews() {
441 Layout grid = getPreviewLayout("Buttons");
442
443 Button button = new Button("Button");
444 grid.addComponent(button);
445
446 button = new Button("Button with link style");
447 button.setStyleName(BaseTheme.BUTTON_LINK);
448 grid.addComponent(button);
449
450 button = new Button();
451 button.setIcon(new ThemeResource("../runo/icons/16/user.png"));
452 grid.addComponent(button);
453
454 Link l = new Link("Link: magnolia-cms.com", new ExternalResource("http://www.magnolia-cms.com"));
455 grid.addComponent(l);
456
457 return grid;
458 }
459
460 private Layout getTextFieldPreviews() {
461 Layout grid = getPreviewLayout("Text fields");
462
463 TextField tf = new TextField();
464 tf.setValue("Text field");
465 grid.addComponent(tf);
466
467 PasswordField pw = new PasswordField();
468 pw.setInputPrompt("Password");
469 grid.addComponent(pw);
470
471 TextArea ta = new TextArea();
472 ta.setInputPrompt("Multiline");
473 grid.addComponent(ta);
474
475 return grid;
476 }
477
478 private Layout getPreviewLayout(String caption) {
479 GridLayout grid = new GridLayout(3, 1);
480 grid.setWidth("100%");
481 grid.setSpacing(true);
482 grid.setMargin(true);
483 grid.setCaption(caption);
484 return grid;
485 }
486
487 }