Developing JViews Diagrammer JavaScript Web applications
Describes how to develop a JViews Diagrammer application as a JavaScript Web application.
Recommends the use of AJAX-based JavaServer™ Faces (JSF) technology rather than JavaScript Web technology.
Describes the elements of the Rogue Wave JViews Diagrammer low level servlet and JavaScript library.
Shows how to create a Web application.
Describes the predefined servlet classes.
Shows how to write the client side of your Web applications using JViews JavaScript libraries.
Describes how to use the classes that manage selection.
Describes how to create nodes and links in your JavaScript Web applications.
Shows how to delete selected nodes and links.
JavaServer Faces components as opposed to JavaScript components
When you build a Web application, you are recommended to base the application on JavaServer™ Faces (JSF) technology.
Build your application with the techniques described in
Developing JViews Maps JSF applicationsJSF components in JViews Maps rely heavily on low level JavaScript and servlet libraries, both on the server and the client, so you need to be familiar with the topics discussed here to be able to use the JSF components properly.
On the server side, the JSF components use the low level servlet to generate images and other kinds of output for the client side. On the client side, the JSF components use the JViews JavaScript™ library to provide Ajax features.
For a basic use of a JSF component, you probably do not need a full understanding of the low level JavaScript and servlet libraries. Advanced use requires you to have a reasonable knowledge of it.
In rare cases, such as environments where JSF is not available, you might need to rely solely on the low level JavaScript and servlet libraries.
Low level servlet and JavaScript libraries
The low level servlet and JavaScript library provide the basic infrastructure for building Web applications that display a
graph. In Rogue Wave
JViews Diagrammer, the contents of the graph come from a
diagram component.
To make it easier to build Web applications that display a diagram component, Rogue Wave JViews Diagrammer extends the basic JViews servlet and JavaScript support, providing classes that let you implement the server side of your Web applications with little or no coding.
If you want full details of lower-level servlet and JavaScript support, see
Developing basic JViews JavaScript Web applications. Note in particular that the architecture for
JViews Diagrammer is equivalent to that described in
JViews Web technology architecture, but more specifically:
The JViews Application is a
JViews Diagrammer application, containing an
IlvDiagrammer instance.
The JViews Servlet is a
JViews Diagrammer servlet, based on a
JViews Diagrammer server-side class.
Creating a JavaScript Web application
To create a JavaScript Web application, use the class IlvDiagrammerServlet. This class accepts JViews Diagrammer project files as input, so all you have to do to display a diagram in a Web application is to pass the project file as a parameter to the servlet.
An example of a JavaScript Web application based on
JViews Diagrammer is supplied in
<installdir>/jviews-diagrammer/samples/diagrammer/thinclient/.
This example uses the JViews Diagrammer servlet to display a workflow process in a Web browser. The user can choose different processes to display and different style sheets to render them. The elements of the workflow can also be selected.
Important Only the browsers and browser versions listed in the
Release notes are supported by the Rogue Wave® JViews JavaScript Web application.
Servlet classes
Describes the predefined servlet classes.
Describes the
IlvDiagrammerServlet class.
Describes the
IlvDiagrammerServletSupport class.
The IlvDiagrammerServlet class
The
IlvDiagrammerServlet class in the package
ilog.views.diagrammer.servlet is a concrete servlet class that handles HTTP requests to build an image of the diagram.
This class accepts one parameter: the project file which refers to the XML data file and the style sheet on which the diagram is based.
This parameter can be specified at initialization time (as a static configuration parameter of the servlet) or dynamically in the request URL.
The JViews Diagrammer servlet can work in two modes, depending on the value of the multiSession configuration parameter:
Mono-session mode: If
multiSession is false, only one SDM engine and one SDM view (and one grapher) are created. All the requests to the servlet return an image of the same shared diagram. This option is appropriate if the users are not allowed to modify the contents of the diagram or if the changes should be visible by all users.
Multi-session mode: If
multiSession is true, a new SDM engine (with its associated SDM view and grapher) is created for every different client session connected to the servlet. This mode is appropriate if users are allowed to modify the XML file or the style sheet.
By default, the servlet runs in mono-session mode.
The class
IlvDiagrammerServlet provides support for client-side image maps. The image map can be used to attach actions to every node or link displayed in the diagram.
The class
IlvDiagrammerServlet is a subclass of
IlvManagerServlet that is using the same protocols as
IlvDiagrammerServlet to communicate with clients.
The IlvDiagrammerServletSupport class
The class
IlvDiagrammerServletSupport is a subclass of
IlvManagerServletSupport. This class implements the functionality of the
JViews Diagrammer servlet but is not a servlet itself.
The purpose of IlvDiagrammerServletSupport is to let you build “multiplexing” servlets that can handle requests for images, but also other kinds of requests that call other parts of your application.
The class
IlvDiagrammerServlet is a facade that forwards requests to the class
IlvDiagrammerServletSupport.
Writing the JViews Diagrammer JavaScript client
To write the client side of your Web applications, use the
JViews Framework JavaScript library. See
Developing basic JViews JavaScript Web applications for information on how to use the
JViews Framework JavaScript library.
To specify from the client side the XML, CSS or project files to be used by the JViews Diagrammer servlet, you can put parameters on the query URL with the given names (XML, CSS, project).
In addition to the features available in the JViews Framework JavaScript library, you can add features that are specific to JViews Diagrammer and that are described in the following sections.
Managing selection
Selection in a Web application is handled through the
IlvSelectionManager and
IlvSelectInteractor classes.
The IlvSelectionManager allows you to select one or more objects in the view and to move the current selection. The IlvSelectInteractor directly uses the selection manager to perform these tasks.
NOTE Selection makes sense in multisession mode only.
Client-side configuration
To use the selection on the client side, import the following scripts:
<script TYPE="text/javascript" src="script/IlvAbstractSelectionManager.js"></
script>
<script TYPE="text/javascript" src="script/framework/IlvSelectionManager.js"></
script>
<script TYPE="text/javascript" src="script/framework/IlvSelectInteractor.js"></
script>
To retrieve the selection manager on the client side, use the following code:
var selectionManager = view.getSelectionManager();
Server-side configuration
By default, the selection feature is not enabled in the image servlet support.
To make the selection feature available, you need to call setSelectionEnabled(true).
Example:
public class DiagrammerServlet extends IlvDiagrammerServlet {
protected IlvSDMServletSupport createServletSupport(ServletContext context) {
return new DiagrammerServletSupport(context);
}
}
public class DiagrammerServletSupport extends IlvDiagrammerServletSupport {
public DiagrammerServletSupport(ServletContext context) {
super(context);
setSelectionEnabled(true);
}
}
Image mode or Rectangle mode
The selection manager provides two modes for displaying the selection of objects:
Image mode: after each selection on the client, an image request is issued.
Rectangle mode: after each selection on the client, the bounding box of each selected object is queried to the server and displayed on the client.
The color and thickness of the bounding box rectangles can be configured through the selection manager.
Properties
The selection servlet can be configured to provide additional information for each selected object. This information corresponds to additional properties that can be used on the client.
To do so, you need to subclass the selection support implementation to override getAdditionalProperties(IlvSelectionResponse response, Object object), as in the following example.
The following selection support adds the properties of an SDM node:
//Subclass to override the getAdditionalProperties method
public class DiagrammerSelectionSupport extends IlvDiagrammerSelectionSupport {
public DiagrammerSelectionSupport(IlvDiagrammerServletSupport support) {
super(support);
}
protected ArrayList getAdditionalProperties(IlvSelectionResponse response,
Object object) {
ArrayList props = super.getAdditionalProperties(response, object);
IlvSDMNode node = (IlvSDMNode) object;
IlvDiagrammer diagrammer = (IlvDiagrammer)
response.getProperty(DIAGRAMMER_KEY);
IlvSDMModel model = diagrammer.getEngine().getModel();
String names[] = model.getObjectPropertyNames(node);
for (int i = 0; i < names.length; i++) {
ArrayList l = new ArrayList();
l.add(names[i]);
l.add(model.getObjectProperty(node, names[i]));
props.add(l);
}
return props;
}
}
//Use the new selection selection support class in the servlet support.
public class DiagrammerServletSupport extends IlvDiagrammerServletSupport {
[...]
protected IlvSelectionSupport createSelectionSupport() {
return new DiagrammerSelectionSupport(this);
}
}
In image mode, you need to issue an additional request to get the selection information (the information is disabled by default). To force this additional request on each selection, use view.getSelectionManager().setForceUpdateProperties(true).
In rectangle mode, the selection information is always enabled.
There are two ways to retrieve the selection information on the client side:
Get the current selection at any time.
view.getSelectionManager().getSelection()
Register a listener for selection changes.
The listener is notified of the current selection.
The additional properties are available in the properties of a selection rectangle.
If the selection support example illustrated earlier in this section is used, the following listener example fills a panel with properties of the selected object:
function showProperties(rList) {
if (rList.length == 1) {
var p = "<table>";
for(var i=0; i<rList[0].getProperties(length); i++){
var props = rList[0].getProperties();
p += "<td>" + props[i][0]+ "</td>";
p += "<td>" + props[i][1]+ "</td>";
}
p +="<table>";
propPanel.setContent(p);
}
}
Listeners
Listeners can be registered for the selection manager to keep track of the selection when the selection manager is in rectangle mode. To add a listener to the selection manager, use the following method:
view.getSelectionManager().addSelectionChangedListener(listener)
listener is a function with one parameter that corresponds to the selection: a list of rectangles with additional properties.
In image mode, you need to issue an additional request to get the selection information; listeners are not notified by default.
To force this second request on each selection, use:
view.getSelectionManager().setForceUpdateProperties(true)
Moving
If moving objects is allowed on the client and server sides, the IlvSelectInteractor allows you to drag and drop objects.
Important To avoid user actions to be overridden by the automatic layout, the node layout must be disabled when using that feature.
Creating nodes and links
Describes how to create nodes and links in your JavaScript Web applications.
Provides an overview of the class used to create nodes and links.
Shows how to configure nodes and links on the client side of the JavaScript Web application.
Shows how to configure nodes and links on the server side of the JavaScript Web application.
Overview
The ability of interactively creating nodes and links in a JavaScript Web application is handled through the
IlvMakeObjectInteractor class.
When the IlvMakeObjectInteractor class is set on the view and configured as a node creation interactor, it allows you to create nodes by clicking on their expected position on the view.
Alternatively, when the IlvMakeObjectInteractor class is configured as a link creation interactor, it allows you to create links by clicking the mouse on the origin node, dragging the mouse and then releasing it on top of the destination node.
NOTE Normally, the creation of nodes and links is expected only in multisession mode.
Client-side configuration
To be able to interactively create nodes and links on the client side, import the following scripts:
<script TYPE="text/javascript" src="script/IlvAbstractSelectionManager.js">
</script>
<script TYPE="text/javascript" src="script/framework/IlvSelectionManager.js">
</script>
<script TYPE="text/javascript" src="script/framework/IlvMakeObjectInteractor.js"></script>
The interactor can be instantiated, configured and set as follows:
var interactor = new IlvMakeObjectInteractor();
// optionally make it a link interactor
interactor.setLinkMode(true);
// mandatory, set the tag of the created object in the diagrammer model
interactor.setAdditionalParameters("tagname");
view.setInteractor(interactor);
In addition to the tag name, the interactor can be configured to set some initial properties on the selected object at creation time:
var properties = {propertyName1: "propertyValue1",
propertyName2: "propertyValue2"};
interactor.setProperties(properties);
Server-side configuration
To be able to deal with the actions submitted by the
IlvMakeObjectInteractor class from the client side, the image Servlet support must be configured by adding the action listener that can handle those actions.
Example:
public class DiagrammerServlet extends IlvDiagrammerServlet {
protected IlvSDMServletSupport createServletSupport(ServletContext context) {
return new DiagrammerServletSupport(context);
}
}
public class DiagrammerServletSupport extends IlvDiagrammerServletSupport {
public DiagrammerServletSupport(ServletContext context) {
super(context);
addServerActionListener(new IlvDiagrammerCreateActionListener());;
}
}
Deleting selected nodes and links
Shows how to delete selected nodes and links.
Provides an overview of the class used to delete selected nodes and links.
Shows how to configure deletion of selected nodes and links on the client side of the JavaScript Web application.
Shows how to configure deletion of selected nodes and links on the server side of the JavaScript Web application
Overview
The ability to delete selected nodes and links in a JavaScript Web application is handled through the
IlvSelectionManager class.
Once set on the view and configured (see
Managing selection) you can call the
deleteSelection() method on the
IlvSelectionManager class to delete objects that have been selected using the
IlvSelectInteractor.
NOTE Nodes and Links deletion makes sense in multisession mode only.
Client-side configuration
To be able to delete the selected nodes and links on the client side, import the following scripts:
<script TYPE="text/javascript" src="script/IlvAbstractSelectionManager.js">
</script>
<script TYPE="text/javascript" src="script/framework/IlvSelectionManager.js">
</script>
Once selected by the user, the objects can be deleted using the following line of code:
view.getSelectionManager().deleteSelection();
Server-side configuration
To be able to deal with the actions submitted by the deleteSelection() call from the client side, the image servlet support must be configured by adding the action listener that can handle them.
Example:
public class DiagrammerServlet extends IlvDiagrammerServlet {
protected IlvSDMServletSupport createServletSupport(ServletContext context) {
return new DiagrammerServletSupport(context);
}
}
public class DiagrammerServletSupport extends IlvDiagrammerServletSupport {
public DiagrammerServletSupport(ServletContext context) {
super(context);
addServerActionListener(new IlvDiagrammerDeleteActionListener());;
}
}
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.
