FastWeb之甘特圖展示(WEB)

1. 說明

  採用與資料庫連線的方式，通過任務的錄入更新，以產生甘特圖，展示相關的功能。在使用此示例前，請先檢查 節點資料庫 中的 FastWeb 連線設定是否有效。

  通過本範例學習，可以掌握甘特圖圖表的產生方式，並結合資料庫實體實現甘特圖的展示功能。

  甘特圖是專案管理最常用的圖表之一，如果要策劃落地一個大型活動專案，爲了合理地規劃活動程序，通常會將整個專案劃分爲細緻的任務，並希望能清晰地列出每個任務的歷時情況以及它們之間的關係。對這一需求，一般的表格就顯得有些不足了，尤其對於時間上有重疊的多項活動，檢視起來並不方便。這個時候，甘特圖就就可以發揮其作用。簡單來說，甘特圖就是將任務與時間聯繫起來的一種圖表形式，能夠清晰展示每個任務的歷時長短。

  FastWeb中也整合了甘特圖展示的控制元件，可結合資料庫來實現動態展示的相關功能。接下來將介紹用於結合使用的範例。

2. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  1：TUgPageControl元件，控制元件名稱為UgPageControl01。

  2：TUgButton元件，控制元件名稱為btnAddTask。

  3：TUgButton元件，控制元件名稱為btnEditTask。

  4：TUgButton元件，控制元件名稱為btnDelTask。

  5：TUgButtton元件，控制元件名稱為btnCreateGantt。

  6：TUgDBGrid元件，控制元件名稱為UgDBGrid01。

  7：TUgDataSource元件，控制元件名稱為dsTask。

  8：TUgClientDataSet元件，控制元件名稱為cdsTask。

  9：此控制元件為顯示于甘特圖示簽頁中的TUgGanttChart元件，控制元件名稱為GanttChart01。

• UgWebRunFrame屬性設定

  • Height：設定頁面高度=768。
  • Width：設定頁面寬度=1024。

• 1：UgPageControl01屬性設定

    選擇此控制元件后，在窗體結構與檢視器中點選左上角的新增按鈕，新增兩個標籤頁，分別為UniTabSheet01與UniTabSheet02。分別修改Caption屬性為任務與甘特圖。

  • Align：設定對齊的選項，設定為alClient。

• UgPanel01屬性設定

    此控制元件顯示于標籤頁任務中，作為操作按鈕的佈局容器使用。

  • Align：設定控制元件的對齊方式，設定為alTop。

• 2：btnAddTask屬性設定

  • Caption：設定顯示的文字內容，設定為新增任務。

• 3：btnEditTask屬性設定

  • Caption：設定顯示的文字內容，設定為編輯任務。

• 4：btnDelTask屬性設定

  • Caption：設定顯示的文字內容，設定為刪除任務。

• 5：btnCreateGantt屬性設定

  • Caption：設定顯示的文字內容，設定為產生甘特圖。

• 6：UgDBGrid01屬性設定

    此控制元件位於標籤頁任務中。

  • Align：設定控制元件的對齊方式，設定為alClient。
  • ReadOnly：設定控制元件表格是否為只讀的模式，設定為True。

    雙擊此控制元件，打開欄位編輯對話方塊，按照圖示進行數據表格的設定。

  

• 7：dsTask屬性設定

  • DataSet：設定繫結顯示的數據集，設定為cdsTask。

• 9：UgGanttChart01屬性設定

    此控制元件顯示在標籤頁甘特圖中。

  • Align：設定對齊方式，設定為alClient。

3. 程式設計

  點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式不需要引用單元。

3.1. 程式初始設定

  該程式的程式初始設定包含多語言的設定以及數據集的初始化等操作。

//JScript
  UGMM.LC(Self);
  UgGanttChart01.GanttOptions.Lang = UGMM.LT("cn");
  
  UgPageControl01.TabIndex = 0;
  cdsTask.DataNodeName = "FastWeb";
  cdsTask.CommandText = "Select * from Task_Gantt Order By pID";
  cdsTask.Open;
  
  btnAddTask.OnClick = &btnAddTaskOnClick;
  btnEditTask.OnClick = &btnEditTaskOnClick;
  btnDelTask.OnClick = &btnDelTaskOnClick;
  btnCreateGantt.OnClick = &btnCreateGanttOnClick;

//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
  UgGanttChart01.GanttOptions.Lang := UGMM.LT('cn');
end;

Begin
  UgPageControl01.TabIndex := 0;
  cdsTask.DataNodeName := 'FastWeb';
  cdsTask.CommandText := 'Select * from Task_Gantt Order By pID';
  cdsTask.Open;
End.

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

  除初始化的相關設定外，還包含了一編輯界面產生的函式。

//JScript
function GetEditorForm(){
  Result = new TUgWebForm(UniApplication);
  Result.FreeOnClose = false;
  Result.Width = 400;
  Result.Height = 530;
  Result.Bordericons = biSystemMenu;
  
  var edpID = new TUgNumberEdit(Result);
  edpID.Name = "edpID";
  edpID.Height = 22;
  edpID.Enabled = true;
  edpID.Parent = Result;
  edpID.FieldLabel = UGMM.LT("任務ID");
  edpID.FieldLabelSeparator = "";
  edpID.FieldLabelAlign = laLeft;
  edpID.Align = alTop;
  edpID.Margins.Left = 8;
  edpID.Margins.Right = 8;
  edpID.AlignWithMargins = true;
  edpID.EmptyText = "pID";
  
  var edpName = new TUgEdit(Result);
  edpName.Name = "edpName";
  edpName.Height = 22;
  edpName.Enabled = true;
  edpName.Parent = Result;
  edpName.FieldLabel = UGMM.LT("任務名稱");
  edpName.FieldLabelSeparator = "";
  edpName.FieldLabelAlign = laLeft;
  edpName.Align = alTop;
  edpName.Margins.Left = 8;
  edpName.Margins.Right = 8;
  edpName.AlignWithMargins = true;
  edpName.EmptyText = UGMM.LT("請輸入任務名稱");
  
  var edpStart =new TUgDateTimePicker(Result);
  edpStart.Name = "edpStart";
  edpStart.Height = 22;
  edpStart.Parent = Result;
  edpStart.FieldLabel = UGMM.LT("任務開始日期");
  edpStart.FieldLabelSeparator = "";
  edpStart.FieldLabelAlign = laLeft;
  edpStart.Align = alTop;
  edpStart.Margins.Left = 8;
  edpStart.Margins.Right = 8;
  edpStart.AlignWithMargins = true;
  edpStart.DateTime = StrToDateTime(FormatdateTime("yyyy-mm-dd",now()) + " 00:00:00");
  edpStart.Kind = tUniDateTime; 
  
  var edpEnd = new TUgDateTimePicker(Result);
  edpEnd.Name = "edpEnd";
  edpEnd.Height = 22;
  edpEnd.Parent = Result;
  edpEnd.FieldLabel = UGMM.LT("任務結束日期");
  edpEnd.FieldLabelSeparator = "";
  edpEnd.FieldLabelAlign = laLeft;
  edpEnd.Align = alTop;
  edpEnd.Margins.Left = 8;
  edpEnd.Margins.Right = 8;
  edpEnd.AlignWithMargins = true;
  edpEnd.DateTime = StrToDateTime(FormatdateTime("yyyy-mm-dd",now()) + " 23:59:59");
  edpEnd.Kind = tUniDateTime; 
  
  var edpClass = new TUgComboBox(Result);
  edpClass.Name = "edpClass";
  edpClass.Height = 22;
  edpClass.Parent = Result;
  edpClass.FieldLabel = UGMM.LT("儀表樣式");
  edpClass.FieldLabelSeparator = "";
  edpClass.FieldLabelAlign = laLeft;
  edpClass.Align = alTop;
  edpClass.Margins.Left = 8;
  edpClass.Margins.Right = 8;
  edpClass.AlignWithMargins = True;
  edpClass.EmptyText = UGMM.LT("請選擇...");
  edpClass.Items.CommaText = "ggroupblack,gtaskblue,gtaskgreen,gtaskred,gtaskyellow,gtaskpurple,gtaskpink";
  edpClass.Style = csDropDownList;
  
  var edpLink = new TUgEdit(Result);
  edpLink.Name = "edpLink";
  edpLink.Height = 22;
  edpLink.Enabled = true;
  edpLink.Parent = Result;
  edpLink.FieldLabel = UGMM.LT("任務鏈接");
  edpLink.FieldLabelSeparator = "";
  edpLink.FieldLabelAlign = laLeft;
  edpLink.Align = alTop;
  edpLink.Margins.Left = 8;
  edpLink.Margins.Right = 8;
  edpLink.AlignWithMargins = true;
  edpLink.EmptyText = UGMM.LT("請輸入任務鏈接");
  
  var edpMile = new TUgCheckBox(Result);
  edpMile.Name = "edpMile";
  edpMile.Height = 22;
  edpMile.Parent = Result;
  edpMile.FieldLabel = UGMM.LT("是否里程碑");
  edpMile.FieldLabelAlign = laLeft;
  edpMile.Align = alTop;
  edpMile.Margins.Left = 8;
  edpMile.Margins.Right = 8;
  edpMile.AlignWithMargins = True;
  
  var edpOpen = new TUgCheckBox(Result);
  edpOpen.Name = "edpOpen";
  edpOpen.Height = 22;
  edpOpen.Parent = Result;
  edpOpen.FieldLabel = UGMM.LT("是否展開");
  edpOpen.FieldLabelAlign = laLeft;
  edpOpen.Align = alTop;
  edpOpen.Margins.Left = 8;
  edpOpen.Margins.Right = 8;
  edpOpen.AlignWithMargins = true;
  
  var edpRes = new TUgComboBox(Result);
  edpRes.Name = "edpRes";
  edpRes.Height = 22;
  edpRes.Parent = Result;
  edpRes.FieldLabel = UGMM.LT("資源");
  edpRes.FieldLabelSeparator = "";
  edpRes.FieldLabelAlign = laLeft;
  edpRes.Align = alTop;
  edpRes.Margins.Left = 8;
  edpRes.Margins.Right = 8;
  edpRes.AlignWithMargins = True;
  edpRes.EmptyText = UGMM.LT("請選擇...");
  edpRes.Items.CommaText  = "Roggie,Dean,Texta";
  edpRes.Style = csDropDownList;
  
  var edpComp = new TUgEdit(Result);
  edpComp.Name = "edpComp";
  edpComp.Height = 22;
  edpComp.Parent = Result;
  edpComp.FieldLabel = UGMM.LT("百分比%");
  edpComp.FieldLabelSeparator = "";
  edpComp.FieldLabelAlign = laLeft;
  edpComp.Align = alTop;
  edpComp.Margins.Left = 8;
  edpComp.Margins.Right = 8;
  edpComp.AlignWithMargins = true;
  edpComp.EmptyText = "";

  var edpGroup = new TUgComboBox(Result);
  edpGroup.Name = "edpGroup";
  edpGroup.Height = 22;
  edpGroup.Parent = Result;
  edpGroup.FieldLabel = UGMM.LT("是否組任務");
  edpGroup.FieldLabelSeparator = "";
  edpGroup.FieldLabelAlign = laLeft;
  edpGroup.Align = alTop;
  edpGroup.Margins.Left = 8;
  edpGroup.Margins.Right = 8;
  edpGroup.AlignWithMargins = true;
  edpGroup.EmptyText = UGMM.LT("請選擇...");
  edpGroup.Items.CommaText = UGMM.LT("正常任務,標準組合任務,組合任務");
  edpGroup.ItemIndex = 0;
  edpGroup.Style = DropDownList;

  var edpParent = new TUgEdit(Result);
  edpParent.Name = "edpParent";
  edpParent.Height = 22;
  edpParent.Enabled = true;
  edpParent.Parent = Result;
  edpParent.FieldLabel = UGMM.LT("父任務ID");
  edpParent.FieldLabelSeparator = "";
  edpParent.FieldLabelAlign = laLeft;
  edpParent.Align = alTop;
  edpParent.Margins.Left = 8;
  edpParent.Margins.Right = 8;
  edpParent.AlignWithMargins = true;
  edpParent.EmptyText = UGMM.LT("請輸入父任務ID");
  
  var edpDepend = new TUgEdit(Result);
  edpDepend.Name = "edpDepend";
  edpDepend.Height = 22;
  edpDepend.Enabled = true;
  edpDepend.Parent = Result;
  edpDepend.FieldLabel = UGMM.LT("依賴任務ID");
  edpDepend.FieldLabelSeparator = "";
  edpDepend.FieldLabelAlign = laLeft;
  edpDepend.Align = alTop;
  edpDepend.Margins.Left = 8;
  edpDepend.Margins.Right = 8;
  edpDepend.AlignWithMargins = true;
  edpDepend.EmptyText = UGMM.LT("請輸入依賴任務ID");  
  
  var edpCaption = new TUgEdit(Result);
  edpCaption.Name = "edpCaption";
  edpCaption.Height = 22;
  edpCaption.Enabled = true;
  edpCaption.Parent = Result;
  edpCaption.FieldLabel = UGMM.LT("任務標題");
  edpCaption.FieldLabelSeparator = "";
  edpCaption.FieldLabelAlign = laLeft;
  edpCaption.Align = alTop;
  edpCaption.Margins.Left = 8;
  edpCaption.Margins.Right = 8;
  edpCaption.AlignWithMargins = true;
  edpCaption.EmptyText = "";  
  
  var edpNotes = new TUgEdit(Result);
  edpNotes.Name = "edpNotes";
  edpNotes.Height = 22;
  edpNotes.Enabled = true;
  edpNotes.Parent = Result;
  edpNotes.FieldLabel = UGMM.LT("詳細說明");
  edpNotes.FieldLabelSeparator = "";
  edpNotes.FieldLabelAlign = laLeft;
  edpNotes.Align = alTop;
  edpNotes.Margins.Left = 8;
  edpNotes.Margins.Right = 8;
  edpNotes.AlignWithMargins = true;
  edpNotes.EmptyText = "";  
  
  var btOk = new TUgButton(Result);
  btOk.Name = "btOk";
  btOk.Height = 32;
  btOk.Parent = Result;
  btOk.Margins.Bottom = 6;
  btOk.Margins.Left = 8;
  btOk.Margins.Right = 8;
  btOk.Align = alBottom;
  btOk.Caption = UGMM.LT("儲存");
  btOk.ModalResult = mrOK;
  btOk.AlignWithMargins = true;  
}

//PasScript
Function GetEditorForm:TUgWebForm;
Var
  edpID:TUgNumberEdit;
  edpName:TUgEdit;
  edpStart:TUgDateTimePicker;
  edpEnd:TUgDateTimePicker;
  edpClass:TUgComboBox;
  edpLink:TUgEdit;
  edpMile:TUgCheckBox;
  edpRes:TUgComboBox;
  edpComp:TUgEdit;
  edpGroup:TUgComboBox;
  edpParent:TUgEdit;
  edpOpen:TUgCheckBox;
  edpDepend:TUgEdit;
  edpCaption:TUgEdit;
  edpNotes:TUgEdit;
  btOk:TUgButton;
Begin
  Result := TUgWebForm.Create(UniApplication);
  Result.FreeOnClose := False;
  Result.Width := 400;
  Result.Height := 530;
  Result.Bordericons :=biSystemMenu;
  
  edpID:=TUgNumberEdit.Create(Result);
  edpID.Name := 'edpID';
  edpID.Height := 22;
  edpID.Enabled := true;
  edpID.Parent := Result;
  edpID.FieldLabel := UGMM.LT('任務ID');
  edpID.FieldLabelSeparator := '';
  edpID.FieldLabelAlign := laLeft;
  edpID.Align := alTop;
  edpID.Margins.Left := 8;
  edpID.Margins.Right := 8;
  edpID.AlignWithMargins := True;
  edpID.EmptyText:='pID';
  
  edpName:=TUgEdit.Create(Result);
  edpName.Name := 'edpName';
  edpName.Height := 22;
  edpName.Enabled := true;
  edpName.Parent := Result;
  edpName.FieldLabel := UGMM.LT('任務名稱');
  edpName.FieldLabelSeparator := '';
  edpName.FieldLabelAlign := laLeft;
  edpName.Align := alTop;
  edpName.Margins.Left := 8;
  edpName.Margins.Right := 8;
  edpName.AlignWithMargins := True;
  edpName.EmptyText:= UGMM.LT('請輸入任務名稱');
  
  edpStart:=TUgDateTimePicker.Create(Result);
  edpStart.Name := 'edpStart';
  edpStart.Height := 22;
  edpStart.Parent := Result;
  edpStart.FieldLabel := UGMM.LT('任務開始日期');
  edpStart.FieldLabelSeparator := '';
  edpStart.FieldLabelAlign := laLeft;
  edpStart.Align := alTop;
  edpStart.Margins.Left := 8;
  edpStart.Margins.Right := 8;
  edpStart.AlignWithMargins := True;
  edpStart.DateTime := StrToDateTime(FormatdateTime('yyyy-mm-dd',now()) + ' 00:00:00');;
  edpStart.Kind := tUniDateTime; 
  
  edpEnd:=TUgDateTimePicker.Create(Result);
  edpEnd.Name := 'edpEnd';
  edpEnd.Height := 22;
  edpEnd.Parent := Result;
  edpEnd.FieldLabel := UGMM.LT('任務結束日期');
  edpEnd.FieldLabelSeparator := '';
  edpEnd.FieldLabelAlign := laLeft;
  edpEnd.Align := alTop;
  edpEnd.Margins.Left := 8;
  edpEnd.Margins.Right := 8;
  edpEnd.AlignWithMargins := True;
  edpEnd.DateTime := StrToDateTime(FormatdateTime('yyyy-mm-dd',now()) + ' 23:59:59');;
  edpEnd.Kind := tUniDateTime; 
  
  edpClass:=TUgComboBox.Create(Result);
  edpClass.Name := 'edpClass';
  edpClass.Height := 22;
  edpClass.Parent := Result;
  edpClass.FieldLabel := UGMM.LT('儀表樣式');
  edpClass.FieldLabelSeparator := '';
  edpClass.FieldLabelAlign := laLeft;
  edpClass.Align := alTop;
  edpClass.Margins.Left := 8;
  edpClass.Margins.Right := 8;
  edpClass.AlignWithMargins := True;
  edpClass.EmptyText:= UGMM.LT('請選擇...');
  edpClass.Items.CommaText := 'ggroupblack,gtaskblue,gtaskgreen,gtaskred,gtaskyellow,gtaskpurple,gtaskpink';
  edpClass.Style := csDropDownList;
  
  edpLink:=TUgEdit.Create(Result);
  edpLink.Name := 'edpLink';
  edpLink.Height := 22;
  edpLink.Enabled := true;
  edpLink.Parent := Result;
  edpLink.FieldLabel := UGMM.LT('任務鏈接');
  edpLink.FieldLabelSeparator := '';
  edpLink.FieldLabelAlign := laLeft;
  edpLink.Align := alTop;
  edpLink.Margins.Left := 8;
  edpLink.Margins.Right := 8;
  edpLink.AlignWithMargins := True;
  edpLink.EmptyText:= UGMM.LT('請輸入任務鏈接');
  
  edpMile := TUgCheckBox.Create(Result);
  edpMile.Name := 'edpMile';
  edpMile.Height := 22;
  edpMile.Parent := Result;
  edpMile.FieldLabel := UGMM.LT('是否里程碑');
  edpMile.FieldLabelAlign := laLeft;
  edpMile.Align := alTop;
  edpMile.Margins.Left := 8;
  edpMile.Margins.Right := 8;
  edpMile.AlignWithMargins := True;
  
  edpOpen := TUgCheckBox.Create(Result);
  edpOpen.Name := 'edpOpen';
  edpOpen.Height := 22;
  edpOpen.Parent := Result;
  edpOpen.FieldLabel := UGMM.LT('是否展開');
  edpOpen.FieldLabelAlign := laLeft;
  edpOpen.Align := alTop;
  edpOpen.Margins.Left := 8;
  edpOpen.Margins.Right := 8;
  edpOpen.AlignWithMargins := True;
  
  
  edpRes:=TUgComboBox.Create(Result);
  edpRes.Name := 'edpRes';
  edpRes.Height := 22;
  edpRes.Parent := Result;
  edpRes.FieldLabel := UGMM.LT('資源');
  edpRes.FieldLabelSeparator := '';
  edpRes.FieldLabelAlign := laLeft;
  edpRes.Align := alTop;
  edpRes.Margins.Left := 8;
  edpRes.Margins.Right := 8;
  edpRes.AlignWithMargins := True;
  edpRes.EmptyText:= UGMM.LT('請選擇...');
  edpRes.Items.CommaText := 'Roggie,Dean,Texta';
  edpRes.Style := csDropDownList;
  
  edpComp:=TUgEdit.Create(Result);
  edpComp.Name := 'edpComp';
  edpComp.Height := 22;
  edpComp.Parent := Result;
  edpComp.FieldLabel := UGMM.LT('百分比%');
  edpComp.FieldLabelSeparator := '';
  edpComp.FieldLabelAlign := laLeft;
  edpComp.Align := alTop;
  edpComp.Margins.Left := 8;
  edpComp.Margins.Right := 8;
  edpComp.AlignWithMargins := True;
  edpComp.EmptyText:='';

  edpGroup:=TUgComboBox.Create(Result);
  edpGroup.Name := 'edpGroup';
  edpGroup.Height := 22;
  edpGroup.Parent := Result;
  edpGroup.FieldLabel := UGMM.LT('是否組任務');
  edpGroup.FieldLabelSeparator := '';
  edpGroup.FieldLabelAlign := laLeft;
  edpGroup.Align := alTop;
  edpGroup.Margins.Left := 8;
  edpGroup.Margins.Right := 8;
  edpGroup.AlignWithMargins := True;
  edpGroup.EmptyText:= UGMM.LT('請選擇...');
  edpGroup.Items.CommaText := UGMM.LT('正常任務,標準組合任務,組合任務');
  edpGroup.ItemIndex := 0;
  edpGroup.Style := csDropDownList;

  edpParent:=TUgEdit.Create(Result);
  edpParent.Name := 'edpParent';
  edpParent.Height := 22;
  edpParent.Enabled := true;
  edpParent.Parent := Result;
  edpParent.FieldLabel := UGMM.LT('父任務ID');
  edpParent.FieldLabelSeparator := '';
  edpParent.FieldLabelAlign := laLeft;
  edpParent.Align := alTop;
  edpParent.Margins.Left := 8;
  edpParent.Margins.Right := 8;
  edpParent.AlignWithMargins := True;
  edpParent.EmptyText:= UGMM.LT('請輸入父任務ID');
  
  edpDepend:=TUgEdit.Create(Result);
  edpDepend.Name := 'edpDepend';
  edpDepend.Height := 22;
  edpDepend.Enabled := true;
  edpDepend.Parent := Result;
  edpDepend.FieldLabel := UGMM.LT('依賴任務ID');
  edpDepend.FieldLabelSeparator := '';
  edpDepend.FieldLabelAlign := laLeft;
  edpDepend.Align := alTop;
  edpDepend.Margins.Left := 8;
  edpDepend.Margins.Right := 8;
  edpDepend.AlignWithMargins := True;
  edpDepend.EmptyText:= UGMM.LT('請輸入依賴任務ID');  
  
  edpCaption:=TUgEdit.Create(Result);
  edpCaption.Name := 'edpCaption';
  edpCaption.Height := 22;
  edpCaption.Enabled := true;
  edpCaption.Parent := Result;
  edpCaption.FieldLabel := UGMM.LT('任務標題');
  edpCaption.FieldLabelSeparator := '';
  edpCaption.FieldLabelAlign := laLeft;
  edpCaption.Align := alTop;
  edpCaption.Margins.Left := 8;
  edpCaption.Margins.Right := 8;
  edpCaption.AlignWithMargins := True;
  edpCaption.EmptyText:='';  
  
  edpNotes:=TUgEdit.Create(Result);
  edpNotes.Name := 'edpNotes';
  edpNotes.Height := 22;
  edpNotes.Enabled := true;
  edpNotes.Parent := Result;
  edpNotes.FieldLabel := UGMM.LT('詳細說明');
  edpNotes.FieldLabelSeparator := '';
  edpNotes.FieldLabelAlign := laLeft;
  edpNotes.Align := alTop;
  edpNotes.Margins.Left := 8;
  edpNotes.Margins.Right := 8;
  edpNotes.AlignWithMargins := True;
  edpNotes.EmptyText:='';  
  
  btOk:=TUgButton.Create(Result);
  btOk.Name := 'btOk';
  btOk.Height := 32;
  btOk.Parent := Result;
  btOk.Margins.Bottom:= 6;
  btOk.Margins.Left := 8;
  btOk.Margins.Right := 8;
  btOk.Align := alBottom;
  btOk.Caption:= UGMM.LT('儲存');
  btOk.ModalResult := mrOK;
  btOk.AlignWithMargins := True;  
end;

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

3.2. 事件設定

• 2：btnAddTask-OnClick事件

  點選以新增任務。

//JScript
function btnAddTaskOnClick(sender){
  var F = GetEditorForm();
  try{
  F.Caption = UGMM.LT("新增任務");
    var e ="";
    var b = true;
    While (b == true) {
    if (e != "") {
      MessageDlg(e,mtError,mbOK);
      }
      if (F.ShowModal == mrOK ){
      try{
      	if (TUgNumberEdit(F.FindComponent("edpID")).Value == 0) {
            RaiseException(UGMM.LT("任務ID"));
            }
          //新增到記憶體表
          cdsTask.Append;
          var v = TUgNumberEdit(F.FindComponent("edpID")).Value;
          cdsTask.FieldByName("pID").AsString = v;
          cdsTask.FieldByName("pName").AsString   = TUgEdit(F.FindComponent("edpName")).Text;
          cdsTask.FieldByName("pStart").AsDateTime  = TUgDateTimePicker(F.FindComponent("edpStart")).DateTime;
          cdsTask.FieldByName("pEnd").AsDateTime    = TUgDateTimePicker(F.FindComponent("edpEnd")).DateTime;
          cdsTask.FieldByName("pClass").AsString  = TUgComboBox(F.FindComponent("edpClass")).Text;
          cdsTask.FieldByName("pLink").AsString   = TUgEdit(F.FindComponent("edpLink")).Text;
          cdsTask.FieldByName("pMile").AsString   = IIF(TUgCheckBox(F.FindComponent("edpMile")).Checked,"1","0");
          cdsTask.FieldByName("pRes").AsString    = TUgComboBox(F.FindComponent("edpRes")).Text;
          cdsTask.FieldByName("pComp").AsString   = TUgEdit(F.FindComponent("edpComp")).Text;
          cdsTask.FieldByName("pGroup").AsString  = IntToStr(TUgComboBox(F.FindComponent("edpGroup")).ItemIndex);
          cdsTask.FieldByName("pParent").AsString = TUgEdit(F.FindComponent("edpParent")).Text;
          cdsTask.FieldByName("pOpen").AsString   = IIF(TUgCheckBox(F.FindComponent("edpOpen")).Checked,"1","0");
          cdsTask.FieldByName("pDepend").AsString = TUgEdit(F.FindComponent("edpDepend")).Text;
          cdsTask.FieldByName("pCaption").AsString = TUgEdit(F.FindComponent("edpCaption")).Text;
          cdsTask.FieldByName("pNotes").AsString  = TUgEdit(F.FindComponent("edpNotes")).Text;
          cdsTask.Post;
          
          cdsTask.SubmitUpdates;
          b = false;
          }
          Except{
          	RaiseException(ExceptionMessage);
          }
        }
        else{
        	b = false;
        }
      }
   }
   finally{
    F.Free;
    }
}

//PasScript
procedure btnAddTaskOnClick(sender: tobject);
Var
  F:TUgWebForm;
  b:Boolean;
  e:string;
  s:String;
  v:variant;
Begin
  F:=GetEditorForm;
  Try
    F.Caption := UGMM.LT('新增任務');
    e:='';
    b:=True;
    While b do
    Begin
      if e<>'' then
      MessageDlg(e,mtError,mbOK);
      if F.ShowModal = mrOK then 
      Begin
        Try
          if TUgNumberEdit(F.FindComponent('edpID')).Value = 0 then
            RaiseException(UGMM.LT('任務ID'));
          //新增到記憶體表
          cdsTask.Append;
          v := TUgNumberEdit(F.FindComponent('edpID')).Value;
          cdsTask.FieldByName('pID').AsString := v;
          cdsTask.FieldByName('pName').AsString   := TUgEdit(F.FindComponent('edpName')).Text;
          cdsTask.FieldByName('pStart').AsDateTime  := TUgDateTimePicker(F.FindComponent('edpStart')).DateTime;
          cdsTask.FieldByName('pEnd').AsDateTime    := TUgDateTimePicker(F.FindComponent('edpEnd')).DateTime;
          cdsTask.FieldByName('pClass').AsString  := TUgComboBox(F.FindComponent('edpClass')).Text;
          cdsTask.FieldByName('pLink').AsString   := TUgEdit(F.FindComponent('edpLink')).Text;
          cdsTask.FieldByName('pMile').AsString   := IIF(TUgCheckBox(F.FindComponent('edpMile')).Checked,'1','0');
          cdsTask.FieldByName('pRes').AsString    := TUgComboBox(F.FindComponent('edpRes')).Text;
          cdsTask.FieldByName('pComp').AsString   := TUgEdit(F.FindComponent('edpComp')).Text;
          cdsTask.FieldByName('pGroup').AsString  := IntToStr(TUgComboBox(F.FindComponent('edpGroup')).ItemIndex);
          cdsTask.FieldByName('pParent').AsString := TUgEdit(F.FindComponent('edpParent')).Text;
          cdsTask.FieldByName('pOpen').AsString   := IIF(TUgCheckBox(F.FindComponent('edpOpen')).Checked,'1','0');
          cdsTask.FieldByName('pDepend').AsString := TUgEdit(F.FindComponent('edpDepend')).Text;
          cdsTask.FieldByName('pCaption').AsString:= TUgEdit(F.FindComponent('edpCaption')).Text;
          cdsTask.FieldByName('pNotes').AsString  := TUgEdit(F.FindComponent('edpNotes')).Text;
          cdsTask.Post;
          
          cdsTask.SubmitUpdates;
          b := False;
        Except{ExceptionMessage}
          e:=ExceptionMessage;
        end;
      End else
        b:=False;
    End;
  Finally
    F.Free;
  end;
end;

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

• 3：btnEditTask-OnClick事件

  點選以打開選擇的任務進行編輯。

//JScript
function btnEditTaskOnClick(sender){
  var F = GetEditorForm();
  try{
    F.Caption = UGMM.LT("修改任務");
    var e = "";
    var b = true;
    TUgNumberEdit(F.FindComponent("edpID")).Value = cdsTask.FieldByName("pID").AsInteger;
    TUgEdit(F.FindComponent("edpName")).Text = cdsTask.FieldByName("pName").AsString;
    TUgDateTimePicker(F.FindComponent("edpStart")).DateTime = cdsTask.FieldByName("pStart").AsDateTime;
    TUgDateTimePicker(F.FindComponent("edpEnd")).DateTime = cdsTask.FieldByName("pEnd").AsDateTime;
    TUgComboBox(F.FindComponent("edpClass")).Text = cdsTask.FieldByName("pClass").AsString;
    TUgEdit(F.FindComponent("edpLink")).Text = cdsTask.FieldByName("pLink").AsString;
    TUgCheckBox(F.FindComponent("edpMile")).Checked = (cdsTask.FieldByName("pMile").AsInteger == 1);
    TUgComboBox(F.FindComponent("edpRes")).Text = cdsTask.FieldByName("pRes").AsString;
    TUgEdit(F.FindComponent("edpComp")).Text = cdsTask.FieldByName("pComp").AsString;
    TUgComboBox(F.FindComponent("edpGroup")).ItemIndex = cdsTask.FieldByName("pGroup").AsInteger;
    TUgEdit(F.FindComponent("edpParent")).Text = cdsTask.FieldByName("pParent").AsString;
    TUgCheckBox(F.FindComponent("edpOpen")).Checked = (cdsTask.FieldByName("pOpen").AsString == "1");
    TUgEdit(F.FindComponent("edpDepend")).Text = cdsTask.FieldByName("pDepend").AsString;
    TUgEdit(F.FindComponent("edpCaption")).Text = cdsTask.FieldByName("pCaption").AsString;
    TUgEdit(F.FindComponent("edpNotes")).Text = cdsTask.FieldByName("pNotes").AsString;
    While (b == true)
    {
    if (e != "") {
      MessageDlg(e,mtError,mbOK);
      }
      if (F.ShowModal == mrOK) { 
      	try{
      	if (TUgNumberEdit(F.FindComponent("edpID")).Value == 0){
            RaiseException(UGMM.LT("任務ID"));
            }
          //新增到記憶體表
          cdsTask.Edit;
          v = TUgNumberEdit(F.FindComponent("edpID")).Value;
          cdsTask.FieldByName("pID").AsString = v;
          cdsTask.FieldByName("pName").AsString   = TUgEdit(F.FindComponent("edpName")).Text;
          cdsTask.FieldByName("pStart").AsDateTime  = TUgDateTimePicker(F.FindComponent("edpStart")).DateTime;
          cdsTask.FieldByName("pEnd").AsDateTime    = TUgDateTimePicker(F.FindComponent("edpEnd")).DateTime;
          cdsTask.FieldByName("pClass").AsString  = TUgComboBox(F.FindComponent("edpClass")).Text;
          cdsTask.FieldByName("pLink").AsString   = TUgEdit(F.FindComponent("edpLink")).Text;
          cdsTask.FieldByName("pMile").AsString   = IIF(TUgCheckBox(F.FindComponent("edpMile")).Checked,"1","0");
          cdsTask.FieldByName("pRes").AsString    = TUgComboBox(F.FindComponent("edpRes")).Text;
          cdsTask.FieldByName("pComp").AsString   = TUgEdit(F.FindComponent("edpComp")).Text;
          cdsTask.FieldByName("pGroup").AsString  = IntToStr(TUgComboBox(F.FindComponent("edpGroup")).ItemIndex);
          cdsTask.FieldByName("pParent").AsString = TUgEdit(F.FindComponent("edpParent")).Text;
          cdsTask.FieldByName("pOpen").AsString   = IIF(TUgCheckBox(F.FindComponent("edpOpen")).Checked,"1","0");
          cdsTask.FieldByName("pDepend").AsString = TUgEdit(F.FindComponent("edpDepend")).Text;
          cdsTask.FieldByName("pCaption").AsString= TUgEdit(F.FindComponent("edpCaption")).Text;
          cdsTask.FieldByName("pNotes").AsString  = TUgEdit(F.FindComponent("edpNotes")).Text;
          cdsTask.Post;
          
          cdsTask.SubmitUpdates;
          b = false;
          }
          Except{
            RaiseException(ExceptionMessage);
          	}
          }
        else{
        	b = false;
        }
      }
   }
   finally{
    F.Free;
    }
}

//PasScript
procedure btnEditTaskOnClick(sender: tobject);
Var
  F:TUgWebForm;
  b:Boolean;
  e:string;
  s:String;
  v:variant;
Begin
  F:=GetEditorForm;
  Try
    F.Caption := UGMM.LT('修改任務');
    e:='';
    b:=True;
    TUgNumberEdit(F.FindComponent('edpID')).Value := cdsTask.FieldByName('pID').AsInteger;
    TUgEdit(F.FindComponent('edpName')).Text := cdsTask.FieldByName('pName').AsString;
    TUgDateTimePicker(F.FindComponent('edpStart')).DateTime := cdsTask.FieldByName('pStart').AsDateTime;
    TUgDateTimePicker(F.FindComponent('edpEnd')).DateTime := cdsTask.FieldByName('pEnd').AsDateTime;
    TUgComboBox(F.FindComponent('edpClass')).Text := cdsTask.FieldByName('pClass').AsString;
    TUgEdit(F.FindComponent('edpLink')).Text := cdsTask.FieldByName('pLink').AsString;
    TUgCheckBox(F.FindComponent('edpMile')).Checked := (cdsTask.FieldByName('pMile').AsInteger = 1);
    TUgComboBox(F.FindComponent('edpRes')).Text := cdsTask.FieldByName('pRes').AsString;
    TUgEdit(F.FindComponent('edpComp')).Text := cdsTask.FieldByName('pComp').AsString;
    TUgComboBox(F.FindComponent('edpGroup')).ItemIndex := cdsTask.FieldByName('pGroup').AsInteger;
    TUgEdit(F.FindComponent('edpParent')).Text := cdsTask.FieldByName('pParent').AsString;
    TUgCheckBox(F.FindComponent('edpOpen')).Checked := cdsTask.FieldByName('pOpen').AsString = '1';
    TUgEdit(F.FindComponent('edpDepend')).Text := cdsTask.FieldByName('pDepend').AsString;
    TUgEdit(F.FindComponent('edpCaption')).Text := cdsTask.FieldByName('pCaption').AsString;
    TUgEdit(F.FindComponent('edpNotes')).Text := cdsTask.FieldByName('pNotes').AsString;
    While b do
    Begin
      if e<>'' then
      MessageDlg(e,mtError,mbOK);
      if F.ShowModal = mrOK then 
      Begin
        Try
          if TUgNumberEdit(F.FindComponent('edpID')).Value = 0 then
            RaiseException(UGMM.LT('任務ID'));
          //新增到記憶體表
          cdsTask.Edit;
          v := TUgNumberEdit(F.FindComponent('edpID')).Value;
          cdsTask.FieldByName('pID').AsString := v;
          cdsTask.FieldByName('pName').AsString   := TUgEdit(F.FindComponent('edpName')).Text;
          cdsTask.FieldByName('pStart').AsDateTime  := TUgDateTimePicker(F.FindComponent('edpStart')).DateTime;
          cdsTask.FieldByName('pEnd').AsDateTime    := TUgDateTimePicker(F.FindComponent('edpEnd')).DateTime;
          cdsTask.FieldByName('pClass').AsString  := TUgComboBox(F.FindComponent('edpClass')).Text;
          cdsTask.FieldByName('pLink').AsString   := TUgEdit(F.FindComponent('edpLink')).Text;
          cdsTask.FieldByName('pMile').AsString   := IIF(TUgCheckBox(F.FindComponent('edpMile')).Checked,'1','0');
          cdsTask.FieldByName('pRes').AsString    := TUgComboBox(F.FindComponent('edpRes')).Text;
          cdsTask.FieldByName('pComp').AsString   := TUgEdit(F.FindComponent('edpComp')).Text;
          cdsTask.FieldByName('pGroup').AsString  := IntToStr(TUgComboBox(F.FindComponent('edpGroup')).ItemIndex);
          cdsTask.FieldByName('pParent').AsString := TUgEdit(F.FindComponent('edpParent')).Text;
          cdsTask.FieldByName('pOpen').AsString   := IIF(TUgCheckBox(F.FindComponent('edpOpen')).Checked,'1','0');
          cdsTask.FieldByName('pDepend').AsString := TUgEdit(F.FindComponent('edpDepend')).Text;
          cdsTask.FieldByName('pCaption').AsString:= TUgEdit(F.FindComponent('edpCaption')).Text;
          cdsTask.FieldByName('pNotes').AsString  := TUgEdit(F.FindComponent('edpNotes')).Text;
          cdsTask.Post;
          
          cdsTask.SubmitUpdates;
          b := False;
        Except{ExceptionMessage}
          e:=ExceptionMessage;
        end;
      End else
        b:=False;
    End;
  Finally
    F.Free;
  end;
