<table cellpadding="2" cellspacing="0" width="790" border="0" >
<thead>
<tr class="tabletitle">
<td width="148" style="text-align: left"> Name</td>
<td width="42">Last</td>
<td width="64" style="text-align: center">Time</td>
<td width="24" style="text-align: center">+/-</td>
<td width="61">Change</td>
<td width="50">Bid Size</td>
<td width="50">Bid</td>
<td width="50">Ask</td>
<td width="50">Ask Size</td>
<td width="50">Min</td>
<td width="50">Max</td>
<td width="50">Ref.</td>
<td width="50">Open</td>
</tr>
</thead>
<tbody>
<tr id="stocks" data-source="lightstreamer" class="lscoldA" border="0">
<td nowrap style="text-align: left">
<a href="#" data-source="lightstreamer" data-field="click" data-update="onclick">
<img src="images/popup.gif" width="16" height="16" border="0" align="left" hspace="1" alt="Graphic Chart">
<div id="stockName" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #000080; background: #eeeeee; font-weight: bold; text-align: left;" data-source="lightstreamer" data-field="stock_name">Loading...</div>
</a>
</td>
<td><div data-source="lightstreamer" data-field="last_price">-</div></td>
<td><div data-source="lightstreamer" data-field="time">-</div></td>
<td>
<div>
<img data-source="lightstreamer" data-field="arrow" data-update="src" src="images/spacer.gif" width="20" height="8" border="0">
</div>
</td>
<td nowrap="nowrap"><div data-source="lightstreamer" data-field="pct_change">-</div></td>
<td><div data-source="lightstreamer" data-field="bid_quantity">-</div></td>
<td><div data-source="lightstreamer" data-field="bid">-</div></td>
<td><div data-source="lightstreamer" data-field="ask">-</div></td>
<td><div data-source="lightstreamer" data-field="ask_quantity">-</div></td>
<td><div data-source="lightstreamer" data-field="min">-</div></td>
<td><div data-source="lightstreamer" data-field="max">-</div></td>
<td><div data-source="lightstreamer" data-field="ref_price">-</div></td>
<td><div data-source="lightstreamer" data-field="open_price">-</div></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="disc">Simulated market data.</td>
<td colspan="12" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; background: #ffffff; font-weight: bold; text-align: right">
<a href="#" id="switchP2" style="display:none" onClick="changePage(2); return false;"> Next 15 >> </a>
<a href="#" id="switchP1" style="display:none" onClick="changePage(1); return false;"> << Previous 15 </a>
</td>
</tr>
</tfoot>
</table>
<script>
//////////////// Connect to current host (or localhost) and configure a StatusWidget
var hostToUse = document.location.protocol == "file:" ? "http://localhost:8080" : document.location.protocol+"//"+document.location.hostname+(document.location.port?":"+document.location.port:"");
define("sharingClient",["LightstreamerClient","StatusWidget"],function(LightstreamerClient,StatusWidget) {
var sharingClient = new LightstreamerClient(hostToUse,"DEMO");
sharingClient.connectionSharing.enableSharing("DemoCommonConnection", "ATTACH", "CREATE");
sharingClient.addListener(new StatusWidget("right", "0px", true));
sharingClient.connect();
return sharingClient;
});
</script>
<script src="format.js" type="text/javascript"></script>
<script type="text/javascript">
var redColor = "#f8b87a";
var greenColor = "lightgreen";
var backC = "transparent";
var hotTxtCol = "#000000";
var fieldsList = ["last_price", "time", "pct_change", "bid_quantity", "bid", "ask", "ask_quantity", "min", "max", "ref_price", "open_price", "stock_name", "item_status"];
var itemList1 = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9", "item10", "item11", "item12", "item13", "item14", "item15"];
var itemList2 = ["item16", "item17", "item18", "item19", "item20", "item21", "item22", "item23", "item24", "item25", "item26", "item27", "item28", "item29", "item30"];
var imgUp = "images/quotes_up.gif";
var imgDown = "images/quotes_down.gif";
var doFade = location.search.indexOf("fade=ON") > -1;
var unique = Math.floor(Math.random() * 1000);
var lsClient;
var subsItemList1;
var subsItemList2;
var styleH = "lshot";
var styleC = "lscold";
var count=0;
var flag=0;
var flag2=0;
require(["sharingClient","Subscription","DynaGrid"],
function(sharingClient,Subscription,DynaGrid) {
var dynaGrid = new DynaGrid("stocks",true);
var cellList = dynaGrid.extractFieldList()
dynaGrid.setSort("stock_name");
dynaGrid.setNodeTypes(["div","span","img","a"]);
dynaGrid.setAutoCleanBehavior(true, false);
dynaGrid.addListener({
onVisualUpdate: function(key,info,domNode) {
if(flag2==0) {
count++;
if(count>=15)
$("table > tbody > tr:gt(16)").hide();
if(count>=31)
flag2=1;
}
if (info == null) {
return;
}
//general style and effects
info.setHotTime(400);
info.setStyle(styleH,styleC);
if (info.getChangedFieldValue("stock_name") != null) {
dynaGrid.updateRow(key,{click:"openPopup('"+key+"');return false;"});
} else if (doFade) {
info.setHotToColdTime(300);
}
var cold = (key.substring(4) % 2 == 1) ? "#eeeeee" : "#ddddee";
domNode.style.backgroundColor = cold;
if (info.getChangedFieldValue("item_status") == "inactive") {
//possible if testing the JMS version of the Data Adapter
//if it happens we want all the cells to be highlighted in grey;
//first we force the highlighting on every cell
forceHighlight(info,true,cellList);
info.setAttribute("#808080","#808080","color");
} else {
if ((info.getChangedFieldValue("item_status") == "active" && dynaGrid.getValue(key,"item_status") == "inactive")) {
//possible if testing the JMS version of the Data Adapter
//so we force again the highlighting on every cell to restore
//the "active" color
forceHighlight(info,true,cellList);
info.setAttribute("#000000","#000000","color");
info.setCellAttribute("stock_name","#000080","#000080","color");
}
// illumination color
// choose the backgroundColor
var lastPrice = info.getChangedFieldValue("last_price");
if (lastPrice !== null) {
var prevPrice = dynaGrid.getValue(key,"last_price");
if (!prevPrice || lastPrice > prevPrice) {
info.setAttribute(greenColor,cold,"backgroundColor");
} else {
info.setAttribute(redColor,cold,"backgroundColor");
}
} else {
info.setAttribute(greenColor,cold,"backgroundColor");
}
//put arrow and handle change style
var pctChange = info.getChangedFieldValue("pct_change");
if (pctChange !== null) {
pctChange = formatDecimal(pctChange,2,true)+"%";
hotTxtCol = (pctChange.charAt(0) == '-') ? "#dd0000" : "#009900";
if (pctChange.indexOf("-") > -1) {
info.setCellValue("arrow",imgDown);
info.setCellAttribute("arrow",cold,cold,"backgroundColor");
info.setCellAttribute("pct_change","black",hotTxtCol,"color");
info.setCellValue("pct_change",pctChange);
} else {
info.setCellValue("arrow",imgUp);
info.setCellAttribute("arrow",cold,cold,"backgroundColor");
info.setCellAttribute("pct_change","black",hotTxtCol,"color");
info.setCellValue("pct_change","+"+pctChange);
}
info.setCellAttribute("pct_change","bold","bold","fontWeight");
}
// format decimal fields.
formatDecimalField(info, "last_price");
formatDecimalField(info, "bid");
formatDecimalField(info, "ask");
formatDecimalField(info, "min");
formatDecimalField(info, "max");
formatDecimalField(info, "ref_price");
formatDecimalField(info, "open_price");
// format the timestamp
var time = info.getChangedFieldValue("time");
if (time != null) {
info.setCellValue("time",formatTime(time));
}
}
}
});
subsItemList1 = new Subscription("MERGE",itemList1,fieldsList);
subsItemList1.addListener(dynaGrid);
subsItemList1.setDataAdapter("QUOTE_ADAPTER");
subsItemList1.setRequestedSnapshot("yes");
subsItemList1.setRequestedMaxFrequency(1);
subsItemList2 = new Subscription("MERGE",itemList2,fieldsList);
subsItemList2.addListener(dynaGrid);
subsItemList2.setDataAdapter("QUOTE_ADAPTER");
subsItemList2.setRequestedSnapshot("yes");
subsItemList2.setRequestedMaxFrequency(0.1);
sharingClient.subscribe(subsItemList1);
sharingClient.subscribe(subsItemList2); //we may also subscribe both lists simultaneously
lsClient = sharingClient;
//enable switch
document.getElementById("switchP2").style.display = "";
});
//////////////// Stock Details Popup Management
function openPopup(item) {
var wdt = window.open("popup.html?item=" + item, "SLDpopup_" + unique + "_" + item, "width=535,height=238,history=0,resizable,status=1,menubar=1");
wdt.focus();
return false;
}
//////////////// Stock Grid Management
function changePage(groupNumber) {
rowlimit =15;
if (groupNumber == 1) {
$("table > tbody > tr:eq(1)").hide();
$("table > tbody > tr:lt(16)").show();
$("table > tbody > tr:gt(16)").hide();
document.getElementById("switchP1").style.display = "none";
document.getElementById("switchP2").style.display = "";
//// lsClient.unsubscribe(subsItemList2);
// lsClient.subscribe(subsItemList1);
} else if (groupNumber == 2) {
$("table > tbody > tr:lt(16)").hide();
$("table > tbody > tr:gt(16)").show();
document.getElementById("switchP1").style.display = "";
document.getElementById("switchP2").style.display = "none";
// lsClient.unsubscribe(subsItemList1);
// lsClient.subscribe(subsItemList2);
}
}
$(document).ready(function() {
// Handler for .ready() called.
$("table > tbody > tr:gt(16)").hide();
});
</script>
</body>
</html>