控件规范

控件规范文档。

1. 控件命名

实体控件等命名规范与前缀：

下载规范文件：实体控件等命名规范与前缀.zip
选择“模板样式”选项，单击“前缀管理”按钮，然后单击“导入”按钮导入规范文件。

控件命名规范：

命名原则：
- 使用驼峰命名；
- 必须以控件类型缩写开头；
- 必须包含明确含，编码使用全英文单词，禁止使用汉语拼音及简拼。
控件编码：控件类型_控件标题修饰。
控件名称：修饰。

示例:

控件	命名方式	文本(普通窗体)	动态列表组(移动窗体)	图片(普通窗体)	标签(普通窗体)
控件编码	`控件类型_控件标题修饰`	`txt_address`	`tdl_infoList`	`img_confirm`	`lab_unitName`
控件名称	`修饰`	`地址`	`消息列表`	`确认图片`	`单元名标签`

2. 控件编码简称

PC/移动端对应控件简称一样，不管控件编码前缀是JG或JGM，一律使用简称。

将V开发平台中，直接导入前缀管理【实体控件等命名规范与前缀】压缩包文件，在页面添加新控件时，编码前缀会自动使用简称命名，再根据实际业务修饰控件，操作如下：

选择“模板样式”选项，单击“前缀管理”按钮，然后单击“导入”按钮，选择"实体控件等命名规范与前缀.zip" 文件进行导入。操作如下：

控件前缀参考本文档最末的【附录-控件前缀】。

3. 列表/树表中列命名

info
列表/树表中列命名规范：
控件编码：ent_列类型（简称）_绑定字段编码。
控件名称：修饰。

示例:

列表/树表中列	命名方式	文本	日期	图片
列表/树表中列编码	`ent_列类型（简称）_绑定字段编码`	`ent_txt_id`	`ent_dtp_name`	`ent_img_id`
列表/树表中列控件名称	`修饰`	`文本`	`日期`	`图片`

列类型列前缀参考本文档最末的【附录-控件前缀】。

4. 控件向导/替换

4.1 控件向导

在界面中创建实体之后，可以直接通过控件向导方式，生成对应的字段控件，操作如下：

说明：列表、树表控件绑定实体，也可以通过鼠标右键的方式进行控件向导。

4.2 控件替换

在界面配置过程中，需要将现有的控件改成其他控件，可以通过右键替换的方式直接替换，节省重新绑定实体、重新调整布局等工作量，操作如下：

5. 附录-控件前缀

5.1 普通窗体
5.1.1 通用控件
控件名称 控件编码 前缀
Flash JGAmimation anm_
按钮 JGMButton btn_
按钮组 JGMButtonGroup bgp_
编组 JGGroupPanel gpl_
标签 JGLabel lab_
查询条件面板 JGQueryConditionPanel qcp_
导航菜单 JGNavigator ngt_
导航菜单项 JGNavbarNode nbn_
导航面板 JGNavbarPanel nbp_
二维码 JGQrcode qcd_
分页控件 JGPagination pgn_
分组 JGGroupBox gpb_
卡片布局 JGCardLayout cdl_
开始菜单 JGStartMenu stm_
开始菜单项 JGStartMenuItem smi_
链接标签 JGLinkLabel llb_
流布局 JGFlowLayoutPanel flp_
门户设计 JGPortalEdit pte_
面板 JGPanel pnl_
条码 JGBarcode bac_
图片 JGImage img_
图片裁剪器 JGImageCutter imc_
网页 JGWebBrowser web_
网页窗体资源 JGWebWindowResource wwr_
下拉菜单 JGDropdownMenu ddm_
页签 JGTabControl tac_
页签项 JGTabPage tap_
自定义Div JGDiv div_
自定义编码模版 JGCardLayoutCustomTemplate cct_
组件容器 JGMComponentContainer cpc_
5.1.2 字段控件
控件名称 控件编码 前缀
百分比 JGPercent pct_
百分比列 JGPercentColumn entpct
布尔 JGCheckBox ckb_
布尔列 JGCheckBoxColumn entckb
单选组 JGRadioGroup rdg_
弹出选择 JGBaseDictBox bdb_
弹出选择列 JGBaseDictBoxColumn entbdb
多选组 JGCheckBoxGroup cbg_
富文本 JGRichTextEditor rte_
富文本浏览 JGRichTextViewer rtv_
工具栏 JGToolbar tbr_
工具栏菜单 JGToolbarMenu tbm_
工具栏菜单 JGToolbarSepartor tbs_
链接文本 JGHyperLink hpl_
密码 JGPassword pwd_
期次 JGPeriod prd_
期次列 JGPeriodColumn pdc_
期次区间 JGPeriodRange pdr_
日期 JGDateTimePicker dtp_
日期列 JGDateTimePickerColumn entdtp
日期区间 JGDateRangePicker drp_
图片列 JGImageColumn entimg
文本 JGTextBox txt_
文本列 JGTextBoxColumn enttxt
文件 JGAttachment atm_
下拉菜单项 JGDropdownMenu dmi_
下拉选择 JGComboBox cbb_
下拉选择列 JGComboBoxColumn entcbb
小数 JGFloatBox flo_
小数列 JGFloatBoxColumn entflo
小数区间 JGFloatRangeBox frb_
长日期 JGLongDateTimePicker ldt_
长日期列 JGLongDateTimePickerColumn entldt
长文本 JGLongTextBox ltb_
长文本列 JGLongTextBoxColumn entltb
整数 JGIntegerBox int_
整数列 JGIntegerBoxColumn entint
5.1.3 业务控件
控件名称 控件编码 前缀
报表 JGReport rpt_
步骤条 JGStepBar stb_
步骤条 JGSteps stp_
定时器 JGTime tim_
活动面板 JGActivityPanel atp_
记录导航 JGRecordPaging rcp_
检索 JGLocateBox lcb_
列表 JGDataGrid dtg_
流程图 JGWorkFlowGraph wfg_
门户 JGPortal ptl_
日历 JGCalendar cld_
属性编辑器 JGPropertyEditor ppe_
树 JGTreeView trv_
树表 JGTreeGrid trg_
图表 JGChart cht_
图片播放 JGImagePlay imp_
新闻列表 JGNewsLsit nsl_
5.2 移动窗体
5.2.1 通用控件
控件名称 控件编码 前缀
按钮 JGMButton btn_
按钮式弹出菜单 JGMDropDownButton ddb_
按钮组 JGMButtonGroup bgp_
标签 JGMLable lab_
导航布局 JGMNavigatorLoyout ngl_
导航布局滑块 JGMNavigatorLoyoutSider nls_
导航布局内容 JGMNavigatorLoyoutContent nlc_
导航栏 JGMToolStrip tls_
倒计时 JGMCountDown ctd_
动态列表组 JGMTrendList tdl_
动态页签栏 JGMNavWindowContainer nwc_
多行文本 JGMMutilineText mlt_
分组头模版 JGMTrendListGroupHeadTeamplate ght_
分组头模版1 JGMTrendList_groupcustomitem_one tgo_
浮层按钮 JGMLayerButton lbt_
复合控件模版 JGMMultipleModle mtm_
富文本浏览 JGMRichTextViewer rtv_
滑块 JGMSlider sli_
静态列表组列集合 JGMDataListColumns dlc_
可编辑行模版 JGMTrendList_editrow tle_
列表分组列 JGMColumn cln_
列表组表头 JGMDataListHead dlh_
列表组表尾 JGMDataListFoot dlf_
面板 JGMSuperPanel spl_
通讯录模版 JGMTrendList_cantact tlc_
图标 JGMIcon lcn_
图片 JGMImage img_
图片画廊 JGMImgGalleries igl_
图片浏览器 JGMPicBrowse pcb_
线条 JGMLine lin_
验证码 JGMVerificationCode vfc_
页签栏 JGMNavControlContainer ncc_
页签项 JGMTabPage tap_
子浮层面板 JGMFlowLayer fla_
自定义Div JGMDiv div_
自定义空白行模版 JGMTrendlist_customitem_five tci_
自定义列表组 JGMQuietList qtl_
自定义模版 JGMColumnTemplate clt_
自定义行模版1 JGMTrendlist_customiten_one tco_
自定义行模版2 JGMTrendlist_customiten_two tct_
自定义行模版3 JGMTrendlist_customiten_three tcf_
自定义行模版4 JGMTrendlist_customiten_four tcw_
自由布局行模版 JGMTrendlistEditableBlankTemplate tbt_
自由布局行模版扩展域 JGMEditableBlankTemplateEstensionField tef_
组合面板 JGMPanel pnl_
组件容器 JGMComponentContainer cpc_
5.2.2 字段控件
控件名称 控件编码 前缀
按钮菜单项 JGMButtonItem bti_
单选 JGMCheckBox chk_
弹出选择 JGMComboSearch cbs_
附件 JGMAttachment atm_
附件菜单项 JGMAttachmentItem atI_
开关 JGMSwitch swt_
轮播 JGMCarousel crs_
密码 JGMPasswordBox pwd_
日期 JGMDateTimePicker dtp_
数字输入框 JGMNumberSwitch nsw_
搜索 JGMSearch srh_
图片浏览菜单项 JGMPicBrowserMenuItem pbm_
图片项 JGMImageItem imi_
文本 JGMTextBox txt_
下拉菜单 JGMDropDownMenu ddm_
下拉菜单项 JGMDropDownItem ddi_
下拉选择 JGMComboBox cbb_
小数 JGMFloatBox flo_
选择器 JGMSelector slt_
长文本 JGMLongTextBox ltb_
整数 JGMIntegerBox int_
5.2.3 业务控件
控件名称 控件编码 前缀
图表 JGMChart cht_

控件名称	控件编码	前缀
Flash	JGAmimation	anm_
按钮	JGMButton	btn_
按钮组	JGMButtonGroup	bgp_
编组	JGGroupPanel	gpl_
标签	JGLabel	lab_
查询条件面板	JGQueryConditionPanel	qcp_
导航菜单	JGNavigator	ngt_
导航菜单项	JGNavbarNode	nbn_
导航面板	JGNavbarPanel	nbp_
二维码	JGQrcode	qcd_
分页控件	JGPagination	pgn_
分组	JGGroupBox	gpb_
卡片布局	JGCardLayout	cdl_
开始菜单	JGStartMenu	stm_
开始菜单项	JGStartMenuItem	smi_
链接标签	JGLinkLabel	llb_
流布局	JGFlowLayoutPanel	flp_
门户设计	JGPortalEdit	pte_
面板	JGPanel	pnl_
条码	JGBarcode	bac_
图片	JGImage	img_
图片裁剪器	JGImageCutter	imc_
网页	JGWebBrowser	web_
网页窗体资源	JGWebWindowResource	wwr_
下拉菜单	JGDropdownMenu	ddm_
页签	JGTabControl	tac_
页签项	JGTabPage	tap_
自定义Div	JGDiv	div_
自定义编码模版	JGCardLayoutCustomTemplate	cct_
组件容器	JGMComponentContainer	cpc_

控件名称	控件编码	前缀
百分比	JGPercent	pct_
百分比列	JGPercentColumn	entpct
布尔	JGCheckBox	ckb_
布尔列	JGCheckBoxColumn	entckb
单选组	JGRadioGroup	rdg_
弹出选择	JGBaseDictBox	bdb_
弹出选择列	JGBaseDictBoxColumn	entbdb
多选组	JGCheckBoxGroup	cbg_
富文本	JGRichTextEditor	rte_
富文本浏览	JGRichTextViewer	rtv_
工具栏	JGToolbar	tbr_
工具栏菜单	JGToolbarMenu	tbm_
工具栏菜单	JGToolbarSepartor	tbs_
链接文本	JGHyperLink	hpl_
密码	JGPassword	pwd_
期次	JGPeriod	prd_
期次列	JGPeriodColumn	pdc_
期次区间	JGPeriodRange	pdr_
日期	JGDateTimePicker	dtp_
日期列	JGDateTimePickerColumn	entdtp
日期区间	JGDateRangePicker	drp_
图片列	JGImageColumn	entimg
文本	JGTextBox	txt_
文本列	JGTextBoxColumn	enttxt
文件	JGAttachment	atm_
下拉菜单项	JGDropdownMenu	dmi_
下拉选择	JGComboBox	cbb_
下拉选择列	JGComboBoxColumn	entcbb
小数	JGFloatBox	flo_
小数列	JGFloatBoxColumn	entflo
小数区间	JGFloatRangeBox	frb_
长日期	JGLongDateTimePicker	ldt_
长日期列	JGLongDateTimePickerColumn	entldt
长文本	JGLongTextBox	ltb_
长文本列	JGLongTextBoxColumn	entltb
整数	JGIntegerBox	int_
整数列	JGIntegerBoxColumn	entint

控件名称	控件编码	前缀
报表	JGReport	rpt_
步骤条	JGStepBar	stb_
步骤条	JGSteps	stp_
定时器	JGTime	tim_
活动面板	JGActivityPanel	atp_
记录导航	JGRecordPaging	rcp_
检索	JGLocateBox	lcb_
列表	JGDataGrid	dtg_
流程图	JGWorkFlowGraph	wfg_
门户	JGPortal	ptl_
日历	JGCalendar	cld_
属性编辑器	JGPropertyEditor	ppe_
树	JGTreeView	trv_
树表	JGTreeGrid	trg_
图表	JGChart	cht_
图片播放	JGImagePlay	imp_
新闻列表	JGNewsLsit	nsl_

控件名称	控件编码	前缀
按钮菜单项	JGMButtonItem	bti_
单选	JGMCheckBox	chk_
弹出选择	JGMComboSearch	cbs_
附件	JGMAttachment	atm_
附件菜单项	JGMAttachmentItem	atI_
开关	JGMSwitch	swt_
轮播	JGMCarousel	crs_
密码	JGMPasswordBox	pwd_
日期	JGMDateTimePicker	dtp_
数字输入框	JGMNumberSwitch	nsw_
搜索	JGMSearch	srh_
图片浏览菜单项	JGMPicBrowserMenuItem	pbm_
图片项	JGMImageItem	imi_
文本	JGMTextBox	txt_
下拉菜单	JGMDropDownMenu	ddm_
下拉菜单项	JGMDropDownItem	ddi_
下拉选择	JGMComboBox	cbb_
小数	JGMFloatBox	flo_
选择器	JGMSelector	slt_
长文本	JGMLongTextBox	ltb_
整数	JGMIntegerBox	int_

控件规范

1. 控件命名

2. 控件编码简称

3. 列表/树表中列命名

4. 控件向导/替换

4.1 控件向导​

4.2 控件替换​

5. 附录-控件前缀

5.1 普通窗体​

5.1.1 通用控件​

5.1.2 字段控件​

5.1.3 业务控件​

5.2 移动窗体​

5.2.1 通用控件​

5.2.2 字段控件​

5.2.3 业务控件​

4.1 控件向导

4.2 控件替换

5.1 普通窗体

5.1.1 通用控件

5.1.2 字段控件

5.1.3 业务控件

5.2 移动窗体

5.2.1 通用控件

5.2.2 字段控件

5.2.3 业务控件