Merge pull request #3 from linyuzhe210/UIFixDoc

fix：修改界面与交互文档的代码块缩进、代码块、json格式

mcguide/18-界面与交互/19-控件属性动画.md

@@ -187,12 +187,12 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 要表现一个属性动画，需要先写一个Json数据块，透明度动画举例如下（相关参数会在下文详细描述）：
 
 ```json 
-  {
+{
     "anim_type" : "alpha",
     "duration" : 1.0,
     "from" : 0.0,
     "to" : 1.0
-   }
+}
 ```
 
 这段代码块代表一个控件在1秒钟内alpha值从0线性变化到1的属性动画，为了将这个动画绑定到控件上，一共有两种写法。
@@ -200,7 +200,7 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 一种是将Json数据块直接赋给alpha属性：
 
 ```json 
-  {
+{
     "alphaImg" : {
         "alpha" : {
             "anim_type" : "alpha",
@@ -212,13 +212,13 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "type" : "image",
         "visible" : true
     }
-   }
+}
 ```
 
 另一种则是将属性动画写成自定义控件的形式写在UIjson文件的最外层，在alpha属性值以 “@”+动画名 的形式进行赋值：
 
 ```json 
-  {
+{
     "alphaImg" : {
         "alpha" : "@show_alpha_ani",
         "texture" : "textures/netease/common/image/default",
@@ -230,8 +230,8 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "duration" : 0.30,
         "from" : 0.0,
         "to" : 1.0
-        },
     }
+}
 ```
 
 两种写法都能达成相同的效果，不同的是第二种写法能够被复用。
@@ -259,6 +259,7 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 * 注2
 
 ```json
+{
     "alphaImg" : {
         "alpha" : "@show_alpha_ani",
         "texture" : "textures/netease/common/image/default",
@@ -284,8 +285,8 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "duration" : 0.30,
         "from" : 1.0,
         "to" : 0.0
-        },
+    }
-
+}
 ```
 
 ### 透明度动画
@@ -301,6 +302,7 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![alpha动画](./picture/UIAnimation/alpha.gif)
 
 ```json
+{
     "alphaImg" : {
         "alpha" : "@show_alpha_ani",
         "texture" : "textures/netease/common/image/default",
@@ -326,8 +328,8 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "duration" : 0.30,
         "from" : 1.0,
         "to" : 0.0
-        },
+    }
-
+}
 ```
 
 ### 裁剪动画
@@ -343,6 +345,7 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![clip动画](./picture/UIAnimation/clip.gif)
 
 ```json
+{
     "clipImg" : {
         "clip_ratio" : {
               "anim_type" : "clip",
@@ -353,8 +356,8 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "texture" : "textures/netease/common/image/default",
         "type" : "image",
         "visible" : true
-        },
+    }
-
+}
 ```
 
 ### 颜色动画
@@ -370,6 +373,7 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![color动画](./picture/UIAnimation/color.gif)
 
 ```json
+{
     "colorImg" : {
         "color": "@color_ani",
         "texture" : "textures/netease/common/image/default",
@@ -381,8 +385,8 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "duration" : 1.0,
         "from" : [1,0,0],
         "to" : [0,0,1]
-        },
+    }
-
+}
 ```
 
 ### 序列帧动画
@@ -402,6 +406,7 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![flipbook动画](./picture/UIAnimation/flipbook.gif)
 
 ```json
+{
     "flipbookImg" : {
         "texture" : "textures/ui/my_eating_apple",
         "type" : "image",
@@ -415,7 +420,8 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "frame_count": 36,
         "fps": 10,
         "reversible": false
-        },
+    }
+}
 ```
 
 当一个图片控件被用作序列帧的载体时，该控件的属性配置有以下规则需要遵守：
@@ -441,6 +447,7 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![offset动画](./picture/UIAnimation/offset.gif)
 
 ```json
+{
     "offsetImg" : {
         "offset" : "@offset_ani",
         "texture" : "textures/netease/common/image/default",
@@ -452,8 +459,8 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "duration" : 1.0,
         "from" : [0, 0],
         "to" : [0, 50]
-        },
+    }
-
+}
 ```
 
 **注**
@@ -477,6 +484,7 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![size动画](./picture/UIAnimation/size.gif)
 
 ```json
+{
     "sizeImg" : {
         "size" : "@size_ani",
         "texture" : "textures/netease/common/image/default",
@@ -488,8 +496,8 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "duration" : 1.0,
         "from" : [100, 100],
         "to" : [150, 150]
-        },
+    }
-
+}
 ```
 
 **注**
@@ -513,6 +521,7 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![uv动画](./picture/UIAnimation/uv.gif)
 
 ```json
+{
     "sizeImg" : {
         "uv" : "@uv_ani",
         "texture" : "textures/netease/common/image/default",
@@ -524,8 +533,8 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
         "duration" : 5,
         "from" : [0, 0],
         "to" : [2240, 0]
-        },
+    }
-
+}
 ```
 
 

mcguide/18-界面与交互/2-从零开始创建UI.md

