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).
| Info |
|---|
A working example is available in the attachment. |
Java code
| Code Block |
|---|
| title | Create rest data source: |
|---|
| lang | java |
|---|
|
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;
}
|
| Code Block |
|---|
| title | Create the list grid: |
|---|
| lang | java |
|---|
|
private ListGrid createCountryListGrid() {
ListGrid result = new ListGrid();
result.setWidth("100%");
result.setHeight(400);
result.setAutoFetchData(true);
result.setDataSource(createCountryRestDataSource());
return result;
}
|
| Code Block |
|---|
| title | Create button (Add new country): |
|---|
| lang | java |
|---|
|
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
| Code Block |
|---|
| title | Example fetch response (country_fetch_rest.js): |
|---|
| lang | xml |
|---|
|
{
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]"
},
...
]
}
}
|
| Code Block |
|---|
| title | Example add response (country_add_rest.js): |
|---|
| lang | xml |
|---|
|
{
response: {
status: 0,
data: [
{
countryCode: "[COUNTRY_CODE]",
countryName: "[COUNTRY_NAME]",
capital: "[CAPITAL]",
continent: "[GOVERMENT]"
}
]
}
}
|
Attachments
...
Please, follow this link to find a complete example.