Integrating RoundSlider library

Vaadin 6 / 7 / 8
1

Good morning evryone,
I’m trying Vaadin for the first time and I’ve encountered some problem on integrating JS library.
I want use a JSCustomComponent integrating RoundSlider library but something douesn’t work.
Could someone help me?

I put my classes code here:

/***** Round Class ****/

import com.vaadin.*;

import java.util.List;

import com.vaadin.annotations.JavaScript;

import org.json.*;


@JavaScript({"roundslider.min.js", "rs.js", "jquery-3.1.1.min.js"})
public class Round extends AbstractJavaScriptComponent {

public Round(){
super();
}

public void setData(JSONObject d) {
JSONObject data;
data = new JSONObject(d);

getState().setData(d);
}

@Override
public RoundState getState() {
return (RoundState) super.getState();
}

}

/***** RoundState Class ****/

[code]
import com.vaadin.*;

import java.util.List;

import org.json.*;

public class RoundState extends JavaScriptComponentState {

private JSONObject data;
 
public JSONObject getData() {
    return data;
}

public void setData(JSONObject d) {
    this.data = d;
}

}
[/code]/***** UITest1 Class ****/

[code]
import com.vaadin.*;

@Theme(“custom”)
public class UITest1 extends UI {

@Override
protected void init(VaadinRequest vaadinRequest) {
    final VerticalLayout layout = new VerticalLayout();
    /*
    final TextField name = new TextField();
    name.setCaption("Type your name here:");

    Button button = new Button("Click Me");
    button.addClickListener( e -> {
        layout.addComponent(new Label("Thanks " + name.getValue() 
                + ", it works!"));
    });
    
    layout.addComponents(name, button);
    
    */
    layout.setMargin(true);
    layout.setSpacing(true);
    
    setContent(layout);
    Round round = new Round();
    
    JSONObject ob = null;
    try {
        ob = new JSONObject();
        
        ob.put("sliderType", "min-range");
    
        ob.put("value", new Integer(40));
    } catch (JSONException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    
    round.setData(ob);
            
    //round.setData(" {sliderType: 'min-range', value: 40}");
    //round.addStyleName("rsTheme");
    layout.addComponent(round);
}

@WebServlet(urlPatterns = "/*", name = "UITest1Servlet", asyncSupported = true)
@VaadinServletConfiguration(ui = UITest1.class, productionMode = true)
public static class UITest1Servlet extends VaadinServlet {
}

}
[/code]/***** Connector (rs.js) ******/

[code]
window.com_test_uno_Round = function() {
var element = $(this.getElement());

this.onStateChange = function() {
    var diagramFrame = $.roundSlider(element, this.getState().data);    

}

}
[/code]I tested Js Integrating application firstlyt importing the project d3 from http://www.rapidpm.org/2013/10/13/using-javascript-libraries-(d3)-in-vaa.html and it worked.
So I tried to wrote my connector according to that application but the page doesn’t show anything.

Roundslider job can be tested at
https://jsfiddle.net/soundar24/deLqk8sr/

The roundslider code is reachable here
https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js
 .

PS. I imported the roundslider.min.css Stylesheet in VAADIN/themes/custom/styles.scss

@import "../reindeer/styles.css";

.rs-control{position:relative;outline:0 none}  ... /* code from https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css */
2

Does the function in
rs.js
 get called?

3

Thank you for your answer Alejandro.
I don’t know how to do that call and I’m not sure that I loaded rightly the roundslider.min.css putting it into custom/styles.scss.
Could you help me? Did you try the code or the example on jsfiddle?

Thanks!

4

Of course I can help :slight_smile: Use the
debugger
 statement. Something like this:


window.com_test_uno_Round = function() {
debugger;
…
}

Then activate Chrome Inspector (or the equivalent for your browser) and see if it stops the execution of the JavaScript code. Also some developers just add an
alert(“let’s see if this gets called”);
 call instead.