I don't use SmartGWT Server, our server is a JBoss where we have implemented REST Web Services.
I will try to provide a small tutorial in order to :
- On server-side
* Read an image file as byte[]
* Convert byte[] to Base64 encoded String
* Add headers in order to display Image correctly on client side
- On client
* Display the image in the ListGridField of a databinded ListGrid
As I said, we have implemented REST Web Services on a JBoss EAP 6.1+. The implementation of a REST WS create DTO classes which are converted into JSON and then sent to client (Browser).
This part works perfectly fine, i will not detail it
-------------------
-- Server Side --
-------------------
In our REST WS, we read an image file
Then we encode the binary from byte[] to Base64 String.
I use Apache Commons Codec.
In order to be display on client you must add headers to your Base64 String.
Let's assume the image file is a jpg.
Others mimeType : http://www.sitepoint.com/web-foundations/mime-types-complete-list/
The imagePayload String is set as a parameter of a DTO class.
The DTO class is converted as JSON and return to client.
In our case, the parameter name of the DTO class is "imageFile".
That parameter name has to match databinded name on ListGridField on ListGrid in order to be automatically display in ListGrid.
-----------------
-- Client Side --
------------------
We declare several ListGridField and particularly one :
It works for me, if there is a better way to do that, please post it.
You may want to read more about image display/upload and Base64 encoded String when you don't use SmartGWT server :
http://forums.smartclient.com/showthread.php?t=32734
I will try to provide a small tutorial in order to :
- On server-side
* Read an image file as byte[]
* Convert byte[] to Base64 encoded String
* Add headers in order to display Image correctly on client side
- On client
* Display the image in the ListGridField of a databinded ListGrid
As I said, we have implemented REST Web Services on a JBoss EAP 6.1+. The implementation of a REST WS create DTO classes which are converted into JSON and then sent to client (Browser).
This part works perfectly fine, i will not detail it
-------------------
-- Server Side --
-------------------
In our REST WS, we read an image file
Code:
File file = new File("~/path/image.jpg");
FileInputStream fileInputStream = new FileInputStream(file);
imageFileAsByteArray = new byte[(int) file.length()];
fileInputStream.read(imageFileAsByteArray);
fileInputStream.close();I use Apache Commons Codec.
Code:
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>Code:
String imageFileAsBase64 = new String(Base64.encodeBase64(imageFileAsByteArray));Let's assume the image file is a jpg.
Code:
String mimeType = "image/jpeg";
String headers = "data:" + mimeType + ";base64,";
String imagePayload = headers + imageFileAsBase64;The imagePayload String is set as a parameter of a DTO class.
The DTO class is converted as JSON and return to client.
In our case, the parameter name of the DTO class is "imageFile".
That parameter name has to match databinded name on ListGridField on ListGrid in order to be automatically display in ListGrid.
-----------------
-- Client Side --
------------------
We declare several ListGridField and particularly one :
Code:
...
final ListGridField imageGridField = new ListGridField("imageFile");
imageGridField.setType(ListGridFieldType.IMAGE);
imageGridField.setShowFileInline(true);
...
grid.setFields(..., imageGridField, ...);It works for me, if there is a better way to do that, please post it.
You may want to read more about image display/upload and Base64 encoded String when you don't use SmartGWT server :
http://forums.smartclient.com/showthread.php?t=32734