简体   繁体   English

如何在vaadin中集成javascript(例如OpenStreetMap)?

[英]How to integrate javascript in vaadin (eg OpenStreetMap)?

Is it possible to create javascript elements like OpenStreetMap or jQuery inside a vaadin application? 是否可以在vaadin应用程序中创建像OpenStreetMapjQuery这样的javascript元素?

Because vaadin websites are created by programming in java and letting the compiler autocreate the DOM and JavaScript out of it? 因为vaadin网站是用java编程创建的,让编译器自动创建DOMJavaScript吗?

So, is it possible at all? 那么,它有可能吗?

You can create such an integration with AbstractJavaScriptComponent 您可以使用AbstractJavaScriptComponent创建这样的集成

The basic idea here is to subclass this class, annotate with @JavaScript to pull in the needed JS libs. 这里的基本思想是子类化这个类,用@JavaScript注释以@JavaScript所需的JS库。 Then write at least a global function, that sets up your lib in the DOM (you will have a <div> at your disposal). 然后编写至少一个全局函数,在DOM中设置你的lib(你将拥有一个<div> )。 Your component can hold state, the server side can call defined functions on the client (while sending eg state) and the client can call server functions (params passed as JSON). 您的组件可以保持状态,服务器端可以调用客户端上定义的函数(同时发送例如状态),客户端可以调用服务器函数(作为JSON传递的参数)。

The Wiki has an example how to include such a component Wiki有一个例子,说明如何包含这样的组件

There are some easy and cheap solutions which are not the best in the long term, but they may be enough: 有一些简单而廉价的解决方案从长远来看并不是最好的,但它们可能就足够了:

1) 1)

If you just want to render some html you cant insert it as the value of a label and change its Content Mode to html. 如果您只想渲染一些html,则无法将其作为标签的值插入,并将其内容模式更改为html。

https://vaadin.com/book/-/page/components.label.html https://vaadin.com/book/-/page/components.label.html

2) 2)

If you just want to execute some javascript code after a ui event you can call Javascript.getCurrent().execute(javascriptCode). 如果你只想在ui事件后执行一些javascript代码,你可以调用Javascript.getCurrent()。execute(javascriptCode)。

https://vaadin.com/book/vaadin7/-/page/advanced.javascript.html https://vaadin.com/book/vaadin7/-/page/advanced.javascript.html

Notice that if you are trying to do some re-usable components, this is not the right answer 请注意,如果您尝试执行一些可重用的组件,这不是正确的答案

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM