甘特圖展示

# FastWeb 甘特圖展示

甘特圖展示的 IsoBean 參照甘特圖展示進行改進。可在呼叫URL的同時傳入查詢參數 date，用於查詢指定日期之後的數據。

# 1. 設計Bean模組

點選 [云服務工具] - [Bean模組(Web)]，打開Bean模組管理界面，點選 [新增] 按鈕，建立一個Bean模組，設定示例如下。點選 [儲存] 按鈕。

選擇剛才建立的Bean，點選 [Bean設計] 按鈕，進入Bean設計的主界面，設計的界面樣式如下。界面樣式與指令碼設計部分的配置參考甘特圖展示。

Bean模組在原有模組的基礎上修改的部分如下。

UgWebRunFrameOnAfterRunScript 中程式修改如下。

//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
  UgGanttChart01.GanttOptions.Lang = UGMM.LT("cn");
  
  UgPageControl01.TabIndex = 0;
  cdsTask.DataNodeName = "FastWeb";

  if (UniApplication.Parameters.Values["date"] != ""){
    cdsTask.CommandText = "Select * from Task_Gantt WHERE pStart >= '" + UniApplication.Parameters.Values["date"] + "' Order By pID";
  }
  else{
    cdsTask.CommandText = "Select * from Task_Gantt Order By pID";
  }
  cdsTask.Open;

  btnAddTask.OnClick = &btnAddTaskOnClick;
  btnEditTask.OnClick = &btnEditTaskOnClick;
  btnDelTask.OnClick = &btnDelTaskOnClick;
  btnCreateGantt.OnClick = &btnCreateGanttOnClick;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//PasScript
procedure UgWebRunFrameOnAfterRunScript(sender: tobject);
begin
  UGMM.LC(Self);
  UgGanttChart01.GanttOptions.Lang := UGMM.LT('cn');
  
  UgPageControl01.TabIndex := 0;
  cdsTask.DataNodeName := 'FastWeb';

  if (UniApplication.Parameters.Values['date'] <> '') then
    cdsTask.CommandText = 'Select * from Task_Gantt WHERE pStart >= ''' + UniApplication.Parameters.Values['date'] + ''' Order By pID'
  else
    cdsTask.CommandText = 'Select * from Task_Gantt Order By pID';
  cdsTask.Open;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Make sure to add code blocks to your code group

新增 UgWebRunFrameOnAjaxEvent 事件，設定如下。

//JScript
function UgWebRunFrameOnAjaxEvent(sender,eventname,params)
//如果接收到WebSocket資訊傳來的查詢資訊，則更新查詢
//
//{
//  "username": "demo",       
//  "action": "callback", 
//  "tag":"0",     
//  "data": {
//    "callbackcomponent": "wb-vis-0006_ganttchart",    
//    "callbackeventname": "update",  
//    "callbackparams": [              
//      {
//        "paramname": "date",
//        "paramvalue": "2022-01-01"
//      }
//    ]
//  }
//}
{
  if (SameText(eventname,"update"))
  {
    cdsTask.Close;
    if (Params.Values["date"] != ""){
      cdsTask.CommandText = "Select * from Task_Gantt WHERE pStart >= '" + Params.Values["date"] + "' Order By pID";
    }
    else{
      cdsTask.CommandText = "Select * from Task_Gantt Order By pID";
    }
    cdsTask.Open;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//PasScript
procedure UgWebRunFrameOnAjaxEvent(sender:TObject;eventname:String;params:TStringList);
//如果接收到WebSocket資訊傳來的查詢資訊，則更新查詢
//
//{
//  "username": "demo",       
//  "action": "callback", 
//  "tag":"0",     
//  "data": {
//    "callbackcomponent": "wb-vis-0006_ganttchart",    
//    "callbackeventname": "update",  
//    "callbackparams": [              
//      {
//        "paramname": "date",
//        "paramvalue": "2022-01-01"
//      }
//    ]
//  }
//}
begin
  if SameText(eventname,'update') then
  begin
    cdsTask.Close;
    if (Params.Values['date'] <> '') then
      cdsTask.CommandText = 'Select * from Task_Gantt WHERE pStart >= ''' + Params.Values['date'] + ''' Order By pID'
    else
      cdsTask.CommandText = 'Select * from Task_Gantt Order By pID';
    cdsTask.Open;
  end;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// Make sure to add code blocks to your code group

# 2. 設計IsoBean模組

點選 [云服務工具] - [IsoBean模組管理]，打開IsoBean模組管理界面，點選 [新增] 按鈕，按照以下提示建立一個IsoBean模組。點選 [儲存] 按鈕。

建立完成後，選擇建立的IsoBean，點選 [API設計]，建立的API請按照以下方式進行設定。

//JScript
function RestAPI()
{
  var url,date,tag;
  date = IIF(URLParams.Values["date"]=="",APIParams.Values["date"],URLParams.Values["date"]);
  tag = iif(URLParams.Values["tag"]=="",APIParams.Values["tag"],URLParams.Values["tag"]);
  url = "/?bean="+Var_Bean + "&userkey=" + Var_UserKey + "&language=" + Var_Language + "&date=" + date + "&tag=" + tag;
  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;
  date: String;
  tag: String;
begin
  date := iif(URLParams.Values['date']='',APIParams.Values['date'],URLParams.Values['date']);
  tag := iif(URLParams.Values['tag']='',APIParams.Values['tag'],URLParams.Values['tag']);
  url := '/?bean='+Var_Bean + '&userkey=' + Var_UserKey + '&language=' + Var_Language + '&date=' + date + '&tag=' + tag; 
  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
19
20

// Make sure to add code blocks to your code group

# 3. 發佈IsoBean

儲存后，返回列表界面，選擇剛才建立的IsoBean模組，點選 [IsoBean發佈]，打開 IsoBean 發佈界面。

選擇要發佈的使用者(admin)，點選 [IsoBean 選擇...]，從打開的IsoBean列表中選擇剛才建立的IsoBean模組，雙擊匯入至發佈列表中，點選 [儲存] 按鈕，然後點選 [確定] 按鈕關閉發佈界面。

重新返回API設計界面，點選 [測試] 圖示按鈕，打開界面。點選 [Send] 按鈕檢視運行的結果。如果返回的結果中包含資訊，則IsoBean建立成功。

按照本節開頭的方式將IsoBean發佈給其他使用者，之後，可使用 http://localhost:8888/?isobean=IB_wb-vis-0006_ganttchart&userkey={user_guid}&date={date} (opens new window) 來進行查詢。{user_guid} 為發佈使用者的ID，{date} 為查詢的起始日期。

當此 IsoBean 處於運行狀態時，可使用 WebSocket 發送以下訊息模板以更新查詢資訊。

{
  "username": "demo",    //運行IsoBean的使用者，修改爲實際運行的使用者
  "action": "callback", 
  "tag": "0",     
  "data": {
    "callbackcomponent": "wb-vis-0006_ganttchart",    
    "callbackeventname": "update",  
    "callbackparams": [              
      {
        "paramname": "date",
        "paramvalue": "2022-01-01"  //查詢的內容，修改爲想查詢的內容
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在FastWeb中使用以下示例來更新。

//JScript
{
  var l;
  l = new TStringlist();
  //查詢的內容，修改爲想查詢的內容
  l.Values["date"] = "2022-01-01";
  //demo 處修改爲實際運行的使用者名稱稱
  UGMM.SendWsMsg("demo","callback","wb-vis-0006_ganttchart","0","update",l);
  l.Free;
}

1
2
3
4
5
6
7
8
9
10

//PasScript
var
  l: TStringList;
begin
  l := TStringList.Create();
  //查詢的內容，修改爲想查詢的內容
  l.Values['date'] := '2022-01-01';
  //demo 處修改爲實際運行的使用者名稱稱
  UGMM.SendWsMsg('demo','callback','wb-vis-0006_ganttchart','0','update',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

← 範例彙總環繞風景展示→