Rejecting published file request for file that has not been published. Tried all the options but didn't work

Question

I am trying to implement a sample application where all the javascript (JS) & CSS files use many png files.

I referred many articles but they could not help me.

For all the png files, I get the following error,

Sample error part,

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

The following is the folder structure that I have,

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

}

I tried the following step by step but i could not get expected results,

1. I have kept all the png files under the directory "de.qsoft.manatee.web.vaadin.myapp.css" as "de.qsoft.manatee.web.vaadin.myapp.css.images"

2. Under VAADIN folder, i copied all the png files as "VAADIN/css/images/"

3. Under VAADIN folder like "VAADIN/themes/mytheme/img/css/images"

4. Under VAADIN folder like "VAADIN/themes/mytheme/layouts/css/images"

   @Theme("mytheme") public class MyUI extends 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 {
   }
   

   }

Please let me know where should i put all png files. Each css is refering image file as

http://localhost:8080/spreadjs/APP/PUBLISHED/css/images/AllShapes.png

Answer 1

What happens here is caused by a security feature. Since the files are in this case served directly from the classpath, Vaadin takes some precautions to prevent accidentally also publishing other things from the classpath, e.g. something like DatabaseConnection.java which might contain sensitive passwords.

For this reason, only files that are explicitly published using a @StyleSheet, @JavaScript or @HtmlImport annotation are available. Since there is no corresponding annotation for e.g. css/images/AllShapes.png, the server ignores those requests.

I'm aware of a couple of potential workarounds in this kind of case, but neither is really elegant:

1. Put the images in e.g. VAADIN/css/images and update the CSS to use an appropriate number of ../ segments to cancel out the /APP/PUBLISHED/ part of the URL. The URL in the CSS would thus be something along the lines of ../../VAADIN/css/images.AllShapes.png.
2. Put the CSS along with the images in VAADIN/. In that way, you don't need to change the URLs that refer to the images, but you instead need to manually load the CSS instead of relying on the convenient @StyleSheet annotation. In that case, I'd recommend using something like ui.getPage().getStyles().add(new ThemeResource("../../css/name.css"));. The ../../ part is to cancel out themes/mytheme/ that will automatically be used for a theme resource. You could do this in e.g. the attach() method (just remember to also call super.attach()). You should preferably also add some logic that only adds the dependency if it hasn't already been done previously for the same UI instance.
3. Use the internal LegacyCommunicationManager.registerDependency method to also register your images to be available directly from the classpath. You can find an instance to LegacyCommunicationManager using vaadinSession.getCommunicationManager().

As an unrelated note, I'd recommend combining the different scripts and CSS files into a single file of each type. The reason for this is that loading lots of small files over HTTP causes some performance overhead that can be avoided by bundling the files together.