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
|
package com.itmill.toolkit.demo;
import com.itmill.toolkit.ui.*;
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 Panel bodyPanel = new Panel();
private TextField username = new TextField("Username");
private TextField loginPwd = new TextField("Password");
private Button loginButton = new Button("Login", this, "loginClicked");
private Tree menu = new Tree();
/**
* Initialize Application. Demo components are added to main window.
*/
public void init() {
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
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.setStyle("menu");
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((Listener) this);
// Value changes are immediate
menu.setImmediate(true);
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
}
}
|
