Using RestDataSource with JSON (Smart GWT)

Description

The RestDataSource provides a simple protocol based on XML or JSON over HTTP. This protocol can be implemented with any server technology (PHP, Ruby, ..) and includes all the features of SmartClient's databinding layer (data paging, server validation errors, cache sync, etc).
In this example, each DataSource operation is directed to a different JSON file containing a sample response for that operationType. The server returns the data-as-saved to allow the grid to update its cache.

You must perform the following steps to work with the JSON data:

Create a GWT application.
Add the Smart GWT library to your project.
Add the Smart GWT module to your application.gwt.xml.
Create a RestDataSource and UI to an application entry point.
Prepare the response files (fetch, add, update, remove).
Run it (run the example in an attachment).

A working example is available in the attachment.

Java code

Create rest data source:

private RestDataSource createCountryRestDataSource() {
    RestDataSource result = new RestDataSource();
    result.setDataFormat(DSDataFormat.JSON);

...

    result.setFields(continentField, countryNameField, countryCodeField, areaField,
                     populationField, gdpField, independenceField, governmentField,
                     governmentDescField, capitalField, memberG8Field, articleField);

    result.setFetchDataURL("data/dataIntegration/json/responses/country_fetch_rest.js");
    result.setAddDataURL("data/dataIntegration/json/responses/country_add_rest.js");
    result.setUpdateDataURL("data/dataIntegration/json/responses/country_update_rest.js");
    result.setRemoveDataURL("data/dataIntegration/json/responses/country_remove_rest.js");

    return result;
}

Create the list grid:

private ListGrid createCountryListGrid() {
    ListGrid result = new ListGrid();
    result.setWidth("100%");
    result.setHeight(400);
    result.setAutoFetchData(true);

    result.setDataSource(createCountryRestDataSource());

    return result;
}

Create button (Add new country):

private IButton createAddButton() {
    IButton result = new IButton("Add new Country");
    result.setWidth(150);

    result.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            ListGridRecord record = new ListGridRecord();
            record.setAttribute("countryCode", "A1");
            record.setAttribute("countryName", "New Value");
            record.setAttribute("capital", "New Value");
            record.setAttribute("continent", "New Value");

            listGrid.addData(record);
            addButton.disable();
        }
    });

    return result;
}

Prepared responses

Example fetch response (country_fetch_rest.js):

{
    response: {
        status: 0,
        startRow: [START_ROW],
        endRow: [END_ROW],
        totalRows: [TOTAL_ROWS],
        data: [
            {
                continent: "[CONTINENT]",
                countryName: "[COUNTRY_NAME]",
                countryCode: "[COUNTRY_CODE]",
                area: [AREA],
                population: [POPULATION],
                gdp: [GDP],
                independence: new Date([YEAR], [MONTH], [DAY_OF_MONTH]),
                government: "[GOVERMENT]",
                government_desc: [GOVERMENT_DESC],
                capital: "[CAPITAL]",
                member_g8: [MEMBER_G8],
                article: "[ARTICLE]"
            },
...
        ]
    }
}

Example add response (country_add_rest.js):

{
    response: {
        status: 0,
        data: [
            {
                countryCode: "[COUNTRY_CODE]",
                countryName: "[COUNTRY_NAME]",
                capital: "[CAPITAL]",
                continent: "[GOVERMENT]"
            }
        ]
    }
}

Attachments

	File	Modified

You are not logged in. Any changes you make will be marked as anonymous. You may want to Log In if you already have an account.

No files shared here yet.

Drag and drop to upload or browse for files