dhx.proxy: offline storage

What is dhx.proxy?

dhx.proxy is a DHTMLX Touch component allowing you to send web requests via the proxy object. It defines a 'medium' data storage (cookie, session or local) that will keep the latest successful data files (further referred as 'the latest copy') and unsuccessful web requests.

How does an application using dhx.proxy work?

Loading data
  • Each time data needs loading, the app passes a request to the server via proxy-server. If the server is available - data is loaded from it and cached as the latest copy. If the server is unavailable, data is loaded from the local storage.
  • Note that the local storage contain data just if at least once the app was run with available connection to the Internet.
CRUD operations
  • When a user makes a request on update, it (the request) is passed to the server via proxy-server. If the request is satisfied - it updates the latest copy. If the request isn't satisfied - it's cached in the local storage.
  • Each time a user makes a request, dhx.proxy checks presence of unsuccessful requests in the local storage. If there are any kept - they are passed to the server.
  • As soon as an unsuccessful request is satisfied - it updates the latest copy and is removed from the local storage.

 
To cache not only the entered data, but also the application resources (js, css files, images etc.) you may use dhx.proxy together with the ApplicationCache interface (HTML5 feature).

How to use dhx.proxy?

dhx.proxy is an easy-to-use component. All you need to do is to instantiate it and specify the instance as the url parameter of the component(s) that will take data from the server.

var source = new dhx.proxy({
	  url: "./data.php",
	  storage: dhx.storage.cookie
});
 
dhx.ui({
          view:"list", 
          id:"mylist", 
          url: source,
          datatype: 'json',
          ...
})

Related sample: ui/server/02_saving/08_dataprocessor_proxy_offine.html

Initialization

dhx.proxy can be initialized in the following way:

var source = new dhx.proxy({
	  url: "./data.php",
	  storage: dhx.storage.session
});

The constructor takes 2 parameters:

  • url - (url) defines the path to the file which will get change requests. It's a path to the server and if you use dhtmlxConnector, the path to its file can be set as this parameter.
  • storage - (dhx.storage.local, dhx.storage.session, dhx.storage.cookie) specifies the data storage type. It's an optional parameter. The default value - dhx.storage.local.

dhx.proxy and dhx.DataProcessor

If for connecting to the server you use dataProcessor, you should set its url parameter to a dhx.proxy object. After this all web requests start to be passed to the server through proxy.

var source = new dhx.proxy({
	  url: "./data.php",
	  storage: dhx.storage.cookie
});
 
dhx.ui({
          view:"list", 
          id:"mylist", 
          url: source,
          datatype: 'json',
          ...
})
 
var dp = new dhx.DataProcessor({
				master:$$('mylist'),
				url: source
});

dhx.proxy and Ajax

In case you don't use dataProcessor and 'write' the server-client logic manually, you will need these 2 methods:

  • post
  • get

The methods work like normal Ajax GET and POST requests.

var source = new dhx.proxy({
	  url: "./data.php",
	  storage: dhx.storage.cookie
});
 
dhx.ui({
          view:"list", 
          id:"mylist", 
          url: source,
          datatype: 'json',
          ...
})
 
var params = ["a=1", "b=2"]; // request parameters list
 
source.post( params.join('&'), {
				success: function() {
					moveItem(id, $$('mylist'), $$('ready_list'));
				},
				error: function() {
					moveItem(id, $$('mylist'), $$('proxy_list'));
				}
});

API Reference