Using RODA/JS with Sencha store

Hi Valeriy

As you suggested here (April 30):
http://connect.remobjects.com/discussion/1356/odata-javascript

I tested a better integration between RODA/JS and Sencha Store (used in ExtJS and Sencha Touch), without grabbing data from datatable and feeds array store by loops …

Server side (Delphi):

function TNewService.MyGetData : Binary;

var
lDataSet: IDADataSet;

begin
result := Binary.Create;
try
JSONDataStreamer.Initialize(result, aiWrite);
lDataSet := Connection.NewDataset(‘SELECT …’,‘SQL’);
lDataSet.Open();
JSONDataStreamer.WriteDataset(lDataset, [woRows,woSchema], -1);
lDataSet := nil;
JSONDataStreamer.Finalize();
except
FreeAndNIL(result);
raise;
end;
end;

Client side (ExtJS) :

Ext.onReady(function() {
var channel = new RemObjects.SDK.HTTPClientChannel("http://localhost:8099/JSON");
var message = new RemObjects.SDK.JSONMessage();
var service = new NewService(channel, message);

service.MyGetData(function(result) {
	
	// decode
	var msg = base64.decode(result.replace(/(\n|\r)+/g, ""));

	// data to array store
	var data = JSON.parse(msg).datasets[0].data.rows;

            // store
	var store = new Ext.data.ArrayStore({
	  data   : data,
	  fields : ['ID_FUNCIONARIO','LOGIN','DATA']
	});

	var grid = new Ext.grid.GridPanel({
		title      : 'Lista Usuários',
		renderTo   : Ext.getBody(),
		autoHeight : true,
		width      : 400,
		store      : store,
		columns: [	{
				text     : 'ID',
				dataIndex: 'ID_FUNCIONARIO'
			},{
				text     : 'LOGIN',
				dataIndex: 'LOGIN'
			},{
				text     : 'DATA',
				dataIndex: 'DATA'
			}],
		viewConfig: {
			stripeRows: true
		}
	});
}, showError);

});

Result:

On server side I used JSONStreamer returning Binary Data, and decoded it using:

base64.decode(result.replace(/(\n|\r)+/g, “”));

It is better to return a JSON string straight from server and no need to convert on client side? If yes, how to do it using JSONStreamer??

That’s it for now, when I have more time I will automate the process of configuring the fields of the grid, and other stuff …

Many thanks for your help.

Willian.

1 Like

Hi Willian,
this is reading. How do you update, insert and delete ?
How are you doing errorhandling (pe dataavaluation) ? Server to client and client to server ?

Thanks Thomas

Hi Thomas,

How do you update, insert and delete ?

