مقداری ٹریڈنگ پلیٹ فارم 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کنٹرول رینڈرنگ سیٹ کرنے کے لیے استعمال کیا جاتا ہے ہر کنٹرول کے اپنے متعدد رینڈرنگ اجزاء ہوتے ہیں۔ مثال کے طور پر، اوپر کی مثال میں، منتخب ڈراپ ڈاؤن باکس کنٹرول کو “سگمنٹ سلیکٹر” کے طور پر پیش کرنا زیادہ مناسب ہے، کیونکہ ڈراپ ڈاؤن باکس کو دو بار کلک کرنے کی ضرورت ہے (ڈراپ ڈاؤن باکس کو پھیلانے کے لیے پہلی بار ، اور دوسری بار ایک آپشن منتخب کرنے کے لیے) سیگمنٹ سلیکٹر جزو کا استعمال کریں، بس آپ جو آپشن چاہتے ہیں اسے کلک کریں اور منتخب کریں۔

آخر میں، محتاط قارئین پوچھ سکتے ہیں، اوپر والے اسکرین شاٹ میں، مجھے پاپ اپ باکس میں کنٹرول کی معلومات نظر نہیں آرہی ہیں جہاں آپ نے “Trading Type” لکھا ہے، اور یہ “Trading Type” “Trading Settings” گروپ سے تعلق نہیں رکھتا۔ (یعنی:"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 کے نئے ورژن کے اطلاق کا صرف ایک چھوٹا سا حصہ پیش کرتا ہے چونکہ مجموعی طوالت زیادہ لمبی نہیں ہو سکتی، اس لیے ہم اگلے مضمون میں دیگر مطالباتی منظرناموں پر بات کرتے رہیں گے۔

آپ کی حمایت کے لئے شکریہ!