Android插件开发讲义

Report
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

similar documents