Page Flow User Interface (UI) Specification



In moving towards a more unified Netbeans Pack composition, it has been suggested by both customers and engineers that we make our Visual Navigation Editor more robust. In it's current state Navigation Editor is only familar with JSF pages in projects of type Visual Web Pack. As pack's disinegrate, the distinction between VWP JSF pages and non-VWP web pages is blurred and almost obsolete. In Netbeans 6.0, the new robust Navigation Editor, now to be called Page Flow Editor, should be usable by any project that has a faces-config model. This Editor will allow users to to visually create, modify, and delete navigation rules from one page to another. Please refer to the requirements list below for details.

Identified Users

Any Web Project user that uses some sort of JSF framework. This include generic JSF Framework Users and Visual Web Pack.

Uses Cases and Scenarios


User wants to view the navigation rules for a given faces-config file.

  1. Double click on the desired faces-config.xml
  2. Page Flow Editor will appear
  3. Change the desire scope from "Project" to "Faces Config Only"
  4. The Page Flow Editor will then be updated to show only those rules in the faces config.

User wants to create a JSF Rule.

  1. Double click on faces-config.xml in the Project Window under Configuration
  2. The Page Flow Editor will appear.
  3. The user will then see page for the entire project
  4. Select the desired "from" page and drag mouse to the desire "to" page.
  5. A default link will appear with a default case name, "case#".

User wants to initialize their project with pages and rules

  1. Double click the faces-config file
  2. Page Flow Editor will appear.
  3. Right click on the general graph background.
  4. Select "New File..."
  5. The New File Wizard will be initiated.
  6. Complete the steps to create a new JSF Page.
  7. Continue to repeats the above two steps until desired pages are created.
  8. Continue on with user scenario "User wants to create a JSF Rule".
  9. Repeat the above steps until has created all desired rules.

User wants to change the from-outcome for a given rule.

  1. Double click the faces-config file.
  2. Page Flow Editor will appear.
  3. Double click on the label of the navigation rule you would like to change.
  4. A Inline Editor will appear
  5. Modify the name
  6. Click enter.

User wants to delete rule(s)

  1. Page Flow Editor is open and visible
  2. Click on the link to be deleted.
  3. (Optional) Select multiple links by hold the CTRL key and selecting additional links.
  4. Hit the delete key on the keyboard.

User wants to delete page(s)

  1. Page Flow Editor is open and visible
  2. Click on the page to be deleted.
  3. (Optional) Select multiple pages by hold the CTRL key and selection additional pages.
  4. Hit the delete key on the keyboard.

Multiple users to work on multiple faces configuration files.

  1. Create a new faces config file following the JSF Spec. ( This is most easily done by copying the faces-config file (CTRL-C) and pasting it into WEB-INF). The web.xml will need to be updated as defined by the spec.
  2. Open the faces_config.xml.
  3. Change to the xml view (rather than the Page Flow view)
  4. Copy the rules you would like to remove from faces_config.xml.
  5. Open the new faces-config_2.xml.
  6. Change to the xml view
  7. Paste the new rules in this file without breaking the faces-config schema(dtd).
  8. Click the save all button.
  9. Switch back to the Page Flow View.
  10. Drag this window into split pane mode ( the faces-config.xml should now show in the above screen ).
  11. Switch the original faces config to the Page Flow View.
  12. Now the user can modify (and commit) the rules independent of the other file.

Open a page from the Page Flow Editor

  1. Page Flow Editor is open and visible
  2. Right click on the desired page.
  3. Select "Open"
  4. The desired page will appear.

VWP Specific

Add a button (or other navigable element) to a page

  1. Page Flow Editor is open and visible
  2. Right click on the page of which the button should be added.
  3. Select the button ( or other desired navigable element)

Create a navigation rule from a button.

  1. Page Flow Editor is open and visible
  2. Select the "from" button and drag mouse releasing on the desired to page.
  3. The rule will be added and the backing code will be added to the jsp.

Jump to the button handler code.

  1. Page Flow Editor is open and visible
  2. Right click on the desired button
  3. Select "Open Handler" context menu. item.

To Be Completed

User wants to view application wide rules.

  1. Double click the faces-config file.
  2. Page Flow Editor will appear.
  3. Change scope from "Pages" view to "Project" view.
  4. User can than view the rules for all the given pages.

User wants to modify the layout for the pages.

  1. Page Flow Editor is open and visible
  2. Choose from one of the two layout option in the Page Flow Editor toolbar.
  3. Select that option.
  4. The layout will be modified one time, laying out all the elements currently in the graph.
  • Layouts are to be determined.

To Be Defined

  1. User wants to move a rule to another faces-config page via the page flow editor. This scenario would include right click on the given link and select "move".
  2. Palette - Pages that can be added and Navigable components that can be added.
  3. Page Filter - Allowing a user to filter the page type (ie. html, jsp, and facelets).

Detailed Specification

General Theme

The theme selected has been taken from the VMDGraph Elements defined in the David Kaspar's Visual Graph Library. Currently we are also choosing to use a matching grid background ( along with other things) introduced by Mobility Pack. The goal is to provide consistency across the Netbeans Platform.

Page Modeling

Page Flow Editor unlike Navigation Editor models the actual pages in the projects file system. From the Page Flow view, you can determine if the page exists and what type of page it is without depending on the file name extension. This is visible by looking at the icon preceding the page name. Please refer to the image below. File:Center

Page Content Modeling

In some cases a Page Content Model is defined by a pluggin. The only current example of this is the VWP page. Content items are show as sub-elements in a given page. These elements can provide an additional level of granularity by specifying an icon again. Please refer to the image below. File:Center


Links can be created from Page to Page or Content Item to Page. Please refer to the image below.



The upper toolbar is first filled with the multiview tabs that are defined in the multiview ui spec. Those tabs are followed by a divider and the scope selector. The image below show two of three scope selections (and updated image will show all three). Additionally, there will be two to three buttons on this toolbar, allowing the user to select various layouts for which they want their graph to re-arranged.


Palette (Postponed)

Time permitting, a palette with be included in the Page Flow Editor.

  1. Category: New File Types
 - JSP Page
- HTML Page
- VWP Page (if VWP is installed)
- VWP Page Fragment
  1. Category: Content Items ( if VWP is installed)
 - Button
- Hyperlink
- Image Hyperlink

Context Menus

  1. Generic Page
- Delete
- Open
- Rename...
  1. VWP Page
- All of the above
- Divider
- Add Button
- Add Hyperlink
- Add Image Hyperlink
  1. Link
- Delete
- Open (Not Enabled)
- Rename

Properties Window

By default, the faces-config.xml information will be show in the Properties window. However, if the a page is selected, the Page properties will be visible just as if it were selected in the Project View. If a link is selected, it will show the To and From Page as well as the outcome. For a content item, it will provide the content info as defined by the Page Model.

Wildcard Case

The wildcard case can now be seen through the Page Flow Editor. Although it is currently expected that this case be created manually, it will show up in the Page Flow Editor as shown below. File:Center


Key Function
Delete Delete the selected Link or Page. Currently does not delete a context item.
Tab Walks through and selects first pages, then links, then the generic scene. Pages should be selected and seem hovered
Ctrl-Tab Does the reverse of the above.
Escape Cancels the current action
s/S If a page or navigable component is selected it will start a link. You tab to pick the connect to page.
e/E Ends the link on the requested page.
z/Z/u/U Are all zoom and unzoom keys. I have modified the functionality from 5.5 to toggle rather than require you to know both keys.
CTRL-r/R Rename the currently selected page or link.
right/left arrow Go to the next page.
up/down arrow Go to the selectable pages.
CTRL arrows Move page locations
p/P Triggers related popup window.
Enter Enter opens the given page.

Visual Web Page Specific A11y keys

Key Function
b Add a button
i Add an image hyperlink
h Add a hyperlink

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