Rogue Wave JViews TGO Sample: JSF Equipment Component - Image Renderer

Description

This sample shows how to create an equipment representation using real images with the JViews TGO Faces Equipment component.

How to Use the Sample

The contextual menu (right click) can be used for several operations:
- Managing the alarm state of selected objects in the Equipment view
- Enabling or disabling interaction of different types: selection, zooming and panning
- Zooming in or out; or showing all objects in the view
The toolbar can be used for operations, such as:
- Enabling or disabling interaction of different types: selection, zooming and panning
- Zooming in or out; or showing all objects in the view
The overview can be used to select the region being viewed in the Equipment view
The message box shows messages that provide information to users on the name of an interactor when hovered the buttons in the toolbar

Installing the Thin-Client Sample

The sample contains a WAR file (Web Archive) that allows you to easily install the sample on any server that supports the Servlet API 2.1 or later. For your convenience, the WAR will be copied to the Tomcat web server that is supplied with the Rogue Wave JViews installation when you start the server using the supplied scripts. Tomcat is the official reference implementation of the Servlet and JSP specifications. If you are already using an up-to-date Web or application server, there is a good chance that it already has everything you need. The sample can also be deployed to WebSphere Application Server (WAS).

Running the Sample Using Tomcat

If you intend to use the Tomcat Web server provided with this installation, follow these instructions to start the server: Running the Server-Side Samples. The scripts to start the server can be found in the tools/tomcat-jsf directory.
Note: if you are running on Windows then you will find menu items in the Windows "start" menu to start and stop the Tomcat server.

Once the server is running, you can see the sample by opening the following page:

Rogue Wave JViews TGO Sample: JSF Equipment Component - Image Renderer
http://localhost:8080/jsf-equipment-image-renderer

Running the Sample Using WebSphere Application Server

In addition to the instructions provided for using Tomcat, the samples can be viewed on WebSphere Application Server. Follow the instructions: Running the Server-Side Samples and use the scripts to start the server and deploy the sample.

Once the server is running, you can see the sample by opening the following page: http://localhost:9443/jsf-equipment-image-renderer
The WAS administrative console can be used to verify or modify server settings: http://localhost:9043/ibm/console/

Note: the WAS server can start on a range of port numbers, therefore the value is not guaranteed to remain the same. The scripts provided with the samples can be used to obtain the port numbers used by the Admin Console and by the deployed Web applications. To retrieve a list of all the WAS port numbers, run the command line instruction: ant -f build_was.xml ws.list.ports

Topics Covered

Use of realistic images as the equipment and business objects
JViews TGO Faces Equipment View Component
JViews TGO Faces Client Select Interactor
JViews Framework Faces Overview within JViews TGO
JViews Framework Faces Contextual Menu within JViews TGO
Integration of Server Actions in the Contextual Menu
Integration of Client Actions in the Contextual Menu
JViews Framework Faces Interactors within JViews TGO
JViews Framework Faces Image Button within JViews TGO
JViews Framework Faces Message Box within JViews TGO
JViews Framework Faces Contextual Menu Control
Advanced Look-And-Feel customization
Styling Customization of JViews Framework and TGO Faces Components

Detailed Description

This sample shows how to create an equipment representation using real images with the JViews TGO Faces Equipment component. It makes use of a real equipment background together with real images of ports and LEDs to provide a realistic representation of your Equipment component.
It is important to understand that this sample uses as an implementation of the AbstractSampleContext, namely the SampleContext, that serves as:

A context holding the beans needed by this sample
The abstraction in charge of initializing the sample for execution

So before proceeding it is recommended that you review the section Common Features of Faces Samples in the JViews TGO documentation to ensure that you understand the design behind the sample, see Starting the samples as this section contains more details on how the JViews TGO JSF samples are designed around the AbstractSampleContext.

This sample uses the following types:

SampleContext
This implementation of the AbstractSampleContext:
- Creates an IlpEquipment in its createComponent method
- Initializes this IlpEquipment with the default TGO project project.itpr located in webpages/resources/configuration/projects
- Initializes this JViews TGO runtime with the custom settings defined in the settings.css file located in webpages/resources/styles which contains the customizations needed to use the custom ports, LEDs and cards illustrated in this sample that use the real equipment images
action.AlarmStateHandler
This is the javax.faces.event.ActionListener implementation that handles the management of alarm changes in the TGO object state when triggered by the contextual menu
popup.PopupMenuFactory
This is ilog.views.util.servlet.IlvMenuFactory implementation that populates the contextual menu for the IlpEquipment when right clicked
renderer.CardBaseRendererFactory
This is the ilog.tgo.graphic.renderer.IltCardDirectImageBaseRendererFactory implementation that provides an ilog.tgo.graphic.renderer.IltBaseRenderer implementation that is used to render the custom card types. This implementation, renderer.CardBaseRendererFactory.CardBaseRenderer extends the ilog.tgo.graphic.renderer.IltCardDirectImageBaseRendererFactory.BaseRenderer in that it draws additional borders for objects that are selected
renderer.PortBaseRendererFactory
This is the ilog.tgo.graphic.renderer.IltPortDirectImageBaseRendererFactory implementation that provides an ilog.tgo.graphic.renderer.IltBaseRenderer implementation that is used to render the custom port types. This implementation, renderer.PortBaseRendererFactory.PortBaseRenderer extends the ilog.tgo.graphic.renderer.IltPortDirectImageBaseRendererFactory.BaseRenderer in that it draws additional borders for objects that are selected
renderer.LedBaseRendererFactory
This is the ilog.tgo.graphic.renderer.IltAbstractDirectImageBaseRendererFactory implementation that provides an ilog.tgo.graphic.renderer.IltBaseRenderer implementation that is used to render the custom LED types. This implementation, renderer.LedBaseRendererFactory.BaseRenderer extends the ilog.tgo.graphic.renderer.IltLedBaseRenderer in that it draws the image retrieved from CSS

This sample is composed of one JSP file: index.jsp that is located in webpages directory. This JSP file defines all the JViews Framework and JViews TGO Faces components that compose and support the sample's user interface. For example, the Equipment View Faces component is initialized in this file to use as its IlpContext and its associated IlpEquipment, the IlpContext and IlpEquipment instances that are contained in the SampleContext. The standard JSF Expression Language syntax is used to specify this association: <jvtf:equipmentView context="#{sampleContext.context}" equipment="#{sampleContext.equipment}" ... >.

This sample has the following directory structure:

webpages/resources/configuration/deployment
Contains the JView TGO deploment settings (deploy.xml)
webpages/resources/configuration/projects
Contains the JViews TGO project that is used by the IlpEquipment (project.itpr)
webpages/resources/data
Contains the equipment data file that is displayed in the Equipment view (equipment.xml)
webpages/resources/images/cards
Contains the images that are used to represent the custom cards
webpages/resources/images/ports
Contains the images that are used to represent the custom ports
webpages/resources/images/leds
Contains the images that are used to represent the custom LEDs
webpages/resources/images/popup
Contains the images that are used by the contextual menu
webpages/resources/images/toolbar
Contains the images that are used by the toolbar
webpages/resources/styles
Contains the CSS files that define the sample's:
- Equipment configuration (equipment.css)
- Look-And-Feel (cards.css, leds.css, object.css and ports.css)
- JViews TGO settings that define the custom ports, LEDs and cards (settings.css)
- HTML CSS styles that customize the Look-And-Feel of the HTML page itself (style.css)

For more details see the resource and source files themselves.

Installation Directory

The JSF Equipment Component - Image Renderer sample is installed here.