| [neon] Build custom UI element [message #1738023] |
Fri, 15 July 2016 07:19  |
 Kevin Kirn
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  |
|
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%  ). 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.
Regards,
Beat
|
|
|
|
Powered by
FUDForum. Page generated in 0.03704 seconds
] 
Search
Help
Register
Login
Home
