Table Of Contents<\/h3>\n\n- 1. The tools<\/a><\/dt>\n
- 2. Introduction<\/a><\/dt>\n
- 3. Prerequisites<\/a><\/dt>\n
- 4. Set up the project<\/a><\/dt>\n
- 5. Coding the example<\/a><\/dt>\n
- \n
\n- 5.1 Styles<\/a><\/dt>\n
- \n
\n- 5.1.1 .v-window-contents<\/a><\/dt>\n
- 5.1.2 .v-window-outerheader<\/a><\/dt>\n
- 5.1.3 .v-window-header<\/a><\/dt>\n
- 5.1.4 .v-window-closebox<\/a><\/dt>\n
- 5.1.5 .v-window-maximizebox<\/a><\/dt>\n
- 5.1.6 .v-window-restorebox<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.2 Modeless Window<\/a><\/dt>\n
- \n
\n- 5.2.1 The class<\/a><\/dt>\n
- 5.2.2 Constructor without parameters<\/a><\/dt>\n
- 5.2.3 Constructor with caption parameter<\/a><\/dt>\n
- 5.2.4 The create window method<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.3 Modal Window<\/a><\/dt>\n
- \n
\n- 5.3.1 The class<\/a><\/dt>\n
- 5.3.2 The constructor<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.4 Main Class init method<\/a><\/dt>\n
- \n
\n- 5.4.1 The layout<\/a><\/dt>\n
- 5.4.2 Modeless button<\/a><\/dt>\n
- 5.4.3 Modal button<\/a><\/dt>\n
- 5.4.4 Initial window<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n<\/dd>\n
- 6. The complete source code<\/a><\/dt>\n
- \n
\n- 6.1 Custom Styles<\/a><\/dt>\n
- 6.2 Modal Window<\/a><\/dt>\n
- 6.3 Modeless Window<\/a><\/dt>\n
- 6.4 Main Class<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 7. Running the example<\/a><\/dt>\n
- 8. Results<\/a><\/dt>\n
- \n
\n- 8.1 Initial Window<\/a><\/dt>\n
- 8.2 Modeless Window<\/a><\/dt>\n
- 8.3 Modal Window<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 9. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. The tools<\/h2>\n\n- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.7<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\nIn this example we are going to create a window when the application starts. We have two buttons to create a modal window and a modeless window when you press each button.
\nWe change the style of the window to show how to do it.<\/p>\n
<\/a>3. Prerequisites<\/h2>\n\n- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin plug-in installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
<\/a>4. Set up the project<\/h2>\nIn the file menu choose File -> New -> Other<\/p>\n
![\"01](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/01-New-Project-1.png\")
<\/a>1 New Project<\/figcaption><\/figure><\/p>\nNow from the list choose Vaadin 7 project<\/p>\n
![\"02](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/02-Vaadin-Project-1.png\")
<\/a>2 Vaadin Project<\/figcaption><\/figure><\/p>\nPress next and name your project then click finish.<\/p>\n
<\/a>5. Coding the example<\/h2>\n<\/a>5.1 Styles<\/h3>\nTo change the styles, edit the file:
\n[Project folder]-> WebContent -> VAADIN -> themes -> [Project Name] -> [Project Name].scss<\/p>\n
![\"3](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/07\/3-Edit-Styles.png\")
<\/a>3 Edit Styles<\/figcaption><\/figure><\/p>\nThe window has multiple parts to style.<\/p>\n
<\/a>5.1.1 .v-window-contents<\/h4>\n.v-window-contents<\/code> styles the client area of the window. This is the area where you place your widgets.<\/p>\n.v-window-contents<\/em><\/span><\/p>\n\t.v-window-mywindowstyle .v-window-contents {\n\t\tbackground: #EDEC76;\n\t}\n\n<\/pre>\nbackground: #EDEC76;<\/code> changes the background color to a tone of yellow.<\/p>\n<\/a>5.1.2 .v-window-outerheader<\/h4>\n.v-window-outerheader<\/code> styles the area where you put the window caption.<\/p>\n.v-window-outerheader<\/em><\/span><\/p>\n\t.v-window-mywindowstyle .v-window-outerheader {\n\t\tbackground: black;\n\t}\n\n<\/pre>\nbackground: black;<\/code> sets the background color to black.<\/p>\n<\/a>5.1.3 .v-window-header<\/h4>\n.v-window-header<\/code> Includes the outer header and also the area where the control buttons are placed.<\/p>\n.v-window-header<\/em><\/span><\/p>\n\t.v-window-mywindowstyle .v-window-header {\n\t\tcolor: white;\n\t}\n\n<\/pre>\ncolor: white;<\/code> sets the text color to white.<\/p>\n<\/a>5.1.4 .v-window-closebox<\/h4>\n.v-window-closebox<\/code> is the button to close the window.<\/p>\n.v-window-closebox<\/em><\/span><\/p>\n\t.v-window-mywindowstyle .v-window-closebox {\n\t\tbackground: black;\n\t}\n\n<\/pre>\nbackground: black;<\/code> sets the background color to black.<\/p>\n<\/a>5.1.5 .v-window-maximizebox<\/h4>\n.v-window-maximizebox<\/code> is the button to maximize the window.<\/p>\n.v-window-maximizebox<\/em><\/span><\/p>\n\t.v-window-mywindowstyle .v-window-maximizebox {\n\t\tbackground: black;\n\t}\n\n<\/pre>\nbackground: black;<\/code> sets the background color to black.<\/p>\n<\/a>5.1.6 .v-window-restorebox<\/h4>\n.v-window-restorebox<\/code> is the button to restore the window when is maximized.<\/p>\n.v-window-restorebox<\/em><\/span><\/p>\n\t.v-window-mywindowstyle .v-window-restorebox {\n\t\tbackground: black;\n\t}\n\n<\/pre>\nbackground: black;<\/code> sets the background color to black. <\/div> <\/div><\/p>\n<\/a>5.2 CustomWindow<\/h3>\nThis is a window to be opened when the user press the appropriate button. We put this window into its own class and use it from the Vaadin Init method.<\/p>\n
<\/a>5.2.1 The class<\/h4>\nThe class<\/em><\/span><\/p>\npublic class CustomWindow extends Window\n\n<\/pre>\nWe extend this class from Window.<\/p>\n
<\/a>5.2.2 Constructor without parameters<\/h4>\nCustomWindow()<\/em><\/span><\/p>\n\tpublic CustomWindow() {\n\t\tcreateWindow();\n\t}\n\n<\/pre>\nWith this constructor we create a window without using any parameters.<\/p>\n
<\/a>5.2.3 Constructor with caption parameter<\/h4>\nCustomWindow(String caption)<\/em><\/span><\/p>\n\tpublic CustomWindow(String caption) {\n\t\tsuper(caption);\n\t\tcreateWindow();\n\t}\n\n<\/pre>\nIn this constructor we pass the caption parameter to the super constructor of the class.<\/p>\n
<\/a>5.2.4 The create window method<\/h4>\ncreateWindow()<\/em><\/span><\/p>\n\tprivate void createWindow(){\n\t\tLabel message = new Label(\"This is a message\");\n\t\tButton close = new Button(\"Close\",FontAwesome.CLOSE);\n\t\tclose.addClickListener(new ClickListener() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t});\n\t\tVerticalLayout windowContent = new VerticalLayout();\n\t\twindowContent.setMargin(true);\n\t\tsetContent(windowContent);\n\t\twindowContent.addComponent(message);\n\t\twindowContent.addComponent(close);\n\t\tsetPosition(20, 150);\n\t\tsetWidth(\"250px\");\n\t\tsetHeight(\"150px\");\n\t\tsetClosable(false);\n\t\taddStyleName(\"mywindowstyle\");\n\t\t\n\t}\n\n<\/pre>\nLabel message = new Label(\"This is a message\");<\/code> Creates a label to be placed into the window.
\nButton close = new Button(\"Close\",FontAwesome.CLOSE);<\/code> Creates a button to close the window.<\/p>\nclose.addClickListener(new ClickListener()<\/code> Adds a click listener to the button.
\nclose();<\/code> When the close button is pressed this closes the window.<\/p>\nVerticalLayout windowContent = new VerticalLayout();<\/code> Creates a layout for the window.
\nwindowContent.setMargin(true);<\/code> Sets the margin of the layout.<\/p>\nsetContent(windowContent);<\/code> Sets the content of the window to use the layot.
\nwindowContent.addComponent(message);<\/code> Adds the label message to the layout.<\/p>\nwindowContent.addComponent(close);<\/code> Adds the button to the layout.
\nsetPosition(20, 150);<\/code> Sets the position of the window in pixels.<\/p>\nsetWidth(\"250px\");<\/code> Sets the width of the window in pixels.
\nsetHeight(\"150px\");<\/code> Sets the height of the window in pixels.<\/p>\nsetClosable(false);<\/code> Disables the upper right close button of the window
\naddStyleName(\"mywindowstyle\");<\/code> Adds the styles to the window.<\/p>\n<\/a>5.3 ModalWindow<\/h3>\nThis is a modal window that blocks the UI when is displayed.<\/p>\n
<\/a>5.3.1 The class<\/h4>\n
- \n
- 5.1 Styles<\/a><\/dt>\n
- \n
- \n
- 5.1.1 .v-window-contents<\/a><\/dt>\n
- 5.1.2 .v-window-outerheader<\/a><\/dt>\n
- 5.1.3 .v-window-header<\/a><\/dt>\n
- 5.1.4 .v-window-closebox<\/a><\/dt>\n
- 5.1.5 .v-window-maximizebox<\/a><\/dt>\n
- 5.1.6 .v-window-restorebox<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.2 Modeless Window<\/a><\/dt>\n
- \n
- \n
- 5.2.1 The class<\/a><\/dt>\n
- 5.2.2 Constructor without parameters<\/a><\/dt>\n
- 5.2.3 Constructor with caption parameter<\/a><\/dt>\n
- 5.2.4 The create window method<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.3 Modal Window<\/a><\/dt>\n
- \n
- \n
- 5.3.1 The class<\/a><\/dt>\n
- 5.3.2 The constructor<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.4 Main Class init method<\/a><\/dt>\n
- \n
- \n
- 5.4.1 The layout<\/a><\/dt>\n
- 5.4.2 Modeless button<\/a><\/dt>\n
- 5.4.3 Modal button<\/a><\/dt>\n
- 5.4.4 Initial window<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n<\/dd>\n
- 6. The complete source code<\/a><\/dt>\n
- \n
- \n
- 6.1 Custom Styles<\/a><\/dt>\n
- 6.2 Modal Window<\/a><\/dt>\n
- 6.3 Modeless Window<\/a><\/dt>\n
- 6.4 Main Class<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 7. Running the example<\/a><\/dt>\n
- 8. Results<\/a><\/dt>\n
- \n
- \n
- 8.1 Initial Window<\/a><\/dt>\n
- 8.2 Modeless Window<\/a><\/dt>\n
- 8.3 Modal Window<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 9. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. The tools<\/h2>\n
- \n
- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.7<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\n
In this example we are going to create a window when the application starts. We have two buttons to create a modal window and a modeless window when you press each button.
\nWe change the style of the window to show how to do it.<\/p>\n<\/a>3. Prerequisites<\/h2>\n
- \n
- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin plug-in installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
<\/a>4. Set up the project<\/h2>\n
In the file menu choose File -> New -> Other<\/p>\n
<\/a>1 New Project<\/figcaption><\/figure><\/p>\n Now from the list choose Vaadin 7 project<\/p>\n
<\/a>2 Vaadin Project<\/figcaption><\/figure><\/p>\n Press next and name your project then click finish.<\/p>\n
<\/a>5. Coding the example<\/h2>\n
<\/a>5.1 Styles<\/h3>\n
To change the styles, edit the file:
\n[Project folder]-> WebContent -> VAADIN -> themes -> [Project Name] -> [Project Name].scss<\/p>\n<\/a>3 Edit Styles<\/figcaption><\/figure><\/p>\n The window has multiple parts to style.<\/p>\n
<\/a>5.1.1 .v-window-contents<\/h4>\n
.v-window-contents<\/code> styles the client area of the window. This is the area where you place your widgets.<\/p>\n.v-window-contents<\/em><\/span><\/p>\n
\t.v-window-mywindowstyle .v-window-contents {\n\t\tbackground: #EDEC76;\n\t}\n\n<\/pre>\nbackground: #EDEC76;<\/code> changes the background color to a tone of yellow.<\/p>\n<\/a>5.1.2 .v-window-outerheader<\/h4>\n
.v-window-outerheader<\/code> styles the area where you put the window caption.<\/p>\n.v-window-outerheader<\/em><\/span><\/p>\n
\t.v-window-mywindowstyle .v-window-outerheader {\n\t\tbackground: black;\n\t}\n\n<\/pre>\nbackground: black;<\/code> sets the background color to black.<\/p>\n<\/a>5.1.3 .v-window-header<\/h4>\n
.v-window-header<\/code> Includes the outer header and also the area where the control buttons are placed.<\/p>\n.v-window-header<\/em><\/span><\/p>\n
\t.v-window-mywindowstyle .v-window-header {\n\t\tcolor: white;\n\t}\n\n<\/pre>\ncolor: white;<\/code> sets the text color to white.<\/p>\n<\/a>5.1.4 .v-window-closebox<\/h4>\n
.v-window-closebox<\/code> is the button to close the window.<\/p>\n.v-window-closebox<\/em><\/span><\/p>\n
\t.v-window-mywindowstyle .v-window-closebox {\n\t\tbackground: black;\n\t}\n\n<\/pre>\nbackground: black;<\/code> sets the background color to black.<\/p>\n<\/a>5.1.5 .v-window-maximizebox<\/h4>\n
.v-window-maximizebox<\/code> is the button to maximize the window.<\/p>\n.v-window-maximizebox<\/em><\/span><\/p>\n
\t.v-window-mywindowstyle .v-window-maximizebox {\n\t\tbackground: black;\n\t}\n\n<\/pre>\nbackground: black;<\/code> sets the background color to black.<\/p>\n<\/a>5.1.6 .v-window-restorebox<\/h4>\n
.v-window-restorebox<\/code> is the button to restore the window when is maximized.<\/p>\n.v-window-restorebox<\/em><\/span><\/p>\n
\t.v-window-mywindowstyle .v-window-restorebox {\n\t\tbackground: black;\n\t}\n\n<\/pre>\nbackground: black;<\/code> sets the background color to black.<\/div> <\/div><\/p>\n<\/a>5.2 CustomWindow<\/h3>\n
This is a window to be opened when the user press the appropriate button. We put this window into its own class and use it from the Vaadin Init method.<\/p>\n
<\/a>5.2.1 The class<\/h4>\n
The class<\/em><\/span><\/p>\n
public class CustomWindow extends Window\n\n<\/pre>\n
We extend this class from Window.<\/p>\n
<\/a>5.2.2 Constructor without parameters<\/h4>\n
CustomWindow()<\/em><\/span><\/p>\n
\tpublic CustomWindow() {\n\t\tcreateWindow();\n\t}\n\n<\/pre>\nWith this constructor we create a window without using any parameters.<\/p>\n
<\/a>5.2.3 Constructor with caption parameter<\/h4>\n
CustomWindow(String caption)<\/em><\/span><\/p>\n
\tpublic CustomWindow(String caption) {\n\t\tsuper(caption);\n\t\tcreateWindow();\n\t}\n\n<\/pre>\nIn this constructor we pass the caption parameter to the super constructor of the class.<\/p>\n
<\/a>5.2.4 The create window method<\/h4>\n
createWindow()<\/em><\/span><\/p>\n
\tprivate void createWindow(){\n\t\tLabel message = new Label(\"This is a message\");\n\t\tButton close = new Button(\"Close\",FontAwesome.CLOSE);\n\t\tclose.addClickListener(new ClickListener() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t});\n\t\tVerticalLayout windowContent = new VerticalLayout();\n\t\twindowContent.setMargin(true);\n\t\tsetContent(windowContent);\n\t\twindowContent.addComponent(message);\n\t\twindowContent.addComponent(close);\n\t\tsetPosition(20, 150);\n\t\tsetWidth(\"250px\");\n\t\tsetHeight(\"150px\");\n\t\tsetClosable(false);\n\t\taddStyleName(\"mywindowstyle\");\n\t\t\n\t}\n\n<\/pre>\nLabel message = new Label(\"This is a message\");<\/code> Creates a label to be placed into the window.
\nButton close = new Button(\"Close\",FontAwesome.CLOSE);<\/code> Creates a button to close the window.<\/p>\nclose.addClickListener(new ClickListener()<\/code> Adds a click listener to the button.
\nclose();<\/code> When the close button is pressed this closes the window.<\/p>\nVerticalLayout windowContent = new VerticalLayout();<\/code> Creates a layout for the window.
\nwindowContent.setMargin(true);<\/code> Sets the margin of the layout.<\/p>\nsetContent(windowContent);<\/code> Sets the content of the window to use the layot.
\nwindowContent.addComponent(message);<\/code> Adds the label message to the layout.<\/p>\nwindowContent.addComponent(close);<\/code> Adds the button to the layout.
\nsetPosition(20, 150);<\/code> Sets the position of the window in pixels.<\/p>\nsetWidth(\"250px\");<\/code> Sets the width of the window in pixels.
\nsetHeight(\"150px\");<\/code> Sets the height of the window in pixels.<\/p>\nsetClosable(false);<\/code> Disables the upper right close button of the window
\naddStyleName(\"mywindowstyle\");<\/code> Adds the styles to the window.<\/p>\n<\/a>5.3 ModalWindow<\/h3>\n
This is a modal window that blocks the UI when is displayed.<\/p>\n
<\/a>5.3.1 The class<\/h4>\n
- 8.2 Modeless Window<\/a><\/dt>\n
- 6.2 Modal Window<\/a><\/dt>\n
- 5.4.2 Modeless button<\/a><\/dt>\n
- 5.3.2 The constructor<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.2.2 Constructor without parameters<\/a><\/dt>\n
- 5.1.2 .v-window-outerheader<\/a><\/dt>\n
- \n