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 Make a design<\/a><\/dt>\n
- 5.2 Annotations<\/a><\/dt>\n
- 5.3 Navigator<\/a><\/dt>\n
- \n
\n- 5.3.1 Layout & content<\/a><\/dt>\n
- 5.3.2 Navigator views<\/a><\/dt>\n
- 5.3.3 Menu listeners<\/a><\/dt>\n
- 5.3.4 Menu<\/a><\/dt>\n
- 5.3.5 Navigator initial page<\/a><\/dt>\n
- 5.3.6 Welcome page<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.4 Validate user input<\/a><\/dt>\n
- \n
\n- 5.4.1 Input form<\/a><\/dt>\n
- 5.4.2 Name field validator<\/a><\/dt>\n
- 5.4.3 Surname field validator<\/a><\/dt>\n
- 5.4.4 Age field validator<\/a><\/dt>\n
- 5.4.5 Age field validator<\/a><\/dt>\n
- 5.4.6 Validation process<\/a><\/dt>\n
- 5.4.7 Clear fields<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.5 Use containers in fields<\/a><\/dt>\n
- \n
\n- 5.5.1 Property sets<\/a><\/dt>\n
- 5.5.2 Field groups<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.6 Separate the UI from the data<\/a><\/dt>\n
- 5.7 Deploy on https<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 6. The complete source code<\/a><\/dt>\n
- \n
\n- 6.1 VaadinbestpracticesUI.java<\/a><\/dt>\n
- 6.2 WelcomePage.java<\/a><\/dt>\n
- 6.3 InputPage.java<\/a><\/dt>\n
- 6.4 DataPage.java<\/a><\/dt>\n
- 6.5 DataBean.java<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 7. Running the example<\/a><\/dt>\n
- 8. Results<\/a><\/dt>\n
- \n
\n- 8.1 Welcome view<\/a><\/dt>\n
- 8.2 Input view<\/a><\/dt>\n
- 8.3 Input view<\/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.8<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\nIn this example we are going to illustrate best practices used to make Vaadin applications. We are going to make a Vaadin example to illustrate these practices.<\/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>\nClick next and name your project then click finish.<\/p>\n
<\/a>5. The example<\/h2>\n<\/a>5.1 Make a design<\/h3>\nThe design is the blueprint of our program. It is better to invest some time making a good design and when the design is ready, start coding the application.
\nIn our case we have an application that has a menu and three views, each button on the menu changes the view. We have a welcome view that displays a welcome label.
\nAn input view to input some fields, and a view to show all the data.<\/p>\n
![\"3](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/07\/3-Design.png\")
<\/a>3 Design<\/figcaption><\/figure><\/p>\n<\/a>5.2 Annotations<\/h3>\nIt is recommended to use annotations to define our servlet, because Vaadin uses annotations by default for convenience.
\nConvenience over configuration is a design pattern used to avoid huge configuration files and promotes flexibility.<\/p>\n
Annotations<\/em><\/span><\/p>\n\t@WebServlet(value = \"\/*\", asyncSupported = true)\n\t@VaadinServletConfiguration(productionMode = false, ui = VaadinbestpracticesUI.class, widgetset = \"com.example.vaadinbestpractices.widgetset.VaadinbestpracticesWidgetset\")\n<\/pre>\n<\/a>5.3 Navigator<\/h3>\nUse a navigator to change the views in the application. The navigator was created for this task. We use the navigator in our init application method.<\/p>\n
<\/a>5.3.1 Layout & content<\/h4>\nIn our init method, first we create the layout and the content panel to use with the navigator.<\/p>\n
Layout & content<\/em><\/span><\/p>\n\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tsetContent(layout);\n\t\tPanel contentPanel = new Panel(\"Main Panel\");\n\t\tcontentPanel.setSizeUndefined();\n<\/pre>\nfinal VerticalLayout layout = new VerticalLayout();<\/code> Creates the layout.
\nlayout.setMargin(true);<\/code> Sets the margin of the layout.<\/p>\nsetContent(layout);<\/code> Sets the layout as the main layout.
\nPanel contentPanel = new Panel(\"Main Panel\");<\/code> Creates a panel yo use with the navigator.<\/p>\ncontentPanel.setSizeUndefined();<\/code> Sets the size of the panel.<\/p>\n<\/a>5.3.2 Navigator views<\/h4>\nWe create the navigator and attach the views used in our application. In this case we have 3 views: welcome, input and data.<\/p>\n
Navigators views<\/em><\/span><\/p>\n\t\tnew Navigator(this, contentPanel);\n\t\tgetNavigator().addView(InputPage.NAME, InputPage.class);\n\t\tgetNavigator().addView(WelcomePage.NAME, WelcomePage.class);\n\t\tgetNavigator().addView(DataPage.NAME, DataPage.class);\n<\/pre>\nnew Navigator(this, contentPanel);<\/code> Creates the navigator using the panel as a placeholder.
\ngetNavigator().addView(InputPage.NAME, InputPage.class);<\/code> Adds the input view to the navigator.<\/p>\ngetNavigator().addView(WelcomePage.NAME, WelcomePage.class);<\/code> Adds the welcome view to the navigator.
\ngetNavigator().addView(DataPage.NAME, DataPage.class);<\/code> Adds the data view to the navigator.<\/p>\n<\/a>5.3.3 Menu listeners<\/h4>\nWe are going to navigate our application using a menu. Each time we click on a menu button the navigator changes the view. For each menu button we have a listener to change the view.<\/p>\n
Menubar listeners<\/em><\/span><\/p>\n\t\tMenuBar.Command welcome = new Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tgetNavigator().navigateTo(WelcomePage.NAME);\n\t\t\t}\n\t\t};\n\t\t\n\t\tMenuBar.Command input = new Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tgetNavigator().navigateTo(InputPage.NAME);\n\t\t\t}\n\t\t};\n\n\t\tMenuBar.Command data = new Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tgetNavigator().navigateTo(DataPage.NAME);\n\t\t\t}\n\t\t};\n<\/pre>\nMenuBar.Command welcome = new Command()<\/code> Creates a new menu command welcome.
\ngetNavigator().navigateTo(WelcomePage.NAME);<\/code> Navigates to the welcome page.<\/p>\nMenuBar.Command input = new Command()<\/code> Creates a new menu command input.
\ngetNavigator().navigateTo(InputPage.NAME);<\/code> Navigates to the input view.<\/p>\nMenuBar.Command data = new Command()<\/code> Creates a new menu command data.
\ngetNavigator().navigateTo(DataPage.NAME);<\/code> Navigates to the data view.<\/p>\n<\/a>5.3.4 Menu<\/h4>\nWe create the menu and attach the buttons to it. When a button is attached to the menu we use the menu command listener created before.<\/p>\n
Main menu<\/em><\/span><\/p>\n\t\tMenuBar mainMenu = new MenuBar();\n\t\tmainMenu.addItem(\"Welcome\", FontAwesome.ARROW_CIRCLE_LEFT, welcome);\n\t\tmainMenu.addItem(\"Input\", FontAwesome.WEIXIN, input);\n\t\tmainMenu.addItem(\"Data\", FontAwesome.LIST, data);\n<\/pre>\nMenuBar mainMenu = new MenuBar();<\/code> Creates a new menu bar.
\nmainMenu.addItem(\"Welcome\", FontAwesome.ARROW_CIRCLE_LEFT, welcome);<\/code> Add the welcome button to the menu.<\/p>\nmainMenu.addItem(\"Input\", FontAwesome.WEIXIN, input);<\/code> Add the input button to the menu.
\nmainMenu.addItem(\"Data\", FontAwesome.LIST, data);<\/code> Add the data button to the menu.<\/p>\n<\/a>5.3.5 Navigator initial page<\/h4>\nWe redirect the navigator to the page we want to show when the application is started.<\/p>\n
Navigator initial page<\/em><\/span><\/p>\n\t\tlayout.addComponent(mainMenu);\n\t\tlayout.addComponent(contentPanel);\n\t\tgetNavigator().navigateTo(WelcomePage.NAME);\n<\/pre>\nlayout.addComponent(mainMenu);<\/code> Adds the menu to the layout.
\nlayout.addComponent(contentPanel);<\/code> Adds the content panel to the layout.<\/p>\ngetNavigator().navigateTo(WelcomePage.NAME);<\/code> Navigates to the welcome page when the application is loaded.<\/p>\n<\/a>5.3.6 Welcome page<\/h4>\nThe welcome page is used as the initial page for the navigator.
<\/div> <\/div><\/p>\nWelcome page<\/em><\/span><\/p>\npublic class WelcomePage extends VerticalLayout implements View {\n\n\tprivate static final long serialVersionUID = 1L;\n\n\tpublic static final String NAME = \"welcomepage\";\n\t\n\tpublic WelcomePage() {\n\t\tsetMargin(true);\n\t\tsetSpacing(true);\n\t\tLabel welcome = new Label(\"Welcome\");\n\t\twelcome.addStyleName(\"h1\");\n\t\taddComponent(welcome);\n\t}\n\n}\n<\/pre>\npublic class WelcomePage extends VerticalLayout implements View<\/code> The welcome page used by the navigator must implements the view interface.
\npublic static final String NAME = \"welcomepage\";<\/code> The id of the welcome page to use with the navigator.<\/p>\nsetMargin(true);<\/code> Sets the margin of the layout.
\nsetSpacing(true);<\/code> Sets the spacing of the layout.<\/p>\nLabel welcome = new Label(\"Welcome\");<\/code> Creates a label.
\nwelcome.addStyleName(\"h1\");<\/code> Adds a predefined style to the label.<\/p>\naddComponent(welcome);<\/code> Adds the label to the layout.<\/p>\n<\/a>5.4 Validate user input<\/h3>\nThe data entered by a user is prone to errors and mistakes and is sane to have a validation process in the input of the data.
\nWe have a view with three input fields to show the validation process.
\nTo validate our input fields we use the Vaadin validator.<\/p>\n
<\/a>5.4.1 Input form<\/h4>\nInput form<\/em><\/span><\/p>\n\t\tFormLayout inputForm = new FormLayout();\n\t\tinputForm.setMargin(true);\n\t\tinputForm.setSpacing(true);\n\t\tinputPanel.setContent(inputForm);\n<\/pre>\nFormLayout inputForm = new FormLayout();<\/code> Creates the input form.
\ninputForm.setMargin(true);<\/code> Sets the margin of the input form.<\/p>\ninputForm.setSpacing(true);<\/code> Sets the spacing of the input form.
\ninputPanel.setContent(inputForm);<\/code> Sets the input form as the content of the input panel.<\/p>\n<\/a>5.4.2 Name field validator<\/h4>\nName Field<\/em><\/span><\/p>\n\t\tTextField name = new TextField(\"Name\");\n\t\tname.setNullSettingAllowed(true);\n\t\tname.setNullRepresentation(\"\");\n\t\tname.addValidator(new StringLengthValidator(\"Name must have 3-15 characters lenght\", 3, 15, true));\n\t\tname.setValidationVisible(true);\n\t\tinputForm.addComponent(name);\n<\/pre>\nTextField name = new TextField(\"Name\");<\/code> Creates a name text field.
\nname.setNullSettingAllowed(true);<\/code> Allows null in the text field.<\/p>\nname.setNullRepresentation(\"\");<\/code> Sets the null representation to a empty string.
\nname.addValidator(new StringLengthValidator(\"Name must have 3-15 characters lenght\", 3, 15, true));<\/code>
\nAdds the validator to the text field.
\nThe validator checks that the string entered into the text field has a length greater than 3 and less than 15.
\nname.setValidationVisible(true);<\/code> Sets the validator visible.
\ninputForm.addComponent(name);<\/code> Add the text field to the form.<\/p>\n<\/a>5.4.3 Surname field validator<\/h4>\nSurname Field<\/em><\/span><\/p>\n\t\tTextField surname = new TextField(\"Surname\");\n\t\tsurname.setNullSettingAllowed(true);\n\t\tsurname.setNullRepresentation(\"\");\n\t\tsurname.addValidator(new StringLengthValidator(\"Surname must have 3-15 characters lenght\", 3, 15, true));\n\t\tsurname.setValidationVisible(true);\n\t\tinputForm.addComponent(surname);\n<\/pre>\nTextField surname = new TextField(\"Surname\");<\/code> Creates a text field to the surname.
\nsurname.setNullSettingAllowed(true);<\/code> Alows null in the text field.<\/p>\nsurname.setNullRepresentation(\"\");<\/code> Sets the null representation to a empty string.
\nsurname.addValidator(new StringLengthValidator(\"Surname must have 3-15 characters lenght\", 3, 15, true));<\/code>
\nAdds the validator to the text field.
\nThe validator checks that the string entered into the text field has a length greater than 3 and less than 15.
\nsurname.setValidationVisible(true);<\/code> Sets the validator visible.
\ninputForm.addComponent(surname);<\/code> Add the text field to the form.<\/p>\n
- \n
- 5.1 Make a design<\/a><\/dt>\n
- 5.2 Annotations<\/a><\/dt>\n
- 5.3 Navigator<\/a><\/dt>\n
- \n
- \n
- 5.3.1 Layout & content<\/a><\/dt>\n
- 5.3.2 Navigator views<\/a><\/dt>\n
- 5.3.3 Menu listeners<\/a><\/dt>\n
- 5.3.4 Menu<\/a><\/dt>\n
- 5.3.5 Navigator initial page<\/a><\/dt>\n
- 5.3.6 Welcome page<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.4 Validate user input<\/a><\/dt>\n
- \n
- \n
- 5.4.1 Input form<\/a><\/dt>\n
- 5.4.2 Name field validator<\/a><\/dt>\n
- 5.4.3 Surname field validator<\/a><\/dt>\n
- 5.4.4 Age field validator<\/a><\/dt>\n
- 5.4.5 Age field validator<\/a><\/dt>\n
- 5.4.6 Validation process<\/a><\/dt>\n
- 5.4.7 Clear fields<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.5 Use containers in fields<\/a><\/dt>\n
- \n
- \n
- 5.5.1 Property sets<\/a><\/dt>\n
- 5.5.2 Field groups<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.6 Separate the UI from the data<\/a><\/dt>\n
- 5.7 Deploy on https<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 6. The complete source code<\/a><\/dt>\n
- \n
- \n
- 6.1 VaadinbestpracticesUI.java<\/a><\/dt>\n
- 6.2 WelcomePage.java<\/a><\/dt>\n
- 6.3 InputPage.java<\/a><\/dt>\n
- 6.4 DataPage.java<\/a><\/dt>\n
- 6.5 DataBean.java<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 7. Running the example<\/a><\/dt>\n
- 8. Results<\/a><\/dt>\n
- \n
- \n
- 8.1 Welcome view<\/a><\/dt>\n
- 8.2 Input view<\/a><\/dt>\n
- 8.3 Input view<\/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.8<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\n
In this example we are going to illustrate best practices used to make Vaadin applications. We are going to make a Vaadin example to illustrate these practices.<\/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 Click next and name your project then click finish.<\/p>\n
<\/a>5. The example<\/h2>\n
<\/a>5.1 Make a design<\/h3>\n
The design is the blueprint of our program. It is better to invest some time making a good design and when the design is ready, start coding the application.
\nIn our case we have an application that has a menu and three views, each button on the menu changes the view. We have a welcome view that displays a welcome label.
\nAn input view to input some fields, and a view to show all the data.<\/p>\n<\/a>3 Design<\/figcaption><\/figure><\/p>\n <\/a>5.2 Annotations<\/h3>\n
It is recommended to use annotations to define our servlet, because Vaadin uses annotations by default for convenience.
\nConvenience over configuration is a design pattern used to avoid huge configuration files and promotes flexibility.<\/p>\nAnnotations<\/em><\/span><\/p>\n
\t@WebServlet(value = \"\/*\", asyncSupported = true)\n\t@VaadinServletConfiguration(productionMode = false, ui = VaadinbestpracticesUI.class, widgetset = \"com.example.vaadinbestpractices.widgetset.VaadinbestpracticesWidgetset\")\n<\/pre>\n
<\/a>5.3 Navigator<\/h3>\n
Use a navigator to change the views in the application. The navigator was created for this task. We use the navigator in our init application method.<\/p>\n
<\/a>5.3.1 Layout & content<\/h4>\n
In our init method, first we create the layout and the content panel to use with the navigator.<\/p>\n
Layout & content<\/em><\/span><\/p>\n
\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tsetContent(layout);\n\t\tPanel contentPanel = new Panel(\"Main Panel\");\n\t\tcontentPanel.setSizeUndefined();\n<\/pre>\n
final VerticalLayout layout = new VerticalLayout();<\/code> Creates the layout.
\nlayout.setMargin(true);<\/code> Sets the margin of the layout.<\/p>\nsetContent(layout);<\/code> Sets the layout as the main layout.
\nPanel contentPanel = new Panel(\"Main Panel\");<\/code> Creates a panel yo use with the navigator.<\/p>\ncontentPanel.setSizeUndefined();<\/code> Sets the size of the panel.<\/p>\n<\/a>5.3.2 Navigator views<\/h4>\n
We create the navigator and attach the views used in our application. In this case we have 3 views: welcome, input and data.<\/p>\n
Navigators views<\/em><\/span><\/p>\n
\t\tnew Navigator(this, contentPanel);\n\t\tgetNavigator().addView(InputPage.NAME, InputPage.class);\n\t\tgetNavigator().addView(WelcomePage.NAME, WelcomePage.class);\n\t\tgetNavigator().addView(DataPage.NAME, DataPage.class);\n<\/pre>\n
new Navigator(this, contentPanel);<\/code> Creates the navigator using the panel as a placeholder.
\ngetNavigator().addView(InputPage.NAME, InputPage.class);<\/code> Adds the input view to the navigator.<\/p>\ngetNavigator().addView(WelcomePage.NAME, WelcomePage.class);<\/code> Adds the welcome view to the navigator.
\ngetNavigator().addView(DataPage.NAME, DataPage.class);<\/code> Adds the data view to the navigator.<\/p>\n<\/a>5.3.3 Menu listeners<\/h4>\n
We are going to navigate our application using a menu. Each time we click on a menu button the navigator changes the view. For each menu button we have a listener to change the view.<\/p>\n
Menubar listeners<\/em><\/span><\/p>\n
\t\tMenuBar.Command welcome = new Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tgetNavigator().navigateTo(WelcomePage.NAME);\n\t\t\t}\n\t\t};\n\t\t\n\t\tMenuBar.Command input = new Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tgetNavigator().navigateTo(InputPage.NAME);\n\t\t\t}\n\t\t};\n\n\t\tMenuBar.Command data = new Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tgetNavigator().navigateTo(DataPage.NAME);\n\t\t\t}\n\t\t};\n<\/pre>\nMenuBar.Command welcome = new Command()<\/code> Creates a new menu command welcome.
\ngetNavigator().navigateTo(WelcomePage.NAME);<\/code> Navigates to the welcome page.<\/p>\nMenuBar.Command input = new Command()<\/code> Creates a new menu command input.
\ngetNavigator().navigateTo(InputPage.NAME);<\/code> Navigates to the input view.<\/p>\nMenuBar.Command data = new Command()<\/code> Creates a new menu command data.
\ngetNavigator().navigateTo(DataPage.NAME);<\/code> Navigates to the data view.<\/p>\n<\/a>5.3.4 Menu<\/h4>\n
We create the menu and attach the buttons to it. When a button is attached to the menu we use the menu command listener created before.<\/p>\n
Main menu<\/em><\/span><\/p>\n
\t\tMenuBar mainMenu = new MenuBar();\n\t\tmainMenu.addItem(\"Welcome\", FontAwesome.ARROW_CIRCLE_LEFT, welcome);\n\t\tmainMenu.addItem(\"Input\", FontAwesome.WEIXIN, input);\n\t\tmainMenu.addItem(\"Data\", FontAwesome.LIST, data);\n<\/pre>\n
MenuBar mainMenu = new MenuBar();<\/code> Creates a new menu bar.
\nmainMenu.addItem(\"Welcome\", FontAwesome.ARROW_CIRCLE_LEFT, welcome);<\/code> Add the welcome button to the menu.<\/p>\nmainMenu.addItem(\"Input\", FontAwesome.WEIXIN, input);<\/code> Add the input button to the menu.
\nmainMenu.addItem(\"Data\", FontAwesome.LIST, data);<\/code> Add the data button to the menu.<\/p>\n<\/a>5.3.5 Navigator initial page<\/h4>\n
We redirect the navigator to the page we want to show when the application is started.<\/p>\n
Navigator initial page<\/em><\/span><\/p>\n
\t\tlayout.addComponent(mainMenu);\n\t\tlayout.addComponent(contentPanel);\n\t\tgetNavigator().navigateTo(WelcomePage.NAME);\n<\/pre>\n
layout.addComponent(mainMenu);<\/code> Adds the menu to the layout.
\nlayout.addComponent(contentPanel);<\/code> Adds the content panel to the layout.<\/p>\ngetNavigator().navigateTo(WelcomePage.NAME);<\/code> Navigates to the welcome page when the application is loaded.<\/p>\n<\/a>5.3.6 Welcome page<\/h4>\n
The welcome page is used as the initial page for the navigator.
<\/div> <\/div><\/p>\nWelcome page<\/em><\/span><\/p>\n
public class WelcomePage extends VerticalLayout implements View {\n\n\tprivate static final long serialVersionUID = 1L;\n\n\tpublic static final String NAME = \"welcomepage\";\n\t\n\tpublic WelcomePage() {\n\t\tsetMargin(true);\n\t\tsetSpacing(true);\n\t\tLabel welcome = new Label(\"Welcome\");\n\t\twelcome.addStyleName(\"h1\");\n\t\taddComponent(welcome);\n\t}\n\n}\n<\/pre>\npublic class WelcomePage extends VerticalLayout implements View<\/code> The welcome page used by the navigator must implements the view interface.
\npublic static final String NAME = \"welcomepage\";<\/code> The id of the welcome page to use with the navigator.<\/p>\nsetMargin(true);<\/code> Sets the margin of the layout.
\nsetSpacing(true);<\/code> Sets the spacing of the layout.<\/p>\nLabel welcome = new Label(\"Welcome\");<\/code> Creates a label.
\nwelcome.addStyleName(\"h1\");<\/code> Adds a predefined style to the label.<\/p>\naddComponent(welcome);<\/code> Adds the label to the layout.<\/p>\n<\/a>5.4 Validate user input<\/h3>\n
The data entered by a user is prone to errors and mistakes and is sane to have a validation process in the input of the data.
\nWe have a view with three input fields to show the validation process.
\nTo validate our input fields we use the Vaadin validator.<\/p>\n<\/a>5.4.1 Input form<\/h4>\n
Input form<\/em><\/span><\/p>\n
\t\tFormLayout inputForm = new FormLayout();\n\t\tinputForm.setMargin(true);\n\t\tinputForm.setSpacing(true);\n\t\tinputPanel.setContent(inputForm);\n<\/pre>\n
FormLayout inputForm = new FormLayout();<\/code> Creates the input form.
\ninputForm.setMargin(true);<\/code> Sets the margin of the input form.<\/p>\ninputForm.setSpacing(true);<\/code> Sets the spacing of the input form.
\ninputPanel.setContent(inputForm);<\/code> Sets the input form as the content of the input panel.<\/p>\n<\/a>5.4.2 Name field validator<\/h4>\n
Name Field<\/em><\/span><\/p>\n
\t\tTextField name = new TextField(\"Name\");\n\t\tname.setNullSettingAllowed(true);\n\t\tname.setNullRepresentation(\"\");\n\t\tname.addValidator(new StringLengthValidator(\"Name must have 3-15 characters lenght\", 3, 15, true));\n\t\tname.setValidationVisible(true);\n\t\tinputForm.addComponent(name);\n<\/pre>\n
TextField name = new TextField(\"Name\");<\/code> Creates a name text field.
\nname.setNullSettingAllowed(true);<\/code> Allows null in the text field.<\/p>\nname.setNullRepresentation(\"\");<\/code> Sets the null representation to a empty string.
\nname.addValidator(new StringLengthValidator(\"Name must have 3-15 characters lenght\", 3, 15, true));<\/code>
\nAdds the validator to the text field.
\nThe validator checks that the string entered into the text field has a length greater than 3 and less than 15.
\nname.setValidationVisible(true);<\/code> Sets the validator visible.
\ninputForm.addComponent(name);<\/code> Add the text field to the form.<\/p>\n<\/a>5.4.3 Surname field validator<\/h4>\n
Surname Field<\/em><\/span><\/p>\n
\t\tTextField surname = new TextField(\"Surname\");\n\t\tsurname.setNullSettingAllowed(true);\n\t\tsurname.setNullRepresentation(\"\");\n\t\tsurname.addValidator(new StringLengthValidator(\"Surname must have 3-15 characters lenght\", 3, 15, true));\n\t\tsurname.setValidationVisible(true);\n\t\tinputForm.addComponent(surname);\n<\/pre>\n
TextField surname = new TextField(\"Surname\");<\/code> Creates a text field to the surname.
\nsurname.setNullSettingAllowed(true);<\/code> Alows null in the text field.<\/p>\nsurname.setNullRepresentation(\"\");<\/code> Sets the null representation to a empty string.
\nsurname.addValidator(new StringLengthValidator(\"Surname must have 3-15 characters lenght\", 3, 15, true));<\/code>
\nAdds the validator to the text field.
\nThe validator checks that the string entered into the text field has a length greater than 3 and less than 15.
\nsurname.setValidationVisible(true);<\/code> Sets the validator visible.
\ninputForm.addComponent(surname);<\/code> Add the text field to the form.<\/p>\n
- 8.2 Input view<\/a><\/dt>\n
- 6.2 WelcomePage.java<\/a><\/dt>\n
- 5.5.2 Field groups<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.4.2 Name field validator<\/a><\/dt>\n
- 5.3.2 Navigator views<\/a><\/dt>\n
- 5.2 Annotations<\/a><\/dt>\n