@@ -248,13 +248,13 @@ shootButton的锚点，位移XY，尺寸XY的参考属性如下。按照这种
 3. 然后激活（显示）对应的界面预设
 
 ```python
-	def InitClient(self):
+def InitClient(self):
     import mod.client.extraClientApi as clientApi
     self.ListenForEngineEvent(UiInitFinishedEvent, self, self.OnUIInitFinished)
 ```
 
 ```python
-	def OnUIInitFinished(self, args):
+def OnUIInitFinished(self, args):
     import mod.client.extraClientApi as clientApi
     if clientApi.GetPlatform() == 0:
         uiNodePreset = self.GetParent().GetChildPresetsByName("PC版UI界面")[0]

mcguide/18-界面与交互/30-UI说明文档.md

@@ -12,13 +12,12 @@ time: 分钟
 
 * 示例中为"myUIName"
 
-```json
+```html
-    myUIName.json
+myUIName.json
 
-    "namespace" : "myUIName"
+"namespace": "myUIName"
-
-    myUIName.py
 
+myUIName.py
 ```
 
 ## JSON编写说明
@@ -32,7 +31,9 @@ Json是UI界面的显示内容和绑定的集合，UI是一种树状的组织结
 命名空间是这个界面的名称，我们规定json文件名和namespace一致。
 
 ```json
+{
     "namespace" : "myUIName"
+}
 ```
 
 ### Main Screen
@@ -42,10 +43,12 @@ main是这个界面名称，我们规定使用main，即一个json文件是一
 controls中的内容是该界面下的树状节点，即子节点。
 
 ```json
+{
     "main@common.base_screen" : {
 		"controls" : [
 		]
 	}
+}
 ```
 
 |          变量           | 解释                                          |
@@ -87,6 +90,7 @@ path = "/panel0/text0"
 为了适配异形屏，我们可以展示screen中的内容通过引用的形式写在screen的$screen_content属性中。
 
 ```json
+{
     "main@common.base_screen" : {
 		"$screen_content":"myUIName.panel0"
     },
@@ -103,6 +107,7 @@ path = "/panel0/text0"
         "type" : "label",
         "visible" : true
    }
+}
 ```
 
 被$screen_content引用的内容，其显示内容的范围不会被异形屏遮挡。此时text0的路径为
@@ -121,7 +126,8 @@ path = base_path + "/text0"
 screen，即画布控件，是游戏中一个UI界面的根节点，所有其他控件只有挂在画布下才能被正确显示出来。
 
 ```json
-"main1" : {
+{
+    "main1" : {
         "absorbs_input" : true,
         "always_accepts_input" : false,
         "controls" : [
@@ -160,6 +166,7 @@ screen，即画布控件，是游戏中一个UI界面的根节点，所有其他
         "type" : "panel",
         "visible" : true
    }
+}
 ```
 
 |  <div style="width:100px">变量</div>      | 解释                                                         |
@@ -251,6 +258,7 @@ absorbs_input暂时无法生效，等待后续修复。
 
 Label 是文本框控件，用来显示文本信息，默认的字体是MC字体，如果有中文会变成中文字体格式，暂时不支持换字体，可以通过接口统一设置字体，如果需要设置后续有介绍。
 ```json
+{
     "label0" : {
         "anchor_from" : "center",
         "anchor_to" : "center",
@@ -267,7 +275,8 @@ Label 是文本框控件，用来显示文本信息，默认的字体是MC字体
         "line_padding" : 0.0,
         "type" : "label",
         "visible" : true
-   },
+   }
+}
 ```
 | <div style="width:150px">变量</div> | 解释                                                         |
 | :------------: | ----------------------------------------------------------- |
@@ -315,6 +324,7 @@ Label 是文本框控件，用来显示文本信息，默认的字体是MC字体
 Image是指图片控件，具有图片裁剪，图片九宫格，颜色叠加，uv偏移，旋转显示的额外属性。
 
 ```json
+{
     "image0" : {
         "anchor_from" : "center",
         "anchor_to" : "center",
@@ -338,7 +348,8 @@ Image是指图片控件，具有图片裁剪，图片九宫格，颜色叠加，
         "rotate_pivot": [0.5, 0.5],
         "rotate_angle": 0,
         "visible" : true
-   },
+   }
+}
 ```
 
 | <div style="width:150px">变量</div>   | 解释                                         |
@@ -456,6 +467,7 @@ Button 是按钮控件，同时含有Image和Label。按钮有三种状态，分
 * controls表示控制的子节点，
 
 ```json
+{
     "button0@common.button" : {
         "$default_texture" : "textures/netease/common/button/default",
         "$hover_texture" : "textures/netease/common/button/hover",
@@ -550,7 +562,8 @@ Button 是按钮控件，同时含有Image和Label。按钮有三种状态，分
         "nine_slice_top" : "$nine_slice_top",
         "texture" : "$pressed_texture",
         "type" : "image"
-   },
+   }
+}
 ```
 
 | <div style="width:200px">变量</div>  | 解释                                |
@@ -587,6 +600,7 @@ Button 是按钮控件，同时含有Image和Label。按钮有三种状态，分
 panel为面板控件，主要是用来将控件进行分类和管理，类似文件夹。
 
 ```json
+{
     "panel" : {
         "anchor_from" : "center",
         "anchor_to" : "center",
@@ -596,6 +610,7 @@ panel为面板控件，主要是用来将控件进行分类和管理，类似文
         "type" : "panel",
         "visible" : true
    }
+}
 ```
 
 | 变量 | 解释        |
