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
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: