Page 1 of 2 12 LastLast
Results 1 to 10 of 14
  1. #1
    Power Member
    Join Date
    Jul 2006
    Location
    Cesano Maderno, Italy
    Posts
    784

    Post NonVisualTable - simple tutorial

    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 and is already deployed when you install a new Lightstreamer instance) through a NonVisualTable 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 and getSchema 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 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:
    HTML Code:
    <body>
     
    <div id="container">
    Updates:<br/>
    </div>
    Now we can start scripting
    HTML Code:
    <script>
    Configure PushPage and LightstreamerEngine objects. We will use the createEngine method and we will configure the LightstreamerEngine in the 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;
    Code javascript:
    1. var lsPage = new PushPage();
    2. lsPage.context.setDomain(null);
    3.  
    4. lsPage.onEngineReady = function (lsEng) {
    5.    lsEng.connection.setLSHost(null);
    6.    lsEng.connection.setLSPort(null);
    7.    lsEng.connection.setAdapterName("STOCKLISTDEMO");
    8.    lsEng.changeStatus("STREAMING");
    9. };
    10.  
    11. lsPage.bind();
    12. 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.

    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).

    Code javascript:
    1. var schema = "last_price time pct_change bid_quantity bid ask ask_quantity min max ref_price open_price stock_name";
    2. 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.

    Code javascript:
    1. var schema = new Array("last_price","time","pct_change","bid_quantity","bid","ask","ask_quantity","min","max","ref_price","open_price","stock_name");
    2. 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:
    Code javascript:
    1. var myTable = new NonVisualTable(group,schema,"MERGE");
    2. myTable.setSnapshotRequired(true);
    It's time to handle updates implementing the 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)

    Code javascript:
    1.  myTable.onItemUpdate = function(item, itemUpdate, itemName) {
    2.    var updateText = "updating item " + item + ". ";
    3.  
    4.    if (itemUpdate.isValueChanged(1)) {
    5.       updateText += "New value for last_price: " + itemUpdate.getNewValue(1);
    6.    }
    7.  
    8.    document.getElementById("container").innerHTML += updateText + "<br/>";
    9. }

    Approach 2:
    Here we can use item/field names

    Code javascript:
    1. myTable.onItemUpdate = function(item, itemUpdate, itemName) {
    2.    var updateText = "updating item " + itemName + ". ";
    3.  
    4.    if (itemUpdate.isValueChanged("last_price")) {
    5.       updateText += "New value for last_price: " + itemUpdate.getNewValue("last_price");
    6.    }
    7.  
    8.    document.getElementById("container").innerHTML += updateText + "<br/>";
    9. }
    Then add the table to the PushPage...
    Code javascript:
    1. lsPage.addTable(myTable,"1");
    ...and close all open html tags...
    HTML Code:
    </script>
     
    </body>
     
    </html>
    ...and we have finished!

    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
    Attached Files Attached Files

  2. #2
    Member
    Join Date
    Oct 2007
    Location
    Markham
    Posts
    4

    Can't ask for the field name?

    Hi Mone,

    The getNewValue method works when i call it with a 1-based index, but not when i try to use the field name (e.g. "price", "time", "type", etc). Is there a way to get LS to recognize the field name instead?

    Best regards,
    Matthew

  3. #3
    Power Member
    Join Date
    Jul 2006
    Location
    Cesano Maderno, Italy
    Posts
    784
    Hi,

    to let the web client recognize the item and field names just follow approach 2 as explained.
    Check approach2.html in the zip file to see the complete source code.

  4. #4
    Member
    Join Date
    Oct 2007
    Location
    Markham
    Posts
    4
    Thanks, but i tried that, and never got any data. In my DataAdapter i am calling the smart update with a Map object as the fields, and using field names such as "value", "time", "type", and "index". But in the JS the method calls getNewValue(1), and getNewValue("1") work (as as well for other indices), but the calls getNewValue("value"), getNewValue("time"), etc do not.

    I had assumed that leaving out the field names was maybe some kind of bandwidth performance setting. Might this be the case or am i doing something wrong?

    Best regards,
    Matthew

  5. #5
    Power Member
    Join Date
    Jul 2006
    Location
    Cesano Maderno, Italy
    Posts
    784
    Hi,

    Are you using your own MetadataProvider or a given one (LiteralBasedProvider or similar is needed)?
    Have you created your table using as schema an array of field names?

    About bandwidth note that item/field names never go through the stream.


    PS: I noticed that this tutorial use the loadEngineMinimal method. Please upgrade to the new createEngine method as loadEngineMinimal is a deprecated method (I will update this tutorial as soon as possible)
    PPS: Updated!

  6. #6
    Member
    Join Date
    Oct 2007
    Location
    Markham
    Posts
    4
    Hi Mone,

    Yes, i created my own MetadataProvider. How would that affect things?

    I create by table thus:
    var newTable = new NonVisualTable("test6", "value time index", "DISTINCT");

    Thanks,
    Matthew

  7. #7
    Power Member
    Join Date
    Jul 2006
    Location
    Cesano Maderno, Italy
    Posts
    784
    There are two conditions to let you access data with item/field names:
    1. You must create the Table object using as group/schema an array of strings. Each string should be the name of an item/field.
      The web client will concatenate the strings using a space as separator.
    2. The getItems /getSchema method of the MetadataProvider implementation must split the received id/schema on the space character and handle each token as an item/field name.
      This is the behavior of the LiteralBasedProvider.

    You should create your table as below:

  8. #8
    Member
    Join Date
    Oct 2007
    Location
    Markham
    Posts
    4
    Hurray! Thanks Mone, that works much better.

  9. #9
    Member
    Join Date
    Aug 2010
    Location
    ny
    Posts
    1

    Post

    Thanks for you information i newly join and so nice post I agree with you. Your complement is so informative…

  10. #10
    Senior Member
    Join Date
    Jul 2009
    Location
    not
    Posts
    41
    Hi everybody.

    is there a way, instead of having this:
    Code:
    var group = "item1 item16 item3";
    i get the my group from my DataProvider ?
    because i have so many items that i will display, that my js file (containing the items i wil display) gets bigger.
    and also that group of items is variable (can be 10 items to display today, 20 items tomorrow...)

 

 

Similar Threads

  1. ASP.NET Web Client Tutorial
    By rmusco in forum Client SDKs
    Replies: 9
    Last Post: February 1st, 2011, 02:40 PM
  2. simple multiple records from database
    By smugford in forum General
    Replies: 8
    Last Post: January 11th, 2011, 10:20 AM
  3. Simple Web Server
    By Isanderthul in forum General
    Replies: 1
    Last Post: July 15th, 2009, 10:05 AM
  4. New Tutorial Available
    By Alessandro in forum Adapter SDKs
    Replies: 2
    Last Post: October 30th, 2008, 03:10 PM
  5. Simple Grid Demo Released
    By Alessandro in forum Client SDKs
    Replies: 0
    Last Post: November 24th, 2006, 04:49 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT +1. The time now is 03:52 AM.