Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "Scout/HowTo/3.8/Add an icon"
(New page: {{ScoutPage|cat=HowTo 3.8}} ===== Add the icon file to the project ===== In the {{ScoutLink|Concepts|Shared Plug-In|client Plug-In}} (e.g. <code>tutorialMiniCrm.client.tutorialMiniCrm</c...) |
|||
| Line 1: | Line 1: | ||
{{ScoutPage|cat=HowTo 3.8}} | {{ScoutPage|cat=HowTo 3.8}} | ||
| − | + | == Add the Icon File to the Project == | |
| − | In the {{ScoutLink|Concepts| | + | 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. |
| − | Scout supports many different picture formats. You can use a PNG file that has a size of 16*16 pixels. | + | 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 {{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| | + | |
<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 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: | 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: | With the appropriate import: | ||
<source lang="java"> | <source lang="java"> | ||
| − | import | + | 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|Explorer | + | Of course the new icon is listed in the icon editor in the Scout SDK ({{ScoutLink|SDK|Explorer View|Scout Explorer}}: Project > Shared > Icons, {{ScoutLink|SDK|Object Properties View|Scout Object Properties}}: Open Icons Editor). |
| − | [[Image: | + | [[Image:Scout.3.8.howto.addicon.01.png]] |
| − | It is also available in the icon chooser field in order to configure quickly your | + | 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: | Eclipse Scout supports sub-icons for some states. Sub-icons are defined with their suffix: | ||
Revision as of 06:14, 7 May 2012
The Scout documentation has been moved to https://eclipsescout.github.io/.
Contents
Add the Icon File to the Project
In the The Scout documentation has been moved to https://eclipsescout.github.io/. (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 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. 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 (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).
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_overor_rollover: for hoover effect on buttons (e.g. ToolButton) -
_activeor_pressedor_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.