PB转纯BS工具

pcwe2002

已于 2024-02-01 13:39:13 修改

阅读量730

点赞数

文章标签： pb转bs pb转web

于 2023-09-18 11:15:55 首次发布

本文链接：https://blog.youkuaiyun.com/pcwe2002/article/details/132969423

版权

pbtoweb

Convert Powerbuilder UI to web Automatically.

支持转换控件

Window
DataWindow
CommandButton
CheckBox
RadioButton
Tab
DropdownListbox
StaticText
EditMask
SinglelineEdit
GroupBox
UserObject
Progress
Picture
TreeView

转换功能

窗口转换
对象转换
事件转换
全局函数
嵌入式SQL

使用说明：

如未安装nodejs, 需要安装nodejs，可以 https://nodejs.org/en 下载安装
导出pb代码，包括窗口和继承的对象到一个目录（如示例中的pbocde目录中）,也可以使用tool/pbldump 工具导出整个pbl到指定文件夹中
进入命令行窗口cmd, 输入以下命令安装pbtoweb

npm i pbtoweb -g

如果要转化单独的窗口，输入命令

pbtoweb convert d:/pbcode w_test_amis d:/demo/page/w_test_amis.js --js

如需转换所有对象

pbtoweb convert d:/pbcode all d:/demo/page/index.js --js

窗口将转化为web窗口form.js, 参数说明如下：

参数	说明
convert	执行的命令
pbcode	pb导出的源码目录,需要包括继承的对象
w_test_amis	源码的窗口名或者all,为all表示导出所有对象
d:/w_test_amis.js	导出的文件名或者文件夹（参数为all时只找文件夹)
--js	导出为js窗口文件

单独网页中查看

下载源码的文件夹demo
放到文件服务器中，如ngnix等，或者直接放到下载的satrda的 server/public 目录, 运行satserver.exe
浏览器输入 http://127.0.0.1:5555/demo 其中demo/page文件夹中是导出的所有文件

在satweb中显示效果

将生成的form.js放到 server\plugins\web\dist\data\page 目录下面,并运行satserver.exe
浏览器输入 http://127.0.0.1:5555/webui ,如果未配置数据库，请参考http://www.satrda.com/doc/satweb/config.html 中的开始使用配置
在系统管理->菜单管理中随意找一个菜单，点击修改修改-> 组件路径:amispage, 路由地址为 /data/page/vd.js 并保存。
刷新浏览器进入菜单可以看到效果。参考demo/vd.js 中的事件可以写实现自己的事件，代码基本和pb一样了解更多satweb可以进入 http://www.satrda.com/doc/satweb/config.html

在amis网站上查看效果

命令行运行以下命令,会导出amis的json文件

pbtoweb convert d:/pbcode w_test_amis d:/out.json --demo

打开d:/out.json并复制文本
进入 amis网站, 找一个示例点击编码代码
粘贴就可以

代码说明

导出后的form.js类似这样

class w_test_web extends pbwindow {
    
  constructor(options) {
    let props = {
      "name": "w_test_web",
      "width": 694,
      "height": 330,
      "titlebar": "true",
      "title": "Untitled",
      "controlmenu": "true",
      "minbox": "true",
      "maxbox": "true",
      "resizable": "true",
      "backcolor": "#F0F0F0",
      "icon": "AppIcon!",
      "center": "true"
    };
    Object.assign(props, options);
    super(props);
  }
    // Events
  create() {
    this.cb_2 = create(commandbutton, {
      "name": "cb_2",
      "x": 198,
      "y": 58,
      "width": 100,
      "height": 32,
      "taborder": "20",
      "textsize": 12,
      "weight": "400",
      "facename": "Arial",
      "text": "按钮二",
      "events": {
        "clicked": "cb_2_clicked"
      }
    }, this);
    this.cb_1 = create(commandbutton, {
      "name": "cb_1",
      "x": 87,
      "y": 60,
      "width": 100,
      "height": 32,
      "taborder": "10",
      "textsize": 12,
      "weight": "400",
      "facename": "Arial",
      "text": "按钮一",
      "events": {
        "clicked": "cb_1_clicked"
      }
    }, this);
    this.control = [this.cb_2, this.cb_1];
  }

