Jump to: navigation, search

Scout/HowTo/3.9/Display images in a table page

< Scout‎ | HowTo‎ | 3.9

Wiki Home

This how-to describes how to build a Scout application that displays images in a table page.

Project Creation

Create a new scout project

  1. Project Name: org.example.logo
  2. Select Outline Tree and Table Form
  3. Select Create new RAP Target

Image Cache

Open the client activator class (org.example.logo.client.Activator) and add the following code used to cache images.

private Map<String, byte[]> m_imageCache = new HashMap<String, byte[]>();
public void cacheImage(String imageId, byte[] content) {
  if (content != null) {
    m_imageCache.put(imageId, content);
public boolean isImageCached(String imageId) {
  return m_imageCache.containsKey(imageId);
public byte[] getImageFromCache(String imageId) {
  byte[] content = m_imageCache.get(imageId);
  if (content != null && content.length > 0) {
    return content;
  return null;

Create a new class (in the client plugin) named CustomIconProviderService that will act as an icon provider service and access the cache.

package org.example.logo.client.services.icon;
import org.eclipse.scout.rt.client.services.common.icon.IIconProviderService;
import org.eclipse.scout.rt.client.services.common.icon.IconSpec;
import org.eclipse.scout.service.AbstractService;
import org.example.logo.client.Activator;
import org.osgi.framework.Bundle;
 * Custom icon provider service accessing icon cache.
public class CustomIconProviderService extends AbstractService implements IIconProviderService {
  public Bundle getHostBundle() {
    return Activator.getDefault().getBundle();
  public int getRanking() {
    return -56;
  public IconSpec getIconSpec(String iconName) {
    byte[] content = Activator.getDefault().getImageFromCache(iconName);
    if (content == null) {
      return null;
    return new IconSpec(content);

Register this service in the plugin.xml of the client plugin.

  createImmediately="false" factory="org.eclipse.scout.rt.client.services.ClientServiceFactory" 

Table Page & Service

Create a new server service (LogoService) with the implementation as below. This is only an example implementation. Usually the table data and the images are provided by the database.

public Object[][] getLogoTableData() {
  return new Object[][]{
      new Object[]{"Company 1", "company1"},
      new Object[]{"Company 2", "company2"},
      new Object[]{"Company 3", "company3"},
public byte[] getLogo(String imageId) {
  try {
    // TODO get content of image
    return IOUtility.getContent("c:/" + imageId + ".png");
  catch (ProcessingException e) {
    // nop
  return null;

Create a new child page in StandardOutline with the following properties:

  • AbstractPageWithTable
  • Name: LogoTablePage
  • Multiline text property set on table
  • String column Name (width 160)
  • String column Logo (width 400)

Now overwrite execLoadTableData

protected Object[][] execLoadTableData(SearchFilter filter) throws ProcessingException {
  return SERVICES.getService(ILogoService.class).getLogoTableData();

And overwrite execDecorateCell in LogoColumn

protected void execDecorateCell(Cell cell, ITableRow row) throws ProcessingException {
  String imageId = getValue(row);
  if (!org.example.logo.client.Activator.getDefault().isImageCached(imageId)) {
    // load image content by image id
    byte[] content = SERVICES.getService(ILogoService.class).getLogo(imageId);
    org.example.logo.client.Activator.getDefault().cacheImage(imageId, content);

You should now be able to run the application (server + 3 x client) and the rows with name and logo should appear (assuming that you have 3 images named as expected in the service). The completed example application can be downloaded here.