Interacting with JSF Diagrams in JViews Diagrammer V8.7

This article is for IBM ILOG JViews Diagrammer Web developers and those interested in using the Web development capabilities offered by IBM ILOG JViews Diagrammer. It discusses the interactors that allow users of IBM ILOG JViews Diagrammer to alter the graphical representation of Web-based diagrams.

Rob Sidhu (rsidhu@us.ibm.com), Technical Support Engineer, IBM

Rob SidhuRob Sidhu is a technical support engineer for IBM ILOG Visualization products at the IBM Bay Area Lab site in Foster City, CA.



13 October 2010

Also available in Japanese

Introduction

This article is for IBM ILOG JViews Diagrammer web developers and those interested in using the web development capabilities offered by IBM ILOG JViews Diagrammer. It discusses the interactors that allow users of IBM ILOG JViews Diagrammer to alter the graphical representation of Web-based diagrams.


Overview of JViews Diagrammer V8.7

For standalone Swing desktop components, IBM ILOG JViews Diagrammer (JViews Diagrammer) provides “interactors” that allow users to alter in real time their graphic data by clicking and dragging the mouse. Similarly, for the Web-based (JSF server-side and Ajax client-side) diagramming components, there are many interactors that allow users to manipulate their graphic data directly from the browser. By using Ajax technologies, the web page is partially refreshed instead of entirely reloaded with the new image.

With the release of JViews Diagrammer V8.7, some new interactors for Web applications have been introduced. JViews Diagrammer V8.7 also introduces “Hitmap Technology,” enabling JViews Diagrammer developers to, for certain interactors, provide pure client-side interaction capabilities without requiring round trips to the servers. This post discusses those interactors as well as some of the preexisting interactors.

Interactors

jv:interactorGroup

The first thing to notice with the IBM ILOG JViews V8.7 release is the addition of the interactorGroup tag. This tag is included in the ILOG JViews Core Faces (jv) tag library. In previous versions of JViews Diagrammer, only one interactor could be set on the view at any particular time. For example, if users wanted to show ToolTips when the mouse hovered above a node, and wanted the ability to click on a node to “select” it, they were unable to. With the interactorGroup, this limitation has been absolved, providing a better and more efficient user experience.

The interactor group allows developers to combine several interactors into the view component. Note, however, certain interactors cannot be combined in this way because some interactors expect and consume the same event. Developers can try to change the order of the interactors in the group in order to avoid conflicts. However, this technique has its limitations. There could be certain situations in which some sets of interactors cannot be placed in the same group because of conflicts.

Listing 1 provides a code snippet on how the interactorGroup can be declared in a JSP:

Listing 1. Declaring an interactorGroup
<jvf:objectSelectInteractor id="objSelect"/>
<jvf:tooltipInteractor id="tooltipInteractor"/>
<jvf:highlightInteractor id="highlightInteractor"/>
...
<jv:interactorGroup id="objTooltipHighlight"
interactors="objSelect highlightInteractor tooltipInteractor"/>
...
<jvdf:diagrammerView id="diagrammer" interactorId="objTooltipHighlight"/>

Notice the interactors are separated by blank spaces.

Each section that follows highlights other new interactors and shows the interactorGroup coupling the selectInteractor along with the respective interactor.

jvdf:linkInteractor

The link interactor is a newly introduced interactor that allows users to move the selected link from one node to another and reshape the selected link (polyline). It allows users to add points, remove points and move points in the selected link. Removing end points of a link deletes the link.

Since this interactor works together with the select interactor, an interactor group consisting of both these interactors must be defined.

Listing 2 provides a code snippet on how the linkInteractor can be declared in your JSP:

Listing 2. Declaring a linkInteractor
<jvdf:selectInteractor id="select"/>
<jvdf:linkInteractor id="linkInteractor"/>
<jv:interactorGroup id="interactorGroup" interactors="select linkInteractor"/>
...
<jvdf:diagrammerView id="diagrammer" interactorId="interactorGroup"/>

It is also important to remember to declare in the interactorGroup the select interactor before the linkInteractor as the link interactor depends on the select interactor.

The following images give an example of the linkInteractor allowing a user to re-assign the end-point of a link from one node to another.

Figure 1 shows two nodes with a link connecting them. Notice the interactorGroup is active as the first button in the toolbar is pressed. Also, notice when a link is selected, handles appear allowing editing.

Figure 1. Two nodes with a link connecting them
Two nodes with a link connecting them

Figure 2 shows the link during the process of dragging and dropping from one “New Node” to another “New Node.”

Figure 2. Link connected to different New Node
Link connected to different New Node

Figure 3 shows the result after the the mouse button is depressed.

Figure 3. Final result of link re-assigning
Final result of link re-assigning

A detailed description of the above sample can be found here: http://publib.boulder.ibm.com/infocenter/jviewent/v8r7/index.jsp?topic=/com.ibm.ilog.jviews.diagrammer.doc/jviews-diagrammer87/samples/diagrammer/js-diagrammer-editing/index.html

For more information regarding the linkInteractor, have a look at the following section of the JViews Programmer’s documentation: http://publib.boulder.ibm.com/infocenter/jviewent/v8r7/index.jsp?topic=/com.ibm.ilog.jviews.diagrammer.doc/Content/Visualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrwebdiag1162.html

jvdf:resizeInteractor

