react-awtk
介紹
本項目基於 valence-native 實現，在此對原作者表示感謝。本項目目前處於實驗階段，歡迎大家一起完善。
反應式 GUI 編程已經成爲 Web、桌面和移動開發的主流範式，reactjs 是反應式 GUI 編程的主要代表。react-awtk 使得開發者可以用 reactjs 的方式來開發 AWTK 應用程序。
主要特色：
- 原生的窗口動畫和控件動畫。
- 內置 Router 實現窗口之間的導航。
- JSX 兼容 AWTK Designer 生成的 XML。
- 兼容 AWTK Designer 生成的各種資源。
- 目前支持 nodejs/web，以後會增加對 quickjs 和 jerryscript 的支持。
示例
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 建立對應平臺的開發環境。
- 獲取 awtk 並編譯
git clone https://github.com/zlgopen/awtk.git
cd awtk; scons; cd -
- 獲取 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;
- 獲取 react-awtk 並編譯
git clone https://github.com/zlgopen/react-awtk.git
cd react-awtk
npm install
npm run build
運行 demo
- 進入 demo 目錄
cd demo
- 安裝依賴
npm install
- 生成資源
python scripts/update_res.py all
- 運行
npm run build
npm run start
- 使用 vscode 開發和調試。
code .