- \n
- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.7<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
2. Introduction<\/h2>\n
In this example we are going to create two menus. On each menu we are going to handle the click event and identify the parent and children item of the item we are clicking. Also we have some labels to give feedback of the action performed on the menu.<\/p>\n
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
4. Set up the project<\/h2>\n
In 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>\n Now 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>\n Press next and name your project then press finish.<\/p>\n
5. Coding the example<\/h2>\n
5.1 Layouts and labels<\/h3>\n
Layouts<\/em><\/span><\/p>\n
\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tlayout.setSpacing(true);\n\t\tsetContent(layout);\n\n\t\tHorizontalLayout menuLayout = new HorizontalLayout();\n\t\tmenuLayout.setSpacing(true);\n<\/pre>\n
>final VerticalLayout layout = new VerticalLayout();<\/code> creates a vertical layout.
\n>layout.setMargin(true);<\/code> Sets the margin of the vertical layout.<\/p>\n>layout.setSpacing(true);<\/code> Gets some space between the items inside the layout.
\n>setContent(layout);<\/code> Sets the vertical layout as our main layout.<\/p>\n>HorizontalLayout menuLayout = new HorizontalLayout();<\/code> Creates an Horizontal layout.
\n>menuLayout.setSpacing(true);<\/code> Sets some space inside the items of the horizontal layout.<\/p>\nLabels<\/em><\/span><\/p>\n
\t\tLabel myFirstLabel = new Label(\"-\");\n\t\tmyFirstLabel.addStyleName(\"myfirstlabel\");\n\t\t\n\t\tLabel mySecondLabel = new Label(\"-\");\n\t\tmySecondLabel.addStyleName(\"mysecondlabel\");\n\t\t\n\t\tLabel secondMenuLabel = new Label(\"-\");\n\t\tsecondMenuLabel.addStyleName(\"secondmenulabel\");\n<\/pre>\n
>Label myFirstLabel = new Label(\"-\");<\/code> Creates a label to show feedback when the user click a parent menu item.
\n>myFirstLabel.addStyleName(\"myfirstlabel\");<\/code> Assigns a style to the label.<\/p>\n>Label mySecondLabel = new Label(\"-\");<\/code> Creates another label to show when user click on a child menu item.
\n>mySecondLabel.addStyleName(\"mysecond<\/code> Adds a style to the second label.<\/p>\n>Label secondMenuLabel = new Label(\"<\/code> Creates a label to show the activity on the second menu.
\n>secondMenuLabel.addStyleName(\"secondmenulabel\");<\/code> Adds a style to the second menu label.<\/p>\n5.2 Styles<\/h3>\n
First label style<\/em><\/span><\/p>\n
.v-label-myfirstlabel {\n color: white;\n text-align: center;\n background-color: #6666FF;\t\n border-color: white;\n font-weight: bold;\n}\n<\/pre>\nIn this style we change the background color to a shade of blue and the text color to white, we center the text and the weight of the font is set to bold.<\/p>\n
Second label style<\/em><\/span><\/p>\n
.v-label-mysecondlabel {\n color: black;\n text-align: center;\n background-color: #EEFF44;\t\n border-color: white;\n font-weight: bold;\n}\n<\/pre>\nIn this style we change the background color to yellow and the text color to black.<\/p>\n
Second menu label style<\/em><\/span><\/p>\n
.v-label-secondmenulabel {\n color: white;\n text-align: center;\n background-color: #33AA33;\t\n border-color: white;\n font-weight: bold;\n}\n<\/pre>\nIn this style we change the background color to green and the text color to white.<\/p>\n
First menu style<\/em><\/span><\/p>\n
.v-menubar-firstmenu {\n\t background: #AAAAEE;\n\t} \n<\/pre>\nWe set the color of the menu to blue.<\/p>\n
Second menu style<\/em><\/span><\/p>\n
.v-menubar-firstmenu {\n\t background: #EEEEAA;\n\t} \n<\/pre>\nWe set the color of the menu to yellow<\/p>\n
5.3 Menu command callbacks<\/h3>\n
Parent callback<\/em><\/span><\/p>\n
\t\tMenuBar.Command myFirstCommand = new MenuBar.Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tmyFirstLabel.setValue(selectedItem.getText());\n\t\t\t\tif(selectedItem.hasChildren()){\n\t\t\t\t\tList items = selectedItem.getChildren();\n\t\t\t\t\tStringBuilder sb = new StringBuilder();\n\t\t\t\t\tfor(MenuItem item : items){\n\t\t\t\t\t\tsb.append(item.getText());\n\t\t\t\t\t}\n\t\t\t\t\tmySecondLabel.setValue(sb.toString());\n\t\t\t\t}else{\n\t\t\t\t\tmySecondLabel.setValue(\"-\");\n\t\t\t\t}\n\t\t\t\tsecondMenuLabel.setValue(\"-\");\n\t\t\t}\n\t\t};\n\n<\/pre>\nWe create a callback to the parent nodes of the menu.<\/p>\n
>myFirstLabel.setValue(selectedItem.getText());<\/code> Gets the text of the selected menu item and set it to the first label.
\n>if(selectedItem.hasChildren()){<\/code> Checks if the selected menu item has children.<\/p>\n>List items = selectedItem.getChildren();<\/code> Gets all children of the selected node.
\n>StringBuilder sb = new StringBuilder();<\/code> Creates a string builder.<\/p>\n>for(MenuItem item : items){<\/code> For each one of the children items.
\n>sb.append(item.getText());<\/code> Appens the node to the string builder.<\/p>\n>mySecondLabel.setValue(sb.toString());<\/code> Converts the string builder into string and copy it to the second label.
\n>mySecondLabel.setValue(\"-\");<\/code> If the node has no children it clears the second label.
\n>secondMenuLabel.setValue(\"-\");<\/code> Clears the second menu label.<\/div> <\/div><\/p>\nChildren callback<\/em><\/span><\/p>\n
\t\tMenuBar.Command mySecondCommand = new MenuBar.Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tmySecondLabel.setValue(selectedItem.getText());\n\t\t\t\tMenuItem parent = selectedItem.getParent();\n\t\t\t\tif(parent!=null){\n\t\t\t\t\tmyFirstLabel.setValue(parent.getText());\n\t\t\t\t}\n\t\t\t\tsecondMenuLabel.setValue(\"-\");\n\t\t\t}\n\t\t};\n<\/pre>\nWe define a callback to capture bottom end nodes clicks.<\/p>\n
>mySecondLabel.setValue(selectedItem.getText());<\/code> Sets the selected item text into the label value.
\n>MenuItem parent = selectedItem.getParent();<\/code> Gets the parent of the current node.<\/p>\n>if(parent!=null){<\/code> Checks if the selected item has parent.
\n>myFirstLabel.setValue(parent.getText());<\/code> Sets the first label to te parent value.<\/p>\n>secondMenuLabel.setValue(\"-\");<\/code> Clears the second menu label.<\/p>\nWe create a callback to use when the user interact with the second menu.<\/p>\n
Second menu callback<\/em><\/span><\/p>\n
\t\tMenuBar.Command secondMenuCommand = new MenuBar.Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tmyFirstLabel.setValue(\"-\");\n\t\t\t\tmySecondLabel.setValue(\"-\");\n\t\t\t\tsecondMenuLabel.setValue(\"second menu clicked \" + selectedItem.getText());\n\t\t\t}\n\t\t};\n<\/pre>\nWe create a callback to use when the user interacts with the second menu.<\/p>\n
>myFirstLabel.setValue(\"-\");<\/code> Clears the first label.
\n>mySecondLabel.setValue(\"-\");<\/code> Clears the second label.<\/p>\n>secondMenuLabel.setValue(\"second menu clicked \" + selectedItem.getText());<\/code> Sets the value of the second menu label.<\/p>\n5.4 First menu bar<\/h3>\n
We are going to create the top nodes first. Then we will add the child nodes level by level. For the icons we are going to use, the FontAwesome icons are included in Vaadin by default.
\nThe commands are attached on some of the nodes, only when we are going to use it. When we don’t need a command attached to a node, we use null as a parameter of the function.<\/p>\nCreate the first menu<\/em><\/span><\/p>\n
\t\tMenuBar menu = new MenuBar();\n\t\tmenu.addStyleName(\"firstmenu\");\n\t\tMenuItem file = menu.addItem(\"File\", FontAwesome.FOLDER, null);\n\t\tMenuItem edit = menu.addItem(\"Edit\", null, null);\n\t\tMenuItem help = menu.addItem(\"Help\", FontAwesome.QUESTION_CIRCLE, null);\n<\/pre>\n
>MenuBar menu = new MenuBar();<\/code> Creates the menu.
\n>menu.addStyleName(\"firstmenu\");<\/code> Adds the style of the menu.<\/p>\n>MenuItem file = menu.addItem(\"File\", FontAwesome.FOLDER, null);<\/code> Adds a “file” top node to the menu.
\n>MenuItem edit = menu.addItem(\"Edit\", null, null);<\/code> Adds a “Edit” top node.<\/p>\n>MenuItem help = menu.addItem(\"Help\", FontAwesome.QUESTION_CIRCLE, null);<\/code> Adds a “help” top node<\/p>\nPopulate the file node<\/em><\/span><\/p>\n
\t\tMenuItem create = file.addItem(\"New\", FontAwesome.NEWSPAPER_O, myFirstCommand);\n\t\tfile.addItem(\"Open\", FontAwesome.FOLDER_OPEN, myFirstCommand);\n\t\tfile.addItem(\"Close\", null, myFirstCommand);\n<\/pre>\n
>MenuItem create = file.addItem(\"New\", FontAwesome.NEWSPAPER_O, myFirstCommand);<\/code> Adds the item “New” to the file node and saves it to a variable in order later to add children to it.
\n>file.addItem(\"Open\", FontAwesome.FOLDER_OPEN, myFirstCommand);<\/code> Adds a “Open node”
\n>file.addItem(\"Close\", null, myFirstCommand);<\/code> Adds another item to the “File” node called “Close”.<\/p>\nPopulate the create node<\/em><\/span><\/p>\n
\t\tcreate.addItem(\"New Text File\", FontAwesome.FILE, mySecondCommand);\n\t\tcreate.addItem(\"Other\", mySecondCommand);\n<\/pre>\n
>create.addItem(\"New Text File\", FontAwesome.FILE, mySecondCommand);<\/code> Adds the item “New text File” to the create node.
\n>create.addItem(\"Other\", mySecondCommand);<\/code> Adds the “Other” node to the “create” node.<\/p>\nPopulate the edit node<\/em><\/span><\/p>\n
\t\tedit.addItem(\"Cut\", FontAwesome.CUT, myFirstCommand);\n\t\tedit.addItem(\"Copy\", FontAwesome.COPY, myFirstCommand);\n\t\tedit.addItem(\"Paste\", FontAwesome.PASTE, myFirstCommand);\n<\/pre>\n
>edit.addItem(\"Cut\", FontAwesome.CUT, myFirstCommand);<\/code> Adds the “Cut” node to the “edit” node.
\n>edit.addItem(\"Copy\", FontAwesome.COPY, myFirstCommand);<\/code> Adds the “Copy” node to the “edit” node.
\n>edit.addItem(\"Paste\", FontAwesome.PASTE, myFirstCommand);<\/code> Adds the “Paste” node to the “edit” node.<\/p>\nPopulate the help menu<\/em><\/span><\/p>\n
\t\thelp.addItem(\"Search\", FontAwesome.SEARCH, myFirstCommand);\n\t\tMenuItem index = help.addItem(\"Index\", myFirstCommand);\n\t\tMenuItem level01 = index.addItem(\"level01\", mySecondCommand);\n\t\tMenuItem level02 = level01.addItem(\"level02\", mySecondCommand);\n\t\tlevel02.addItem(\"level03\", mySecondCommand);\n\t\thelp.addSeparator();\n\t\thelp.addItem(\"About\", myFirstCommand);\n<\/pre>\n
>help.addItem(\"Search\", FontAwesome.SEARCH, myFirstCommand);<\/code> Adds the search item to the help menu.
\n>MenuItem index = help.addItem(\"Index\", myFirstCommand);<\/code> Adds the index item to the help menu.<\/p>\n>MenuItem level01 = index.addItem(\"level01\", mySecondCommand);<\/code> Adds the level01 item to the index menu.
\n>MenuItem level02 = level01.addItem(\"level02\", mySecondCommand);<\/code> Adds the level02 node to the level01 node.<\/p>\n>level02.addItem(\"level03\", mySecondCommand);<\/code> Adds the level03 node to the level02 node.
\n>help.addSeparator();<\/code> Adds a separator to the menu.<\/p>\n>help.addItem(\"About\", myFirstCommand);<\/code> Adds the about menu item to the help menu.<\/p>\nCreate the second Menu Bar<\/em><\/span><\/p>\n
\t\tMenuBar menu2 = new MenuBar();\n\t\tmenu2.addStyleName(\"secondmenu\");\n\t\tMenuItem item1 = menu2.addItem(\"Item1\", FontAwesome.ADN, null);\n\t\titem1.addItem(\"X1\", FontAwesome.AMBULANCE, secondMenuCommand);\n\t\titem1.addItem(\"X2\", FontAwesome.WIFI, secondMenuCommand);\n\t\titem1.addItem(\"X3\", FontAwesome.ADJUST, secondMenuCommand);\n\t\tmenu2.addItem(\"Item2\", FontAwesome._500PX, secondMenuCommand);\n\t\tmenu2.addItem(\"Menu3\", FontAwesome.QUESTION_CIRCLE, secondMenuCommand);\n<\/pre>\n
>MenuBar menu2 = new MenuBar(); C<\/code>reates the menu bar.
\n>menu2.addStyleName(\"secondmenu\");<\/code> Adds he style to the menu.[ulp id=’YBvYYzEYBUrADqmI’]<\/p>\n>MenuItem item1 = menu2.addItem(\"Item1\", FontAwesome.ADN, null);<\/code> Adds the item “Item1” to the menu root.
\n>item1.addItem(\"X1\", FontAwesome.AMBULANCE, secondMenuCommand);<\/code> Adds the node “X1” to the “item1” menu.<\/p>\n>item1.addItem(\"X2\", FontAwesome.WIFI, secondMenuCommand);<\/code> Adds the node “X2” to the “item1” menu.
\n>item1.addItem(\"X3\", FontAwesome.ADJUST, secondMenuCommand);<\/code> Adds the node “X3” to the “item1” menu.<\/p>\n>menu2.addItem(\"Item2\", FontAwesome._500PX, secondMenuCommand);<\/code> Adds the item “Item2” to the menu root.
\n>menu2.addItem(\"Menu3\", FontAwesome.QUESTION_CIRCLE, secondMen<\/code> Adds the item “Menu3” to the menu root.<\/p>\nAdd the widgets to the layout<\/em><\/span><\/p>\n
\t\tmenuLayout.addComponent(menu);\n\t\tmenuLayout.addComponent(menu2);\n\t\tlayout.addComponent(menuLayout);\n\t\tlayout.addComponent(myFirstLabel);\n\t\tlayout.addComponent(mySecondLabel);\n\t\tlayout.addComponent(secondMenuLabel);\n<\/pre>\n
>menuLayout.addComponent(menu);<\/code> Adds the first menu to the horizontal layout.
\n>menuLayout.addComponent(menu2);<\/code> Adds the second menu to the horizontal layout.<\/p>\n>layout.addComponent(menuLayout);<\/code> Adds the horizontal layout to the main vertical layout.
\n>layout.addComponent(myFirstLabel);<\/code> Adds the first label to the main vertical layout.<\/p>\n>layout.addComponent(mySecondLabel);<\/code> Adds the second label to the main vertical layout.
\n>layout.addComponent(secondMenuLabel);<\/code> Adds the second menu label to the main vertical layout.<\/p>\n6. The complete source code<\/h2>\n
vaadinmenu.scss<\/em><\/span><\/p>\n
@import \"..\/valo\/valo.scss\";\n\n@mixin vaadinmenu {\n @include valo;\n\n.v-label-myfirstlabel {\n color: white;\n text-align: center;\n background-color: #6666FF;\t\n border-color: white;\n font-weight: bold;\n}\n\n.v-label-mysecondlabel {\n color: black;\n text-align: center;\n background-color: #EEFF44;\t\n border-color: white;\n font-weight: bold;\n}\n\n.v-label-secondmenulabel {\n color: white;\n text-align: center;\n background-color: #33AA33;\t\n border-color: white;\n font-weight: bold;\n}\n\n.v-menubar-firstmenu {\n\t background: #AAAAEE;\n\t} \n\n.v-menubar-secondmenu {\n\t background: #EEEEAA;\n\t} \n\n\n}\n<\/pre>\nVaadinmenuUI.java<\/em><\/span><\/p>\n
package com.example.vaadinmenu;\n\nimport java.util.List;\n\nimport javax.servlet.annotation.WebServlet;\n\nimport com.vaadin.annotations.Theme;\nimport com.vaadin.annotations.VaadinServletConfiguration;\nimport com.vaadin.server.FontAwesome;\nimport com.vaadin.server.VaadinRequest;\nimport com.vaadin.server.VaadinServlet;\nimport com.vaadin.ui.HorizontalLayout;\nimport com.vaadin.ui.Label;\nimport com.vaadin.ui.MenuBar;\nimport com.vaadin.ui.MenuBar.MenuItem;\nimport com.vaadin.ui.UI;\nimport com.vaadin.ui.VerticalLayout;\n\n@SuppressWarnings(\"serial\")\n@Theme(\"vaadinmenu\")\npublic class VaadinmenuUI extends UI {\n\n\t@WebServlet(value = \"\/*\", asyncSupported = true)\n\t@VaadinServletConfiguration(productionMode = false, ui = VaadinmenuUI.class, widgetset = \"com.example.vaadinmenu.widgetset.VaadinmenuWidgetset\")\n\tpublic static class Servlet extends VaadinServlet {\n\t}\n\n\t@Override\n\tprotected void init(VaadinRequest request) {\n\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tlayout.setSpacing(true);\n\t\tsetContent(layout);\n\n\t\tHorizontalLayout menuLayout = new HorizontalLayout();\n\t\tmenuLayout.setSpacing(true);\n\t\t\n\t\tLabel myFirstLabel = new Label(\"-\");\n\t\tmyFirstLabel.addStyleName(\"myfirstlabel\");\n\t\t\n\t\tLabel mySecondLabel = new Label(\"-\");\n\t\tmySecondLabel.addStyleName(\"mysecondlabel\");\n\t\t\n\t\tLabel secondMenuLabel = new Label(\"-\");\n\t\tsecondMenuLabel.addStyleName(\"secondmenulabel\");\n\t\t\n\t\tMenuBar.Command myFirstCommand = new MenuBar.Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tmyFirstLabel.setValue(selectedItem.getText());\n\t\t\t\tif(selectedItem.hasChildren()){\n\t\t\t\t\tList items = selectedItem.getChildren();\n\t\t\t\t\tStringBuilder sb = new StringBuilder();\n\t\t\t\t\tfor(MenuItem item : items){\n\t\t\t\t\t\tsb.append(item.getText());\n\t\t\t\t\t}\n\t\t\t\t\tmySecondLabel.setValue(sb.toString());\n\t\t\t\t}else{\n\t\t\t\t\tmySecondLabel.setValue(\"-\");\n\t\t\t\t}\n\t\t\t\tsecondMenuLabel.setValue(\"-\");\n\t\t\t}\n\t\t};\n\t\t\n\t\tMenuBar.Command mySecondCommand = new MenuBar.Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tmySecondLabel.setValue(selectedItem.getText());\n\t\t\t\tMenuItem parent = selectedItem.getParent();\n\t\t\t\tif(parent!=null){\n\t\t\t\t\tmyFirstLabel.setValue(parent.getText());\n\t\t\t\t}\n\t\t\t\tsecondMenuLabel.setValue(\"-\");\n\t\t\t}\n\t\t};\n\n\t\tMenuBar.Command secondMenuCommand = new MenuBar.Command() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void menuSelected(MenuItem selectedItem) {\n\t\t\t\tmyFirstLabel.setValue(\"-\");\n\t\t\t\tmySecondLabel.setValue(\"-\");\n\t\t\t\tsecondMenuLabel.setValue(\"second menu clicked \" + selectedItem.getText());\n\t\t\t}\n\t\t};\n\n\t\tMenuBar menu = new MenuBar();\n\t\tmenu.addStyleName(\"firstmenu\");\n\t\tMenuItem file = menu.addItem(\"File\", FontAwesome.FOLDER, null);\n\t\tMenuItem edit = menu.addItem(\"Edit\", null, null);\n\t\tMenuItem help = menu.addItem(\"Help\", FontAwesome.QUESTION_CIRCLE, null);\n\t\t\n\t\tMenuItem create = file.addItem(\"New\", FontAwesome.NEWSPAPER_O, myFirstCommand);\n\t\tfile.addItem(\"Open\", FontAwesome.FOLDER_OPEN, myFirstCommand);\n\t\tfile.addItem(\"Close\", null, myFirstCommand);\n\t\t\n\t\tcreate.addItem(\"New Text File\", FontAwesome.FILE, mySecondCommand);\n\t\tcreate.addItem(\"Other\", mySecondCommand);\n\t\t\n\t\tedit.addItem(\"Cut\", FontAwesome.CUT, myFirstCommand);\n\t\tedit.addItem(\"Copy\", FontAwesome.COPY, myFirstCommand);\n\t\tedit.addItem(\"Paste\", FontAwesome.PASTE, myFirstCommand);\n\t\t\n\t\thelp.addItem(\"Search\", FontAwesome.SEARCH, myFirstCommand);\n\t\tMenuItem index = help.addItem(\"Index\", myFirstCommand);\n\t\tMenuItem level01 = index.addItem(\"level01\", mySecondCommand);\n\t\tMenuItem level02 = level01.addItem(\"level02\", mySecondCommand);\n\t\tlevel02.addItem(\"level03\", mySecondCommand);\n\t\thelp.addSeparator();\n\t\thelp.addItem(\"About\", myFirstCommand);\n\n\t\tMenuBar menu2 = new MenuBar();\n\t\tmenu2.addStyleName(\"secondmenu\");\n\t\tMenuItem item1 = menu2.addItem(\"Item1\", FontAwesome.ADN, null);\n\t\titem1.addItem(\"X1\", FontAwesome.AMBULANCE, secondMenuCommand);\n\t\titem1.addItem(\"X2\", FontAwesome.WIFI, secondMenuCommand);\n\t\titem1.addItem(\"X3\", FontAwesome.ADJUST, secondMenuCommand);\n\t\tmenu2.addItem(\"Item2\", FontAwesome._500PX, secondMenuCommand);\n\t\tmenu2.addItem(\"Menu3\", FontAwesome.QUESTION_CIRCLE, secondMenuCommand);\n\t\t\n\t\tmenuLayout.addComponent(menu);\n\t\tmenuLayout.addComponent(menu2);\n\t\tlayout.addComponent(menuLayout);\n\t\tlayout.addComponent(myFirstLabel);\n\t\tlayout.addComponent(mySecondLabel);\n\t\tlayout.addComponent(secondMenuLabel);\n\t}\n\n}\n<\/pre>\n7. Running the example<\/h2>\n
Right click on the project folder and choose Run as -> Run on server choose Tomcat 8 server and press finish.<\/p>\n
8. Results<\/h2>\n
Our main menu.<\/p>\n
![\"3](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/07\/3-Main-Menu.png\")
<\/a>3 Main Menu<\/figcaption><\/figure><\/p>\n The file menu.<\/p>\n
![\"4](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/07\/4-File-Menu.png\")
<\/a>4 File Menu<\/figcaption><\/figure><\/p>\n The help menu.<\/p>\n
![\"5](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/07\/5-Help-Menu.png\")
<\/a>5 Help Menu<\/figcaption><\/figure><\/p>\n Our second menu.<\/p>\n