running javascript

General
1

I was wondering lately how to execute javascript, defined in an external file, without triggering it from an event related to a Label component. So I thought it would be interesting to post this outcome…

Label objects can have html tags with script executed on event by using the CONTENT_XHTML contentmode i.e.
Label test = new Label(“<p onmouseover="alert(‘hello’);">move mouse over here…

”,Label.CONTENT_XHTML);

However it is not possible to execute a script tag directly i.e.
Label test = new Label(“”,Label.CONTENT_XHTML);

So I realised that it is possible to execute javascript say on load of a Window or Panel, other than creating some kind of a custom gwt-vaadin utility component, by taking advantage of the customlayout :smiley:

Just by placing it within the head or body tags of a custom layout and leaving the rest empty. Then simply use it in a dummy container and add it to wherever and whenever you want this to be executed on load of the parent container.
i.e.
layout name: custom_layout_with_js.html
layout content:

CustomLayout customLayout = new CustomLayout(“custom_layout_with_js”);
addComponent(customLayout);

This way it is possible to manipulate the head of the document and import / add / integrate js files as mentioned here,
http://vaadin.com/forum/-/message_boards/message/16785

as well as to manipulate the html dom on load,for example in order to add mouseover funcitonality on a textfield .

2

I recently investigated the same topic.

I found two ways of invoking external JavaScript directly (inline) from Vaadin: Notification and CustomLayout. I know that both of these are more or less “wrong way to do this” and IRL you should actually have some kind of component/widget for this. Maybe framework could implement this?
Vote for this at UserVoice

Anyway, here are my hacks. Test and read more here:

http://uilder.virtuallypreinstalled.com/run/Calling_External_JavaScript/

3

While customcomponent method worked for me, the notification did not.

Where did this work (browser, vaadin version)?

.showNotification("<script>alert('Hi there!');</script>");

Imo this could be considered a bug - it should not work anywhere.

4

At least Firefox 3 seems to work. IE did not, but I don’t know why. Agreed that neither of these is a very good way to invoke JavaScript. I vote for a simple built-in component. :slight_smile:

5

Don’t like the notification hack, it also generates an artifact (an empty image of the notification in the background i.e. the test you provided ran in chrome).

The custom layout hack is very effective and simple to implement.
However a simple built-in component dedicated for this job only would be cleaner. I backed up your vote :slight_smile:

6

Most probably know this already, and it may be a few steps too many for some, but gwt components can embed native javascript code in them. You can do a native function which can then be called at from another parts in the component, with button clicks, mouseovers etc. the function would look something like this

private native void doJsStuff()/*- alert("hello"); -*/;

nwo you can call doJsStuff() from anywhere at the Vaadin components’ client side, or even attach it to take commands from the server side.

7

Created a ticket to disable injection in FF:
http://dev.vaadin.com/ticket/3378

8

@christos melas, in which directory should I put this custom_layout_with_js.html in order for it to be loaded in the main page?
I have a vaadin project, and added your sample html file under /WebContent/WEB-INF/. When I run this project, I get a message

Layout file layouts/custom_layout_with_js.html is missing. Components will be drawn for debug purposes. Any idea/tip is appreciated!
Regards, Xichuan.

9

Aha, just got it, this html file should be put under /WebContent/VAADIN/themes/{project-name}/layouts/ .

Have fun, :slight_smile:
Xichuan

10

Is that possible to use a label with javascript behind as a timer for logedin user in the page? My question is that how can I use client side timer in vaadin components?