/* * Copyright 2000-2016 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.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.Label; import com.vaadin.ui.LegacyWindow; import com.vaadin.ui.Panel; import com.vaadin.ui.PasswordField; import com.vaadin.ui.TextField; import com.vaadin.ui.VerticalLayout; import com.vaadin.v7.ui.Field; import com.vaadin.v7.ui.Tree; /** * 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.server.LegacyApplication 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 VerticalLayout customLayoutPanelLayout = new VerticalLayout(); customLayoutPanelLayout.setMargin(true); final Panel customLayoutPanel = new Panel( "Panel containing custom layout (mainLayout.html)", customLayoutPanelLayout); customLayoutPanelLayout.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) { VerticalLayout bodyLayout = new VerticalLayout(); bodyLayout.setMargin(true); bodyLayout.addComponent(new CustomLayout(customLayout)); bodyPanel.setContent(bodyLayout); bodyPanel.setCaption(customLayout + ".html"); } /** * 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 } }