我正在尝试实现一个示例应用程序,其中所有javascript(JS)和CSS文件都使用许多png文件。
我提到了很多文章,但它们无济于事。
对于所有png文件,我都会收到以下错误消息,
样本错误部分,
Jan 29, 2019 3:25:22 PM com.vaadin.server.communication.PublishedFileHandler handleRequest
WARNING: Rejecting published file request for file that has not been published: css/images/chartIcon.png
Jan 29, 2019 3:25:22 PM com.vaadin.server.communication.PublishedFileHandler handleRequest
WARNING: Rejecting published file request for file that has not been published: css/images/sunburst.png
Jan 29, 2019 3:25:22 PM com.vaadin.server.communication.PublishedFileHandler handleRequest
WARNING: Rejecting published file request for file that has not been published: css/images/treemap.png
Jan 29, 2019 3:25:40 PM com.vaadin.server.communication.PublishedFileHandler handleRequest
WARNING: Rejecting published file request for file that has not been published: css/images/sprite.png
以下是我拥有的文件夹结构,
de.qsoft.manatee.web.vaadin.myapp
de.qsoft.manatee.web.vaadin.myapp.css --> Contains all CSS files
de.qsoft.manatee.web.vaadin.myapp.fileMenu --> Contains all CSS files
de.qsoft.manatee.web.vaadin.myapp.widgets --> Contains all CSS files
de.qsoft.manatee.web.vaadin.myapp.scripts --> contains all js files
de.qsoft.manatee.web.vaadin.myapp.widgets --> contains all js files
de.qsoft.manatee.web.vaadin.myapp.colorpicker --> contains all js files
SpreadJSWidget.Java
@JavaScript({
"scripts/jquery-1.11.1.min.js",
"scripts/jquery-ui-1.10.3.custom.min.js",
"spreadjs_connector.js",
"colorpicker/colorPicker.js",
"fileMenu/fileMenu.js",
"scripts/actionmanager.js",
"scripts/app.js",
"scripts/bootstrap.min.js",
"scripts/FileSaver.min.js",
"scripts/gc.spread.excelio.12.0.5.min.js",
"scripts/gc.spread.sheets.all.12.0.5.min.js",
"scripts/gc.spread.sheets.barcode.12.0.5.min.js",
"scripts/gc.spread.sheets.charts.12.0.5.min.js",
"scripts/gc.spread.sheets.pdf.12.0.5.min.js",
"scripts/gc.spread.sheets.print.12.0.5.min.js",
"scripts/gc.spread.sheets.shapes.12.0.5.min.js",
"scripts/license.js",
"scripts/resources.js",
"scripts/ribbon-data.js",
"scripts/ribbon.js",
"scripts/sample.js",
"scripts/spreadActions.js",
"scripts/util.js",
"widgets/addChartElement/chartAddChartElement.js",
"widgets/chartColorPicker/chart-colorPicker.js",
"widgets/chartLayoutPicker/chartLayoutPicker.js",
"widgets/richText/richTextEditor.js"
})
@StyleSheet({
"colorpicker/colorPicker.css",
"css/font-awesome/css/font-awesome.min.css",
"css/bootstrap-theme.min.css",
"css/bootstrap.min.css",
"css/borderpicker.css",
"css/colorpicker.css",
"css/excel2013.css",
"css/gc.spread.sheets.12.0.5.css",
"css/gc.spread.sheets.excel2013white.12.0.5.css",
"css/insp-slicer-format.css",
"css/insp-table-format.css",
"css/inspector.css",
"css/sample.css",
"css/shapes.css",
"fileMenu/fileMenu.css",
"widgets/addChartElement/chartAddChartElement.css",
"widgets/chartColorPicker/chart-colorPicker.css",
"widgets/chartLayoutPicker/chartLayoutPicker.css",
"widgets/richText/richTextWithRichEditor.css",
})
public class SpreadJSWidget extends AbstractJavaScriptExtension
{
/**
*
*/
private static final long serialVersionUID = -804316208810859887L;
public interface ValueChangeListener extends Serializable {
void valueChange();
}
ArrayList<ValueChangeListener> listeners = new ArrayList<ValueChangeListener>();
public void addValueChangeListener(ValueChangeListener listener) {
listeners.add(listener);
}
/**
*
*/
public SpreadJSWidget() {
// TODO hari: Auto-generated constructor stub
}
/*'***************************************************************************************
* Static/Inner class members
******************************************************************************************/
/*'***************************************************************************************
* Class members
******************************************************************************************/
public void setValue(String value) {
getState().value = value;
}
@Override
protected void extend(AbstractClientConnector target) {
// TODO hari: Not Yet Implemented
super.extend(target);
}
public String getValue() {
return getState().value;
}
@Override protected SpreadJSWidgetState getState() {
return (SpreadJSWidgetState) super.getState();
}
}
我逐步尝试了以下步骤,但无法获得预期的结果,
我将所有png文件都保留在“ de.qsoft.manatee.web.vaadin.myapp.css”目录下,作为“ de.qsoft.manatee.web.vaadin.myapp.css.images” < / p>
在VAADIN文件夹下,我将所有png文件复制为“ VAADIN / css / images /”
在VAADIN文件夹下,例如“ VAADIN / themes / mytheme / img / css / images”
在VAADIN文件夹下,例如“ VAADIN / themes / mytheme / layouts / css / images”
@Theme(“ mytheme”) 公共类MyUI扩展了UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
SpreadWidget widget = new SpreadWidget();
setContent(widget);
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}
请让我知道我应该将所有png文件放在哪里。每个CSS都将图片文件引用为
http://localhost:8080/spreadjs/APP/PUBLISHED/css/images/AllShapes.png
答案 0 :(得分:1)
这里发生的事情是由安全功能引起的。由于在这种情况下文件是直接从类路径提供的,因此Vaadin采取了一些预防措施,以防止意外地从类路径中发布其他内容,例如DatabaseConnection.java
之类的内容可能包含敏感密码。
由于这个原因,只有使用@StyleSheet
,@JavaScript
或@HtmlImport
批注明确发布的文件才可用。由于没有相应的注释,例如css/images/AllShapes.png
,服务器将忽略这些请求。
我知道在这种情况下有两种可能的解决方法,但都不是很优雅:
VAADIN/css/images
并更新CSS,以使用适当数量的../
段来取消网址的/APP/PUBLISHED/
部分。因此,CSS中的URL类似于../../VAADIN/css/images.AllShapes.png
。VAADIN/
中的图像一起放入。这样,您无需更改引用图像的URL,而是需要手动加载CSS,而不是依靠方便的@StyleSheet
注释。在这种情况下,建议您使用ui.getPage().getStyles().add(new ThemeResource("../../css/name.css"));
之类的东西。 ../../
部分是要取消的themes/mytheme/
,它们将自动用于主题资源。您可以在例如attach()
方法(只记得还调用super.attach()
)。您最好还应该添加一些逻辑,该逻辑只会在以前尚未针对同一UI实例完成依赖时添加依赖。LegacyCommunicationManager.registerDependency
方法还可以注册图像,以直接从类路径访问。您可以使用LegacyCommunicationManager
找到vaadinSession.getCommunicationManager()
的实例。作为不相关的注释,我建议将不同的脚本和CSS文件组合成每种类型的单个文件。其原因是通过HTTP加载大量小文件会导致一些性能开销,可以通过将文件捆绑在一起来避免。