Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
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
- Project Name: org.example.logo
- Select Outline Tree and Table Form
- 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.