Javascript NON-visual Component

Support
#1

Is it possible to create non visual javascript components ?

I have a javascript library developed for other web applications that handle communication with a desktop agent phone application.
The library does not have any visual elements, just functions ( it uses socket.io ) and callbacks.

Can i use the same principles that our outlined in the documentation for visual javascript components (Using a JavaScript library - CUBA Platform. Developer’s Manual) ?
Thank you

#3

Hi, @andrea.batazzi

you just want to add your library as usual JavaScript file and use it somewhere else, am i right?

Regards,
Daniil.

#4

Yes,you’re right.
I have successfully tried to add it as a component following your guide.
But my my question is: is this the correct approach ? This library is not a “visual” component.
As a matter of fact I have met some difficulties . The library opens a socket (with socketio) connecting to the agent application when the “contact” editor form is opened.
When I close the form I expect to close the socket.
Unfortunately I haven’t been able to send state changes to the underlying javascript socket ( I tried listening to before close, and all the others on the screen controller) when closing the editor. And so every time I open the contact form I open a new socket, but the old one remains active. i have therefore put the variable in a window global,pork-arounding the problem . But it feels somewhat awkward and wanted to know if according to the experts this is the correct approach.

Thank you!

#5

OK, I understand you, here is a solution.

The first step is to build a WebJar with your library and add it as compile dependency for the web module via CUBA Studio.

The second step is to replace com.haulmont.cuba.web.sys.CubaBootstrapListener with your own implementation.

The last step is to override CubaBootstrapListener#modifyBootstrapPage method in the following way:

@Override
public void modifyBootstrapPage(BootstrapPageResponse response) {
    super.modifyBootstrapPage(response);
    
    Element head = response.getDocument().getElementsByTag("head").get(0);

    // for example: "VAADIN/webjars/mylib/0.1/lib.js"
    String pathToLib = "VAADIN/webjars/path/to/webjar/resource";
    includeScript(pathToLib, response, head);
}

Regards,
Daniil.

#6

But there is more simple way - use com.vaadin.server.AbstractJavaScriptExtension and com.vaadin.ui.JavaScript annotation.

The basic idea is that you create an extension and annotate it with @Javascript annotation, that allows you to declare some web resource dependency. Then you create this extension in the required screen and extend, for example, layout.
It’ll load your lib and you’ll be able to use it.

There are few examples on the forum. Please take a look on them and ask questions if something is not clear for you.
Example #1
Example #2
Example #3

Regards,
Daniil.

#7

Hi Danill,
I’ve taken a quick look and they all seem viable solutions. Thank you.