DEV Community: Hawk Chen

Safari's Tab Key Trap: Why Your Website's Focus Navigation Might Be Breaking for Safari Users

Hawk Chen — Thu, 22 May 2025 04:10:23 +0000

Recently, a zk user reported that they couldn't tab through all interactive elements on a zul page. This behavior is tied to a little-known setting deep in Safari’s Settings.

Keyboard navigation is essential for accessibility, allowing users who rely on keyboards or assistive technologies to navigate without a mouse. It also benefits power users who prefer using Tab for faster navigation. If this doesn't work as expected, especially on Safari — one of the major browsers — it can be a frustrating and invisible blocker.

Assuming I create a page with a textbox, menubar, menuitem, anchor link, intbox, navbar, and navitem, and visit it with various browsers.

When pressing the Tab key in Chrome (136.0), Firefox (138.0), and Edge (136.0), I can successfully move through all components, including each link, menu item, and nav item.

But within Safari (18.4), I can only focus on some components. Safari will skip most menu items, links, and nav items.

You can try the page on zk fiddle with your Safari.

I found the root cause is:

The option “Press Tab to highlight each item on a webpage” in Safari Settings is unchecked by default.

After I checked that option, I can focus on all components by pressing the Tab key. If it’s unchecked, you have to press Option + Tab key to focus on all components.

Give your classic spreadsheet a modern touch

Hawk Chen — Thu, 04 Mar 2021 03:46:05 +0000

Spreadsheets are no doubt the most popular business application – they are heavily used in all fields, favored by users from finance experts in Wall Street to top scientists in NASA. Spreadsheets allow users to calculate, organize and store data, and most important of all, analyze data without having to program.

Nowadays spreadsheets extend their reach more – they no longer sit inside a user’s Excel desktop application, they are now widely used online, either being embedded inside applications or run on an online platform like google sheets.
But when a spreadsheet goes online, can we do more than just duplicating Excel’s functionality into the browser?

More Than a Spreadsheet

While spreadsheets are great for displaying tabular data, presenting forms or charts, it is not always great to display a large block of text or display images and other elements that have varied dimensions.
This is where we can leverage today’s fancy and easy-to-use web UI components to work with an online spreadsheet and upgrade spreadsheet users’ experience.

Here I am taking Keikai spreadsheet and a ZK drawer component as an example demonstrating how this can be done. In this example, we will add a slide-in/out Help panel to our spreadsheet where we can display large blocks of Help text in a much more easy-to-read format.

Let me show you how to build this page.

Load the Form

I can load my helpTemplate.xlsx in a zul by specifying src at <spreadsheet/>.
formHelp.zul

<spreadsheet id="ss" 
height="100%" width="60%" 
style="margin: 0 auto;" 
src="/WEB-INF/books/helpTemplate.xlsx"
maxVisibleRows="40" maxVisibleColumns="5"/>

Other attributes of the tag determine spreadsheet looking; please refer to Keikai Developer Reference.

Put a help page along with Keikai

There are 5 blocks of numbers in the form above. Hence, I create an HTML page and put help descriptions into 5 different color boxes. Each box has a corresponding help box with the same background and title. So people who read the help page can easily identify which help text matches their needs for the current block.

Then I use <include> component to include that help HTML into <drawer>.

<spreadsheet .../>
<drawer id="helpDrawer" visible="false" 
position="right" width="40%">
    <include src="help.html"/>
</drawer>

visible="false" means it's hidden by default, so you won't see the drawer at first. But users can click the "Help" cell to show the help.

Note, this is just a simple example; you can definitely put any other HTML content (images, videos...) to the help page based on your own context.

Allow Users to Show Help Page

To show the help panel when a user clicks the Help button (cell), I need to add an event listener for the cell click event in a controller.
Keikai supports the MVC pattern, so it's better to implement my application logic in a controller better OO design. The controller looks like this:

public class HelpTextComposer extends SelectorComposer {

    @Wire
    private Drawer helpDrawer;

