# PB转Web

pbtoweb可以自动将 Powerbuilder 项目包括界面、代码等转换为纯web项目,可以运行在前端。转换后的代码和PB代码类似,也实现了pb的运行库pbvm.js,运中运行库和转换的代码都包括源码,可以在转换后的文件夹中查看。

# 安装NodeJS

  1. 如未安装nodejs, 需要安装nodejs, 可以 https://nodejs.org/en 下载安装
  2. 进入命令行窗口cmd, 输入以下命令安装pbtoweb

如已经安装pbtoweb,先卸载

npm uninstall pbtoweb -g

安装

npm i pbtoweb -g

安装完成后有 集成到PB开发工具导出代码转换 两种使用方式。推荐使用集成到PB开发工具

# 集成到PB开发工具(推荐)

集成到PB开发工具,可以通过PB工具栏一键进行转换当前项目。

# 配置PB工具栏

  1. 打开PB, 右键点击工具栏,在弹出菜单中选择customize...,弹出customize对话框
  2. 选中customize对话框的custom单选框,然后选中一个图标并拖动图标到下面的current toolbar
  3. 双击该图标,在弹出框中command line 输入 cmd /c pbtoweb run,然后点击ok 该命令会执行pbtoweb的run命令,并查找当前目录下面名称为pbtoweb.json的配置文件。

# 配置文件

在PB工程目录下面新建一个配置文件pbtoweb.json,内容如下:

{
	"pbtPath": "./webtest.pbt",
	"serverPath": "D:/SatRDA/server/public/webtest",
	"datawindowPath":"D:/SatRDA/server/plugins/data",
	"apiPath":"D:/server/plugins/erp",
	"openWindow": "w_main",
	"dbms":"erp",
	"openURL1": "chrome --incognito \"http://127.0.0.1:5555/webtest\"",
	"openURL": "http://127.0.0.1:5555/webtest",
  	"exclude": [
    	"n_satapi"
	]
}
属性 说明
pbtPath pbt文件路径,将导出并转换该pbt文件中包括的pbl对象
serverPath 转换后的文件输出到服务器位置,一般为下载的satrda的server/public/自定义目录
datawindowPath 数据窗口目录,一般为下载的satrda的server/plugins/data
apiPath API目录,一般为server/plugins/erp。代码有嵌入式sql语句时,需要设置这个目录,嵌入式sql会转换到all_api.js中,服务端运行时会自动加载。
openWindow 打开的主窗口
dbms 数据库连接的名称,用于sqlca连接数据库。参考配置数据库连接
openURL 转换完成后,打开的浏览器地址。如果要快速加载,可以用http://127.0.0.1:5555/webtest,但是浏览器可能有缓存不能看到数据窗口实时刷新,如果需要实时刷新,可以配置为 chrome --incognito \"http://127.0.0.1:5555/webtest\"表示无痕迹模式
exclude 不需要转换的文件名称或者pbl名称,如:["n_satapi","mypbl"],那么n_satapi对象,和mypbl中的所有对象都不会进行转换。特别适合如果某个文件要使用自己修改的js文件,如文件调用了外部dll,可以配置exclude排除该文件。如果第一次生成时,需要把修改的文件放到服务器上,可以将自己修改的文件可以放在 工程目录/pbtowebtemp/server/对象所在pbl同名文件夹

配置完成后,直接点击工具栏上的前面定义的图标就能看到浏览器打开指定的窗口。建议可以先用自己建立一个小的工程进行尝试。

# 转换示例

  1. 下载PB工程,解压到d:/webtest/pb

界面如下: pb

示例中有连接数据库,修改为自己的数据库。数据窗口可以替换为自己的数据窗口,或者在数据库中建立测试表

CREATE TABLE test1(
	id int primary key,
	name varchar(20),
	image image,
	dt datetime,
	num int,
	price numeric(10, 2) ,
	des nvarchar(255),
	bit bit 
);
  1. 下载satrda服务端并解压,如解压到d:/server

运行satserver.exe

  1. 参考配置数据库连接, 修改名称为erp的数据库连接连接到自己的数据库

  2. 修改配置文件d:/webtest/pb/pbtoweb.json如下:

{
	"pbtPath": "./webtest.pbt",
	"serverPath": "D:/server/public/webtest",
	"datawindowPath":"D:server/plugins/data",
	"apiPath":"D:/server/plugins/erp",
	"openWindow": "w_main",
	"dbms":"erp",
	"openURL1": "chrome --incognito \"http://127.0.0.1:5555/webtest\"",
	"openURL": "http://127.0.0.1:5555/webtest",
  	"exclude": [
    	"n_cst_resize"
	]
}
  1. 点击集成到pb开发工具中集成的按钮进行转换

转换完成后,在浏览器中会显示: web 点击按钮后数据窗口可以检索出数据。自己可以修改PB代码查看修改后的效果。

如果代码中用到了嵌入式SQL语句,转换后要重启服务端,才能使嵌入式SQL起作用。如果第一次转换后嵌入式语句没有修改,不用重启服务端

  1. 其它说明

这个示例中有使用自定义不可视对象,如n_cst_resize,也有检索数据窗口数据。都会转化为相应的JS代码,和原来的原生API一致。

PB代码如下:

// PB的Open事件中有这样的代码
event open;
	inv_resize = create n_cst_resize
	inv_resize.of_SetOrigSize (this.WorkSpaceWidth(), this.WorkSpaceHeight())
	inv_resize.of_register(dw_1, 0, 0, 100, 100)

	dw_1.settransobject(sqlca)
end event

// PB的Resize事件中有这样的代码
event resize;
	inv_resize.Event pfc_Resize (sizetype, This.WorkSpaceWidth(), This.WorkSpaceHeight())
end event

转换后的JS代码如下:

  onOpen() {
    this.inv_resize = create(n_cst_resize);
    this.inv_resize.of_setorigsize(this.workspacewidth(), this.workspaceheight());
    this.inv_resize.of_register(this.dw_1, 0, 0, 100, 100);
    this.dw_1.settransobject(sqlca);
  }

  onResize(sizetype, newwidth, newheight) {
    this.inv_resize.postevent("pfc_resize", sizetype, this.workspacewidth(), this.workspaceheight());
  }

# 代码转换

集成到PB开发工具会一键转换所有程序,如果想要指定转换指定代码,可以通过命令行转换代码。

转换前可以先通过集成到PB开发工具一键转换,会导出相关代码文件。 转换代码有几下3种方式,推荐使用第1种进行转换

  1. 转换窗口和关联对象(推荐)
pbtoweb convert d:/pbcode w_test_amis d:/demo/page/w_test_amis.js --js --r

导出完成后,使用单独的网页中查看的方式,可以快速查看效果

  1. 转化单独的窗口,输入命令
pbtoweb convert d:/pbcode w_test_amis d:/demo/page/w_test_amis.js --js
  1. 转换所有对象
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窗口文件
--r 导出所有关联的对象

# 单独网页中查看

转换后的代码,可以在网页中进行查看

  1. QQ群:836173975下载satrda,找到安装pbtoweb的目录,如:D:\Program Files\nodejs\node_modules\pbtoweb\demo
  2. 将Demo文件夹复制到下载的satrda的 server/public 目录, 运行satserver.exe
  3. 将生成的js文件放到demo文件下的page目录,并修改index.html中窗口名称为自己的窗口, 如:
    // 其中w_test_amis是窗口名
    let w = new w_test_amis();
	  w.show(root);
  1. 浏览器输入 http://127.0.0.1:5555/demo 可以查看效果