当我们为一个元素设定完布局和位置后,接着就是要对这个元素进行美化。使人舒服的外表是吸引使用者的重要因素。AppCan UI2.0框架中对一个元素的效果属性分化为几类,通过这些不同类别属性的组合来完成对元素UI的设定。
大小位置形状控制
▶ 圆角类别: uc-{类型}[类型] [类别]
uc-tl, uc-tr, uc-bl, uc-br , uc-t, uc-b, uc-r , uc-l, uc-a, uc-n, uc-tl1, uc-tr1, uc-bl1, uc-br1, uc-t1, uc-b1, uc-r1, uc-l1, uc-a1, uc-a2, uc-a3
▶ 阴影类别: us [类别]和us-i [类别]
us,us1,us-i
▶ 比例类别:ulev[类别](由于元素的控制主要通过em来进行相对控制,ulev可以对默认比率进行放大缩小)
ulev2,ulev1,ulev0,ulev-1,ulev-2
▶ 浮动类别: ufl和ufr
▶ 限宽类别: ulim
▶ 单行类别: uinl
▶ 边距类别: uinn[类别]
uinn,uinn1,uinn2,uinn3,uinn4
▶ 最小高宽类别: um{w或h}[类别]
umh1,umh2,umh3,umh4,umh5,umh6,umw1,umw2,umw3
▶ 文字对齐类别:tx-{类型}
tx-l,tx-r,tx-c
▶ 文字缩略类别:ut-s
▶ 边框类别:ub{类型}[类别]
ubt,ubb,ubr,ubl,uba,uba1,uba2
▶ 隐藏类别:uhide
▶ 间隔类别:umar-{类型}
umar-b
色彩控制
UI2.0框架对元素的色彩划分为边框色、文字色、背景底色和背景遮盖层
▶ 背景遮盖类别: c-m{类别}
c-m1,c-m2,c-m3,c-m4,c-m5,c-m6,c-m7
▶ 背景底色类别: c-{色彩}[类别]
c-blu,c-blu1, c-blu2, c-blu3, c-blu4,c-wh, c-bla,c-gra,c-gra1,c-gra2,c-gre,c-red,c-yel
▶ 文字色类别:t-{色彩}[类别]
t-bla,t-wh,t-gra,t-blu
▶ 边框色类别:b-{色彩}[类别]
b-bla,b-wh,b-gra,b-gra1,b-blu
资源控制
UI2.0框架一些常用图片资源进行了定义。例如搜索图标等。
▶ 资源类别:res{类别}
res1,res2,res3,res4,res5,res6,res7,res8,res9,res10
AppCan UI2.0框架对一个元素的基础属性进行了拆分整理,通过不同的组合来定制元素效果,同时这个方案也是一种规则,开发者可以根据具体的实际情况在对应的类别中扩展自己需要的特效。遵循这个规则可以提高代码的可重复利用率和维护管理效率,避免团队开发中由于各种自定义类别混乱定义引起的UI适配和维护问题。同时使用UI2.0框架构建的控件,代码量将会极大地减少。下面一节我们将对各种常用在应用中的控件的实现来使大家了解UI2.0在UI实现上的巨大优势。
上面图片展示了一些按钮的效果,我们通过代码看一下IDE是如何使用基础类来定义这些按钮的。我们选择index_content.html,在其Body区域添加一个按钮。在AppCan IDE(UI2.0)中,我们选择中标红的按钮,进入按钮制作向导。
在上面这个界面中,我们可以选择建立普通按钮、带图标按钮和特殊定义按钮例如iOS效果按钮等。一般情况下按钮会占满整个容器,选择内联可以使按钮和其他控件在不超出容器宽度的情况下保持在同一行。如果按钮在标题或页脚中,可以选择居于左侧或右侧。高级模式可以对按钮的显示效果进行配置。
上面的界面中,我们可以配置按钮的圆角、边框、边框色、背景色和背景遮盖渐变色。这些效果不光是对按钮起效,对于其他控件也是同样的定义。这里定义的效果只是我们预置的效果,开发者如果需要定义自己的色彩时,只需要在ui-color.css中添加自己的类定义后,对代码中的默认颜色类进行替换即可。我们添加一个深蓝色的按钮。
效果:
代码:
确定
首先使用btn来定义这个DIV是一个按钮(我们为不同控件类型定义了一个标识类,用于定义一些此类控件通用的属性)。然后使用uinn5在文字外定义了一个内边距,这样按钮的高度就是内边距+文字高度。使用uc-a定义按钮四个圆角都为0.6em。接着我们使用c-blu指定背景色为蓝色。在通过c-m1在蓝色上加了一层渐变遮盖层。使用t-wh定义文字为白色。
最后我们通过uba1指定边框所有边都为2px宽,并通过b-bla设定边框色为黑色。到此就完成了一个按钮在不点击状态下的效果。相对于之前UI1.0中一个普通按钮需要一个DIV和两个SPAN的嵌套要简化了2/3的代码,层次也减低到一层。现在我们为这按钮加上点击效果。按照标准CSS3来说,只需要使用伪类:active来设定一个类即可完成鼠标按下弹起的效果变换, 但很遗憾,在Andorid平台,这个效果大部分手机支持的都有问题。对于iOS平台这个属性是支持的,但是如果想使这个伪类有效,则必须在代码中加入ontouchstart,才能够激活这个伪类。为了解决这个跨平台问题,我们提供了zy_touch接口,通过这个接口,它可以完成点击效果的处理。
这段代码中,我们加入了ontouchstart="zy_touch('btn-act')",zy_touch是封装在 zy_control.js中的扩展函数,btn-act是我们预定义的一个通用控件点击凹陷效果类。通过这个函数,我们构建了一个点击监听类zyClick(如果使用zy_touch还需要引用 zy_click.js),他会监听触摸屏事件,来控制为按键增加和去除点击效果,同时可以判断是否为点击操作,如果判定成功,会直接调用参数中的回调函数来达到onclick事件的效果,可以解决手机浏览器中onclick不灵敏的问题。同时zy_touch还支持直接调用HTML代码中的onclick属性实现点击效果。我们调整代码
代码:
确定
上述代码中我们可以看到,我们注册了onclick函数,zy_touch会直接截获onclick事件,代替系统调用onclick代码,而不会调用两次onclick。这种写法更贴近于开发者正常应用的写法。另外,由于目前模拟器中还不支持ontouchstart事件,因此上述代码ontouchstart不会被执行,模拟器重看不到点击效果,但onclick函数还是会被调用。
如果希望在模拟器上看到效果,可以替换ontouchstart为onmousedown。虽然手机中也支持onmousedown事件但是他的效果和时序和touch事件有差别,因此我们在手机中运行的时候还是要替换回ontouchstart。
上面的按钮是使用DIV实现的,而DIV默认是一个块。因此会占满整个宽度。如果需要使按钮与其他控件在同行显示,我们需要为齐添加uinl类。
效果:
代码:
确定
我们可以看到按钮的宽度已经不是整行显示而是根据按钮中的文字宽度、边框宽度、内边距宽度来展现。需要注意的是,uinl会和ub有效果冲突,在弹性盒子模型中,子元素需要处于块模式(display:block)。刚才介绍的是一个最简单的按钮,好我们现在为按钮增加一个图标。在IDE中选择按钮向导,在按钮类型中,选择带图标按钮。同样配置为深蓝色。
效果如下:
代码:
无图标的按钮中,我们直接在DIV中加入了文字。这次因为有图标我们认为按钮中分左右两个区域,左侧文字区域自动适配宽度,右侧图标区域宽度固定。文字和图标中线对齐。首先我们定义按钮的外部效果class="btn uba1 b-bla c-blu c-m1 uc-a ub t-wh uinn5 ub-ac",这个与之前的按钮无区别,唯一添加的是 ub和ub-ac分别代表子元素采用弹性盒子布局,子元素中线对齐。我们为文字区域设定了弹性宽度(ub-f1),并指明当文字超出容器宽度时,自动缩略不换行(ut-s)。最后我们定义了一个图片,这个图片高(umh1)宽(umw1),采用ub-img控制其缩放,res1代表箭头图片,c-bla代表图片区域默认背景色,uc-a使其有圆角,由于图片宽度较小,配合圆角使其象一个圆形。这就是用弹性盒子布局定义的一个带图标按钮。那么如何使图标居于左侧呢?弹性盒子模型的便利性在这里有很好的体现。我们在容器中加入ub-rev类,它设定子元素反向排序,很简单实现图标居于左侧。
那如何使图标上下布局呢?一样很简单,只需要在容器中加入ub-ver,定义容器中的子元素纵向排序即可。
通过上面的例子可以看到其实一个按键就是一个容器加一些子元素进行弹性盒子布局,然后为容器和子元素加一些控制和显示效果。而其他控件也是这种方式,只是显示效果定制上稍有不同罢了。
在UI2.0中我们认为所有控件其实都是容器块配合子容器和子元素组合。因此,容器是我们最基础的组件之一。在应用开发中,经常需要把几个按钮、复选框或其他控件合并成一组进行显示。在这种情况下一个满足效果的容器将是必不可少的。我们接下来将讲解,如何利用AppCan来构建一个容器并按照我们的想法对元素进行排列打开AppCan IDE(UI2.0),我们选择 中标红的按钮,进入容器制作向导。
可以看到容器分为纵向排列容器和横向排列容器。默认容器中会建立三个子元素,如果用户需要自己控制子元素的话可以选择“无条目”来建立一个空的容器。同时与按键控件相同,我们可以很简单为容器指定各种效果。我们接下来通过范例来演示如何使用容器。这次的范例是一个登陆的页面
这个页面中,纵向排列的两个编辑区域用来演示纵向排列容器。两个按钮用于演示横向排列。首先此页面高度不会超过一个屏幕,因此我们不需要实现页面的拖动。因此不需要建立一个浮动View来显示内容区域,而可以直接在内容区域添加代码。 Demo008为此范例的初始界面。我们在此基础上进行调整来完成登陆页面。 Demo008范例首先在插入编辑区域和按钮区域前,我们先对内容区域进行调整。content区域调整后的代码
上述代码中我们为内容区域设定了橙色背景(c-org1),弹性区域(ub-f1)自动适配屏幕,最后设定其内边距(uinn2),这样可以使后面我们将要添加的元素不会紧贴内容区域边界。准备完成后,我们在页面中添加一个纵向排列容器。
我们构建了一个默认的带三个条目的纵排块容器。由于此范例中只需要两个条目,且背景为统一的白色背景,因此我们需要对生成的代码进行调整,删掉条目2,并去掉条目背景色,同时为容器加上白色背景。修改后效果和代码如下
上图我们可以看到,我们调整了容器的背景为白色,字体色彩为黑色,子条目没有背景。这时我们就已经创建了一个符合要求的容器了。接下来,我们假如编辑框控件来替换条目1和条目3。
我们先通过IDE中的编辑框向导
插入一个编辑框到条目1位置(选择带标签),替换后的条目1部分代码如下
目前的效果和我们需要的效果有些偏差我们需要调整一下。首先标签部分不需要再有一个内边距(uinn),其次编辑框也不需要有任何的背景边框效果,我们删掉这些类。调整后的效果如下
代码:
上面的代码可以看到,对于一个编辑框,我们采用了弹性盒子模型,编辑区域通过ub-f1实现了宽度弹性变化。到此,我们完成了条目1部分的替换,接着我们拷贝这个代码替换条目3。最终效果如下
这里用到了一个小技巧,我们看到上面的图示里"用户名:"和"密码:"并不一样长,造成标签部分宽度不同,这会引起后面的编辑框区域宽度也不同,我们在"密码:"后面添加了一个中文空格来保证界面的排版。这是一个简单但有效的方法。
下面我们再增加两个按钮。首先在编辑区域容器下方再构建一个横向排列容器。
这个容器用来容纳我们的那两个按钮。