end;

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

• 4：btnDelTask-OnClick事件

  點選按鈕后，選擇的任務項將被刪除。

//JScript
function btnDelTaskOnClick(sender){
	if (cdsTask.IsEmpty){  
  	RaiseException(UGMM.LT("沒有記錄無法刪除"));
  }
  
  if (MessageDlg(UGMM.LT("注意：是否刪除該筆任務？"),mtWarning,mbYes + mbNo) == mrYes){
     cdsTask.Delete;
     cdsTask.SubmitUpdates;
  }
}

//PasScript
procedure btnDelTaskOnClick(sender: tobject);
begin
  if cdsTask.IsEmpty then
  RaiseException(UGMM.LT('沒有記錄無法刪除'));
  
  if MessageDlg(UGMM.LT('注意：是否刪除該筆任務？'),mtWarning,mbYes + mbNo) = mrYes then
  Begin
     cdsTask.Delete;
     cdsTask.SubmitUpdates;
  end;
end;

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

• 5：btnCreateGantt-OnClick事件

  點選按鈕后，產生甘特圖。

//JScript
function btnCreateGanttOnClick(sender){
  UgGanttChart01.ClearTasks;
  UgGanttChart01.Draw;
  var TaskItem = new TTaskItem();
  cdsTask.First;
  While (!(cdsTask.Eof)){
     TaskItem.pID = cdsTask.FieldByName("pID").AsString;
     TaskItem.pName = cdsTask.FieldByName("pName").AsString;
     TaskItem.pStart = cdsTask.FieldByName("pStart").AsString;
     TaskItem.pEnd = cdsTask.FieldByName("pEnd").AsString;
     TaskItem.pClass= cdsTask.FieldByName("pClass").AsString;
     TaskItem.pLink = cdsTask.FieldByName("pLink").AsString;
     TaskItem.pMile = cdsTask.FieldByName("pMile").AsString;
     TaskItem.pRes = cdsTask.FieldByName("pRes").AsString;
     TaskItem.pComp= cdsTask.FieldByName("pComp").AsString;
     TaskItem.pGroup = cdsTask.FieldByName("pGroup").AsString;
     TaskItem.pParent = cdsTask.FieldByName("pParent").AsString;
     TaskItem.pOpen = cdsTask.FieldByName("pOpen").AsString;
     TaskItem.pDepend = cdsTask.FieldByName("pDepend").AsString;
     TaskItem.pCaption = cdsTask.FieldByName("pCaption").AsString;
     TaskItem.pNotes = cdsTask.FieldByName("pNotes").AsString;
     
     UgGanttChart01.AddTaskItemObject(TaskItem);
     cdsTask.Next;
   }
  
  UgGanttChart01.Draw;
  
  UgPageControl01.TabIndex = 1;
  TaskItem.Free;
}

//PasScript
procedure btnCreateGanttOnClick(sender: tobject);
Var
  TaskItem:TTaskItem;
begin
  UgGanttChart01.ClearTasks;
  UgGanttChart01.Draw;
  TaskItem := TTaskItem.Create;
  cdsTask.First;
  While not cdsTask.Eof Do
  Begin
     TaskItem.pID := cdsTask.FieldByName('pID').AsString;
     TaskItem.pName := cdsTask.FieldByName('pName').AsString;
     TaskItem.pStart := cdsTask.FieldByName('pStart').AsString;
     TaskItem.pEnd := cdsTask.FieldByName('pEnd').AsString;
     TaskItem.pClass:= cdsTask.FieldByName('pClass').AsString;
     TaskItem.pLink := cdsTask.FieldByName('pLink').AsString;
     TaskItem.pMile := cdsTask.FieldByName('pMile').AsString;
     TaskItem.pRes := cdsTask.FieldByName('pRes').AsString;
     TaskItem.pComp:= cdsTask.FieldByName('pComp').AsString;
     TaskItem.pGroup := cdsTask.FieldByName('pGroup').AsString;
     TaskItem.pParent := cdsTask.FieldByName('pParent').AsString;
     TaskItem.pOpen := cdsTask.FieldByName('pOpen').AsString;
     TaskItem.pDepend := cdsTask.FieldByName('pDepend').AsString;
     TaskItem.pCaption := cdsTask.FieldByName('pCaption').AsString;
     TaskItem.pNotes := cdsTask.FieldByName('pNotes').AsString;
     
     UgGanttChart01.AddTaskItemObject(TaskItem);
     cdsTask.Next;
  end;
  
  UgGanttChart01.Draw;
  
  UgPageControl01.TabIndex := 1;
end;

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

4. 運行結果

  使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  可在任務界面進行任務的新增、編輯以及刪除操作，點選產生甘特圖按鈕可切換至甘特圖標籤頁，並根據標籤頁中的內容顯示甘特圖。