Nirvana JavaScript: Live Stock Indices
This example demonstrates how to subscribe to a Nirvana channel and render prices received in real-time events.
Application Source Code: showcase/stockindices.html
See also:
<?xml version="1.0" encoding="UTF-8"?>
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Nirvana webExpress Tutorial Application: Live Stock Indices</title>
<link rel="stylesheet" type="text/css" href="../../../css/genericStyle.css" />
<script language="JavaScript" src="../../../js/lib/nClient.js"></script>
<script language="JavaScript" src="genericApp.js"></script>
<!--
Each event on our channel contains a simple dictionary with key/value pairs such as:
messageID: ftse
name: FTSE 100
value: 4501.3
open: 4603.4
type: mid
This allows our app logic to be very simple:
-->
<script>
////////////////////////////////////////////////////////////////////
// Variables required by generic app logic in genericApp.js:
////////////////////////////////////////////////////////////////////
var applicationName = "StockIndices";
var channelName = "/showcase/stockindices";
////////////////////////////////////////////////////////////////////
// Simple init and custom event handler logic for our sample app:
////////////////////////////////////////////////////////////////////
window.onload = isLoaded;
var gridRows = null;
function isLoaded() {
initializeSession(); // logic in genericApp.js
gridRows = document.getElementById("demoTableBody").getElementsByTagName('tr');
}
function eventCB(event) {
var dictionary = event.getDictionary();
for ( var r=0, m=gridRows.length; r<m; r++ ) {
var rowCells = gridRows[r].getElementsByTagName('td');
for ( var c=0, l=rowCells.length; c<l; c++ ) {
var cell = rowCells[c];
if (cell.id == "") cell.id = "cell" + r + "_" + c;
if ( cell.getAttribute("messageID") == dictionary.get("messageID") ) {
var newValue = dictionary.get(cell.getAttribute("eventKey"));
if (cell.innerHTML != newValue) {
cell.innerHTML = newValue;
pingCell(cell);
}
}
}
}
}
function pingCell(cell) {
var origClassName = cell.className.replace(/Ping/g,"");
cell.className = origClassName + "Ping";
setTimeout("document.getElementById('" + cell.id + "').className = '" + origClassName + "'", 500);
}
</script>
</head>
<body>
<div id="bodycontent">
<h1>Nirvana webExpress</h1>
<h2>Live Stock Indices</h2>
<table id="demoTable">
<tbody id="demoTableBody">
<tr>
<th>Stock Index</th>
<th>Value</th>
</tr>
<tr>
<td class="label" messageID="ftse" eventKey="name">-</td>
<td class="mid" messageID="ftse" eventKey="value">-</td>
</tr>
<tr>
<td class="label" messageID="dax" eventKey="name">-</td>
<td class="mid" messageID="dax" eventKey="value">-</td>
</tr>
<tr>
<td class="label" messageID="cac" eventKey="name">-</td>
<td class="mid" messageID="cac" eventKey="value">-</td>
</tr>
<tr>
<td class="label" messageID="djia" eventKey="name">-</td>
<td class="mid" messageID="djia" eventKey="value">-</td>
</tr>
<tr>
<td class="label" messageID="ndaq" eventKey="name">-</td>
<td class="mid" messageID="ndaq" eventKey="value">-</td>
</tr>
</tbody>
</table>
<p id="sampleNav"><a href="index.html">webExpress Tutorials</a></p>
</div>
</body>
</html>
EXAMPLE_SOURCE_END
Share this page with others:
Follow Us:
