定量取引プラットフォーム API インターフェースの大幅なアップデートにより、プラットフォームの戦略インターフェース パラメータ、インタラクティブ コントロールなどの機能が調整され、多くの新機能が追加されました。前回の記事では、インターフェースパラメータとインタラクティブコントロールの更新について詳しく説明しました。この記事では、FMZ.COM に新しく導入されたステータス バー ボタンのアプリケーションについて引き続き説明します。

すべての戦略開発者は、使いやすく、強力で、デザインがシンプルな UI インターフェイスを構築したいと考えています。この基準を達成するために、FMZ.COM はプラットフォーム機能のアップグレードとユーザー エクスペリエンスの向上に全力を尽くしています。戦略ページのステータス バーに直接インタラクティブ コントロールを設計することは、この要求に基づいたアップグレードです。

次に、多品種戦略シナリオでの応用を見てみましょう。

複数製品戦略シナリオ

完全に自動化された多品種アービトラージ戦略であるか、半手動の多品種タイミング戦略であるか。戦略 UI インターフェイスには、特定の製品に対する利益確定、損失停止、清算、計画委託などの機能的なインタラクティブ ボタンがいくつか必要です。

次に、最も簡単な使用シナリオでステータス バー ボタンの新機能を調べてみましょう。私たちの戦略では複数のシンボルを取引すると仮定します。

BTC_USDT 永久契約、ETH_USDT 永久契約、LTC_USDT 永久契約、BNB_USDT 永久契約、SOL_USDT 永久契約

戦略が自動取引を実行している間、戦略インターフェースのステータスバーに各商品の開始ボタンを設計したいと考えています。ただし、このオープンポジションボタンには、次のような一連の詳細な設定が必要です。

• 注文タイプ: 指値注文/成行注文。
• 注文の注文数量: 数量。
• 注文の価格: 価格。
• 取引方向: 買い（ロング）、売り（ショート）。

このプラットフォームのアップグレード前は、ステータス バー ボタンは単にボタン操作メッセージをトリガーするだけでした。一連のコントロールをバインドして複雑なメッセージを設定する方法はありません。このインタラクションのアップグレードにより、このニーズが解決されます。コード設計を見てみましょう。このような機能の構築方法を簡単に理解できるように、コードに詳細なコメントが追加されています。

デザイン例:

// 设置操作的各个品种 BTC_USDT.swap 为FMZ平台定义的品种格式，表示BTC的U本位永续合约
var symbols = ["BTC_USDT.swap", "ETH_USDT.swap", "LTC_USDT.swap", "BNB_USDT.swap", "SOL_USDT.swap"]

// 根据按钮模板构造按钮
function createBtn(tmp, group) {
    var btn = JSON.parse(JSON.stringify(tmp))
    _.each(group, function(eleByGroup) {
        btn["group"].unshift(eleByGroup)
    })

    return btn
}

function main() {
    LogReset(1)

    var arrManager = []
    _.each(symbols, function(symbol) {
        arrManager.push({
            "symbol": symbol,
        })
    })

    // Btn
    var tmpBtnOpen = {
        "type": "button",
        "cmd": "open",
        "name": "开仓下单",
        "group": [{
            "type": "selected",
            "name": "tradeType",
            "label": "下单类型",
            "description": "市价单、限价单",
            "default": 0,
            "group": "交易设置",
            "settings": {
                "options": ["市价单", "限价单"],
                "required": true,
            }
        }, {
            "type": "selected",
            "name": "direction",
            "label": "交易方向",
            "description": "买入、卖出",
            "default": "buy",
            "group": "交易设置",
            "settings": {
                "render": "segment",
                "required": true,
                "options": [{"name": "买入", "value": "buy"}, {"name": "卖出", "value": "sell"}],
            }
        }, {
            "type": "number",
            "name": "price",
            "label": "价格",
            "description": "订单的价格",
            "group": "交易设置",
            "filter": "tradeType==1",
            "settings": {
                "required": true,
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "下单量",
            "description": "订单的下单量",
            "group": "交易设置",
            "settings": {
                "required": true,
            }
        }],
    }

    while (true) {
        var tbl = {"type": "table", "title": "dashboard", "cols": ["symbol", "actionOpen"], "rows": []}
        _.each(arrManager, function(m) {
            var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "交易品种", "default": m["symbol"], "settings": {"required": true}}])
            tbl["rows"].push([m["symbol"], btnOpen])
        })
        
        var cmd = GetCommand()
        if (cmd) {
            Log("收到交互：", cmd)
            
            // 解析交互消息: open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
            // 根据第一个冒号:之前的指令判断是哪种按钮模板触发的消息
            var arrCmd = cmd.split(":", 2)
            if (arrCmd[0] == "open") {
                var msg = JSON.parse(cmd.slice(5))
                Log("交易品种：", msg["symbol"], "，交易方向：", msg["direction"], "，订单类型：", msg["tradeType"] == 0 ? "市价单" : "限价单", msg["tradeType"] == 0 ? "，订单价格：当前市价" : "，订单价格：" + msg["price"], "，订单数量：", msg["amount"])
            }
        }

        // 输出状态栏信息
        LogStatus(_D(), "\n", "`" + JSON.stringify(tbl) + "`")
        Sleep(1000)
    }
}

まずはランニングエフェクトを見て、次にボタンコントロールのデザインについて詳しく説明します。戦略コードは以下のように実行されます。

ボタンをクリックすると、特定の注文情報を設定するためのポップアップ ウィンドウが表示されます。

開設情報を記入後、デザインしました。

戦略がメッセージを受信し、コード内でメッセージを解析して注文のさまざまな設定を出力していることがわかります。次に、このボタンがどのように構成されているかを見てみましょう。

まず、JSON オブジェクトであるボタン テンプレートを定義し、それを変数 tmpBtnOpen に割り当てます。具体的な手順は、以下のコードコメントに直接記載しました。

    {
        "type": "button",       // 状态栏输出控件的类型，目前仅支持按钮
        "cmd": "open",          // 当按钮触发时，策略中GetCommand函数收到的消息前缀，例如这个例子：open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
        "name": "开仓下单",      // 策略界面，状态栏上的按钮上显示的内容，参考上图
        "group": [{             // 当按钮触发时，弹框中的控件配置设置，这一层的group字段值是一个数组，弹框中的控件根据这个数组顺序自上而下排列
            "type": "selected",               // 第一个控件类型是：selected ，下拉框 
            "name": "tradeType",              // 当状态栏按钮触发时，消息中包含该控件的设置内容，tradeType就是当前这个下拉框控件输入的值的键名。如果选择第一个选项「市价单」GetCommand函数收到的消息中就包含 "tradeType":0 的键值对信息。
            "label": "下单类型",               // 按钮触发时，弹框中当前控件的标题
            "description": "市价单、限价单",    // 当前控件的说明信息，鼠标放在控件右侧“小问号”图标上就会显示这个说明信息。
            "default": 0,                     // 当前控件的默认值，例如当前是下拉框控件，如果不做选择，默认为下拉框第一个选项，通常下拉框的默认值指的是下拉框选项的索引，即第一个是0，然后是1，以此类推。如果下拉框的选项options是key-value形式则默认值指的是value。
            "group": "交易设置",               // 弹框中的控件如果很多，可以分组，这个字段可以设置分组信息
            "settings": {                     // 当前这个下拉框的具体设置
                "options": ["市价单", "限价单"],   // options和下拉框相关的设置，用于设置下拉框中的选项，这个字段值是一个数组，依次排列下拉框中的选项。
                "required": true,                // required表示是否设置为必选（必填）内容。
            }
        }, {
            "type": "selected",         // 这也是一个下拉框类型
            "name": "direction",
            "label": "交易方向",
            "description": "买入、卖出",
            "default": "buy",
            "group": "交易设置",
            "settings": {
                "render": "segment",   // 和默认下拉框控件不同的是，通过render字段可以把下拉框替换为“分段选择器”，如上图中的“买入/卖出”控件。
                "required": true,
                "options": [{"name": "买入", "value": "buy"}, {"name": "卖出", "value": "sell"}],   // 使用 key-value方式设置options
            }
        }, {
            "type": "number",           // 数值输入框类型控件
            "name": "price",
            "label": "价格",
            "description": "订单的价格",
            "group": "交易设置",
            "filter": "tradeType==1",   // 过滤器，可以用于确定是否显示当前控件，当tradeType==1时，表示是市价单，所以不需要该控件设置价格，所以不显示。
            "settings": {
                "required": true,       // 当该控件激活显示时为必选（必填）
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "下单量",
            "description": "订单的下单量",
            "group": "交易设置",
            "settings": {
                "required": true,
            }
        }],
    }

• group これは単なる例であるため、実際の設計と使用では、ポジションを開くときに設定される注文方向、価格、数量、注文タイプに限定されず、さらに多くの要件が存在する可能性があります。利益確定注文や損切り注文などの終了ルールも存在する場合があります。新しいUIはgroupフィールド。これにより、上のスクリーンショットの折りたたまれた「トランザクション設定」設定など、ポップアップ ボックス内のコントロールのグループをグループ化して表示するのに便利です。

• required ボタン構造group現場でのコントロールが強化されましたrequired設定フィールドは、必須（必須）かどうかを設定するために使用されます。必須（必須）に設定されていても、使用中に入力（選択）されていない場合は、OKボタンをクリックして対話型情報を送信できず、赤いプロンプトメッセージが表示されます。

• filter 追加したfilterこのフィールドは、フィルターの依存関係を設定するために使用されます。たとえば、上記の例では、成行注文タイプを選択した場合、注文価格は必要ありません。type「数字」はname「価格」のコントロールは非表示になっています。

• render 基本的なコントロールの種類 (タイプ フィールド設定) は、数値、文字列、選択、ブール値です。追加されたフィールドrenderコントロールのレンダリングを設定するために使用されます。各コントロールには、独自の複数のレンダリング コンポーネントがあります。例えば、上記の例では、ドロップダウンボックスを2回クリックする必要があるため（1回目はドロップダウンボックスを展開するため）、選択されたドロップダウンボックスコントロールを「セグメントセレクター」としてレンダリングする方が適切です。 、2 回目にオプションを選択します)。セグメント セレクター コンポーネントを使用して、クリックして必要なオプションを選択するだけです。

最後に、注意深い読者は、上記のスクリーンショットで、「取引タイプ」と書いたポップアップボックスに制御情報が表示されず、この「取引タイプ」は「取引設定」グループに属していないと疑問に思うかもしれません。 （例："group": "交易设置"この設定は実装されます。

以下は、ステータス バー テーブル内のボタンをステータス バー内の他の情報にバインドするデザインのデモです。createBtnテンプレートに基づく機能tmpBtnOpen最終的なボタン構造を構築し、構築中にその他の情報をボタン構造に書き込みます。

// 构造按钮的时候，绑定当前行的品种名称等信息，给按钮的弹框增加一个控件，并排在首位
var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "交易品种", "default": m["symbol"], "settings": {"required": true}}])

最終的な効果は、戦略インターフェースのステータスバーをクリックするとsymbolのためにBNB_USDT.swapこの行のボタンをクリックすると、ポップアップ ウィンドウの「取引タイプ」入力ボックスが自動的に入力されます。BNB_USDT.swap。

この記事は、新バージョンの UI の適用のほんの一部を紹介しただけです。全体の長さが長くなりすぎることはないので、次の記事では引き続き他の需要シナリオの設計について説明します。

ご支援ありがとうございます！