Presto and ExtJS

The Presto Mashup platform is all about bridging the gap between the users and the data. Presto provides Developers with the right set of tools to build these bridges in the form of APIs for Java, JavaScript, ActionScript, Flash/Flex, C# and VBA. In this article, I will walk through a sample that uses the Presto-ExtJS integration library.

Ext JS is a leading Javascript framework for building Cross-browser Rich Internet Applications. While the Presto Developer Edition APIs are open and not tied to any specific Javascript framework, we provide an integration library for Ext JS to make it easy for Ext JS developers to quickly integrate Presto in their applications.

Screenshot of the sample

Presto.extjs.ServiceStore

One of the key integration points between Presto and Ext JS is the Presto.extjs.ServiceStore. Ext.data.Store encapsulates a client side cache of Records that can be bound to a Grid, Combobox or a DataView. The ServiceStore makes it easy for developers to invoke Services and Mashups and render the output in a Grid. Lets see how this is done using the Xignite WSDL based Service and Ext JS Grid.

Pre-requisites

1. Register for a free trial of Xignite's Web Services from here.
2. Install Presto Developer Edition. I assume in my sample that Presto can be accessed using http://localhost:8080. If this is not the case, please change the URL in the sample code to your server:port.
3. Register the Xignite WSDL Service under the name - "XigniteQuotes". The WSDL for the Service is available at http://www.xignite.com/xQuotes.asmx?WSDL Services are registered with Presto using the Service Explorer.

Lets walk through the code. Create a new Connection to Presto using the Presto.Connection Object. This is part of the presto-connect.js and is one of the ways to connect to Presto from Javascript. The Request Object is a specially formatted JSON Object that includes the data, headers (eg: SOAP headers), result format etc. Multiple requests can be sent can be sent via this connection to Presto and the results can be requested as JSON or XML. You can read more about the Request format here.

	
	var connection = new Presto.Connection({
        prestoUrl: 'http://localhost:8080/presto'
    });
    var symbols = "AAPL,GE,MSFT";
	
    var request = {
        "version": "1.1",
        "sid": "XigniteQuotes",
        "svcVersion": "0.1",
        "oid": "GetQuickQuotes",
        "header": {
            "serviceHeader": {
                "ser:Header": {
                    "ser:Username": "< your xignite userid >"
                }
            }
        },
        "params": [{
            "ser:GetQuickQuotes": {
                "ser:Symbol": symbols
            }
        }]
    };
	

Now, create a Presto.extjs.ServiceStore instance passing in the Connection, request and other config parameters. Two config parameters of note are "record" and "columns". The record property must point to a path within the response that is the collection (i.e array) that must be bound to the Grid. Eg: if the Response is of type - RSS, "/rss/channel/item" is the path to the Array. "columns" is an array of properties of each Array element that must be rendered as columns in the Grid.

The rest is standard Ext JS stuff. We pass in the ServiceStore as the "store" config parameter to the Ext JS GridPanel. The GridPanel also requires a column Model (colModel in the sample) that provides metadata for the columns in the Grid.

	var dataStore = new Presto.extjs.ServiceStore({
        connection: connection,
        request: request, // JUMP request
        remotePaging: false, // to include a server side pagination
        record: "/GetQuickQuotesResponse/GetQuickQuotesResult/QuickQuote", // the repeating node
        columns: ["Symbol", "Last", "Change", "Volume", "Time"],
        recordId: "Symbol" //  unique identifier for the row
        
    });
	var colModel = new Ext.grid.ColumnModel([
        {header: "Symbol"},
        {header: "Last"},
        {header: "Change"},
        {header: "Volume"},
        {header: "Time"}
    ]);
    
	var gridPanel = new Ext.grid.GridPanel({
		applyTo: 'topmovers',
        store: dataStore,
        cm: colModel
	});

The ServiceStore is loaded upon click of the "Get Quotes" button. This is achieved by attaching an Event handler to the button click event and invoking the Service store load() method. Note that we pass in the request parameters via the "requestParams" property in the load method.

	Ext.get("btn_getquotes").on("click", function() {
		dataStore.load({
			requestParams: [{
                "ser:GetQuickQuotes": {
                    "ser:Symbol": $("ticker").value
                }
            }]
		});
	});
	

To Summarize...

We can see that Presto provides the necessary tools/apis to invoke complex SOAP/WSDL services and bind them to components provided by Javascript frameworks such as Ext JS.

Download the source code for this sample as a .txt file. Rename the file as a .html file before running the sample.