How to Use the ICEfaces OutputConnectionStatus ComponentThe 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.
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 an outputConnectionStatus component
<ice:outputConnectionStatus cautionLabel="Caution: Connection in danger." activeLabel="Active: Working." disconnectedLabel="Disconnected." inactiveLabel="Active: Idle." /> The screen shot below shows the component in action:
Graphical representation of an outputConnectionStatus component
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'/> <ice:outputConnectionStatus/> or, <link rel='stylesheet' type='text/css' href='./xmlhttp/css/royale/royale.css'/> <ice:outputConnectionStatus/> The screen shots below show the two different themes:
Customize the style of the outputConnectionStatus component
<link rel='stylesheet' type='text/css' href='./xmlhttp/css/royale/royale.css'/>
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: style.css .iceOutConStat { border:medium none; font-size:2em; height:25px; margin:10px; width:25px; } .iceOutConStatInactive { position: absolute; left: 0px; top: 0px; background-image: url( css-images/connect_idle.gif ); background-position: 0px 0px; background-repeat: repeat; width: 100%; height: 100%; } .iceOutConStatActive { position: absolute; left: 0px; top: 0px; background-image: url( css-images/connect_active.gif ); background-position: 0px 0px; background-repeat: repeat; width: 100%; height: 100%; } .iceOutConStatCaution { position: absolute; left: 0px; top: 0px; background-image: url( css-images/connect_caution.gif ); background-position: 0px 0px; background-repeat: repeat; width: 100%; height: 100%; } .iceOutConStatDisconnect { position: absolute; left: 0px; top: 0px ; background-image: url( css-images/connect_disconnected.gif ); background-position: 0px 0px; background-repeat: repeat; width: 100%; height: 100%; } Specify the css file for the customized outputConnectionStatus with the following line:
<link rel='stylesheet' type='text/css' href='style.css'/>
The screen shots below shows how the component switches background color as the connection state changes.
Tutorial Source Code Downloads
|
Connection Status
© Copyright 2021 ICEsoft Technologies Canada Corp.