AS3中的插件模式开发(一)

插件式开发是我非常喜欢的一种设计模式。实际工作中,对某一产品,经常因时间和场景的不同,需要不同的功能。比如,视频播放器,有时候需要包含贴片广告、更多推荐的全功能版本,有时候只需要播视频的基础功能;再比如一款在线游戏,可能圣诞需要上线一个活动,春节又希望上线另一个活动,但是两个活动的逻辑和功能可能完全不同,而且活动下线之后,里面的逻辑和功能可能再也用不上了。于是,为了解决这些问题,我们可以求助插件式开发。

本系列文章将在新博客更新,链接在此,请移步阅读。

继续阅读“AS3中的插件模式开发(一)”

Flash开发Android应用的一点摸索

今天早上在小米手机上跑通了Flash Builder开发Android应用的流程,大致经验如下:

  1. 真机测试要求移动设备必须有驱动,能够被windows系统识别
  2. Flash Builder比较傻,只能真机调试
  3. 调试的设备需要安装air,我的xt800系统只有2.1,无法安装air,所以虽然可以识别,但是无法调试,用小米就没问题
  4. 发布的时候可以直接打包运行时,但是体积会膨胀很多(大约8M,应该包含了air运行时)
  5. 发布后的apk能否在机器上运行仍需比照air的系统要求,xt800又败了……

分析Adobe的现状,我这么认为:

正如之前宣布的,已经放弃继续开发移动端的Flash Player插件,因为他们认为在移动端,Native App会击败绝大多数的Web App,而且开发者也几乎不会针对移动用户做很好的优化。与此同时他们加大对新开发环境的布局,新版Flash Pro和Flash Builder都支持至少三种Native App的发布(iOS、Android、Blackberry)。不过可惜的是,相对于iOS直接编译成原生应用,Android系统必须附带一个内绑定的air运行时实在让人很不爽,性能和系统要求会给产品发布带来很大问题。而且我相信iOS那种封闭的环境都能搞定,Android这种开放的标准理应更好做才是。

这可能跟air的尴尬处境有关。相比Flash Player这个事实标准,air从推出到现在始终不温不火,Adobe始终没有公布过它的安装率,估计一定不高。air除了能让我们这些前端工程师能不太费力的开发一些本地应用,似乎并没有起到很大的作用。但是Adobe官方对他寄予厚望,应用市场、开发大赛一直在搞,不过似乎没什么起色。如今,他们将air定位成移动端开发解决方案,试图和Flash Player各自霸占一条业务线。但是AIR对系统的要求使得它无法适用于所有机型,这就更让人心生迷惑了,有谁会选择这样一个解决方案呢?

或者我只能这样理解,air本身提供了多种成熟的解决方案,比如视频支持、3D支持、绘图API等,这些东西如果使用标准SDK自行开发的话会是很大一笔开支;而系统是可以自己刷的,所以相对起来,我们可以认为用户会比看起来的更多。

PhoneGap开发环境配置

趁着春节假期,学点新东西,前面也列了不少项目待做。除了一些是答应了朋友或者一直在搞的,就想试试把老项目迁移到移动平台上。Flash方面自然是Flash Builder了,JS方面考虑了一些时间,决定使用PhoneGap——因为有Adobe支持,应该比较有优势。

趁着春节假期,学点新东西,前面也列了不少项目待做。除了一些是答应了朋友或者一直在搞的,就想试试把老项目迁移到移动平台上。Flash方面自然是Flash Builder了,JS方面考虑了一些时间,决定使用PhoneGap——因为有Adobe支持,应该比较有优势。

继续阅读“PhoneGap开发环境配置”

春节期间项目计划

这个春节假期稍微长一些,而且大部分时间要在北京度过,所以我觉得应该发奋一下!

这个春节假期稍微长一些,而且大部分时间要在北京度过,所以我觉得应该发奋一下!整理一下我想做的,做个备忘:

  1. Chrome机票检索插件(尝试重构为Closure Library)
  2. 仓鼠球游戏
    1. 发现用FB进行移动开发不如我想象的那样好,暂停尝试
  3. 五花肉
    1. 完成了导航类
    2. 样式选择进行了修改
    3. 使用contenteditable属性替代input
    4. 开始重构大头生成器
  4. 聚享迁移到我的空间
    1. 恢复了访问
    2. 过两天开始迁移
  5. 懿仔网站收尾
  6. 游戏框架整理
  7. Flash插件开发系列文章
    1. 第一篇完成
    2. 第二篇完成
    3. 开始第三篇
  8. 瀑布模版开发
    1. 页面已经切好
    2. 开始在虚拟机里进行开发
  9. 个人博客的一些小修改
    1. 改进了样式和关键词

大概这么多,争取做完。做不完的话,以后继续做。

诡异的Chrome插件事件机制

Chrome插件在content script里使用JQ广播事件,可能会无法在页面里侦听。换做原生的就没有问题。

最近尝试开发Chrome插件,自然使用JQ来当基础。结果遇到一个问题:

我使用“程序注入(Programmatic injection)”的方式执行代码,试图实现自动填写表单的功能。因为目标网页的表单比较智能,前面的选项会影响后面选项的内容,所以必须在val(value)之后广播change事件来触发后面表单内容的填充。

