| How can I customize how default elements are rendered? [message #1794170] |
Sat, 25 August 2018 00:48  |
 Marcelo Ruiz
Messages: 80
Registered: April 2017 |
Member |
|
|
Hi everyone,
I am wondering what is the proper way to deal with changing how efxclipse displays some components. For example, let's say that I want to display menu items with a fontawesome icon (or something from ikonli) instead of the image that I can define through the e4 model. How should this be done?
I found two different approaches:
1- https://www.eclipsecon.org/europe2015/sites/default/files/slides/efxclipse_efxperience.pdf mentions using a custom renderer and it says "it is way easier than it sounds" but does no provide any more information.
2- http://www.kware.net/?p=273 shows a customization for the main window using a custom fxml file. This website states: "It is very easy to hook an FXML to a window in the application model. All you need to to is set the property efx.window.root.fxml in the persisted state of the window. The value is an URL pointing to the FXML you want to use". Now, where are all the properties like the one mentioned listed? Is there a place where all those properties could be inspected?
I tried to use Scenic View http://fxexperience.com/scenic-view/ to try to learn a bit more about the e(fx)clipse application I am working on, but it cannot find the application Stage.
I have the feeling that approach 1 is the way to go since everything is a service in e4, but where do I find this kind of information?
Also, one of Tom's posts mentions: "You can now add the tag "efx-center-on-screen" to your Application.e4xmi and the window will be centered on screen". Where can find the list of valid tags for every e(fx)clipse component?
Thanks!
[Updated on: Sat, 25 August 2018 01:08] Report message to a moderator |
|
|
|
|
| Re: How can I customize how default elements are rendered? [message #1794321 is a reply to message #1794181] |
Wed, 29 August 2018 01:19  |
Marcelo Ruiz
Messages: 80
Registered: April 2017 |
Member |
|
|
I will share the workaround that I used in case someone wonders how to do this. I do not know if this is the best way to do it, but it has worked for me.
First, as suggested by Tom, I created the GraphicNodeProvider:
@Component
public class IkonliGraphicNodeProvider implements GraphicNodeProvider {
@Override
public @NonNull String getName() {
return "fx.ikonli-provider"; //$NON-NLS-1$
}
@Override
public @NonNull List<@NonNull String> getFileSuffix() {
return Collections.singletonList("ikonli"); //$NON-NLS-1$
}
@Override
public @NonNull FontIcon getGraphicNode(final URI uri) throws IOException {
final FontIcon fontIcon;
if (uri.hasQuery()) {
fontIcon = new FontIcon(uri.query());
} else {
fontIcon = new FontIcon();
}
return fontIcon;
}
}
This implementation accepts any real file that ends in ".ikonli" in the Application Model. The file can be a zero byte file.
If a query is provided, it is assumed to be the ikonli's icon code, and if a query is not provided, an empty ikonli's FontIcon is provided.
For example, always referring to an existing 'icons.ikonli' in the root of the app folder, the following Icon URI in Application.e4xmi will give as a result a graphic node containing "fas-undo-alt" :
file://icons.ikonli?fas-undo-alt
And the following one, an empty FontIcon that can be easily customized via css:
If the component Id is 'my.app.mymenuitem', the css code to use the icon "fab-buromobelexperte" should include:
#my-app-mymenuitem > .ikonli-font-icon {
-fx-icon-code: fab-buromobelexperte;
}
I know this solution is not very elegant, but it works. I hope this helps anyone to use the comprehensive font library from ikonli.
Cheers!
|
|
|
Powered by
FUDForum. Page generated in 0.01362 seconds
] 
Search
Help
Register
Login
Home