    @Listen(Events.ON_CELL_CLICK + " = spreadsheet")
    public void showHelpText(CellMouseEvent e){
        Range cell = RangeHelper.getTargetRange(e);
        if (cell.getCellValue() != null 
          && cell.getCellValue().toString().equals("Help")) {
            helpDrawer.open();
        }
    }
}

SelectorComposer helps me to get a reference of helpDrawer which is instantiated by ZK framework. That's why I declare a variable of Drawer without instantiating its object.
@Listen can register the method as an event listener for Events.ON_CELL_CLICK of the spreadsheet. So when a user clicks a cell, ZK will invoke this method.
RangeHelper.getTargetRange(e) returns a Range that represents the clicked cell. Then I can check the cell's value by cell.getCellValue().toString() to know whether a user clicks the "Help" cell or not.
helpDrawer.open() makes the drawer slide in.

Summary

Spreadsheets are brought online for easier sharing and collaboration. But we can do more! This example uses Keikai Spreadsheet and ZK components to demonstrate how you can leverage rich UI components to upgrade user’s spreadsheet experience while preserving its benefits.

Source Code

You can see the complete source code in Keikai developer reference repository.

Protect Formulas in a Web Spreadsheet Application

Hawk Chen — Tue, 02 Jun 2020 04:47:58 +0000

The User Story

One of our customers is a financial professional who manages financial risks for his clients. He develops a tool based on Excel to analyze the risk of investments and forecast the market trend. He creates many valuable formulas in his Excel file that help him do the job.

Now he plans to turn this tool into a web application that allows users to input financial data and produces a risk analysis result. But he wants to hide his valuable formulas since that's his business secret.

Overall Process

We can implement his plan with Keikai. The overall idea of this system is like:

Therefore, I create an xlsx file with 3 sheets:

source sheet: accept user input
transform sheet: calculate results with formulas by referencing cells in the source sheet. To protect the valuable formulas, this sheet is hidden from users.
display sheet: display the calculation result to users.

Import xlsx File

By specifying the path of an xlsx file, I can import it into Keikai.

dataTransform.zul

    <spreadsheet height="100%" width="100%" src="/WEB-INF/books/transform.xlsx"
                 maxVisibleColumns="15" maxVisibleRows="20"
                 apply="io.keikai.devref.usecase.DataTransformComposer"/>

Because Keikai supports MVC pattern, I can also apply a Controller DataTransformComposer to manipulate Keikai and listen to events in Java API.

This is the imported result in a browser:

As you can see in the screenshot, there is no sheet tab. Keikai allows you to hide the sheet tab. Hence, users can't switch to the sheet that contains the formulas.

Formulas Supported

Keikai supports most of the Excel functions (over 250) and syntax. Keikai can import the formulas you write in Excel without any modification and they will work as they were.

Protect Sheets

I don't want users to arbitrarily change my sheet, so I want to enable sheet protection. Before that, I need to create a SheetProtection with proper permissions. There are 14 permissions to choose. Keikai provides a Builder pattern API, so I can just setup those permissions I care:

private static final SheetProtection VIEW_ONLY = SheetProtection.Builder.create()
.withSelectLockedCellsAllowed(true)
.withSelectUnlockedCellsAllowed(true)
.withAutoFilterAllowed(true)
.build();

Then, I enable sheet protect in a loop with SheetProtection:

    private void protectAllSheets() {
        for (int i = 0; i < spreadsheet.getBook().getNumberOfSheets(); i++) {
            Ranges.range(spreadsheet.getBook().getSheetAt(i)).protectSheet(VIEW_ONLY);
        }
    }

Unlocked Cells

Under the sheet protection, every cell is read-only. But I still need to accept user input in the source sheet, so I need to set several cells as unlocked in Excel to make them editable. Just open cell format / Protection, uncheck "Locked":

Listen to Cell Click

There are 2 cells working as buttons. When users click them, Keikai will calculate and show the result. I have to implement this logic in my controller class by the code below:

    @Listen(Events.ON_CELL_CLICK + "=spreadsheet")
    public void onCellClick(CellMouseEvent e) {
        String sheetName = e.getSheet().getSheetName();
        switch (sheetName) {
            case SOURCE_SHEET :
                if(e.getRow() == 14 && e.getColumn() == 2)
                    simpleWorkflow();
                if(e.getRow() == 16 && e.getColumn() == 2)
                    complexWorkflow();
                break;
        }
    }

@Listen(Events.ON_CELL_CLICK + "=spreadsheet") is to register an ON_CELL_CLICK event listener, method onCellClick(), for component spreadsheet. Therefore, when a user clicks a cell, it will invoke onCellClick().
In this listner method, I need to check clicked cell's sheet, row, and column to determine which workflow to perform.

Show Display Sheet

Finally, I call setSelectedSheet(SIMPLE_DISPLAY_SHEET) to show the display sheet to users.

    private void simpleWorkflow() {
        spreadsheet.setSelectedSheet(SIMPLE_DISPLAY_SHEET);
    }

Benefits

After turning the xlsx file into a web application the formulas are fully protected. In addition, the financial professional can still modify his formulas from time to time without changing my Java code since the analysis is implemented in his formulas instead of Java.

Complete Source Code

You can check the full source code at Github.

Automate Excel Sheet Processing with Java

Hawk Chen — Tue, 19 May 2020 04:34:57 +0000

A Sheet Processing Use Case

My colleague Penny in the HR department has to do a routine task each month: making payroll sheets for everyone in the company. There is a sheet containing a table of all employees with salary information:

And she has to create payroll sheets for each person on the list based on the template sheet:

To avoid copying cell by cell manually, I create a web application with Keikai to read salary data row by row and produce payroll sheets. The whole process is:

Import a Pre-designed Excel File

I create a Keikai spreadsheet by writing tags and attributes in a zul of ZK framework which is a UI framework based on Java EE. By specifying at src attribute with a file path, Keikai can import my Payroll.xlsx.

    <spreadsheet height="100%" width="100%" src="/WEB-INF/books/Payroll.xlsx"
                 maxVisibleColumns="15" maxVisibleRows="20"
                 hidecolumnhead="false"  hiderowhead="false"
                 showToolbar="true" showSheetbar="true" showFormulabar="true"
                 apply="io.keikai.devref.usecase.PayrollComposer"/>

When I visit the zul with a browser, Keikai renders the file:

The ZK framework will parse the zul page above and instantiate a Keikai Java object(Spreadsheet) for us to control.

Controller

Then I also create a Java controller, PayrollComposer to access the Keikai Java object and apply the controller on the page at apply attribute: apply="io.keikai.devref.usecase.PayrollComposer"

Named Range

I make a cell like a button on the sheet. When I click the cell, Keikai will start to produce payroll sheets. I give a name, Generate, to the cell.

After that, I can create a Range object (generateButton) with the name:

generateButton = Ranges.rangeByName(sheet, "Generate");

Here is the related code snippet:

public class PayrollComposer extends SelectorComposer<Component>{

    @Wire("spreadsheet")
    private Spreadsheet spreadsheet;
    final private static String EMPLOYEE_SHEET = "Payroll";
    private Range generateButton;
    private Sheet sheet;

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        sheet = spreadsheet.getBook().getSheet(EMPLOYEE_SHEET);
        generateButton = Ranges.rangeByName(sheet, "Generate");
    }
...

Listen to Button Clicking

Then I register an event listener for the cell (button) clicking by @Listen and check whether the button generateButton is clicked or not:

    @Listen(Events.ON_CELL_CLICK + "=spreadsheet")
    public void onCellClick(CellMouseEvent e) {
        String sheetName = e.getSheet().getSheetName();
        switch (sheetName) {
            case EMPLOYEE_SHEET:
                if (RangeHelper.isRangeClicked(e, generateButton))
                    fillPayrollSlips();
                break;
        }
    }

When the button is clicked, it just starts to fill the payroll slips.

Fill payroll data into sheets

Before filling a payroll sheet, I have to read all employees' salary data row by row from the table. The table also has a corresponding named range, PayrollTable, that I don't need to hard code its cell address.

private void fillPayrollSlips() {
    String tableName = "PayrollTable";
    Range payrollRange = Ranges.rangeByName(sheet, tableName);
    List<Map<String, Object>> employeeSalaries = getEmployeeSalaries(payrollRange);
    generateAllPayrollSlips(employeeSalaries);
}

To avoid filling data into a fixed cell address of the payroll sheet, I create a named range for each field that maps the corresponding column name.

Column Name <==> Named Range

Hence, I can fill data in a simple loop. Just clone (cloneSheet()) the template sheet and fill each field by the named range.

    private void generateAllPayrollSlips(List<Map<String, Object>> employeeSalaries) {
        for (Map<String, Object> employee : employeeSalaries) {
            Sheet payrollSheet = Ranges.range(spreadsheet.getBook().getSheet("Form"))
                    .cloneSheet((String) employee.get("Name"));
            for (String field : employee.keySet()) {
                Ranges.rangeByName(payrollSheet, field).setCellValue(employee.get(field));
            }
        }
    }

With the named range, I don't need to hard code a cell address in the code, which makes the code more robust against sheet layout change.

Source Code

I was able to turn this manual Excel copy-pasting task into an automated task in less than 100 lines. I hope you find this example interesting. You can find out the complete code at Github

Enable User Input in My Spreadsheet-based App

Hawk Chen — Fri, 06 Mar 2020 09:59:07 +0000

New requirements: add new expenses

A while ago I turned my colleague Michelle's Excel file into an online budget report web app, to save her from a bunch of manual routines. Recently, she had a new requirement, adding new expenses. She wanted to add new expenses in the sheet and aggregate the new expenses in the current summary report.

If you are new to my blog, this is how the summary report looks like:

Turn cells into a button

We both agreed to keep the existing summary report sheet clean and implement the new feature in a new sheet. We decided to put a button "Add my new expense" on the sheet which will open a new form in another sheet.

How can we make a button here? It was very simple. Michelle just merged several cells and set her preferred background-color in the Excel template.

Create a form

To fulfill the new requirement, Michelle needed a form to input new expenses. I asked her to open up the Excel template and add a new sheet with a table and a "Done" button. She also used formulas (e.g. =C4*D4) in the subtotal column (column E).

To avoid accidentally deleting the formulas, she protected the whole sheet and set A4:D7 as "unlocked". Therefore, she can only input new expenses in the unlocked range.

Change UI without programming

As you may have noticed, everything Michelle added in the sheets so far can be done in Excel, without any programming skills. All I (as a developer) need to do is to take this updated Excel file and import it into Keikai without asking her what she has changed. Then the updated file becomes our new UI.

Sheet switching

After she finished, it was my turn to add the application logic behind these 2 sheets (summary and new expense form). When Michelle clicked "Add my new expense", Keikai should switch to the new expense form sheet.

Here is the code to add an onCellClick listener and select the NEW expense form sheet in the controller class:

public class BudgetComposer extends SelectorComposer<Component> {
...
    @Listen(Events.ON_CELL_CLICK + "= #spreadsheet")
    public void onClick(CellMouseEvent event) {
        Range cell = Util.getClickedCell(event);
        if ("Add my new expense".equals(cell.getCellValue())){
            spreadsheet.setSelectedSheet(NEW);
        }...
    }

...
}

Read user input

The final part is to read the new expenses when Michelle clicked the "Done" button.

Let's update the previous event listener for "Done" button clicked:

    @Listen(Events.ON_CELL_CLICK + "= #spreadsheet")
    public void onClick(CellMouseEvent event) {
        Range cell = Util.getClickedCell(event);
        if ("Add my new expense".equals(cell.getCellValue())){
            ...
        }else if ("Done".equals(cell.getCellValue())){
            readExpense();
            spreadsheet.setSelectedSheet(SUMMARY);
            loadExpenseToSheet();
        }
    }

