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项目.创建一个新的类,从扩展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注释注释该类.

然后创建您的jQuery代码段并使用JavaScript类调用它,例如:

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

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

URL可以是完整的绝对URL(例如" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ")或相对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 {
...
}