Context Menus

This documentation is for an older version of ZK. For the latest one, please click here.

This documentation is for an older version of ZK. For the latest one, please click here.

Components: popup and menupopup.

You can assign the ID of a popup or menupopup component to the context attribute of any XUL component. This enables the popup or menupopup component to open when a user right-clicks on a XUL component.

As depicted below, a context menu is enabled by assigning the popup/menupopup ID to the context property of a XUL component. Of course, the same ID can be assigned to multiple components.

<zk>
	<menupopup id="editPopup">
	    <menuitem label="Undo"/>
	    <menuitem label="Redo"/>
	    
	    <menu label="Sort">
	        <menupopup>
	            <menuitem label="Sort by Name" autocheck="true"/>
	            <menuitem label="Sort by Date" autocheck="true"/>
	        </menupopup>
	    </menu>
	</menupopup>
	
	<label value="Right Click Me!" context="editPopup"/>
	<separator bar="true"/>
	<label value="Right Click Me!" onRightClick="alert(self.value)"/>
</zk>

Notice that the menupopup is not visible until a user right-clicks on a component that is associated with its’ ID.

Tip: If you want to disable browser's default context menu, you can set the context attribute of a component to a non-existent ID.

The popup component is generic popup and you are able to place any kind of components inside of popup. For example,

<zk>
	<label value="Right Click Me!" context="any"/>
</zk>

<zk>
	<label value="Right Click Me!" context="any"/>
	
	<popup id="any" width="300px">
	    <vbox>
	         It can be anything.
	        <toolbarbutton label="ZK" href="http://zk1.sourceforge.net"/>
	    </vbox>
	</popup>
</zk>

Customizable Tooltip and Popup Menus

In addition to opening a popup when a user right-clicks a component, ZK can display a popup under other circumstances.

Property	Description
context	When a user right clicks on a component which has an assigned context attribute, the relative popup or menupopup component will be displayed.
tooltip	When a user moves the mouse pointer over a component which has an assigned context attribute, the relative popup or menupopup component will be displayed.
popup	When user clicks on a component which has an assigned popup attribute, the relative popup or menupopup component will be displayed.

For example,

<window title="Context Menu and Right Click" border="normal" width="360px">
    <label value="Move Mouse Over Me!" tooltip="editPopup"/>
    <separator bar="true"/>
    <label value="Tooptip for Another Popup" tooltip="any"/>
    <separator bar="true"/>
    <label value="Click Me!" popup="editPopup"/>

    <menupopup id="editPopup">
            <menuitem label="Undo"/>
            <menuitem label="Redo"/>
            <menu label="Sort">
        <menupopup>
            <menuitem label="Sort by Name" autocheck="true"/>
            <menuitem label="Sort by Date" autocheck="true"/>
        </menupopup>
            </menu>
    </menupopup>
    <popup id="any" width="300px">
        <vbox>
             ZK simply rich.
            <toolbarbutton label="ZK your killer Web application now!"                        href="[http://zk1.sourceforge.net/ http://zk1.sourceforge.net]"/>
        </vbox>
	</popup>
</window>

Please note you can specify any identifier in the popup, tooltip and context attributes as long as they are within the same page. In other words, it is not confined by the ID space.

The onOpen Event

Just before a context menu, a tooltip or a popup appears or disappears an onOpen event is sent to the context, tooltip or popup menu for notification. The event is an instance of the OpenEvent class. You can retrieve the component that caused the context menu, tooltip or popup to appear by calling the getReference method.

To improve the performance, you can defer the creation of the content until it becomes visible – i.e., until the onOpen event is received. The simplest way to defer the creation of the content is to use the fulfill attribute as shown below.

<popup id="any" width="300px" fulfill="onOpen">
   <button label="Hi"/><!-- whatever content -->
</popup>

Then, the content (the Hi button) won't be created when the page is loaded. Rather, the content is created when the onOpen event is received at the first time.

If you prefer to dynamically manipulate the content using Java, you can listen to the onOpen event as depicted below.

<zk>
	<popup id="any" width="300px">
	    <attribute name="onOpen">
	     if (event.isOpen()) {
	         if (self.getChildren().isEmpty()) {
	             new Button("Hi").setParent(self);
	             
	         }
	         if (event.getReference() instanceof Textbox) {
	             //you can do component-dependent manipulation here
	             
	         }
	     }
	    </attribute>
	</popup>
	
	<label value="hello" context="any" />
</zk>