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 following steps to work with the JSON data:
- Create the RestDataSource with the JSON date format (id, structure fields, date format, data urls).
- Create UI-controls (Data grid, add, remove and delete controls).
- Prepare the response files (fetch, add, update, remove).
- Run it (download smart sdk and run example in an atachment).
| Info |
|---|
A working example is available in the attachment. |
RestDataSource
| Code Block |
|---|
| title | Create RestDataSource: |
|---|
| lang | javascript |
|---|
|
isc.RestDataSource.create({
ID:"countryDS",
fields:[
{
name:"continent",
title:"Continent",
type: "text"
},
{
name:"countryName",
title:"Country",
type: "text"
},
{
name:"countryCode",
title:"Code",
primaryKey:true,
canEdit:false,
type: "text"
},
...
],
dataFormat: "json",
fetchDataURL:"[HTTP_PATH_TO_STUB_FILES]/country_fetch_rest.js",
addDataURL :"[HTTP_PATH_TO_STUB_FILES]/country_add_rest.js",
updateDataURL:"[HTTP_PATH_TO_STUB_FILES]/country_update_rest.js",
removeDataURL:"[HTTP_PATH_TO_STUB_FILES]/country_remove_rest.js"
});
|
UI-controls
| Code Block |
|---|
| title | Create ListGrid: |
|---|
| lang | javascript |
|---|
|
isc.ListGrid.create({
ID: "countryList",
width:"100%",
height:440,
margin:20,
dataSource: countryDS,
autoFetchData:true
});
|
| Code Block |
|---|
| title | Create button (Add new country): |
|---|
| lang | javascript |
|---|
|
isc.IButton.create({
left:20,
top:430,
width:150,
title:"Add new country",
click: function () {
countryList.addData(
{
countryCode: "A1",
countryName: "New Value",
capital:"New Value",
continent:"New Value"
}
);
this.disable();
}
});
|
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.