Prerequisites: Notions in JavaScript and HTML.

The ILOG JViews JSF components are usually used through the JSP tags and their Java JSF component classes. But, on the client side, these components also have a representation in the form of JavaScript instances.

As described in the documentation, each JSF component is generating a JavaScript instance whose variable name is the id value set on the JSP tag.

To retrieve the class of this instance, open the ILOG JViews 8.1 product guide and look in the documentation of the JSP tag you used in the “Faces Tag Libraries” section.

These classes named proxies are the JavaScript interface for the JSF components.

Using these proxies API, you can change some properties of the JSF component client side representation without issuing a page refresh. As the proxies manage the state of the component, every change of a property using this API is recorded to synchronize the server side component on the next submit.

I will use the IlvDiagrammerViewProxy class (proxy of the jvdf:diagrammerView component) to illustrate this API.

In the JSP:

<jvdf:diagrammerView id="diagrammer" [...] />

So we have a JavaScript variable named diagrammer of type IlvDiagrammerViewProxy.

For example a call to this method will change the image displayed while the image is loaded:

diagrammer.setWaitingImage(waitingImage);

You also have API to control what is displayed by a view:

• zoomIn, zoomOut, zoomBy, moveTo, panNorth, showAll etc…

Or to query an update of the image

• updateImage, updateAll

In JViews 8.1, you will find interesting API to control the selection.

In the JSP:

<jvdf:diagrammerView id="diagrammer" [...]>
  <f:facet name="selectionManager">
    <jvf:selectionManager [...]>
  </f:facet>
</jvdf:diagrammerView>

In the client side:

  var selectionManager /*IlvSelectionManager*/ =
                               diagrammer.getSelectionManager();

On this selection manager you can select (or deselect) all the nodes and select a node knowing its SDM identifier.

  selectionManager.selectAll();
  selectionManager.deselectAll();
  selectionManager.selectById("nodeid");

Another API area is the manipulation on the HTML representation of the component.

Every ILOG JViews Faces component is generating its HTML representation in an enclosing DIV tag.

To retrieve the node of this enclosing DIV tag every proxy provides the getReferenceNode() method.

Having this node allows to dynamicallu show or hide the view for example

  function show() {
    var node /*DOM node*/ = diagrammer.getReferenceNode();
    node.style.visibility = "visible";
  }

  function hide() {
    var node /*DOM node*/ = diagrammer.getReferenceNode();
    node.style.visibility = "hidden";
  }

Or even change the position of the HTML representation by changing the parent of this node in the DOM tree.

var node /*DOM node*/ = diagrammer.getReferenceNode();
node.parentNode.removeChild(node);
newParent.appendChild(node);

For very advanced user, you can access of the underlying object that is wrapped by the proxy.
Note that the modified properties will not be tracked, so the server side component will not be updated.
To retrieve the class name, look at the proxy class documentation where the wrapped instance type is described.

var view = diagrammer.getObject(); //8.1 or greater
or
var view = diagrammer.getJViewsDHTMLObject();

You usually find the method you are looking for directly on the proxies but, in some special cases, you may have to access these objects.

Finally I strongly recommend to use dedicated JavaScript editors like for example Aptana and debuggers like FireBug or the IE Developer Toolbar for Internet Explorer .

I have illustrated some use cases so I encourage you to explore the documentation to find more !

Tags: DHTML, JSF

Posted by Damien Garbarino in JSF. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.