--- title: MenuBar order: 25 layout: page --- [[components.menubar]] = [classname]#MenuBar# ifdef::web[] [.sampler] image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/menu-bar"] endif::web[] The [classname]#MenuBar# component allows creating horizontal dropdown menus, much like the main menu in desktop applications. [[figure.components.menubar]] .Menu Bar image::img/menubar-example1.png[] [[components.menubar.creation]] == Creating a Menu The actual menu bar component is first created as follows: [source, java] ---- MenuBar barmenu = new MenuBar(); main.addComponent(barmenu); ---- You insert the top-level menu items to the [classname]#MenuBar# object with the [methodname]#addItem()# method. It takes a string label, an icon resource, and a command as its parameters. The icon and command are not required and can be [parameter]#null#. The [methodname]#addItem()# method returns a [classname]#MenuBar.MenuItem# object, which you can use to add sub-menu items. The [classname]#MenuItem# has an identical [methodname]#addItem()# method. For example (the command is explained later): [source, java] ---- // A top-level menu item that opens a submenu MenuItem drinks = barmenu.addItem("Beverages", null, null); // Submenu item with a sub-submenu MenuItem hots = drinks.addItem("Hot", null, null); hots.addItem("Tea", new ThemeResource("icons/tea-16px.png"), mycommand); hots.addItem("Coffee", new ThemeResource("icons/coffee-16px.png"), mycommand); // Another submenu item with a sub-submenu MenuItem colds = drinks.addItem("Cold", null, null); colds.addItem("Milk", null, mycommand); colds.addItem("Weissbier", null, mycommand); // Another top-level item MenuItem snacks = barmenu.addItem("Snacks", null, null); snacks.addItem("Weisswurst", null, mycommand); snacks.addItem("Bratwurst", null, mycommand); snacks.addItem("Currywurst", null, mycommand); // Yet another top-level item MenuItem servs = barmenu.addItem("Services", null, null); servs.addItem("Car Service", null, mycommand); ---- [[components.menubar.commands]] == Handling Menu Selection Menu selection is handled by executing a __command__ when the user selects an item from the menu. A command is a call-back class that implements the [classname]#MenuBar.Command# interface. [source, java] ---- // A feedback component final Label selection = new Label("-"); main.addComponent(selection); // Define a common menu command for all the menu items. MenuBar.Command mycommand = new MenuBar.Command() { public void menuSelected(MenuItem selectedItem) { selection.setValue("Ordered a " + selectedItem.getText() + " from menu."); } }; ---- ifdef::web[] [[components.menubar.menuitem]] == Menu Items Menu items have properties such as a caption, icon, enabled, visible, and description (tooltip). The meaning of these is the same as for components. Submenus are created by adding sub-items to an item with [methodname]#addItem()# or [methodname]#addItemBefore()#. The __command__ property is a [classname]#MenuBar.Command# that is called when the particular menu item is selected. The [methodname]#menuSelected()# callback gets the clicked menu item as its parameter. Menus can have __separators__, which are defined before or after an item with [methodname]#addSeparatorBefore()# or [methodname]#addSeparator()# on the item, respectively. [source, java] ---- MenuItem drinks = barmenu.addItem("Beverages", null, null); ... // A sub-menu item after a separator drinks.addSeparator(); drinks.addItem("Quit Drinking", null, null); ---- Enabling __checkable__ on an menu item with [methodname]#setCheckable()# allows the user to switch between checked and unchecked state by clicking on the item. You can set the checked state with [methodname]#setChecked()#. Note that if such an item has a command, the checked state is not flipped automatically, but you need to do it explicitly. Menu items have various other properties as well, see the API documentation for more details. endif::web[] [[components.menubar.css]] == CSS Style Rules [source, css] ---- .v-menubar { } .v-menubar-submenu { } .v-menubar-menuitem { } .v-menubar-menuitem-caption { } .v-menubar-menuitem-selected { } .v-menubar-submenu-indicator { } ---- The menu bar has the overall style name [literal]#++.v-menubar++#. Each menu item has [literal]#++.v-menubar-menuitem++# style normally and additionally [literal]#++.v-menubar-selected++# when the item is selected, that is, when the mouse pointer hovers over it. The item caption is inside a [literal]#++v-menubar-menuitem-caption++#. In the top-level menu bar, the items are directly under the component element. Submenus are floating [literal]#++v-menubar-submenu++# elements outside the menu bar element. Therefore, you should not try to match on the component element for the submenu popups. In submenus, any further submenu levels are indicated with a [literal]#++v-menubar-submenu-indicator++#. ifdef::web[] [[components.menubar.css.menuitems]] === Styling Menu Items You can set the CSS style name for the menu items with [methodname]#setStyleName()#, just like for components. The style name will be prepended with [literal]#++v-menubar-menuitem-++#. As [classname]#MenuBar# does not indicate the previous selection in any way, you can do that by highlighting the previously selected item. However, beware that the [literal]#++selected++# style for menu items, that is, [literal]#++v-menubar-menuitem-selected++#, is reserved for mouse-hover indication. [source, java] ---- MenuBar barmenu = new MenuBar(); barmenu.addStyleName("mybarmenu"); layout.addComponent(barmenu); // A feedback component final Label selection = new Label("-"); layout.addComponent(selection); // Define a common menu command for all the menu items MenuBar.Command mycommand = new MenuBar.Command() { MenuItem previous = null; public void menuSelected(MenuItem selectedItem) { selection.setValue("Ordered a " + selectedItem.getText() + " from menu."); if (previous != null) previous.setStyleName(null); selectedItem.setStyleName("highlight"); previous = selectedItem; } }; // Put some items in the menu barmenu.addItem("Beverages", null, mycommand); barmenu.addItem("Snacks", null, mycommand); barmenu.addItem("Services", null, mycommand); ---- You could then style the highlighting in CSS as follows: [source, css] ---- .mybarmenu .v-menubar-menuitem-highlight { background: #000040; /* Dark blue */ } ---- endif::web[] vanced/advanced-printing.asciidoc?h=JS-RPC-docs-link-syntax'>logtreecommitdiffstats
path: root/documentation/advanced/advanced-printing.asciidoc
blob: 0443f43cbe4c9527484b2b7b817154c9f631222e (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178