Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » scout » How about Charts?
How about Charts? [message #1760773] Tue, 02 May 2017 19:15 Go to next message
R. van Twisk is currently offline R. van TwiskFriend
Messages: 12
Registered: April 2017
Junior Member
If one needs to include Chart's in an application,
how can this effectively be done within Scout?
With effectively I don't mean generate a image on the sever and display that Smile

But for example to include something like : http://www.chartjs.org

Kind Regards,
Ries
Re: How about Charts? [message #1760800 is a reply to message #1760773] Wed, 03 May 2017 07:29 Go to previous messageGo to next message
Benjamin Schulte is currently offline Benjamin SchulteFriend
Messages: 18
Registered: December 2016
Junior Member
As the widget demo shows, Scout can handle SVGs. So an approach could be to generate an SVG. But I did not find a (good) library for Java which does that for charts.
Re: How about Charts? [message #1760804 is a reply to message #1760800] Wed, 03 May 2017 07:54 Go to previous messageGo to next message
Matthias Zimmermann is currently offline Matthias ZimmermannFriend
Messages: 199
Registered: June 2015
Senior Member
an other option is to create your own chart widget using an existing js library. if you'd like to follow this approach you may use the heatmap widget (that uses the leaflet.js framework) from the widgets demo:

Re: How about Charts? [message #1760829 is a reply to message #1760804] Wed, 03 May 2017 12:37 Go to previous messageGo to next message
R. van Twisk is currently offline R. van TwiskFriend
Messages: 12
Registered: April 2017
Junior Member
Hey Mattias,

I am trying to follow that code, but I might be missing a piece of magic:

I created : src/main/js/chart-module.js

(function(scout, $, undefined) {
    __include("chart/Chart.bundle.min.js");
    __include("chart/ChartField.js");
    __include("chart/ChartAdapter.js");
    __include("chart/ChartFieldLayout.js");
}(scout, jQuery));


But I am getting : [nio-8080-exec-5] o.e.s.r.u.html.script.ScriptFileLocator : locate /res/chart-module.js: does not exist (no library, macro or source module)
And I am seeing in application-all.js
// --- /res/chart-module.js ---
// !!! NOT PROCESSED

This makes sense, because by default src/main/js isn't getting bundled (as far as I know).

So I moved it to src/main/resources/WebContent/res
and I see in application-all.js that the file is included, but then I get a javascript error :

// --- LIBRARY /res/chart-module.js ---
(function(scout, $, undefined) {
    __include("chart/Chart.bundle.min.js"); // <== ReferenceError: Can't find variable: __include
    __include("chart/ChartField.js");
    __include("chart/ChartAdapter.js");
    __include("chart/ChartFieldLayout.js");
}(scout, jQuery));



I also did a fresh clone from : https://github.com/BSI-Business-Systems-Integration-AG/SpringBoot-and-EclipseScout/tree/6.1.x/org.eclipse.scout.springboot
Ran the application and I also get in the log:
2017-05-03 14:35:05.487  WARN 71454 --- [nio-8080-exec-4] o.e.s.r.u.html.script.ScriptFileLocator  : locate /res/spring-security-module.less: does not exist (no library, macro or source module)
2017-05-03 14:35:05.528  WARN 71454 --- [nio-8080-exec-6] o.e.s.r.u.html.script.ScriptFileLocator  : locate /res/spring-security-module.js: does not exist (no library, macro or source module)



Any help would be greatly appreciated.

Ries
Re: How about Charts? [message #1760873 is a reply to message #1760829] Wed, 03 May 2017 20:20 Go to previous messageGo to next message
Matthias Zimmermann is currently offline Matthias ZimmermannFriend
Messages: 199
Registered: June 2015
Senior Member
could we ask you to first try your chart widget running based on a scout hello world setup?
this makes helping simpler as we do not need to deal with interactions of scout and spring. once this works, you may move your new widget to the spring + scout example.
tx
Re: How about Charts? [message #1760881 is a reply to message #1760873] Wed, 03 May 2017 22:12 Go to previous messageGo to next message
R. van Twisk is currently offline R. van TwiskFriend
Messages: 12
Registered: April 2017
Junior Member
Hey Mattias,

I should have updated a bit sooner, sorry about that....

I managed to solve this particular issue with the following build config:

<resources>
            <resource>
                <directory>src/main/resources</directory>
            </resource>
            <resource>
                <directory>src/main/js</directory>
            </resource>
        </resources>


See here a example chart loaded through a ChartField
http://skitch.rvantwisk.nl/~rvt/tmp/Springboot_with_Eclipse_Scout_UI_1EBA8C62.png

I do have scaling issue on the chart as I can get odd results and overlapping canvas with other UI element's,

Here is such example:
http://skitch.rvantwisk.nl/~rvt/tmp/Springboot_with_Eclipse_Scout_UI_1EBA8CD4.png


Does scout handle exact widget calculations and positioning or is this CSS based?

Ries

[Updated on: Wed, 03 May 2017 22:35]

Report message to a moderator

Re: How about Charts? [message #1760885 is a reply to message #1760881] Thu, 04 May 2017 06:37 Go to previous messageGo to next message
Andre Wegmueller is currently offline Andre WegmuellerFriend
Messages: 31
Registered: September 2012
Location: Baden-D├Ąttwil, Switzerla...
Member
> Does scout handle exact widget calculations and positioning or is this CSS based?

It's a bit of both. Most of the widgets in Scout's Html UI are laid out by JavaScript. The layouting concept is similar to Java Swing. Each "scout.Widget" has a root DOM element (the $container) which is attached to an instance of "scout.HtmlComponent" which has an instance of "scout.AbstractLayout". This class is responsible for calculating and returning the preferred size of the widget and to layout the widget when the size of its parent is set. Once the correct size is set on the root element of a Scout widget, the widget can layout its content with CSS positioning or with absolute positioning done by JavaScript code in the layout method.

To calculate the "preferred size" of a widget we rely (most of the time) on what the browser renders including CSS styles. A very simple layout is the "scout.SingleLayout" class. It is used in places where a DOM element has only one child element and the size of that child element should be equals to the parent size.

However: when you're working with Scout Forms, you usually work with GroupBoxes and FormFields. Thus your custom widget should probably be a sub class of scout.FormField which has a FormFieldLayout. Each form field has a label, a mandatory indicator, a status and the field itself (which in your case, would be the Chart).

Depending on how your Chart library works (maybe you have to call a library specific function whenever the size of the parent of the Chart changes), you should create a ChartFormFieldLayout.js, which deals with the specific layout requirements of the Chart.

I guess the HeatmapFieldLayout.js is a good example for that. As you see in that class the Heatmap library requires we call an 'invalidateSize' function whenever the size of the parent changes. If we didn't call that function we'd probably see similar issues as you currently have with your Chart in 1EBA8CD4.png.




Re: How about Charts? [message #1760932 is a reply to message #1760885] Thu, 04 May 2017 12:25 Go to previous message
R. van Twisk is currently offline R. van TwiskFriend
Messages: 12
Registered: April 2017
Junior Member
Andre,

thank's for thanks extensive and quick answer. I indeed use the heatmap as my base, and started to modify it for my learning experience.
Instead of the Hello World, I used the Scout + Spring Boot tool, here is my repository I am fooling around with : https://github.com/rvt/SpringBoot-and-EclipseScout

Today I am going to play with it some more and see how it goes.

Ries

Update: It works! I had to set getConfiguredGridH and returned 6 for both of the form fields (table and Chart). I am not sure if this is considered a hack or not....

[Updated on: Thu, 04 May 2017 13:27]

Report message to a moderator

Previous Topic:Re-visiting dynamic forms
Next Topic:Deploy Scout on Tomcat using the Tutorial
Goto Forum:
  


Current Time: Sat Jun 24 01:59:53 GMT 2017

Powered by FUDForum. Page generated in 0.03024 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software