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

This tutorial 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;
}

The different environments need to use this additional cache, thus add the code below to SwtEnvironment and StandaloneRwtEnvinroment (overwrite the default implementation of getIcon).

@Override
public Image getIcon(String name) {
  Image image = super.getIcon(name);
  if (image == null) {
    byte[] img = org.example.logo.client.Activator.getDefault().getImageFromCache(name);
    if (img != null) {
      image = new Image(getDisplay(), new ByteArrayInputStream(img));
    }
  }
  return image;
}

And for the SwingEnvironment

@Override
public Icon getIcon(String name) {
  Icon icon = super.getIcon(name);
  if (icon == null) {
    byte[] img = org.example.logo.client.Activator.getDefault().getImageFromCache(name);
    if (img != null) {
      icon = new ImageIcon(TypeCastUtility.castValue(img, byte[].class));
    }
  }
  return icon;
}

Table Page & Service

Create a new server process service (LogoProcessService) 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(ILogoProcessService.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(ILogoProcessService.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 process service).