| LS/ | Default build of the Lightstreamer Web Client 4 |
| Dojo/ | Default build of the Dojo toolkit |
| css/ | CSS file |
| images/ | various images used by the style sheet. |
| lightstreamer/ | Dojo module that contains the EventBridge |
| index.html | main HTML page for the demo |
The following steps guide you through a
simple deployment of the Dojo Demo inside Lightstreamer Server (i.e.
Lightstreamer Server is used for both serving the static web resources and
pushing the real-time data).
LS_HOME/pages/ folder (where LS_HOME is the path to your own
Lightstreamer installation).LS_HOME/DOCS-SDKs/sdk_client_web/lib/ to
LS_HOME/pages/DojoDemo/LS/LS_HOME/pages/DojoDemo/2 Source code listing
2.1 In the head of the HTML page include the LS JavaScript
files
<!--
Include Lightstreamer libraries -->
<script src="LS/lscommons.js"></script>
<script src="LS/lspushpage.js"></script>
2.2 Set up some variables
/**2.3 Include the Dojo toolkit
* Set up some vars.
*/
var group = ["item1", "item2", "item3", "item4", "item5",
"item6", "item7", "item8", "item9", "item10",
"item11", "item12", "item13", "item14", "item15"];
var schema = ["stock_name","last_price", "time", "pct_change",
"bid_quantity", "bid", "ask", "ask_quantity", "min",
"max", "ref_price", "open_price"];
var domain = null;
var host = null;
/**
* Optional Dojo debug configuration.
*/
var djConfig = { isDebug: false };
<script src="Dojo/dojo.js"></script>
2.4 In a script block import the needed Dojo components
dojo.require("dojo.widget.FilteringTable");2.5 Include the EventBridge
dojo.require("dojo.event.*");
dojo.require("dojo.event.topic");
2.6 Confirm includes
dojo.require("lightstreamer.EventBridge");
dojo.hostenv.writeIncludes();
2.7 Use the dojo.addOnLoad() to execute this code on page
load
dojo.addOnLoad(function() {
/**
* To start configure the Lightstreamer page
and engine.
* This code is the same as the StockList
tutorial.
*
* Because this demo will be using the
FilteringTable widget to
* display the stock data will be used the
NonVisualTable table
* instead of the OverwriteTable.
*/
var lsPage = new PushPage();
lsPage.context.setDebugAlertsOnClientError(false);
lsPage.context.setRemoteAlertsOnClientError(false);
lsPage.context.setDomain(domain);
lsPage.onEngineReady = function(engineRef) {
engineRef.context.setDebugAlertsOnClientError(debugAlerts);
engineRef.context.setRemoteAlertsOnClientError(true);
engineRef.connection.setLSHost(host);
engineRef.connection.setLSPort(null);
engineRef.connection.setAdapterName("STOCKLISTDEMO");
engineRef.changeStatus("STREAMING");
}
lsPage.bind();
lsPage.loadEngineMinimal("LS/lsengine.html");
var lsTable = new NonVisualTable(group,
schema, "MERGE");
lsTable.setSnapshotRequired(true);
lsPage.addTable(lsTable, "list");
/**
* Lookup the stockTable widget once as doing
it on each
* event will significantly
decrease performance.
*/
var stockTable =
dojo.widget.byId("stockTable");
/**
* Post update messaging of the display of the
filled data is needed
* so connect to the fillCell method of the
FilteringTable and execute
* the local function onUpdateField.
*/
dojo.event.connect(stockTable, "fillCell",
"onUpdateField");
/**
* Listen to the Dojo event topic "stockTopic"
and update the
* data in stockTable's internal date
store.
*/
dojo.event.topic.subscribe("stockTopic",
function(item) {
var obj =
stockTable.store.getDataByKey(item.name);
if(obj) {
for(var
i = 0; i < stockTable.columns.length; i++) {
var column = stockTable.columns[i];
var field = column.getField();
var val = item.fields[field];
stockTable.store.update(obj, field,
val);
}
} else {
stockTable.store.addData(item.fields, item.name);
}
});
2.9 Create an EventBridge that will map the events recived from
the Lightstreamer engine and publish them on the Dojo topic
'stockTopic'
/**
* Create an EventBridge that will map the events recived from
* the lightstreamer engine and publish them on the dojo topic 'stockTopic'
*/
var bridge = new Lightstreamer.EventBridge(lsTable, schema,
"stockTopic");
});
2.10 Define the onUpdateField function
/**
3 HTML document body
* Add
the directional images to the field when it updates.
*/
function
onUpdateField(cell, meta, val) {
if(meta.field == "pct_change") {
var direction = "";
if(val.indexOf('-') == 0)
{
direction = "Down";
} else {
direction = "Up";
}
cell.innerHTML = '<img
src="images/change' + direction + '.gif" border="0" height="5"
width="6"> ' + val + "%";
}
}
3.1 Create FilteringTable
<table dojoType="filteringTable" id="stockTable"
multiple="true"
alternateRows="true" maxSortable="2"
cellpadding="0"
cellspacing="0" border="0"
class="stockListing"
align="center"
style="-moz-user-select:
none;" width="754" >
3.2 Define the columns of the table (the files names need to
match the names from the schema in the LS Table)
<thead>
<tr style="text-align: left">
<th field="stock_name" noSort="false"
width="114" style="text-align: left">Name</th>
<th field="last_price" noSort="true"
width="53">Last</th>
<th field="time" noSort="true"
width="73">Time</th>
<th field="pct_change" noSort="true"
width="62">Change</th>
<th field="bid_quantity" noSort="true"
width="70">Bid Size</th>
<th field="bid" noSort="true"
width="52">Bid</th>
<th field="ask" noSort="true"
width="52">Ask</th>
<th field="ask_quantity" noSort="true"
width="70">Ask Size</th>
<th field="min" noSort="true"
width="52">Min</th>
<th field="max" noSort="true"
width="52">Max</th>
<th field="ref_price" noSort="true"
width="52">Ref.</th>
<th field="open_price" noSort="true"
width="52">Open</th>
</tr>
</thead>