native插件开发与使用

1、Native插件的插件的开发开发和和使用使用 android 一一. Native插件插件概述概述 二二. Android插件开发与说明插件开发与说明 三三. Android插件实例开发与使用插件实例开发与使用 Native插件插件概述概述 为了满足更多的应用场景，有时候需要扩展 ExMobi的能力。 Native插件提供了这样一种扩展方式：熟悉原生开 发的人员根据ExMobi的接口要求开发插件，嵌入 到ExMobi应用中，提供给应用开发人员使用。 ExMobi支持合作伙伴开发Android、IOS Native插件， 通过Edn打包可方便集成Native插件。烽火星空会 封装一些常用插件供选

2、用，合作伙伴也可开发自 己的插件上传至Edn，打包时选择需集成插件即可 轻松生成集成插件版本的Apk安装包或Ipa安装包。 通讯录列表插件 拖动九宫格插件 Native插件插件概述概述 时间日期插件 Android插件开发与说明插件开发与说明 插件标签介绍插件标签介绍 native插件提供了这样一种扩展方式：熟悉原生开发的人员根 据ExMobi的接口要求开发插件，嵌入到ExMobi应用中，提供给应 用开发人员使用。 native插件控件考虑支持以下功能： 1：native插件分为有界面插件和无界面插件两种，插件开发人员 通过实现getview接口来支持改插件是否显示界面； 2：native插件

3、支持通过style设置width，height，margin，align， display基本样式； 3：native插件属性包括：id，name，value，type，style，class， disabled， factoryname（ios插件特有）； 4：插件属性支持构建时通过属性设置或JS获取插件控件对象设置 两种方式； 5：支持在页面中JS获取Native控件对象，通过控件对象call方法调 用插件提供函数方法名实现ExMobi页面至插件的函数调用； Android插件开发与说明插件开发与说明 控件控件固有属性固有属性 属性名属性名说明说明取值取值必须项必须项 id标准属性规定元素

4、的唯一 id 字符串否 style标准属性样式定义字符串 否 class标准属性主要用于css字符串 否 name控件名称字符串否 value设置控件默认选中值字符串否 type插件名称字符串是 factoryname 插件工厂类名 注：ios插件必须填写 字符串否 disabled 是否禁用该控件 注：禁用状态下无提交值 false：不禁用该控件，普 通状态（默认）；其他值： 禁用该控件，若属性不存 在则为普通非禁用状态。 否 Android插件开发与说明插件开发与说明 控件控件 Css属性属性 属性属性名名说明说明取值取值 width控件所占宽度 取值 默认占满所在父容器。支持以下方式设置

5、： 整型，如width:40 百分数，如width:20% 整型+px，如width:40px 整型+dp，如width:40dp fill_parent，如width:fill_parent l 注意事项 1:若设置为百分比形式，则宽度为父容器宽 度*百分比，而非手机屏幕宽度*百分比 2：fill_parent属性值只能用于h横向布局容 器中，若放置于div等其他容器内不生效； width设置为fill_parent时，此时控件的宽度 为容器的宽度减去容器内其他控件的宽度； 一个h横向布局容器中，只能有一个控件的 宽度设置为fill_parent，若h横向布局容器内 其他控件宽度已超出容器宽

6、度，则设置宽 度为fill_parent的控件不显示； Android插件开发与说明插件开发与说明 控件控件 Css属性属性 height控件所占高度 控件所占空间高度，默认高度32dp 取值： 无默认值。支持以下方式设置： 整型，如height:40 整型+px，如height:40px 整型+dp，如height:40dp，默认32dp 百分数，如height:20% 【注】 1：若设置为百分比形式，则高度为body高度*百分 比；若控件/容器若位于header/footer内时，高度百 分比无效； 2：设置高度时绘制与checkbox控件类似，即只影响 占位区域，控件展现大小无影响，控件

