Perforce JViews Gantt Sample: Gantt Chart Editing (JSF and JavaScript)

Description

This sample shows how to display and interact with a Gantt chart using Perforce JViews Gantt JavaServer Faces components.

How to Use the Sample

This sample allows you to select activities and constraints, add, remove, and edit their properties. You can also move and resize the selected activities. You can highlight an activity and constraint of the sheet view. You can highlight a row of table view. You can display hover help for an activity.

• To select an activity or a constraint, choose the select interactor ( on the toolbar) and click the desired activity or constraint.
  The selected activity or constraint is highlighted.
• To hide or show the table in the sheet view of a Gantt chart, click the arrow icon in the split bar of the Gantt view.
• To move activities, select and drag them to the desired location. Note that in this sample, parent activities cannot be moved directly since their start and end times are automatically computed from their children.
• To select several items, or to add or remove items from the current selection, press the Ctrl key while clicking.
• The selected activity can be resized by dragging one of its handles.
• When a single item is selected, its properties are displayed in a property sheet.
  • To edit a property, click the value field and a text box will appear to edit the value.
  • To add a property, click the add property button ( in the property sheet) and enter the name of the property. A new row is added and it can be edited.
  • To remove a property, click the remove property button ( of the property sheet). Note that predefined properties cannot be removed.
  • When you have finished, click the commit button () to send the changes to the server; or click the cancel button () to revert the properties to their initial values. Changes that are not committed are lost.
• You can explore by expanding or collapsing rows , panning , zooming in , zooming out , and fitting the view .
• Select the image mode by selecting the Image Mode check box.
  
  When the image mode is enabled, the selected objects are drawn as described in the Gantt server-side instance instead of being just highlighted by a selection rectangle. However a full image refresh is required when selecting objects and therefore this mode might be slower than the regular mode.
• The JSP source code is available by clicking the Show source button ( in the toolbar).

Installing the Thin-Client Sample

The sample contains a WAR file (Web Archive) that allows you to easily install the sample on any server that supports the Servlet API 2.1 or later. For your convenience, the WAR will be copied to the Tomcat web server that is supplied with the Perforce JViews installation when you start the server using the supplied scripts. Tomcat is the official reference implementation of the Servlet and JSP specifications. If you are already using an up-to-date Web or application server, there is a good chance that it already has everything you need. The sample can also be deployed to WebSphere Application Server (WAS).

Running the Sample Using Tomcat

If you intend to use the Tomcat Web server provided with this installation, follow these instructions to start the server: Running the Server-Side Samples. The scripts to start the server can be found in the tools/tomcat-jsf directory.
Note: if you are running on Windows then you will find menu items in the Windows "start" menu to start and stop the Tomcat server.

Once the server is running, you can see the sample by opening the following page:

• Perforce JViews Gantt Sample: Gantt Chart Editing (JSF and JavaScript)
  http://localhost:8080/jsf-gantt-editing

Running the Sample Using WebSphere Application Server

In addition to the instructions provided for using Tomcat, the samples can be viewed on WebSphere Application Server. Follow the instructions: Running the Server-Side Samples and use the scripts to start the server and deploy the sample.

Once the server is running, you can see the sample by opening the following page: http://localhost:9443/jsf-gantt-editing
The WAS administrative console can be used to verify or modify server settings: http://localhost:9043/ibm/console/

Note: the WAS server can start on a range of port numbers, therefore the value is not guaranteed to remain the same. The scripts provided with the samples can be used to obtain the port numbers used by the Admin Console and by the deployed Web applications. To retrieve a list of all the WAS port numbers, run the command line instruction: ant -f build_was.xml ws.list.ports

Topics Covered

• JavaServer Faces Gantt

Detailed Description

This sample shows how to edit a Gantt chart using Perforce JViews JSF components. Activities and constraints can be selected, moved, and their properties edited. Since JViews V8.7, you can resize the activities and scroll the JViews Gantt sheet view.

Installation Directory

The Gantt Chart Editing (JSF and JavaScript) sample is installed here.

Classes Involved

• ilog.views.gantt.faces.dhtml.component.IlvFacesGanttPropertyAccessor

Source Files

• demo.editing.EditingBean

  The Bean that contains the logic of this sample.

• demo.editing.PropertyAccessor

  The property accessor that filters the property displayed.