修改服务器表单

intermediate

修改服务器表单

前言
- 操作表单
- 模态表单

前言

WARNING

本教程面向已掌握JSON-UI基础知识的用户，若尚未了解可查阅JSON UI文档。

编辑服务器表单时，确保各表单间的兼容性至关重要。本教程将详细演示实现方法。

我们将通过修改ui/server_form.json文件来实现功能。

操作表单

首先需要修改main_screen_content的控件配置来添加自定义内容。

RP/ui/server_form.json

json

{
  "main_screen_content": {
    "modifications": [
      {
        "array_name": "controls",
        "operation": "insert_back",
        "value": [
          {
            "wiki_server_form_factory": { // 名称可自定义，但不能与"server_form_factory"重复
              "type": "panel",
              "factory": {
                "name": "server_form_factory", // 必填项，该名称会与long_form的数据绑定
                "control_ids": {
                  "long_form": "@server_form.our_long_form_panel"
                }
              }
            }
          }
        ]
      }
    ]
  }
}

虽然可以多次添加，但建议仅操作一次，因为我们可以在"long_form"中引用包含所有自定义表单的主面板。

RP/ui/server_form.json

json

{
  "main_screen_content": {
    "modifications": [
      {
        "array_name": "controls",
        "operation": "insert_back",
        "value": [
          {
            "wiki_server_form_factory": { 
              "type": "panel",
              "factory": {
                "name": "server_form_factory",
                "control_ids": {
                  "long_form": "@server_form.our_long_form_panel"
                }
              }
            }
          },
          {
            "wiki_server_form_factory_2": { // 名称不能与"server_form_factory"或同级元素重复
              "type": "panel",
              "factory": {
                "name": "server_form_factory",
                "control_ids": {
                  "long_form": "@server_form.our_long_form_panel_2"
                }
              }
            }
          }
        ]
      }
    ]
  }
}

接下来需要定义包含所有自定义表单的"our_long_form_panel"元素。

RP/ui/server_form.json

json

{
  "our_long_form_panel": {
    "type": "panel", // 可使用任意类型，这里为简化使用panel
    "bindings": [
      {
        "binding_name": "#title_text" // 在父级定义标题文本避免重复调用
      }
    ],
    "controls": [
      // 此处可引用表单，现以苹果图片为例
      {
        "our_custom_made_long_form": {
          "type": "image",
          "texture": "textures/items/apple",
          "size": [32, 32],
          "$title_needs_to_contain": "wiki_form:", // 操作表单标题需包含此内容才会显示苹果
          "bindings": [
            {
              "binding_type": "view",
              "source_control_name": "our_long_form_panel", // 父级面板名称，用于获取#title_text绑定
              "source_property_name": "(not ((#title_text - $title_needs_to_contain) = #title_text))",
              "target_property_name": "#visible"
            }
          ]
        }
      }
    ]
  }
}

测试时可能会发现与默认操作表单重叠。解决方法是在默认长表单中也定义绑定。

RP/ui/server_form.json

json

{
  "long_form": {
    "modifications": [
      {
        "array_name": "bindings",
        "operation": "insert_back",
        "value": [
          {
            "binding_name": "#title_text"
          },
          {
            "binding_type": "view",
            "source_property_name": "((#title_text - 'wiki_form:') = #title_text)", // 需匹配$title_needs_to_contain定义的标题
            // 也可同时匹配多个表单标题，如：(#title_text - 'form_1' - 'form_2' - 'form_3')
            "target_property_name": "#visible"
          }
        ]
      }
    ]
  }
}

现在苹果图片将正常显示且不会与默认长表单重叠。

模态表单

编辑模态表单（在server_form.json中称为Custom Forms）的流程与操作表单类似，但需要修改更多内容。

首先修改main_screen_content的控件配置：

RP/ui/server_form.json

json

{
  "main_screen_content": {
    "modifications": [
      {
        "array_name": "controls",
        "operation": "insert_back",
        "value": [
          {
            "wiki_server_form_factory": {
              "type": "panel",
              "factory": {
                "name": "server_form_factory",
                "control_ids": {
                  "long_form": "@server_form.our_long_form_panel",
                  "custom_form": "@server_form.our_custom_form_panel"
                }
              }
            }
          }
        ]
      }
    ]
  }
}

同样建议仅操作一次：

RP/ui/server_form.json

json

{
  "main_screen_content": {
    "modifications": [
      {
        "array_name": "controls",
        "operation": "insert_back",
        "value": [
          {
            "wiki_server_form_factory": {
              "type": "panel",
              "factory": {
                "name": "server_form_factory",
                "control_ids": {
                  "long_form": "@server_form.our_long_form_panel",
                  "custom_form": "@server_form.our_custom_form_panel"
                }
              }
            }
          },
          {
            "wiki_server_form_factory_2": {
              "type": "panel",
              "factory": {
                "name": "server_form_factory",
                "control_ids": {
                  "long_form": "@server_form.our_long_form_panel_2",
                  "custom_form": "@server_form.our_custom_form_panel_2"
                }
              }
            }
          }
        ]
      }
    ]
  }
}

定义包含所有自定义模态表单的面板：

RP/ui/server_form.json

json

{
  "our_custom_form_panel": {
    "type": "panel",
    "bindings": [
      {
        "binding_name": "#title_text"
      }
    ],
    "controls": [
      {
        "our_custom_made_custom_form": {
          "type": "image",
          "texture": "textures/items/apple",
          "size": [32, 32],
          "$title_needs_to_contain": "wiki_form:",
          "bindings": [
            {
              "binding_type": "view",
              "source_control_name": "our_custom_form_panel",
              "source_property_name": "(not ((#title_text - $title_needs_to_contain) = #title_text))",
              "target_property_name": "#visible"
            }
          ]
        }
      }
    ]
  }
}

解决与默认模态表单重叠问题：

RP/ui/server_form.json

json

{
  "custom_form": {
    "modifications": [
      {
        "array_name": "bindings",
        "operation": "insert_back",
        "value": [
          {
            "binding_name": "#title_text"
          },
          {
            "binding_type": "view",
            "source_property_name": "((#title_text - 'wiki_form:') = #title_text)",
            "target_property_name": "#visible"
          }
        ]
      }
    ]
  }
}

现在苹果图片将正常显示且不会与默认模态表单重叠。

贡献者

编辑修改服务器表单

修改服务器表单

前言 ​

操作表单 ​

模态表单 ​

贡献者

前言

操作表单

模态表单