Display Your First Spreadsheet

Display Your First Spreadsheet

Starts from this section, we will explain the basics of how to develope a web application with Keikai based on tutorial project. All JSP and Java files mentioned in this tutorial already exist under the folder src/main/webapp and src/main/java respectively.

To make things simple, we are running our 1st Keikai in a JSP page. First, put a <div> as an anchor element, which Keikai renders a spreadsheet at. It can be any place you like on the page. Then specify id attribute so that you can pass it to Keikai engine to identify the anchor element.

editor.jsp

<div id="spreadsheet" style="height: 90%" ></div>

Load Keikai Client

The page also needs to load Keikai client JavaScript. The script URL is dynamically generated by Keikai, so you can specify it with a variable in EL:

editor.jsp

<script defer src="${keikaiJs}"></script>

Now the page is ready.

Obtain a Spreadsheet

The next step is to connect to Keikai engine and get Keikai client JavaScript URL. Then write that JavaScript URL into the JSP I just created. To do so, I create a servlet to accept a request first and forward the request to the JSP with a Keikai JavaScript URL as an attribute.

The servlet calls MyEditor, which implements all my application logic, to get Keikai JavaScript URL.

This can be done in 2 steps:

  1. Connect to Keikai engine to get a Spreadsheet object with Keikai.newClient()

  2. Get Keikai client JavaScript URL with Spreadsheet.getURI(anchorElementID)

MyEditor.java - get a Spreadsheet

    private Spreadsheet spreadsheet;
    ...
    public MyEditor(String keikaiServerAddress) {
        spreadsheet = Keikai.newClient(keikaiServerAddress);
        // close spreadsheet Java client when a browser disconnect to keikai server to avoid memory leak
        spreadsheet.setUiActivityCallback(new UiActivity() {
            public void onConnect() {
            }

            public void onDisconnect() {
                spreadsheet.close();
            }
        });
    }
  • line 4: In the MyEditor.java, it actually calls an overloaded newClient() with 2 parameters. I will explain it in the later section.

MyEditor.java - get a Keikai UI Client JavaScript

    public String getJavaScriptURI(String elementId) {
        return spreadsheet.getURI(elementId);
    }

In order to make ${keikaiJs} resolve to Keikai JavaScript URL, you need to store keikaiJs as an attribute by calling setAttribute().

EditorServlet.java

request.setAttribute(Configuration.KEIKAI_JS, keikaiJs);

After the 2 simple steps above, you can now visit the page with Chrome and try out Keikai at http://localhost:8080/tutorial/editor

In order to show you the usage in the simplest way, we used a Java Server Page (JSP), but it’s not limited to JSP. You can use any Java UI technology/framework you like as long as the technology/framework can load JavaScript dynamically.

Comments