View Source

h1.How to Use the ICEfaces OutputConnectionStatus Component

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|#label]
* [Creating an outputConnectionStatus component with graphic representation|#graphic]
* [How to custom style an outputConnectionStatus component|#style]
* [Downloads|#downloads]


h2. {anchor:label}Creating 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:

cautionLabel="Caution: Connection in danger."
activeLabel="Active: Working."
inactiveLabel="Active: Idle." />

The screen shot below shows the component in action: !connection_showcase_screenshot.PNG!



h2. {anchor:graphic}Graphical representation of an outputConnectionStatus component

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:

<link rel='stylesheet' type='text/css' href='./xmlhttp/css/xp/xp.css'/>


<link rel='stylesheet' type='text/css' href='./xmlhttp/css/royale/royale.css'/>

The screen shots below show the two different themes: