Javascript Vaadin7 jQuery用户界面集成

Vaadin7支持自定义javascript。但我的问题是，如果我们想将jQueryUI与vaadin7集成，我们如何添加jQueryUICSS文件。目前@Javascript只支持添加Javascript。如果我们想添加css，我们必须将其添加为sass样式。

要将jQuery（或任何其他javascript库）添加到Vaadin 7应用程序，请执行以下简单步骤：

首先，使用您喜欢的IDE或Vaadin maven原型（或两者）创建一个Vaadin项目。创建一个新类，该类扩展自

VaadinServlet

，并

覆盖
servletilized
方法：

import javax.servlet.ServletException;

import com.vaadin.server.BootstrapFragmentResponse;
import com.vaadin.server.BootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import com.vaadin.server.ServiceException;
import com.vaadin.server.SessionInitEvent;
import com.vaadin.server.SessionInitListener;
import com.vaadin.server.VaadinServlet;

public class TestJqueryVaadinServlet extends VaadinServlet {
   @Override
   protected void servletInitialized() throws ServletException {
      super.servletInitialized();
      getService().addSessionInitListener(new SessionInitListener() {
         @Override
         public void sessionInit(SessionInitEvent event) throws ServiceException {
            event.getSession().addBootstrapListener(new BootstrapListener() {
               @Override
               public void modifyBootstrapPage(BootstrapPageResponse response) {
                  // With this code, Vaadin servlet will add the line:
                  //
                  // <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
                  //
                  // as the first line inside the document's head tag in the generated html document
                  response.getDocument().head().prependElement("script").attr("type", "text/javascript").attr("src", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
               }

               @Override
               public void modifyBootstrapFragment(BootstrapFragmentResponse response) {}
            });
         }
      });
   }
}

现在可以通过向组件或扩展类添加@StyleSheet或@JavaScript注释来完成将样式表或JavaScript文件包含在外接程序中或作为应用程序的一部分。在框架初始化客户端组件或扩展之前，每个注释都会获取一个字符串列表，其中包含指向页面上应加载的资源的URL

URL可以是完整的绝对URL（如“”）或相对URL（如“redbutton.css”）。相对URL被转换为一个特殊的URL，该URL将从定义类所在的Java包下载文件。这意味着类com.example.redbutton上的@StyleSheet（{“redbutton.css”}）将导致类路径上的文件com/example/redbutton.css加载到浏览器中@JavaScript的工作方式完全相同

#!java
@StyleSheet("redbutton.css")
public class RedButton extends NativeButton {
    public RedButton(String caption) {
        super(caption);
        addStyleName("redButton");
    }
}

在这个简单的示例中，RedButton组件只是添加了一个

redButton

将样式名称设置为法线

NativeButton

。redbutton.css与redbutton.java位于同一文件夹中，包含以下内容：

#!css
.redButton {
    background-color: red;
}

这一新机制使得将样式表或JavaScript文件与附加组件一起包含并在使用附加组件时自动加载到浏览器中变得非常容易

第二种也是我最喜欢的方式：

您还可以使用@Stylesheet和@Javascript注释。这要简单得多

@StyleSheet({
/*
* JQuery UI
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/css/ui-darkness/jquery-ui-1.9.2.custom.min.css",
})

@JavaScript({ 
/*
* JQuery
*/
"vaadin://jquery/jquery-1.11.1.min.js",

/*
* JQuery UI 
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js",
})

public class MyUI extends UI {
...
}

要将jQuery（或任何其他javascript库）添加到Vaadin 7应用程序，请执行以下简单步骤：

首先，使用您喜欢的IDE或Vaadin maven原型（或两者）创建一个Vaadin项目。创建一个新类，该类扩展自
VaadinServlet
，并
覆盖
servletilized
方法：

import javax.servlet.ServletException;

import com.vaadin.server.BootstrapFragmentResponse;
import com.vaadin.server.BootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import com.vaadin.server.ServiceException;
import com.vaadin.server.SessionInitEvent;
import com.vaadin.server.SessionInitListener;
import com.vaadin.server.VaadinServlet;

public class TestJqueryVaadinServlet extends VaadinServlet {
   @Override
   protected void servletInitialized() throws ServletException {
      super.servletInitialized();
      getService().addSessionInitListener(new SessionInitListener() {
         @Override
         public void sessionInit(SessionInitEvent event) throws ServiceException {
            event.getSession().addBootstrapListener(new BootstrapListener() {
               @Override
               public void modifyBootstrapPage(BootstrapPageResponse response) {
                  // With this code, Vaadin servlet will add the line:
                  //
                  // <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
                  //
                  // as the first line inside the document's head tag in the generated html document
                  response.getDocument().head().prependElement("script").attr("type", "text/javascript").attr("src", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
               }

               @Override
               public void modifyBootstrapFragment(BootstrapFragmentResponse response) {}
            });
         }
      });
   }
}

现在可以通过向组件或扩展类添加@StyleSheet或@JavaScript注释来完成将样式表或JavaScript文件包含在外接程序中或作为应用程序的一部分。在框架初始化客户端组件或扩展之前，每个注释都会获取一个字符串列表，其中包含指向页面上应加载的资源的URL

URL可以是完整的绝对URL（如“”）或相对URL（如“redbutton.css”）。相对URL被转换为一个特殊的URL，该URL将从定义类所在的Java包下载文件。这意味着类com.example.redbutton上的@StyleSheet（{“redbutton.css”}）将导致类路径上的文件com/example/redbutton.css加载到浏览器中@JavaScript的工作方式完全相同

#!java
@StyleSheet("redbutton.css")
public class RedButton extends NativeButton {
    public RedButton(String caption) {
        super(caption);
        addStyleName("redButton");
    }
}

在这个简单的示例中，RedButton组件只是添加了一个

redButton

将样式名称设置为法线

NativeButton

。redbutton.css与redbutton.java位于同一文件夹中，包含以下内容：

#!css
.redButton {
    background-color: red;
}

这一新机制使得将样式表或JavaScript文件与附加组件一起包含并在使用附加组件时自动加载到浏览器中变得非常容易

第二种也是我最喜欢的方式：

您还可以使用@Stylesheet和@Javascript注释。这要简单得多

@StyleSheet({
/*
* JQuery UI
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/css/ui-darkness/jquery-ui-1.9.2.custom.min.css",
})

@JavaScript({ 
/*
* JQuery
*/
"vaadin://jquery/jquery-1.11.1.min.js",

/*
* JQuery UI 
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js",
})

public class MyUI extends UI {
...
}