2

I'm learning how to make communications between java and an html file,

i created a little snippet in java: 

public class OpenInBrowser {
    public static void main(String[] args) {

        JSONObject dataSet = new JSONObject();
        dataSet.put("keyA", "SomeValueA");
        dataSet.put("keyB", "SomeValueB");
        dataSet.put("keyC", "SomeValueC");

        JSONObject someProperty = new JSONObject();
        dataSet.put("someproperty", "aproperty");

        JSONArray properties = new JSONArray();
        properties.add(dataSet);
        properties.add(someProperty);

    }
}

my html file :

< !DOCTYPE html>
<html lang="en">

<head>


<link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
    rel="stylesheet">

<link
    href="http://getbootstrap.com/examples/justified-nav/justified-nav.css"
    rel="stylesheet">

<style>
.axis path {
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: Lato;
    font-size: 13px;
}
</style>

</head>

<body>

    <div class="container">

        <div class="jumbotron">

            <svg id="visualisation" width="1000" height="500"></svg>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                function InitChart() {
                    var data = [ {
                        "sale" : "202",
                        "year" : "2000"
                    }, {
                        "sale" : "215",
                        "year" : "2002"
                    }, {
                        "sale" : "179",
                        "year" : "2004"
                    }, {
                        "sale" : "199",
                        "year" : "2006"
                    }, {
                        "sale" : "134",
                        "year" : "2008"
                    }, {
                        "sale" : "176",
                        "year" : "2010"
                    } ];
                    var data2 = [ {
                        "sale" : "152",
                        "year" : "2000"
                    }, {
                        "sale" : "189",
                        "year" : "2002"
                    }, {
                        "sale" : "179",
                        "year" : "2004"
                    }, {
                        "sale" : "199",
                        "year" : "2006"
                    }, {
                        "sale" : "134",
                        "year" : "2008"
                    }, {
                        "sale" : "176",
                        "year" : "2010"
                    } ];
                    var vis = d3.select("#visualisation"), WIDTH = 1000, HEIGHT = 500, MARGINS = {
                        top : 20,
                        right : 20,
                        bottom : 20,
                        left : 50
                    }, xScale = d3.scale.linear().range(
                            [ MARGINS.left, WIDTH - MARGINS.right ]).domain(
                            [ 2000, 2010 ]), yScale = d3.scale.linear().range(
                            [ HEIGHT - MARGINS.top, MARGINS.bottom ]).domain(
                            [ 134, 215 ]), xAxis = d3.svg.axis().scale(xScale), yAxis = d3.svg
                            .axis().scale(yScale).orient("left");

                    vis.append("svg:g").attr("class", "x axis").attr(
                            "transform",
                            "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                            .call(xAxis);
                    vis.append("svg:g").attr("class", "y axis").attr(
                            "transform", "translate(" + (MARGINS.left) + ",0)")
                            .call(yAxis);
                    var lineGen = d3.svg.line().x(function(d) {
                        return xScale(d.year);
                    }).y(function(d) {
                        return yScale(d.sale);
                    }).interpolate("basis");
                    vis.append('svg:path').attr('d', lineGen(data)).attr(
                            'stroke', 'green').attr('stroke-width', 2).attr(
                            'fill', 'none');
                    vis.append('svg:path').attr('d', lineGen(data2)).attr(
                            'stroke', 'blue').attr('stroke-width', 2).attr(
                            'fill', 'none');
                }
                InitChart();
            </script>
        </div>

    </div>

</body>

</html>

In the specific i want to pass my json created in java to the initchart() function inside the html file.

how i can do it?

thanks in advance.

Improve this question
1
  • If you want to develop some web project in java you should use servlet and pass the value using request.setAttribute() and RequestDispatcher. and get the value in html page by using request.getAttribute().
    – Shailesh Yadav
    Commented Sep 11, 2015 at 9:16

4 Answers 4

Reset to default
1

You need a Java servlet instead of a java application.

Then you can either create the UI in a JSP page and communicate with the JAVA code

OR

You can do an ajax request to the java servelt and collect the json data and show it in your html.

Improve this answer
2
  • thanks for the answer, is it possible to do it without using a server?
    – OiRc
    Commented Sep 11, 2015 at 9:16
  • 1
    No you cant , you are trying to communicate to an HTML page.
    – hybrid
    Commented Sep 11, 2015 at 9:18
1

Do you mean how to get JSON from the server and display the information in html? Then, first, you need to get the JSON from server, you can user Jquery.getJSON():

http://api.jquery.com/jquery.getjson/

On server side, you also need to response this request and give JSON back. Then you can use success callback of jquery.getJSON() to use the JSON get from your server.

Improve this answer
1

You're trying to setup a communication between 2 separate systems. To do this you'd need to open a channel to communicate and a form of communication they both understand.

As html is usually provided to a browser over http communication the easiest way would be to find something which can easily setup http providing the data. JQuery, web servers using servlets, ... all do this.

As you seem to be new to this I'd pick out the one which has the best documentation, easiest learning and simple deployment.

Improve this answer
1

It is important to understand that in web programming, you do not write a main program that opens your page in a browser. Usually, you start the web server with your web content, open the browser yourself and load the proper location from localhost (or wherever your web server runs).

To pass your JSON object to your front end logic, you can employ the technology of your choice, e.g. static HTML, Servlets, JSPs.

Static HTML does not invlove Java. If you use Servlets or JSPs, you have to render your JSON object in a proper way (valid JavaScript code) into the generated HTML.

Assuming you employ JSP technology, this would look like this:

<%!
    public JSONArray getJsonObject() {
        JSONObject dataSet = new JSONObject();
        dataSet.put("keyA", "SomeValueA");
        dataSet.put("keyB", "SomeValueB");
        dataSet.put("keyC", "SomeValueC");

        JSONObject someProperty = new JSONObject();
        dataSet.put("someproperty", "aproperty");

        JSONArray properties = new JSONArray();
        properties.add(dataSet);
        properties.add(someProperty);

        return properties;
    }
%>
<html>
<!-- ... -->
<body>
    <div class="container">
        <div class="jumbotron">
            <svg id="visualisation" width="1000" height="500"></svg>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                function InitChart() {
                    var data = <%=getJsonObject().toString()%>;
                    // ...
                }
                InitChart();
            </script>
        </div>
    </div>
</body>
</html>

This would be placed in a JSP file in the appropriate location of the JSP container of your choice (e.g. Apache Tomcat). Please refer e.g. to the Java EE Tutorial for further information.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.