Change UI-Designer vom Abeille to intellij

[thelsing]

I made some changes to the MT UI and I find abeille to be a great PITA:

• absolute Paths are hardcoded in the xml file. Changing every time somebody touches it.
• abeille is not so easy to get working (we recommend not global java installation after all)
• the xml file is hard to understand and to edit manually
• we cant't add jfxPanels and other 3rd partie controls (at least I didn't manage to do it)

There are not many other gui editors available for swing:

• Jformsdesigner (requires to pay)
• Intellij gui designer

I played a bit around with the intellij designer and found it quite good:

• i18n is supported directly
• xml is quite readable

Generating the java code from the xml needs an ant task from jetbrains and we need the forms runtime to. Both are available via maven repos.

We also don't have to recreate the ui. I found this working:

• export abeille form in abeille to java code
• use this code in an empty project in intellij 2020.1
• use guidesigner snapshot to snapshot it. (a bit complicated as it only works if you use the jbr-11 jre)
• do a bit search & replace to make intellij aware that the values are already i18ned
• change code a bit.

I plan to to a draft PR for a dialog so we can look at it in more detail.

Any thoughts?

[Phergus]

Certainly the use of abeille has been a disincentive for adding new features that require GUI updates as well.

[Azhrei]

Agreed.  I think splitting out one example and looking at how IntelliJ can handle it would be worthwhile.If I may, I’d suggest the Token Editor. I know it’s the most complex of the dialogs (the State editor is a close second), but if a complex one won’t work, there’s no need to try the easy ones, right…?

[thelsing]

I already know that it works, but the token editor is fine as well. It's the first dialog. Responses where all positive so the change that the work is for nothing seems small.

[kwvanderlinde]

Love the idea as I've also struggled Abeille.

My biggest annoyance with Abeille was how opinionated it is (might be my lack of experience with designers as well 🤷). Everything is on an explicit grid, so adding rows/columns or trying to lay out elements outside of the grid paradigm is tricky. E.g., when I added the *BL buttons to the Topology panel of the Edit Token dialog, it was quite a pain to figure out how to not mess up the rest of the UI that was already neatly arranged on its grid.

I'm hoping we can move to a less opinionated designer. How does the IntelliJ designer look from that angle?

[thelsing]

This may be more an issue with the FormLayout than with the designer. But intellij supports changing the layout.
I didn't play much with the intellij designer, but the xml is clean and I could edit it if the designer doen't play well.

[thelsing]

An other approach would be to use eclipse windowbuilder for UI. It parses and changes the java ui code. That way the use of an gui editor would be optional. Downside is that you have to use eclipse for ui editing. Upside is that we could use layouts that intellij does not support like MigLayout.

[cwisniew]

Just thinking about having to install eclipse again is giving me nightmares. I don't feel like having to debug why eclipse isn't starting this time every time I want to edit the UI, so please no eclipse.

[Azhrei]

Yeah, Eclipse is... kinda "ugh" nowadays. :)

How about the IntelliJ GUI designer plugin instead? https://www.jetbrains.com/help/idea/gui-designer.html

Edit: Looks like their GUI designer won't generate Java source code when the project is built via Gradle. Sigh. https://www.jetbrains.com/help/idea/gui-designer-output-options.html Too bad since they include a JGoodies-like FormLayout which hopefully would've allowed for really easy conversion.

[thelsing]

I looked at the eclipse windowbuilder and it works quite nice. But it has it's own issues:

• editor window to small on hdpi screen and not zoomable
• crashes
  So it's not good enough to keep eclipse installed.

I played with intellij gui designer and it works quite nice. My setup:

• set build and run to intellij in build options -> gradle
• set gui editor to generate java code.
  Now I just build with intellij when I changed sth. in the ui-designer (tool-icon in toolbar). This works quite well. I also tried the gradle ant task but it only works once. After each build I had to clean because methods in the class where duplicated.

I changed our AbeilleForm class to load arbitrary Components as UI. Now I can switch between abeille xml, java code generated by abeille and java code generated by intellij.
In the captured Forms (conversion abeille java export -> intellij xml) intellij replaced spacers with it's own spacers. But they work different.
So I have to create my own spacers, and replace them, change different colums to fixed size in layout or just switch to intellij GridLayout.
For now I'm trying to use the intellij GridLayout. The UI-Editor works really well with it (once you understand that those spacers work like springs.).

[thelsing]

See PR #3785 for necessary changes and feel free to play around with the editor.