结果失败了。直接在浏览器里使用控制台运行代码,没有问题,所以代码本身应该正确;确认需要的JS文件已经一一加载。于是我开始了漫长而挫折的调试之路。多次失败之后,我打开《英雄无敌三》换换心情……玩了一会儿游戏意外退出了,而我灵机一动,会不会是JQ广播事件的问题?在控制台调试没有问题,但是在content script里就不行,很可能是chrome把两段代码放在彼此隔离的环境中运行导致的。于是我放弃直接$(selector).change(),改用原生的dispatchEvent,结果,运行成功!

于是我猜,应该是JQ和Chrome的插件机制稍有冲突。可能以后做插件的话,还是Closure Library好些吧。

PS:写插件的好处是不用考虑兼容性,朝着Chrome写就行了。

CSS3 学习笔记

有关CSS 3的各种笔记

选择器

子节点(不包含孙节点)

E > F {
  // styles
}

第n个子节点

E > F:nth-child(2) {
  // 第二个F节点
}
E > F:nth-child(2n) {
  // 所有偶数节点
}
E > F:nth-child(2n + 1) {
  // 所有偶数节点后面那个节点
}
:nth-child(-n + 3) {
  // 前3个节点
}

紧邻的节点(从第二个往后开始生效)

E + F

多列文本

.column3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 15px;
  -webkit-column-gap:15px;
  column-gap: 15px;
}

还有一些column-xxx的方法,基本上可以望文生义。

渐变

线性渐变

.selector{
  background:-moz-linear-gradient(left, white, black); //firefox
  background:-webkit-linear-gradient(left, white, black); //webkit
  background:linear-gradient(to right, white, black); // standard
}

放射渐变

background:radial-gradient( [ <options> || <angle>,]? [ <shape> || <size>,]? <stop>, <stop>;[, <stop>]*)

.selector{
  background:-moz-radial-gradient(10% 30%, white, black); //firefox
  background:-webkit-radial-gradient(10% 30%, white, black); //webkit
}

清除浮动

.clr {
  zoom:1;
}
.clr:after {
  clear:both;
  visibility: hidden;
  display: block;
  height: 0;
  line-height: 0;
  content: "";
}

如果在chrome下,只要简单的:

.clr {
  overflow:hidden;
}

Kindle Fire和小米手机

最近买了两件电子产品,Kindle Fire和小米手机。简单说点使用感受吧。

最近买了两件电子产品,Kindle Fire和小米手机。简单说点使用感受吧。

Kindle Fire
Kindle Fire

先说Kindle Fire

这个Kindle是在亚马逊上买的,然后委托别人在美国收货后带回来,售价199美金,换算过来大概不到1300人民币,这个价格对比大多数平板3000以上的售价,我觉得还是相当划算的。

Kindle的优势在于有亚马逊来提供内容支持,在美国几乎有享受不完的内容,所以被寄托了“ipad杀手”的希望。可惜在国内因为有伟大的墙,同时受限于亚马逊种种销售策略,所以这些优势体现得并不明显。App不能买、电影电视剧不能看、书是英文的……还好这个平板本身性能优异,同时Android的资源并不匮乏,况且国内虽然看不到收费的好内容,但是免费的好内容还是很多的……

所以最后,尽管为期一个月的Amazon Prime几乎白白浪费,我还是很喜欢Kindle,我用它看了很多书,它的阅读体验真不是盖的。我现在都不太想骑车上班了,因为坐公交的话,可以看好多书~~

另外,我很喜欢他的塑料外壳,摩擦力大,很容易立起来,不像ipad,又尖又滑,除非用专用套或者自制的支架,否则很难保持立着的状态。

小窍门:发送文本文件、png文件到kindle的注册邮箱,邮件名写“Convert”,亚马逊会自动把内容转换格式,看起来非常安逸。

再说小米手机

其实这台小米手机我昨天才拿到,到今天也没用多长时间,不过我还是想拿它跟我的XT800进行一下对比。

首先,对比原生Android,Miui非常好用,也好看。在高配置的小米手机上运行非常流畅,很舒服。

其次,配置高就是好啊,操作好流畅啊~~

再次,开启调试模式,装上驱动和air,可以应对PhoneGap和Flash Builder的移动开发,实在是性价比甚高的测试机

最后,这个手机是内部购买的瑕疵品,因为手机上有几个完全不影响使用的漏光点,所以比正式售价又便宜了300,太好了。

Google新产品风格滚动条的实现方法

让页面当中的滚动条使用Google产品风格

Google全线产品改版后,褒贬不一。不过它们滚动条看起来很漂亮,简单好看,有点Ubuntu的感觉。

不过实现起来并不复杂,研究之后,发现是这样定义CSS的:

::-webkit-scrollbar{
  width:6px;
}
::-webkit-scrollbar-track-piece{
  background:none;
}
::-webkit-scrollbar-thumb {
  background:#DCD9DE;
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover {
  background:#EAE6EA;
}

当然,看到”-webkit“,自然只有webkit内核的浏览器比如Chrome才生效(我没有测试Safari)。具体支持哪些样式暂时还不确定,Google搜索“-webkit-scrollbar”竟然没有结果。已知background、border这些都没问题,:hover这样的伪类也支持,margin、padding似乎没有作用。以后再慢慢研究吧。

2012年新年计划

去年过完年,许下一些心愿,现在回过头去看看,大多数还是实现了的。如今再来一次,给今年定下一些目标,希望都能实现,哇咔咔。

去年过完年,许下一些心愿,现在回过头去看看,大多数还是实现了的。如今再来一次,给今年定下一些目标,希望都能实现,哇咔咔。

继续阅读“2012年新年计划”