  destroy() {
    destroy(this.cb_2);
    this.cb_2 = null;
    destroy(this.cb_1);
    this.cb_1 = null;
  }

  cb_2_clicked() {//
  }

  cb_1_clicked() {//messagebox("", cb_1.text)
  }

  onOpen() {
  }

  onResize(sizetype, newwidth, newheight) {
  }

  onClose() {
  }
}

代码事件对应关系

JS事件	PB事件	说明
onOpen	open	窗口打开,如没有可自行添加
onResize	resize	窗口改变大小,如没有可自行添加
onClose	close	窗口关闭,如没有可自行添加
cb_1_clicked	click!	名称为cb_1控件的click事件，根据按钮的click事件自动生成

程序会自动转化代码，也可以在事件中添加自己的处理代码，控件操作和pb中基本一致

  ...
  onResize(sizetype, newwidth, newheight) {
    this.cb_1.x = 10;
    this.cb_1.y = 100;
    this.cb_1.resize(100, 30);
  }

  async cb_3_clicked(e, props) {
    let ll_rtn = await PB.messageBox("消息", "您好", "", "YesNo!");
    if (ll_rtn == 1)  {
      this.tab_1.tabpage_2.cbx_1.checked = true;
      this.tab_1.tabpage_2.cbx_2.checked = false;
    } else {
      this.tab_1.tabpage_2.cbx_2.checked = true;
      this.tab_1.tabpage_2.cbx_1.checked = false;
    }
    console.log(ll_rtn);
  }


  cb_2_clicked(e, props) {
    // code
    this.tab_1.tabpage_2.sle_1.text = "amis演示";
    this.tab_1.tabpage_2.cbx_2.checked = true;
  }


  cb_1_clicked(e, props) {
    // code
    this.tab_1.tabpage_1.dw_1.retrieve()
  }

对象补充

我实现了常用的pb标准对象和函数，标准对象和函数可以在pbvm.js中进行查看, 代码如下：

...
let PB = {
    create(cls, options, parent2) {
      const a = new cls(options, parent2);
      return a;
    },
    destroy(obj) {
    },
    trim(str) {
      return str.trim();
    },
    lefttrim(str) {
      return str.trimStart();
    },
    righttrim(str) {
      return str.trimEnd();
    },
    ...
    //可以补充自己的函数在这里 
}
...
// checkbox控件,可以参考补充控件
class checkbox extends windowobject {
  _className = "checkbox";
  toUI(options) {
    const attr = this._pbprops;
    let actl = super.toUI(options);
    delete actl.tpl;
    actl.type = "checkbox";
    actl.option = attr.text;
    return actl;
  }
  get checked() {
    return this.text;
  }
  set checked(value) {
    this.text = !!value;
  }
}
root.checkbox = checkbox;

如果代码中有没有找到的对象，如一些第三方对象，会自动在other.js中定义该对象，如果没有添加的也可以自己在other.js中添加实现，添加后可以正常运行,如

(function(root) {
    root = root || global

//实现 uo_webbrowser,代码中使用了uo_webbrowser可以正常运行
class uo_webbrowser extends multilineedit {
    _className = 'uo_webbrowser'
}

root.uo_webbrowser = uo_webbrowser;
})(typeof window !== "undefined" ? window : null);

如果用到了第三方控件，如解析json的uo_json，因为用到了第三方dll没办法直接转代码，因为js原生支持json,我们可以在other.js中添加一个uo_json对象，如下:

(function(root) {
    root = root || global
...
//实现 uo_json, 只是举例未完全实现，建议是通过js代码改写,如果使用太多，才构造对象.
class uo_json extends nonvisualobject {
    _className = 'uo_json'
    _json = {};
    set(key, value) {
      _json[key] = value;
    }
}

root.uo_webbrowser = uo_webbrowser;
})(typeof window !== "undefined" ? window : null);

如果一些pb运行函数没有实现，请修改src/pbvm.js进行函数添加或者pb标准对象的实现，并放到demo/common中可以看到效果。如果补充了pbvm.js标准库，请联系我(9091178@qq.com)更新，方便大家使用。感谢贡献力量推动pbtoweb前进。

更多信息，QQ群：836173975