The outputConnectionStatus component displays information about the status of the network connection between the client browser and the server. The component displays one of 4 possible states, which are as follows.
- Active: The connection is alive and there is a request pending.
- Inactive: The connection is alive and there is no pending activity.
- Caution: The connection request/response latency has exceeded the configured threshold. Indicates that asynchronous updates from the server may not be received in a timely manner.
- Disconnected: The connection has been lost, either due to network or application error (session expiry, etc.).
The outputConnectionStatus component provides an ideal mechanism to provide continuous real-time feedback to users of the status of their ICEfaces application. It is particularly important to inform users when the application is busy sending and receiving data in response to a user-initiated action to manage their expectations with respect to application readiness for additional user input. Generally, the outputConnectionStatus component should be located in a consistent location throughout an ICEfaces application.
NOTE: A web-page may only contain a single outputConnectionStatus component. Using more than one outputConnectionStatus component on the same web page will result in erratic results.
The rest of this tutorial will cover the following topics:
- Creating a Basic outputConnectionStatus component with label
- Creating an outputConnectionStatus component with graphic representation
- How to custom style an outputConnectionStatus component
- Tutorial Source Code Downloads
The creation of an outputConnectionStatus component is a simple one step process. The following code sample shows how to use the component to reflect the current connection status:
The screen shot below shows the component in action:
The outputConnectionStatus component can also be graphically represented. The component displays one of four possible states graphically as follows:
The creation of the outputConnectionStatus component with graphical representation is also simple. The following example code shows how to display the outputConnectionStatus component in two different themes:
The screen shots below show the two different themes:
The style of the outputConnectionStatus component is customizable to a user's preference. As shown in the above examples, the styling and positioning are determined by the css file that comes with the ICEFaces framework:
You are able to customize the outputConnectionStatus component for different purposes. The example below shows how to customize styling the component so that the component can be use to display a full page overlay of a different translucent colour for each connection state.
To customize the styling of the outputConnectionStatus component you only need to create your own css file and choose the background images. In this example, four transparent images of different colors are used as the outputConnectionStatus component's background image. The example css file is as follows:
Specify the css file for the customized outputConnectionStatus with the following line:
The screen shots below shows how the component switches background color as the connection state changes.
|connectionStatus-label||connectionStatus-label source code||Simple example of how to setup a basic outputConnectionStatus component with label.|
|connectionStatus-xp||connectionStatus-xp source code||Example showing how to setup an outputConnectionStatus component with XP style theme|
|connectionStatus-royale||connectionStatus-royale source code||Example showing how to setup an outputConnectionStatus component with royale style theme|
|connectionStatus-customize||connectionStatus-customize source code||Custom styling the outputConnectionStatus component that displays transparent background images in different color when the connection state changes|