愛招飛幫助手冊
目录

附控控制元件

# FastWeb附控控制元件

  • 適用平臺： APP(移動端)

# 1. TUgFSConfirm

  此控制元件用於設定顯示確認的提示對話方塊。

# 1.1. 屬性

屬性 功能說明
BackgroundDismiss 設定點選背景時是否忽視操作
boxWidth 設定顯示的提示框的寬度
ButtonEnterConfirm 設定按下enter按鍵表示為確認
ButtonTextCancel 設定取消按鈕上顯示的文字內容
ButtonTextConfirm 設定確認按鈕上顯示的文字內容
ButtonTextOK 設定OK按鈕上顯示的文字內容
ButtonTextOther 設定Other按鈕上顯示的文字內容
CloseIcon 設定是否顯示關閉按鈕
Content 設定提示框中顯示的正文的內容
Draggable 設定提示框是否可以被滑鼠拖動
EscapeKey 設定控制元件是否響應esc按鍵
Icon 設定顯示的字型圖示，所有可用的文字圖示的樣式請查閱https://fontawesome.com/v5.0/icons (opens new window)
PromptType 如果提示框需要使用者輸入資訊以進行確認提示的，則可設定其中的相關選項
ScreenMask 設定是否使用螢幕提示的友好資訊框
Theme 設定提示框顯示的主題
Title 設定提示框的標題內容
TypeAnimated 設定輸入框中的內容是否以動畫方式顯示
TypeColor 設定輸入框中主題顯示的顏色
TypeConfirm 設定輸入確認提示框的樣式

# 1.1.1. PromptType

property PromptType: TUniFSPromptType;
1

  設定需要輸入的提示框中的相關資訊。

名稱 說明
CharCase 設定文字的大小寫型別
Normal_：設定文字為正常模式，即保持所有文字預設的大小寫情形
LowerCase_：所有的英文字元均轉換為小寫
UpperCase_：所有的英文字元均轉換為大寫
RequireField 是否設定文字輸入為必須操作
TextRequireField 設定文字輸入為必須操作的提示資訊
TypePrompt 設定輸入的文字顯示的型別
text：設定顯示為文字型別
password：設定顯示為密碼字元型別

# 1.1.2. ScreenMask

property ScreenMask: TUniFSScreenMask;
1

  設定螢幕友好提示資訊，用於在處理過程中的顯示內容。

名稱 說明
Enabled 設定是否啟用遮罩的功能
Text 設定螢幕遮罩上顯示的文字內容

# 1.2. 事件

# 1.2.1. OnAlert

procedure UgFSConfirm01OnAlert(confirmbutton: tconfirmbutton);
1

  當在警告的對話方塊中按下確認按鈕后觸發事件。

# 1.2.2. OnConfirm

procedure UgFSConfirm01OnConfirm(confirmbutton: tconfirmbutton);
1

  當在確認的對話方塊中按下確認按鈕后觸發事件。

# 1.2.2.1. OnPrompt
procedure UgFSConfirm01OnPormpt(confirmbutton: tconfirmbutton;result: string);
1

  當在輸入的對話方塊中按下確認按鈕后觸發事件，result中儲存輸入的文字內容。

# 1.3. 方法

# 1.3.1. Clear

procedure Clear;
1

  設定清除內容。

# 1.3.2. ShowMask

procedure ShowMask(Msg: string);
1

  呼叫顯示相關資訊的遮罩。

# 1.3.3. ShowMaskPercent

procedure ShowMaskPercent(Msg: string; Percent: Integer);
1

  設定顯示包含進度條資訊的遮罩。

# 1.3.4. ShowMaskJSName

procedure ShowMaskJSName(Msg: string; JSName: string);
1

  呼叫指定控制元件JS的遮罩資訊。

# 1.3.5. ShowMaskUpdate

procedure ShowMaskUpdate(Msg: string; Percent: Integer);
1

  當遮罩啟用時設定遮罩的百分比數值更新。

    //JScript
  try{
    UgFSConfirm01.ShowMaskPercent("Starting Processing...",10);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate("Creating Order...",25);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate("Processing Payment...",70);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate("Ending Asking...",90);
    Sleep(1000);
    UgFSConfirm01.ShowMaskUpdate("Ending Asking...",100);
    Sleep(1000);
    UgFSConfirm01.Alert("Thanks for the purchase","Order 561560");
  }
  finally{
    UgFSConfirm01.RemoveMask;
  }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //PasScript
  //更新進度的設定
  try
    UgFSConfirm01.ShowMaskPercent('Starting Processing...',10);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate('Creating Order...',25);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate('Processing Payment...',70);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate('Ending Asking...',90);
    Sleep(1000);
    UgFSConfirm01.ShowMaskUpdate('Ending Asking...',100);
    Sleep(1000);
    UgFSConfirm01.Alert('Thanks for the purchase','Order 561560');
  finally
    UgFSConfirm01.RemoveMask;
  end;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // Make sure to add code blocks to your code group

    # 1.3.6. RemoveMask

    procedure RemoveMask;
    1

      如果目前正在顯示遮罩，使用此方法可移除遮罩。

    # 1.3.7. Alert

    procedure Alert(const Title: string; const Content: string);
    1

      設定警告提示資訊。

    # 1.3.8. Prompt

    procedure Prompt(const Title: string; const Msg: string);
    1

      設定文字的輸入資訊。

    # 1.3.9. Question

    procedure Question(const Title: string; const Content: string; TP: TTypeConfirm);
    1

      顯示提問型別的對話方塊。

    # 1.3.10. Mask

    procedure Mask(const Msg: string);
    1

      顯示遮罩。

    # 2. TUgAppFSToggle

      該元件顯示為一個滑動開關，點選實現動態的滑動，以達到開關顯示的效果。

    # 2.1. 屬性

    名稱 說明
    ThemeOff 關閉狀態的顏色
    ThemeOn 開啟狀態的顏色
    TitleOff 關閉狀態下顯示的文字標題
    TitleOn 開啟狀態下顯示的文字標題
    Toggled 開關是否處於開啟狀態

    # 2.1.1. ThemeOff

    procedure ThemeOff: TThemeToggle;
    1

      設定關閉狀態下按鈕顯示的樣式顏色，可從下拉選框中選擇顏色主題樣式。

    # 2.1.2. ThemeOn

    procedure ThemeOn: TThemeToggle;
    1

      設定開啟狀態下按鈕顯示的樣式顏色，可從下拉選框中選擇顏色主題樣式。

    # 2.1.3. TitleOff

    property TitleOff: string;
    1

      設定關閉狀態下顯示的文字標題。

    # 2.1.4. TitleOn

    property TitleOn: string;
    1

      設定開啟狀態下顯示的文字標題。

    # 2.1.5. Toggled

    property Toggled: Boolean;
    1

      設定開關目前的狀態，當設定為True時，開關為On狀態，反之，開關為Off狀態。

    # 2.2. 事件

    事件 觸發條件
    OnToggled 當開關狀態切換時觸發該事件

    # 3. TUgAppFSGoogleChart

      該元件使用Google圖表進行數據展示。可顯示面積圖，柱狀圖等相關的統計圖表。

    # 3.1. 屬性

    屬性 功能說明
    ChartType 設定圖表的型別
    ChartDataSet 設定圖表繫結的數據集
    ChartOptions 圖表的相關設定選項

    # 3.1.1. ChartType

    property ChartType: TChartType;
    1

      設定GoogleChart的圖表型別。

    名稱 說明 圖示
    AreaChart 面積圖
    Bar 柱狀圖
    BubbleChart 氣泡圖
    Gauge 儀表盤
    GeoChart 地理資訊圖
    LineChart 線型圖
    PieChart 餅圖

    # 3.1.2. ChartDataSet

    property ChartDataSet: TDataSet;
    1

      設定數據來源的數據集控制元件名稱。

    # 3.1.3. ChartOptions

    property ChartOptions: TStrings;
    1

      圖表設定的相關選項。該選項以JSON格式進行儲存。

    • GeoChart選項

      一個GeoChart選項設定如下：

    displayMode: "region",
backgroundColor: "#81d4fa",
colorAxis: {colors: ["#00853f", "black", "#e31b23"]},
tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},
    1
    2
    3
    4
    名稱 說明
    displayMode 地理圖型別，數據表型別需與數據展示的型別相匹配，支援以下型別：
    auto:根據數據表的型別自動選擇
    regions:可為區域上色的地理圖
    markers:在區域內放置標記
    text:為區域標記數據表中的文字內容
    backgroundColor 設定圖表的背景顏色，可以是HTML定義的顏色，比如red或者#00cc00。
    colorAxis 規定值地圖的顏色列的數值
    tooltip 提示工具的相關選項

      如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart GeoChart文件 (opens new window)查閱。

    • PieChart選項

      一個PieChart選項設定如下：

    title: "My Daily Activities (1)", 
tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},
    1
    2
    名稱 說明
    title 標題名稱
    tooltip 提示框的相關選項

      如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart PieChart文件 (opens new window)查閱。

    • Gauge選項

      一個Gauge選項設定如下：

    redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
    1
    2
    3
    名稱 說明
    redFrom 顯示紅色區域的起始值
    redTo 顯示紅色區域的終止值
    yellowFrom 顯示黃色區域的起始值
    yellowTo 顯示黃色區域的終止值
    minorTicks 在兩個顯示數值的刻度之間設定的小刻度區域的數量

      如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart Gauge文件 (opens new window)查閱。

    • Area Charts選項

      一個Area Chart選項設定如下：

    title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
    1
    2
    3
    名稱 說明
    title 圖表的標題名稱
    curveType 曲線型別
    function:函式曲線
    none:無型別
    lengend 圖表標籤的選項

      如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart AreaChart文件 (opens new window)查閱。

    • Bar Chart選項

      一個Bar Chart選項設定如下：

    title: 'Company Performance',
legend: { position: 'bottom' }
    1
    2
    名稱 說明
    title 圖表的標題名稱
    lengend 圖表標籤的選項

      如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart BarChart文件 (opens new window)查閱。

    • Bubble Chart選項

      一個Bubble Chart選項設定如下：

    title: 'Correlation between life expectancy',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
    1
    2
    3
    4
    名稱 說明
    title 圖表的標題名稱
    hAxis 設定橫軸的標題名稱
    vAxis 設定縱軸的標題名稱
    bubble 設定氣泡內的樣式

      如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart BubbleChart文件 (opens new window)查閱。

    • Line Chart選項

      一個Line Chart選項設定如下：

    title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
    1
    2
    3
    名稱 說明
    title 圖表的標題名稱
    curveType 曲線型別
    function:函式曲線
    none:無型別
    lengend 圖表標籤的選項

      如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart LineChart文件 (opens new window)查閱。

    # 3.2. 方法

    # 3.2.1. LoadChart

    procedure LoadChart;
    1

      該方法用於初始化並載入圖表。

    # 4. TUgAppFSKendoUI

      該元件為圖表顯示元件，可用於圖表數據的分析結果的彙總展示。

    # 4.1. 屬性

    屬性 功能說明
    ChartDataSet 設定圖表繫結的數據集的名稱
    ChartLengendPosition 設定圖表銘牌的位置
    ChartNameExport 設定圖表導出時使用的檔名稱
    ChartProperties 圖表的設定選項，使用JSON語法格式
    ChartSeries 設定數據系列
    ChartSeriesDefaults 設定數據系列的預設取值
    ChartSeriesProperties 設定數據系列的選項
    ChartStacked 設定堆疊
    ChartTheme 設定圖表的主題
    ChartTitle 設定圖表標題
    ChartTitleVisible 設定圖表是否可見
    ChartType 設定圖表型別

    # 4.1.1. ChartDataSet

    property ChartDataSet: TDataSet;
    1

      設定圖表繫結的數據集控制元件的名稱。

    # 4.1.2. ChartLengendPosition

    property ChartLegendPosition: TUgFSKendoUIPosition;
    1

      設定圖例說明的顯示位置。

    # 4.1.3. ChartNameExport

    property ChartNameExport: string;
    1

      設定導出檔案的圖表名稱。

    # 4.1.4. ChartProperties

    property ChartProperties: TStrings;
    1

      設定圖表的相關屬性。

      //JScript
UgAppFSKendoUI01.ChartProperties.Values["valueAxis"] = "{labels: {format: \"0:c\"}}";
      1
      2
      //PasScript
UgAppFSKendoUI01.ChartProperties.Values['valueAxis'] := '{labels: {format: "0:c"}}';
      1
      2
      // Make sure to add code blocks to your code group

        關於屬性設定的相關內容可以參考KendoUI屬性文件 (opens new window)進行配置，選擇對應的圖表型別後進行查詢。除以下屬性外的剩餘選項（通常處於JSON配置的末尾）可作為該屬性的內容進行填充。

      # 4.1.5. ChartSeries

      property ChartSeries: TStrings;
      1

        設定數據系列。關於該內容可參考KendoUI屬性文件 (opens new window)進行配置，選擇對應的圖表型別後進行查詢。配置為series部分的內容可用於該屬性的設定選項。

        //JScript
UgAppFSKendoUI01.ChartSeries.Values["Mundo"] = "world_users";
        1
        2
        //PasScript