The resize interactor allows users to resize a selected node. If the selected node is resizable, the rectangle representing the selection is displayed on top of the view with 8 handles attached.

Because this interactor works together with the select interactor, an interactor group consisting of both these interactors must be defined.

Listing 3 provides a code snippet on how the resizeInteractor can be declared in your JSP:

Listing 3. Declaring a resizeInteractor
<jvdf:selectInteractor id="select"/>
<jvdf:resizeInteractor id="resize" actionName="resizeNode"
selectionResizableClass="faces.dhtml.DiagrammerSelectionResizable"/>
<jv:interactorGroup id="selectResize" interactors="select resize"/>

It is also important to remember to declare in the interactorGroup the select interactor before the resizeInteractor as the resize interactor depends on the select interactor.

The following images give an example of the resizeInteractor allowing a user to resize a node.

Figure 4 shows a selected node with the resizeInteractor active. Notice the resize handles that appear, allowing for the node to be resized in a variety of directions.

Figure 4. Node selected with resizeInteractor active
Node selected with resizeInteractor active

Figure 5 shows the result of clicking and dragging the bottom right resize handle.

Figure 5. Final result of node resizing
Final result of node resizing

A detailed description of the above sample can be found here:

http://publib.boulder.ibm.com/infocenter/jviewent/v8r7/index.jsp?topic=/com.ibm.ilog.jviews.diagrammer.doc/jviews-diagrammer87/codefragments/jsf/index.html

For more information regarding the resizeInteractor, have a look at the following section of the JViews Programmer’s documentation:

http://publib.boulder.ibm.com/infocenter/jviewent/v8r7/index.jsp?topic=/com.ibm.ilog.jviews.diagrammer.doc/Content/Visualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrwebdiag1161.html

jvf:highlightInteractor

IBM ILOG JViews V8.7 introduces a new interaction technology named Hitmap that considerably improves the responsiveness and the interactivity of JViews Web applications. Hitmap technology enables developers to provide pure client-side interaction capabilities in JViews Web applications without requiring round trips to the servers.

The highlight interactor uses Hitmap technology and allows users to highlight graphic objects when hovering the mouse over them. Using Hitmap technology, the highlighting effect can be constructed and displayed on the client side without a round trip to the server.

Listing 4 provides a code snippet on how the highlightInteractor can be declared in a JSP:

Listing 4. Declaring a highlightInteractor
<jvf:highlightInteractor id="highlightInteractor"/>
...
<jvdf:diagrammerView id="diagrammer" interactorId="highlightInteractor"/>

Figure 6 shows an example of the highlightInteractor active. Though the mouse pointer is not visible in the image, the mouse is hovering over the “File has SDM Format?” node, causing it to appear slightly red, or, highlighted.

Figure 6. Node with highlightInteractor active
Node with highlightInteractor active

A detailed description of the above sample can be found here:

http://publib.boulder.ibm.com/infocenter/jviewent/v8r7/index.jsp?topic=/com.ibm.ilog.jviews.diagrammer.doc/jviews-diagrammer87/samples/diagrammer/jsf-diagrammer-gallery/index.html

For more information regarding the highlightInteractor, have a look at the following section of the JViews Programmer’s documentation:

http://publib.boulder.ibm.com/infocenter/jviewent/v8r7/index.jsp?topic=/com.ibm.ilog.jviews.diagrammer.doc/Content/Visualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrwebdiag1157.html

jvf:tooltipInteractor

IBM ILOG JViews V8.7 introduces a new interaction technology named Hitmap that considerably improves the responsiveness and the interactivity of JViews Web applications. Hitmap technology enables developers to provide pure client-side interaction capabilities in JViews Web applications without requiring round trips to the servers.

The ToolTip interactor uses Hitmap technology and allows users to show customized ToolTips when hovering the mouse over graphic objects. Using Hitmap technology, the ToolTip can be constructed and displayed on the client side without a round trip to the server.

Listing 5 provides a code snippet on how the tooltipInteractor can be declared in a JSP:

Listing 5. Declaring a tooltipInteractor
<jvf:tooltipInteractor id="tooltipInteractor"/>
...
<jvdf:diagrammerView id="diagrammer" interactorId="tooltipInteractor"/>

Figure 7 shows an example of the tooltipInteractor active. Though the mouse pointer is not visible in the image, the mouse is hovering over the “Enter DB Connection Params” node, causing a tooltip with some related information to appear.

Figure 7. Node with tooltipInteractor active
Node with tooltipInteractor active

A detailed description of the above sample can be found here:

http://publib.boulder.ibm.com/infocenter/jviewent/v8r7/index.jsp?topic=/com.ibm.ilog.jviews.diagrammer.doc/jviews-diagrammer87/samples/diagrammer/jsf-diagrammer-gallery/index.html

For more information regarding the tooltipInteractor, have a look at the following section of the JViews Programmer’s documentation:

http://publib.boulder.ibm.com/infocenter/jviewent/v8r7/index.jsp?topic=/com.ibm.ilog.jviews.diagrammer.doc/Content/Visualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrwebdiag1156.html

With this, we hope you will explore the Web development capabilities of IBM ILOG JViews Diagrammer V8.7 to help create highly interactive Web-based JViews Diagrammer applications.

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=549524
ArticleTitle=Interacting with JSF Diagrams in JViews Diagrammer V8.7
publish-date=10132010