# UI数据绑定

"label0": {
	"bindings": [{
		"binding_name": "#abcdefg", // 引擎会去找Python里的#abcdefg
		"binding_condition": "always_when_visible"
	}],
	"text": "#abcdefg" // 把#abcdefg的值指定到text属性上
	...
},

"label0": {
	"$my_binding_name": "#abcdefg"
	"bindings": [{
		"binding_name": "$my_binding_name",
		...
	}],
	...
},

"label0": {
  "text": "#my_python_binding",
  "bindings": [{
    "binding_name": "#my_python_binding",
    "binding_condition": "always_when_visible"
  }]
}

"label0": {
  "text": "#abcdefg", // 这里的#abcdefg需要手动指定给text属性
  "bindings": [{
    "binding_name": "#my_python_binding", // 引擎会去找 Python 里的 #my_python_binding
    "binding_name_override": "#abcdefg", // 把该值映射给本控件的 #abcdefg
    "binding_condition": "always_when_visible"
  }]
}

"label0": {
	"bindings": [{
		"binding_name": "#xxxxx_visible", //对应的Python绑定名称
		"binding_name_override": "#visible", //直接映射给visible属性
		"binding_condition": "always"
	}],
	...
},

"durability_bar": {
	"type": "custom",
	"renderer": "progress_bar_renderer",
	"property_bag": {
		"#progress_bar_total_amount": 1.0,
		...
	},
	"bindings": [
		{
			"binding_type": "view",
			"source_property_name": "(#progress_bar_current_amount < 1.0)", //需要加括号
			"target_property_name": "#touch_progress_bar_visible"
		}
		...
	]
}

{
    "namespace": "guideBookUI",
	"locationToggleGroup": {
        "anchor_from": "top_middle",
        "anchor_to": "top_middle",
        "type": "stack_panel",
        "orientation": "horizontal", // 扩展方向，默认是垂直，这里我们需要水平
        "layer": 1,
        "size": [ "100%", 22 ],
        "controls": [
            {
                "toggle0@guideBookUI.typeToggleBtn": {
                    "$buttonLabel": "被动生物",
                    "$toggle_group_forced_index": 0
                }
            },
            {
                "content_padding_1": {
                   "size" : [ 4, "100%" ],
                   "type" : "panel"
                }
            },
            {
                "toggle1@guideBookUI.typeToggleBtn": {
                    "$buttonLabel": "中立生物",
                    "$toggle_group_forced_index": 1
                }
            },
            {
                "content_padding_2": {
                   "size" : [ 4, "100%" ],
                   "type" : "panel"
                }
            },
            {
                "toggle2@guideBookUI.typeToggleBtn": {
                    "$buttonLabel": "攻击生物",
                    "$toggle_group_forced_index": 2
                }
            },
            {
                "content_padding_3": {
                   "size" : [ 4, "100%" ],
                   "type" : "panel"
                }
            },
            {
                "toggle3@guideBookUI.typeToggleBtn": {
                    "$buttonLabel": "可驯服",
                    "$toggle_group_forced_index": 3
                }
            }
        ]
    },
    "typeToggleBtn@common.toggle": {
        "$checked_img": "textures/ui/guide_book/checked",
        "$default_texture": "textures/ui/guide_book/btn02_unuse",
        "$pressed_texture": "textures/ui/guide_book/btn02_click",
        "$locked_texture": "textures/ui/guide_book/btn02_unuse",
        "$default_font_color": [ 0.674, 0.482, 0.361 ],
        "$pressed_font_color": [ 0.494, 0.188, 0.02 ],
        "$locked_font_color": [ 0.674, 0.482, 0.361 ],
        "$unchecked_control": "mod7CommonUI.toggle_unchecked_state", // 未选中状态
        "$checked_control": "mod7CommonUI.toggle_checked_state", // 选中状态
        "$unchecked_hover_control": "mod7CommonUI.toggle_unchecked_state", // 未选中时hover状态
        "$checked_hover_control": "mod7CommonUI.toggle_checked_state", // 选中时hover状态
        "$unchecked_locked_control": "mod7CommonUI.toggle_locked_state", // 未选中且锁定状态（不可交互）
        "$unchecked_locked_hover_control": "mod7CommonUI.toggle_locked_state", // 未选中且锁定时hover状态（不可交互）
        "$checked_locked_control": "mod7CommonUI.toggle_locked_state", // 选中且锁定状态（不可交互）
        "$checked_locked_hover_control": "mod7CommonUI.toggle_locked_state", // 选中且锁定时hover状态（不可交互）
        "anchor_from": "top_left",
        "anchor_to": "top_left",
        "size": [ 54, 22 ],
        "$radio_toggle_group": true, // 是否单选，true的时候同一个toggle_name的被视为同一个group，同一个group同一时刻只能有一个toggle被选中
        "$toggle_name": "#typeTab", // toggle绑定的group名
        "$toggle_group_default_selected": 0
    }
}

{
    "namespace" : "mod7CommonUI",
	"toggle_checked_state": {
        "$pressed_texture|default": "",
        "$pressed_font_color|default": [ 1, 1, 1 ],
        "type": "image",
        "texture": "$pressed_texture",
        "nineslice_size": 4,
        "controls": [
            {
                "toggleText": {
                    "type": "label",
                    "$buttonLabel|default": "测试",
                    "color": "$pressed_font_color",
                    "text": "$buttonLabel",
                    "layer": 3
                }
            },
            {
                "checkedImg": {
                    "type": "image",
                    "$checked_img|default": "",
                    "texture": "$checked_img",
                    "size": [ 12, 6 ],
                    "layer": 3,
                    "anchor_from": "bottom_middle",
                    "anchor_to": "bottom_middle"
                }
            }
        ],
        "layer": 10
    },
    "toggle_unchecked_state": {
        "$default_texture|default": "",
        "$default_font_color|default": [ 0, 0, 0 ],
        "type": "image",
        "texture": "$default_texture",
        "nineslice_size": 4,
        "controls": [
            {
                "toggleText": {
                    "type": "label",
                    "$buttonLabel|default": "测试",
                    "color": "$default_font_color",
                    "text": "$buttonLabel",
                    "layer": 3
                }
            }
        ],
        "layer": 1
    },
    "toggle_locked_state": {
        "$locked_texture|default": "",
        "$locked_font_color|default": [ 0, 0, 0 ],
        "type": "image",
        "texture": "$locked_texture",
        "nineslice_size": 4,
        "controls": [
            {
                "toggleText": {
                    "type": "label",
                    "offset": [ 6, 0 ],
                    "$buttonLabel|default": "测试",
                    "color": "$locked_font_color",
                    "text": "$buttonLabel",
                    "layer": 3
                }
            },
            {
                "lockedImg": {
                    "type": "image",
                    "size": [ 12, 12 ],
                    "offset": [ -8, 0 ],
                    "texture": "textures/ui/lock",
                    "color": "$locked_font_color",
                    "layer": 1
                }
            }
        ],
        "layer": 2
    }
}

{
    "namespace": "guideBookUI",
    "itemToggleGrid": {
        "anchor_from": "top_middle",
        "anchor_to": "top_middle",
        "bindings": [
            {
                "binding_condition": "always",
                "binding_name": "#itemToggleGrid.item_count", // 我们通过该变量名复写引擎中对应的变量名
                "binding_name_override": "#StackGridItemsCount" // 这是引擎中的变量名，用于控制stack_grid的数量
            }
        ],
        "collection_name": "itemToggles", // 绑定的集合名
        "controls": [
            {
                "itemToggleBtn@guideBookUI.itemToggleBtn" : {} // stack_grid中的template，改变#StackGridItemsCount的值会动态克隆所有controls
            }
        ],
        "item_count": 10,
        "layer": 0,
        "orientation": "vertical", // 扩展方向，垂直
        "property_bag": {
            "#itemToggleGrid.item_count": 10 // 默认有10个item，实际根据绑定值返回实时更新
        },
        "size": [ "100%", "default" ],
        "type": "stack_grid",
        "visible": true
    },
    "itemToggleBtn@common.toggle": {
        "$unchecked_control": "guideBookUI.itemUncheckedState",
        "$checked_control": "guideBookUI.itemCheckedState",
        "$unchecked_hover_control": "guideBookUI.itemUncheckedState",
        "$checked_hover_control": "guideBookUI.itemCheckedState",
        "$unchecked_locked_control": "guideBookUI.itemUncheckedState",
        "$unchecked_locked_hover_control": "guideBookUI.itemUncheckedState",
        "$checked_locked_control": "guideBookUI.itemUncheckedState",
        "$checked_locked_hover_control": "guideBookUI.itemUncheckedState",
        "$toggle_grid_collection_name": "itemToggles", // toggle列表绑定的collection，在common.toggle中定义
        "$item_collection_name": "itemToggles", // 文字绑定的collection，在下方的itemLabel中定义
        "anchor_from": "top_left",
        "anchor_to": "top_left",
        "size": [ "100%", 16 ],
        "$radio_toggle_group": true,
        "$toggle_name": "#itemToggleGroup",
        "$toggle_group_default_selected": 0
    },
    "itemCheckedState": {
        "type": "image",
        "texture": "textures/ui/white_bg",
        "color": [ 0.7764, 0.7764, 0.7764 ],
        "nineslice_size": 1,
        "controls": [
            {
                "itemLabel@guideBookUI.itemLabel": {}
            }
        ],
        "layer": 2
    },
    "itemUncheckedState": {
        "type": "image",
        "texture": "textures/ui/white_bg",
        "color": [ 0.3647, 0.3647, 0.3647 ],
        "$label_color": [ 0.776, 0.776, 0.776],
        "nineslice_size": 1,
        "controls": [
            {
                "itemLabel@guideBookUI.itemLabel": {}
            }
        ],
        "layer": 2
    },
    "itemLabel": {
        "bindings": [
            {
                "binding_collection_name" : "$item_collection_name",
                "binding_name" : "#label_name.text",
                "binding_type" : "collection"
            }
        ],
        "$label_color|default": [ 1, 1, 1 ],
        "color": "$label_color",
        "property_bag": {
            "#label_name.text" : "ha ha"
        },
        "layer": 3,
        "text" : "#label_name.text",
        "type" : "label"
    },
}