Visual Page Designer

Look and Feel

1. The designer canvas should sport a ‘clean’ look
   1. Add more space between components
   2. Use softer/lighter color for component boundaries.
   3. Don’t highlight non-visual components.
      1. Show the source in a separate page
         • We can support both the split-pane design and a separate source tab. Thus we can four pages:
           • Design-Source split-pane
           • Design
           • Source
           • Preview
2. Improve selection of components
   1. Highlight the component boundary that ‘has’ the mouse cursor
   2. Use a dark color to highlight the component to be selected
   3. Display a tool tip with just the name of the component
   4. Show the selected component using a dotted line with the color used to highlight the component.
   5. Use anchor points on the selected components only if the component can be resized
   6. Provide visual cues to help place the cursor before or after a component (instead of selecting the component)
   7. Provide decorations on the canvas to represent hidden component(s) that can be used to select it.
   8. Provide a crumb trail that shows the parent-child hierarchy of the currently selected component. The crumbs are hyperlinks that help in navigating/selecting a component in the hierarchy.
   9. The outline view should list all the components in the current page. User can use this view to select the components.
   10. Provide Context-menus to aid in selection
       1. Select Parent component – show the name of the parent
       2. Select child component, facets – display list of names of the child components, facets
       3. Place cursor before or after the currently selected component

Render

1. Render both visual and non-visual tags
2. Represent non-visual tags including views, forms, facets, directives, converters etc. as (rectangular) objects or appropriate decorations on the canvas
3. Provide an option to render included pages and subviews in the including page. The included content is not editable
4. Provide an option to show/hide components in the designer.
   1. Render hidden components as decorations on the canvas.
   2. Provide a context-menu to show/hide the component. (A selected component can have a special decoration that , when clicked, pops up a context menu with the show/hide option)
5. Pluggable rendering
   1. Placeholder for a pluggable, extensible rendering mechanism

Add

1. DND should follow standard UI practice
   1. Current behavior doesn’t require you to hold the LMB to drag the component to the canvas (find this to be a better mechanism)
2. Provide visual clue of the drop target
   1. Facets should be included as a drop target
3. Validate the drop target. Provide visual clue for invalid targets
4. Support DND to add to the Outline view and the Source tab view
   1. • DND on Outline view might violate UI guidelines
5. Provide context menus to add a filtered list of valid components
   1. Add before, inside, after the selected component
   2. Add inside supported facets
6. Support context menus to add in the graphical canvas and Outline View (and Source tab?)

Edit

1. Enhancements to the Property view
   1. Use standard meta-data mechanism to provide extensibility
   2. Invoke wizards for complex properties?
2. Clean-up Context menu options
3. Improve DND support for moving selected components
4. Provide mechanism to visually link related components (‘for’ attribute)
5. Support in-pace editing of text for static text, commandbutton, outputtext , outputlabel etc.

Palette View

1. Option to configure view as a fly-out view of the designer canvas or a separate view
2. Provide a filter to select the components displayed in the view
   • Filter by select libraries, component type, recently used, favorites
   • Custom filters?

Context menus on the designer

1. Organize/re-arrange menu options in a standard and predictable manner
2. Select options (copied)
   1. Select Parent component – show the name of the parent
   2. Select child component, facets – display list of names of the child components, facets
3. Place cursor before or after the currently selected component
4. Add options (copied)
   1. Show only valid components to add
   2. Add before, inside, after the selected component
   3. Add inside supported facets
   4. Navigate to related artifacts
      1. Context menu on the component to navigate to appropriate section in the application configuration resource file
      2. Context menu on the component to navigate to associated Java class
         • Managed bean class
         • Listener class
         • Validator class

Outline View

1. An option to display the ‘logical’ view that includes supported facets of a component (more generic?)
2. Enable adding of components from the palette by DND on to the view
   • Currently DND is supported within the view
3. Provide context menu similar to those in the designer

VPD Preference Page

1. Show/Hide tool tip on the page
2. Show/hide non-visual components

Back to JSF Tools Project Wiki Home