Here we demonstrate how and where menus, context menus, and tool bars are applied based on their different characteristics.

Menu and Menubar

A Menubar can contain either Menuitem or Menu as its child components. Menu should have a Menupopup if you want to put multiple Menuitems under a Menu. Between Menuitems, we can also put Menuseparator to introduce more separation. A Menu can be put into a Menupopup to build a nested, multilevel menu.

When the attribute autodrop is set to true on Menubars, a Menupopup will appear when a mouse pointer hovers on the corresponding Menu.

<menubar autodrop="true">
	<menu label="Car">
		<menupopup>
			<menu label="New">
				<menupopup>
					<menuitem label="Small Car" />
					<menuitem label="Mediem Car" />
					<menuitem label="Large Car" />
				</menupopup>
			</menu>
			<menuitem label="Search" />
		</menupopup>
	</menu>
...
</menubar>

The Menuitem can be disabled through its disabled attribute. An icon can be attached through the image attribute. Assigning checkmark="true" will show a check box leading a Menuitem. While checkmark is set to true, if autocheck is also set to true then the checkbox will be automatically checked when an user clicks on the Menuitem.

<menuitem label="Redo" disabled="true" image="/.../edit_redo.png" />
<menuitem label="Sort by Name" checkmark="true" autocheck="true" />

Context Menu

To use Menupopup as a context menu, specify an ID for the Menupopup, and assign it to the context attribute of a target component with its ID as shown in the snippet below. When users right click on the target component, an Image component in this case, the context menu will appear.

<menupopup id="editPopup">
	<menuitem label="View" />
	...
</menupopup>
<image ... context="editPopup" />

Toolbar and Button

Toolbar can have one or more Toolbarbuttons which are similar to Buttons except they are without a boxed border. A Toolbarbutton can show text through the label attribute; however, the common usage is assigning it with an image using its image attribute. Hence it comes with an attribute called tooltiptext so a tooltip can appear when it's hovered over.

<toolbar>
	<toolbarbutton image="/.../file_new.png" tooltiptext="New" />
	...
</toolbar>

The Button may have any of label, icon and/or image. It also supports the orient and dir attributes to control the label and image's layout within it.

<window title="ZK Car Catalog Management Console" border="normal" width="600px"
	apply="demo.getting_started.menu_toolbar.MenuController">
	<style src="/widgets/getting_started/menu_toolbar/style.css" />
	<menubar autodrop="true">
		<menu label="Car">
			<menupopup>
				<menu label="New">
					<menupopup>
						<menuitem label="Small Car" />
						<menuitem label="Medium Car" />
						<menuitem label="Large Car" />
					</menupopup>
				</menu>
				<menuitem label="Search" />
			</menupopup>
		</menu>
		<menu label="Edit">
			<menupopup>
				<menuitem label="Undo"
					image="/widgets/getting_started/menu_toolbar/img/edit_undo.png" />
				<menuitem label="Redo" disabled="true"
					image="/widgets/getting_started/menu_toolbar/img/edit_redo.png" />
				<menuseparator />
				<menuitem label="Cut"
					image="/widgets/getting_started/menu_toolbar/img/edit_cut.png" />
				<menuitem label="Copy"
					image="/widgets/getting_started/menu_toolbar/img/edit_copy.png" />
				<menuitem label="Paste"
					image="/widgets/getting_started/menu_toolbar/img/edit_paste.png" />
				<menuseparator />
				<menuitem label="Select All"
					image="/widgets/getting_started/menu_toolbar/img/edit_select-all.png" />
			</menupopup>
		</menu>
		<menu label="View">
			<menupopup>
				<menuitem label="Sort by Name" checkmark="true" autocheck="true" />
				<menuitem label="Sort by Date" checkmark="true" autocheck="true" />
			</menupopup>
		</menu>
		<menu label="Help">
			<menupopup>
				<menuitem label="Help Content" />
				<menuitem label="About" />
			</menupopup>
		</menu>
	</menubar>
	<toolbar>
		<toolbarbutton image="/widgets/getting_started/menu_toolbar/img/file_new.png" tooltiptext="New"/>
		<toolbarbutton image="/widgets/getting_started/menu_toolbar/img/edit_undo.png" tooltiptext="Undo"/>
		<toolbarbutton image="/widgets/getting_started/menu_toolbar/img/edit_cut.png" tooltiptext="Cut"/>
		<toolbarbutton image="/widgets/getting_started/menu_toolbar/img/edit_copy.png" tooltiptext="Copy"/>
		<toolbarbutton image="/widgets/getting_started/menu_toolbar/img/edit_paste.png" tooltiptext="Paste"/>
	</toolbar>
	<menupopup id="editPopup">
		<menuitem label="View" />
		<menuitem label="Edit" />
		<menuitem label="Delete" />
	</menupopup>
	<image src="/widgets/getting_started/img/car1.png" width="140px" sclass="icon"
		tooltiptext="Right click to show menu" context="editPopup" />
	<image src="/widgets/getting_started/img/car2.png" width="140px" sclass="icon"
		tooltiptext="Right click to show menu" context="editPopup" />
	<image src="/widgets/getting_started/img/car3.png" width="140px" sclass="icon"
		tooltiptext="Right click to show menu" context="editPopup" />
	<image src="/widgets/getting_started/img/car4.png" width="140px" sclass="icon"
		tooltiptext="Right click to show menu" context="editPopup" />
	<image src="/widgets/getting_started/img/car5.png" width="140px" sclass="icon"
		tooltiptext="Right click to show menu" context="editPopup" />
	<image src="/widgets/getting_started/img/car6.png" width="140px" sclass="icon"
		tooltiptext="Right click to show menu" context="editPopup" />
	<hlayout sclass="taskbar">
		<button iconSclass="z-icon-windows" />
		<button id="left" label="Cars on Sale" iconSclass="z-icon-dollar"/>
		<button id="right" label="50% Off with Card" iconSclass="z-icon-credit-card" dir="reverse"/>
	</hlayout>
</window>

package demo.getting_started.menu_toolbar;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.MouseEvent;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.impl.LabelElement;

public class MenuController extends SelectorComposer<Component> {
	
	private static final long serialVersionUID = 1L;

	@Listen("onClick = menuitem")
	public void menuAction(MouseEvent event){
		showNotify("Clicked on "+((LabelElement)event.getTarget()).getLabel());
	}
	
	@Listen("onClick = toolbarbutton")
	public void toolbarAction(MouseEvent event){
		showNotify("Clicked on "+((LabelElement)event.getTarget()).getTooltiptext());
	}
	
	@Listen("onClick = button")
	public void buttonAction(){
		showNotify("Switch to a task.");
	}
	
	private void showNotify(String msg){
		Clients.showNotification(msg,"info",null,null,1000);
	}
}