Javascript library loading in Vaadin

Vaadin 6 / 7 / 8 Framework UI
1

Hey,

I already build some custom vaadin components for my company. But whenever it comes to integrating some existing javascript libraries, I run into some problems, for example:
I want to integrate some javascript library( like ExtJS or YAHOO YUI).
So in my widgetset xml I add the obvious Tag, … and it almost works. When running the application the tags are appended to the html document( but in the body part), when examined via firebug.

But as soon as I want to use some of the javascript objects, that should have been inited inside the javascript libraries( “EXT” or “YUI”) it doesn’t work, because the reference isn’t set.

It seems that to for it to work, I wouldn’t have to append the .js file via the script tag but to load it manually by invoking the included content via some init method. But as you can imagine that seems rather unhandy, especially when considering maintaining the code.

So what would you suggest how I should solve the problem?

You may ask yourself: why does he want to do that? There are mainly two reasons why i would like to do that:
a.) ExtJS looks very nice( I know… bad argument)
b.) I have a project at hand, where i really could use this:
http://neyric.github.com/wireit/

Thanks,

Christoph Grotz

P.S.: Vaadin kicks ass

2

Hi,


AbstractApplicationServlet.html#writeAjaxPageHtmlHeader
If you want to include a javascript library when the initial application loads, you can override and add the appropriate element.

I’ve only tried this once (to include a quick-hack javascript file without writing a custom widget), but it worked.

Cheers,

Charles.

3

I did like you had proposed but then when I enter the page I have message:
Failed to load the widgetset:…
and page is empty

My code:

public class TDMApplicationServlet extends ApplicationServlet {

	@Override
	protected void writeAjaxPageHtmlHeader(BufferedWriter page, String title, String themeUri) throws IOException {
		super.writeAjaxPageHtmlHeader(page, title, themeUri);
		page.append("<script type=\"text/javascript\" src=\"../charts/FusionCharts.js\"/>");
	}
}

Also I changed servlet-class to this new servlet, what is wrong with that? I have to use other JS libraries

regards,
Piotr

4

Hi,

The end tag is required for the script element: use <script …> instead of <script …/>.

Otherwise, it should work that way.

If you’re a Pro Account subscriber, this topic is covered in article
#307: How do I load extra JavaScript libraries?
.

5

Unfortunately I do not have pro account but your solution works! thank you

6

Hi Charles,
Could you expand a little on your answer? I’m trying to get Invient Charts to work and need to load the JavaScript libraries. I understand the need for the ApplicationServlet, but what I don’t understand is the relationship between my existing code, which uses ‘Application’ and ‘ApplicationServlet’. When I change the base class, lots of methods are flagged as missing by Eclipse.

I’ve tried creating a stand alone ApplicationServlet instance and loading that in my Application init, I was reasonably sure it wouldn’t work, but hey, you gotta try :rolleyes:, right?

Currently none of the charts show because the highchart.js is not loading.

Thanks in advance for your help,
Anthony

7

Solved it. Details here:
https://vaadin.com/forum/-/message_boards/view_message/1175215#_19_message_1175215