Perforce 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 Perforce 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:
- Perforce 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
AbstractSampleContext
.
This sample uses the following types:
-
SampleContext
This implementation of theAbstractSampleContext
:- Creates an
IlpEquipment
in itscreateComponent
method - Initializes this
IlpEquipment
with the default TGO projectproject.itpr
located inwebpages/resources/configuration/projects
- Initializes this JViews TGO runtime with the custom settings defined in the
settings.css
file located inwebpages/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
- Creates an
-
action.AlarmStateHandler
This is thejavax.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 isilog.views.util.servlet.IlvMenuFactory
implementation that populates the contextual menu for theIlpEquipment
when right clicked -
renderer.CardBaseRendererFactory
This is theilog.tgo.graphic.renderer.IltCardDirectImageBaseRendererFactory
implementation that provides anilog.tgo.graphic.renderer.IltBaseRenderer
implementation that is used to render the custom card types. This implementation,renderer.CardBaseRendererFactory.CardBaseRenderer
extends theilog.tgo.graphic.renderer.IltCardDirectImageBaseRendererFactory.BaseRenderer
in that it draws additional borders for objects that are selected -
renderer.PortBaseRendererFactory
This is theilog.tgo.graphic.renderer.IltPortDirectImageBaseRendererFactory
implementation that provides anilog.tgo.graphic.renderer.IltBaseRenderer
implementation that is used to render the custom port types. This implementation,renderer.PortBaseRendererFactory.PortBaseRenderer
extends theilog.tgo.graphic.renderer.IltPortDirectImageBaseRendererFactory.BaseRenderer
in that it draws additional borders for objects that are selected -
renderer.LedBaseRendererFactory
This is theilog.tgo.graphic.renderer.IltAbstractDirectImageBaseRendererFactory
implementation that provides anilog.tgo.graphic.renderer.IltBaseRenderer
implementation that is used to render the custom LED types. This implementation,renderer.LedBaseRendererFactory.BaseRenderer
extends theilog.tgo.graphic.renderer.IltLedBaseRenderer
in that it draws the image retrieved from CSS
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 theIlpEquipment
(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
)
- Equipment configuration (
resource
and source
files themselves.
Installation Directory
The JSF Equipment Component - Image Renderer sample is installed here.
Classes Involved
- ilog.tgo.faces.service.IltFacesDefaultContext
- ilog.cpl.util.IlpI18NUtil
- ilog.cpl.model.IlpAttribute
- ilog.tgo.resource.IltSettings
- ilog.tgo.model.IltAlarm
- ilog.tgo.model.IltObjectState
- ilog.views.faces.dhtml.IlvDHTMLConstants
- ilog.views.faces.dhtml.event.FacesViewActionListener
- ilog.views.util.servlet.event.ServletActionEvent
- ilog.views.util.servlet.IlvMenuFactory
- ilog.views.util.servlet.event.JavaScriptActionListener
- ilog.views.util.servlet.model.IlvMenu
- ilog.views.util.servlet.model.IlvMenuSeparator
Source Files
- SampleContext
- AbstractSampleContext
- action.AlarmStateHandler
- popup.PopupMenuFactory
- renderer.CardBaseRendererFactory
- renderer.PortBaseRendererFactory
- renderer.LedBaseRendererFactory