如何使用Gadge及扩展点的功能

disagree 精华[复制链接]
豆芽兜   金牌会员  发表于 2016-12-27 12:35:30

最新回复:2017-02-25 15:13:27

摘要:Gadget如何使用及扩展点的功能 1. Gadget是什么 UEE官方网站给的解释: 独立的、具有业务语义的自定义组件。 简单理解,你可以把gadget理解为一个个的代码片段。比如个人客户注册页面,由证件信息和客户基本信息这两部分组成,那么你可以像下面这样去引用这两个gadget就能实现这个页面了,就不用写div、span等原生的html代码去重新实现这个页面了。 目前套件已经对整体业务进行分析后,提取出来很多个比较通用的gadget出来了,我们只

[ 编辑本段 ]   [ 回目录 ]Gadget如何使用及扩展点的功能   
[ 编辑本段 ]   [ 回目录 ]1.            Gadget是什么   

UEE官方网站给的解释: 独立的、具有业务语义的自定义组件。

简单理解,你可以把gadget理解为一个个的代码片段。比如个人客户注册页面,由证件信息和客户基本信息这两部分组成,那么你可以像下面这样去引用这两个gadget就能实现这个页面了,就不用写divspan等原生的html代码去重新实现这个页面了。

目前套件已经对整体业务进行分析后,提取出来很多个比较通用的gadget出来了,我们只需要直接像下面这样去使用就能实现我们对应业务的页面效果了。这样就大大的减少了前端页面的开发时间。

<!—引用证件信息gadget -->

<bes: omni-person-certificate

model="$Page.newCust.certificate.model" params="$Page.newCust.certificate.params" validate="$Page.validateFunction">

</bes: omni-person-certificate>

<!—引用客户基本信息gadget -->

< bes: omni-person-customerinfo

model="$Page.newCust.partyinfo.model" params="$Page.newCust.partyinfo.params" validate="$Page.validateFunction">

</bes: omni-person-customerinfo >


[ 编辑本段 ]   [ 回目录 ]2.            如何使用gadget   

1)    Gadget的属性是什么

Gadget是一个具有业务语义的组件,那么当你在使用gadget的时候,gadget自己怎么判断你当前具体是要做什么动作呢,是仅供显示?还是能够进行资料填写?这时就需要我们在调用gadget的时候传些参数进去,从而让gadget自己能够根据这些参数去识别出你想怎么用这个gadget。就类别于我们调一个java方法的时候需要传入参是一个性质。

2)    Gadget一般都有哪些属性

一般情况下,一个gadget会有如下几个属性:modelparamsvalidatemetaname,下面我们分别解释下这几个属性的作用。

<!-- 组件绑定的模型,界面上展示的数据一般就保存在这个对象里 -->

<uee:gadget-attr property="model" type="input" label="model"></uee:gadget-attr>

<!-- 组件通讯参数,提供一些gadget的参数,比如gadgettitle,列数,动作类型等-->

<uee:gadget-attr property="params" type="input" label="params"></uee:gadget-attr>

<!-- 校验,提供校验的动作,比如gadget里某个必填字段没有填写,就去点击业务提交按钮,这时就会调用的这个校验方法,然后提示校验失败,并退出这个业务提交动作 -->

<uee:gadget-attr property="validate" type="input" label="validate"></uee:gadget-attr>

<!-- 元数据id后缀名,该参数用来指定你所使用的元数据是哪个,一般默认值是default,也就是gadget内部提供的元数据,如果你不想用gadget内部提供的元数据,你可以在你page页面对应的扩展点文件中定义你自己所需的元数据,然后你再引用这个gadget的时候,传入该参数为你扩展点里定义的值,这样你就可以使用你再扩展点里定义的元数据了-->

<uee:gadget-attr name="metaname" label="证件信息元数据" defaultvalue="default"></uee:gadget-attr>

3)    Gadget使用方法

引用gadget的方法如下:其中

l  $Page.partyinfo.model:如果你在引用这个gadget的时候需要一开始就展示一部分数据出来,那么你需要将要展示的数据提前在js文件里初始化完毕并保存在这个对象里,然后再传给gadget

l  $Page.partyinfo.params:这个参数需要提前初始化好,主要是gadgettitle等参数

l  $Page.partyinfo.validate:这个参数一般会被初始化为一个空数组给传进去,而且其他gadget的这个参数可以共用这一个值

<bes: omni-person-customerinfo

model="$Page.partyinfo.model"

params="$Page.partyinfo.params"

validate="$Page.partyinfo.validate">

</bes: omni-person-customerinfo >

[ 编辑本段 ]   [ 回目录 ]3.            Gadget内部的实现逻辑   

1)    一个gadget包含哪些内容

一般情况一个gadget包含有4个文件:

*.gadget文件:定义了gadget自己的名字,属性等,并且引入其对应的js,uslx,css文件

*.js文件:定义了该gadget需要实现的逻辑处理,比如:页面初始化方法,调接口逻辑

*.uslx文件:定义了gadget文件的界面展示部分(C10里加了些元数据定义的内容)

*.css文件:定义了uslx文件中所需要的样式内容(C10一般会将该文件单独存在一个固定目录里,以适配换肤的功能)


2)    如何去看一个gadget实现了哪些内容

a)    先看*.gadget文件

打开一个gadget文件,首先先看下*.Gadget这个文件

l  先看gadget上方的注释:在注释里一般都将gadgetparamsmodel等属性描述清楚,另外也会将gadget的基本业务功能描述出来,比如调了哪些服务等,如下图:


l  再看下gadget的属性定义部分:这里主要是检查下该gadget的属性定义和改gadget的上方注释是否一致,如果不一致,看是增加了哪些属性,并且从属性的描述信息中获取到该属性的作用。如果属性有减少,那么最好是和该gadget的维护人员确认下为什么要减少这些属性呢


l  最好再看下该gadget最下方都引入了哪些文件呢(主要是看引入的:uslxjscss文件)


b)    再看*.js文件里的初始化方法

js的初始化方法里,我们大概可以看出这个gadget初始化时都做了哪些事情,也就能看出来我们传给gadget的参数它都将这些参数给了gadget内部的哪些变量,比如下图中的:$Gadget.certificateInfo = $Gadget.$Attrs.model;这里就将我们外部传给这个gadget的参数和gadget内容的$Gadget.certificateInfo这个变量绑定起来了。


c)     最后再看下*.uslx文件

*.uslx这个文件里一般定义了界面上展示出来的元素,如下图中界面上的这些内容的展示都是定义在*.uslx这个文件里的;


*.uslx文件大体可以分为两大部分

l  第一大部分,如下图示,具体解释见下图中内容


l  第二部分,主要是定义的元数据部分,具体描述见下图


[ 编辑本段 ]   [ 回目录 ]4.            扩展点的功能   

1)    扩展点的使用范围

扩展点是定义在gadget文件里的,但是使用时是在page级别去进行使用的。主要用于该pagegadget能力的定制或增强。

2)    如何定义扩展点

扩展点的定义是在gadget文件里进行定义的

a)    前置扩展点定义方法

(需要手工写这段代码,没有可拖拽组件)

定义一个前置扩展点格式如下:

<div x-autoid="bes-omnichannel-certificate-extend-before"

class="u-extend"

id="bes-omnichannel-certificate-extend-before"

    desc="'{{'omnichannel.artificialcommon.label.extendbefore' | i18n}}'">

</div>

其中,各个各个属性的要求

x-autoid定义格式一般为:gadget名称 extend-before

class:固定为:u-extend

id定义格式同x-autoid

desc:固定为:'{{'omnichannel.artificialcommon.label.extendbefore'| i18n}}'

b)    后置扩展点定义方法

后置扩展点的定义和前置扩展点的定义基本一样,只是将其中的“before”改为“after

  <div x-autoid="bes-omnichannel-certificate-extend-after"

    class="u-extend"

    id="bes-omnichannel-certificate-extend-after" 

    desc="'{{'omnichannel.artificialcommon.label.extendafter' | i18n}}'">

</div>

3)    我们为什么需要扩展点

一般情况下,一个gadget会满足80%左右的业务功能需求,假如客户信息gadget,该gadget只提供了客户常用的三个字段:姓名,性别和生日。这对大多数场景是满足要求的,但是如果在某个局点交付的时候,局方希望再增加一个字段:住址。那么这时候要怎么办呢?难道我要再开发一个包含姓名,性别,生日和住址的一个gadget吗,这样工作量岂不是增大了很多,其实就是在页面上增加一个字段,我却要多开发一个gadget。这样gadget的复用性就大大降低了。那么这时gadget的扩展点就能很好的帮助我们解决这个问题。

一般需要使用到gadget扩展点的情况

l  Gadget界面展示字段不符合要求,但是又想复用gadget的能力

l  Gadgetjs文件已有的方法不满足定制局点的要求,需要重新定制

l  Gadget能力缺失,需要在js文件里新增方法

4)    如何使用gadget的扩展点

a)    如何生成写扩展点代码的文件

我们在IDE里打开一个page页面,在预览里点击=下图中的这两个黑色的小圆圈即可生成对应的前置扩展点和后置扩展点


点击这个黑色圆圈后就会自动生成这样的一个文件,如下图:


附:这里大家需要注意下,在新建的page页面上需要加上这个下图中标红的这个属性,不然直接点击上图中的黑色圆圈时,生成的扩展点文件为:null-c.uslx,想解决这个问题就需要加上这个属性,这样生成的扩展点文件就会是你content里定义的内容 ”_c.uslx”(这里就是bes-artificial-360view_c.uslx


b)    在扩展点里我们怎么写代码

在扩展点里我们经常写以下三类代码:Html代码,Js代码。下面分别描述如何写这两类代码。

             i.         Html代码:


这样写后,gadget的展示效果如下图示:


          ii.         Js代码:

Js代码书写办法如下

本帖最后由 豆芽兜 于 2016-12-27 16:18 编辑

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
跳转到指定楼层
GavinHuang   高级会员  发表于 2017-2-24 16:19:00

总结的浅显易懂,很受益的经验分享!
豆芽兜   金牌会员  发表于 2017-2-24 17:22:08

GavinHuang 发表于 2017-2-24 16:19 总结的浅显易懂,很受益的经验分享!
感谢,希望可以给你带来帮助~
GavinHuang   高级会员  发表于 2017-2-24 21:53:50

豆芽兜 发表于 2017-2-24 17:22 感谢,希望可以给你带来帮助~
期待有更多类似有帮助的经验分享,要是能够覆盖整个二次开发过程中的各个环节,就好了!
豆芽兜   金牌会员  发表于 2017-2-25 15:13:27

GavinHuang 发表于 2017-2-24 21:53 期待有更多类似有帮助的经验分享,要是能够覆盖整个二次开发过程中的各个环节,就好了! ...
我们都在努力中,敬请期待~
快速回复 返回顶部