Bootstrap Chameleon Logo

C++和JSON的转换关系

en

规则

将C++中Slate的链式编程语法转换成JSON格式，是TAPython降低Slate界面编写难度的重要途径。

两者转换有以下几条规则：

1. 省略SNew，直接写控件名。

例如：SNew(STextBlock)

将变成 "STextBlock":{}

2. 对于通过 "SAssignNew"来赋值的控件，使用"Aka" 关键字来替代。

例如：SAssignNew(ButtonPicture, SImage)

将变成 "SImage":{"Aka": "ButtonPicture"}

3. Slate中支持单个子组件的Widget中的 [ ] 转换成 "Content"：{ }

例如：

c++ 

SNew(SCheckBox)
.Padding(2.5f)
[
    SNew(STextBlock).Text(LOCTEXT("Key", "Key"))
]

将变为：

JSON

"SCheckBox":
{
    "Padding": 2.5,
    "Content": {
        "STextBlock": { "Text": "Key" }        
    }
}

上面STextBlock实际上是SCheckBox的子控件（内容）。

4. 多个子控件的，转换成 "Slots": []

支持多个Slots的Widget中的 +SSomewidget::Slot 转换成 "Slots": [{...}, {...} ...], 每个Slot中的子控件为Slots数组中的一个JsonObjectValue

例如：

C++ 

SNew(SHorizontalBox)
    + SHorizontalBox::Slot()
    .AutoWidth()
    .HAlign(HAlign_Center)
    .Padding(2.5f)
    [
        SNew(SCheckBox)
        .OnCheckStateChanged(this, &SControlRigPoseView::OnKeyPoseChecked)
        .Padding(2.5f)
        [
            SNew(STextBlock).Text(LOCTEXT("Key", "Key"))
        ]
    ]
    + SHorizontalBox::Slot()
    [
        SNew(SCheckBox)
        [
            SNew(STextBlock).Text(LOCTEXT("Mirror", "Mirror"))
        ]
    ]

JSON

"SHorizontalBox":
{
    "Slots": [
        {
            "AutoWidth": true,
            "HAlign": "Center",
            "Padding": 2.5,
            "SCheckBox":
            {
                "OnCheckStateChanged": "chameleon_tool_instance.on_key_pose_checked(%)",
                "Padding": 2.5,
                "Content": 
                {
                    "STextBlock": { "Text": "Key"}
                }
            }
        },
        {
            "SCheckBox":
            {
                "Content": 
                {
                    "STextBlock": { "Text": "Mirror"}
                }
            }
        }
    ]
}

5. Style.Get换成Style名和Brush两个值

从Style中获取Brush（或者其他各个控件Style的）的写法，将转换成Style和Brush两个值

例如

C++

SNew(SBorder)
.BorderImage(FEditorStyle::Get().GetBrush("ToolPanel.DarkGroupBorder"))
[
    SNew(SSpacer)
    .Size(FVector2D(100, 50))
]

转换为：

JSON

"SBorder":{
    "BorderImage":
    {
        "Style": "FEditorStyle",
        "Brush": "ToolPanel.DarkGroupBorder"
    },
    "Content": 
    {
        "SSpacer": { "Size": [100, 50] }
    }
}

6. Vector，Color等转换为数组形式

例如：

 SNew(SSpacer).Size(FVector2D(100, 50))

转换为：

"SSpacer": { "Size": [100, 50] }

7. 其他

  • AutoWidth()等函数调用，转换成通过同名字段设置
  • FillColumn(0, 0.5f).FillColumn(1, 0.5f).等不定长的属性，转换为二维数组的形式
  • Padding，Margin, ContentPadding等FMargin类型的属性，如果只有一个值，转换为数值，否则转换为数组

例如：

C++

SNew(SGridPanel)
    .FillColumn(0, 0.5f)
    .FillColumn(1, 0.5f)
    + SGridPanel::Slot(0, 0)
    [
        SNew(STextBlock)
        .Text(LOCTEXT("SBorderLabel", "SBorder"))
    ]
    + SGridPanel::Slot(1, 0)
    .Padding(0.0f, 4.0f)
    [
        SNew(SBorder)
        [
            SNew(SSpacer)
            .Size(FVector2D(100, 50))
        ]
    ]

等同于:

JSON

"SGridPanel":
{
    "FillColumn": [[0, 0.5],[1, 0.5]],
    "Slots":
    [
        {
            "Column_Row": [0, 0],
            "STextBlock": { "Text": "SBorder" }
        },
        {
            "Column_Row": [1, 0],
            "SBorder":
            {
                "Content":
                {
                    "SSpacer": { "Size": [100, 50] }
                }
            }
        }
    ]
}

参考链接

在 Built-in Tools 中有若干个Chameleon Tool的范例，可供参考。

也可以利用Sketch Tool直接在编辑器中尝试修改，修改是实时可见的，方便实用和属性界面相关的属性。具体可见：Polish UI with Sketch

在PyCharm中，可以配置预设的各个live-templates，方便快速输入。具体可见：Better autocomplete