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.


<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:


<script async 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() {
  • 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().


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.