Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Eclipse Scout » JS - Java questions
JS - Java questions [message #1839827] Mon, 29 March 2021 15:26 Go to next message
Luka Cavic is currently offline Luka CavicFriend
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
Re: JS - Java questions [message #1839866 is a reply to message #1839827] Tue, 30 March 2021 14:48 Go to previous messageGo to next message
Andre Wegmueller is currently offline Andre WegmuellerFriend
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
Re: JS - Java questions [message #1839868 is a reply to message #1839866] Tue, 30 March 2021 15:06 Go to previous messageGo to next message
Mr Robot is currently offline Mr RobotFriend
Messages: 68
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
Re: JS - Java questions [message #1839869 is a reply to message #1839868] Tue, 30 March 2021 15:24 Go to previous messageGo to next message
Andre Wegmueller is currently offline Andre WegmuellerFriend
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

Re: JS - Java questions [message #1839872 is a reply to message #1839869] Tue, 30 March 2021 17:10 Go to previous message
Mr Robot is currently offline Mr RobotFriend
Messages: 68
Registered: March 2020
Member
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:
  


Current Time: Wed Feb 21 13:09:46 GMT 2024

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

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

Back to the top