1. HTML编码规范

    1. 所有资源必须使用相对路径(如:src="component/scripts/public.js"),不能使用绝对根路径(如:src="/component/scripts/public.js"),否则在部署应用时不能灵活定制部署目录。
    2. 所有页面必须带有<head jwcid="@wade:Head">组件,否则框架中的公用资源和控制无法获取导致报错。
    3. 页面中不能直接编写js,css代码,必须放入js,css文件中编写。
    4. 所有资源必须定义wade:Script,wade:Style组件,否则不能灵活的定制换肤和脚本即时更新。
    5. 对于标签页组件,支持top,bottom,left,right四种排列风格,如果需要标签页嵌套,建议采用先top标签页,再其他形式标签页来解决多层标签页的问题。
    6. 对于树组件的使用,大的数据量的树一般采用动态加载的树方式。
    7. 内容页面中禁止使用frameset,这样会导致集群环境下出现问题,如果需要有子页面,统一采用iframe方式。
    8. 用来存储传递参数的wade:PageData组件,已经融合到Form组件中,以后所有页面不需要该组件。
    9. Ajax操作中,AjaxDirect和AjaxSubmit组件已经不建议继续使用,可以通过PageRedirect结合ajaxSubmit、ajaxDirect方式实现。
    10. Ajax操作刷新区域时,必须保证刷新区域为块对象,如span、div、 table等,如果是tr、td这种不能形成块的对象将不能刷新。
    11. Ajax刷新实际上是与服务器交互后,将交互后的界面中截取部分内容替换ajax part中的内容,所以也要保证Ajax交互后的界面能够准确执行,故Part之外的Conditionial也要能正确执行,如:<span jwcid="@Conditional" …><span jwcid="@wade:Part"> …</span></span>,如果Conditional如果为false,Part中照样无法刷新成功,所以在提交ajax方法时要保证Conditional也能正确执行。
    12. Ajax若需要刷新后执行某动作,可以ajaxDirect..之后写上this.afterAction="alert('x')"或self.afterAction="alert('x')"。
    13. Ajax若需要自定义刷新数据和刷新操作,可以在View代码中pd.setAjaxData(dataset),然后在afterAction事件中,通过this.ajaxData[0].STAFF_ID方式获取数据后执行操作。
    14. 用Ajax刷新Part区时,如果Part中有@Hidden控件,刷新时将不会将@Hidden控件值刷新,因为@Hidden在生成HTML代码时,将相关代码生成到html的顶端了,导致刷新时,Part区中没有包含该控件,遇到这种情况,可以用<input type="text" jwcid="@TextField" style="display:none">代替Hidden。
    15. 大数据字段的存储操作中,若为文件,可以结合wade:UploadField将文件存在磁盘,表记录只存放对应的文件名相关信息,若为大字符串,可以使用Long类型,最大为2G,但一张表只能一个此类型的字段,替代Oracle中的Blob和Clob字段。
    16. 不能写表达式的地方,Form型组件的value参数不能写表达式,如:不能写a == 1或者pd.getParameter('…')这种表达式,只能写简单的值或者数据映射,如:<input type="@TextField" value="ognl:info.VALUE1"/>;。
    17. 如果需要定制校验函数,最好采用verifyXXX+confirmXXX|queryXXX来组合实现,对于不采用目前所提供的校验方法的应用程序,必须封装初始方法,常用开发只需使用confirmXX或queryXX类方法。
    18. 区分查询和提交操作,查询用queryXXX,提交用confirmAll,否则执行效果和结果反馈都会不友好,判断查询和提交的方式为:需要刷新页面并把数据显示在页面时用queryXXX,如查询时需要刷新页面数据,否则用confirmXXX,如提交时只是弹出提示成功或错误的页面。
    19. 所有链接全部改用PageReidrect组件,之前的LinkSubmit组件用PageSubmit组件替代,若有icon=".../"属性,需要删除。
    20. 所有字段必须带有desc="..."属性,文本框输入时maxsize必须和数据库字段的长度匹配,默认datatype="text"。
    21. 所有组件不要用span,改成div写法,因为span是内联对象,div是块对象,块对象的通用性更好。
    22. 通常情况下@Insert value="ognl:info.value" raw="false"或不填,如果设置为row="true"会导致脚本注入问题,如@Insert value="<script>alert('x')"</script>
    23. 所有页面统一引入标准样式,如:
      <link
      jwcid="@wade:Style" 	
      href="component/ecl/skin/defaultSkin/defaultColor/color.css" 	
      rel="stylesheet" type="text/css" media="screen"/>
      
    24. PageReidrect组件引用不同的图标,通过class="e_bLinkSelect"方式引用,不要使用icon="...",其中在表格的操作区的链接图标,都要用带边框的,如e_bLinkSelect。
    25. form标签必须放在div class="e_wrapper2"内,如果form放在body下,会导致firefox中页面变形,如:
      <body jwcid="@Body">
      <div class="e_wrapper"><div class="e_wrapper2">
      <form jwcid="@Form">
      ...
      </form>
      </div></div>
      <body>
      
    26. Hiden等隐藏域放在form之上div最后,如:
      <form>
      	<div>
      	...
      	</div>
      	<input type="hidden" jwcid="INST_ID@Hidden" value="ognl:info.INST_ID" encode="false"/>
      </form>
      
    27. 弹出窗口的表格列表必须设置高度,这样保证只会滚动表格内容,如:style="height:185px;"
    28. 如果表格上下没有分页和操作按钮,需要去掉:
      <div class="fctBottom e_clear"></div>
      <div class="fctTop e_clear"></div>
      

      可参看动态表格示例。
    29. tabset中,如果标签页的内容需要设置滚动条,需要设置样式tabOverflow,如:
      <div id="tabset">
      	<div id="tabset_tabs"></div>
      	<div id="tabset_content" class="tabsetContentDiv">
      		<div id="areaTree">
      			<div class="tabOverflow" style="height:235px;">
      		</div>
      	</div>
      </div>
      
    30. 若为嵌套子页面,即iframe中的页面,如果不需要设置页面边距:一般要将外框<div class="e_wrapper"><div class="e_wrapper2">中的<div class="e_wrapper2">去掉,否则边距存在问题.
    31. 边距的设置,如果块与块之间无间隔,需要设置边距,可以依赖于table,c_inputField上直接设置边距,或者单独设置div class="l_mt"等样式,如:<div class="l_mt"></div>
    32. 按钮摆放区,如果按钮在底部(比如编辑页面的按钮),按钮统一摆放在中间,如:<div class="bottom e_cSet">,如果按钮在中间页面(如查询按钮下面还有表格),按钮统一摆放在右边,如:<div class="bottom e_cSet">
    33. 控件排列方式,查询区控件按左右排列,编辑区按钮可以选择左右或上下排列。
    34. 表单控件样式,在查询区,编辑区中文本框等统一用class="e_input"样式,下拉列表用class="e_select"样式,按钮用class="e_button",文本域用class="e_textarea"(必须用,否则不会有高度),checkbox和radio不需要class,以前组件有的组件要用className=,新的方式不需要写,直接写class="e_input"即可,但是UploadField,FlipField等组件还需要className,这种组件不需要设置class参数。
    35. 控件排列个数,一般建议排列三个控件,最多可以在1-7列中排列。
    36. 所有的提交按钮不需要带有左右边的空格,因为按钮已经加了控制,若再加空格会导致按钮空格过多,如:value="执行查询"
    37. 内容布局组件,布局与布局之间需要存在边距,一般都要加上l_mt,如表格布局:div class="c_table l_mt,输入框布局<div class="c_inputField l_mt",如果是单独的按钮区(没有和表单字段放在一起),用<div class="c_submit l_mt">,若不要加边距,去掉l_mt
    38. label标签的必填项样式为class="e_required",必须与组件的nullabel="no"匹配,同时组件desc="证件号码"必须和label一致,label文字的冒号必须为全角冒号,否则不识别,如:<span>员工性别:</span>
    39. 多个按钮的HTML不要写在一行代码上,可以分行写,方便阅读,老的编码方式都放在一行的。
    40. 表单区中对于横排方式,如果label空余空间太大导致表单宽度太短,可以设置char的个数,在div class="aclinicOn"之后加上div class="char数字"来自定义label的内定义label区最大的文字数,其中必选项的星号算一个字符,默认为最大7个字符,如:
      <div class="c_inputField">
      	<div class="body">
      		<div class="aclinicOn"><div class="char4">
      			...
      		</div></div>
      	</div>
      </div>
      
    41. 导入、读取文件等操作:
    42. ognl表达式中,若要对对象进行操作,保证对象不能为null,否则会报target is null for method get,如:ognl:obj.equals(…)中的obj为null。
      <form jwcid="@Form" enctype="multipart/form-data">必须加上enctype="multipart/form-data",否则服务器文件无法读取到文件流。
  2. HTML界面规范

    1. 样式命名大小写敏感,必须规范。
    2. 所有的输入框必须加上样式:class="e_input"
    3. 所有的按钮必须加上样式:class="e_button"
    4. 须注意组件与组件之间的间距,保持一定的空间以示组件独立,间距使用方法请参见静态模板文档中的基本布局说明。
    5. 即使对页面效果暂时不产生任何影响,不得去掉ECL文档中指定使用的无内容空标签。
    6. 不得擅自添加组件。
    7. 除了自定义高度、宽度、位置,不得以style、html属性的形式对页面效果进行控制。
    8. 必须采用Tab的方式进行行的缩进,不得使用空格。任何组件必须要有组件代码区域的注释。格式如下:
      <!-- 树状结构菜单 开始 -->
      <div class="c_tree">
      ...
      </div>
      <!-- 树状结构菜单 结束 -->
      
    9. 代码注释格式必须规范:<!-- -->中的空格不可忽略。
    10. 基本查询组件,单元输入区域中的<td="fct">标签中如果需要添加按钮,必须加上一定宽度,如:
      <input class="e_button" type="button" value="按钮" />
      

      如果使用pre标签,该标签及其内容不得有任何额外缩进存在,否则该缩进将自动视为页面内容的一部分。