Eclipse Community Forums: Eclipse Scout » JS

Home » Eclipse Projects » Eclipse Scout » JS - Java questions

Mon, 29 March 2021 11:26

Eclipse User

Hello..

I am diving in JS development.. I managed to show heatmap field, send events to Java using this.trigger and this.send method and catch events in handleUiEvent in JsonHeatmapField.. Now I would like to create component on my own and have some questions.

1. How to trigger event from Java to JS?
I saw that some events can be catched on adapter in onModelAction method? Is that right?

Also do I need to create facade class when sending events from browser JS to Java?

2. Where is best to init jQuery plugin on MyField.js, on render method or init or somewhere else? How to include jQuery plugin that is not using es6 module structure? Do I need to include jQuery also? Some example?

3. _renderMyProperty is called every time when property is set in Java. But when property has same value, render is not triggered. How to force it to trigger? Is setPropertyAlwaysFire an option?

4. I am trying to create text editor component using some jquery plugin like summernote.
I need to extends AbstractValueField, create field with some class and init plugin, right? Can you show example how to init and include jquery plugin?
StringField.js is best example to follow in order to make text editor field, right?

Thank you

Re: JS - Java questions [message #1839866 is a reply to message #1839827]

Tue, 30 March 2021 10:48

Eclipse User

Hi Luka

If you work with Scout Classic the HeatmapField is the right place to look how custom components are done, as it is a show-case built for exactly that purpose ;-)

1. Events to JS are triggered in the JSON layer. See JsonHeatmapField / addActionEvent. Generic Property Change Events are registered in the #initJsonProperties method (for instance the PROP_VIEW_PARAMETER).

I'd recommend to stick with the UIFacade pattern used in every Scout widget, for instance the IHeatmapFieldUIFacade. It delivers additional security in case someone fiddles with your client side JS code and enables a button which should not be clickable. The UI facade would ignore the click event, because on the server side the widget is still disabled.

2. Don't use an additional jQuery library or instance. Scout already uses jQuery internally. Stick with these concepts. Every widget should only deal with the DOM controlled by the widget itself. Check HeatmapField.js#render. The element created the this.addContainer makes the this.$container property, which is a jQuery selector. Which means it provides the whole jQuery API, you can do this.$container.find('.foo'), for instance.

3. If you stick with the Scout concept there should be no need to render a property when the property has not changed. Why should you do that? The initial state of the property should be rendered in the #render function, when the value of that property changes, the renderPropertyXyz function is automatically called by the framework.

4. Implementing a Rich Text Editor means a lot of work. I've talked about this before in this thread. Basically you'd start by extending (Abstract)BasicField.

Cheers
André

Re: JS - Java questions [message #1839868 is a reply to message #1839866]

Tue, 30 March 2021 11:06

Eclipse User

Hello André,

thank you for your answers and time.

On all examples I can see, Leaflet is ES6 module, ChartJs is ES6 module.

Please can you answer me is it possible to include jQuery plugin in MyField.js and how to import it if it is possible? Or I can use only plugins using ES6 modules?

Thank you

Re: JS - Java questions [message #1839869 is a reply to message #1839868]

Tue, 30 March 2021 11:24

Eclipse User

Hello Mr Robot

I don't have any experience with jQuery plugins. So I cannot say if they're ES6 compatible out of the box (which would simplify things).

I'd check if there's a NPM module for that plugin. Add the module for that plugin to your package.json and make an import for that plugin somewhere, probably in the [app].js of your UI module.

If there's no NPM module, you could put the plugin.js into the WebContent folder and request it from your index.html.

If you're stuck with that, you should probably check StackOverflow and search for "ES6 jquery", since this is a topic which is not directly related to Scout.

Hope that helps,
André

[Updated on: Wed, 31 March 2021 02:27] by Moderator

Re: JS - Java questions [message #1839872 is a reply to message #1839869]

Tue, 30 March 2021 13:10

Eclipse User

Thank you André! I will try something.

Previous Topic:	Chartfield in Classic Scout Application
Next Topic:	Error java.sql.SQLException: No suitable driver found for jdbc:mysql:XXXXXXXXXXXX

Goto Forum:

-=] Back to Top [=-

Current Time: Tue Jul 01 06:16:55 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter