When it comes to ZK, “Ajax without Javascript” had been one of its well-known features, that Java developers can build a rich internet application without any knowledge of Ajax and JavaScript. However, in recent years, the trend is changing. You may have already started using some JavaScript libraries/frameworks like Angular, React or Vue.js to create interactive and modular UI.

ZK always aims to provide innovative ways to help developers ease their job while being able to leverage latest technologies. Since ZK 8 we provided client side data binding API (client binding for short) in conjunction with Angular/React/Web components. With this feature you can not only trigger commands in the server side, but also register callbacks that may be invoked after executing server side commands. Furthermore, in ZK 8.5 we added the Fragment component, by which the developers can combine native HTML elements with ZK MVVM data binding syntax to make the static page to be dynamic in client side.

We are, nonetheless, not satisfied for what we have done. We often ask ourselves: Is there any way to ease the integration of ZK and other front-end technology? And now, we have the answer: Why not use 100+ built-in ZK components in client side to boost productivity? With the ready-to-use components, front-end developers can also reduce the development time and thus enhance the efficiency.

Sounds interesting to you? Here we present you our first early-stage prototype with React.

Usage

Using ZK components in React will be easy.

1. First, import some ZK component classes you prefer.

import { 
  Borderlayout, Center, South,
  Textbox,
  Splitlayout,
  Panel, Panelchildren } from 'zk-react-components';
  • Line 5: Note that this is for demonstration purpose only. The final package name is not yet decided.

2. Just like other common components, you can set some properties, bind some events, etc.

For demonstration, we build an interactive demo webapp in React: LESS CSS Previewer – Powered by React & ZK. After opening the demo app, input some LESS syntax on the left textbox, and the compiled CSS result will be shown on the right textbox on the fly. If there is any compile error, the bottom area will show the detailed information.

zk-react-less-demo

Let’s see how we use these components:

render() {
  return (
    <React.Fragment>
      <nav style={{height: '2em'}}>
        <button onClick={this.sample1}>Sample 1</button>
        <button onClick={this.sample2}>Sample 2</button>
      </nav>
      <div style={{height: "calc(100% - 2em)", width: '100%'}}>
        <Borderlayout vflex="1" hflex="1">
          <Center>
            <Splitlayout hflex="1" vflex="1" orient="horizontal">
              <Panel title="LESS" hflex="1" vflex="1">
                <Panelchildren>
                  <CodeMirror value={this.state.less}
                    onBeforeChange={(editor, data, value) => {
                      this.setState({less: value});
                    }}
                    onChange={this.generateCss}
                    options={CODEMIRROR_OPTION} />
                </Panelchildren>
              </Panel>
      // omitted
    </React.Fragment>
  );
}
  • Line 9-10: Use Borderlayout and Center for layout
  • Line 11: Use Splitlayout for splitting Center into two areas
  • Line 12,13: Use Panel and Panelchildren to enclose the react-codemirror2 editor

When received the event, the event object is a zk.Event(JSDoc) instance. You can get the event properties to set the state. For example, there is a value property in the event object of onChange event. When you modify the content of Textbox, an onChange event will be triggered and you can get the new content by event.value.

Take a look at this snippet:

handleAuthorName(e) {
  this.setState({authorName: e.value});
}

render() {
  return (
    <Hlayout>
      <Label value="Author Name :" />
      <Textbox value={this.state.authorName}
        onChange={this.handleAuthorName} />
    </Hlayout>
  );
}
  • Line 2: Use e.value to get the current value of Textbox
  • Line 9-10: Textbox is bound an onChange event handler. And the value is an one-way binding to state authorName.

Demo

The demo can be accessed by LESS CSS Previewer – Powered by React & ZK. A GitHub project is also available.



If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply