|
|
| Line 1: |
Line 1: |
| − | {{ScoutPage|cat=HowTo 4.0}}
| + | The Scout documentation has been moved to https://eclipsescout.github.io/. |
| − | | + | |
| − | 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.
| + | |
| − | <source lang="java">
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − | </source>
| + | |
| − | | + | |
| − | Create a new class (in the client plugin) named ''CustomIconProviderService'' that will act as an icon provider service and access the cache.
| + | |
| − | <source lang="java">
| + | |
| − | 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);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </source>
| + | |
| − | | + | |
| − | Register this service in the plugin.xml of the client plugin.
| + | |
| − | <source lang="xml">
| + | |
| − | <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"/>
| + | |
| − | </source>
| + | |
| − | | + | |
| − | = 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.
| + | |
| − | <source lang="java">
| + | |
| − | @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;
| + | |
| − | }
| + | |
| − | </source>
| + | |
| − | | + | |
| − | 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
| + | |
| − | <source lang="java">
| + | |
| − | @Override
| + | |
| − | protected Object[][] execLoadTableData(SearchFilter filter) throws ProcessingException {
| + | |
| − | return SERVICES.getService(ILogoService.class).getLogoTableData();
| + | |
| − | }
| + | |
| − | </source>
| + | |
| − | | + | |
| − | And overwrite execDecorateCell in LogoColumn
| + | |
| − | <source lang="java">
| + | |
| − | @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);
| + | |
| − | }
| + | |
| − | </source>
| + | |
| − | | + | |
| − | 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 [[Media:Scout Tutorial Images In Table.zip|here]].
| + | |
