Skip to main content
Jump to: navigation, search

Difference between revisions of "Scout/HowTo/3.8/Add an icon"

< Scout‎ | HowTo‎ | 3.8
(Added chapter about IconProviderService)
 
Line 1: Line 1:
{{ScoutPage|cat=HowTo 3.8}}
+
{{ScoutPage|cat=HowTo 3.8}}  
  
== Add the Icon File to the Project ==
+
== Add the Icon File to the Project ==
  
 
In the {{ScoutLink|Concepts|Client Plug-In|Client Plug-In}} (e.g. <code>org.eclipse.scout.helloworld.client</code>) add the icon file to the <code>resources/icons</code> folder.  
 
In the {{ScoutLink|Concepts|Client Plug-In|Client Plug-In}} (e.g. <code>org.eclipse.scout.helloworld.client</code>) add the icon file to the <code>resources/icons</code> folder.  
Line 9: Line 9:
 
== Link your File to the Application  ==
 
== Link your File to the Application  ==
  
Open the {{ScoutLink|Concepts|Icons|Icons class}} in the {{ScoutLink|Concepts|Shared Plug-In|Shared Plug-In}} (e.g. <code>org.eclipse.scout.helloworld.shared.Icons</code>) and add a new line like this:  
+
Open the {{ScoutLink|Concepts|Icons|Icons class}} in the {{ScoutLink|Concepts|Shared Plug-In|Shared Plug-In}} (e.g. <code>org.eclipse.scout.helloworld.shared.Icons</code>) and add a new line like this: <source lang="java">
<source lang="java">
+
 
public static final String UserHome = "home_red";  
 
public static final String UserHome = "home_red";  
</source>
+
</source>  
  
* The name of the constant is the name that you will use in your application. (e.g. UserHome)  
+
*The name of the constant is the name that you will use in your application. (e.g. UserHome)  
* The value is the name of your file without the extension. (e.g. home_red.png)
+
*The value is the name of your file without the extension. (e.g. home_red.png)
  
== Use your icon ==
+
== Use your icon ==
  
When you need to provide an Icon you can now use the Icons class. For example:  
+
When you need to provide an Icon you can now use the Icons class. For example: <source lang="java">
<source lang="java">
+
 
@Override
 
@Override
 
protected String getConfiguredIconId() {
 
protected String getConfiguredIconId() {
 
   return Icons.UserHome;
 
   return Icons.UserHome;
 
}
 
}
</source>
+
</source> With the appropriate import: <source lang="java">
With the appropriate import:  
+
<source lang="java">
+
 
import org.eclipse.scout.helloworld.shared.Icons;
 
import org.eclipse.scout.helloworld.shared.Icons;
</source>
+
</source> Of course the new icon is listed in the icon editor in the Scout SDK ({{ScoutLink|SDK|Explorer View|Scout Explorer}}: Project &gt; Shared &gt; Icons, {{ScoutLink|SDK|Object Properties View|Scout Object Properties}}: Open Icons Editor).  
Of course the new icon is listed in the icon editor in the Scout SDK ({{ScoutLink|SDK|Explorer View|Scout Explorer}}: Project &gt; Shared &gt; Icons, {{ScoutLink|SDK|Object Properties View|Scout Object Properties}}: Open Icons Editor).  
+
  
[[Image:Scout.3.8.howto.addicon.01.png]]
+
[[Image:Scout.3.8.howto.addicon.01.png]]  
  
 
It is also available in the icon chooser field in order to configure quickly your UI.  
 
It is also available in the icon chooser field in order to configure quickly your UI.  
  
== Sub-icons ==
+
== Sub-icons ==
Eclipse Scout supports sub-icons for some states. Sub-icons are defined with their suffix:
+
  
* <code>_open</code>: for expanded / collapsed node-state (for example for pages in the page tree).
+
Eclipse Scout supports sub-icons for some states. Sub-icons are defined with their suffix:  
* <code>_mouse_over</code> or <code>_rollover</code>: for hoover effect on buttons (e.g. ToolButton)
+
* <code>_active</code> or <code>_pressed</code> or <code>_selected</code>: for pressed-state on buttons (e.g. ToolButton with toggle action)
+
* <code>_disabled</code>: for disabled icons
+
  
If no such icons are provided for the given state, the fallback icon without suffix is used instead. For disabled state, the icon is simply greyed out if missing.
+
*<code>_open</code>: for expanded / collapsed node-state (for example for pages in the page tree).
 +
*<code>_mouse_over</code> or <code>_rollover</code>: for hoover effect on buttons (e.g. ToolButton)
 +
*<code>_active</code> or <code>_pressed</code> or <code>_selected</code>: for pressed-state on buttons (e.g. ToolButton with toggle action)
 +
*<code>_disabled</code>: for disabled icons
 +
 
 +
If no such icons are provided for the given state, the fallback icon without suffix is used instead. For disabled state, the icon is simply greyed out if missing.  
 +
 
 +
<br>
 +
 
 +
== Providing an IconProviderService  ==
 +
 
 +
Normally an internal icon service provider is used to resolve images and icons in your client. However, if you explicitely provide a CustomIconProviderService as described in the how-to [[Scout/HowTo/3.8/Display images in a table page|Display_images_in_a_table_page]], this new service will replace the internal service. This means, that the above mechanism to show icons will no longer work, because the CustomIconProviderService will be used, which will not find those icons.
 +
 
 +
The solution to this problem is to add another IconProviderService to resovle these icons.
 +
 
 +
Create a new class '''ClientIconProviderService''' in your client plugin:<br>
 +
<pre>package org.eclipse.minicrm.client.services;
 +
 +
import org.eclipse.minicrm.client.Activator;
 +
import org.eclipse.scout.rt.client.services.common.icon.IconProviderService;
 +
import org.eclipse.scout.rt.client.services.common.icon.IconSpec;
 +
 
 +
public class ClientIconProviderService extends IconProviderService {
 +
  public ClientIconProviderService() {
 +
    setHostBundle(Activator.getDefault().getBundle());
 +
  }
 +
 +
  @Override
 +
  public int getRanking() {
 +
    return -20;
 +
  }
 +
 
 +
@Override
 +
  public IconSpec getIconSpec(String iconName) {
 +
    IconSpec result = super.getIconSpec(iconName);
 +
    return result;
 +
  }
 +
}
 +
</pre>
 +
In your client's '''plugin.xml''' add the following code (the same place where you already added the CustomIconProviderService):<br>
 +
<pre>      &lt;service
 +
            factory="org.eclipse.scout.rt.client.services.ClientServiceFactory"
 +
            class="org.eclipse.minicrm.client.services.ClientIconProviderService"
 +
            session="org.eclipse.minicrm.client.ClientSession"&gt;
 +
      &lt;/service&gt;
 +
</pre>
 +
You should now be able to use both the custom icons described above as well as the table icons described in the linked how-to.<br>

Latest revision as of 03:40, 6 March 2013


Scout
Wiki Home
Website
DownloadGit
Community
ForumsBlogTwitterG+
Bugzilla
Bugzilla


Add the Icon File to the Project

In the Client Plug-In (e.g. org.eclipse.scout.helloworld.client) add the icon file to the resources/icons folder.

Scout supports many different picture formats. You can e.g. use a PNG file that has a size of 16*16 pixels.

Link your File to the Application

Open the Icons class in the Shared Plug-In (e.g. org.eclipse.scout.helloworld.shared.Icons) and add a new line like this:
public static final String UserHome = "home_red";
  • The name of the constant is the name that you will use in your application. (e.g. UserHome)
  • The value is the name of your file without the extension. (e.g. home_red.png)

Use your icon

When you need to provide an Icon you can now use the Icons class. For example:
@Override
protected String getConfiguredIconId() {
  return Icons.UserHome;
}
With the appropriate import:
import org.eclipse.scout.helloworld.shared.Icons;
Of course the new icon is listed in the icon editor in the Scout SDK (Scout Explorer: Project > Shared > Icons, Scout Object Properties: Open Icons Editor).

Scout.3.8.howto.addicon.01.png

It is also available in the icon chooser field in order to configure quickly your UI.

Sub-icons

Eclipse Scout supports sub-icons for some states. Sub-icons are defined with their suffix:

  • _open: for expanded / collapsed node-state (for example for pages in the page tree).
  • _mouse_over or _rollover: for hoover effect on buttons (e.g. ToolButton)
  • _active or _pressed or _selected: for pressed-state on buttons (e.g. ToolButton with toggle action)
  • _disabled: for disabled icons

If no such icons are provided for the given state, the fallback icon without suffix is used instead. For disabled state, the icon is simply greyed out if missing.


Providing an IconProviderService

Normally an internal icon service provider is used to resolve images and icons in your client. However, if you explicitely provide a CustomIconProviderService as described in the how-to Display_images_in_a_table_page, this new service will replace the internal service. This means, that the above mechanism to show icons will no longer work, because the CustomIconProviderService will be used, which will not find those icons.

The solution to this problem is to add another IconProviderService to resovle these icons.

Create a new class ClientIconProviderService in your client plugin:

package org.eclipse.minicrm.client.services;
 
import org.eclipse.minicrm.client.Activator;
import org.eclipse.scout.rt.client.services.common.icon.IconProviderService;
import org.eclipse.scout.rt.client.services.common.icon.IconSpec;

public class ClientIconProviderService extends IconProviderService {
  public ClientIconProviderService() {
    setHostBundle(Activator.getDefault().getBundle());
  }
 
  @Override
  public int getRanking() {
    return -20;
  }

 @Override
  public IconSpec getIconSpec(String iconName) {
    IconSpec result = super.getIconSpec(iconName);
    return result;
  }
}

In your client's plugin.xml add the following code (the same place where you already added the CustomIconProviderService):

      <service
            factory="org.eclipse.scout.rt.client.services.ClientServiceFactory"
            class="org.eclipse.minicrm.client.services.ClientIconProviderService"
            session="org.eclipse.minicrm.client.ClientSession">
      </service>

You should now be able to use both the custom icons described above as well as the table icons described in the linked how-to.

Back to the top