7、位于占位区 域中间； Android插件开发与说明插件开发与说明 控件控件 Css属性属性 display控件是否显示 取值为： block, none ，默认为block block显示控件； none隐藏对象，并且不为控件分配空间 margin 控件四边的外延边距，如果提供四个 值，将按上右下左的顺序作用 于四边。如果只提供一个，四边均生 效。如果提供两个，第一个用于上 下，第二个用于左右。如果提供三 个，第一个用于上，第二个用于左 右，第三个用于下 由整型或百分数组成，默认值8 4 8 4，单位 dp。用法：margin:2 2 4 2。上下margin不支 持百分比，若上下margin

8、设置百分比则视为 0处理 align控件的水平对齐方式 取值 取值为： left, center, right ，默认为 left。 left 居左；（默认） center 居中 right 居右 Android插件开发与说明插件开发与说明 控件控件 js属性属性 属性名属性名 描述描述 id 返回slider控件的id。只读 value 返回当前值 字符串。只读 name 返回slider控件的名称。只读 disabled 返回或设置控件是否应被禁用。只要有该属性，返回为true style 设置控件样式，在样式中如果出现下划线，则将下划线忽略并将下划线后面第一个字母大写。 display为

9、错误值时仍返回错误值。支持style获取和设置属性包括：width/height /display； className 设置或返回元素对象的 class 属性值 objName 返回该对象所属类名， 字符串全小写 只读。返回插件type属性名，全小写 Android插件开发与说明插件开发与说明 控件控件 js属性属性 属性名属性名 描述描述 id 返回slider控件的id。只读 value 返回当前值 字符串。只读 name 返回slider控件的名称。只读 disabled 返回或设置控件是否应被禁用。只要有该属性，返回为true style 设置控件样式，在样式中如果出现下划线，则将下

10、划线忽略并将下划线后面第一个字母大写。 display为错误值时仍返回错误值。支持style获取和设置属性包括：width/height /display； className 设置或返回元素对象的 class 属性值 objName 返回该对象所属类名， 字符串全小写 只读。返回插件type属性名，全小写 Android插件开发与说明插件开发与说明 控件控件 js方法方法 方法方法 描述描述 string get(attrName) 获取插件控件指定属性值 参数： attrName：需要获取的属性名 字符串类型 返回值： 属性值，字符串，若无该属性则返回null void set(attrN

11、ame, attrValue) 设置插件控件指定属性值 参数： attrName：需要获取的属性名 字符串类型 attrValue：需要设置属性value值，字符串类型 返回值：无 string call(functionName,par am1,param2) 调用插件控件方法 参数： functionName：插件方法名称 字符串类型 param：可变参数集，参数个数可变，均为字符串类型，参数总数不能超过7个 返回值：调用插件方法结果，若无返回值则返回null Android插件开发与说明插件开发与说明 插件工程插件工程说明说明 1.从http:/ 获取Android工程AppPlugin

12、.zip，以这个工程为基础，参考其 中的示例进行开发，可以看到项目内文件结构如图 2.每构建一个native插件，均需创建以com.appplugin +.插件名 的package包 3.该package包内需要包含子stub包，stub包包含 Component.java,ComponentContext.java,ResManager.java三个 固定桥接类，这三个类切记不要修改，我们可以原封不动的 把这个类包考到自己的工程目录下 4.把ComponentFactory.java文件copy到自己的工程目录里面，修 改ComponentFactory.java文件，在其中注册开发的Nat

13、ive插件： 如图所示”SmsComponent”就是注册的插件名称，这个可以自 己定义。不过这个名称要和xxx.xhtml中的插件控件的type属 性保持一致。 Android插件开发与说明插件开发与说明 插件工程类说明插件工程类说明 Component.java：组件基类，自定义插件类需继承于该类，切勿修改； ComponentContext.java：组件桥接类，切勿修改； ResManager.java：资源处理类，包含getResourcesIdentifier，getResource 两个函数 int getResourcesIdentifier(Context context,

14、String tag)：用于获取工程内资 源，包括图片，布局，字符串定义文件等，使用工程内资源时用于代替系统 R.layout.xml, R.drawable.icon, R.string.stringname等。 Drawable getResource( String filename)：用于读取ExMobi应用内图片文 件，返回drawable对象。 Android插件开发与说明插件开发与说明 插件工程插件工程XXXComponent类说明类说明 在com.appplugin +.插件名的package包下，开发继承于Component的插件，图为 Component类的抽象方法，XXX

15、Component，实现下列方法，需要注意的是 XXXComponent 需要和包名保持一致，比如包名为com.appplugin.smsCompontent, 那么这个文件名和类名就为smsCompontent。 Android插件开发与说明插件开发与说明 插件工程插件工程XXXComponent类类方法方法 方法方法说明说明 init初始化相关资源 release释放相关资源 getView返回用于显示的Android View（可以是LinearLayout，RelativeLayout等容器View） 对于不可见插件，返回null setViewSize告诉插件占用的空间大小，一般不用

16、处理 对于不可见插件，此方法不会被调用 set设置插件属性值，此方法会在2处被调用： 1.页面中插件xml节点中定义的属性，会通过此方法设置给插件 2.页面中Javascript调用插件的set方法 （Javascript中int会被自动转换为String类型传递给插件） addChildElement增加子节点数据，此方法会在1处被调用： 1）页面中插件xml节点定义了子节点，页面会调用addChildElement传递节点数据给插件， 根据子节点数量调用多次 get获取插件的属性值，此方法会在1处被调用： 1）页面中Javascript调用插件的get方法 call调用插件的方法，此方法会

17、在1处被调用： 1）页面中Javascript调用插件的call方法 Android插件开发与说明插件开发与说明 插件工程插件工程XXXComponent初始化过程 Android插件实例开发与使用插件实例开发与使用 开发开发新建工程新建工程 这里，我http:/ 上随便下载一个android控件小程序，下载完后导入到我们的工程目录，我们先运 行下它，证明这个代码本身是没有问题的，可以看出下图是一个日期时间的一个 android小控件，可以通过这个控件，进行快速的选择日期和时间。 Android插件实例开发与使用插件实例开发与使用 开发开发设计插件设计插件 首先我们要设计Native插件，其实

18、就是一个xml文件，把这个文件放入assets目录 中(这里只是为了方便后面做测试用，在打包的时候，其实是没有这个文件的，这段 代码应该在客户端的xxx.xhtml页面中)。 定义一个onClick属性名称，方法名为getDataTime ，这里的定义的getDataTime是 告诉android程序exmobi客户端有个getDataTime的方法需要调用，这个getDataTime 会在xhtml中的js进行定义的，目前我们没有exmobi工程，在测试的时候如果在 android里面把方法名称和参数值打印出来，就说明测试成功了。 需要注意的是，这里定义的方法，都是从andriod插件里面调

19、用exmobi中的js里面的 写法，如果从exmobi中的js调android插件里面的方法，我们需要用到call，这个我 们在后面会讲到。 Android插件实例开发与使用插件实例开发与使用 开发开发给资源名和资源文件添加前缀，并且修改给资源名和资源文件添加前缀，并且修改包名包名 因为我们的插件最终会和exmobi项目一起打包或者不止一个插件打包，最终形成一个项目 工程，那么工程里面的资源文件可能就会出现同名的情况，为了确保我这个插件和其他插件的 资源不会有同名的情况，那么我需要给我的资源文件加上唯一的标示。其中需要修改的资源包 括drawable、layout里面所有图片的名字和所有xml

