Combining JSF components

How to set up an overview for the network view

The overview component must be manually set up within the HTML page. Its dimensions and location are important criteria to be considered when designing the HTML page. The following example shows how to declare an overview and connect it to the network view:

<h:panelGrid columns="2">
  <jvtf:networkView id="aNetwork" 
                      context="#{contextBean}"
                      style="width:740;height:550" 
                      project="data/myProject.itpr" />
  <jvf:overview id="anOverview"
                viewId="aNetwork"
                style="width:123;height:91" />
</h:panelGrid>

In the example, a network view component is declared with the unique identifier " aNetwork " within a two-column panelGrid . Then, an overview component is declared so that it is layered after the network component. The viewId tag attribute is used to connect the network view to the overview, through the unique identifier of the main view component. Note that the dimensions of both components are defined in a similar way by the tag attribute style .

If you have started the bundled Tomcat web server, the following link will take you to the small sample illustrating this: http://localhost:8080/jsf-network-step-by-step/faces/example9.jsp .

You will find more information about the sample web application in: <installdir> /samples/faces/jsf-network-step-by-step/index.html where <installdir> stands for the directory where Rogue Wave JViews TGO is installed.

How to connect a zoom tool and a pan tool to a network view

See section The JViews Framework JSF Component Set in the Advanced Features of JViews Framework part of the JViews Diagrammer documentation for details about the zoomTool and panTool.

The following example shows how to attach zoomTool and panTool components to a network view:

<h:panelGrid columns="2">
  <jvtf:networkView id="aNetwork" 
                      context="#{contextBean}"
                      style="width:740;height:550" 
                      project="data/myProject.itpr" />
  <h:panelGrid columns="1">
    <jvf:panTool id="aPanTool"
                 viewId="aNetwork"
                 style="width:123;height:123" />
    <jvf:zoomTool id="aZoomTool"
                  viewId="aNetwork"
                  style="width:123;height:322" />
  </h:panelGrid>
</h:panelGrid>

In this example, a network view component is declared with the unique identifier " aNetwork " within a two-column panelGrid . Then, a new one-column panelGrid is declared to accommodate the panTool and zoomTool components. The viewId tag attribute is used to connect the network view to the other components. Note that the style tag attribute is used to set the dimensions for all the declared components.

If you have started the bundled Tomcat web server, the following link will take you to the small sample illustrating this: http://localhost:8080/jsf-network-step-by-step/faces/example10.jsp.

You will find more information about the sample web application in: <installdir> /samples/faces/jsf-network-step-by-step/index.html where <installdir> stands for the directory where Rogue Wave JViews TGO is installed.

How to add image buttons and set client-side actions for the network view component

Although zoomTool and panTool components provide basic user interaction, you can also set client actions to image buttons to achieve similar results. The advantage is that image buttons are more customizable, as the user can define the action to be set. The following example shows how to declare image buttons and associate them with client-side actions.

  <!-- Create a 2 columns grid -->
  <h:panelGrid columns="2">

    <!-- Declare a button for zooming in -->
    <jv:imageButton onclick="aNetwork.zoomIn(true)"
                    image="images/zoom.gif"
                    rolloverImage="images/zoomh.gif"
                    selectedImage="images/zoomd.gif"
                    title="Zoom In" 
                    message="Zoom In" />

    <!-- Declare a button for zooming out -->
    <jv:imageButton onclick="aNetwork.zoomOut(true)"
                    image="images/unzoom.gif"
                    rolloverImage="images/unzoomh.gif"
                    selectedImage="images/unzoomd.gif"
                    title="Zoom Out" 
                    message="Zoom Out" />
  </h:panelGrid>
  <jvtf:networkView id="aNetwork" 
                      context="#{contextBean}"
                      style="width:740;height:550" 
                      project="data/myProject.itpr" />

This example declares two image buttons:

one for zooming in
one for zooming out

Each button declaration defines the following attributes:

onclick : The JavaScript™ action to be triggered when the button is pressed.
image : The main button image.
rolloverImage : The image to be displayed when the mouse pointer rolls over the button.
selectedImage : The image to be displayed when the button is pressed.
title : The tooltip message displayed when the mouse pointer stays over the button.
message : The message displayed in the messageBox component when the mouse pointer stays over the button.

The onclick tag attribute is the most important as it defines the action associated with the button. Note that it uses the JavaScript API of the networkView component to perform the desired action:

onclick="aNetwork.zoomIn(true)" : This uses the zoomIn JavaScript call to zoom in the network view component.
onclick="aNetwork.zoomOut(true)" : This uses the zoomOut JavaScript call to zoom out the network view component.

The onclick attribute can be set with any valid JavaScript code, which will be executed when the button is pressed. The other tag attributes define the look and feel of the button, with corresponding images and tooltip text.

If you have started the bundled Tomcat web server, the following link will take you to the small sample illustrating this: http://localhost:8080/jsf-network-step-by-step/faces/example11.jsp .

You will find more information about the sample web application in: <installdir> /samples/faces/jsf-network-step-by-step/index.html where <installdir> stands for the directory where Rogue Wave JViews TGO is installed.