EMP界面开发规范

FAQ

• 有关边框的说明
  • Android平台的特殊说明

1 有关边框的说明

产品中采用的边框绘制方案为内边框，即当父控件与子控件含有同样大小时，父控件的边框会遮挡子控件部分内容。

.style {width:100px;height:50px;}<div class="style" border="1">    <input type="button" class="style" value="test" /></div>

如上述报文所示，父控件div和子控件button还有同样的宽高，父div含有边框，就宽度而言，父div的边框会占用其内部2px的内容，这样子button就会在左右两边各被遮挡1px；如果父div含有border样式，设定边框宽度为10px，那么子button就会在左右两边各被遮挡10px；

因此建议在写页面报文时，如果不希望出现子控件被父控件边框遮挡的情况，就从样式上调整控件位置，给子控件加上left、top等样式，避免遮挡。如上例报文可改成：

.style_div {width:100px;height:50px;}.style_button {width:98px;height:48px;left:1px;top:1px;}<div class="style_div" border="1">    <input type="button" class="style_button" value="test" /></div>

1.1 Android平台的特殊说明

由于Android系统本身不支持控件边框，Android平台的边框都是通过给父控件背景绘制线框实现的。虽然产品做过特殊处理，但由于系统限制，在以下情况中，依旧会出现边框显示异常的问题：

1. button控件文字较多，和边框重叠时，文字会遮挡边框；
2. 父容器控件含有圆角边框，且子控件存在背景色，且布局位置紧贴父控件四个角，会出现子控件超出父控件边框的圆角范围的情况；
3. table含有圆角边框，子tr或td含有背景色，table四个角上会出现子控件超出父table边框圆角范围的情况；

若遇到上述情况，建议通过修改控件样式规避。

CSS

• 全局样式
  • bottom
  • display
  • height
  • left
  • position
  • right
  • top
  • width
• 其他样式
  • background-color
  • background-image
  • border
  • border-radius
    • 边框圆角弧度的算法
  • color
  • font-size
  • font-style
  • font-weight
  • filter
  • inline-block
  • margin-top
  • text-align
  • visibility
• 样式的定义
  • 元素选择器
  • 类选择器
  • 伪类
• 样式合并
• 外部的样式
• 样式替换
• 样式的继承

1 全局样式

1.1 bottom

指定控件下边界Y坐标，此坐标相对于父控件。top、bottom为互斥的样式，针对同一个控件不能同时指定top和bottom。
@value 10px 样式值必须指明单位px
@see top

1.2 display

指定控件的可视状态。
@value none/block
当值为none时，表示控件不可见，且不占位，即不参与布局计算。
当值为block时，表示控件可见。
@default block

注：通常控件的显示和隐藏都会导致页面布局的变化，因此当控件的可视属性变化时，需要通过页面刷新功能将页面重新布局。当然如果通过样式将控件坐标都控制在恰当的位置，而控件的显示与隐藏不会操作页面显示错误的话，则不需要重新布局。
如果在一次操作中，改变了多个控件的display样式，建议在所有的样式设置结束后再reload页面。

@see location:reload()

同时hide属性也可以控制控件的隐藏与显示，与display功能相同。当同一个控件同时设置了display与hide时，hide属性将失效。
当与visibility样式同时出现，visibility覆盖display样式，display不起作用

1.3 height

指定控件高度
@value 10px 样式值必须指明单位px
@see width

1.4 left

指定控件左侧X坐标，此坐标相对于父控件。left、right为互斥的样式，针对同一个控件不能同时指定left和right。
@value 10px 样式值必须指明单位px
@see right

1.5 position

指定控件的显示状态。
@value fixed/static
@default static

fixed
当值为fixed时，表示控件位置固定，不会跟随页面滑动而动。此值仅对body的第一个和最后一个控件起作用。当此样式值作用于第一个控件时，该控件会自动的置于页面最上端。当此样式值作用于最后一个控件时，该控件被置于页面的最低端。这种情况下样式中的top、bottom是不起作用的，但是left和right样式依然起作用。
同时被设置为fixed的控件相当于block元素，会独占一行显示。

static
当值为static时，控件为正常显示，不做特殊处理

toplevel
当值为toplevel时，控件将被固定在页面上指定的位置，且不会跟随页面滑动而移动。使用此值时需要制定控件的top、left坐标，否则将会默认显示在左上角。top、left值相对于body左上角。 注：toplevel的控件不参与布局算法。

注:toplevel控件与fixed控件重叠时, toplevel控件遮挡fixed控件.即toplevel控件在最上层.

1.6 right

指定控件右侧X坐标，此作为相对于父控件。left、right为互斥的样式，针对同一个控件不能同时指定left和right。
注: 如果控件设置right值,则同时需要设置其父控件的width.left,right 样式 @value 10px 样式值必须指明单位px
@see left

1.7 top

指定控件上边界Y坐标，此坐标相对于父控件。top、bottom为互斥的样式，针对同一个控件不能同时指定top和bottom。
@value 10px 样式值必须指明单位px
@see bottom

1.8 width

指定控件宽度
@value 10px 样式值必须指明单位px
@see height

2 其他样式

2.1 background-color

指定控件背景色，如div背景色。支持色值格式#RGB(#RRGGBB);
@value #RRGGBB

注:

• 当控件有边框时，背景色/背景图/渐变背景色的边界不能超出边框的范围。
• 对于同一个控件，背景色、背景图、渐变色只需要设置其中一种。当设置多个时，会以背景色、渐变色、背景图的顺序依次覆盖前者。

2.2 background-image

指定控件背景图
@value url(imageurl)

支持三种格式:

1. url(image.png)
2. url(local:image.png)
3. url(http:// | https:// | ewp_local://)

1和2表示从客户端本地获取图片，使用图片路径*.png或者前面有local指示，例如：local:*.png。

图片获取优先级为:插件资源 > 离线下载资源 > 预置资源 > file：write写出的资源 > 安装包资源。

3的格式为从服务器请求图片。客户端通过请求EWP的/map/get_pic接口，将url中的内容上传服务器，由服务器返回远程图片。

注:

• 当控件有边框时，背景色/背景图/渐变背景色的边界不能超出边框的范围。
• 对于同一个控件，静态设置时，背景色、背景图、渐变色只需要设置其中一种。当设置多个时，会以背景色、渐变色、背景图的顺序依次覆盖前者。但这三个样式属于互斥样式，通过lua动态设置时，后设置的生效。
• 图片文件不存在时，控件背景图显示空。通过lua设置时，已存在的背景也需要被覆盖.

2.3 border

指定控件的边框样式
可以按顺序设置如下样式效果：
border-width 指定边线的宽度，如10px;默认值为1px;
border-style 指定边线的类型，目前仅支持solid;
border-color 指定边线的颜色，格式#FF0000;
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

例: border: 10px solid #FF0000;

2.4 border-radius

设置控件四个边的圆角半径。border-radius与border样式一样类似，会受到border属性控制，当border='0'时，border-radius不显示。
格式:border-radius: 25px 10px 0px 10px
四个圆角半径的值顺序为：top_left、top-right、bottom-right、bottom-left。
如果要四个角的圆角值相同，可以用一个值表示。
如果要让四个角圆角弧度不一样，需要按顺序写出四个值。

例1: border-radius: 25px 10px 0px 10px; 分别指定四个圆角值
例2: border-radius :25px; 指定四个圆角值相同

目前客户端只需要支持例子的两种写法。

2.4.1 边框圆角弧度的算法

首先边框宽度的算法，边框宽度由border样式指定，但由于我们的边框是内边框，因此左右两条边框不得大于控件宽度的一半，上下两条边框不得大于控件高度的一半。

borderWidthLeft = Math.min(控件宽度 / 2, 边框样式宽);borderWidthRight = Math.min(控件宽度 / 2, 边框样式宽);borderWidthTop = Math.min(控件高度 / 2, 边框样式高);borderWidthBottom = Math.min(控件高度 / 2, 边框样式高);

接着是边框圆角的计算方法，以左上角为例。
先计算圆角支持的最大半径，最大值不可超过控件宽高的一半，X轴、Y轴可分开计算（即最终画出来的弧度不一定是圆的一部分，而是椭圆的一部分）：

mMaxRadiusX = 控件宽度 / 2 - borderWidthLeft / 2;mMaxRadiusY = 控件高度 / 2 - borderWidthTop / 2;

然后计算实际圆角半径：

topLeftRadiusX = Math.min(mMaxRadiusX, 左上角圆角样式半径);topLeftRadiusY = Math.min(mMaxRadiusY, 左上角圆角样式半径);

最后绘制圆角。绘制的中心点为，以左上为(0,0)点，(topLeftRadiusX,topLeftRadiusY)所在的点位。根据圆角半径是否大于边框宽度，分情况绘制：

if (topLeftRadiusX < borderWidthLeft || topLeftRadiusY < borderWidthTop) {    // 这种情况下，边框会盖住圆角，因此使用涂满的绘制方式，如下图1    RectF arc1 = new RectF(0, 0, topLeftRadiusX * 2, topLeftRadiusY * 2);    paint.setStyle(Paint.Style.FILL);    canvas.drawArc(arc1, 180, 90, true, paint);} else {    // 这种情况下，边框不会盖住圆角，使用线的方式绘制即可，如下图2    RectF arc1 = new RectF(borderWidthLeft / 2, borderWidthTop / 2, topLeftRadiusX * 2 - borderWidthLeft / 2, topLeftRadiusY * 2 - borderWidthTop / 2);    paint.setStyle(Paint.Style.STROKE);    canvas.drawArc(arc1, 180, 90, false, paint);}

图1： 
图2： 

2.5 color

控件文本颜色，如按钮上显示的文字颜色，支持色值格式#RGB(#RRGGBB);

2.6 font-size

指定文本的字体大小。
@value 18px

例: font-size:18px;

注意:

• 当控件高度不足以显示一行字的时候，IOS系统是将文字垂直居中显示，上下截断。
• android系统是分情况处理，button为上对齐，下边截断，输入框为下对齐，上边截断。

2.7 font-style

指定文本的字体样式
@value normal/italic
normal：显示一个标准的字体样式。
italic：显示一个斜体的字体样式。（IOS7后不支持斜体）
@default normal

2.8 font-weight

指定文本是否显示粗体文字。
@value normal/bold
@default normal

2.9 filter

指定控件的渐变背景色样式。渐变色作为背景色的一种特殊形式。
值格式为filter:progid(startColorStr='#FFFFFF',endColorStr='#000000',gradientType='0',alpha='0.5')

startColorStr表示渐变色的起始颜色
endColorStr表示渐变色结束颜色
alpha表示渐变色透明度，如不指定该属性默认为不透明，即默认值为1。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。
gradientType指定渐变的方向，值为0/1，0从上至下渐变。1从左至右渐变（如不指定该属性默认为从左至右渐变)

如果filter中只有alpha属性，就代表控件整体透明度。

例1:

filter:progid(startColorStr='#FFFFFF',endColorStr='#000000',gradientType='0',alpha='0.5')

例2:

filter:progid(alpha='0.5';)

例3:

filter:progid(alpha='-1';)filter:progid(alpha='0';)这两个方式会出现相同的效果

注:

• 当控件有边框时，背景色/背景图/渐变背景色的边界不能超出边框的范围。
• 对于同一个控件，静态设置时，背景色、背景图、渐变色只需要设置其中一种。当设置多个时，会以背景色、渐变色、背景图的顺序依次覆盖前者。但这三个样式属于互斥样式，通过lua动态设置时，后设置的生效。
• 对于不写起始或结束颜色这种不规范的写法，客户端不做处理。

2.10 inline-block

指定控件是否为块级元素。
目前只针对<div>标签
@value inline/block
当值为block时，控件为块级元素
当值为inline时，控件为内联元素
@default block

块级元素的含义:块级元素会独占一行。因此它的后一个控件也会在它的下一行显示。

2.11 margin-top

只对柱状图或折线图起作用，用于设定纵向刻度轴或横向刻度轴的刻度间隔。??
@value 40px

2.12 text-align

指定控件中文字的对齐方式
@value left/center/right
left:表示文字左对齐
center:表示文字居中显示
right:表示文字右对齐
@default left

2.13 visibility

指定元素是否可见。即使不可见的元素也会占据页面上的空间。请使用 display样式来创建不占据页面空间的不可见元素。
@value visible/hidden
visible: 元素是可见的。
hidden: 元素是不可见的。
@default visible

注：当与display样式同时出现，visibility覆盖display样式，display不起作用。

3 样式的定义

格式: .css {name:value;}
.css 为样式名，{}中为样式内容。
样式(css)支持两种定义方式，元素标签名和类选择器。

3.1 元素选择器

元素选择器，样式名与html某个元素名相同。表示此XHTML页面中的同名元素都遵循该样式。

示例：
HTML: <a href="http://www.rongyitong.com/">ryt</a>
CSS: .a {color:#ff0000;display:block; font-size:18px}

3.2 类选择器

类选择器，在html页面中通过在标签中加入属性class='classname'来引入样式。类选择器优先级高于元素选择器。

HTML: <a class="important" href="http://www.rongyitong.com/">ryt</a>
CSS: .important {color:#ffff00; font-size:20px; }

注意：* 如果一个标签同时出现两个选择器作用同一标签，类选择器的属性覆盖标签选择器的相同的属性。

3.3 伪类

EMP借助html伪类的语法来实现控件的点击等效果的样式设置。
通过给样式名加后缀的方式指定控件的点击样式或不可点击样式。样式名包括元素选择器和类选择器。
如button:active、button.inactive。

.button:active表示点击某button的一瞬间此Button所应用的样式

.button:inactive表示某button的属性enable="false"时所应用的样式

css:.button {background-color:#ff0000;}.button1 {color:#00ffff;}.button2 {width:100px;}.button:active {background-color:#0000ff;color:#00ff00}.button1:active {background-color:#00ff00;}html:<input type='button' class='button1,button2'/>

此时button的正常样式为button1，button2三个样式的组合。
而button的点击样式为在button正常样式的基础上，再应用button1.active样式的组合。

支持伪类的控件button，a。

4 样式合并

控件可以指定多了样式，例: class='css1,css2'。
样式合并将class中指定的样式合并，生成最终的样式。
合并的原则为:

1. 按照元素选择器，类选择器的顺序依次合并样式各属性。类选择器优先级大于元素选择器。
2. 当有多个类选择器时，按照书写顺序依次合并样式各属性。列表中后面的样式优先级大于前面的样式。
3. 样式合并时，如果有相同属性的样式，优先级高的样式属性替换优先级低的样式属性。
4. 当有相同名称的选择器时，按照书写顺序，后面的选择器替换前面的同名选择器

如一个控件中的class中有多个值如下：
<a class="a1,a2,a3" href="http://www.rongyitong.com/">ryt</a>
CSS: .a1 {color:#ff0000;display:block; font-size:18px;}
CSS: .a2 {color:#00ff00; font-size:19px;background-color:#cccccc;}
CSS: .a3 {color:#0000ff;display:block; font-size:20px;}
最终的样式：
{ color:0000ff;display:block; font-size:20px; background-color:#cccccc;}
以最后一个样式的属性为准，如果前面有的，而最后的类选择器中没有此属性的话，需要继承前面的样式。

当样式定义中既存在与标签名同名的样式定义，也存在对单独控件应用的样式，则这两个样式也会合并。

5 外部的样式

样式表可以引用外部的样式文件，使用标准的link标签，同时需置于head标签中。外部的样式文件可单独存在，也可与style标签可同时存在，同时不限定外部样式文件个数。link标签中只有两个属性：ref标签文件地址，type标签文件类型，type值目前只有"text/css"。通过ref获取样式文件时，需满足一下规则：读取文件的优先级顺序为：插件资源 > 离线下载资源 > 预置资源 > file：write写出的资源 > 安装包资源。

例: <link ref='login.css' type='text/css'/>

6 样式替换

由于外部样式的引入,导致在客户端中存在多个样式表. 当这些样式表中存在同名样式时,按照样式的优先级顺序,优先级高的样式会替换优先级低的样式.同样式合并的第四条.

7 样式的继承

如果父节点的样式中定义了子节点样式没有定义的CSS属性，那么该CSS属性对子节点起作用，适用于所有子节点，包括内部嵌套的子节点。
可以继承的样式:font-size、font-weight、color、font-style。

说明：

.div {font-size:20px;color:#ff0000;width:100px;}.label {color:#ffff00;}<div>    <label>font-size继承自div,color使用label中定义的样式,width不继承</label></div>

上面label的最终样式为

{font-size:20px;color:#ffff00;}

DateNoteModifier2014-11-28CSSlin.jitao2015-04-08补充伪类样式说明lin.jitao2015-08-17补充伪类样式说明chai.lixin2015-09-04text-align样式，关于其相对于父控件的对齐算法，不符合html标准规范，取消zhou.changjin2015-09-07增加border-radius算法，调整各样式以字母顺序排列，同时增加相关样式的引用链接zhou.changjin2015-09-17增加背景色、背景图、渐变色通过lua动态设置的优先级说明zhou.changjin2015-10-12增加背景图图片文件不存在时的说明zhou.changjin

属性

• 全局属性
  • class
  • hide
  • id
  • name
• 其他属性
  • adjustsfontsize
  • align
  • autoplay
  • border
  • checked
  • clearmode
  • cornerradius
  • delay
  • enable
  • encryptmode
  • failed
  • gooffline
  • hold
  • href
  • isorder
  • istap
  • leftimg
  • leftimgmode
  • leftimgpos
  • linebreakmode
  • loading
  • loop
  • minfontsize
  • numlines
  • offtintcolor
  • ontintcolor
  • returnkeyaction
  • returnkeytype
  • rightimg
  • rightimgmode
  • rightimgpos
  • separator
  • shadowcolor
  • shadowoffset
  • showformat
  • src
  • style
  • substitute
  • thumbtintcolor
  • titleimg
  • type
  • valign
  • value
  • valueformat
  • velocity
• 事件
  • onchange
  • onclick
  • onblur
  • onfocus
• 特殊属性
  • minscrolllimit

1 全局属性

1.1 class

指定元素的样式。
该属性不能在以下元素中使用：content、head、script、style、hidden。
针对可以支持class属性的标签，可以指定多个样式，用逗号分隔类名。例如：<div class="left_menu,important">。这么做可以把若干个CSS样式应用到同一个标签上。

1.2 hide

指定控件的可见状态。
@value string true/false
@default false
true 表示控件为隐藏状态
false表示控件为可见状态

与样式中的display有相同的作用。
当同一个控件同时设置了display与hide时，hide属性将失效。

1.3 id

指定控件的id
同一个页面的所有控件id必须保证唯一。

1.4 name

指定控件的名字。
@value string 任意的字符串

可以允许不同控件使用相同name，不过如果没有特殊的需求最好不要这样使用。
对于有相同name的控件，通过lua的getElement系列函数可以同时获得。
有相同name的radio控件，表示同一组，有选择互斥效果。

2 其他属性

2.1 adjustsfontsize

指定是否自动调整文字大小以适应显示区域。当显示区域不足以显示所有文字内容时，文字自动缩小以显示更多内容。
@value true/false
@see minfontsize

注: 此功能开启后，当文字需要缩小时，文字字号的设置将失效。同时文字最大不超过设置的字体大小。
当未设置linebreakmode或者linebreakmode为none时，只有numlines=1时adjustsfontsize生效。
当设置linebreakmode为head/tail/middle/时，由numlines和minfontsize共同决定显示效果。 在numlines指定的行数内，尽量多的显示文字内容，并且保证字体大小不小于minfontsize指定的大小。

2.2 align

针对容器控件，指定其子控件的水平对齐方式。
目前支持此属性的控件div、td。
@value string left/center/right
@default left

注：水平的对齐是将整个控件区域整体做对齐。

2.3 autoplay

当image控件的src为gif图片时，指定gif图片是否自动播放。
@value string true/false
@default true

注：如果设置了初始化后不默认播放，即autoplay=false，那此时设置istap属性无效，istap恒等于true，否则无法启动gif动画，gif将变得没有意义。

2.4 border

指定控件是否有边框。当border为1时，会显示默认边框或根据样式中设定的border值显示。如果border值为0，则不会显示边框。即使样式中指定了border相关的样式，也不会显示边框。
border默认宽度1px，默认颜色#d4d5d9，默认弧度10。
@value string类型 0/1
1表示有边框
0表示无边框
@default 实际控件的默认值参见对应控件说明文档

2.5 checked

指定控件选项是否默认选中。
@value string checked/true/false
checked相当于true
例: checked='checked' 

支持控件：segment、switch、checkbox、radio
注释：目前客户端通过getPropertyByName返回此属性的值的时候转化为"true"或者"false"。被选中项为true，否则为false。对于互斥的控件如segment、switch、radio控件，在设置checked的属性的时候，只能设置checked/true，然后互斥的控件会自动把其他控件设置成false，并改变显示效果。

2.6 clearmode

指定输入框中清空按钮显示的方式。
@value string类型 never/editing/unlessEditing/always
never:不显示清空按钮
editing:编辑时显示清空按钮
unlessEditing:非编辑模式时显示情况按钮
always:一直显示情况按钮。
@default 为了保持与旧版本的兼容默认值各平台会有区别:
iOS 中默认值为editing。
其他平台为:never。

2.7 cornerradius

指定控件圆角的弧度。
当前只有segment支持该属性。
@value number 10 单位是px，但不需要写

2.8 delay

指定按钮点击的延时时间，也就是两个点击的最小时间间隔。
@value number 单位秒。支持浮点数，value需要大于等于0 @default 0

注：异常值(<0)做0处理。

2.9 enable

指定控件是否可用，即是否响应用户操作。
@value string true/false
@default true
true 表示接受用户操作
false 表示不接受用户操作

当控件enable被置为false时，控件本身及其子控件都不再响应用户操作。但是对其父控件不会产生影响。
对于由于父控件enable被置为false而导致子控件无法响应的情况，子控件的enable属性依然为子控件本身的值，不会因为其不可点击而改变。

注：当enable属性值为非法值时,按照控件默认值处理.

2.10 encryptmode

定义当前密码框内容的加密方式，只能用于密码输入框。指定加密方式后，通过submit按钮完成form表达提交时，会自动做加密处理。
@value string 既定的加密方式

支持的加密方式:
00(不加密)
01(一次一密，使用AES加密)
A0(证书加密，加密算法RSA)
A1(先证书加密后一次一密)
以上所有结果最后都会做uri编码。

注: 5.2版本及之前版本支持encryptMode,5.3版本更正为encryptmode. 同时为了兼容也支持encryptMode.我们建议使用encryptmode.

2.11 failed

指定img控件图片加载失败时的显示图片。
@value string 图片路径，value格式同img的src属性
@see loading

2.12 gooffline

webview专属属性，见webview:goofline。

2.13 hold

文本域中的提示文字。当输出内容时隐藏。各个平台效果可能会略有差异。
@value string 任意字符串

2.14 href

指定链接的目标的URL。用于<a>标签。
@value string url字符串

href值的类型:

1. <a href='/relative url'>页面内容</a>: 与客户端配置的ewp服务器地址组合成链接地址。请求EWP服务器，将返回的内容push到客户端缓存中，并显示返回内容。用户页面跳转。
2. <a href='local://……'>历史明细</a>: 当以local://开头时则直接加载客户端本地内容在客户端显示，并将内容push到客户端缓存中。
3. <a href='http://……'>www.baidu.com</a>: 当url以http://或https://开头时表示需要通过手机浏览器显示url内容。
4. <a href='tel://8888888888'>客服电话</a>: 当url以tel://开头则表示需要向指定号码拨打电话。
5. <a href='sms://8888888888'>客服电话</a>: 当url以sms://开头则表示需要向指定号码发送短信。
6. <a href='mailto://'>客服邮件</a>: 当url以mailto://开头则表示向指定地址发送邮件邮件。
   例：mailto://[e-mail],[e-mail]?subject=主题&body=内容&cc=[e-mail],[e-mail]&bcc=[e-mail],[e-mail] mailto://后面为收件人，多个收件人地址以","分隔;
   subject为邮件主题;
   body为邮件正文内容;
   cc为抄送收件人，多个收件人地址以","分隔;
   bcc为秘密抄送收件人，多个收件人地址以","分隔;
   其中所有参数都为可选，客户端应进行处理

2.15 isorder

用于密码输入框，指定密码键盘是否按照正常的键盘顺序显示。
@value string true/false
@default false

2.16 istap

当image控件的src为gif图片时，指定是否需要支持点击图片暂停或播放gif动画。
@value string true/false
@default true

注：如果设置了istap=true，那将不会响应img控件的onclick属性。

2.17 leftimg

指定控件左侧小图标。通常针对button和inputtext控件。
@value string 图片路径，value格式同src属性
@see rightimg

2.18 leftimgmode

指定输入框中左侧图标的显示模式。
@value string never/editing/unlessEditing/always
@default never
@see rightimgmode

2.19 leftimgpos

指定控件左侧小图标的显示位置，目前只有button控件支持。
@value number left,right,top,width,height
@see rightimgpos

例：<input type='button' leftimg='local:a.png' leftimgpos='5,5,2,30,30' value='test'/>

注：

1. 使用时属性各值必须按既定顺序都写，且只支持大于等于0的整数。不合规范的写法不予处理，视作该属性不存在；
2. 不写该属性时，图片显示效果由具体控件决定；
3. 该属性各数值应用时需要做屏幕适配；
4. bottom由控件高度确定，因此不需要写。若控件高度不足，可能会出现截取图片的情况;
5. 各属性值可参考下图：

2.20 linebreakmode

指定文字省略模式. @value string类型 head/tail/middle/none
head:表示文字开始部分省略，用'...'代替
tail:表示文字结尾部分省略，用'...'代替
middle:表示文字中间部分省略，用'...'代替
none:不使用'...'代替文字

2.21 loading

指定img控件图片加载过程中的加载图片。
@value string 图片路径，value格式同img的src属性
@see failed

2.22 loop

指定是否以跑马灯的方式循环展示
@value true(以跑马灯方式循环展示)/false(不以跑马灯方式循环展示)

2.23 minfontsize

指定最小字号。该属性和adjustsfontsize组合使用，当adjustsfontsize为true时，文字会自动调整大小。minfontsize用来限制最小字体。以防止文字太小造成阅读障碍。

2.24 numlines

指定文字显示的行数。0代表没有行数限制。

2.25 offtintcolor

指定控件未选中状态的颜色。
当前只有switch支持该属性。
@format #RRGGBB(如#000000)
@default 实际控件的默认值参见对应控件说明文档

2.26 ontintcolor

指定控件选中状态显示的颜色。
当前只有segment、switch支持该属性。
@format #RRGGBB(如#000000)
@default 实际控件的默认值参见对应控件说明文档

2.27 returnkeyaction

指定键盘上确定按钮的lua事件。当键盘确定按钮被点击时触发此事件。

2.28 returnkeytype

指定键盘中确定按钮的类型，此功能仅针对ios平台。
@value string类型 default/go/Google/join/next/route/search/send/Yahoo/done/call
类型分别对应ios键盘确定按钮的几种类型。

2.29 rightimg

指定控件右侧小图标。通常针对button和inputtext控件。
@value string 图片路径，value格式同src属性
@see leftimg

2.30 rightimgmode

指定输入框中右侧图标的显示模式。
@value string never/editing/unlessEditing/always
@default never
@see leftimgmode

2.31 rightimgpos

指定控件右侧小图标的显示位置，目前只有button控件支持。
@value number left,right,top,width,height
@see leftimgpos

例：<input type='button' rightimg='local:a.png' rightimgpos='5,5,2,30,30' value='test'/>

注：属性规范说明同leftimgpos属性。

2.32 separator

指定table控件每一行分割线颜色。格式为#RRGGBB。
table控件默认没有分割线。当指定separator属性后，会在行间显示分割线，通常为1个像素高度，宽度为table宽度。颜色为separator中指定的颜色值。

格式: <table separator='#RRGGBB'></table>

2.33 shadowcolor

指定文字阴影效果的颜色
@value 格式为#RRGGBB
@see shadowoffset

2.34 shadowoffset

指定文字阴影效果的偏移量
@value x、y方向偏移量，格式为(x,y)
@defalut (0,-1)
@see shadowcolor

注： shadowcolor和shadowoffset组合使用。若没有设置shadowcolor，只设置了shadowoffset，则没有阴影效果；若没有设置shadowoffset，只设置了shadowcolor，则有阴影效果，阴影偏移量按默认设置来。

2.35 showformat

inputtext控件为日期输入框时支持，指定显示在界面中的日期格式
@value string 日期格式匹配字符串
@default 格式 yyyyMMdd

注： 5.2版本及之前版本支持showFormat，5.3版本更正为showformat。同时为了兼容也支持showFormat
我们建议使用showformat

2.36 src

指定image图片的路径。例: <img src=''>

@value string 图片路径

src支持三种格式的路径:

1. 加载本地图片：<img src='head.png'>或<img src='local:head.png'>。local:表示需要本地加载的特征，后面跟图片的名称或路径。
2. 加载远程图片：http://、https://、ewp_local://这三种协议都是表示加载远程图片。http://与https://表示该图片资源位于第三方的服务器上； ewp_local://表示该图片资源位于EWP服务器中。 模板可能会根据图片尺寸或排版需要制定固定的宽或高，会以参数形式通知客户端，例如："ewp_local://img/1.png?h=100&w=200"。客户端将样式中指定的width、height值通过/map/get_pic的w、h参数上传服务器。如果样式中没有width、height值，则获取src中的w、h参数作为get_pic接口的w、h。

注:

1. 样式中的width、height代表的是坐标点。而get_pic接口中的w、h代表的是像素值。因此客户端在上传w、h参数时需要对样式中的widht、height进行转换。如iphone中的retina屏，需要根据像素与坐标点的比例做配置。同时对于返回的图片，在计算图片大小时需要考虑像素值与坐标值之间的转换问题。
2. 同理，对于src中包含的w、h参数同样需要做如上的适配处理。服务器返回的w、h使用标准屏320*480像素作为基准。因此客户端回传的时候需要转换成相应的分辨率值。
3. 当服务器返回的图片的宽高小于上传的w、h时，可以不做还原的处理。

接口方法http://EWP/map/get_picHTTP请求方法POST描述客户端向服务器请求图片资源，该资源可位于EWP中，也可位于第三方服务器上。接口需求方客户端接口提供者EWP服务器输入参数（加密信道中传输）urlimg标签src属性值(需要URI编码)w(可选)图片像素宽度h(可选)图片像素高度

url，w，h参数的获取原则:

1. url:src中的内容做url编码后，作为url参数内容，这里不需要删除w、h参数，并且将整个src内容做编码。
2. w:表示图片的宽度，首先取样式的width值作为w参数值。如果样式中没有，则取src中的w参数。如果src中没有w，则可以不传w参数。
3. h:表示图片的高度，同w的处理方式。

注:由于src参数有可能从外网服务器获取，因此w、h参数的含义存在差异。比如w、h参数可能不代表图片的宽高。这时需要通过样式指定w、h的值，建议使用src明确图片宽高。

2.37 style

文本域的输入类型，多种类型时用;分割。
@value string 规定可以支持的类型

支持的类型如下:
-wap-input-format:'N' 表示只能输入整数，如123、-123
-wap-input-format:'n' 表示只能输入实数，如123、-123、125.5、-0.5
-wap-input-format:'date' 表示要求输入日期
-wap-input-format:'phone' 表示要求输入电话号码
-wap-input-format:'url' 表示输入网址, 如 https://www.baidu.com;(只有iOS支持)
-wap-input-format:'email' 表示输入邮箱地址, 如 [e-mail];(只有iOS支持)

2.38 substitute

指定密码框中的密码代替字符。
考虑到兼容性问题，默认效果不做统一要求。
iOS平台默认效果:●
AD平台效果:*

2.39 thumbtintcolor

指定控件滑块的颜色。
当前只有switch支持该属性。
@format #RRGGBB(如#000000)
@default 实际控件的默认值参见对应控件说明文档

2.40 titleimg

指定控件显示的图片。远程图片获取接口和src属性一致，但不需要考虑w、h参数。
当前只有segment支持该属性。
@format1 local:image.png（加载本地资源，这里兼容没有local关键字的情况）
@format2 http:// | https:// | ewp_local://（加载网络资源）

注：该属性的优先级大于标签间文本显示内容，若标签同时写了titleimg属性和标签间文本，则标签间文本不显示。

2.41 type

规定标签元素的类型，如<input type='button'/>。
@value string 规定的类型

2.42 valign

针对容器控件，指定其子控件的垂直对齐方式
针对文本类控件，指定其文本的垂直对齐方式
目前支持此属性的控件div、td、radio、checkbox。
@value string top/middle/bottom
@default 容器控件默认为top，文本控件默认为middle

针对容器控件：
垂直对齐只适用于单行内容。当有垂直对齐属性时，默认认为容器中只有一行。
当对齐方式为top时，控件上边与上边距对齐。
当对齐方式为bottom时，控件下边与下边距对齐。
当对齐方式为middle时，控件相对于父控件居中对齐，同一行控件中心点在同一水平线上。

2.43 value

指定控件的值。
@value string 任意的字符串

通常控件的value值与显示的内容是不同的。 如<checkbox value='male'>男</checkbox>，这里的男是显示给用户看的，而value值male则是用来上传服务器的。
但是对于部分控件value可能有特殊的含义，如button控件的value被用来作为按钮上的文字显示。

2.44 valueformat

inputtext控件为日期输入框时支持，指定回传服务器的Value值日期格式
@value string 日期格式匹配字符串
@default 格式 yyyyMMdd

注： 5.2版本及之前版本支持valueFormat，5.3版本更正为valueformat。同时为了兼容也支持valueFormat
我们建议使用valueformat

2.45 velocity

指定跑马灯移动的速度。属性值代码每秒文字移动的像素数或坐标点数。
需要和loop属性组合使用

3 事件

3.1 onchange

当输入框内容改变时触发此事件

3.2 onclick

针对用户的点击事件，并且控件在可用状态下，触发此事件

3.3 onblur

当输入框失去焦点时触发此事件

3.4 onfocus

当输入框获的焦点时触发此事件

4 特殊属性

4.1 minscrolllimit

在Android系统中，滚动视图ScrollView和列表视图ListView（一般用于瀑布流开发）由于都有滚动效果，在嵌套使用时会有事件冲突。需要对ListView做特殊处理，才能保证两者的滚动效果没问题。但在某些项目需求中，可能会希望ScrollView的滚动距离响应不那么灵敏（比如同时响应上下滚动和水平手势滑动的时候），若直接修改产品代码，就会造成已有的ListView处理失效，产生兼容性问题。
为解决此问题，这里增加属性minscrolllimit，表示当容器控件可以滚动时，设置滚动视图支持滑动的最小限制，当手指移动距离小于此值时，不认为是滚动。
目前只有body、div、table支持此属性。
@value number 滑动最小距离限制数值（320*480标准模板下），为0表示不处理
@default 0

注： 除Android系统，其他平台不需要处理此属性。

DateNoteModifier2014-11-28属性lin.jitao2015-01-14增加separator属性说明lin.jitao2015-02-02修正src参数的处理及get_pic接口的参数处理lin.jitao2015-04-08增加新的属性lin.jitao2015-04-09增加属性titleimg、cornerradius、ontintcolor、offtintcolor、sliderColor，修改属性valign的说明zhou.changjin2015-04-28补充关于src中w、h参数对分辨率的处理方案lin.jitao2015-06-05修改sliderColor名称为thumbColorzhou.changjin2015-06-05修改thumbColor名称为thumbtintcolorzhou.changjin2015-06-06增加shadowcolor和shadowoffset的组合关系说明zhou.changjin2015-06-08完善linebreakmode和adjustFontSize说明zhou.changjin2015-06-08修改linebreakmode，adjustFontSize，numlines说明lin.jitao2015-08-20修改isorder默认值为falsezhou.changjin2015-09-07增加id属性，调整各属性以字母顺序排列，同时增加相关属性的引用链接zhou.changjin2015-09-11修改所有属性名位小写,不包含大写lin.jitao2015-09-17增加encryptmode支持encryptMode写法的说明zhou.changjin2015-09-18增加属性leftimgpos、rightimgposzhou.changjin2015-09-21补充属性showformat、valueformat说明zhou.changjin2015-11-12增加属性goofflinezhou.changjin2015-11-12增加特殊属性minscrolllimitzhou.changjin

全局配置支持的属性说明

• 说明
• label
  • linebreakmode
  • shadowcolor
  • shadowoffset
• link
  • linebreakmode
• button
  • delay
• img
  • loading
  • failed
• text
  • clearmode
• password
  • substitute
  • isorder
• option
  • height

1 说明

以下控件属性的应用范围是整个程序生命周期，即通过改配置设置的属性，在整个程序运行过程中都会生效。
若某个控件设置了同名的标签属性，则针对该控件，标签属性效果覆盖全局属性效果，但其他同类型控件不受影响。
关于全局属性的配置方式，根据平台不同而存在差异。如iOS平台在class.xml中配置，android平台通过WidgetConfig类配置。具体配置方式可参考对应平台配置说明。

2 label

2.1 linebreakmode

指定文字省略模式,当显示区域不足以显示所有文字时通过linebreakmode属性设置省略的方式,并通过...代替. @value string类型 head/tail/middle/none.
head:表示文字开始部分省略,用'...'代替.
tail:表示文字结尾部分省略,用'...'代替.
middle:表示文字中间部分省略,用'...'代替.
none:不使用'...'代替文字. 默认为none.

2.2 shadowcolor

指定文字阴影效果的颜色.
@value 格式为#RRGGBB.
@see shadowoffset.

2.3 shadowoffset

指定文字阴影效果的偏移量
@value x,y方向偏移量,格式为(x,y).
@see shadowcolor

3 link

3.1 linebreakmode

指定文字省略模式,当显示区域不足以显示所有文字时通过linebreakmode属性设置省略的方式,并通过...代替. @value string类型 head/tail/middle/none.
head:表示文字开始部分省略,用'...'代替.
tail:表示文字结尾部分省略,用'...'代替.
middle:表示文字中间部分省略,用'...'代替.
none:不使用'...'代替文字. 默认为none.

4 button

4.1 delay

指定按钮点击的延时时间,也就是两个点击的最小时间间隔. @value number 单位秒. 支持浮点数,value需要大于等于0. 默认为0.

5 img

5.1 loading

指定img控件图片加载过程中的加载图片.
@value string 图片路径,value格式同img的src属性
@see failed

5.2 failed

指定img控件图片加载失败时的显示图片.
@value string 图片路径,value格式同img的src属性
@see loading

6 text

6.1 clearmode

指定输入框中清空按钮显示的方式. @value string类型 never/editing/unlessEditing/always.
never:不显示清空按钮
editing:编辑时显示清空按钮
unlessEditing:非编辑模式时显示情况按钮
always:一直显示情况按钮.
为了保持与旧版本的兼容默认值各平台会有区别:
iOS 中默认值为editing.
其他平台为:never.

7 password

7.1 substitute

指定密码框中的密码代替字符.
考虑到兼容性问题,默认效果不做统一要求.
iOS平台默认效果:●.
AD平台效果:*.

7.2 isorder

指定密码键盘是否按照正常的键盘顺序显示.
@value string true/false.
默认值为true.

8 option

8.1 height

指定下拉列表中每行的高度. @value string 行高, 10px.

DateNoteModifier2015-4-8初稿lin.jitao2015-5-4增加 option属性heightlin.jitao2015-9-11修改属性名下小写