Import .JS file in custom layout

Hello !

I want to import a .JS file in my customlayout html file. This doesn’t work (my-file.html) :

<div class="v-panelexpandable-header" onClick="hideDisplayPanel();">
	<div location="title" class="v-panelexpandable-title"></div>
<div location="content" class="v-panelexpandable-content"></div>

<script type="text/javascript">
	function hideDisplayPanel()

Thanks for your help.

Sorry for the up. Has no one ever met this problem ?

If someone had an answer, it would be my best Christmas gift :wink: !

Don’t know if this applies to your use case but the normal ways to add JS to your application is through extending ApplicationServlet and overriding writeAjaxPageHtmlHeader() - or then by calling window.executeJavaScript(script);.

More info

Hi Jens !

Actually, I have a custom layout with several DIVs. When I click on one of them, I want to extend / collapse its content without calling the server (so with javascript).
The javascript code is quite big so it is not really “clean” if I embed it in the custom layout’s HTML file.

That’s why I was wondering how to call javscript from my custom layout.

I wonder if u figured this out…I have the same problem :blink:


Jens already gave the best answer
; if you want to have your javascript library imported once into the browser, you must override the writeAjaxPageHtmlHeader method in the ApplicationServlet.

I’ve never tried to import or write javascript in a CustomLayout; off of the top of my head, I can’t see any reason why it wouldn’t work.



I created a GWT component and used JSNI to import external JS library.
But i never tried the way suggested here, I’ll give it a shot.



com.vaadin.terminal.gwt.client.ui.VCustomLayout has some extra logic for script block handling (see method extractBodyAndScriptsFromTemplate).
The scripts are extracted and evaluated separately (maybe because it doesn’t work with setInnerHTML).

I managed to define a javascript function within a custom layout template using the following approach:

  window.myFunction = function(arg1, arg2) { ... } 

Just using

  function myFunction(arg1, arg2) { ... } 

inside the template doesn’t sem to work because the script-src is executed via eval().

I think it’s not an answer. Custom Layout has very limited functionality and as for me this is a bug. If Custom Layout could parse HTML and add there Vaadin Components it should also could add some CSS that this HTML page want to use!