Vaadin7 jQuery UI 整合

Question

Vaadin 7 支持自定义 javascript。但我的问题是，如果我们想将 jQuery-ui 与 vaadin7 集成，我们如何添加 jQuery-ui css 文件。目前@Javascript 仅支持添加 javascript 。如果我们想添加 css，我们将其添加为 sass 样式。

Answer 1

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

首先使用您最喜欢的 IDE 或 vaadin maven 原型（或两者）创建一个 Vaadin 项目。创建一个新的 class 扩展自 VaadinServlet，override servletInitialized 方法：

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) {}
            });
         }
      });
   }
}

然后在您的 web.xml 中添加对 servlet 的引用或使用 @WebServlet 注释对 class 进行注释。

然后创建您的 jQuery 片段并使用 Java 脚本 class 调用它，例如：

public class MyVaadinUI extends UI {
   @Override
   protected void init(VaadinRequest request) {
      final VerticalLayout layout = new VerticalLayout();
      layout.setMargin(true);
      setContent(layout);

      Label label = new Label("This will fade-out once you click the button");

      Button button = new Button("Hide Label");
      button.addClickListener(new Button.ClickListener() {
         public void buttonClick(ClickEvent event) {
            JavaScript.getCurrent().execute("$('.v-label').animate({opacity: 0.0}, 3000);");
         }
      });
      layout.addComponent(label);
      layout.addComponent(button);
   }
}

现在可以通过添加@StyleSheet 或@JavaScript 将样式sheets 或JavaScript 文件包含在您的加载项中或作为应用程序的一部分组件或扩展的注释 class。在框架初始化客户端组件或扩展之前，每个注释都包含一个字符串列表 URL 到应该加载到页面上的资源。

URLs 可以是完整的绝对 url（例如“https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”）或相对 URLs（例如 "redbutton.css"）。相对 URL 转换为特殊 URL，它将从定义 class 所在的 Java 包下载文件。这意味着例如class com.example.RedButton 上的@StyleSheet({"redbutton.css"}) 将导致加载 class 路径上的文件 com/example/redbutton.css浏览器。 @Java脚本的工作方式完全相同

#!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;
}

这种新机制使得在加载项中包含样式 sheet 或 Java脚本文件变得非常容易，并在使用加载项时自动将它们加载到浏览器中。

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

您还可以使用@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 {
...
}

Vaadin7 jQuery UI 整合

Vaadin7 jQuery UI integration

javascript

jquery

jquery-ui

vaadin

vaadin7