Statusbar

Component for showing a status bar control in the page.

Syntax

HTML	<div cordysType="wcp.libaray.ui.StatusBar" id=statusbarID > ... </div>

where, statusbarID denotes the identifier of the component.

Once set in a HTML page, the component aligns itself to the bottom of the page, spanning to the full width and text left aligned. The statusbar can also be attached to the page by setting the class property of the HTML element to the component as follows:

HTML	<textarea id=statusbarID class="statusbar"></textarea>

It is also possible to set the width and height using the style property for a statusbar as shown below:

HTML	<div cordysType="wcp.libaray.ui.StatusBar" id="status" status="Some content here" style="height:30px"> ... </div>

To dynamically add and initialize this component, you can use the initializeHTML Elements or addType methods of the Application object.

The properties, methods, and events defined for the statusbar are as follows:

Table 1. List of Attributes

Attribute/Property	Description
height	This is the style property that indicates the height of the statusbar. By default, this is 15px.
width	This is the style property that indicates the width of the statusbar. By default, this is 110%.

Table 2. List of Methods

Method	Description
getStatus	Gets the value of the status property.
setStatus	Sets the status property, which is a variant that denotes the content displayed in the status bar control. The value for this property can be a string or a HTML element such as FONT or IMAGE.

Note:

The statusbar component can only be used for showing the status of an application and not for showing status of objects like tables. So it is always recommended to use the statusbar directly under the body.
The content inside the status bar cannot be edited. However, copying can be done by dragging the text inside the status bar for selection (using the mouse) and using the windows shortcut keys Ctrl C and Ctrl V (For copying and pasting respectively).
The text beyond the width of the status bar control will be hidden. In such cases, it is advised to attach the status bar to a text area. Dragging the content inside the text area shows the whole content including the content that exceeds the width.

Example

This sample shows how the statusbar component is used:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="/cordys/wcp/application.js"></script>
    <title>Status bar demo</title>
</head>
<body leftmargin=20 topmargin=20 rightmargin=0 bottommargin=0 scroll=no>
    <h1>This is your HTML Content.</h1>
    <br><h3>This shows a normal statusbar</h3>
    <div cordysType="wcp.libaray.ui.StatusBar" status="This is my statusbar"></div>
</body>
</html>

The following example shows a more sophisticated statusbar which looks similar to the Windows statusbar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
	<head>
		<script src="/cordys/wcp/application.js" ></script>
		<title>Status bar demo</title>
		<script type="text/javascript" >
			function setDate()
			{
				var date = new Date();
				lblDate.innerHTML = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
			}
		</script>
	</head>
	<body leftmargin=20 topmargin=20 rightmargin=0 bottommargin=0 scroll=no onload="setDate()" >
		<h1>This is your HTML Content.</h1>
		<br><h3>This shows a windows-style statusbar</h3>
		<div cordysType="wcp.library.ui.StatusBar" style="height:18px;font-size:9" >
			<table width="100%" border="1" class="statustext" >
				<tr valign="top" >
					<td width="*" class="input light" >
					<label id="statusbar" style="overflow:hidden" >Main status bar message</label>
					</td>
					<td width="90px" >
					Some content
					</td>
					<td width="130px" >
					Some more content
					</td>
					<td width="200px" >
					Date  
					<label id="lblDate" style="font-weight:bold" ></label>
					</td>
				</tr>
			</table>		
		</div>
	</body>
</html>

pp108 : Statusbar

Statusbar

Syntax

Example