vaadin / multiplatform-runtime

4 stars 1 forks source link

Vaadin 7 FileDownloader sizing issue #57

Open mobileWMS opened 5 years ago

mobileWMS commented 5 years ago

I have a weird problem with my MPR + Vaadin 7 app. When I click "Download Csv" button to initiate a CSV file download, it resizes the screen incorrectly. What it does wrong is add vertical and horizontal scrollbars. With my pure Vaadin 7 app, it does not do this.

The biggest difference between the two versions is that in MPR + Vaadin 7 branch of the code, I have to pass the flow UI and VaadinSession to the FileDownloader implementation because some lower level code that talks to another service that produces the file we want to download needs the UI and VaadinSession.

I suppose it could be a style or CSS or theme issue. As such, I use a custom theme derived from the Valo theme. Here are some annotations attached to my root Route ( the part that wraps the Vaadin 7 code, as per the MPR documentation ):

@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
@MprWidgetset("com.mobiwms.website.WmsWidgetSet")
@Push
@MprTheme("mobiwms")
@Route("")
@RouteAlias("entry")

Custom FileDownloader:

    private class CsvFileDownloader extends FileDownloader {

        /**
         * 
         */
        private static final long serialVersionUID = -1703929900936413587L;

        public CsvFileDownloader(Resource resource) {
            super(resource);
        }

        @Override
        public Resource getFileDownloadResource() {
            FileResource csvFileResource = null;
            try {
                LOGGER.info("Getting CSV file resource for " + type.toString());
                csvFileResource = generateCsvDataFile();
                csvFileResource.setCacheTime(0);
                if( csvFileResource instanceof FileResource ) {
                    LOGGER.info("Got CSV file resource " + csvFileResource.getFilename() );
                } else {
                    throw new WMSException( "Error getting CSV file resource for " +
                            "downloading data for " + type.toString() );
                }
            } catch (WMSException e) {
                String message = e.getMessage();
                if( message == null || message.trim().isEmpty() ) {
                    message = "Error getting data file for export.";
                }
                Notification.show("CSV Files", message, Type.ERROR_MESSAGE );
                LOGGER.severe(message);
            }

            return csvFileResource;
        }
    }

And here is a snippet of how it is used in the code:

    protected FileDownloader buildCsvDownloader() {
        FileResource tempResource = new FileResource(new File(""));

        return new CsvFileDownloader(tempResource);
    }

    protected Button buildDownloadDataCsvBtn() {
        csvDataDownloader = buildCsvDownloader();
        //      csvDataDownloader = new FileDownloader(tempResource);
        //      csvDataDownloader.extend(csvDataDownloaderBtn);

        final Button downloadDataBtn = buildDownloadCsvBtn();
        csvDataDownloader.extend(downloadDataBtn);

        return downloadDataBtn;
    }

Images:

Vaadin 7 before download: here Vaadin 7 after download: here MPR + Vaadin 7 before download: here MPR + Vaadin 7 after download: here

Full discussion is here. This is using the following version info: Vaadin Platform version: 14.0.7 Vaadin 7 version: 7.7.17 Flow Version: 2.0.14 OS(s) that run the WAR file: windows 10 ( Eclipse and Jetty ) and CentOS ( Tomcat ) OS and Browser where I run the test: Windows 10 using Chrome and Edge ( above images are from Chrome )

mobileWMS commented 4 years ago

Any status on this? Any work around? Since I don't really understand the problem, I don't know how to work around it.

mobileWMS commented 4 years ago

I made some demo apps based on the examples from here. What I did was the following:

  1. Copied dashboard and solution-dashboard to my eclipse workspace
  2. Trimmed almost everything to make it smaller
  3. Added download button to dashoard and transactions

So in theory the two applications should be the same, except for MPR stuff.

Display settings: here

Pure vaadin 7 version:

  1. trimmed-dashboard.zip
  2. Dashboard screen after download (note that there is no bar at bottom)
  3. Transaction screen after download (note that there is no bar at bottom)

MPR version:

  1. trimmed-solution-dashboard.zip
  2. Dashboard screen before download (note no bar at bottom)
  3. Dashboard screen after download (note bar at bottom)
  4. Dashboard screen after download and clearing download at bottom (note bar at bottom)
  5. Transaction screen before download (note no bar at bottom)
  6. Transaction screen after download (note bar at bottom)
  7. Transaction screen after download and clearing download at bottom (note bar at bottom)

Note on above code examples: I ran mvn clean before zipping so they would not be too big.

mobileWMS commented 4 years ago

Same thing happens when I upgraded to 14.1.17, see my project.

mobileWMS commented 4 years ago

@pleku , since you marked this as low impact and minor severity, maybe you know of a workaround? Because it is almost a show stopping issue in our case, as you can see from my example code. Yes, users can still use the site, but it is very confusing and potentially dangerous as vertical scroll bars tied to a table or grid could be off the edge once the download completes ( under browser vertical scrollbar ). Definitely not attractive, so even a band-aide would help. Thanks.

mobileWMS commented 3 years ago

What is the status of this? I linked an example project, so in theory you should have a decent test case. I don't currently use MPR, but we might need to in the next year as we restart the upgrade to Vaadin 14, so wanted to followup on this.