Mone
12-01-2006, 11:53 AM
This post illustrates how to set up a simple web application that receives data from the classic StockList Data Adapter (i.e. the one that feeds the StockListDemos (http://www.lightstreamer.com/stockListDemo.htm) and is already deployed when you install a new Lightstreamer instance) through a NonVisualTable (http://www.lightstreamer.com/docs/client_web_jsdoc/NonVisualTable.html) and appends it to a div tag.
I will show 2 basic approaches. The first one is a generic approach using group and schema names. The other one uses item and field names and so requires that a LiteralBasedProvider is used as a Metadata Adapter (or another one that handles groups and schemas in the same way - for a better understanding of group/items schema/fields take a look at getItems (http://www.lightstreamer.com/docs/adapter_java_javadoc/com/lightstreamer/interfaces/metadata/MetadataProvider.html#getItems%28java.lang.String,%20java.lang.String%29) and getSchema (http://www.lightstreamer.com/docs/adapter_java_javadoc/com/lightstreamer/interfaces/metadata/MetadataProvider.html#getSchema%28java.lang.String,%20java.lang.String,%20java.lang.String%29) methods in the javadocs - btw no server-side programming is needed to complete this tutorial).
The main client-side difference is that with the first approach, on each update, to access data we have to use item and field indexes while with the other we are free to use item and field names.
Note that a mixture of the 2 ways is possible (ie use group name and field names).
Each application will consinst of one single HTML file.
First of all we have to put Lightstreamer Web Client's js files in the head section of the page. Note that library files are referenced as "/LS/file.js". This reflects our way to deploy a web application on a web server. We usually put a folder named "LS" - containing our web client lib - in the root of the web server. This way we can deploy several applications using one single web client library. To make this demo work you have to do the same (or change the demo's code).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="/LS/lscommons.js"></script>
<script language="JavaScript" src="/LS/lspushpage.js"></script>
</head> Then we put in the body of the page a simple div tag. We will append updates there:
<body>
<div id="container">
Updates:<br/>
</div>
Now we can start scripting :D
<script>
Configure PushPage (http://www.lightstreamer.com/docs/client_web_jsdoc/PushPage.html) and LightstreamerEngine (http://www.lightstreamer.com/docs/client_web_jsdoc/LightstreamerEngine.html) objects. We will use the createEngine (http://www.lightstreamer.com/docs/client_web_jsdoc/PushPage.html#createEngine) method and we will configure the LightstreamerEngine in the onEngineReady (http://www.lightstreamer.com/docs/client_web_jsdoc/PushPage.html#onEngineReady) method of the PushPage instance.
Since the LightstreamerEngine starts disconnected, we will explicitly set it to STREAMING; this demo is made to run on LS' internal web server so we will set domain, host and port to null; the Adapter name is the one of the StockListDemo;
var lsPage = new PushPage();
lsPage.context.setDomain(null);
lsPage.onEngineReady = function (lsEng) {
lsEng.connection.setLSHost(null);
lsEng.connection.setLSPort(null);
lsEng.connection.setAdapterName("STOCKLISTDEMO");
lsEng.changeStatus("STREAMING");
};
lsPage.bind();
lsPage.createEngine("SLEngine","/LS/","SHARE_SESSION");
Now there is the table-related code. This code is different for the two approaches.
Initialize two variables that will be passed to the NonVisualTable's constructor (http://www.lightstreamer.com/docs/client_web_jsdoc/NonVisualTable.html#NonVisualTable%28%29).
Approach 1:
Those variables will be two strings. For this demo those will be space-separated lists of items and fields. By the way the Client doesn't know about this and will interpret them as a group and a schema name (i.e. the Client doesn't know how many items/fields we are subscribing to).
var schema = "last_price time pct_change bid_quantity bid ask ask_quantity min max ref_price open_price stock_name";
var group = "item1 item16 item3";
Approach 2:
Those variables will be Arrays. Each array's element is an item/field name, so the web Client will exactly know how many and which items/fields we are subscribing to.
var schema = new Array("last_price","time","pct_change","bid_quantity","bid","ask","ask_quantity","min","max","ref_price","open_price","stock_name");
var group = new Array("item1","item16","item3");
Now we have to create the NonVisualTable object. We want a MERGE subscription and require the initial snapshot:
var myTable = new NonVisualTable(group,schema,"MERGE");
myTable.setSnapshotRequired(true);
It's time to handle updates implementing the onItemUpdate (http://www.lightstreamer.com/docs/client_web_jsdoc/Table.html#onItemUpdate) callback. We will append a single line to our div for each update. This line will contain the item index/name (1st approach/2nd approach) being updated and, if changed, the last_price field value (btw note that we are receiving all fields, not only the last_price, to receive only the last_price field we have to cut the schema string/array as you can easily imagine).
Approach 1:
As said before to handle updates for this table we must manage item/field indexes (the itemName parameter will be always null)
myTable.onItemUpdate = function(item, itemUpdate, itemName) {
var updateText = "updating item " + item + ". ";
if (itemUpdate.isValueChanged(1)) {
updateText += "New value for last_price: " + itemUpdate.getNewValue(1);
}
document.getElementById("container").innerHTML += updateText + "<br/>";
}
Approach 2:
Here we can use item/field names
myTable.onItemUpdate = function(item, itemUpdate, itemName) {
var updateText = "updating item " + itemName + ". ";
if (itemUpdate.isValueChanged("last_price")) {
updateText += "New value for last_price: " + itemUpdate.getNewValue("last_price");
}
document.getElementById("container").innerHTML += updateText + "<br/>";
}
Then add the table to the PushPage...
lsPage.addTable(myTable,"1");
...and close all open html tags...
</script>
</body>
</html> ...and we have finished! :cool:
You can find the complete sources attached to this post.
Approach 1 example output:
Updates:
updating item 1. New value for last_price: 3.16
updating item 2. New value for last_price: 12.82
updating item 3. New value for last_price: 7.59
updating item 3. New value for last_price: 7.55
Approach 2 example output (based on the same updates):
Updates:
updating item item1. New value for last_price: 3.16
updating item item16. New value for last_price: 12.82
updating item item3. New value for last_price: 7.59
updating item item3. New value for last_price: 7.55
-Mone
I will show 2 basic approaches. The first one is a generic approach using group and schema names. The other one uses item and field names and so requires that a LiteralBasedProvider is used as a Metadata Adapter (or another one that handles groups and schemas in the same way - for a better understanding of group/items schema/fields take a look at getItems (http://www.lightstreamer.com/docs/adapter_java_javadoc/com/lightstreamer/interfaces/metadata/MetadataProvider.html#getItems%28java.lang.String,%20java.lang.String%29) and getSchema (http://www.lightstreamer.com/docs/adapter_java_javadoc/com/lightstreamer/interfaces/metadata/MetadataProvider.html#getSchema%28java.lang.String,%20java.lang.String,%20java.lang.String%29) methods in the javadocs - btw no server-side programming is needed to complete this tutorial).
The main client-side difference is that with the first approach, on each update, to access data we have to use item and field indexes while with the other we are free to use item and field names.
Note that a mixture of the 2 ways is possible (ie use group name and field names).
Each application will consinst of one single HTML file.
First of all we have to put Lightstreamer Web Client's js files in the head section of the page. Note that library files are referenced as "/LS/file.js". This reflects our way to deploy a web application on a web server. We usually put a folder named "LS" - containing our web client lib - in the root of the web server. This way we can deploy several applications using one single web client library. To make this demo work you have to do the same (or change the demo's code).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="/LS/lscommons.js"></script>
<script language="JavaScript" src="/LS/lspushpage.js"></script>
</head> Then we put in the body of the page a simple div tag. We will append updates there:
<body>
<div id="container">
Updates:<br/>
</div>
Now we can start scripting :D
<script>
Configure PushPage (http://www.lightstreamer.com/docs/client_web_jsdoc/PushPage.html) and LightstreamerEngine (http://www.lightstreamer.com/docs/client_web_jsdoc/LightstreamerEngine.html) objects. We will use the createEngine (http://www.lightstreamer.com/docs/client_web_jsdoc/PushPage.html#createEngine) method and we will configure the LightstreamerEngine in the onEngineReady (http://www.lightstreamer.com/docs/client_web_jsdoc/PushPage.html#onEngineReady) method of the PushPage instance.
Since the LightstreamerEngine starts disconnected, we will explicitly set it to STREAMING; this demo is made to run on LS' internal web server so we will set domain, host and port to null; the Adapter name is the one of the StockListDemo;
var lsPage = new PushPage();
lsPage.context.setDomain(null);
lsPage.onEngineReady = function (lsEng) {
lsEng.connection.setLSHost(null);
lsEng.connection.setLSPort(null);
lsEng.connection.setAdapterName("STOCKLISTDEMO");
lsEng.changeStatus("STREAMING");
};
lsPage.bind();
lsPage.createEngine("SLEngine","/LS/","SHARE_SESSION");
Now there is the table-related code. This code is different for the two approaches.
Initialize two variables that will be passed to the NonVisualTable's constructor (http://www.lightstreamer.com/docs/client_web_jsdoc/NonVisualTable.html#NonVisualTable%28%29).
Approach 1:
Those variables will be two strings. For this demo those will be space-separated lists of items and fields. By the way the Client doesn't know about this and will interpret them as a group and a schema name (i.e. the Client doesn't know how many items/fields we are subscribing to).
var schema = "last_price time pct_change bid_quantity bid ask ask_quantity min max ref_price open_price stock_name";
var group = "item1 item16 item3";
Approach 2:
Those variables will be Arrays. Each array's element is an item/field name, so the web Client will exactly know how many and which items/fields we are subscribing to.
var schema = new Array("last_price","time","pct_change","bid_quantity","bid","ask","ask_quantity","min","max","ref_price","open_price","stock_name");
var group = new Array("item1","item16","item3");
Now we have to create the NonVisualTable object. We want a MERGE subscription and require the initial snapshot:
var myTable = new NonVisualTable(group,schema,"MERGE");
myTable.setSnapshotRequired(true);
It's time to handle updates implementing the onItemUpdate (http://www.lightstreamer.com/docs/client_web_jsdoc/Table.html#onItemUpdate) callback. We will append a single line to our div for each update. This line will contain the item index/name (1st approach/2nd approach) being updated and, if changed, the last_price field value (btw note that we are receiving all fields, not only the last_price, to receive only the last_price field we have to cut the schema string/array as you can easily imagine).
Approach 1:
As said before to handle updates for this table we must manage item/field indexes (the itemName parameter will be always null)
myTable.onItemUpdate = function(item, itemUpdate, itemName) {
var updateText = "updating item " + item + ". ";
if (itemUpdate.isValueChanged(1)) {
updateText += "New value for last_price: " + itemUpdate.getNewValue(1);
}
document.getElementById("container").innerHTML += updateText + "<br/>";
}
Approach 2:
Here we can use item/field names
myTable.onItemUpdate = function(item, itemUpdate, itemName) {
var updateText = "updating item " + itemName + ". ";
if (itemUpdate.isValueChanged("last_price")) {
updateText += "New value for last_price: " + itemUpdate.getNewValue("last_price");
}
document.getElementById("container").innerHTML += updateText + "<br/>";
}
Then add the table to the PushPage...
lsPage.addTable(myTable,"1");
...and close all open html tags...
</script>
</body>
</html> ...and we have finished! :cool:
You can find the complete sources attached to this post.
Approach 1 example output:
Updates:
updating item 1. New value for last_price: 3.16
updating item 2. New value for last_price: 12.82
updating item 3. New value for last_price: 7.59
updating item 3. New value for last_price: 7.55
Approach 2 example output (based on the same updates):
Updates:
updating item item1. New value for last_price: 3.16
updating item item16. New value for last_price: 12.82
updating item item3. New value for last_price: 7.59
updating item item3. New value for last_price: 7.55
-Mone