This application that we are porting to web still exist as desktop application (no server tier here :(…) . So we are reusing some business code (sharing desktop and web application business logic at same class) and encapsulating it in service method and call it from client (applying decorator pattern here).

Example:

server:
MyService.doSaveData(data);

begin

// coding save/update data logic to database
mySharedLogic.save;
end;

client:
onSaveClick: function(data, function () {

service.doSaveData(data, function (result) {

// ok. data saved!
},showError);

For this project we are not using datatable apply update stuff. Our edit logic is already done in old legacy desktop project.

But for fresh projects, humm how to do it ?? :slight_smile: … The problematic is that we have two different frameworks (RO/JS - server and ExtJS - GUI, and ExtJS have your own way to talk to servers)…

How are you doing errorhandling (pe dataavaluation) ? Server to client and client to server ?

Validation we are using from ExtJS GUI components (regexps, etc). Server validation is done before data is saved to database (service method);

I guess this does not apply to your situation right? Maybe RO Team can help you more… :wink:

WIllian.

willian_cslog said: base64.decode(result.replace(/(\n|\r)+/g, ""));

It is better to return a JSON string straight from server and no need to convert on client side? If yes, how to do it using JSONStreamer??

Base64 is applied to Binary data by JSONMessage. To avoid this you could switch to BinMessage or use string type instead of Binary
something like (just wrote, didn’t actually test)

function TNewService.MyGetData : String;

var
lDataSet: IDADataSet;
ss: TStringStream;

begin
ss := TStringStream.Create(‘’);
try
JSONDataStreamer.Initialize(ss, aiWrite);
lDataSet := Connection.NewDataset(‘SELECT …’,‘SQL’);
lDataSet.Open();
JSONDataStreamer.WriteDataset(lDataset, [woRows,woSchema], -1);
lDataSet := nil;
JSONDataStreamer.Finalize();
result := ss.DataString;
except
FreeAndNIL(ss);
raise;
end;
end;

proxy: {
type: ‘ajax’,
api: {
read: ‘data/users.json’,
update: ‘data/updateUsers.json’
},
reader: {
type: ‘json’,
root: ‘users’,
successProperty: ‘success’
}
}

updateUser: function(button) {
var win = button.up(‘window’),
form = win.down(‘form’),
record = form.getRecord(),
values = form.getValues();

record.set(values);
win.close();
this.getUsersStore().sync();

}

Sadly, Im still completely unclear which way to go :wink:
there are so many options and to less information.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store

Rest (http://wiki.remobjects.com/wiki/RestSchemaDispatcher_Class)
Rest would be nice cause it would be very easy to consume from different applications…
binary taking your way …
I dont think that my approach is very complicated ?
I have several database which I want to connect to dataabstract and a remobjects server which is hosting all services.
And Touch, web and rich client guis…
But it seems I have to less knowledge to decide and I have not the time to test the different approaches. Im absolutly new to web programming. I only did rich clients on different platforms the last 20 years :wink:

AFAIR, Rest is implemented in DA/N only.

I think the most solid way would be implementing proper ExtJS proxy for DA/JS DataTable. Unfortunately, it may take quite long for me due to lack of ExtJS knowledge and relatively low priority of the task.

Maybe that link I’ve posted in another thread would help, so you could start with OData while we are implementing this ‘in a proper way’

valeriy said: Base64 is applied to Binary data by JSONMessage. To avoid this you could switch to BinMessage or use string type instead of Binary
something like (just wrote, didn't actually test)

BinMessage is not working with IE < 10 , so I prefer to use JSONMessage as solution to all browsers…

So, using string type is good. your code (TStringStream) worked !! Thanks!!

Willian.

hmmmm…
have found a nice project…

http://code.google.com/p/kitto/

http://code.google.com/r/lievenfaratec-clone/source/browse/Source/Kitto.Store.pas

i have to read through this code…

It uses a wrapper to ExtJS (ExtPascal):

ExtPascal is an Object Pascal (FreePascal/Lazarus and Delphi) wrapper/binding for Ext JS,

Based on a old version of ExtJS: Supports Ext JS 3.2.1. Ext JS 2.3.0 …

Are you planning to use this framework or study source code ??

Im just thinking…
creating a regular dataabstract service dll which is doing the database stuff but not is communicating with the javascript client direct.
This project, raudus and unigui are also using json from delphi dataset to extjs stores.
I could integrate in this services the delphi dataset to json functions (filled by dataabstract) of this projects in a similar way.
Sure it adds complexity cause of another layer…
But this way I would have a working mapping from delphi to extjs stores ?
Just an idea ? maybe not a good one… :wink:

remobjects is creating tools for java (android), ios (mono), net and javascript.
their javascript effort seems to be for doing metro windows 8 apps…
IMHO it would have been easier to create a good working javascript client for jquery and extjs and stay with net and delphi and use phonegap to target mobile devices…and being crossplatform.
they have a lot of codebases now…how will they document several platforms if they had problems doing it just in delphi and net…no roadmap with feature lists…
for me its still hard to decide if can migrate an enterprise app with hundreds of users using dataabstract and javascript… maybe it would be easier to start completely new with asp.net and exjs or radphp with extjs…

yeah it is a very complex subject … I agree with you, too many choices.

Particularly for me:

  • I need to launch a web version of our flagship product (with thousands of corporate users) fast…
  • If possible launch a mobile version at same time;
  • share business rules as much as possible to accelerate the development;

why I chose ExtJS:

  • very nice GUI for web;
  • share same plataform to web and mobile (android, iOS,etc);
  • vast community;

why I chose RODA/JS:

  • share business rules already done in pascal;
  • same server to our desktop delphi, web and mobile products;
  • i trust a lot in RO Staff :wink:

Risks:

  • ExtJS 4.x is not stable as 3.x series, but incorporated several new features;
  • RODA/JS is not mature; released Oct/2011;
  • intergration between this two frameworks is very hard to achieve;

So, because of those risks I decided to keep my project simple and do not use many advanced features of RO for now …

When project is in production (first goal), improve the technical issues…

offsetdruckerei said: for me its still hard to decide if can migrate an enterprise app with hundreds of users using dataabstract and javascript... maybe it would be easier to start completely new with asp.net and exjs or radphp with extjs...

This is a key point :wink: … I think it depends on the size of your project too, how much effort needs to start from scratch … For me it was out of the question since the beginning, but preferable in an ideal world :wink: less risks…

1 Like