#
CrownCAD二次开发

# 程序UI

二次开发的UI定义方式是在新编程语言CrownCAD Script中定义的新的UI样式，在参数设定上为了贴合用户的使用习惯，减少用户的学习成本，与CSS样式相类似。同时，为了可以让用户设计更好的UI面板，部分UI组件支持直接使用CSS基础样式，需要注意的是对于CSS基础样式中使用"-"连接的名称需要使用驼峰命名法进行替换，例如: margin-top: 100px 需要替换成 marginTop="100px"

# 基础组件

# 数字输入框

当需要限定输入框只允许输入数字时，选择数字输入框，当输入其它值时会提示输入信息错误。

定义样式:

@input('数字', bind = 'number', default = 10.0, min = -50.0, max = 50.0);

参数含义:

类型	参数含义	参数类型	默认值	是否必须
(缺省)	输入框的名字	字符串	'数字'	是
bind	参数在程序中使用的变量名	字符串	'number'	是
default	输入框默认值	浮点数	10.0	是
max	输入框限定的最大值	浮点数	无穷大	否
min	输入框限定的最小值	浮点数	无穷小	否

# 整数输入框

当需要限定输入框只允许输入整数数字时，选择整数输入框，当输入其它值时会提示输入信息错误。

定义样式:

@input_integer('整数', bind = 'integer', default = 10, min = 0, max = 100);

参数含义:

类型	参数含义	参数类型	默认值	是否必须
(缺省)	输入框的名字	字符串	'整数'	是
bind	参数在程序中使用的变量名	字符串	'integer'	是
default	输入框默认值	整数	10	是
max	输入框限定的最大值	整数	无穷大	否
min	输入框限定的最小值	整数	无穷小	否

# 字符串输入框

当输入内容需要字符串时，可以选择字符串输入框，输入的值默认转换成字符串。

定义样式:

@input_string('字符串', bind = 'string', default ='string');

参数含义:

类型	参数含义	参数类型	默认值	是否必须
(缺省)	输入框的名字	字符串	'字符串'	是
bind	参数在程序中使用的变量名	字符串	'string'	是
default	输入框默认值	字符串	'string'	是

# 单选框

当需要判断一个元素是否选择时，可以选择使用单选框。

定义样式:

@checkbox('单选框', bind = "check", default = true);

参数含义:

类型	参数含义	参数类型	默认值	是否必须
(缺省)	单选框的显示名	字符串	'字符串'	是
bind	参数在程序中使用的变量名	字符串	'check'	是
default	单选框默认值	布尔类型	true	是

# 下拉选择框

当需要多个选项时，可以选择下拉选择框，使用下拉框是需要提前定义下拉框选项内容，同时选项中定义顺序即为显示顺序。

定义样式:

var select = {
  "选项1": 10, 
  "选项2": 'string', 
  '选项3': false, 
  '选项4': 10.11
};
@select('下拉框', bind = "select", default = select['选项1']);

1
2
3
4
5
6
7

参数含义:

类型	参数含义	参数类型	默认值	是否必须
(缺省)	下拉框的显示名	字符串	'下拉框'	是
bind	参数在程序中使用的变量名	字符串	'select'	是
default	下拉框默认值	对象的取值	无	是

# 图片组件

当用户需要图片来帮助解释各个输入框等内容时，可以通过图片组件进行显示，图片需要提前上传，然后定义时引用图片的id来进行显示。

定义样式:

@image(id='0', width='100%', height='100%');

参数含义:

类型	参数含义	参数类型	默认值	是否必须
id	图片上传后返回的Id	字符串	'下拉框'	是
width	图片宽度 < 可填写: 分辨率: '1000px'，百分比：'100%'>	字符串	父元素宽度	否
height	图片宽度 < 可填写: 分辨率: '1000px'，百分比：'100%'>	字符串	父元素高度	否

# 文字组件

用户可以通过文字组件来实现对于文本内容的描述信息。
- 定义样式:
```
@span(value = '文字内容');
```
1
- 参数含义:
类型参数含义参数类型默认值是否必须

value 显示的文字内容字符串 '文字内容' 是

类型	参数含义	参数类型	默认值	是否必须
value	显示的文字内容	字符串	'文字内容'	是

# 表格组件

用户可以通过表格组件更加直观的信息，同时表格单元格可以设计为可编辑元素，动态的修改表格的内容。

定义样式:

@table(name = "定义表格", width = "1000px", height = "500px") {	// 声明一个表格
  @row(align = "center", type = "text", head = true) {  //声明表格一行和默认属性
    @cell(value = "基本尺寸"); 	// 定义文本内容表格
    @cell(value = 100, bind = "cell", type = "number");  // 定义可修改表格内容
  }
}

1
2
3
4
5
6

参数含义:

@table

参数名	参数含义	参数类型	默认值	是否必须
name	表格的名字	字符串	'表格'	否
width	表格整体宽度 < 可填写: 分辨率: '500px'，百分比：'100%'>	字符串	撑宽	否
width	表格整体高度 < 可填写: 分辨率: '500px'，百分比：'100%'>	字符串	撑高	否

@row

参数名	参数含义	参数类型	默认值	是否必须
align	行内默认对齐方式 <left: 左对齐，center：居中，right：右对齐 >	字符串	'center'	否
type	行内默认类型 <text: 文本类型, number: 数字类型, integer: 整数类型, string: 字符串类型, boolean: 单选框, select: 下拉框 >	字符串	'text'	否
head	是否为表头栏	布尔类型	false	否

@cell

参数名	参数含义	参数类型	默认值	是否必须
value	单元格的值	与type的类型相对应	无	是
bind	参数在程序中使用的变量名	布尔类型	"cell"	是 (type == "text" 时为非必须)
type	当前单元格的类型(参数可选值与上方一致)	字符串	撑宽	"text" 或上一层定义
align	当前单元格对齐方式(参数可选值与上方一致)	字符串	"center" 或上一层定义	否

示例程序:

代码：

@ui(position = "center") {
  @table(name="尺寸信息", width="1000px", height="100%") {
    @row(align = "center", type = "text", head = true) { 
      @cell (value = "基本尺寸"); @cell (value = "mm");
      @cell (value = "基本尺寸"); @cell (value = "mm");
      @cell (value = "基本尺寸"); @cell (value = "mm");
    }
    @row(align = "center", type = "text") { 
      @cell (value = "D");  @cell (value = "300"); @cell (value = "D1"); @cell (value = "220"); @cell (value = "D2"); @cell (value = "300");
    }
    @row(align = "center", type = "text") { 
      @cell (value = "D3");  @cell (value = "300"); @cell (value = "H"); @cell (value = "220"); @cell (value = "H1"); @cell (value = "300");
    }
    @row(align = "center", type = "text") { 
      @cell (value = "H2");  @cell (value = "300"); @cell (value = "L"); @cell (value = "220"); @cell (value = "L1"); @cell (value = "300");
    }
    @row(align = "center", type = "text") { 
      @cell (value = "L2");  @cell (value = "300"); @cell (value = "L3"); @cell (value = "220"); @cell (value = "L4"); @cell (value = "300");
    }
    @row(align = "center", type = "text") { 
      @cell (value = "L5");  @cell (value = "235"); @cell (value = "W"); @cell (value = "150"); @cell (value = "W1"); @cell (value = "450");
    }
    @row(align = "center", type = "text") { 
      @cell (value = "W3");  @cell (value = "150"); @cell (value = "W4"); @cell (value = "500"); @cell (value = "f1"); @cell (value = "7");
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

图示：

# 交互框组件

用户可以在UI面板中定义交互框组件，可以实现对模型中的元素的拾取，并在程序中可以使用拾取的元素内容。

注: 交互框组件的使用只可以在发布预览和发布之后使用，即需要通过面板执行，不允许直接执行

定义样式:

@query('顶点', bind='query', filters=[QueryType.Vertex], minCount=2, maxCount=2, tipMsg="请选择两个顶点");

参数含义:

类型	参数含义	参数类型	默认值	是否必须
(缺省)	交互框的名字	字符串	'交互框'	是
bind	参数在程序中使用的变量名	字符串	'query'	是
filters	交互框允许拾取的类型	数组	[]	是
minCount	允许拾取的最少元素数量	整数	1	否
maxCount	允许拾取的最多元素数量	整数	100	否
tipMsg	交互框的提示信息	字符串	'请选择相关元素'	否

备注:

数组内部为拾取元素类型: QueryType。其中: 装配实例(QueryType.Instance)仅支持单独使用；特征(QueryType.Feature)仅支持单独使用；实体、三维曲面、草图(QueryType.Solid、QueryType.Shell、QueryType.Sketch)可以组合使用；其余基础元素(QueryType.?)可以组合使用

示例图：

# 基础组件图示

# 布局组件

# 窗口组件

窗口组件是声明UI定义的开始，所有UI的定义都需要的在定义UI窗口内部，同时UI的定义要在程序的开始时定义。
- 使用说明:
```
// 声明当前开始定义UI，"…"表示UI组件
@ui(height = "1000px", width="500px") { … }  
```
1
2
- 参数说明:
类型参数含义参数类型默认值是否必须

width UI窗口宽度（分辨率）字符串撑宽否

height UI窗口高度（分辨率）字符串撑高否

类型	参数含义	参数类型	默认值	是否必须
width	UI窗口宽度（分辨率）	字符串	撑宽	否
height	UI窗口高度（分辨率）	字符串	撑高	否

# 块状布局组件

用户可以通过栅格布局的方式，定义UI组件的组合关系、位置等来实现适合于当前程序的UI页面。

使用说明:

// 声明行元素
@block_row(width = "1000px", height = "500px") {
  // 声明列元素 "…"表示UI组件
  @block_column(width = "200px") { … }
}

1
2
3
4
5

参数说明:

类型	参数含义	参数类型	默认值	是否必须
title	块元素的名字	字符串	无	否
width	块的宽度 < 可填写：分别率: '500px'，百分比：'100%'>	父元素宽度	撑高	否
height	块的高度 < 可填写：分别率: '500px'，百分比：'100%'>	父元素高度	撑高	否

示例程序:

代码：

@ui(width = "1000px") {
  @block_row (width = "100%") {
    @block_column (width = "80%") {
      @block_row(width = "100%") {
        @block_column(width = "100px") { ... }
        @block_column(width = "100px") { ... }
        @block_column(width = "100px") { ... }
        @block_column(width = "100px") { ... }
      }
      @block_row(width = "100%") {
        @block_column(width = "30%") { ... }
        @block_column(width = "30%",marginLeft="40px") { ... }
      }
      @block_row(width = "100%", height = "150px",marginTop="40px") {
        @block_column(width = "50%") { ... }
        @block_column(width = "50%",marginLeft = "100px") { ... }
          @block_row(height = "50%", width = "80%") { ... }
          @block_row(height = "50%", width = "80%") { ... }
    	}
      @block_row(width = "100%", maxWidth="800px") { ... }
    }
    @block_column (width = "20%") { ... }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

图示：

# 选项卡组件

当需要展示不同的选项组合时，可以使用Tab标签组件进行区分显示，只有显示的标签内的参数有效。

使用说明:

// 声明当前开始定义Tab标签，内部使用不同的tab定义不同的标签
@tab {  
  // 在tab()内定义的是当前标签页的名字
  // 声明不同标签页面，"…"表示UI组件
  tab("页面1") { … } 	
  tab("页面2") { … }
  // 声明默认打开的标签页面的名字  
  var use = "页面1";  
}

1
2
3
4
5
6
7
8
9

示例程序:

代码：

@ui {
  @tab {
    tab("页面1") {
          var select = {
          "选项1": 10,
          "选项2": 'string',
          '选项3': false,
          '选项4': 10.11,
        };
        @select('下拉框', bind = "select0", default = select['选项1']);
        @input('数字', bind = 'number', default = 10.0, min = 1, max = 100);
        @input_integer("整数", bind ="integer",default = 10);
    }
    tab("页面2") {
        @input_string("字符串", bind = "string", default = 'string');
  			@checkbox('单选框', bind = "check", default = true);
    }
    var use = "页面1";
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

图示：

# 折叠组件

当用户想要在某些情况下隐藏显示部分的UI窗口内容，可以选择使用该组件，定义在该组件内部的UI内容，用户可以选择展示与折叠隐藏。

使用说明:

// "…"表示UI组件 
@block("折叠组件", expanded = true) { … }

1
2

参数说明:

类型	参数含义	参数类型	默认值	是否必须
(缺省)	折叠页的名字	字符串	'折叠组件'	是
expanded	是否默认展开	布尔类型	true	否

示例程序:

代码：

@ui(height = "1000px") {
  @block("折叠组件", expanded = true) {
  	@input('数字', bind = 'number', default = 10.0, max = 100);
    @input_integer("整数", bind ="integer",default = 10);
    @input_string("字符串", bind = "string", default = 'string');
    @checkbox('单选框', bind = "check", default = true);
  }
}

1
2
3
4
5
6
7
8

图示：

# 示例UI

代码：

// 声明UI，须声明定义在程序开始
@ui(width = "1000px") {
  @block_row (width = "100%") {
    @block_column (width = "80%") {
      @block_row(width = "100%") {
        @block_column(width = "100px") { 
          @checkbox('上海', bind = 'shanghai', default = true); 
        }
        @block_column(width = "100px") { 
          @checkbox('北京', bind = 'beijing', default = false); 
        }
        @block_column(width = "100px") { 
          @checkbox('广州', bind = 'guangzhou', default = false); 
        }
        @block_column(width = "100px") { 
          @checkbox('深圳', bind = 'shenzhen', default = false); 
        }
      }
      @block_row(width = "100%") {
        @block_column(width = "30%") {  
          @input('长度', bind = 'lenght', default = 10); 
        }
        @block_column(width = "30%",marginLeft="40px") {
          var select = { "给定深度": 1, "成型到面": 2, '两侧对称': 3 };
          @select('方式', bind = 'mode', default = select["给定深度"]);
        }
      }
      @block_row(width = "100%", height = "150px",marginTop="40px") {
        @block_column(width = "50%") {
          var DJ = { "160L": 160, "180L": 180, "200L": 200 };
          @table(name = "基本信息",minWidth = "400px") {
            @row(align = "center", type = "text") { @cell(value = "设备位号"); @cell(value = "1021-P-04AB"); }
            @row(align = "center", type = "text") { @cell(value = "设备名称"); @cell(value = "升压泵"); }
            @row(align = "center", type = "text") {
              
              @cell(value = "叶轮直径"); 
              
              @cell(value = 300, bind ="abcdefg", type="number"); }
            @row(align = "center", type = "text") { 
              @cell(value = "电机基座号");
              @cell(value = DJ["160L"], bind = "dianji", type = "select");}
          }
        }
        @block_column(width = "50%",marginLeft = "100px") {
          @block_row(height = "50%", width = "80%") { 
            @input('尺寸', bind = 'size', default = 90); 
          }
          @block_row(height = "50%", width = "80%") { 
            @input_string('单位单', bind = 'unit', default = 'mm'); 
          }
        }
    	}
      @block_row(width = "100%", maxWidth="800px") {
        var grade = { "150": 150, "160000000": 1600000, "180": 180 };
        var seal = { "RF": true, "LF": false };
        var measure = { "15": 150, "16": 160, "17": 170 };
        @table(name = "管口信息") {
          @row(align = "center", type = "text") {
            @cell(value = "设备位号"); @cell(value = "接口名称"); @cell(value = "管口方向"); 
            @cell(value = "法兰标准"); @cell(value = "等级");  @cell(value = "密封面"); @cell(value = "尺寸"); 
            @cell(value = "L(mm)"); @cell(value = "W(mm)"); @cell(value = "H(mm)");
          }
          @row(align = "center", type = "text") {
            @cell(value = "N1"); @cell(value = "进水口"); @cell(value = "无"); @cell(value = "ASME B16.5"); 
            @cell(value = grade["150"], type = "select", bind = "grand"); 
            @cell(value = seal["RF"], type = "select", bind = "seal");
            @cell(value = measure["15"], type = "select", bind = "measure");
            @cell(value = "无需填写"); @cell(value = "无需填写"); @cell(value = "无需填写");
          }
          @row(align = "center", type = "text") {
            @cell(value = "N2"); @cell(value = "进水口"); @cell(value = "无"); @cell(value = "ASME B16.5"); 
            @cell(value = grade["150"], type = "select", bind = "grand1"); 
            @cell(value = seal["RF"], type = "select", bind = "seal1");
            @cell(value = measure["15"], type = "select", bind = "measure1");
            @cell(value = "无需填写"); @cell(value = "无需填写"); @cell(value = "无需填写");
          }
        }
      }
    }
    @block_column (width = "20%") {
      @image(id='61e8e834a6dda6508d0a5b6a', width='100%', height='100%');
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

图示：

# CrownCAD二次开发

# 程序UI

# 基础组件

# 数字输入框

# 整数输入框

# 字符串输入框

# 单选框

# 下拉选择框

# 图片组件

# 文字组件

# 表格组件

# 交互框组件

# 基础组件图示

# 布局组件

# 窗口组件

# 块状布局组件

# 选项卡组件

# 折叠组件

# 示例UI

#
CrownCAD二次开发