/*
* Copyright 2008 IT Mill 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.itmill.toolkit.demo;
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.
*/
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
}
}
|