ClientDataIntegration

Overview

Package

Class

Tree

Deprecated

Index

Help

PREV CLASS NEXT CLASS

FRAMES NO FRAMES

SUMMARY: NESTED | FIELD | CONSTR | METHOD

DETAIL: FIELD | CONSTR | METHOD

com.smartgwt.client.docs
Interface ClientDataIntegration

public interface ClientDataIntegration

Client-side Data Integration

Smart GWT supports declarative, XPath-based binding of visual components to any server capable of returning XML or JSON responses over HTTP, without the need for the

Smart GWT
 server

This approach is called Client-Side Data Integration, which means:

You create DataSources in JavaScript which describe the data to be loaded and manipulated in the user interface. The JavaScript that creates these DataSources may be dynamically generated and/or existing metadata may be imported.
You configure DataSources, via property and method overrides, to send appropriate HTTP requests to your server, and to parse HTTP responses from your server, in order to fulfill the 4 core operations of the DataSource Protocol.
These DataSources are then bound to databinding-capable UI components, which can provide a variety of complete user interactions (form-based editing, grid-based editing, load on demand, ..) based on these 4 core operations

Approaches and platforms

WSDL integration (.NET and others)

If you have pre-existing WSDL services or would like to generate web services for Smart GWT to consume, the WSDL Binding Overview covers possible approaches.

WSDL binding is the most popular approach for integration with the .NET platform. You can use Visual Studio to create web services from existing server-side methods, and then use Smart GWT's WSDL Binding system to connect to those web services.

Here are a couple of examples of integration with .NET web services: temperature conversion service, and customer search service. Both use the WebService.callOperation method to query the web service. Note: These examples will only work if there's a web service running at the WSDL URLs used in the examples.

REST integration (PHP and others)

For PHP and other server technologies (Cold Fusion, Ruby, Python, Perl..), integration is based on simple XML or JSON delivered over HTTP, sometimes called the REST (REpresentational State Transfer) pattern.

When using this, you create a dynamic web page that generates XML or JSON data for Smart GWT to consume.

Smart GWT DataSources can be configured to work with any pre-existing XML or JSON formats your application is already using; see below.

For new applications, the RestDataSource provides a complete XML or JSON-based protocol that supports all of the features of Smart GWT's databinding layer (data paging, server-side validation errors, automatic cache synchronization, etc). To use the RestDataSource, simply write server code that can parse RestDataSource requests and produce the required responses; example requests and responses are provided.

Consuming Existing XML and JSON formats

For WSDL web services, see the WSDL binding topic first.

To display XML or JSON data in a visual component such as a ListGrid, you bind the component to a DataSource which provides the URL of the service, as well as a declaration of how to form inputs to the service and how to interpret service responses as DataSource records.

An XPath expression, the recordXPath, is applied to the service response to select the XML elements or JSON objects that should be interpreted as DataSource records. Then, for each field of the DataSource, an optional valueXPath can be declared which selects the value for the field from within each of the XML elements or JSON objects selected by the recordXPath. If no valueXPath is specified, the field name itself is taken as an XPath, which will select the same-named subelement or property from the record element or object.

For example, the following code defines a DataSource that a ListGrid could bind to in order to display an RSS 2.0 feed.


   
 isc.DataSource.create({
        dataURL:feedURL,
        recordXPath:"//item",
        fields:[
        
 { name:"title" },
            { name:"link" },
            { name:"description" }
        ]
    });

A representative slice of an RSS 2.0 feed follows:


     <?xml version="1.0"
 encoding="iso-8859-1" ?> 
     <rss version="2.0">
     <channel>
       <title>feed
 title</title> 
       ...
       <item>
         <title>article title</title> 
 
 <link>url of article</link> 
         <description>
            article description
      
 </description> 
       </item>
       <item>
          ...

Here, the recordXPath selects a list of <item> elements. Since the intended values for each DataSource field appear as simple subelements of each <item> element (eg <description>), the field name is sufficient to select the correct values, and no explicit valueXPath needs to be specified.

A running version of this example is available here: RSS Feed. Further examples of simple XML or JSON data loading using files stored on disk as the "service" to contact: the ${isc.DocUtils.linkForExampleId('simpleJSON', 'Simple JSON')} example shows loading data from a JSON file into a databound grid, and the ${isc.DocUtils.linkForExampleId('xpathBinding', 'XPath Binding example')} shows loading XML and processing it with XPaths.

Round Tripping: Loading, Editing and Saving

For WSDL web services, see the WSDL binding topic first.

When a user triggers a DSRequest (eg, completes an inline edit in a grid), the request data will be sent to the dataURL. The DataSource protocol describes request and response data expected for each operation type.

By using settings such as dataProtocol, you can control how DSRequests are sent to your backend so that you can handle them most easily. By using the same properties used to initially load data (eg recordXPath), you can control how Smart GWT forms the DSResponses that are then interpreted by databound components.

Controlling how DSRequests are sent

According to the protocol being used, the DataSource request data, if any, either becomes HTTP params (sent by GET or POST), or an XML message as put together by DataSource.xmlSerialize. For a DataSource invoking a WSDL-described web service, XML serialization automatically handles namespacing and SOAP encoding.

Note that, by default, just data is sent, not any of the metadata such as startRow. This can be customized via DataSource.transformRequest.

The URL to contact is set via the dataURL property. If using a Web Service, the dataURL defaults to the service location URL embedded in the WSDL file.

For example, in the default configuration for non-WSDL binding, since dataProtocol is "getParams", data is sent as HTTP params in an HTTP "GET" operation. Given:

changes to an existing record, hence an "update" request
a primaryKey field of "id" with value "5" on the record to be updated
a field "age" being changed to "32"
"dataURL" of "save.php"

You will see an HTTP GET to the URL save.php?id=5&age=32.

Forming a DSResponse from the response data

A DSResponse is created from the response data by using XPath expressions declared in the schema (recordXPath and valueXPath) to extract DataSource record and field values.

See the ${isc.DocUtils.linkForExampleId('xmlEditSave', '"Edit and Save"')} example for sample XML responses for all four operationTypes.

Similar to input processing, by default DataSource layer metadata, such as startRow, is not extracted from the response data. You can implement DataSource.transformResponse to fill out the metadata fields of the DSResponse, in order to allow more DataSource features, such as paging and validation errors, to be used with a web service that supports such features.

See the ${isc.DocUtils.linkForExampleId('xmlServerValidationErrors', 'XML')} and ${isc.DocUtils.linkForExampleId('jsonServerValidationErrors', 'JSON')} versions of the transformResponse() example for an example of providing validation errors in XML or JSON responses.