|
|
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]].
| + | |