Eclipse Community Forums: Eclipse Scout » JS

Help

Home

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

Show: Today's Messages :: Show Polls :: Message Navigator

JS - Java questions [message #1839827]

Mon, 29 March 2021 15:26

Luka Cavic

Messages: 47
Registered: August 2014

Member

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

Report message to a moderator

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

Tue, 30 March 2021 14:48

Andre Wegmueller

Messages: 204
Registered: September 2012
Location: Baden-Dättwil, Switzerla...

Senior Member

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é

Eclipse Scout Homepage | Documentation | GitHub

Report message to a moderator

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

Tue, 30 March 2021 15:06

Mr Robot

Messages: 72
Registered: March 2020

Member

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

Report message to a moderator

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

Tue, 30 March 2021 15:24

Andre Wegmueller

Messages: 204
Registered: September 2012
Location: Baden-Dättwil, Switzerla...

Senior Member

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é

Eclipse Scout Homepage | Documentation | GitHub

[Updated on: Wed, 31 March 2021 06:27]

Report message to a moderator