Skip to main content

Notice: This Wiki is now read only and edits are no longer possible. Please see: for the plan.

Jump to: navigation, search

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

< Scout‎ | HowTo‎ | 5.0

The Scout documentation has been moved to

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.

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="" 

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 LogoTablePageData getLogoTableData() throws ProcessingException {
  LogoTablePageData pageData = new LogoTablePageData();
  for (int i = 1; i <= 3; i++) {
    LogoTableRowData row = pageData.addRow();
    row.setName("Company " + i);
    row.setLogo("company" + i);
  return pageData;
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 void execLoadData(SearchFilter filter) throws ProcessingException {

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 and the clients [SWT, Swing, RAP]) 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.

Back to the top