Adding client/server interactions
The JViews Gantt JavaScript Web application support gives you a simplified way to define new actions that should take place on the server side. For example, suppose you want to allow the user to change the name of an activity that appears on the generated image. Part of this action, clicking the image to select the activity, must be done on the client side. Changing the name of the activity in the Gantt data model must be done on the server side before a new image is generated. The notion of a “server-side action” exists to perform such behavior. An action is defined by a name and a set of string parameters.
Explains how to use the
performAction method.
Explains how to detect and execute an action request.
Explains how to use state information to manage user preferences.
The client side
In a JavaScript™ client, you tell the server to perform an action using the
performAction method of the
IlvGanttTableView or
IlvGanttSheetViewJavaScript component. Here is an example that asks the server side to execute the action “setName” with coordinate and string parameters, assuming that
view is an
IlvGanttSheetView:
var x = 100;
var y = 50;
var params = new Array();
params[0]=x;
params[1]=y;
params[2]="New Activity Name";
view.performAction("setName", params);
The performAction method asks the server for a new image. In the image request, additional parameters are added so that the server side can execute the action. Thus, the performAction call results in only one client/server round-trip.
Creating a custom interactor
This section explores how to create a custom client-side interactor that allows you to click an activity graphic in the
IlvGanttSheetView and ask the server side to execute the “setName” action. You start by defining a new
ActivityNameInteractor class, then you override the
mouseDown method. Finally, you make your interactor safer by overriding the
setView method.
Defining a new interactor class
First, you define the new
ActivityNameInteractor class as a subclass of
IlvInteractor.
IlvInteractor is the base class for all client-side interactors that operate on JavaScript view components:
function ActivityNameInteractor() {
this.superConstructor();
}
ActivityNameInteractor.prototype = new IlvInteractor();
ActivityNameInteractor.prototype.setClassName("ActivityNameInteractor");
Overriding the mouseDown method
Then, you override the mouseDown method to convert the mouse coordinates to be relative to the Gantt sheet and request the server side to perform the “setName” action:
function ActivityNameInteractor() {
this.superConstructor();
}
ActivityNameInteractor.prototype = new IlvInteractor();
ActivityNameInteractor.prototype.setClassName("ActivityNameInteractor");
ActivityNameInteractor.prototype.mouseDown = function(e) {
// The JavaScript view component is always stored in the view
// instance variable of the interactor.
var view = this.view;
// The Y position of the mouse event is relative to the top of the DHTML
// IlvGanttSheetView. The action needs a Y position relative to the top of
// the Gantt sheet, ignoring the time scale.
var actionYPos = e.mouseY - view.cap_tableHeaderHeight;
if (actionYPos < 0) // Mouse is in timescale, so ignore
return;
// Create parameters for the setName action and send it to the server side.
var params = new Array();
params[0]=e.mouseX;
params[1]=actionYPos;
params[2]="New Activity Name";
view.performAction("setName", params);
}
Notice how the
cap_tableHeaderHeight instance variable of the
IlvGanttSheetView is used to subtract out the height of the time scale. This variable is one of several that are initialized when the server side sends capabilities information to the view. The full details of the capabilities request are described in
The capabilities request. You can find details on the other instance variables that the view initializes from the capabilities information in the
JavaScript Reference Manual for the
IlvGanttComponentView method.
IlvGanttComponentView is the superclass of
IlvGanttSheetView.
Making the interactor safe
You can make our new interactor a little bit safer to use by overriding the setView method. This method is inherited from IlvInteractor and is invoked automatically when an interactor is set on or removed from a view.
By overriding this method, you can verify that the view is indeed an instance of IlvGanttSheetView:
function ActivityNameInteractor() {
this.superConstructor();
}
ActivityNameInteractor.prototype = new IlvInteractor();
ActivityNameInteractor.prototype.setClassName("ActivityNameInteractor");
ActivityNameInteractor.prototype.mouseDown = function(e) {
// The JavaScript view component is always stored in the view
// instance variable of the interactor.
var view = this.view;
// The Y position of the mouse event is relative to the top of the DHTML
// IlvGanttSheetView. The action needs a Y position relative to the top of
// the Gantt sheet, ignoring the time scale.
var actionYPos = e.mouseY - view.cap_tableHeaderHeight;
if (actionYPos < 0) // Mouse is in timescale
return;
// Create parameters for the setName action and send it to the server side.
var params = new Array();
params[0]=e.mouseX;
params[1]=actionYPos;
params[2]="New Activity Name";
view.performAction("setName", params);
}
ActivityNameInteractor.prototype.setView = function(view) {
if (view != null && !view.instanceOf(IlvGanttSheetView)) {
alert("ActivityNameInteractor can only be set on an IlvGanttSheetView");
}
}
The server side
On the server side, you need to detect that an action was requested and execute the action before the image is generated and sent back to the client. This is done by implementing the
IlvServerAction interface. To listen for an action request from the client and execute the action on the server side, you register the action with your instance of
IlvGanttServletSupport using the
addServerAction method.
For the “setName” action, you would add the following lines of code in the createServletSupport method of the example GanttChartServlet:
protected IlvGanttServletSupport createServletSupport()
{
IlvGanttServletSupport support = new ServletSupport();
support.addServerAction("setName", new IlvServerAction()
{
public void actionPerformed(ServerActionEvent event)
throws ServletException;
{
int x = event.getIntParameter(0);
int y = event.getIntParameter(1);
String name = event.getStringParameter(2);
IlvHierarchyChart chart = event.getChart();
IlvGraphic graphic = chart.getGanttSheet().getGraphic(new Point(x, y));
if (graphic instanceof IlvActivityGraphic) {
IlvActivity activity = ((IlvActivityGraphic)graphic).getActivity();
activity.setName(name);
}
}
});
return support;
}
}});
Actions that modify chart capabilities
The JavaScript™ client maintains certain state information about the server-side
IlvHierarchyChart object that it is displaying. You call this basic set of state information
capabilities. The capabilities information is sent by the server to the client when the client side requests it. When the client side requests an updated set of capabilities data, the server also sends an updated image to the client. The capabilities data includes the number of rows currently visible, the height of the rows, and other basic state information that allows the client to intelligently scroll and manipulate the chart images. The full details of the capabilities request and chart data are described in section
The capabilities request.
Some server actions requested by the client may modify the capabilities state information for the chart. In this case, the client must be able to request that the server perform the action, send updated capabilities information to the client, and then send an updated image to the client. For example, suppose you want to allow the user to click a row in the table and toggle the expand/collapse state of the row. As in the previous example, toggling the row must be performed on the server side. However, expanding and collapsing rows in the server-side chart modifies the capabilities data on how many rows are visible. The client side must be updated with the new capabilities so that client-side scrolling and row hit testing can be performed correctly.
You again use the
performAction method of the
IlvGanttTableView or
IlvGanttSheetView JavaScript components to request this type of server action. This time however, you set the optional third parameter,
updateAll, to
true. This requests the server to send updated capabilities to the client, in addition to performing the action and sending an updated image. Here is an example of JavaScript™ code that asks the server side to execute the action “toggleRow” with a y-coordinate relative to the first row in the table, assuming that
view is an
IlvGanttTableView:
var mouseY = .. mouse pos relative to top of IlvGanttTableView ..
// Take table header into account.
mouseY = mouseY - view.cap_tableHeaderHeight;
// If mouse is in table header, nothing to do
if (mouseY < 0)
return;
// Take vertical scroll position into account.
mouseY = mouseY + view.getVerticalScrollPosition();
var params = new Array();
params[0] = tableYPos;
view.performAction("toggleRow", params, true);
As in the previous example, you register the action on the server side using the
addServerAction. method. For the “toggleRow” action, you would add the following lines of code in the
createServletSupport method of the example
GanttChartServlet:
protected IlvGanttServletSupport createServletSupport()
{
IlvGanttServletSupport support = new ServletSupport();
support.addServerAction("toggleRow", new IlvServerAction()
{
public void actionPerformed(ServerActionEvent event)
throws ServletException;
{
int yPos = event.getIntParameter(0);
IlvHierarchyChart chart = event.getChart();
IlvHierarchyNode row = chart.getVisibleRowAtPosition(yPos);
if (row == null)
return;
if (chart.isRowExpanded(row))
chart.collapseRow(row);
else
chart.expandRow(row);
}
});
return support;
}
}});
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.
