IsoBean开发流程
# FastWeb IsoBean开发流程
在本章节中，我们将以在线聊天室为例说明IsoBean的完整开发流程。
# 1. 基本概念
在开始学习IsoBean的开发流程前，我们关注一下IsoBean的完整开发流程，各个环节对应的工作内容。
- 设计Bean模块(对于非界面显示型的IsoBean非必须)
这一步是创建用于界面显示的Bean模块，Bean模块是IsoBean设计的基础，IsoBean访问时显示的界面都是与Bean绑定的。Bean模块的设计与模块列表的模块设计功能相同。
- 设计IsoBean权限(非必需)
如果需要像传统的RestAPI一样对IsoBean进行权限控制，可使用此功能进行权限路径的分配。如果IsoBean是要公开访问的，此步骤可忽略。
- 设计IsoBean
IsoBean是在Bean模块的基础上，增加RestAPI功能的支持，通过RestAPI将获取到的数据进行处理后，转换为Bean模块所需的数据格式，交由Bean模块解析并显示。设计IsoBean所需的工作是绑定Bean模块，设计API处理程序，引入Bean链接使之能在IsoBean中显示。
- 发布IsoBean
设计完成的IsoBean要使用发布功能分配发布的用户。可提供用户的管理功能权限。
- IsoBean运行管理
可对IsoBean的运行进行监控与管理，使IsoBean的运行更高效。
# 2. 设计Bean模块
创建Bean模块是设计IsoBean的基础工作，为IsoBean的图形界面做基础准备。
点击 [云服务工具] - [Bean模块(Web)]，打开Bean模块管理的界面，点击 [添加] 按钮，创建一个名称为 wb-vis-0008_chatroom的Bean模块，设置的示例如下。点击 [保存] 按钮。
选择刚才创建的Bean，点击 [Bean设计] 按钮，进入Bean设计的主界面，设计的界面样式如下。
# 2.1. 控件说明
- UgLabel01
该控件显示为标题。
| 属性 | 取值 | 说明 |
|---|---|---|
| Alignment | taCenter | 设置文字的对齐方式 |
| AutoSize | False | 设置控件尺寸大小是否跟随字符数量发生变化 |
| Caption | 网络聊天室 | 标签的取值 |
| Font.Size | 14 | 字体尺寸大小 |
| Font.Style.fsBold | True | 设置字体是否加粗显示 |
- UgMemo01
控件显示为文本框，用于显示聊天记录等信息。
| 属性 | 取值 | 说明 |
|---|---|---|
| Font.Size | 12 | 字体尺寸大小 |
- UgEdit01
控件显示为文本编辑框，用于编辑要发送的文本信息。
| 属性 | 取值 | 说明 |
|---|---|---|
| Font.Size | 14 | 字体尺寸大小 |
- UgDBGrid01
用于显示用户与会话信息。字段信息设置如下。
| 属性 | 取值 | 说明 |
|---|---|---|
| DataSource | UgDataSource01 | 设置数据来源 |
| LoadMask.Enabled | False | 是否显示加载进度条 |
| WebOptions.Paged | False | 是否分页显示 |
- UgDataSource01
设置数据源信息。
| 属性 | 取值 | 说明 |
|---|---|---|
| DataSet | UgFDMenTable01 | 设定数据集 |
- UgFDMenTable
存储与内存中的数据集，通过JSON引入数据。
- UgRestApi01
RestAPI客户端。
- UgTimer01
定时器，用于定时触发事件。
| 属性 | 取值 | 说明 |
|---|---|---|
| Interval | 5000 | 设定时间间隔 |
- UgFSButton01
按钮图标。
| 属性 | 取值 | 说明 |
|---|---|---|
| Caption | 发送 | 按钮上显示的文字 |
| Font.Size | 14 | 字体大小 |
| StyleButton | GoogleBlue1Round | 设置按钮的样式 |
# 2.2. 事件设置
- UgWebRunFrame-OnAfterRunScript：
UgWebRunFrame的OnAfterRunScript事件，执行初始运行状态下的设置。
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
UGMM.LC(Self);
UgRestApi01.Server = Unisession.Url;
UgRestApi01.Params.Values["restapi"] = "getframemaps";
UgRestApi01.Params.Values["ModuleCode"] = "wb-vis-0008_chatroom";
UgRestApi01.Send;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//PasScript
procedure UgWebRunFrameOnAfterRunScript(sender:tobject);
begin
UGMM.LC(Self);
UgRestApi01.Server := Unisession.Url;
UgRestApi01.Params.Values['restapi'] = 'getframemaps';
UgRestApi01.Params.Values['ModuleCode'] = 'wb-vis-0008_chatroom';
UgRestApi01.Send;
end;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// Make sure to add code blocks to your code group
UgRestApi01OnResultData：UgRestApi01 的 OnResultData 事件，执行解析运行的IsoBean对话列表，并显示在数据集中。
//JScript
function UgRestApi01OnResultData(sender,aaresult)
{
if (UgFDMemTable01.Active)
UgFDMemTable01.EmptyDataSet;
UgFDMemTable01.LoadFromJSONString(aaresult);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure UgRestApi01OnResultData(sender:tobject,aresult: string);
begin
if (UgFDMemTable01.Active) then
UgFDMemTable01.EmptyDataSet;
UgFDMemTable01.LoadFromJSONString(aresult);
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- UgTimer01OnTimer：
UgTimer01的OnTimer事件，定时发送请求。
//JScript
function UgTimer01OnTimer(sender)
{
UgRestApi01.Send;
}
1
2
3
4
5
2
3
4
5
//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
UgRestApi01.Send;
end;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
- UgFSButton01OnClick：
UgFSButton01的OnClick事件，向列表中的其它会话发送WebSocket消息，达到群发的目的。
//JScript
function UgFSButton01OnClick(sender)
{
UgTimer01.Enabled = False;
var l;
UgFDMemTable01.First;
l = new TStringList();
while (!UgFDMemTable01.Eof)
{
l.Values["user"] = UGMM.Informations.Values["UserName"];
l.Values["message"] = UgEdit01.Text;
UGMM.SendWsMsg(UgFDMemTable01.FieldByName("username").AsString,"callback","wb-vis-0008_chatroom",UniApplication.Parameters.Values["tag"],"update",l);
UgFDMemTable01.Next;
}
UgTimer01.Enabled = True;
UgEdit01.Text = "";
l.Free;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//PasScript
procedure UgFSButton01OnClick(sender: tobject);
var
l: TStringList;
begin
UgTimer01.Enabled := False;
UgFDMemTable01.First;
l := TStringList.Create();
while not UgFDMemTable01.Eof do
begin
l.Values['user'] := UGMM.Informations.Values['UserName'];
l.Values['message'] := UgEdit01.Text;
UGMM.SendWsMsg(UgFDMemTable01.FieldByName('username').AsString,'callback','wb-vis-0008_chatroom','update',l);
UgFDMemTable01.Next;
end;
UgTimer01.Enabled := True;
UgEdit01.Text := '';
l.Free;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Make sure to add code blocks to your code group
- UgWebRunFrameOnAjaxEvent：
UgWebRunFrame的OnAjaxEvent事件。用于接收WebSocket消息。
//JScript
function UgWebRunFrameOnAjaxEvent(sender,eventname,params)
{
if (SameText(eventname,"update"))
{
var user = params.Values["user"];
var msg = params.Values["message"];
ugmemo01.Lines.Add(user+" "+ formatdatetime("c",now()) + ":");
ugmemo01.Lines.Add(msg);
ugmemo01.Lines.Add("");
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
//PasScript
procedure UgWebRunFrameOnAjaxEvent(sender:tobject;eventname,params:string);
var
user,msg: string;
begin
if (SameText(eventname,'update')) then
begin
user := params.Values['user'];
msg := params.Values['message'];
ugmemo01.Lines.Add(user+' '+ formatdatetime('c',now()) + ':');
ugmemo01.Lines.Add(msg);
ugmemo01.Lines.Add('');
end;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
// Make sure to add code blocks to your code group
设置完成后保存此模块。
# 3. 设计IsoBean模块
点击 [云服务工具] - [IsoBean模块管理]，打开IsoBean模块管理界面，点击 [添加] 按钮，按照以下提示创建一个IsoBean模块。点击 [保存] 按钮。
创建完成后，选择创建的IsoBean，点击 [API设计]，创建的API请按照以下方式进行设置。
//JScript
function RestAPI()
{
var url,tag;
tag = iif(URLParams.Values["tag"] == "",APIParams.Values["tag"],URLParams.Values["tag"]);
url = "/?bean="+Var_Bean + "&userkey=" + Var_UserKey +"&tag=" + tag + "&language=" + Var_Language;
Result = " <html>"
+ " <body style=\"margin: 0px;height: 100%;width: 100%;\">"
+ " <iframe width=\"100%\" height=\"100%\" frameborder=\"no\" border=\"0\" marginwidth=\"0px\" marginheight=\"0px\" scrolling=\"no\" allowtransparency=\"yes\" src=\"" + url + "\""
+ " width=\"100%\""
+ " height=\"100%\""
+ " >"
+ " </iframe>"
+ " </body>"
+ " </html>";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//PasScript
function RestAPI:String;
var
url: String;
tag: String;
begin
tag := iif(URLParams.Values['tag'] = '',APIParams.Values['tag'],URLParams.Values['tag']);
url := '/?bean='+Var_Bean + '&userkey=' + Var_UserKey + '&tag=' + tag + '&language=' + Var_Language;
Result := ' <html>'
+ ' <body style="margin: 0px;height: 100%;width: 100%;">'
+ ' <iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0px" marginheight="0px" scrolling="no" allowtransparency=\"yes\" src="' + url + '"'
+ ' width="100%"'
+ ' height="100%"'
+ ' >'
+ ' </iframe>'
+ ' </body>'
+ ' </html>';
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Make sure to add code blocks to your code group
# 4. 发布IsoBean
保存后，返回列表界面，选择刚才创建的IsoBean模块，点击 [IsoBean发布]，打开 IsoBean 发布的界面。
左侧的用户列表选择要发布的用户，右侧点击 [IsoBean 选择...] ，打开IsoBean列表界面，选择刚才创建的IsoBean，导入至此，点击右上角的 [保存] ，然后点击下方的 [发布] 按钮进行发布，然后点击 [预览] 按钮，可查看发布的链接，可直接在界面中预览，或者将预览的链接复制至浏览器中查看。
在浏览器中查看时，可打开窗口发送消息进行测试。
按照本节开头的方式将IsoBean发布给其他用户，之后，可使用 http://localhost:8888/?isobean=IB_wb-vis-0008_chatroom&userkey={user_guid}&tag={tag} (opens new window) 来打开页面。{user_guid} 为发布用户的ID，{tag} 为自定义参数，用于配合WS消息实现定向发布。
当此 IsoBean 处于运行状态时，可使用 WebSocket 发送以下消息模板以更新查询信息。
{
"username": "demo", //WebSocket消息发送的目标用户
"action": "callback", //WebSocket消息告知Bean执行的动作
"tag": "0", //URL参数定义的标识组，可用于区分同一个IsoBean的不同场景的实例
"data": {
"callbackcomponent": "wb-vis-0008_chatroom", //执行动作的目标Bean模块的名称
"callbackeventname": "update", //执行触发OnAjaxEvent事件的 eventname(事件名称)
"callbackparams": [ //传输的键值，可以有一对或者多对
{
"paramname": "user", //WS参数1名称
"paramvalue": "demo" //WS参数1取值
},
{
"paramname": "message", //WS参数2名称
"paramvalue": "212" //WS参数2取值
}
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
在FastWeb中使用以下示例来更新。
//JScript
{
var l;
l = new TStringlist();
//查询的内容，修改为想查询的内容
l.Values["user"] = "demo";
l.Values["message"] = "212";
//demo 处修改为实际运行的用户名称
UGMM.SendWsMsg("demo","callback","wb-vis-0008_chatroom","0","update",l);
l.Free;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//PasScript
var
l: TStringList;
begin
l := TStringList.Create();
//查询的内容，修改为想查询的内容
l.Values['query'] := 'A';
//demo 处修改为实际运行的用户名称
UGMM.SendWsMsg('demo','callback','wb-vis-0008_chatroom','0','updatequery',l);
l.Free;
end;
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// Make sure to add code blocks to your code group