Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » e(fx)clipse » How can I customize how default elements are rendered?
How can I customize how default elements are rendered? [message #1794170] Sat, 25 August 2018 00:48 Go to next message
Marcelo Ruiz is currently offline Marcelo RuizFriend
Messages: 73
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 #1794175 is a reply to message #1794170] Sat, 25 August 2018 18:25 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6412
Registered: July 2009
Senior Member
a) documentation on tags - https://wiki.eclipse.org/Efxclipse/Runtime/e4
b) custom renderers:
- step 1: Subclass one of the Base*Renderers (eg BaseMenuItemRenderer)
- step 2: Take a look at the current default implementation eg DefMenuItemRenderer
- step 3: Subclass DefWorkbenchRendererFactory and overwrite eg getMenuItemRendererClass()
- step 4: change your product extension point add an additional property key="rendererFactoryUri" value="bundleclass://your.bundle.id/your.renderfactory.subclass"

Now that I told you that. I'm sorry you don't have to learn all this because e(fx)clipse does provide out of the box your requirement.

If you look closely in DefMenuItemRenderer you'll notice it is delegating the node creation to "org.eclipse.fx.ui.services.resources.GraphicsLoader#getGraphicsNode" who itself delegates to GraphicNodeProvider.

From there you have 2 possible paths forwards:
- Create your own GraphicNodeProvider who eg works for the files ending with ".fa", ...
- Use the current FontIconNodeProvider and Integrate yourself into "FontIconView" (who provides FontAwesome-Support out of the box - although it is not up-to-date to the latest fa-release) or your the extension system provided by FontIconView (see org.eclipse.fx.ui.controls.image.FontIconProvider)
Re: How can I customize how default elements are rendered? [message #1794181 is a reply to message #1794175] Sun, 26 August 2018 18:59 Go to previous messageGo to next message
Marcelo Ruiz is currently offline Marcelo RuizFriend
Messages: 73
Registered: April 2017
Member
Hi Tom,
Thanks for getting back to me. I am leaning towards creating a GraphicNodeProvider.
Is there a way to prevent the Icon URI to be resolved by the system before it tries to find the GraphicNodeProvider that will deal with the file extension? The reason for this is that Ikonli does not deal directly with files, but only with icon names. With the icon name string it searches through its own FontIcon providers to find which one can provide the icon.
I was wondering if there is a special scheme that I could use to avoid the resolution so my GraphicNodeProvider is called. Otherwise I would have to resort to not very elegant workarounds...
Thanks again!
Re: How can I customize how default elements are rendered? [message #1794321 is a reply to message #1794181] Wed, 29 August 2018 01:19 Go to previous message
Marcelo Ruiz is currently offline Marcelo RuizFriend
Messages: 73
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:
file://icons.ikonli

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!
Previous Topic:Proper way to find a model element with CSS selector?
Next Topic:Clean way of being notified of new OSGi Services?
Goto Forum:
  


Current Time: Sat Sep 22 10:41:34 GMT 2018

Powered by FUDForum. Page generated in 0.02704 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top