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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
/*
@ITMillApache2LicenseForJavaFiles@
*/
package com.itmill.toolkit.tests;
import com.itmill.toolkit.ui.Button;
import com.itmill.toolkit.ui.CustomLayout;
import com.itmill.toolkit.ui.Field;
import com.itmill.toolkit.ui.Label;
import com.itmill.toolkit.ui.Panel;
import com.itmill.toolkit.ui.TextField;
import com.itmill.toolkit.ui.Tree;
import com.itmill.toolkit.ui.Window;
import com.itmill.toolkit.ui.Component.Event;
import com.itmill.toolkit.ui.Component.Listener;
/**
* This example demonstrates custom layout. All components created here are
* placed using custom.html file. Custom layouts may be created with any web
* designer tool such as Dreamweaver. To place Toolkit components into html
* page, use divs with location tag as an identifier for Toolkit components, see
* html page (themes/example/layout/custom.html) and source code below. Body
* panel contents are changed when menu items are clicked. Contents are HTML
* pages located at themes/example/layout directory.
*
* @author IT Mill Ltd.
* @since 4.0.0
*
*/
public class CustomLayoutDemo extends com.itmill.toolkit.Application implements
Listener {
private CustomLayout mainLayout = null;
private final Panel bodyPanel = new Panel();
private final TextField username = new TextField("Username");
private final TextField loginPwd = new TextField("Password");
private final Button loginButton = new Button("Login", this, "loginClicked");
private final Tree menu = new Tree();
/**
* Initialize Application. Demo components are added to main window.
*/
@Override
public void init() {
final Window mainWindow = new Window("CustomLayout demo");
setMainWindow(mainWindow);
// set the application to use example -theme
setTheme("example");
// Create custom layout, themes/example/layout/mainLayout.html
mainLayout = new CustomLayout("mainLayout");
// wrap custom layout inside a panel
final Panel customLayoutPanel = new Panel(
"Panel containing custom layout (mainLayout.html)");
customLayoutPanel.addComponent(mainLayout);
// Login components
loginPwd.setSecret(true);
mainLayout.addComponent(username, "loginUser");
mainLayout.addComponent(loginPwd, "loginPassword");
mainLayout.addComponent(loginButton, "loginButton");
// Menu component, when clicked bodyPanel is updated
menu.addItem("Welcome");
menu.addItem("Products");
menu.addItem("Support");
menu.addItem("News");
menu.addItem("Developers");
menu.addItem("Contact");
// "this" handles all menu events, e.g. node clicked event
menu.addListener(this);
// Value changes are immediate
menu.setImmediate(true);
menu.setNullSelectionAllowed(false);
mainLayout.addComponent(menu, "menu");
// Body component
mainLayout.addComponent(bodyPanel, "body");
// Initial body are comes from Welcome.html
setBody("Welcome");
// Add heading label and custom layout panel to main window
mainWindow.addComponent(new Label("<h3>Custom layout demo</h3>",
Label.CONTENT_XHTML));
mainWindow.addComponent(customLayoutPanel);
}
/**
* Login button clicked. Hide login components and replace username
* component with "Welcome user Username" message.
*
*/
public void loginClicked() {
username.setVisible(false);
loginPwd.setVisible(false);
if (username.getValue().toString().length() < 1) {
username.setValue("Anonymous");
}
mainLayout.replaceComponent(loginButton, new Label("Welcome user <em>"
+ username.getValue() + "</em>", Label.CONTENT_XHTML));
}
/**
* Set body panel caption, remove all existing components and add given
* custom layout in it.
*
*/
public void setBody(String customLayout) {
bodyPanel.setCaption(customLayout + ".html");
bodyPanel.removeAllComponents();
bodyPanel.addComponent(new CustomLayout(customLayout));
}
/**
* Handle all menu events. Updates body panel contents if menu item is
* clicked.
*/
public void componentEvent(Event event) {
// Check if event occured at fsTree component
if (event.getSource() == menu) {
// Check if event is about changing value
if (event.getClass() == Field.ValueChangeEvent.class) {
// Update body area with selected item
setBody(menu.getValue().toString());
}
// here we could check for other type of events for tree
// component
}
// here we could check for other component's events
}
}
|
