Skip to main content

Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Eclipse Scout » [neon] Build custom UI element
[neon] Build custom UI element [message #1738023] Fri, 15 July 2016 07:19 Go to next message
Kevin Kirn is currently offline Kevin KirnFriend
Messages: 19
Registered: September 2014
Junior Member
Hello everyone

First of all - awesome new scout release, thanks for sharing!

We want to build some custom UI elements, e.g. a tag field where multiple tags can be entered - like a smartfield where n items can be selected and are represented as tags.

Since the current documentation doesn't mention this topic, I browsed through the org.eclipse.scout.rt.client-6.0.0.M6_1-sources.jar where controls are obviously implemented.

Therefore my question is:
What is the recommended way to extend the existing control set of scout in order to keep updatability ?

Thanks for your effort and best regards


[Updated on: Fri, 15 July 2016 07:38]

Report message to a moderator

Re: [neon] Build custom UI element [message #1738545 is a reply to message #1738023] Wed, 20 July 2016 17:49 Go to previous messageGo to next message
Beat Schwarzentrub is currently offline Beat SchwarzentrubFriend
Messages: 162
Registered: November 2010
Senior Member
Hi Kevin

Your tag field sounds cool! If you want to keep things simple, you could build such an element with existing fields only (e.g. an abstract group box that contains a table and a smartfield). This would be 100% safe when updating the Scout release (okay, maybe 99% Wink ). You can even add custom CSS rules to such a field template (using the getConfiguredCssClass() property). But be aware that the CSS is not guaranteed to be stable across Scout versions. However, it should not be very hard to fix a broken CSS on version change.

A completely new widget requires several parts:

  • The Scout client model for the new field (*.client module -->
  • The adapter that translates data and events from the model format (Java object) to the UI format (JSON). (*.ui.html module -->
  • The javascript part that runs in the browser and renders the received JSON data to HTML and vice versa. (*.ui.html module --> MyField.js)

I don't know if there is already a full documentation available on that topic, but maybe it already helps if you have a look at the completely custom "HeatMapField" in the widgets demo application:

This approach is very flexible, but is more likely to break when updating Scout, especially the JavaScript and CSS part (because there is no Java-equaivalent support for APIs in those languages). My advice would be to keep things as simple as possible to reduce the amount of code that can break. Wink

Re: [neon] Build custom UI element [message #1738662 is a reply to message #1738545] Thu, 21 July 2016 21:56 Go to previous message
Kevin Kirn is currently offline Kevin KirnFriend
Messages: 19
Registered: September 2014
Junior Member
Hi Beat

Thanks for your detailed reply.

We will go for a new widget, therefore the description of a widget's structure is really helpful!

Also thanks for mentioning the heat field, this is a perfect reference.


Previous Topic:Hyperlink in docx4j
Next Topic:AbstractPageWithNodes with default page
Goto Forum:

Current Time: Mon Sep 27 17:13:20 GMT 2021

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

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

Back to the top