Javascript and Vaadin Tocuhkit

Hi

I am trying to load a simple javascript file which has a alert to my touchkit application.

In my form there are textfields and buttons. When I click on the textfield text change event I want to call the showMessage() function in my javascript file.

I added the below script to my form.
@JavaScript({ “//resources//example.js”})

And then simply called the Page.getCurrent().getJavaScript().execute(“showmessage()”); in the text change event.

But it doesnt seem to call thefunction in the text change event?

Any help much appreciated.

Hi,

Your approach definitely sounds like it should work. Have you checked if your JavaScript file gets loaded at all? Open the developer tools in your browser and make sure you’re able to call the method manually from the console. If that works, have a look at the client-side logs and try to find what’s causing the problem.

What list are you talking about? A Vaadin ListSelect component? Depending on what you’re trying to do, you could retrieve the values on the server and pass them into the execute statement there, or you could traverse the DOM using JavaScript and read the values from the option elements.

You could try something along the lines of:

JSONArray json = new JSONArray();
for (Object itemId : listSelect.getItemIds()) {
    json.put((String) itemId);
}
Page.getCurrent().getJavaScript().execute("yourJsMethod(" + json.toString() + ")");

TextField only sends updates to the server after it receives a change event on the client side. This is to avoid unnecessary server roundtrips. Basically, you have three options here:

  1. After setting the value like you did, manually focus and blur the field, like so:
var field = document.getElementById('userIdField');
field.value = userId;
field.focus();
field.blur();
  1. Manually fire the change event:
var field = document.getElementById('userIdField');
field.value = userId;
if ('fireEvent' in field) { // IE8
    field.fireEvent('onchange', false, true);
} else {
    field.dispatchEvent(new Event('change'));
}
  1. Export some Java methods from GWT to JavaScript and use the VTextField API directly from there. For this one, take a look at the
    JSNI documentation
    .

Out of these three, I guess the best choise would be #2, especially if you don’t need to support IE8… which I guess you wouldn’t, since you’re using TouchKit anyway. #1 could have some unwanted side effects if you rely on the focus being in a certain place, and #3 is a bit involved if you aren’t familiar with GWT already.

One more thing, it works when I place the javascript file in the same place as the java class as below.
@JavaScript(“example.js”)

What if I want to specify a relative path ,

Example - If I place my javascript file in the following location - vaadin/javascript/

How should I reference it from my class?

Have a look at
this thread
.

I still cannot load it from the relative path

It loads example.js file to the APP/ folder but not to the APP/PUBLISHED folder

How are you referencing the file in your @JavaScript annotation? Relative URLs are interpreted as published files so they are referenced by the client as something like http://my.vaadin.app/APP/PUBLISHED/file.js. Those files are then served by Vaadin’s servlets. If your file is
not
a published file, but is instead served from another path,
and
you still want to use relative paths to reference it, you have to prepend the URL in your @JavaScript annotation with “…/…” to traverse up to the base URL of your application.

Two things:

  1. The URL in the annotation should start with “…”, not a slash, otherwise you end up with two consecutive slashes in the absolute URL.
  2. You should use forward slashes; these are URLs, not filesystem paths–the backslash is a Windows-specific directory separator.

So, instead of @JavaScript(“........\webapp\vaadin\example.js”), try @JavaScript({ “…/…/…/…/webapp/vaadin/example.js” }) …assuming that’s the correct number of “…/”. You can use your browser’s dev tools to debug the URL.

Do you have a reason for placing the file in that exact directory though? Published files are served from the same directory as the class referencing them, so if you were to place your example.js there, you could just do @JavaScript({ “example.js” }).

Hi

One more thing when I add the javascript to the same location and when I do a maven build it seems that the file is not deployed and not included in the war file. Any reasons?

It must be something in your Maven pom file. I just tested building a war with Maven using the TouchKit archetype as the basis and my custom JavaScript files got included just fine. Maybe you could try doing the same and then looking at the differences between your own project setup and the archetype?

You can generate a new project using the archetype by typing this in the command-line:

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-touchkit -DarchetypeVersion=3.0.0 -DgroupId=example.com -DartifactId=myproject -Dversion=0.1.0 -Dpackaging=war

Change archetypeVersion to whichever version of TouchKit you are using, e.g. 4.0.0.alpha2 for the latest alpha release. Or you can use the Maven Eclipse plugin: select File → New → Project… → Maven project, and go from there.

Yes it does.

I have already created a vaadin touchkit using the
com.vaadin.addon
vaadin-touchkit-agpl
4.0-SNAPSHOT

<groupId>com.vaadin</groupId>
        <artifactId>vaadin-server</artifactId>
        <version>${vaadin.version}</version>

and the with other necessary dependencies.

But my javascript files works fine locally but doesnt get added to the classes folder when I do a build.

Did you try creating a new project using the archetype like I suggested? If it works there, comparing the POMs could give you a hint as to what’s going wrong in your project. If it doesn’t, at least it’ll be a clear indication that the problem is somewhere else.

The POMs are almost identical. There is no difference.

And does it work correctly with the archetype?

No it doesnt. Is there anyway to include the non java files into into the package when creating the war file. In otherwords it seems that maven is ignoring all the files other than the java files. if there is some sort of configuration in maven war plugin when creating the war to include all files into the package it will work I assume.

        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>${vaadin.version}</version>
            <configuration>
                <extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
                <webappDirectory>${basedir}/src/main/webapp/VAADIN/widgetsets</webappDirectory>
                <hostedWebapp>${basedir}/src/main/webapp/VAADIN/widgetsets</hostedWebapp>
                <noServer>true</noServer>
                <!-- Remove draftCompile when project is ready -->
                <draftCompile>false</draftCompile>
                <compileReport>true</compileReport>
                <style>OBF</style>
                <persistentunitcachedir>${project.build.directory}</persistentunitcachedir>
                <deploy>${project.build.directory}/gwt-deploy</deploy>
                <strict>true</strict>
                <runTarget>http://localhost:8080/</runTarget>
            </configuration>

Could you attach your full POM file here so I can have a look at it? Also, how are you building the WAR file? Are you calling mvn package from the command-line or using an IDE—or doing something else entirely? The JavaScript files should be included in your WAR file automatically, so this sounds very strange.