20、的名字，还有string.xml里面的string 的name 名都要改掉。（如果资源比较多，这可能是个繁琐的过程，后面我们可能会提供脚本来修改） Android插件实例开发与使用插件实例开发与使用 开发开发给资源名和资源文件添加前缀，并且修改给资源名和资源文件添加前缀，并且修改包名包名 然后我们还需要修改包名，还记我们前面说的吗，要把所有包名加上com.appplugin，形式 为com.appplugin +.插件名的package包，这里我们定义包名为com.appplugin.datePicker，注意： 后面我会建一个datePicker类来继承插件的Component抽象类的方法，

21、所以我自己多加一个 datePicker的包名(注意：这里的datePicker 一定要和之前定义插件的type是一样的)。 Android插件实例开发与使用插件实例开发与使用 开发开发给资源名和资源文件添加前缀，并且修改给资源名和资源文件添加前缀，并且修改包名包名 我们修改完文件名和包名后，这个时候程序可能会出现红色的错误，我需要逐一的去修改 错误，因为资源变了，包名也变了，程序里面引用资源的地方可能会出错。修改完后，我们来 运行下程序，看看是否修改成功。 然后所有的布局文件里面的id也都要修改掉 Android插件实例开发与使用插件实例开发与使用 开发开发导入插件需要的类文件导入插件需要的

22、类文件 下面我们把stub包 包含Component.java,ComponentContext.java, ResManager.java的 三个文件全拷过来，注意不要修改里面的任何内容。 Android插件实例开发与使用插件实例开发与使用 开发开发导入插件需要的类文件导入插件需要的类文件 接下来，我们在把示例中的ComponentFactory.java 文件拷过来考到com.applugin.datePicker包 中，不过这里需要里面的内容。修改这个type的地方，这个值就是我们自己定义的插件名称， 如果有多个插件，这里就需要用if来判断，下面我们就需要new 一个插件，这里我还没有创

23、建 这个插件类，所以目前报错。 Android插件实例开发与使用插件实例开发与使用 开发开发 创建一个插件类，并且继承创建一个插件类，并且继承Component类类 在dataPicker这个类里面会实现Component类里面所有的抽象方法。 接下来，我们要来定义一些插件传过来的一些信息，我们之前给插件定义了一个点击事件 的方法，这里我们要在插件里面通过set和get方法实现它，通过get方法我们就可以得到插件控 件上面定义的getDateTime 方法名了，到时我们在android里面就可以通过 super.helper_callJsScript(formScript)调用客户端js里面的

24、getDateTime方法了， 并且可以传参数给客户端。 Android插件实例开发与使用插件实例开发与使用 开发开发 创建一个插件类，并且继承创建一个插件类，并且继承Component类类 然后，就是比较重要的一块了，要实现getView() 这个方法，这个方法是用来得到view，并且 把原来的view放在插件工程提供的activity里面。要想得到这个view, 我们需要把原来程序里面创 建view的代码修改下（原来创建activity的页面是MainActivity.java）。这里为了方便处理，我在 新建一个类用来修改以前的代码，MainActivity.java这个文件，到时候留给我

25、们测试用。这里我 就新建一个名字为datePickerRelayout.java 的类，这个类用来继承一个相对布局RelativeLayout。 Android插件实例开发与使用插件实例开发与使用 开发开发 创建一个插件类，并且继承创建一个插件类，并且继承Component类类 然后，就是比较重要的一块了，要实现getView() 这个方法，这个方法是用来得到view，并且 把原来的view放在插件工程提供的activity里面。要想得到这个view, 我们需要把原来程序里面创 建view的代码修改下（原来创建activity的页面是MainActivity.java）。这里为了方便处理，我在

26、 新建一个类用来修改以前的代码，MainActivity.java这个文件，到时候留给我们测试用。这里我 就新建一个名字为datePickerRelayout.java 的类，这个类用来继承一个相对布局RelativeLayout。 Android插件实例开发与使用插件实例开发与使用 开发开发 创建一个插件类，并且继承创建一个插件类，并且继承Component类类 原来MainActivity.java中的代码复制后并修改后的代码 Android插件实例开发与使用插件实例开发与使用 开发开发完善完善datePicker类中的类中的getView方法方法 在回到datePicker.java 里

27、面来，我们要在getView方法中把插件的context上下文传给 datePickerRelayout类里面，并且只需里面的方法，让整个程序可以完整的运行起来。 Android插件实例开发与插件实例开发与使用使用 开发开发导入导入native-common.jar 我们从插件示例里面把这个native-common.jar包复制到我这个工程的libs目录下，然后把示 例中的测试页面中带代码拷贝到我们这个项目的MainActivity.java里面来。 这里需要注意修改comType的值，修改成我们定义的插件名称。 Android插件实例开发与插件实例开发与使用使用 自测自测调客户端定义的调客

28、户端定义的js,并传值并传值 我们在开始定义插件的时候定义了一个getDateTime ，这个是要告诉android插件，exmobi页 面中有个方法名为getDateTime的方法需要调用。 我们希望点击“确定”然后调用exmobi里面的js,所以我们来看下android代码这个“确定” 按钮到底在什么地方，通过查找发现PowerHallStrArrayDialog.java文件里面。 Android插件实例开发与插件实例开发与使用使用 自测自测调客户端定义的调客户端定义的js,并传值并传值 我们在开始定义插件的时候定义了一个getDateTime ，这个是要告诉android插件，exmo

29、bi页 面中有个方法名为getDateTime的方法需要调用。 我们希望点击“确定”然后调用exmobi里面的js,所以我们来看下android代码这个“确定” 按钮到底在什么地方，通过查找发现PowerHallStrArrayDialog.java文件里面。 Android插件实例开发与插件实例开发与使用使用 自测自测调客户端定义的调客户端定义的js,并传值并传值 首先我们在datePicker.java里面定义一个getDateTime方法 我们在“确定”的点击事件里面，通过mCom来调getDateTime()方法。 Android插件实例开发与插件实例开发与使用使用 自测自测调客户端定

30、义的调客户端定义的js,并传值并传值 写好后，我们来运行下，因为先还没有和exmobi一起打包，所以我们只能通过日志的方式 来调试。 这个时候我们可以在日志里面看到，我们这个插件要准备调用exmobi页面中js的方法了。 Android插件实例开发与插件实例开发与使用使用 自测自测从从客户端页面的客户端页面的js向插件传值向插件传值 定义调用call方法之前，我们先定义一个可以修改时间的方法。我们直接在 PowerHallStrArrayDialog.java里面建一个changeDate方法 然后我们在datePickerRelayout.java里面定义一个方法来调用changeDate.

31、 Android插件实例开发与插件实例开发与使用使用 自测自测从从客户端页面的客户端页面的js向插件传值向插件传值 接着，我们在datePicker.java里面完善call方法，来调用setDate() 接下来我们开始调用call方法了，由于目前还是没有exmobi工程，所以我们还是一样在测试 文件里面模拟调用call, 下面我们打开MainActivity.java。 Android插件实例开发与插件实例开发与使用使用 自测自测从从客户端页面的客户端页面的js向插件传值向插件传值 最后，我们来运行下，看下效果 到这里，我们的插件基本上算是全部开 放完毕了。后面我就可以开始打包上传了， 不过

32、还有个地方我们忘记修改了，就是在我 们android里面所有调用资源文件的id的代码 都需呀修改，主要是为了避免打包后受到 exmobi的R.java文件的影响，这个过程可能 也是比较繁琐的过程，以后可能会提供脚本 替换。 比如页面中有 R.drawable.datepicker_wheel_bg 的地方全部 改成 ResManager.getInstance().getResourcesIdentifi er(R.drawable.datepicker_wheel_bg) Android插件实例开发与插件实例开发与使用使用 插件打包插件打包 前面我们已经基本开发完插件，下面我们需要将插件打包，并且和exmobi集成到一起。 首先我们把插件用到的代码文件导出一个jar包。 导出jar包的