New unified UI of Component Palette
Design Specification

Author: Dusan Pavlica
Version: 4.0
Last Update: 05/25/2005

 

Contents:

  1. Introduction
  2. Requirements
  • Design specification
  • Open issues
  •  

     

    1. Introduction

    There was a idea to have the Component Palette consistent in the Netbeans, Mobil edition and Creator too.
    That's why we started to communicate across all products to check their requirements and ideas about that unified Palette.
    Another reason for some change of current Component Palette came from usability study of new GUI Builder prototype.
    The following document was created with respect to facts above:

    • http://ui.netbeans.org/docs/ui/palette/index1.html

    This document continues in the goal and we would like to make the Palette more consistent in all products.
    All teams of products were asked for requirements and then all of them were evaluated.

    There are some improvements in look and behavior of Palette according to this evaluation.

     

    2. Requirements

    All requirements have been discussed among product teams and the following list is the result of those discussions:

    A) Appearance

    • Must Have
    1. The palette represents a two-level hierarchy of objects (JSE 1, Mobility 1):
      • The first level is a category or group of palette items.
      • The second level is the actual palette items.
    2. Categories are containers that contain items visually represented by an icon, display name and tooltip (All)
    3. Categories can be collapsed or expanded to hide/show individual items (All).
    4. More than one category can be opened (expanded) at the same time (JSE 2, Mobility 3).
    5. Each category should support scrolling when all of the categories palette items are not visible (All).
    6. Popup menu can be invoked on categories and individual items. Contents of the popup menu can be defined by clients. (JSE I5, Mobility 8)
    7. Allow user to add/remove items to categories. (J2EE)
    8. Allow user to add/remove categories. Removing a category removes its items. (J2EE)
    9. Comment from Mobility on 6 and 7: We would like to have a control over the adding and removing. For example, in our palette, some items are removable and some not.
    • Should Have
    1. Allow user to re-arrange the order of items in a category (via drag'n'drop).
    2. Allow user to move items among categories (via drag'n'drop).
    3. In maximized mode, both the editor and its associated palette should be visible (Mobility, JSE).
    4. Palette should be "lockable", i.e. show even when the current editor is maximized (JSE, Mobility).
    5. Clients can control when and where the palette appears - depends on the model provider implementation (Mobility).
    • Nice to Have
    1. Support different palette views -- Small Icons, Big Icons, List, Details (similar to Windows Explorer).
    2. User should be able to 'pin' some compartments. Meaning - If he does not want a compartment to be resized, he should be allowed to pin this. See 'Eclipse palette' for this.
    3. The palette UI should scale well both for vertical and horizontal layout orientation (Mobility).

     

    S) Selection modes

    • Must Have
    1. Only one palette item can be selected at any given time (JSE).
    2. Two selection modes should be supported:
    3. Click to select an item in the palette. Selected item remains active for potentially multiple subsequent actions, visual feedback is provided to show the currently selected item.
    4. Pick an item and drag it. The palette doesn't remember the "selected" item. (Issue with keyboard navigation?)
      Support for multi-drop mode (pick an item in the palette and drop it in the editor multiple times).
    • Should Have
    1. Clicking on a selected item deselects it (Mobility).
    2. Clients can clear the selection programmatically (Mobility).
    • Nice to Have
    1. Clients will be notified about selection changes (Mobility).

     

    C) Configuration

    • Should Have
    1. A palette manager. It should be possible to add aditional actions into the manager (like "Add from Project...") (NB, Mobility, Creator)

     

     

    3. Design specification

    Old unified Palette - version 1

    The first specification of unified Palette covered most requirements but implementations in products (Creator, Mobility and Netbeans) are different a bit:


    Netbeans

     

    Creator

     

     

    Mobility

             
    Figure 1: Current look of the Palette in products

     

     

     

    New unified Palette - version 2

    We need to focuse on the following in the current version of Component Palette:

    • Content of the Palette window
    • Switching content of the Palette (Components, Code Clips, etc..)
    • Categories and Items inside
    • Views inside the Palette
    • Sorting of items
    • Mouse manipulation
    • Keyboard manipulation
    • Contextual menu above the Palette
    • Palette Customizer (for categories and components)
    • Consistent Look&Feel on all three supported platforms

     

     

    Content of the Palette window

    • The Palette is intended for items used in Editor area.
    • Palette contains expandable/collapsable categories and items (components, code clips, etc..) under categories.
    • Group of linked items inside any category (e.g. Table with two child: Table row and Table column) can exist and its visualization is described bellow.
    • User can add items into the Editor by mouse (click, double click, drag&drop) or by keyboard (Enter).
    • User can add items into the Palette by mouse (drag&drop) or by Palette Manager.
    • Palette can contain a Toolbar situated at the top of it and it depends on clients. The important actions (Customize Palette, Expand All Categories, Colpase All Categories) can be displayed in that Toolbar.

     

     

    Switching content of the Palette

    • Internal area of the Palette window should be sharable, which means context sensitive to active Editor (Source, Design, JSP, XML, HTML, etc...)
    • When any Editor is opened and Palette has appropriate items for it, then should be displayed immediately
    • In a case when it takes more time then 100ms, wait cursor should be displayed.
    • When none items are available, then message about it should be displayed inside the window (in the same style as message in Properties or Navigator window)
    • In case some Editor can be linked with more different groups of item (Visual Components and Code Clips) there are two possible approaches:
    • The Palette will contain mixture of those items in one area
    • User can switch between those groups inside the Palette. Switchers will look like toggle buttons situated in a Toolbar at the top of the Palette.

     

     

    Categories and Items inside

    • Categories are simplified in the new design. Their look and behavior is similar to categories in the Properties window.
    • Each category can be independently expanded or collapsed and selected state should be persistent.
    • If all items don't fit into the visible area of the Palette, then Scrollbar at the right side of the Palette (bottom side) will appear.
    • The color of categories' background is the same like in the Properties (note: It's different for each L&F).
    • Selection color for categories is taken from color of tree node selection on each platform.
    • Items inside categories are visualized as a toggle buttons with appropriate mouse over, mouse pressed and mouse selection effects.
    • Some items are children of another item and then they should be presented differently. They will be indented from left side. User cann't drag those children.
    • Look of those toggle buttons is standard and defined by Look&Feel
    • User can add, edit, remove, hide or restore categories and items from Contextual menu above inside area of the Palette or in the Palette Customizer.
    • Removing a category removes its items too.
    • Most items are removable but some not and in that case Remove action in contextual menu or in the Palette Customizer has to be disabled.
    • When user hides or removes categories or item (from Contextual menu items or by shortcuts) it will disappear from list of items in the Palette. But it can be reverted in the Palette customizer.
    • User can reorganize Categories or Items by Drag&Drop inside the Palette's area or in the Palette Customizer.

     

     

    Views inside the Palette

    List of items with small 16x16 icons was default view in old design. It was changed to view containing icons and labels together.
    View containing 32x32 icons is new one and it was created according to results from usability study. User can switch among those possible views by Show Item names/Hide Item Names and Show Bigger Icons/Hide Bigger Icons contextual menu items. This menu items exists in contextual menu invoked over all area of the Palette except its titlebar.

    Figure 2: Different views inside the Palette

     

    There is possibility to see more columns of Components at one time and then horizontal layout of the Palette is supported by this feature.

    Figure 3 - Horizontal layout of the Palette with items inside

     

     

    Sorting inside the Palette

    User can sort items inside the Palette by the following radio button menu items in the Contextual menu:

    • Sort by Item Name - Typical Alphabetical sorting by names of items.
    • Sort by Used Items - It will cause re-sorting of items from most used at the top till the least used items at the bottom of each category.
    • Sort by Custom Order - This sorting is selected by default and items are adjusted by their importance. User can change order of items by Drag&Drop or in the Palette Customizer.
    • Order of Categories is adjusted by their importance by default, but user can change it by Drag&Drop action or in the Palette Customizer.
    • Each change done by Drag&Drop or in the Palette customizer should be persistent.

     

     

    Mouse manipulation

    • User can single-click on category or item.
    • A single-click on category causes its expanding or collapsing.
    • A single-click on item in the Palette selects it. Selected item remains active and user can use it more then once by dropping multiply in the editor or unselect it back by another single-click.
    • A double-click on a Palette item creates a new item in the editor at the default location. The location depends on type of editor. It should be position of a text cursor for text editors and for the visual editor the location depends on logic in that editor.
    • In a case of parametrized item the dialog for appropriate parameters will appear immediately after double-click.
    • User can drag&drop items from the Palette into the editor surface and then the palette doesn't remember the selected item.
    • User can manipulate with categories and items by Drag&Drop and mouse feedback should look like D&D feedback in some TreeView in the Netbeans (e.g. in the Projects Window).
    • Some items are children of another item and user cann't drag those children only their parents.
    • User can drag selected text from editor to the Palette surface and then dialog for name of new item will appear.

    There is slightly different behavior for cooperation with visual editors after first single-click on item in the Palette and the following:

    • single-click on the editor surface displays the default size of item (component in a case of visual editor) at the click location in the editor.
    • single-click on the editor surface+mouse dragging causes the same like in previous point + resizing of item (component)

     

     

    Keyboard manipulation

    • User can move among items and categories by TAB/Shift+TAB or Arrow keys (Up,Down and Left Right too).
    • The context menu should be shown when Shift+F10 keyword action is performed.
    • An Enter keyword action on a selected Palette item will perform the same action like double-click on the item.
    • User can Copy&Paste (Ctrl+C & Ctrl+V) selected text from the Editor to the Palette and then dialog for name of new item will appear.
    • Shortcut for invocation of the Palette window is Ctrl+Shift+8.
    • Mnemonic is P for Palette menu item in the Window menu.

     

     

    Contextual menu above the Palette

    Content of the Contextual menu can be defined by clients, but common parts should be consistent in the following:

    • Contextual menu can be invoked on categories and individual items.
    • There should be an action on the context menu to add a selected item to the design surface (Add to Source, Add to Page, Add to Layout).
    • Actions Create New Category, Rename Category and Delete Category will appear only above category node.
    • Actions Rename Item, Edit Item and Delete Item will appear only above item node.
    • Action Create New Item will appear above all inside area of the Palette (above categories and items)
    • User can change view of items by the menu items: Show Item names/Hide Item Names and Show Bigger Icons/Hide Bigger Icons
    • User can choose sorting of items inside categories by the following radio buttons: Sort by Item Name, Sort by Used Items, Sort by Custom Order
    • Palette Customizer... menu item will appear at the bottom of the Contextual menu.
    • Menu items for sorting, views and Palette Customizer should be accessible over all internal area of the Palette

     

     

    Palette Customizer (for categories and components)

    • Palette Customizer can be invoked by right click or from the Contextual menu above inner area of the Palette (categories, nodes or free space).
    • It will contain expandable/collapsable tree structure of categories and items inside them.
    • Each node will contain checkbox checked by default. The state of those checkboxies will signalize visibility of items and categories in the Palette
    • User can hide/unhide each item or category by those checkboxies or from contextual menu above area of the Palette.
    • Some items are not able to be hide, then checkboxies by them are disabled (and Hide item action in the contextual menu is disabled)
    • Possibility to show all removed items by checkbox situated under the tree. The label of checkbox: Show removed items
    • Then user can change removed state by selected item to the visible state by appropriate button Restore Item.
    • User can rearrange all content of the tree by Drag&Drop or by buttons Move Up and Move Down.
    • Another way of rearranging is by Cut&Paste operations (Ctrl+X & Ctrl+V) on Palette items.
    • User should be able to create new category or new item.
    • User can Edit selected item or category in the tree.
    • Palette Customizer should support Items import. It will be invoked by button Import items.
    • User can invoke Revert to Default action and it will change the Palette content to the default state. But first small warning dialog should appear because this operation is risky a bit.

     

     

    Layout of windows

    The new Component Palette needs more space and we wanted to solve the following issues too:

    • Users on usability study had a problem to use Form editor windows group situated at the right side of IDE (Component Inspector, Property Sheet and Component Palette), because those windows were too small.
    • New window called Code Navigator will be renamed to Inspector and its content should be context sensitive according to active Editor's view (Source, Design, XML, HTML, J2EE...). E.g. when user switches into design view, content of current Component Inspector will appear there but there will be current Navigator's window content during user's work in the Source view.

    Solution for Release 4.1. was: We rearranged Form editor windows group (vide figure 4 below) and defined temporary solution that the Code Navigator and the Component Inspector will share the same window position as a TABs. Then the Inspector will be activated, when user switches into the Design mode and the Code Navigator will be activated, when user switches into the Source mode.

    Solution for Release NB 4.2: Palette will stay at the same position in the Form editor and those two windows (the Navigator and the Inspector) will be merged together in next release.

    Other Editors: The Palette will be shown by default in other editors only by those clients who will request it. E.g. Creator wants to show it definitely (docked at the left upper side), for JSP editor is logical too (docked at the right side of IDE), but it isn't suitable for Java editor in Netbeans as long as the existence of Java Palette is still an open issue.
    So layout in other products depends on them (Mobility, J2EE), but it's stronlgy recommended to have it consistent with Netbeans as much as possible. It means to show it at the right side.

     

    layout5.png (34485 bytes)

    Figure 4 - Layout of Form editor windows group in release 4.1

     

     

    Maximized Editor

    There is a problem when user maximizes the Editor. It means the user may want to see Editor plus additional window together (Source Editor+Navigator or Design Editor+Palette and Properties) in maximized mode. Mobility solved this issue by attaching the Palette window into left side of the Editor. But it would be visually cluttered for Design editor in the Netbeans and there will be too many columns then.
    • The Palette window could be universal in docking ability to the internal area of the Editor and as a normal window around the Editor. But implementation of this feature will cost too much resources maybe and we will have the same problem with too many "columns of windows".
    • Better approach is to define way how to append some windows to editor window so it will appear together with editor in the maximized mode. This can be implemented by the following:
      • User can define linkage between such kind of windows and Editor's views.
      • This will be done from contextual menu invoked above window titlebar or from the main window by checkbox menu items: Append to Editor > Source View, Design View...
      • There will exist second way of the linkage by Shift+Drag&Drop action with window titlebars. Line with chain pattern between window's titlebar and current mouse position will be displayed during dragging.
      • When more windows are appended to the concrete View in the Editor, all of them will appear together with maximized Editor.
      • Area of those windows should be resized to fill all free space.

    Note: There is open issue about visualization of this linkage by impacted windows. Maybe some small chain icon will be appropriate.

     

     

     

    Rest issues

    • All swing components in the Palette of Netbeans start by j letter but it should be removed and could appear only in the tooltip.
    • Possibility to display visual separator in long list of items or for distinguishing among logical groups of items.
    • Possibility to support shifting of items between categories by keyboard in the Palette Customizer.
    • Possibility to define new Default state in the Palette Customizer.
    • User may want to quickly insert an item several times (or more than one item) and doesn't want to be bothered by the parametrization dialogs. It will be done by pressing SHIFT keyboard modifier during mouse operations and it will cause the supressing parametrization plus possiblity to use the same item more then once.

     

     

    Other enhancements

    • To have possibility to switch to the view with real look (and default size) of components similar to the Apple's approach (see below).




     

    4. Open issues

    • What about visualization of this linkage by windows chained with Editor. Maybe some small chain icon will be appropriate.
    • Should be supported this behavior by Drag&Drop?: A mouse-down/wait for one or more seconds should enter into a “drag reorder mode”. This prevents accidental reordering of the Palette.
    • Right and consistent names for Sorting and Views should be checked.
    • Design of 32x32 icons...Some improvement is necessary and icons should be recreated or polished at least (AWT or Layouts categories).

     

    5. Unimplemented palette ui spec features

    • there's no toolbar in the palette topcomponent
    • no 'item groups' (e.g. visual components and code clips)
    • no 'sub-items'
    • there's no way to 'revert' the palette back to its default state, e.g. deleted categories are gone forever
    • no 'sort by used items'
    • sort by names / sort by custom order is still an issue
    • items being dragged are selected by default to give the user better visual feedback of what they're dragging
    • there's no 'show removed items' option in the customizer
    • palette doesn't handle the 'maximized editor' mode in any special way

     

     

    Project Features

    About this Project

    Usersguide was started in November 2009, is owned by kganfield, and has 59 members.
    By use of this website, you agree to the NetBeans Policies and Terms of Use (revision 20160708.bf2ac18). © 2014, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo
     
     
    Close
    loading
    Please Confirm
    Close