Eclipse Community Forums: Eclipse Scout » Adding heatmap example to my project leads to empty page

Home » Eclipse Projects » Eclipse Scout » Adding heatmap example to my project leads to empty page

Adding heatmap example to my project leads to empty page [message #1838408]

Wed, 24 February 2021 07:21

Eclipse User

Hello, I am trying to import the heatmap example from bsi widget to my project, after copying everything, I try to run my webapp all run configuration.

And once I am in the client, I get the login page, which is fine, once logged, I end on an empty page, nothing is loaded, no error in chrome/eclipse.

(It looks like my dist folder is not fully created then, which may lead to this issue).

If I put these as comments in my index.js

//export {default as HeatmapField} from './heatmap/HeatmapField';
//export {default as HeatmapFieldAdapter} from './heatmap/HeatmapFieldAdapter';
//export {default as HeatmapFieldLayout} from './heatmap/HeatmapFieldLayout';
//export {default as simpleheat} from './heatmap/leaflet-heat';

Everything works the way it did before.

I have exactly the same behavior when I try to import chartjs to my project, yet I managed to import the custom tile feature.

My setup is the latest nodejs, scout 10.0.33

[Updated on: Wed, 24 February 2021 12:00] by Moderator

Re: Adding heatmap example to my project leads to empty page [message #1838423 is a reply to message #1838408]

Wed, 24 February 2021 12:21

Eclipse User

Hi

If the page stays empty and there is no error in the console, webpack probably waits for a file to be loaded.

Third party content (leaflet.js or chart.js in your case) is extracted into a vendors.js file. Have a look at the dist folder. If there is such a file you need to include it in your index.html. This should fix you issue.

Because this is indeed a very confusing behavior we recently added an alternative way to include the JavaScript code. Instead of adding the scripts individually you can use the new entrypoint keyword.

<scout:scripts entrypoint="yourentrypoint"/>

The entrypoints are defined in your webpack.config.js. The same applies for the stylesheets.

Even though it is actually a feature of Scout 11, we backported it to Scout 10, but I think your version is a little too old. You need to update to a newer Scout 10 version.

The archetype of Scout 11 will be using the new style:
https://git.eclipse.org/c/scout/org.eclipse.scout.sdk.git/tree/scout-helloworld-app/src/main/resources/archetype-resources/__rootArtifactId__.ui.html/src/main/resources/WebContent/index.html?h=releases%2F11.0

While the archetype of Scout 10 still uses the old style:
https://git.eclipse.org/c/scout/org.eclipse.scout.sdk.git/tree/scout-helloworld-app/src/main/resources/archetype-resources/__rootArtifactId__.ui.html/src/main/resources/WebContent/index.html?h=releases%2F10.0

Re: Adding heatmap example to my project leads to empty page [message #1838428 is a reply to message #1838423]

Wed, 24 February 2021 13:26

Eclipse User

Hello, thank you for this well explained answer.

I tried to add the vendors.js to my index.html and yes now my application is no longer empty.
How do I do to not have this line <scout:script src="vendors.js"/> in the index.html to disapear everytimes I rebuild the app?

I tried to get the latest scout eclipse from the download page and It looks like the version 10.0.42 still follows the old archetype

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Application</title>
<scout:include template="includes/head.html" />
<scout:stylesheet src="helloworld-theme.css" />
</head>
<body>
<scout:include template="includes/no-script.html" />
<div class="scout" data-partid="1"></div>
<scout:version/>
<scout:script src="jquery.js"/>
<scout:script src="eclipse-scout.js"/>
<scout:script src="helloworld.js"/>
</body>
</html>

I think I will wait for the new scout 11 to be released and then migrate my application

[Updated on: Thu, 25 February 2021 05:59] by Moderator

Re: Adding heatmap example to my project leads to empty page [message #1838434 is a reply to message #1838428]

Wed, 24 February 2021 15:18

Eclipse User

The script tag will not disappear, it was just not necessary until now because you have not used third party libs.

The Scout 10 archetype still uses the old pattern but you could use the new style anyway. But maybe you are right, doing it with the Scout 11 update is a good idea, the release is near

Re: Adding heatmap example to my project leads to empty page [message #1838443 is a reply to message #1838434]

Thu, 25 February 2021 02:21

Eclipse User

Hi Nico

> How do I do to not have this line <scout:script src="vendors.js"/> in the index.html to disappear everytimes I rebuild the app?

Could you verify where the index.html, where you've added the line above, is located? Is it the file in /src/main/resources/WebContent (which is the source) or have you accidentally changed the file in the target/dist/res folder? If the latter is the case, this would explain, why your changes disappear every time you build.

Cheers
André

Re: Adding heatmap example to my project leads to empty page [message #1838460 is a reply to message #1838443]

Thu, 25 February 2021 08:46

Eclipse User

Hello Andre,

Yes I realised I changed the wrong file, modifying WebContent/index.html works perfectly. Thank you

Previous Topic:	Add error message into LoginDialog/LoginForm
Next Topic:	Error while importing Scout Demo Contact App

Goto Forum:

-=] Back to Top [=-

Current Time: Sun Jul 13 20:19:22 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter