Android插件开发讲义

Download Report

Transcript Android插件开发讲义 

Native插件的开发
和使用——android
Native插件概述
Android插件开发
Android插件实例
与说明
开发与使用
Native插件概述
• 为了满足更多的应用场景，有时候需要扩展
ExMobi的能力。
• Native插件提供了这样一种扩展方式：熟悉原生
开发的人员根据ExMobi的接口要求开发插件，嵌
入到ExMobi应用中，提供给应用开发人员使用。
• ExMobi支持合作伙伴开发Android、IOS Native插
件，通过Edn打包可方便集成Native插件。烽火星
空会封装一些常用插件供选用，合作伙伴也可开
发自己的插件上传至Edn，打包时选择需集成插
件即可轻松生成集成插件版本的Apk安装包或Ipa
安装包。
Native插件概述
• 通讯录列表插件
• 时间日期插件
• 拖动九宫格插件
Android插件开发与说明
• 插件标签介绍
native插件提供了这样一种扩展方式：熟悉原生开发的人员根
据ExMobi的接口要求开发插件，嵌入到ExMobi应用中，提供给应
用开发人员使用。
native插件控件考虑支持以下功能：
1：native插件分为有界面插件和无界面插件两种，插件开发人员
通过实现getview接口来支持改插件是否显示界面；
2：native插件支持通过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
标准属性规定元素的唯一 id
字符串
否
style
标准属性样式定义
字符串
否
class
标准属性主要用于css
字符串
否
name
称名件控
字符串
否
value
设置控件默认选中值
字符串
否
type
插件名称
字符串
是
factoryna
me
插件工厂类名
注：ios插件必须填写
字符串
否
是否禁用该控件
注：禁用状态下无提交值
false：不禁用该控件，普
通状态（默认）；其他值：
禁用该控件，若属性不存
在则为普通非禁用状态。
否
disabled
Android插件开发与说明
控件 Css属性
属性名
取值
说明
取值
width
控件所占宽度
默认占满所在父容器。支持以下方式设
置：
整型，如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横向布局容器内其他控
件宽度已超出容器宽度，则设置宽度为
fill_parent的控件不显示；
Android插件开发与说明
• 控件 Css属性
控件所占空间高度，默认高度32dp
取值：
无默认值。支持以下方式设置：
整型，如height:40
整型+px，如height:40px
整型+dp，如height:40dp，默认32dp
height
控件所占高度
百分数，如height:20%
【注】
1：若设置为百分比形式，则高度为body高度*百分
比；若控件/容器若位于header/footer内时，高度百
分比无效；
2：设置高度时绘制与checkbox控件类似，即只影
响占位区域，控件展现大小无影响，控件位于占位
区域中间；
Android插件开发与说明
• 控件 Css属性
控件的水平对齐方式
取值
取值为：[ left, center, right ]，默认为
left。
left 居左；（默认）
center 居中
right 居右
display
控件是否显示
取值为：[ block, none ]，默认为block
block显示控件；
none隐藏对象，并且不为控件分配空间
margin
控件四边的外延边距，如果提供四个
值，将按上－右－下－左的顺序作用
于四边。如果只提供一个，四边均生
效。如果提供两个，第一个用于上－
下，第二个用于左－右。如果提供三
个，第一个用于上，第二个用于左－
右，第三个用于下
由整型或百分数组成，默认值8 4 8 4，单位
dp。用法：margin:2 2 4 2。上下margin不
支持百分比，若上下margin设置百分比则视
为0处理
align
Android插件开发与说明
• 控件 js属性
属性名
id
value
name
disabled
描述
返回slider控件的id。只读
返回当前值 字符串。只读
返回slider控件的名称。只读
返回或设置控件是否应被禁用。只要有该属性，返回为true
设置控件样式，在样式中如果出现下划线，则将下划线忽略并将下划线后面第一个字母大写。
display为错误值时仍返回错误值。支持style获取和设置属性包括：width/height /display；
style
className
objName
设置或返回元素对象的 class 属性值
返回该对象所属类名， 字符串全小写 只读。返回插件type属性名，全小写
Android插件开发与说明
• 控件 js属性
属性名
id
value
name
disabled
描述
返回slider控件的id。只读
返回当前值 字符串。只读
返回slider控件的名称。只读
返回或设置控件是否应被禁用。只要有该属性，返回为true
设置控件样式，在样式中如果出现下划线，则将下划线忽略并将下划线后面第一个字母大写。
display为错误值时仍返回错误值。支持style获取和设置属性包括：width/height /display；
style
className
objName
设置或返回元素对象的 class 属性值
返回该对象所属类名， 字符串全小写 只读。返回插件type属性名，全小写
Android插件开发与说明
• 控件 js方法
方法
string
get(attrName)
void set(attrName,
attrValue)
string
call(functionName,
param1,param2…)
描述
获取插件控件指定属性值
参数：
attrName：需要获取的属性名 字符串类型
返回值：
属性值，字符串，若无该属性则返回null
设置插件控件指定属性值
参数：
attrName：需要获取的属性名 字符串类型
attrValue：需要设置属性value值，字符串类型
返回值：无
调用插件控件方法
参数：
functionName：插件方法名称 字符串类型
param：可变参数集，参数个数可变，均为字符串类型，参数总数不能超过7个
返回值：调用插件方法结果，若无返回值则返回null
Android插件开发与说明
插件工程说明
1.
从http://www.exmobi.cn/resources/plugin/android/AppPlugin.zip
获取Android工程AppPlugin.zip，以这个工程为基础，参考其
中的示例进行开发，可以看到项目内文件结构如图
2.
每构建一个native插件，均需创建以com.appplugin +.插件
名的package包
3.
该package包内需要包含子stub包，stub包包含
Component.java,ComponentContext.java,ResManager.java
三个固定桥接类，这三个类切记不要修改，我们可以原封不
动的把这个类包考到自己的工程目录下
4.
把ComponentFactory.java文件copy到自己的工程目录里面，
修改ComponentFactory.java文件，在其中注册开发的Native
插件：如图所示”SmsComponent”就是注册的插件名称，这
个可以自己定义。不过这个名称要和xxx.xhtml中的插件控件
的type属性保持一致。
Android插件开发与说明
• 插件工程类说明
•
•
•
Component.java：组件基类，自定义插件类需继承于该类，切勿修改；
ComponentContext.java：组件桥接类，切勿修改；
ResManager.java：资源处理类，包含getResourcesIdentifier，
getResource两个函数
int getResourcesIdentifier(Context context, String tag)：用于获取工程
内资源，包括图片，布局，字符串定义文件等，使用工程内资源时用于代替
系统R.layout.xml, R.drawable.icon, R.string.stringname等。
Drawable getResource( String filename)：用于读取ExMobi应用内图
片文件，返回drawable对象。
Android插件开发与说明
• 插件工程XXXComponent类说明
在com.appplugin +.插件名的package包下，开发继承于Component的插件，图
为Component类的抽象方法，XXXComponent，实现下列方法，需要注意的是
XXXComponent 需要和包名保持一致，比如包名为
com.appplugin.smsCompontent, 那么这个文件名和类名就为smsCompontent。
Android插件开发与说明
• 插件工程XXXComponent类方法
方法
说明
init
初始化相关资源
release
释放相关资源
getView
返回用于显示的Android View（可以是LinearLayout，RelativeLayout等容器View）
对于不可见插件，返回null
告诉插件占用的空间大小，一般不用处理
setViewSize
对于不可见插件，此方法不会被调用
设置插件属性值，此方法会在2处被调用：
set
1.
页面中插件xml节点中定义的属性，会通过此方法设置给插件
2.
页面中Javascript调用插件的set方法
（Javascript中int会被自动转换为String类型传递给插件）
addChildElement
增加子节点数据，此方法会在1处被调用：
1）页面中插件xml节点定义了子节点，页面会调用addChildElement传递节点数据给插件，
根据子节点数量调用多次
get
获取插件的属性值，此方法会在1处被调用：
1）页面中Javascript调用插件的get方法
call
调用插件的方法，此方法会在1处被调用：
1）页面中Javascript调用插件的call方法
Android插件开发与说明
• 插件工程XXXComponent初始化过程
Android插件实例开发与使用
• 开发——新建工程
这里，我http://www.exmobi.cn/resources/plugin/android/exampledatapicker.zip上随便下载一个android控件小程序，下载完后导入到我们的工程
目录，我们先运行下它，证明这个代码本身是没有问题的，可以看出下图是一个
日期时间的一个android小控件，可以通过这个控件，进行快速的选择日期和时
间。
Android插件实例开发与使用
• 开发——设计插件
首先我们要设计Native插件，其实就是一个xml文件，把这个文件放入assets目
录中(这里只是为了方便后面做测试用，在打包的时候，其实是没有这个文件的，这
段代码应该在客户端的xxx.xhtml页面中)。
<nativecomponent
id="deskTop" style=””
type="datePicker"
onClick="getDateTime" >
</nativecomponent>
定义一个onClick属性名称，方法名为getDataTime ，这里的定义的
getDataTime是告诉android程序exmobi客户端有个getDataTime的方法需要调用，
这个getDataTime会在xhtml中的js进行定义的，目前我们没有exmobi工程，在测试
的时候如果在android里面把方法名称和参数值打印出来，就说明测试成功了。
需要注意的是，这里定义的方法，都是从andriod插件里面调用exmobi中的js里面
的写法，如果从exmobi中的js调android插件里面的方法，我们需要用到call，这个
我们在后面会讲到。
Android插件实例开发与使用
• 开发——给资源名和资源文件添加前缀，并且修改包名
因为我们的插件最终会和exmobi项目一起打包或者不止一个插件打包，最终形成一个项目
工程，那么工程里面的资源文件可能就会出现同名的情况，为了确保我这个插件和其他插件的
资源不会有同名的情况，那么我需要给我的资源文件加上唯一的标示。其中需要修改的资源包
括drawable、layout里面所有图片的名字和所有xml的名字，还有string.xml里面的<string 的
name名都要改掉。（如果资源比较多，这可能是个繁琐的过程，后面我们可能会提供脚本来
修改）修改前的工程文件
修改后的工程文件
Android插件实例开发与使用
• 开发——给资源名和资源文件添加前缀，并且修改包名
然后我们还需要修改包名，还记我们前面说的吗，要把所有包名加上com.appplugin，形
式为com.appplugin +.插件名的package包，这里我们定义包名为com.appplugin.datePicker，
注意：后面我会建一个datePicker类来继承插件的Component抽象类的方法，所以我自己多加
一个datePicker的包名(注意：这里的datePicker 一定要和之前定义插件的type是一样的)。
Android插件实例开发与使用
• 开发——给资源名和资源文件添加前缀，并且修改包名
我们修改完文件名和包名后，这个时候程序可能会出现红色的错误，我需要逐一的去修改
错误，因为资源变了，包名也变了，程序里面引用资源的地方可能会出错。修改完后，我们来
运行下程序，看看是否修改成功。
然后所有的布局文件里面的id也都要修改掉
Android插件实例开发与使用
• 开发——导入插件需要的类文件
下面我们把stub包 包含Component.java,ComponentContext.java,
ResManager.java的三个文件全拷过来，注意不要修改里面的任何内容。
Android插件实例开发与使用
• 开发——导入插件需要的类文件
接下来，我们在把示例中的ComponentFactory.java 文件拷过来考到
com.applugin.datePicker包中，不过这里需要里面的内容。修改这个type的地方，这个值就是
我们自己定义的插件名称，如果有多个插件，这里就需要用if来判断，下面我们就需要new 一
个插件，这里我还没有创建这个插件类，所以目前报错。
Android插件实例开发与使用
• 开发—— 创建一个插件类，并且继承Component类
private String onClick;
public void set(String name, String value) {
// TODO Auto-generated method stub
if (name.equals("onClick"))
{
onClick = value;
}
}
public String get(String name) {
// TODO Auto-generated method stub
if (name.equals("onClick"))
{
return onClick;
}
return "";
}
在dataPicker这个类里面会实现Component类里面所有的抽象方法。
接下来，我们要来定义一些插件传过来的一些信息，我们之前给插件定义了一个点击事件
的方法，这里我们要在插件里面通过set和get方法实现它，通过get方法我们就可以得到插件
控件上面定义的getDateTime 方法名了，到时我们在android里面就可以通过
super.helper_callJsScript(formScript)调用客户端js里面的getDateTime方法了，
并且可以传参数给客户端。
Android插件实例开发与使用
• 开发—— 创建一个插件类，并且继承Component类
然后，就是比较重要的一块了，要实现getView() 这个方法，这个方法是用来得到view，并
且把原来的view放在插件工程提供的activity里面。要想得到这个view, 我们需要把原来程序里
面创建view的代码修改下（原来创建activity的页面是MainActivity.java）。这里为了方便处理，
我在新建一个类用来修改以前的代码，MainActivity.java这个文件，到时候留给我们测试用。
这里我就新建一个名字为datePickerRelayout.java 的类，这个类用来继承一个相对布局
RelativeLayout。
public class dataPickerRelayout extends RelativeLayout {
public Context context_;
private datePicker mCom;
public dataPickerRelayout(Context context) {
super(context);
context_ = context;
}
}
Android插件实例开发与使用
• 开发—— 创建一个插件类，并且继承Component类
然后，就是比较重要的一块了，要实现getView() 这个方法，这个方法是用来得到view，并
且把原来的view放在插件工程提供的activity里面。要想得到这个view, 我们需要把原来程序里
面创建view的代码修改下（原来创建activity的页面是MainActivity.java）。这里为了方便处
理，我在新建一个类用来修改以前的代码，MainActivity.java这个文件，到时候留给我们测试
用。这里我就新建一个名字为datePickerRelayout.java 的类，这个类用来继承一个相对布局
RelativeLayout。
public class dataPickerRelayout extends RelativeLayout {
public Context context_;
private datePicker mCom;
public dataPickerRelayout(Context context) {
super(context);
context_ = context;
}
}
Android插件开发与说明
• 开发—— 创建一个插件类，并且继承Component类
原来MainActivity.java中的代码
复制后并修改后的代码
Android插件实例开发与使用
• 开发——完善datePicker类中的getView方法
在回到datePicker.java 里面来，我们要在getView方法中把插件的context上下文
传给datePickerRelayout类里面，并且只需里面的方法，让整个程序可以完整的运行
起来。
Android插件实例开发与使用
• 开发——导入native-common.jar
我们从插件示例里面把这个native-common.jar包复制到我这个工程的libs目录下，然后把
示例中的测试页面中带代码拷贝到我们这个项目的MainActivity.java里面来。
这里需要注意修改comType的值，修改成我们定义的插件名称。
Android插件实例开发与使用
• 自测——调客户端定义的js,并传值
我们在开始定义插件的时候定义了一个getDateTime ，这个是要告诉android插件，exmobi
页面中有个方法名为getDateTime的方法需要调用。
我们希望点击“确定”然后调用exmobi里面的js,所以我们来看下android代码这个“确定”
按钮到底在什么地方，通过查找发现PowerHallStrArrayDialog.java文件里面。
Android插件实例开发与使用
• 自测——调客户端定义的js,并传值
我们在开始定义插件的时候定义了一个getDateTime ，这个是要告诉android插件，exmobi
页面中有个方法名为getDateTime的方法需要调用。
我们希望点击“确定”然后调用exmobi里面的js,所以我们来看下android代码这个“确定”
按钮到底在什么地方，通过查找发现PowerHallStrArrayDialog.java文件里面。
Android插件实例开发与使用
• 自测——调客户端定义的js,并传值
首先我们在datePicker.java里面定义一个getDateTime方法
我们在“确定”的点击事件里面，通过mCom来调getDateTime()方法。
Android插件实例开发与使用
• 自测——调客户端定义的js,并传值
写好后，我们来运行下，因为先还没有和exmobi一起打包，所以我们只能通过日志的方式
来调试。
这个时候我们可以在日志里面看到，我们这个插件要准备调用exmobi页面中js的方法
了。
Android插件实例开发与使用
• 自测——从客户端页面的js向插件传值
定义调用call方法之前，我们先定义一个可以修改时间的方法。我们直接在
PowerHallStrArrayDialog.java里面建一个changeDate方法
然后我们在datePickerRelayout.java里面定义一个方法来调用changeDate.
Android插件实例开发与使用
• 自测——从客户端页面的js向插件传值
接着，我们在datePicker.java里面完善call方法，来调用setDate()
接下来我们开始调用call方法了，由于目前还是没有exmobi工程，所以我们还是一样在测试
文件里面模拟调用call, 下面我们打开MainActivity.java。
Android插件实例开发与使用
• 自测——从客户端页面的js向插件传值
最后，我们来运行下，看下效果
到这里，我们的插件基本上算是全部
开放完毕了。后面我就可以开始打包上传了，
不过还有个地方我们忘记修改了，就是在我
们android里面所有调用资源文件的id的代码
都需呀修改，主要是为了避免打包后受到
exmobi的R.java文件的影响，这个过程可能
也是比较繁琐的过程，以后可能会提供脚本
替换。
比如页面中有
R.drawable.datepicker_wheel_bg 的地方
全部改成
ResManager.getInstance().getResourcesId
entifier("R.drawable.datepicker_wheel_bg")
Android插件实例开发与使用
• 插件打包
前面我们已经基本开发完插件，下面我们需要将插件打包，并且和exmobi集成到一起。
首先我们把插件用到的代码文件导出一个jar包。
导出jar包的时候需要注意，这里只要src里面的文件，其他的都不要勾选，而且src里面
也不要勾选那个测试用的文件了。
Android插件实例开发与使用
• 插件打包
把导出的jar包放入libs里面。
Android插件实例开发与使用
• 插件打包
然后，在assets文件目录里面新建文件路径plugins/ datePicker
在该目录下创建一个config.xml文件，改文件主要是对插件的描述，描述内容如下：
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<config>
<version>1.0.0</version><!-- 插件版本 -->
<type> datePicker </type><!-- 插件名称 -->
<factoryname> </factoryname><!-- 插件工厂类名 Ios插件特有 -->
<description>http插件</description><!-- 插件描述 -->
<date>2013-12-31</date><!-- 插件创建日期 -->
<vendor url="www.nj.fiberhome.com.cn" email="[email protected]">fiberhome</vendor> <!-- 插件开发者信息 -->
</config>
Android插件实例开发与使用
• 插件打包
最后我们把这个zip包，在edn门户上进行上传和exmobi集成到一起，然后我们把这个集
成到一起的这个exmobi下载下来，进行安装，这个时候整个插件开发打包就算完成了。
Android插件实例开发与使用
• 插件打包——上传edn
下面我来介绍下如何在edn上上传插件。
首先登陆edn门户http://www.exmobi.cn/， 然后在导航栏上可以看到有一个“插件管理”的
模块。
红色区域是必填信息。
插件名称： 这里自己定义，主要能看出插
件的功能就可以了
系统平台：目前暂时只支持android和ios两
个系统的插件集成
重力感应：主要是选择横竖屏查看模式
插件： 这里就是我们之前打包好的插件zip
格式的文件
封面图片：上传一张可以提现插件样子的图
片当做商城展示封面，最好是Png格式。
效果图：这里给出了3张效果图，开发人员
可以把插件界面和功能通过图片方式展现出
来，最好是Png格式。
标签：随便填写
摘要：关于该插件的相关摘要。
Android插件实例开发与使用
• 插件打包——插件下载
等待打包，这个打包会把基座和插件打包一起。大概等5分钟左右，我们的插件就和
exmobi客户端成功打包到一起了。
Android插件实例开发与使用
• 插件使用
打包完成后，接下来我们在我们的应用里面新建一个页面来测试下这个插件，页面的内
容如下：
Android插件实例开发与使用
• 插件使用
下面我们点击下 这个按钮，把我们的插件显示出来
Android插件实例开发与使用
• 插件使用
下面我们在来测试下客户端js调用插件里面的方法，客户端js是通过call方法进行调用的，
下面我们设置一个值，然后让插件显示我们设置的值。
互动交流
F&Q