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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
/*
* Copyright 2011 Vaadin Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.vaadin.tests;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Component.Event;
import com.vaadin.ui.Component.Listener;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.Field;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.PasswordField;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI.LegacyWindow;
/**
* 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 Vaadin components into html page,
* use divs with location tag as an identifier for Vaadin 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 Vaadin Ltd.
* @since 4.0.0
*
*/
public class CustomLayoutDemo extends com.vaadin.Application implements
Listener {
private CustomLayout mainLayout = null;
private final Panel bodyPanel = new Panel();
private final TextField username = new TextField("Username");
private final PasswordField loginPwd = new PasswordField("Password");
private final Button loginButton = new Button("Login",
new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
loginClicked();
}
});
private final Tree menu = new Tree();
/**
* Initialize Application. Demo components are added to main window.
*/
@Override
public void init() {
final LegacyWindow mainWindow = new LegacyWindow("CustomLayout demo");
setMainWindow(mainWindow);
// set the application to use example -theme
setTheme("tests-components");
// 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
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>",
ContentMode.HTML));
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>", ContentMode.HTML));
}
/**
* 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.
*/
@Override
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
}
}
|
