ListGrid ImageFile Image Flicker on Refresh

[chimpeenuts]

1) v8.3p_2013-02-09/PowerEdition Deployment

2) Chrome 26.0.1410.65, Firefox 18.0.2

Issue:

I've implemented a ListGrid that displays an icon and some textual data for each row.

Since the back-end data is frequently updated, I've implemented the follow code to refresh the ListGrid every 5 seconds:

_gridDeviceLayout.getGrid().getDataSource()
		.fetchData(_gridDeviceLayout.getGrid().getCriteria(), new DSCallback() {
			public void execute(DSResponse response, Object rawData, DSRequest request) {

				if (response.getData().length > 0) {
					request.setOperationType(DSOperationType.UPDATE);

					String selectedState = _gridDeviceLayout.getGrid().getSelectedState();

					_gridDeviceLayout.getGrid().getDataSource().updateCaches(response, request);

					_gridDeviceLayout.getGrid().setSelectedState(selectedState);
				}
			}

		}, request);

This code works great for the refresh, however, every 5 seconds the icon flickers upon refresh. In Chrome it's subtle; in Firefox it's extreme.

Here is how I'm defining the icon file in my datasource file:

<field name="icon" type="imageFile" title=" " showFileInline="true" maxFileSize="1048576" />

I've also set some additional parameters on the field:

		ListGridField iconGridField = _gridLayout.getGrid().getField("icon");
		iconGridField.setWidth(40);
		iconGridField.setCanEdit(false);
		iconGridField.setCanFilter(false);
		iconGridField.setImageHeight(36);
		iconGridField.setImageWidth(36);
		iconGridField.setAlign(Alignment.CENTER);

Is there any elegant way to reduce or avoid the re-draw/flicker of the icon on every grid refresh, especially since the icon data is *not* being updated on the backend, just the textual data.

My current thoughts are to specifically copy over only the desired values on each grid refresh but that seems like a lot of code and potential for bug issues when everything works very cleanly right now.

Thanks!

[Isomorphic]

Set HTTP headers that allow the browser to cache the icon.

[chimpeenuts]

Set HTTP headers that allow the browser to cache the icon.

Thanks for the quick reply. I tried putting the preventHTTPCaching setting in my datasource ds.xml definition file but it didn't seem to make a difference.

<DataSource ID="device" serverType="sql" tableName="device" preventHTTPCaching="false"
  dropExtraFields="true">

Do you mean I should set a header like 'If-Modified-Since' in my update request for my listgrid?

Or do I need to manually intercept the request for the icon (since my field is a imageFile type) and set a header on that one?

[Isomorphic]

Preventing caching is the opposite of what you want to do - you want to set HTTP headers (*not* a SmartGWT setting) to allow caching.

How to do this will depend on your deployment scenario. Use Google to learn about this topic.

[chimpeenuts]

Ok got it. So this is outside of a Smart GWT setting and a direct HTTP protocol/cache option.

I have not done this type of stuff before so will look into it.

However, one follow-up question.

Do I just set these headers in my DSRequest that I pass to my dataSource fetctData call?

I've noticed that Smart GWT handles imageFile fields uniquely by initiating a separate IDACall to "download_filename".

If I set cache parameters on my datasource fetchData call will be these be transferred as well to the internal download_filename IDACall?

If not, what's the best way to intercept the download_filename internal call to set the appropriate headers.

Thanks as always!

[chimpeenuts]

Correction. It's an IDACall with operationType viewFile on the same datasource as my grid that has the imageFile field.

I set some headers on my datasource fetchData DSRequest to see if these would be transferred over to the internally triggered IDACall to viewFile but the headers I set do not appear to transfer over.

This, I presume, means I need to explicitly handle the IDACall for viewFile and somehow set custom headers on that call.

Is this correct? Am I on the right path?

DataSource fetchData http request headers to update listgrid:

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:2151
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:isc_cState=ready; GLog=%7B%0D%20%20%20%20left%3A0%2C%20%0D%20%20%20%20top%3A0%2C%20%0D%20%20%20%20width%3A0%2C%20%0D%20%20%20%20height%3A0%2C%20%0D%20%20%20%20priorityDefaults%3A%7B%0D%20%20%20%20%20%20%20%20Log%3A4%0D%20%20%20%20%7D%2C%20%0D%20%20%20%20defaultPriority%3A3%0D%7D; JSESSIONID=wom3m5f3o31p
Host:127.0.0.1:8888
If-Modified-Since:Tue, 01 Feb 2013 02:03:04 GMT
Origin:https://127.0.0.1:8888
Pragma:no-cache
Referer:https://127.0.0.1:8888/Index.jsp?gwt.codesvr=127.0.0.1:9997
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.65 Safari/537.31

Smart GWT framework-triggered IDACall to viewFile (to show the image in listgrid) http request headers:

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Cookie:isc_cState=ready; GLog=%7B%0D%20%20%20%20left%3A0%2C%20%0D%20%20%20%20top%3A0%2C%20%0D%20%20%20%20width%3A0%2C%20%0D%20%20%20%20height%3A0%2C%20%0D%20%20%20%20priorityDefaults%3A%7B%0D%20%20%20%20%20%20%20%20Log%3A4%0D%20%20%20%20%7D%2C%20%0D%20%20%20%20defaultPriority%3A3%0D%7D; JSESSIONID=wom3m5f3o31p
Host:127.0.0.1:8888
Pragma:no-cache
Referer:https://127.0.0.1:8888/Index.jsp?gwt.codesvr=127.0.0.1:9997
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.65 Safari/537.31

I added the

If-Modified-Since:Tue, 01 Feb 2013 02:03:04 GMT

request header to my datasource fetchData call and it successfully appears but I don't see it in the IDACall for viewFile operation.

[Isomorphic]

If it's an image stored in the database, HTTP headers would still be the way to control caching, but there are new concerns - if you tell the browser to cache it too long, the user will not see new image data uploaded to the DB. Introducing this possible problem may not be worth fixing the minor flicker issue.

If you do choose to advertise cacheability, you would add a FilterServlet in front of IDACall (or just replace IDACall) that adds cache headers when you see a request for an image.

[Isomorphic]

And, just to clarify - in all cases here HTTP caching is controlled by headers *in the response* (you have been focusing on the request, which is not where the appropriate headers are).

[nicieri]

How do you solve this?

I have a field of type "image" and the data is in a string from db.

I have the same problem and i try adding If-Modified-Since in a response, but this not work for me.

Thanks

[Isomorphic]

The server does not send If-Modified-Since, it sends "Expires". For more background, please search with Google for articles on HTTP caching, this is not specific to SmartGWT.