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