Skip to main content

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.

Jump to: navigation, search

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

< Scout‎ | HowTo‎ | 3.7
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{ScoutPage|cat=HowTo}}
+
{{ScoutPage|cat=HowTo 3.7}}
  
 
===== Add the icon file to the project =====
 
===== Add the icon file to the project =====
Line 38: Line 38:
 
It is also available in the icon chooser field in order to configure quickly your GUI.  
 
It is also available in the icon chooser field in order to configure quickly your GUI.  
  
[[Image:IconChooser.png]]
+
===== Sub-icons =====
 +
Eclipse Scout supports sub-icons for some states. Sub-icons are defined with their suffix:
  
{{note|TODO|Add a section to describe the sub-icons: suffix on the image file to represent an other state (opened...)}}
+
* <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.

Latest revision as of 05:22, 4 May 2012

The Scout documentation has been moved to https://eclipsescout.github.io/.

Add the icon file to the project

In the The Scout documentation has been moved to https://eclipsescout.github.io/. (e.g. tutorialMiniCrm.client.tutorialMiniCrm) add the icon file to the resources/icons folder.

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


Link your file to your application

Open the The Scout documentation has been moved to https://eclipsescout.github.io/. in the The Scout documentation has been moved to https://eclipsescout.github.io/. (e.g. tutorialMiniCrm.shared.tutorialMiniCrm.Icons) and add a new line like this:

public static final String UserHome ="home_red";
  • Name of the constant is the name that you will use in your application. (e.g. UserHome)
  • 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 tutorialMiniCrm.shared.tutorialMiniCrm.Icons;

Of course the new icon is listed in the icon editor in the Scout SDK (The Scout documentation has been moved to https://eclipsescout.github.io/.: Project > Shared > Icons, The Scout documentation has been moved to https://eclipsescout.github.io/.: Open icons editor).

IconEditor.png

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

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.

Back to the top