Home

Awesome

react-awtk

在线演示

介绍

本项目基于 valence-native 实现，在此对原作者表示感谢。本项目目前处于实验阶段，欢迎大家一起完善。

反应式 GUI 编程已经成为 Web、桌面和移动开发的主流范式，reactjs 是反应式 GUI 编程的主要代表。react-awtk 使得开发者可以用 reactjs 的方式来开发 AWTK 应用程序。

主要特色：

示例

export class CheckButtonPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
    };
  }

  addValue(delta) {
    let value = this.state.value + delta;
    this.setState({ value: value % 2 });
  }

  render() {
    console.log('CheckButtonPage');
    return (
      <Window
        closeCurrent={this.props.closeCurrent}
        animHint="htranslate"
        name={toWindowName(this)}
        closable="confirm"
        onRequestCloseWindow={(element, evt) => {
          console.log(element, evt);
          if (app.confirm('Confirm', 'Are your sure?')) {
            app.closeWindow();
          }
        }}
      >
        <Label x="c" y="100" w="80%" h="30" text={this.state.value} />
        <CheckButton
          x="c"
          y="160"
          w="100"
          h="22"
          text="Click me"
          value={this.state.value}
          onChanged={(element, evt) => {
            this.setState({ value: element.getValue() });
          }}
        />
        <IncDecClose
          x="c"
          y="b"
          w="100%"
          h="40"
          onChanged={delta => {
            this.addValue(delta);
          }}
        />
      </Window>
    );
  }
}

以下以 nodejs 版本为例

准备

请先参考 awtk 建立对应平台的开发环境。

  1. 获取 awtk 并编译
git clone https://github.com/zlgopen/awtk.git
cd awtk; scons; cd -
  1. 获取 awtk-nodejs 并编译
git clone https://github.com/zlgopen/awtk-nodejs.git
cd awtk-nodejs

如果没有安装 node-gyp，请用下列命令安装：

npm install -g node-gyp
node-gyp configure

npm install
npm run build;
  1. 获取 react-awtk 并编译
git clone https://github.com/zlgopen/react-awtk.git
cd react-awtk
npm install
npm run build

运行 demo

cd demo

npm install

python scripts/update_res.py all

npm run build
npm run start

code .

文档

参考资料：