Load jQuery inside Custom Layout in Vaadin 7

Vaadin 6 / 7 / 8
1

How do you load jQuery and external js file inside custom layout ?

For example, I have following layout structure:

[b] MyExampleProject VAADIN themes myexampleproject img js -init.js layouts -mylayout.html [/b] Of course I can add something like this:

<script type="text/javascript" src="./js/init.js"></script>

Here is what Firebug reports:

Request URL:
http://localhost:8080/MyExampleProject/APP/PUBLISHED/js/init.js
FAILED TO LOAD RESOURCE: THE SERVER RESPONDED WITH STATUS OF 404

2

Custom Layout wasn’t made to be used with Javascript. It actually has code which blocks Javascript in the html template so you might run into more problems then this.

To solve this problem though you could just use the @Javascript annotation in e.g. your UI class to load the Js file.
The annotation will load any js file mentioned in its brackets into /APP/PUBLISHED. This is mainly used in Javascript components and Extensions but you might be able to use it with Customlayouts too. For more information on the annotation just google it. There should be plenty out there especially in the wiki artikles about js ext. and comp.

Btw: the annotation works best if the js file is in the same folder/package as the class that has the annotation.

3

Hi Marius,

Thanks for your response. I have put the @Javascript annotation, and I can easily play around with jQuery in normal settings (without custom layout). However, with the custom layout as you said, it is not so easy to play with jQuery, as it seems with Vaadin?

The task that I am currently doing is a bit challenging because it requires AngularJS app to be included in Vaadin and some other legacy codes also embedded inside it too.

The good part is that AngularJS app works perfectly with Vaadin 7. However, I am struggling to play around with Custom Layout and jQuery features, still.

4

Depending on what you’re trying to do with angularjs and jQuery i would recommend creating a custom Javascript Extension or a Javascript Component. If what you’re trying to do is some kind of layout from angularjs with jquery methods you should go towards a JS component.
When integrated they can be used almost exactly like Vaadin layouts on the server side.

If you really want to stick to CustomLayouts remember:

  • blocks will most likely be cut out from your html but something like onclick="alert('Test')" won't
  • To then add jQuery you can either create a seperate extension and extend the layout or use something like Javascript.addFunction() or Javascript.execute()
  • all JS resources need to be published to be available on the server