This diagram depicts the major components of the demo. In yellow are the Lightstreamer Server and JavaScript client components. In blue are standard Dojo toolkit JavaScript elements. In green is the custom code written to connect the Lightstreamer environment to the Dojo environment.

For this demo the Lightstreamer Server (and Adapters) and JavaScript engine are configured identically to the StockList tutorial with the exception of the use of the NonVisualTable in the place of the OverwriteTable and the use of loadEngineMinimal instead of loadEngine. As with the original StockList demo the NonVisualTable is configured to receive stock update events from the Server.

The EventBridge JavaScript object is a reusable JavaScript object that intercepts data push events from the Lightstreamer Table object and publishes the updates via the Dojo topic subscription event notification service. When creating the EventBridge pass the Table object, an array containing the names of the fields to be published and the name of the topic to publish the data.

Note that charting capabilities shown in the on-line demo are not covered by this tutorial

Source code listing

   <!-- Include Lightstreamer libraries -->
            <script src="LS/lscommons.js"></script>
            <script src="LS/lspushpage.js"></script>

Set up some variables

    /**
                * 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 };

Include the Dojo toolkit

           <script src="Dojo/dojo.js"></script>

In a script block import the needed Dojo components

   dojo.require("dojo.widget.FilteringTable");
            dojo.require("dojo.event.*");
            dojo.require("dojo.event.topic");

Include the EventBridge

            dojo.require("lightstreamer.EventBridge");

Confirm includes

  dojo.hostenv.writeIncludes();

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");

Create the topic listener function

      /**
                 * 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);

                    }
                });

Create an EventBridge that will map the events recived from the Lightstreamer engine and publish them on the Dojo topic ’stockTopic’

[/code]

    /**
                * 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");
            });

Define the onUpdateField function

  /**
             * 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 + "%";
                }
            }

HTML document body

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" ></table>

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>

Demo: http://app.lightstreamer.com/DojoDemo/doc.html

Download: http://www.lightstreamer.com/share/LS_Dojo.zip

Source: http://app.lightstreamer.com/DojoDemo/

Related Listings:

1. Drag n Drop to order list Elements Drag and drop feature is a popular effect in modern...
2. Collasible Draggable Panels Create a collapsible and draggable panels using javascript. Such UI...
3. ToDoh – Create Ajax Online To Do List TohDoh is YET ANOTHER CAKEPHP AJAX TODO LIST DEMO or...
4. TohDoh Yet Another CakePHP AJAX Todo-List TohDoh is YET ANOTHER CAKEPHP AJAX TODO LIST DEMO or...
5. Dojox Data Chart Script The latest addition in the Dojo 1.3 release is the...

Do you like this post?

Email: