How To Convert JSON to Java object, and vise-versa

问题

I would like to populate my FullCalendar, which I have drawn on a webview, with data/ event dates stored in a database.

I know that I'll have to do this via JSON. The problem is that practically all documentation I've come accross online only stop at "How To Convert JSON to Java object", and vise-versa. How about making the converted JSON/ Java object visible in the HTML/ Java class?

For example, say I have a List of event/ appointment objects retrieved from a database.

List<FullCalendarData> events = new ArrayList();

The FullCalendarData POJO class:

@Component
@Entity
@Table(name = "ENTITY_OBJECT")
@Scope(proxyMode = ScopedProxyMode.TARGET_CLASS, value = "prototype")

@Inheritance(strategy = InheritanceType.JOINED)
public class FullCalendarData {

    private String eventName;
    private String startTime;
    private String endTime;

    public String getEventName() {
        return eventName;
    }

    public void setEventName(String eventName) {
        this.eventName = eventName;
    }

    public String getStartTime() {
        return startTime;
    }

    public void setStartTime(String startTime) {
        this.startTime = startTime;
    }

    public String getEndTime() {
        return endTime;
    }

    public void setEndTime(String endTime) {
        this.endTime = endTime;
    }

}

Convert List<FullCalendarData> events from Java to JSON:

Gson gson = new Gson();
String jsonAppointment = gson.toJson(events);

Now the problem is, how do I make jsonAppointment visible in a the FullCalendar in the HTML\ webview below, or in other words, how do I access and iterate over jsonAppointment and use it (jsonAppointment) instead of the events array below?

<!DOCTYPE html>
<html>
    <head>
        <link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
        <link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
        <script src='../lib/jquery.min.js'></script>
        <script src='../lib/jquery-ui.custom.min.js'></script>
        <script src='../fullcalendar/fullcalendar.min.js'></script>
        <script>

            $(document).ready(function() {

                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

                $('#calendar').fullCalendar({
                    editable: true,
                    events: [
                        {
                            title: 'All Day Event',
                            start: new Date(y, m, 1)
                        },
                        {
                            id: 999,
                            title: 'Repeating Event',
                            start: new Date(y, m, d + 4, 16, 0),
                            allDay: false
                        }
                    ]
                });

            });

        </script>
    </head>
    <body>
        <div id='calendar'></div>
    </body>
</html>

Call our webview:

public class FullCalendarWebView {

    public VBox calendar() {
        final WebView webView = new WebView();
        final WebEngine engine = webView.getEngine();
        engine.load("file:D:/standAloneDev//src/fc/fullcalendarwebview/fullcalendar-1.6.4/demos/selectable.html");

        JSObject script = (JSObject) engine.executeScript("window");
        script.setMember("eventClick", new JavaApp().javaApp());

        VBox vb = new VBox();
        vb.getChildren().add(webView);

        return vb;
    }

}

回答1:

Sending a single event to the calendar

In order to send some events to the calendar from JavaFX, first of all you should create a JavaScript function that generates one single event on the calendar:

private WebView webView;
private WebEngine engine;

private void createCalendar() {
    webView = new WebView();
    engine = webView.getEngine();
    engine.load("file:D:/standAloneDev//src/fc/fullcalendarwebview/fullcalendar-1.6.4/demos/selectable.html");

    engine.getLoadWorker().stateProperty().addListener((ov,oldState, newState)->{
        if(newState==State.SUCCEEDED){

            // JS to Java
            JSObject script = (JSObject) engine.executeScript("window");
            script.setMember("myClick", new JavaApp());

            // Java to JS, function to create single event
            engine.executeScript("function addEvent(title, start, end) {\n" +
                            "var eventData = {\n" +
                            "   title: title,\n" +
                            "   start: start,\n" +
                            "   end: end\n" +
                            "};\n" +
                            "$('#calendar').fullCalendar('renderEvent', eventData, true);\n" +
                         "}");
        }
    });
}

Now we can test this function on the JavaFX application, calling the script with some data:

@Override
public void start(Stage primaryStage) {

    Button btn=new Button("Add Event");
    btn.setOnAction(e->{
        FullCalendarData data1=new FullCalendarData();
        data1.setEventName("Event 1");
        data1.setStartTime("2015-01-11T16:00:00");
        data1.setEndTime("2015-01-11T18:00:00");
        engine.executeScript("addEvent('"+data1.getEventName()+
                             "','"+data1.getStartTime()+
                             "','"+data1.getEndTime()+"');");

    });

    createCalendar();

    Scene scene = new Scene(new VBox(webView,btn), 600, 400);
    primaryStage.setScene(scene);
    primaryStage.show();
}

Sending a list of events to the calendar

If you want to send a list of events using JSON format, you can create another function to process the list and call addEvent() on each element on the list:

engine.getLoadWorker().stateProperty().addListener((ov,oldState, newState)->{
        if(newState==State.SUCCEEDED){
            ...
            // Java to JS, send JSON list
            engine.executeScript("function addListEvents(result) {\n" +
                            "for(var i=0; i<result.data.length; i++){\n" +
                            "   addEvent(result.data[i].eventName, result.data[i].startTime, result.data[i].endTime);\n" +
                            "};\n" +
                         "}");
        }
    });

Using a wrapper for the list of events:

class CalendarEvents{
    final List<FullCalendarData> data=new ArrayList<>();

    public List<FullCalendarData> getData() {
        return data;
    }

    public void addEvent(FullCalendarData event) {
        this.data.add(event);
    }

}

we can retrieve a list of events, convert it to JSON format and call this script:

@Override
public void start(Stage primaryStage) {
    Button btn=new Button("Add Events");
    btn.setOnAction(e->{

        // list of random events
        FullCalendarData data1=new FullCalendarData();
        data1.setEventName("Event 1");
        data1.setStartTime("2015-01-11T16:00:00");
        data1.setEndTime("2015-01-11T18:00:00");

        FullCalendarData data2=new FullCalendarData();
        data2.setEventName("Event 2");
        data2.setStartTime("2015-01-12T15:00:00");
        data2.setEndTime("2015-01-12T18:00:00");

        FullCalendarData data3=new FullCalendarData();
        data3.setEventName("Event 3");
        data3.setStartTime("2015-01-13T15:00:00");
        data3.setEndTime("2015-01-1316:00:00");

        CalendarEvents cal = new CalendarEvents();
        cal.addEvent(data1);
        cal.addEvent(data2);
        cal.addEvent(data3);

        Gson gson=new Gson();
        String json=gson.toJson(cal,CalendarEvents.class);

        engine.executeScript("addListEvents("+json+");");
    });

    createCalendar();

    Scene scene = new Scene(new VBox(webView,btn), 600, 400);

    primaryStage.setScene(scene);
    primaryStage.show();
}

You will have your events on the calendar:

来源：https://stackoverflow.com/questions/27885124/how-to-convert-json-to-java-object-and-vise-versa

标签

java

json

webview

javafx

fullcalendar