@@ -609,7 +624,8 @@ panel为面板控件，主要是用来将控件进行分类和管理，类似文
 input_panel与panel类似，可以用来放置其他控件，但除此之外还可以用来拖动，或实现“模态框”功能。
 
 ```json
-"InputPanel" : {
+{
+    "InputPanel" : {
         "anchor_from" : "top_left",
         "anchor_to" : "top_left",
         "button_mappings": [
@@ -628,6 +644,7 @@ input_panel与panel类似，可以用来放置其他控件，但除此之外还
         "size" : [ 198.0, 137.0 ],
         "type" : "input_panel",
         "visible" : true
+    }
 }
 ```
 
@@ -681,23 +698,28 @@ InputPanel维护着一个拖拽偏移量，它代表着在整个拖拽过程中
 布局面板，用于自动布局该控件的子控件
 
 ```json
-"stack_panel0": {
+{
+    "stack_panel0": {
         "layer": 1,
         "orientation": "horizontal",
         "size": [100, 100],
         "type": "stack_panel",
-    "controls": [{
+        "controls": [
+            {
             "panel_0": {
                 "type": "panel",
                     "size": [2, 2]
                 }
-    }, {
+            }, 
+            {
             "fill_0": {
                     "type": "panel",
                     "size": ["fill", 1]
                 }
-    }]
+            }
-},
+        ]
+    }
+}
 ```
 
 |      变量       | 解释                                                         |
@@ -725,6 +747,7 @@ InputPanel维护着一个拖拽偏移量，它代表着在整个拖拽过程中
 TextEditBox是输入框控件，用来输入文字信息，可以获取输入内容，设置输入框内容，触发输入中和输入完成事件，设置最大输入值等。下面的示例展示了一个搜索框的信息。
 
 ```json
+{
     "text_edit_box0@common.text_edit_box" : {
         "$edit_box_default_texture" : "textures/ui/edit_box_indent",
         "$edit_box_hover_texture" : "textures/ui/edit_box_indent_hover",
@@ -769,7 +792,8 @@ TextEditBox是输入框控件，用来输入文字信息，可以获取输入内
         "nine_slice_top" : "$nine_slice_top",
         "texture" : "$edit_box_hover_texture",
         "type" : "image"
-   },
+   }
+}
 ```
 
 | <div style="width:150px">变量</div>                     | 解释                                                         |
@@ -788,6 +812,11 @@ TextEditBox是输入框控件，用来输入文字信息，可以获取输入内
 * 注1
 
 ```python
+import mod.client.extraClientApi as clientApi
+ViewBinder = clientApi.GetViewBinderCls()
+ViewRequest = clientApi.GetViewViewRequestCls()
+ScreenNode = clientApi.GetScreenNodeCls()
+
 class TestScreen(ScreenNode):
     def __init__(self, namespace, name, param):
         ScreenNode.__init__(self, namespace, name, param)
@@ -803,7 +832,6 @@ class TestScreen(ScreenNode):
     @ViewBinder.binding(ViewBinder.BF_BindString)
     def ReturnTextString(self):
         return self.text
-
 ```
 
 * 注2
@@ -843,7 +871,8 @@ PC和IOS平台没有这个问题
 该控件可以用于在ui上显示骨骼模型
 
 ```json
-"paper_doll0" : {
+{
+    "paper_doll0" : {
         "anchor_from" : "center",
         "anchor_to" : "center",
         "animation" : "",
@@ -857,7 +886,8 @@ PC和IOS平台没有这个问题
         "type" : "custom",
         "visible" : true,
         "enable_scissor_test" : false,
-   },
+   }
+}
 ```
 | <div style="width:100px">变量</div>  | 解释                                                         |
 | :----------: | ----------------------------------------------------------- |
@@ -891,7 +921,8 @@ PC和IOS平台没有这个问题
 3）生物类型原版模型展示。
 
 ```json
-"paper_doll0" : {
+{
+    "paper_doll0" : {
         "anchor_from" : "center",
         "anchor_to" : "center",
         "layer" : 22,
@@ -903,7 +934,8 @@ PC和IOS平台没有这个问题
         "size" : [ 100, 100 ],
         "type" : "custom",
         "visible" : true,
-      "enable_scissor_test" : false,
+        "enable_scissor_test" : false
+    }
 }
 ```
 
@@ -934,7 +966,7 @@ param = {
     "init_rot_y": 60, # 初始朝向
     "molang_dict": {"variable.liedownamount": 1} # molang变量dict，其中key为字符串，value为float类型
 }
-uiNode.RenderPaperDoll(path, param)
+self.GetBaseUIControl(path).asNeteasePaperDoll().RenderEntity(param)
 ```
 
 2）渲染骨骼模型
@@ -947,7 +979,7 @@ param = {
     "animation": "fengxi", # 动画名称
     "animation_looped": False, # 是否循环播放
 }
-uiNode.RenderPaperDoll(path, param)
+self.GetBaseUIControl(path).asNeteasePaperDoll().RenderSkeletonModel(param)
 ```
 
 3）渲染原版生物模型（不需要生物实例）
@@ -960,7 +992,7 @@ param = {
     "init_rot_y": 60,
     "molang_dict": {"variable.state": 2, "variable.liedownamount": 1} # 通过molang变量来调整渲染效果（坐下的猫）
 }
-uiNode.RenderPaperDoll(path, param)
+self.GetBaseUIControl(path).asNeteasePaperDoll().RenderEntity(param)
 ```
 
 使用注意事项：
@@ -981,7 +1013,8 @@ uiNode.RenderPaperDoll(path, param)
 该控件可以用于在ui上显示物品
 
 ```json
-"item_renderer0" : {
+{
+    "item_renderer0" : {
         "anchor_from" : "center",
         "anchor_to" : "center",
         "layer" : 1,
@@ -993,7 +1026,8 @@ uiNode.RenderPaperDoll(path, param)
         "size" : [ 100, 100 ],
         "type" : "custom",
         "visible" : true
-   },
+   }
+}
 ```
 | <div style="width:100px">变量</div>  | 解释                                                         |
 | :----------: | ----------------------------------------------------------- |
@@ -1026,6 +1060,7 @@ uiNode.RenderPaperDoll(path, param)
 该控件是可以滑动的窗口，需要有其他控件附属。
 
 ```json
+{
     "scroll_view0@common.scrolling_panel" : {
         "$background_nine_slice_buttom" : 0,
         "$background_nine_slice_left" : 0,
@@ -1061,7 +1096,8 @@ uiNode.RenderPaperDoll(path, param)
         "size" : [ 100, 80 ],
         "type" : "scroll_view",
         "visible" : true
-   },
+   }
+}
 ```
 
 |<div style="width:100px">变量</div>     | 解释                                            |
@@ -1126,6 +1162,7 @@ mouse_path = scroll_view_path + "/scroll_mouse/scroll_view/stack_panel/backgroun
 Grid组件属于网格型的排列，可以依附在滚动条中，用来实现背包等功能。
 
 ```json
+{
     "grid0" : {
         "anchor_from" : "center",
         "anchor_to" : "center",
@@ -1151,7 +1188,8 @@ Grid组件属于网格型的排列，可以依附在滚动条中，用来实现
         "uv" : [ 0, 0 ],
         "uv_size" : [ 107, 107 ],
         "visible" : true
-   },
+   }
+}
 ```
 
 | <div style="width:100px">变量</div>                            | 解释                   |
@@ -1186,6 +1224,7 @@ Grid组件属于网格型的排列，可以依附在滚动条中，用来实现
 3. grid控件不建议使用其子控件路径对其动态生成的格子控件直接进行SetVisible等操作，因为在每次界面刷新时grid控件会对所有的格子做一次数据更新，更新的过程中会强制将格子可见性置True。如果有需要对格子进行操作，可以使用数据绑定的方式，如下代码和json。需要注意的是在数据绑定的回调函数中需要明确grid本身是否可见，否则会造成grid子节点控件的可见性数据异常，从而影响界面操作逻辑。
 
 ```json
+{
     "grid1" : {
         "anchor_from" : "center",
         "anchor_to" : "center",
@@ -1209,18 +1248,23 @@ Grid组件属于网格型的排列，可以依附在滚动条中，用来实现
 		    }
         ],
         "visible" : "#UIDemo.visible"
-   },
+   }
+}
 ```
 
 ```python
+import mod.client.extraClientApi as clientApi
+ViewBinder = clientApi.GetViewBinderCls()
+ViewRequest = clientApi.GetViewViewRequestCls()
+ScreenNode = clientApi.GetScreenNodeCls()
+
 class UIDemoScreen(ScreenNode):
 	def __init__(self, namespace, name, param):
+		ScreenNode.__init__(self, namespace, name, param)
 		self.demoGridControl = None
-      ......
 	
 	def Create(self):
 		self.demoGridControl = self.GetBaseUIControl("/grid1")
-      ......
 
 	@ViewBinder.binding_collection(ViewBinder.BF_BindBool, "gridDemo", "#UIDemo.visible")
 	def GridItemVisible(self, index):
@@ -1233,6 +1277,7 @@ class UIDemoScreen(ScreenNode):
 
 ProgressBar进度条控件，用于百分比显示进度
 ```json
+{
     "progress_bar0" : {
         "$clip_direction" : "left",
         "$clip_ratio" : 0.0,
@@ -1281,7 +1326,8 @@ ProgressBar进度条控件，用于百分比显示进度
         "nine_slice_top" : "$nine_slice_top",
         "texture" : "$progress_bar_filled_texture",
         "type" : "image"
-   },
+    }
+}
 ```
 
 | <div style="width:200px">变量</div>                              | 解释                   |
@@ -1312,7 +1358,8 @@ ProgressBar进度条控件，用于百分比显示进度
 
 开关控件，用于两个状态之间的切换
 ```json
-"switch_toggle0@common_toggles.switch_toggle_collection" : {
+{
+    "switch_toggle0@common_toggles.switch_toggle_collection" : {
         "$default_texture" : "textures/ui/toggle_off",
         "$hover_texture" : "textures/ui/toggle_on",
         "$pressed_no_hover_texture" : "textures/ui/toggle_on_hover",
@@ -1333,7 +1380,8 @@ ProgressBar进度条控件，用于百分比显示进度
         "size" : [ 100, 100 ],
         "type" : "panel",
         "visible" : true
-   },
+   }
+}
 ```
 
 | <div style="width:200px">变量</div>                         | 解释                   |
@@ -1348,6 +1396,11 @@ ProgressBar进度条控件，用于百分比显示进度
 * 注1
 
 ```python
+import mod.client.extraClientApi as clientApi
+ViewBinder = clientApi.GetViewBinderCls()
+ViewRequest = clientApi.GetViewViewRequestCls()
+ScreenNode = clientApi.GetScreenNodeCls()
+
 class TestScreen(ScreenNode):
     def __init__(self, namespace, name, param):
         ScreenNode.__init__(self, namespace, name, param)
@@ -1381,10 +1434,11 @@ class TestScreen(ScreenNode):
 滑动条控件，用于拖动设置进度或百分比。
 
 ```json
-"slider0@common.slider": {
+{
+    "slider0@common.slider": {
         "$slider_tts_text_value": "#netease_tts_text_value",
         "$slider_name": "#UIDemoScreen.OnDemoSliderChange",
-      "$slider_value_binding_name":"#UIDemoScreen.ReturnSliderValue",
+        "$slider_value_binding_name": "#UIDemoScreen.ReturnSliderValue",
         "$slider_steps_binding_name": "#UIDemoScreen.ReturnSliderStep",
         "$background_default_control": "common.slider_background",
         "$progress_default_control": "common.slider_progress",
@@ -1397,16 +1451,17 @@ class TestScreen(ScreenNode):
         "$slider_box_hover_layout": "common.slider_button_hover_layout",
         "$slider_box_locked_layout": "common.slider_button_locked_layout",
         "$slider_box_indent_layout": "common.slider_button_indent_layout",
-      "$slider_box_size": [ 10, 16 ],
+        "$slider_box_size": [10, 16],
-      "size": [ 100, 10 ],
+        "size": [100, 10],
-      "offset": [ 0, 0 ],
+        "offset": [0, 0],
         "$slider_step_factory_control_ids": {
             "slider_step": "@common.slider_step",
             "slider_step_hover": "@common.slider_step_hover",
             "slider_step_progress": "@common.slider_step_progress",
             "slider_step_progress_hover": "@common.slider_step_progress_hover"
-      },
         }
+    }
+}
 ```
 
 | <div style="width:200px">变量</div> | 解释                                                         |
@@ -1436,6 +1491,11 @@ class TestScreen(ScreenNode):
 * 注1
 
 ```python
+import mod.client.extraClientApi as clientApi
+ViewBinder = clientApi.GetViewBinderCls()
+ViewRequest = clientApi.GetViewViewRequestCls()
+ScreenNode = clientApi.GetScreenNodeCls()
+
 class UIDemoScreen(ScreenNode):
     def __init__(self, namespace, name, param):
         ScreenNode.__init__(self, namespace, name, param)
@@ -1630,11 +1690,13 @@ hover事件的触发本质上是与鼠标悬浮相关，在PC模式中，当鼠
 
 
 ```json
+{
     "main" : {
         "controls" : [],
         "type" : "screen",
         "gamepad_cursor_deflection_mode": true
-   },
+   }
+}
 ```
 
 
@@ -1644,7 +1706,8 @@ hover事件的触发本质上是与鼠标悬浮相关，在PC模式中，当鼠
 网易版单选下拉框，可以在给定的选项中进行选择。
 
 ```json
-"comboBoxPanel@combo_box.comboBoxPanel" : {
+{
+    "comboBoxPanel@combo_box.comboBoxPanel" : {
         "$content_size":[ "100.0%+0.0px", 100 ],
         "$item_size":[ "100.0%+0.0px", "10.0%x+0.0px" ],
         "$title_label":"combo_box.titleLabel",
@@ -1676,6 +1739,7 @@ hover事件的触发本质上是与鼠标悬浮相关，在PC模式中，当鼠
         "type" : "panel",
         "visible" : true
     }
+}
 ```
 
 
@@ -1712,7 +1776,8 @@ UI编辑器暂时不支持编辑
 其中官方封装了地图界面基类<a href="../../mcdocs/1-ModAPI/接口/自定义UI/UI界面.html#minimapbasescreen" rel="noopenner"> MiniMapBaseScreen </a>供开发者扩展。
 
 ```json
-"mainPanel@mini_map.mini_map_wrapper" : {
+{
+    "mainPanel@mini_map.mini_map_wrapper" : {
         "anchor_from" : "top_right",
         "anchor_to" : "top_right",
         "layer" : 1,
@@ -1722,7 +1787,7 @@ UI编辑器暂时不支持编辑
         "$use_default_face_icon": true,
         "$face_icon_size": [4,4],
         "$face_icon_bg_color": "white",
-    "$highest_y": 0
+        "$highest_y": 0,
         // 如果希望小地图能够被裁剪，请继承后修改controls如下:
         "controls":[
             {
@@ -1744,6 +1809,7 @@ UI编辑器暂时不支持编辑
                 "text_lbl@mini_map.text_label": {}
             }
         ]
+    }
 }
 ```
 
@@ -1764,12 +1830,14 @@ UI编辑器暂时不支持编辑
 该控件可以用于在ui上绘制渐变颜色
 
 ```json
-"gradient": {    
+{
+    "gradient": {    
         "color1": [1, 0, 1, 1],    
         "color2": [0, 0, 1, 1],    
         "gradient_direction": "vertical",    
         "renderer": "gradient_renderer",    
         "type": "custom" 
+    }
 }
 ```
 
@@ -1874,6 +1942,10 @@ ScreenNode = clientApi.GetScreenNodeCls()
 ### UI界面初始化
 
 ```python
+import mod.client.extraClientApi as clientApi
+
+ScreenNode = clientApi.GetScreenNodeCls()
+
 class TestScreen(ScreenNode):
 	def __init__(self, namespace, name, param):
 		ScreenNode.__init__(self, namespace, name, param)
@@ -1888,7 +1960,7 @@ class ViewBinder(object):
     BF_ButtonClickUp =	0 | ButtonFilter
     BF_ButtonClickDown = 1 | ButtonFilter
     BF_ButtonClick =  2 | ButtonFilter
-	BF_ButtonClickCancel= 	3
+    BF_ButtonClickCancel = 3
     BF_InteractButtonClick = 4
     BindFilter = 0x01000000
     BF_BindBool	= 5 | BindFilter
@@ -1902,6 +1974,7 @@ class ViewBinder(object):
     BF_EditFinished = 12 | EditFilter
     ToggleFilter = 0x00010000
     BF_ToggleChanged = 13 | ToggleFilter
+    
 # Return Type
 class ViewRequest(object):
     Nothing = 0
@@ -1909,7 +1982,6 @@ class ViewRequest(object):
     PointerHeldEventsRequest = 1 << 1
     PointerHeldEventsCancel = 1 << 2
     Exit = 1 << 3
-
 ```
 
 ### UI绑定和返回
@@ -1940,18 +2012,24 @@ bind_flag为上文中绑定类型，binding_name为绑定名称。
 binding_name为脚本绑定变量，binding_name_override为引擎变量，json格式如下
 
 ```json
-      "bindings" : [
+{
+    "bindings": [
         {
             "binding_condition" : "always",
             "binding_name" : "#scoreboard_grid.item_count",
             "binding_name_override" : "#StackGridItemsCount"
         }
     ]
+}
 ```
 对应的Python代码如下
 ```python
-	@ViewBinder.binding(ViewBinder.BF_BindInt, "#scoreboard_grid.item_count")
+import mod.client.extraClientApi as clientApi
-	def OnStarkGridResize(self):
+
+ViewBinder = clientApi.GetViewBinderCls()
+
+@ViewBinder.binding(ViewBinder.BF_BindInt, "#scoreboard_grid.item_count")
+def OnStarkGridResize(self):
     return len(self.scoreBoardList)
 ```
 
@@ -1962,12 +2040,15 @@ bind_flag为上文中的绑定类型，collection_name为集合名称，binding_
 集合的json如下：
 
 ```json
-"collection_name" : "scoreboard_stackgrid"
+{
+    "collection_name" : "scoreboard_stackgrid"
+}
 ```
 
 在集合的子控件中，binding_collection_name为集合名，binding_condition为绑定条件，binding_name为绑定名称，binding_type为collection绑定，property_bag设置他的初始值，text为它的绑定值。
 
 ```json
+{
     "label_score_board" : {
         "bindings" : [
             {
@@ -1985,14 +2066,19 @@ bind_flag为上文中的绑定类型，collection_name为集合名称，binding_
         "text_alignment" : "left",
         "type" : "label",
         "visible" : true
-   },
+    }
+}
 ```
 
 对应的Python代码如下，其中index表示在集合中的哪一元素。
 
 ```python
-	@ViewBinder.binding_collection(ViewBinder.BF_BindString, "scoreboard_stackgrid", "#label_score_board.text")
+import mod.client.extraClientApi as clientApi
-	def OnRefreshScoreBoardLabel(self, index):
+
+ViewBinder = clientApi.GetViewBinderCls()
+
+@ViewBinder.binding_collection(ViewBinder.BF_BindString, "scoreboard_stackgrid", "#label_score_board.text")
+def OnRefreshScoreBoardLabel(self, index):
     return self.scoreBoardList[index] if len(self.scoreBoardList) > index else ""
 ```
 
@@ -2009,8 +2095,9 @@ bind_flag为上文中的绑定类型，collection_name为集合名称，binding_
 
 假设设置Mod名称为"myModName"，示例：
 ```python
-    @Mod.Binding(name = "myModName", version = "0.1")
+from mod.common.mod import Mod
-    class MyModClass(object):
+@Mod.Binding(name = "myModName", version = "0.1")
+class MyModClass(object):
     def __init__(self):
         pass
 ```
@@ -2089,7 +2176,7 @@ bind_flag为上文中的绑定类型，collection_name为集合名称，binding_
 
 使用方法如下所示
 
-```json
+```html
 // 定制化文本控件
 <label>
 {"text" : "玩<br>家一", 
@@ -2099,12 +2186,12 @@ bind_flag为上文中的绑定类型，collection_name为集合名称，binding_
 </label>
 ```
 
-```json
+```html
 // 在非标签的内容
 Dear player, <br>welcome to Minecraft, <br>where you can build your own world
 ```
 
-```json
+```html
 // 按钮控件
 // 注意：如果按钮控件空间不足以显示该字符串，多余部分将以"..."显示
 <button>
@@ -2117,7 +2204,7 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
 
 例子及效果：
 
-```json
+```html
 <label>{"text" : "玩<br>家一", "font" : "smooth", "scale": 3, "color": [1,0,0,1]}</label><br><button>{"button_label": "1<br>2<br>3", "press_texture" : "textures/ui/btn_pressed","hover_texture" : "textures/ui/btn_hover","default_texture" : "textures/ui/btn_light_default","x":50, "y":100}</button>:恭喜！<br>击杀了<link>{"text" : "末影人", "format_code":"§2"}</link>
 ```
 
@@ -2125,35 +2212,40 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
 
 #### 定制化文本控件
 
-在字符串中嵌入`<label>label_data</label>`样式文本会被解析成定制文本，与常规文本不同的是定制化文本可以独立设置文字的字体、大小、颜色等，丰富富文本的文本样式。label_data为特殊化数据，以下所列属性为必须属性，text为文本，font为字体，默认值为unicode，scale为字体缩放倍率，默认值为1.0，color为字体颜色，默认值为[1,1,1,1]。需要注意的是如果文本中存在中文字符则字体会被强制设置为unicode，此外如果字体缩放倍率过大该段文本将不会被显示。
+在字符串中嵌入`<label>"label_data"</label>`样式文本会被解析成定制文本，与常规文本不同的是定制化文本可以独立设置文字的字体、大小、颜色等，丰富富文本的文本样式。label_data为特殊化数据，以下所列属性为必须属性，text为文本，font为字体，默认值为unicode，scale为字体缩放倍率，默认值为1.0，color为字体颜色，默认值为[1,1,1,1]。需要注意的是如果文本中存在中文字符则字体会被强制设置为unicode，此外如果字体缩放倍率过大该段文本将不会被显示。
 
 ```json
-   label_data：{
+{
+    "label_data": {
           "text" : "玩家一", 
           "font" : "smooth", 
           "scale": 3, 
           "color": [1,0,0,1]
     }
+}
 ```
 
 #### 图片控件
 
-在字符串中嵌入`<image>image_data</image>`样式文本会被解析成图片，image_data为特殊化数据，以下所列属性为必须属性，texture为资源路径，x为图片宽度，y为图片高度
+在字符串中嵌入`<image>"image_data"</image>`样式文本会被解析成图片，image_data为特殊化数据，以下所列属性为必须属性，texture为资源路径，x为图片宽度，y为图片高度
 
 ```json
-   image_data：{
+{
+    "image_data": {
         "texture":"texture/ui/laugh",
         "x":30,
         "y":30
    }
+}
 ```
 
 #### 按钮
 
-在字符串中嵌入`<button>button_data</button>`样式会被解析成按钮，button_data为特殊化数据，开发者可以在其中添加符合json格式的自定义数据，在点击富文本中对应按钮时会将button_data通过回调函数整个返回，以下属性为必须属性，press_texture为按钮按下贴图，hover_texture为按钮鼠标悬浮贴图，default_texture为默认状态下按钮贴图，button_label为按钮上的问题，x为按钮宽度，y为按钮高度
+在字符串中嵌入`<button>"button_data"</button>`样式会被解析成按钮，button_data为特殊化数据，开发者可以在其中添加符合json格式的自定义数据，在点击富文本中对应按钮时会将button_data通过回调函数整个返回，以下属性为必须属性，press_texture为按钮按下贴图，hover_texture为按钮鼠标悬浮贴图，default_texture为默认状态下按钮贴图，button_label为按钮上的问题，x为按钮宽度，y为按钮高度
 
 ```json
-   button_data:{
+{
+    "button_data":{
         "press_texture": "",
         "hover_texture": "",
         "default_texture": "",
@@ -2161,25 +2253,29 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
         "x":20,
         "y":20
    }
+}
 ```
 
 #### 超链接
 
-在字符串中嵌入`<link>link_data</link>`样式会被解析成超链接，外观和普通文本无异但可以被点击，link_data为特殊化数据，开发者可以在其中添加符合json格式的自定义数据，在点击富文本中对应超链接时会将link_data通过回调函数整个返回，以下属性为必须属性，text表示显示文本，format_code表示该段显示文本的样式代码，注意，基岩版的文本控件不支持下划线和删除线。
+在字符串中嵌入`<link>"link_data"</link>`样式会被解析成超链接，外观和普通文本无异但可以被点击，link_data为特殊化数据，开发者可以在其中添加符合json格式的自定义数据，在点击富文本中对应超链接时会将link_data通过回调函数整个返回，以下属性为必须属性，text表示显示文本，format_code表示该段显示文本的样式代码，注意，基岩版的文本控件不支持下划线和删除线。
 
 ```json
-   link_data:{
+{
+    "link_data":{
         "text":"末影人",
         "format_code":"§2"
     }
+}
 ```
 
 #### 序列帧动画
 
-在字符串中嵌入`<sfx>sfx_data</sfx>`样式文本会被解析成图片，sfx_data为特殊化数据，以下所列属性为必须属性，texture为资源路径，x为显示图片宽度，y为显示图片高度，uv_x为截取图片宽度，uv_y为截取图片高度，frame_count表示该序列帧的总帧数，fps为每秒执行帧数。
+在字符串中嵌入`<sfx>"sfx_data"</sfx>`样式文本会被解析成图片，sfx_data为特殊化数据，以下所列属性为必须属性，texture为资源路径，x为显示图片宽度，y为显示图片高度，uv_x为截取图片宽度，uv_y为截取图片高度，frame_count表示该序列帧的总帧数，fps为每秒执行帧数。
 
 ```json
-   sfx_data:{
+{
+    "sfx_data":{
         "texture": "textures/ui/eating_apple",
         "x":30,
         "y":30,
@@ -2188,6 +2284,7 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
         "frame_count": 36,
         "fps": 10
    }
+}
 ```
 
 ### 富文本成品范例
@@ -2229,6 +2326,7 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
    开发者可以设置富文本的文本字体颜色，默认值为[1,1,1]，白色
 
 ```json
+{
     "main" : {
         "absorbs_input" : true,
         "always_accepts_input" : false,
@@ -2250,7 +2348,8 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
         "$rich_panel_font_size" : "large",
         "$rich_panel_font_scale_factor" : 2.0,
         "$rich_panel_color" : [1,1,1]
-   },
+   }
+}
 ```
 
 #### python脚本编写
@@ -2278,7 +2377,7 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
 以下是示例
 
 ```python
-   def CreateRichText(self):
+def CreateRichText(self):
     self.richTextPath = "/RichTextPanel"
     self.richTextItem = self.GetRichTextItem(self.richTextPath)
     self.richTextItem.registerLinkItemClickCallback(self.OnLinkItemClickCallback)
@@ -2286,13 +2385,13 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
     self.richTextItem.registerRichTextFinishCallback(self.OnRichTextCreateFinishCallback)
     self.richTextItem.readRichText('[玩家]<label>{"text" : "玩家一", "font" : "smooth", "scale": 3, "color": [1,0,0,1]}</label><button>{"press_texture" : "textures/ui/btn_pressed","hover_texture" : "textures/ui/btn_hover","default_texture" : "textures/ui/btn_light_default","x":20, "y":20}</button>:恭喜！<image>{"texture":"textures/ui/skin/ty_yuanshenghuli_0_0", "x":30, "y":30}</image>击杀了<link>{"text" : "末影人", "format_code":"§2"}</link><sfx>{"texture": "textures/ui/eating_apple","x":30, "y":30,"uv_x": 64,"uv_y": 64,"frame_count": 36,"fps": 10}</sfx>')
 
-   def OnButtonItemClickCallback(self, data, touchX, touchY):
+def OnButtonItemClickCallback(self, data, touchX, touchY):
     print("---OnButtonItemClickCallback---", data, touchX, touchY)
 
-   def OnLinkItemClickCallback(self, data, touchX, touchY):
+def OnLinkItemClickCallback(self, data, touchX, touchY):
     print("---OnLinkItemClickCallback---", data, touchX, touchY)
 
-   def OnRichTextCreateFinishCallback(self):
+def OnRichTextCreateFinishCallback(self):
     print("---OnRichTextCreateFinishCallback---")
 ```
 

mcguide/18-界面与交互/40-UIAPI文档.md

@@ -23,8 +23,8 @@ sidebarDepth: 1
 ScreenNode的一些有用的函数，界面Node节点的获取方式在[UI使用文档](30-UI说明文档.html)中有详细说明。
 
 ```python
-	import mod.client.extraClientApi as clientApi
+import mod.client.extraClientApi as clientApi
-	uiNode = clientApi.GetUI("myModName", "myUIName")
+uiNode = clientApi.GetUI("myModName", "myUIName")
 ```
 
 假设下文中的函数，uiNode为获取到的ScreenNode继承类，调用的UI界面是按下面的节点树组织结构的

mcguide/18-界面与交互/61-原生界面修改文档.md

@@ -116,8 +116,10 @@ CustomUIScreenProxy是原生界面的代理类，可通过extraClientApi.GetUISc
 - 示例
 
 ```python
+# coding=utf-8
 import client.extraClientApi as clientApi
 CustomUIScreenProxy = clientApi.GetUIScreenProxyCls()
+ViewBinder = clientApi.GetViewBinderCls()
 
 
 class PauseScreenProxy(CustomUIScreenProxy):

mcguide/18-界面与交互/70-UI数据绑定.md

@@ -387,9 +387,9 @@ def OnItemToggleChecked(self, args):
     	toggleIndex = 0
     self.mCurItemIndex = toggleIndex
     itemDict = self.mItemData[self.mCurItemTab][toggleIndex]
-    self.SetSprite(self.mItemIcon, itemDict["icon"])
+    self.GetBaseUIControl(self.mItemIcon).asImage().SetSprite(itemDict["icon"])
-    self.SetText(self.mItemName, itemDict["name"])
+    self.GetBaseUIControl(self.mItemName).asLabel().SetText(itemDict["name"])
-    self.SetText(self.mItemDesc, itemDict["desc"])
+    self.GetBaseUIControl(self.mItemDesc).asLabel().SetText(itemDict["desc"])
     self.set_control_visible(self.mItemInfoWrap, True)
 ```