Through Range API, I can read data cell by cell to construct an Expense object:

    private Expense readExpense(int row, int col) {
        Expense expense = new Expense();
        expense.setCategory(Ranges.range(spreadsheet.getSelectedSheet(), row, 1).getCellData().getStringValue());
        Double value = Ranges.range(spreadsheet.getSelectedSheet(), row, 2).getCellData().getDoubleValue();
        expense.setQuantity(value == null? 0 : value.intValue());
        value = Ranges.range(spreadsheet.getSelectedSheet(), row, 4).getCellData().getDoubleValue();
        expense.setSubtotal(value == null? 0 : value.intValue());
        return expense;
    }

To avoid boring you to tears, I won't show all the details here. You can take a look at the online demo to check its source code and understand this application better.

How I Created an Online Budget Report from Excel Files

Hawk Chen — Wed, 19 Feb 2020 06:36:39 +0000

Issues when publishing an Excel file

My colleague Michelle in the finance team has a routine job; she has to publish a budget report on a weekly basis. Previously, she had to query budget data from a database. Then, fill the budget data manually into a template sheet like this:

Since this is a routine task, I feel I can help her by automating the data-filing process so that she does not have to do it manually & repeatedly.

Another issue is that she has been publishing the budget report as an attachment. Readers have to download the file to see the content on an Excel-ready device. Also, it is hard to control where the attachment ends up to, she has to remove all sensitive and raw data before sending it out.

To solve the above issues, I created a web page with a web spreadsheet component, Keikai. Keikai allows me to reuse the existing Excel budget template so that I don’t need to create everything from scratch. It is also important that I can control it with Java.

Load the template file first

To start simple, I loaded the Excel template sheet into Keikai to show it in a browser:

Such page was created by ZUL, an XML format language from ZK framework:

<spreadsheet id="ss" height="100%" width="100%" src="/WEB-INF/books/budget.xlsx"
    maxVisibleRows="150" maxVisibleColumns="40"
    showContextMenu="true" showToolbar="true" showSheetbar="true" 
    showSheetTabContextMenu="true" showFormulabar="true"/>

But you can also use Keikai with JSP.

The tag, <spreadsheet>, represents the Keikai spreadsheet, and I can configure Keikai via tag attributes.

When a user visits http://localhost:8080/database.zul, keikai will respond with a set of javascript and CSS and render the content file in the browser.

Data Access Object

In order to load data from the database, I created Expense.java to store each record and ExpenseDao.java to query and update the database.

Create a controller to populate data

Next, I implemented a Java controller class to populate data from the database. The controller has to extend SelectorComposer so that it can inject Spreadsheet objects for me.

public class BudgetComposer extends SelectorComposer<Component> {
    @Wire
    private Spreadsheet spreadsheet;
    ...
}

@Wire can inject a Spreadsheet object on the page, that's why I didn't call any constructor like new Spreadsheet().

Range API

Then, I needed to set data into cells by Range. One Range object can represent one or more cells/rows/columns, or even one sheet. I can get a Range object with a factory method Ranges.range(Sheet targetSheet, int rowIndex, int columnIndex). For example, Ranges.range(currentSheet, 0, 0) represents A1.

To show data in a cell, just call range.setCellValue(). So the code is quite straightforward. After querying a list of Expense, I can populate data into cells in a loop like:

private void fillExpenses(List<Expense> list) {
    for (int i = 0; i < list.size(); i++) {
        Expense expense = list.get(i);
        Ranges.range(spreadsheet.getSelectedSheet(), START_ROW + i, 1)
            .setCellValue(expense.getQuantity());
        Ranges.range(spreadsheet.getSelectedSheet(), START_ROW + i, 2)
            .setCellValue(expense.getSubtotal());
    }
}

Result

I was able to quickly turn my colleague’s manual Excel routine into an automated Web app. Now whenever we access the budget report page, Keikai queries the data and displays
it within the report template like:

Try it yourself

If you find this article interesting, there are more examples and demos on Keikai’s website. Or you can run the example project on github.