前些天参与了阿里云手机应用开发,现在应用上线了,也想写一些自己对于云应用开发的一些心得。
云应用开发我理解是以html与js对应与android里的xml与java开发模式的一套映射性质的开发模式。其中很多东西都继承了android开发的理念,比如android里的activity对应了云应用里的page,另外是整个page的生命周期的思想也基本了android的理念。下面就与android对比着来看下云app的开发模式。
1、生命周期
_package("tuantju.page"); _import("caf.ui.Page"); _import("caf.mui.ScrollView"); _class("DetailPage", Page, function(){ this._init = function(){ _super._init.call(this); this._scrollview = null; }; this.create = function(parent){ var obj = this.createTplElement(parent, "detail.xml"); this.init(obj); return obj; }; this.reset = function(params){ //TODO }; this.init = function(){ _super.init.apply(this, arguments); this.initComponents(); this.initActionElements(); }; this.dispose = function(){ _super.dispose.apply(this); this._scrollview.dispose(); this._scrollview = null; }; });
我们按照android的生命周期来解析下云应用的生命周期,我们可以有差不多下面的这么一张状态映射表:
Android 云应用 onCreate this.create onStart this.init onResume this.reset onStop
this.dispose
当然android的只是部分的生命周期,列出来的是对应云应用的一些状态。整个生命周期是从create开始的,跟android一样云app中在create方法中通常都是进行page类与相应的html模板匹配工作,类似与android的setContentView(R.layout.main)云中也是this.createTplElement(parent, "detail.xml"),继续进入init的话则是当用户跳转page时做的,其实在
创建page的实体,所谓创建实体就是如下图:
在app容器内部插入一个关于当前pageid的div,云app的编程模式虽然与android有很大类似,但实现的方式却是完全不一样的。android是通过线程类切换的方式来组织activity的,而云app是通过类似于对singlepage的html写入模板来组织切换的。当init的时候平台会插入一个div并初始化里面的一些容器和动作监听器类似的。并将它显示到用户可视范围。这和android也有异曲同工之处,android的可视周期也是从onStart开始到onDestory进程销毁结束的,但不同的是云app并没有类似与onDestory的机制,只有类似与onStop的dispose方法类实现,当一个page离开用户视觉范围平台为调用这个方法,但不会对于容器这个div进行销毁,另外类似与android的onResume在云app中则是reset这个方法,按照android的onResume形式这个reset方法是在page第一次初始化的时候跟在init之后调用的,另外当page切换回来的时候也会调用的,所以其实这个方法是page内部方法中比较关键的方法。因为跳转时候的page的参数传递都是需要靠这个方法来接受并处理的。
2、跳转方式
下面来对比看一下跳转。
Intent it = new Intent(); it.putExtra("accountStr", accountEtStr); it.putExtra("passwordStr", passwordEtStr); it.setClass(LoginActivity.this,HomeListActivity.class); LoginActivity.this.startActivity(it);
上面是android的跳转模式,有点费劲哈~要new出一个intent,再在里面放参数,然后进行从哪儿到哪儿的intent的写入,最后按照这个intent来启动一个activity。
下面再来看一下云app是如何做跳转的:
this._app.navPage('home', {type : 'detail'});
只有一个语句,比较的简洁,没有用到类似与android的中间对象,这里只是传了一个home这样一个字符串,由于我们已经在app的配置中已经写入了这样的配置参数,系统很简单的找到了需要跳转到的类的映射。
this.__conf__({ "page": [ //键(pageid) 模板文件名 类名 简要说明 {"pid": "welcome", "tpl": "welcome.xml", "clazz": "WelcomePage"}, {"pid": "home", "tpl": "home.xml", "clazz": "HomePage"}, {"pid": "city", "tpl": "city.xml", "clazz": "CityPage"}, {"pid": "search", "tpl": "search.xml", "clazz": "SearchPage"}, {"pid": "detail", "tpl": "detail.xml", "clazz": "DetailPage"} ] });
接下来,对比一下跳转后接受参数:
Intent it = getIntent(); String accountStr = it.getStringExtra("accountStr").toString(); String passwordStr = it.getStringExtra("passwordStr").toString();
android还是通过中间桥梁intent来进行的。
而在云app中可以直接在this.reset方法中的arguments中取得到传值参数对象拿到一个类似于intent的中间桥梁的对象。在reset本体中进行数据处理。
this.reset = function(params){ if(params.type === 'detail'){ //TODO } }
另外如果跳转每个activity要用到的数据在android中是利用ShareContext实现的(具体参照我这篇博客http://leyteris.iteye.com/blog/926031)
ShareContext shareContext = ((ShareContext)getApplicationContext()); shareContext.setClient(client);
而在云app中直接用html5中localstorage就能实现。
window.localStorage.setItem("tuantju_now_city_name", _name);
同样每一个page都能得到享元变量了
3、动作监听
在android中对于事件动作的监听采用的是和经典的java一样的监听的手段:
updateBtn.setOnClickListener(new OnClickListener(){ public void onClick(View v) { Intent it = new Intent(); it.setClass(HomeListActivity.this,PostActivity.class); HomeListActivity.this.startActivity(it); } });
在一个控件上绑上一个实现OnClickListener接口的类,并重写里面的onClick方法
而在云app中也是可以采用经典的js的事件bind来实现事件的监听。但云app又提供了另外一种类似为节点data写入的方式来绑定action。这一种方式在本身js中是没有实现的。下面看caf框架是怎么做的。
在html中需要对于要绑定事件的节点增加_action这个data数据。
<a _action="/blog_article/go_back/index.html">后退</a>
而在对应的page类中增加以do_为前缀的action响应事件方法。这个_action默认只对于a和button标签有效。
this.do_go_back = function(act, sender){ this._app.navPage('welcome'); };
其中参数中sender传递的动作响应的节点,而act则是动作事件的名称,具体可以参考手册上的使用。
其实caf在init的时候做了这样一个动作:this.initActionElements();这个方法就是上面说的默认对a和button有效的动作初始化方法。
当然我们可以你想的任何标签都有效你可以这样,比如有这样的html:
<li _action="/blog_article/goto_detail/index.html">
再这样声明:
this.initActionElements(this._self, this, ['li']);
这样就对li这个标签action有效化了,另外还有如果是动态的载入DOM节点,上面的action是不起效果的,需要在动态载入后重新执行一下initActionElements这个方法。
先写到这儿,云app开发其实还是很快的,对于开发功能性的app开发时间较java的android开发时间会缩短很多。开发效率也是非常高的,这种手机端利用js来mvc式的开发应用感觉还是不错的,但是现在平台限制比较大,只是适用于阿里云平台,这点有点局限性,如果平台方面能开发出一个在普通android下运行云app的apk平台,那将是很好的应用啊~另外感觉可以将caf这个框架和phonegap这种本地应用框架api结合弄出一个新的mvc式的框架,毕竟phonegap只是提供与本地的挂接并没有将里面的东西进行mvc化模式的应用,这方面还是有的搞搞的~~写的不好,不足的还请大伙拍砖
我的人品我做主,你的人品也是我做主。这款软件不但可以根据输入的名字算出你的人品分数,还可以计算你每一天的人品有几个星,还可以显示你指定的人品分数,不管人品如何,都只能是你指定的分数。
Android为我们提供了ListView 的多种实现方法,通过自定义显示布局让显示的内容更加美观,但是我们会发现这样一个问题,当我们操作ListView的时候,如果不使用手机上下按键的时候,直接用触摸拖动视图的方式,会发现ListView的背景一片黑色,而且所有被选中的文字都变成一片漆黑。
其实这个问题发生的原因在于ListView存在缓存颜色机制,因此我们可以通过设定缓存颜色为透明的方法来解决这个问题。
A、通过布局属性来设定(ListView的属性中直接定义)
android:cacheColorHint=”#00000000″
B、在代码中直接设定
listView.setCacheColorHint(Color.TRANSPARENT);
这样就可以解决黑色出现的问题了。