image file for javascript component?

Vaadin 6 / 7 / 8
1

Hi,

So I’ve recognized that javascript files for integration can just be mixed with java source files, but still don’t understand how resource files needed by the javascript should be handled. There have been a couple of posts about this, but they seem to require an understanding of Vaadin internals which I don’t possess and are also rather inconclusive. To be more concrete,
my javascript inserts some html referencing an image, , and I don’t know where to put arrow.png. I have tried putting it in the package source directory and referencing it in the @Javascript annotation, but this doesn’t work.

Thanks in advance,

Matthew Fleming

2

Did you reference the image before you referenced the html or the other way around?
Also you may need to root to the image in a different way, like for example “yourapp/APP/PUBLISHED/arrow.png”.

3

I’m not sure I understand your question. I reference the image in the @Javascript annotation to the AbstractJavaScriptComponent subclass, i.e. @Javascript(“mylibrary.js”,“arrow.png”, etc), and then load it with javascript that inserts html, ie


mylibrary.MyComponent = function (element) {
	
	element.innerHTML =
		"<div id='playground'>" +
		"<div id='palette'></div>" +
	    "<img id='arrow1' src='arrow.png'/>" +
	    "</div>";		
    
};

which is just modeled on the example in the manual.

With respect to rooting the image elsewhere, could you clarify a bit as to what this would entail? I assume if I did this, I would add a path to the reference to the image file in the @Javascript annotation, i.e. @Javascript(“mylibrary.js”,“/path/components/arrow.png”, etc) but I don’t understand the relationship between the path as specified in the @Javascript annotation and the directories in my Eclipse project.

Thanks very much for your help with this. It could be that the answers to these questions should be perfectly obvious but I’ve not done anything like this before.

Matthew Fleming

4

The path of the image inside the JavaScript annotation should be in regards to the position of the Java Class in the directory. So if the picture is in the same folder you can just use “arrow.png” (which i would recommend at least for testing).

The Files inside the annotation will later be available at localhost:8080/yourapp/APP/PUBLISHED/ so when you later want to include it in your html you should use src=“./APP/PUBLISHED/arrow.png”

5

Thanks very much, but it hasn’t quite worked out as you suggest it should. I can access the image file at localhost:8080/myapp/APP/PUBLISHED/arrow.png, but when I include it in my html as src=“./APP/PUBLISHED/arrow.png”, it is not found. Specifically, in my javascript library (again following the example in the javascript section of the manual), I have:


var mylibrary = mylibrary || {};

mylibrary.MyComponent = function (element) {
	
	element.innerHTML =
		"<div id='playground'>" +
		"<div id='palette'></div>" +
	    "<img id='arrow1' src='./APP/PUBLISHED/arrow.png'/>" +
	    "</div>";		
    
};

I have tried various permutations of the path without success.

On an unrelated (or perhaps not) note, I have noticed a discrepancy between the performance of my application when run with Firefox and Chrome. With Firefox, the initial UI (which includes the javascript component) fails to load completely, and the browser address tab shows (“Connecting…”). On Chrome this does not happen, and the UI fully loads. I have not noticed any problems with Firefox and Vaadin applications that do not include my javascript component.

Thanks again, very much.

Matthew Fleming

6

Actually it is found and does work. I just had a caching issue. Sorry for the confusion.

I would still appreciate an explanation for this issue, if possible. Odd that it works with Chrome but not Firefox.

7

So is it the Browser who is showing the connection thing or is is it the loading spinner of the Vaadin app?
Do you get any errors in the console of your IDE or in the console of the Browser (Developer Console or FireBug)?
Did you try removing the JS Component from the Layout and then see if it loads after that?

I myself can’t see any problems with Js Components and Firefox in my App.

8

The UI now loads, but the “Connecting …” message still appears. It is displayed as the label for the browser’s tab (where the app’s url should be). The Vaadin debug console doesn’t show any errors. (The only line in the debug trace that raises any question is “UIDL: undefined”, but my impression is that this is not an error.) Firebug shows the following error: “SyntaxError: illegal character arrow.png (line 1)”. I don’t know how to interpret this, but thought it might suggest the Firefox PNG codec didn’t like my arrow.png file for some reason. But I don’t get the same message when I load the image file into Firefox directly, at http://localhost:8080/VFU2/APP/PUBLISHED/arrow.png, so I guess not. I don’t get the “Connecting …” problem when I leave out the javascript component.

Thanks again,

Matthew Fleming

9

Does it say in which file the illegal character exception occurs? I don’t think that the actual picture is the problem i think it’s more likely that you have arrow.png somewhere where it syntax-wise doesn’t work (in line 1 of some static or generated script).

10

The Firebug output seems to suggest that arrow.png is itself the problem, but when I substitute another png file (a sample downloaded from the web), I get the same error, so I’m sure you’re right. But I don’t know why my script should be a problem. Here it is:


var mylibrary = mylibrary || {};

mylibrary.MyComponent = function (element) {
	
	element.innerHTML =
		"<div id='playground'>" +
		"<div id='palette'></div>" +
	    "<img id='arrow1' src='./APP/PUBLISHED/arrow.png'/>" +
	    "</div>";		
    
};

This is modeled on the javascript example in the manual and doesn’t cause problems as standalone html or as a javascript component with the Chrome browser.

Thanks again, and sorry to be such a nuisance.

Matthew Fleming

11

Hi,

I’m still having problems with this and I’d really appreciate some assistance. I am getting errors in the javascript console of the form:

Unexpected SyntaxError: Unexpected Token: ILLEGAL :8080/VFU/APP/PUBLISHED/arrow_audio.PNG

It turns out that these errors originate with the annotation on my AbstractJavaScriptComponent, which looks like this:

@JavaScript({"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
    "jquery.jsPlumb-1.5.2.js",
    "VisualProgrammingCanvas.js", "mylibrary.js", "arrow_audio.png", "arrow_branch.png",
    "arrow_collect.png", "arrow_information.png", "arrow_multi_multi.png", "arrow_multi_one.png",
    "arrow_picture.png", "arrow_text.png", "arrow_slider.png"})
@StyleSheet({"http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css","mystyle.css"})
public class VisualProgrammingCanvas extends AbstractJavaScriptComponent implements ControlWrapperForQuestion {

That is, I get the error if this annotation is in place, even if I have removed all reference to the images from my html, js, and css. Evidently the annotation is mangling the image file name into something which javascript doesn’t like, and also generating some javascript which creates the actual error.

Although I listed only one error above, there is one for each of the arrow*.png files listed in the annotation.

I am developing with Eclipse under Linux, and the “Unexpected SyntaxError…” appears in the javascript console of the Chromium browser. With Firefox, the text “Connecting…” appears in the tab where the URL should be, and the images don’t load, but I don’t see any errors in Firebug’s error console.

Strangely, it mostly worked in a smaller Vaadin program that I was using to develop my Javascript component, but now that I am integrating the component into the project for which it was intended, it doesn’t work at all.

I’d really appreciate some help with this – I’m completely stuck.

TIA,

Matthew Fleming