Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » 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

Kevin

[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: 126
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 --> AbstractMyField.java)
  • The adapter that translates data and events from the model format (Java object) to the UI format (JSON). (*.ui.html module --> JsonMyField.java)
  • 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:
Demo: https://scout.bsi-software.com/widgets/?dl=widget-heatmapfield
Source: https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/tree/releases/6.0.x/code/widgets

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

Regards,
Beat
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.

Regards

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


Current Time: Tue Jul 07 17:16:08 GMT 2020

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

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

Back to the top