Context Menus"
m |
m (correct highlight (via JWB)) |
||
Line 6: | Line 6: | ||
__TOC__ | __TOC__ | ||
− | Components: < | + | Components: <code>popup</code> and <code>menupopup</code>. |
− | You can assign the ID of a < | + | You can assign the ID of a <code>popup</code> or <code>menupopup</code> component to the <code>context</code> attribute of any XUL component. This enables the <code>popup</code> or <code>menupopup</code> component to open when a user right-clicks on a XUL component. |
− | As depicted below, a context menu is enabled by assigning the < | + | As depicted below, a context menu is enabled by assigning the <code>popup/menupopup</code> ID to the <code>context</code> property of a XUL component. Of course, the same ID can be assigned to multiple components. |
<source lang="xml" > | <source lang="xml" > | ||
Line 35: | Line 35: | ||
− | Notice that the < | + | Notice that the <code>menupopup</code> 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 < | + | '''Tip:''' If you want to disable browser's default context menu, you can set the <code>context</code> attribute of a component to a non-existent ID. |
− | The < | + | The <code>popup</code> component is generic popup and you are able to place any kind of components inside of popup. For example, |
<source lang="xml" > | <source lang="xml" > | ||
Line 72: | Line 72: | ||
|- | |- | ||
| context | | context | ||
− | | When a user right clicks on a component which has an assigned < | + | | When a user right clicks on a component which has an assigned <code>context</code> attribute, the relative <code>popup</code> or <code>menupopup</code> component will be displayed. |
|- | |- | ||
| tooltip | | tooltip | ||
− | | When a user moves the mouse pointer over a component which has an assigned < | + | | When a user moves the mouse pointer over a component which has an assigned <code>context</code> attribute, the relative <code>popup</code> or <code>menupopup</code> component will be displayed. |
|- | |- | ||
| popup | | popup | ||
− | | When user clicks on a component which has an assigned < | + | | When user clicks on a component which has an assigned <code>popup</code> attribute, the relative <code>popup</code> or <code>menupopup</code> component will be displayed. |
|} | |} | ||
Line 112: | Line 112: | ||
</source> | </source> | ||
− | Please note you can specify any identifier in the < | + | Please note you can specify any identifier in the <code>popup</code>, <code>tooltip</code> and <code>context</code> attributes as long as they are within the same page. In other words, it is not confined by the ID space. |
=== The onOpen Event === | === The onOpen Event === | ||
− | Just before a context menu, a tooltip or a popup appears or disappears an < | + | Just before a context menu, a tooltip or a popup appears or disappears an <code>onOpen</code> event is sent to the context, tooltip or popup menu for notification. The event is an instance of the <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc> class. You can retrieve the component that caused the context menu, tooltip or popup to appear by calling the <code>getReference</code> method. |
− | To improve the performance, you can defer the creation of the content until it becomes visible – i.e., until the < | + | To improve the performance, you can defer the creation of the content until it becomes visible – i.e., until the <code>onOpen</code> event is received. The simplest way to defer the creation of the content is to use the <code>fulfill</code> attribute as shown below. |
<source lang="xml" > | <source lang="xml" > | ||
Line 126: | Line 126: | ||
</source> | </source> | ||
− | Then, the content (the ''Hi'' button) won't be created when the page is loaded. Rather, the content is created when the < | + | Then, the content (the ''Hi'' button) won't be created when the page is loaded. Rather, the content is created when the <code>onOpen</code> event is received at the first time. |
− | If you prefer to dynamically manipulate the content using Java, you can listen to the < | + | If you prefer to dynamically manipulate the content using Java, you can listen to the <code>onOpen</code> event as depicted below. |
<source lang="xml" > | <source lang="xml" > |
Latest revision as of 10:46, 19 January 2022
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.
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>