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

Scout

Wiki Home

Website

Download • Git

Community

Forums • Blog • Twitter • G+

Bugzilla

Bugzilla

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 {
 
  @Override
  public Bundle getHostBundle() {
    return Activator.getDefault().getBundle();
  }
 
  @Override
  public int getRanking() {
    return -56;
  }
 
  @Override
  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.

<service 
  class="org.example.logo.client.services.icon.CustomIconProviderService" 
  createImmediately="false" factory="org.eclipse.scout.rt.client.services.ClientServiceFactory" 
  session="org.example.logo.client.ClientSession"/>

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.

@Override
public Object[][] getLogoTableData() {
  return new Object[][]{
      new Object[]{"Company 1", "company1"},
      new Object[]{"Company 2", "company2"},
      new Object[]{"Company 3", "company3"},
  };
}
 
@Override
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

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

And overwrite execDecorateCell in LogoColumn

@Override
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);
  }
  cell.setIconId(imageId);
  cell.setText(null);
}

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.