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.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
- 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; }
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).