UgAppFSKendoUI01.ChartSeries.Values['Mundo'] := 'world_users';
        1
        2
        // Make sure to add code blocks to your code group

        # 4.1.6. ChartSeriesDefaults

        property ChartSeriesDefaults: string;
        1

          設定數據系列的預設值。關於該內容可參考KendoUI屬性文件 (opens new window)進行配置，選擇對應的圖表型別後進行查詢。配置為seriesDefaults部分的內容可用於該屬性的設定選項。

          //JScript
UgAppFSKendoUI01.ChartSeriesDefaults = "labels: {visible: true, position: \"insideEnd\", format: \"0:c\"}";
          1
          2
          //PasScript
UgAppFSKendoUI01.ChartSeriesDefaults := 'labels: {visible: true, position: "insideEnd", format: "0:c"}';
          1
          2
          // Make sure to add code blocks to your code group

          # 4.1.7. ChartSeriesProperties

          property ChartSeriesProperties: TStrings;
          1

            設定數據系列的選項。關於該內容可參考KendoUI屬性文件 (opens new window)進行配置，選擇對應的圖表型別後進行查詢。配置在series中的選項的展開選項專案可用於該屬性的選項設定。

            //JScript
UgAppFSKendoUI01.ChartSeriesProperties.Values["United States"] = "labels: {visible: true, align: \"column\", format: \"{0}%\"}";
            1
            2
            //PasScript
UgAppFSKendoUI01.ChartSeriesProperties.Values['United States'] := 'labels: {visible: true, align: "column", format: "{0}%"}';
            1
            2
            // Make sure to add code blocks to your code group

            # 4.1.8. ChartStacked

            property ChartStacked: Boolean;
            1

              是否進行圖表的堆疊。

            # 4.1.9. ChartTheme

            property ChartTheme: TUgFSKendoUITheme;
            1

              設定圖表的主題風格。

            # 4.1.10. ChartTitle

            property ChartTitle: string;
            1

              設定圖表標題。

            # 4.1.11. ChartTitleVisible

            property ChartTitleVisible: Boolean;
            1

              設定圖表標題是否可見。

            # 4.1.12. ChartType

            property ChartType: TUgFSKendoUIType;
            1

              設定圖表的型別。

            名稱 說明 圖示
            Columns 縱向柱狀圖
            Bar 橫向柱狀圖
            Line 折線圖
            Pie 餅圖
            Scatter 散點圖
            ScatterLine 散點連線圖

            # 4.2. 方法

            # 4.2.1. InitChart

            procedure InitChart;
            1

              初始化設定圖表並打開。

            # 5. TUgAppFSQrCode

              此控制元件顯示為二維碼，可輸入資訊以呈現所需的二維碼資訊。

            # 5.1. 屬性

            # 5.1.1. QrOptions

            property QrOptions: TQrOptions;
            1

              設定二維碼顯示的選項。

            名稱 說明
            BackgroundColor 設定背景的顏色，無背景顏色的使用null，此處的顏色值以CSS顏色為基準。若需要了解在此處可使用的顏色表達式，請檢視<color> (opens new window)
            Content 設定二維碼中包含的文字內容
            Fill 設定填充二維碼的顏色，此處的顏色值以CSS顏色為基準。若需要了解在此處可使用的顏色表達式，請檢視<color> (opens new window)
            FontColor 設定二維碼中心顯示的字型的顏色，此處的顏色值以CSS顏色為基準。若需要了解在此處可使用的顏色表達式，請檢視<color> (opens new window)
            FontName 設定二維碼中心顯示的字型名稱
            ImageUrl 輸入圖片的地址用於在二維碼中心區域顯示圖示
            LabelQr 設定顯示在二維碼中心區域的文字的內容
            Level 設定編碼的級別
            MinVersion 用於設定二維碼的點陣密度
            Mode 設定二維碼中心的圖示的顯示模式
            image_box：設定顯示為圖片盒子
            image_strip：設定顯示為圖片橫條
            label_box：設定顯示為標籤盒子
            label_strip：設定顯示為標籤條
            normal：不顯示
            PositionLabelQrX 設定標籤的橫向偏移量
            PositionLabelQrY 設定標籤的縱向偏移量
            QuietZone 設定控制元件邊框與二維碼之間的空白區域寬度
            Radius 設定二維碼點陣的弧度
            Render 設定二維碼在瀏覽器中的渲染模式
            SizeLabelQr 設定二維碼中的標籤顯示的尺寸大小

            # 5.2. 方法

            # 5.2.1. Generate

            procedure Generate;
            1

              呼叫此方法可動態重新產生二維碼。

            # 5.2.2. GetImage

            procedure GetImage;
            1

              使用此方法可動態更新獲取標籤中的影象資訊。

            3D-AI控制元件
            功能表列表

            ← 功能表列表→

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