愛招飛幫助手冊
目录

IsoBean開發流程

# FastWeb IsoBean開發流程

  在本章節中，我們將以線上聊天室為例說明IsoBean的完整開發流程。

# 1. 基本概念

  在開始學習IsoBean的開發流程前，我們關注一下IsoBean的完整開發流程，各個環節對應的工作內容。

  1. 設計Bean模組(對於非界面顯示型的IsoBean非必須)

  這一步是建立用於界面顯示的Bean模組，Bean模組是IsoBean設計的基礎，IsoBean訪問時顯示的界面都是與Bean繫結的。Bean模組的設計與模組列表的模組設計功能相同。

  1. 設計IsoBean許可權(非必需)

  如果需要像傳統的RestAPI一樣對IsoBean進行許可權控制，可使用此功能進行許可權路徑的分配。如果IsoBean是要公開訪問的，此步驟可忽略。

  1. 設計IsoBean

  IsoBean是在Bean模組的基礎上，增加RestAPI功能的支援，通過RestAPI將獲取到的數據進行處理后，轉換為Bean模組所需的數據格式，交由Bean模組解析並顯示。設計IsoBean所需的工作是繫結Bean模組，設計API處理程式，引入Bean鏈接使之能在IsoBean中顯示。

  1. 發佈IsoBean

  設計完成的IsoBean要使用發佈功能分配發布的使用者。可提供使用者的管理功能許可權。

  1. 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
    //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
    // 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
      //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
      // Make sure to add code blocks to your code group
      • UgTimer01OnTimer：UgTimer01 的 OnTimer 事件，定時發送請求。
        //JScript
function UgTimer01OnTimer(sender)
{
  UgRestApi01.Send;
}
        1
        2
        3
        4
        5
        //PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
  UgRestApi01.Send;
end;
        1
        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
          //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
          // 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
            //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
            // 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
              //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
              // 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

                在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
                //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
                // Make sure to add code blocks to your code group
                FastWeb-Webhook
                數據型IsoBean

                ← 數據型IsoBean→

                Copyright © 2021-2024 愛招飛IsoFace | ALL Rights Reserved