2007 01 24DesignerProposal

This is the initial proposal based on designs by xDesign, feedback from the team, and competitive analysis of other visual builders.

overview

This is an initial proposal for a menu designer to be added to netbeans. After discussion it is generally agreed that we must support adding and deleting and moving items using a drag and drop approach. This means to create a new menu item you can drag it from the palette to an open menu. We may also support creating certain items through typing, though this is still up for debate. An example would be navigating to the end of a menu using the keyboard and pressing enter to begin typing into a new menu item. This would be an alternative way of adding a new menu item, but not a replacement for drag and drop. Using a context menu to add menu items for example.


drag and drop

In general the user can add components by dragging and dropping them from the palette to the menubar and menus. The user can also rearrange components in the menus by dragging and drop.

open issue should the user be able to delete menu items by dragging them off of a menu?

navigation

The user can navigate around the menu using the arrow keys or the mouse. Every effort should be made to make this feel like a normal menu system in a running application. To make drag and drop easy the menus should be sticky, meaning that they will stay open when the mouse button is released and must be clicked a second time to close. The user can navigate to submenus using the arrow keys as well as the usual mouse motions.

inline editing

To facilitate quick creation and editing of menus, certain features will be supported inline in addition to useing the property sheet.

At the bottom of each menu will be a blank area which says: type here. The user can navigate to that area then press enter to begin typing. The user can also click in that area to give it focus and begin typing. Both of these actions will create a new menu item ready for naming.

The user can add edit an existing menu item by navigating to it with the keyboard and pressing the enter key. This will enter the 'text entry mode' where the user can type the name of the menu, including mnemonics. The user can press enter again to save the changes and leave 'text entry mode' and return to navigation.

The user can add a submenu by navigating to the right edge of the target menu item using the keyboard or mouse. An empy submenu with a clickable area for text will appear. The user can then navigate into the submenu with the right arrow key and press enter to begin typing. The user could also click on that area to begin typing. In either case a new menu item will be created in that submenu. The original menu item that the user navigated from will change from being a menu item and become a menu (due to the limitation in Swing of menus and menuitems being different) and this new menu will contain the new menu item.

open issue should we allow the user to edit anything other than the text directly from the gui view? this will likely complicate keyboard navigation and also be hard to implement. On the other hand we do need to worry about A11y.

context menu

To facility quick creation and editing of menus, certain features will be supported using a context menu in addition to using the other methods. This context menu will have options to:

  • delete the currently selected menu item
  • edit the text of the currently selected menu item
  • open the action property editor for the currently selected menu item
  • insert a new jmenuitem (possibly other types too?) where the currently selected menu item is. the new menu will go in the spot of the current menu item, the current item will shift down by one.

open issue should we have a mini-toolbar at the bottom of the menu to supplement or replace the context menu?

details

1. User drags menu to design view from component palette:

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-1_2007_01_24DesignerProposal.png


1a. User drops the menu in the desired place in the design view. Visual aid for drop.

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-1a_2007_01_24DesignerProposal.png


2. Menu bar appears with default menus and their menu items, complete with standardized mnemonics, keyboard shortcuts, and submenus (this we kept from our original demo).

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-2_2007_01_24DesignerProposal.png


There's been some discussion around perhaps also providing a blank menu bar in the component palette, and of course, I wistfully recalled the customize-and-save-your-own-ui-snippet design from long ago. With that functionality, users would be able to tweak components and component sets like this and save to a particular area in a palette to reuse/share as they wish.

In any case, it should be trivial to delete menus/menu items from the prefab menu bar that we could provide in the component palette.


3. User clicks on any menu she wants to edit, and it opens up the menu with all its items/icon placeholders/mnemonics/accelerators.

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-3_2007_01_24DesignerProposal.png

4. User uses arrow keys and/or tab keys to navigate to different items to edit. Here she adds an icon to the New... menu item.

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-4_2007_01_24DesignerProposal.png

The user will use the enter key to enter into edit mode and also to accept edits and move back into "nav" mode. In any case, we want to avoid the need to double-click on items in order to edit them. It's also better to do this for A11Y reasons.

5. When users place focus on an item, the syntax for mnemonics is shown explicitly (VS does this too):

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-5_2007_01_24DesignerProposal.png

6. Keyboard shortcut editing...

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-6_2007_01_24DesignerProposal.png

7. Submenu editing...

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-7_2007_01_24DesignerProposal.png

8. User navigates through the various editable items for the menu item:

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-8_2007_01_24DesignerProposal.png

8a. Continuing to navigate:

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-8a_2007_01_24DesignerProposal.png

8b. Typing replaces text:

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-8b_2007_01_24DesignerProposal.png

9. User accepts changes with the enter key. The item is selected again, the "..." disappears from the higher level menu item, and submenu arrow becomes enabled. Next submenu item appears (VS does this). Non-edited placeholder items do not show up in live app:

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-9_2007_01_24DesignerProposal.png

10. User can drag and drop stuff around inside the menu as well as dragging items like "Jmenuitem" from component palette... same as up in the menu bar level. Visual aid appears for drpo:

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-10_2007_01_24DesignerProposal.png

10a. User can also use a contextual menu to do some higher level stuff like "open up actions editor:"

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-10a_2007_01_24DesignerProposal.png

11. As for how to insert new menu items/menus, I thought the contextual menu might work best with this scheme. We can definitely have shortcuts for things like the divider (e.g., if the user types in -- the menu item automatically turns into a divider). Oh, you can have things like "delete" in the contextual menu, too, although a way to do that from the keyboard (select, hit delete key) should be accommodated.

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-11_2007_01_24DesignerProposal.png

12. Another option is to provide a sort of mini toolbar attached to the menu somehow for quick access to stuff that we're providing in the contextual menu. (Look & feel TBD, please do not take design of drawer literally.)

http://wiki.netbeans.org/wiki/attach/2007_01_24DesignerProposal/menueditor070116-12_2007_01_24DesignerProposal.png

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo