Details
-
Type:
New Feature
-
Status: Closed
-
Priority:
Critical
-
Resolution: Fixed
-
Affects Version/s: 1.5
-
Component/s: ICE-Components
-
Labels:None
-
Environment:Operating System: All
Platform: All
-
Affects:Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial
Description
When the user clicked the context-menu mouse button on their browser/platform, the menuPopup component would display at the mouse coordinates. Users could then use the mouse to navigate through the menus and select a menu item. Pressing ESC or click off the menu, or the menu losing focus should close the menu.
Additional reqs.:
- menu must position based on the mouse coord. where the button was pressed.
- menu could move its position and even the direction that sub-menus open
depending on proximity to top/bottom/left/right edges of the window (nice-to-have).
- Originally we thought that the menuPopup should support an event that fires when it is about to be displayed, which would allow the application to dynamically alter the state/contents of the menuPoup immediately prior to it's display, if desired. But, since the existing menuBar does not do a server round-trip to show its sub-level menuitems, we're not going to make menuPopup do that either.
- The clientId of the component that triggered the menuPoup should be included in the event parameters, so that when the menuitem is selected and a form submission occurs, the menuPopup's decode could know that clientId, possibly to include in an event.
- For a component to be able to have a menuPopup, that component's rendered html would need to include certain attributes that call Javascript functions. That means that menuPopup support has to be added on a component by component basis. Each supporting component would have an attribute like >> menuPopup="menuPopupComponentId" <<. So, there's no need to place a menuPopup component in any special place in the component hierarchy (except in a FORM, like a regular menuBar requires), since the menuPopup doesn't dictate the relationship, but rather each component with a menuPopup attribute does.
A recommended approach to implementing this feature is to create a new ice:menuPopup component that either extends or uses an ice:menuBar. This component would support the exact same menu sub-components used by the ice:menuBar component (ice:menuItem and ice:menuSeparator, etc.) to define a context menu. The differences between the popupMenu and the menuBar are that the popupMenu would support:
- Only a vertical orientation, that is, the top-level menuItems and menuSeparators would appear vertically stacked.
- We were think about constricting the styling so that top-level menuitems and sub-level menuitems would use the same style classes, but decided to just leave in the existing rendering behaviours, and just make the two CSS classes have the same content.
Issue Links
- is duplicated by
-
ICE-1778
ContextMenu for ICEfaces components
-
- Closed
-
Activity
Feedback from client:
"That is really good news, a pop-up menu would be ideal for me.
There is an open source Pop-up box available which i looked at which was
http://www.jenia.org/TestPopup/ but I've unable to get it to work on right
click, only on mouse over.
Features which would be useful would be: -
Right-click on object to display a menu. The ability to put most sorts of faces
component inside the menu: command links and buttons obviously but maybe also
things like drop down lists and even tree controls.
Left click to select the object.
Double left click to perform a different operation to the single left click."
| Field | Original Value | New Value |
|---|---|---|
| issue.field.bugzillaimportkey | 744 | 12000 |
| Affects Version/s | 1.5 [ 10027 ] | |
| Affects Version/s | 1.0.1 [ 10025 ] |
| Priority | Minor [ 4 ] | Major [ 3 ] |
| Fix Version/s | 1.6 [ 10031 ] |
| Assignee | Rob Mayhew [ rob.mayhew ] |
| Priority | Major [ 3 ] | Critical [ 2 ] |
| Assignee | Mark Collette [ mark.collette ] |
| Issue Type | Improvement [ 4 ] | New Feature [ 2 ] |
| Assignee Priority | P3 |
| Description |
This component would implement a menuPopup (context menu) component. When the user clicked the context-menu mouse button on their browser/platform, the menuPopup component would display at the mouse coordinates. Users could then use the mouse to navigate through the menus and select a menu item, or press-ESC or click off the menu to close the menu. We should be able to leverage or perhaps even just extend the existing menuBar and/or menuItem components for this. Specific complicating factors are: - menu must position based on the mouse coord. when the button was pressed. - menu must move its position and even the direction that sub-menus open depending on proximity to top/bottom/left/right edges of the window (nice-to-have). - menu must close if focus leaves the menu, or ESC pressed. Rob, please perform an initial analysis of the effort/impacts associated with this new component. |
This component would implement a menuPopup (context menu) component. When the user clicked the context-menu mouse button on their browser/platform, the menuPopup component would display at the mouse coordinates. Users could then use the mouse to navigate through the menus and select a menu item, or press-ESC or click off the menu to close the menu. We should be able to leverage or perhaps even just extend the existing menuBar and/or menuItem components for this. Additional reqs.: - menu must position based on the mouse coord. when the button was pressed. - menu must move its position and even the direction that sub-menus open depending on proximity to top/bottom/left/right edges of the window (nice-to-have). - menu must close if focus leaves the menu, or ESC pressed. - The contextMenu should support an event that fires when it is about to be displayed, this will allow the application to dynamically alter the state/contents of the contextMenu immediately prior to it's display, if desired. Of course, the ID of the component that is the target for the contextMenu should be included in the event parameters. A recommended approach to implementing this feature is to create a new ice:contextMenu component. This component would support the exact same menu sub-components used by the ice:menuBar component (ice:menuItem and ice:menuSeparator, etc.) to define a contextMenu. The differences between the contextMenu and the menuBar are that the contextMenu would support: - Only a vertical orientation, that is, the top-level menuItems and menuSeparators would appear vertically stacked. However, the styling for the top-level menu items should be identical to any child submenus, unlike the menuBar root level menuitems which have distinct styling from the submenus. - The ability to specify a "for" attribute that can be used to indicate which other components this contextMenu is associated with. Right-clicking (or clicking the defined "context-menu" mouse button) on one of the components in the "for" attribute would result in the contextMenu appearing at the mouse-location. |
The functionality of a 'for' attribute is very good, but I think we might run into a lot of component interaction issues if we don't make this simple. Perhaps simply being able to bind the for attribute to the id of a panelGroup would suffice to define right-click context areas.
perhaps I am looking at this differently as I would really like to see context menus within a dataTable and was thinking on how to do this directly (without a library) but thought it could be made generic using reflection, so why not include it as it's own component?
I would propose to use either annotation (or an interface to extend which would designate the methods to include in a context menu as well as the String to refer to them in the menu) for classes to denote which methods would be included in a context-menu popup. From an HCI perspective, if a user is viewing a dataTable, they would be able to click on a row (can get the location similar to ice:rowSelector perhaps) and use a popup Dialog that would get the methods marked for contextMenu (using reflection). Each of these items would be listed in the popup dialog as a link or command that would invoke the method on this object. (again, reflection)
The contextMenu would be enabled by right clicking on an item in the dataTable (or a right click on another ice component--as long as it has a class that implements that interface or is annotated correctly if we choose to go that route). The context menu then just becomes an enabled property of other ice:components.
| Assignee Priority | P3 | P1 |
| Description |
This component would implement a menuPopup (context menu) component. When the user clicked the context-menu mouse button on their browser/platform, the menuPopup component would display at the mouse coordinates. Users could then use the mouse to navigate through the menus and select a menu item, or press-ESC or click off the menu to close the menu. We should be able to leverage or perhaps even just extend the existing menuBar and/or menuItem components for this. Additional reqs.: - menu must position based on the mouse coord. when the button was pressed. - menu must move its position and even the direction that sub-menus open depending on proximity to top/bottom/left/right edges of the window (nice-to-have). - menu must close if focus leaves the menu, or ESC pressed. - The contextMenu should support an event that fires when it is about to be displayed, this will allow the application to dynamically alter the state/contents of the contextMenu immediately prior to it's display, if desired. Of course, the ID of the component that is the target for the contextMenu should be included in the event parameters. A recommended approach to implementing this feature is to create a new ice:contextMenu component. This component would support the exact same menu sub-components used by the ice:menuBar component (ice:menuItem and ice:menuSeparator, etc.) to define a contextMenu. The differences between the contextMenu and the menuBar are that the contextMenu would support: - Only a vertical orientation, that is, the top-level menuItems and menuSeparators would appear vertically stacked. However, the styling for the top-level menu items should be identical to any child submenus, unlike the menuBar root level menuitems which have distinct styling from the submenus. - The ability to specify a "for" attribute that can be used to indicate which other components this contextMenu is associated with. Right-clicking (or clicking the defined "context-menu" mouse button) on one of the components in the "for" attribute would result in the contextMenu appearing at the mouse-location. |
This component would implement a menuPopup (context menu) component. When the user clicked the context-menu mouse button on their browser/platform, the menuPopup component would display at the mouse coordinates. Users could then use the mouse to navigate through the menus and select a menu item. Pressing ESC or click off the menu, or the menu losing focus should close the menu. Additional reqs.: - menu must position based on the mouse coord. where the button was pressed. - menu could move its position and even the direction that sub-menus open depending on proximity to top/bottom/left/right edges of the window (nice-to-have). - Originally we thought that the menuPopup should support an event that fires when it is about to be displayed, which would allow the application to dynamically alter the state/contents of the menuPoup immediately prior to it's display, if desired. But, since the existing menuBar does not do a server round-trip to show its sub-level menuitems, we're not going to make menuPopup do that either. - The clientId of the component that triggered the menuPoup should be included in the event parameters, so that when the menuitem is selected and a form submission occurs, the menuPopup's decode could know that clientId, possibly to include in an event. - For a component to be able to have a menuPopup, that component's rendered html would need to include certain attributes that call Javascript functions. That means that menuPopup support has to be added on a component by component basis. Each supporting component would have an attribute like >> menuPopup="menuPopupComponentId" <<. So, there's no need to place a menuPopup component in any special place in the component hierarchy (except in a FORM, like a regular menuBar requires), since the menuPopup doesn't dictate the relationship, but rather each component with a menuPopup attribute does. A recommended approach to implementing this feature is to create a new ice:menuPopup component that either extends or uses an ice:menuBar. This component would support the exact same menu sub-components used by the ice:menuBar component (ice:menuItem and ice:menuSeparator, etc.) to define a context menu. The differences between the popupMenu and the menuBar are that the popupMenu would support: - Only a vertical orientation, that is, the top-level menuItems and menuSeparators would appear vertically stacked. - We were think about constricting the styling so that top-level menuitems and sub-level menuitems would use the same style classes, but decided to just leave in the existing rendering behaviours, and just make the two CSS classes have the same content. |
| Fix Version/s | 1.7DR#2 [ 10110 ] | |
| Affects | [Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial] |
| Summary | Create new menuPopup component. | Create new menuPopup component |
I've added the basic ice:menuPopup component, which extends ice:menuBar, and maintains most of that behaviour. As well, there's a new attribute on ice:panelGroup, called menuPopup, which can be set to the id of an ice:menuPopup, so that if you do a context-click inside that ice:panelGroup, it will trigger the specified ice:menuPopup.
There is a preliminary attempt at an appropriate set of style classes in xp.css, which has to be fixed up, and replicated to the other CSS files.
The menuBar demo in the component-showcase has been modified to also show off the menuPopup, for internal testing only. It should be changed before being released externally.
Subversion 14955
Modified
icefaces\bridge\component\menu.js
icefaces\component-metadata\src\main\java\com\icesoft\metadata\generators\TagLibraryGenerator.java
icefaces\component-metadata\src\main\java\com\icesoft\metadata\generators\TLDGenerator.java
icefaces\component-metadata\src\main\resources\conf\extended-faces-config.xml
icefaces\component-metadata\src\main\resources\conf\ice_properties\ice-panelGroup-props.xml
icefaces\component\conf\META-INF\facelet\icefaces.taglib.xml
icefaces\component\conf\META-INF\faces-config.xml
icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java
icefaces\component\src\com\icesoft\faces\component\ext\HtmlPanelGroup.java
icefaces\component\src\com\icesoft\faces\component\ext\renderkit\GroupRenderer.java
icefaces\component\src\com\icesoft\faces\component\menubar\MenuBar.java
icefaces\component\src\com\icesoft\faces\component\menubar\MenuBarRenderer.java
icefaces\component\src\com\icesoft\faces\component\menubar\MenuItemRenderer.java
icefaces\core\src\com\icesoft\faces\renderkit\dom_html_basic\DomBasicRenderer.java
icefaces\core\src\com\icesoft\faces\renderkit\dom_html_basic\HTML.java
icefaces\core\src\com\icesoft\faces\resources\css\xp\xp.css
icefaces\samples\component-showcase\src\com\icesoft\icefaces\samples\showcase\components\menuBar\MenuBarBean.java
icefaces\samples\component-showcase\web\inc\components\menuBar.jspx
Added
icefaces\component-metadata\src\main\resources\conf\custom\menuPopup-component.xml
icefaces\component-metadata\src\main\resources\conf\custom\menuPopup-renderer.xml
icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-menuPopup-props.xml
icefaces\component-metadata\src\main\resources\conf\ice_properties\ice-att-menuPopup-props.xml
icefaces\component\src\com\icesoft\faces\component\menupopup\MenuPopup.java
icefaces\component\src\com\icesoft\faces\component\menupopup\MenuPopupRenderer.java
| Assignee | Mark Collette [ mark.collette ] | Yip Ng [ yip.ng ] |
| Repository | Revision | Date | User | Message |
| ICEsoft Public SVN Repository | #14957 | Mon Oct 15 17:58:50 MDT 2007 | yip.ng | Added calls to resolve URL for menu item image source path. Changed width of menu item image to match the width of blank icon. |
| Files Changed | ||||
MODIFY
/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/menubar/MenuItemRenderer.java
MODIFY
/icefaces/trunk/icefaces/core/src/com/icesoft/faces/resources/css/xp/xp.css
|
Fixe alignment problem of "File" menu item:
Added calls to resolve URL for menu item image source path.
Changed width of menu item image to match the width of blank icon.
Modified:
svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\menubar\MenuItemRenderer.java
svn\ossrepo\icefaces\trunk\icefaces\core\src\com\icesoft\faces\resources\css\xp\xp.css
revision: 14957
| Repository | Revision | Date | User | Message |
| ICEsoft Public SVN Repository | #14970 | Wed Oct 17 11:17:49 MDT 2007 | yip.ng | Fixed bug which caused overlapping of top level menu div and second level menu div. Fixed alignment of menu item image, menu item label and submenu indicator arrow. Fixed positioning of submenu indicator arrow in the top level menu div. |
| Files Changed | ||||
|
MODIFY
/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/menubar/MenuItemRenderer.java
MODIFY
/icefaces/trunk/icefaces/core/src/com/icesoft/faces/resources/css/xp/xp.css
|
Fixed bug which caused overlapping of top level menu div and second level menu div.
Fixed alignment of menu item image, menu item label and submenu indicator arrow.
Fixed positioning of submenu indicator arrow in the top level menu div.
Modified:
svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\menubar\MenuItemRenderer.java
svn\ossrepo\icefaces\trunk\icefaces\core\src\com\icesoft\faces\resources\css\xp\xp.css
revision: 14970
| Repository | Revision | Date | User | Message |
| ICEsoft Public SVN Repository | #14971 | Wed Oct 17 14:06:37 MDT 2007 | yip.ng | Ported stylesheet changes to royale theme and portlet theme. |
| Files Changed | ||||
|
MODIFY
/icefaces/trunk/icefaces/core/src/com/icesoft/faces/resources/css/xp/xp-portlet.css
MODIFY
/icefaces/trunk/icefaces/core/src/com/icesoft/faces/resources/css/royale/royale.css
|
Ported stylesheet changes to royale theme and portlet theme.
Modified: svn\ossrepo\icefaces\trunk\icefaces\core\src\com\icesoft\faces\resources\css\royale\royale.css
Modified: svn\ossrepo\icefaces\trunk\icefaces\core\src\com\icesoft\faces\resources\css\xp\xp-portlet.css
revision: 14971
| Status | Open [ 1 ] | Resolved [ 5 ] |
| Resolution | Fixed [ 1 ] |
| Fix Version/s | 1.7 [ 10080 ] |
| Status | Resolved [ 5 ] | Closed [ 6 ] |
| Assignee Priority | P1 | |
| Assignee | Yip Ng [ yip.ng ] |
"Pressing ESC or click off the menu, or the menu losing focus should close the menu. "
I am having problem closing the menu in FireFox 3 and IE 6. or it has never been implemented?
Lower priority, out of scope for v1.1. release.