十二月 9th, 2009

第四届 D2前端技术论坛

No Comments, 其它, by army8735.

2005 年前端工程师的职位开始在中国出现,2007 年第一届 D2 前端技术论坛在杭州举行,从此 D2 伴随着中国的前端一起成长,从此越来越多的互联网产品的背后有着职业前端工程师坚定的身影。在 D2 上我们曾交流过某项具体的前端技术,也曾探讨过团队协作的方式,那些美妙的话题都深入到我们频繁敲键盘的指尖。当架构、安全、性能等等在前端的领域扎根的时候,我们自己也在悄然发生质变,而推动这些变化的人和事正是 D2 想告诉你的。

我报名了,不知道何时能审核:
第四届 D2前端技术论坛 (12月19日·杭州)
宣传视频:

十二月 8th, 2009

逐渐使用css3

1 Comment, 前端开发, by army8735.

pchome首页右栏今日进行了调整,最初设计稿效果如图:
pchome-right

可以看到,浮动框出来的样式,如果用以前方式来处理的话,需要拼合几张图片才能做到,而且产生的多余tag亦会让人不爽。基于渐进增强的思想,似乎使用css3来做是最好的办法。

来看个例子/wp-content/uploads/2009/12/pchome-right.html

在支持css3的浏览器下,浮动框的阴影效果很好的表现了出来;然而不支持css3的浏览器在使用上并没有任何的影响——右侧和下方的阴影消失了——甚至以美学角度来看都无伤大雅。这种效果的代码结构和可维护性都很好,综合考虑下来最为可取,那么css3在是否可以以后的运用中越来越多地出现呢?

至于为何浮动层的矩形边线没有完整封闭,那是因为将其藏在右边列表下面,被列表的背景色给覆盖住造成的假象。

十二月 4th, 2009

夭折的视频播放器

4 Comments, as、flex, by army8735.

最近onlylady有一个需求,要制作一款自定义flash视频播放器。晕啊,as视频编程我可没有接触过,以前只是拖个组件写个列表,为pchome视频频道页做过,和如今的要求相差太远。没办法,目前能写as的也只有我了,硬着头皮上了。好在今天完成了基础功能,心想总算过来了,哪知最坏的消息过来了……

早上收到美国总部CBS邮件通知,这款播放器初衷是和CBS的全球视频播放器接口相通,由他们提供各种信息资源,我们来播放就够了。orz,产品部在最初就弄错了,可谓相当大的失误。而以我们的技术实力,能不能做到还是个未知数。面对CBSi的密密麻麻的英文文档,我只有傻眼的份……

早上和前段时间刚离职的zol中关村在线同事聊天,还在说些技术和工作上的事。silverlight不知何年何月能够占有比较大的份额,那时不知我会不会去瞅瞅。如果sl也深入的话,一个人的精力恐怕是不够的。广泛和专精,似乎永远都是鱼与熊掌。前端这个领域,不知道我涉及得到底是不是正好呢?

目前做到的程度,视频是我曾经传到土豆上的一段游戏结尾曲《月空下的思念》(幻世录2):

PS:期间把土豆和优库的视频播放器外壳下来看了下,两者都在100k左右,土豆的稍大一点。比较奇特的是两家风格大相径庭:土豆用了flex和pureMVC;优库完全自己的库,最吃惊的居然还是基于as2的。最终我只能远观了,视频编程方面我并不擅长,也没打算深入过。

PS2:更新了lrc支持。

十二月 1st, 2009

JAse开发点记

2 Comments, JAse, as、flex, by army8735.

JAse开源项目缓慢进展中,许多地方和许多算法不断地颠覆、重写,这也是预料当中的。目前来说总体架构是不会变的了:以一个swf文件为基础提供文本框和一些菜单栏的基本功能;语法分析插件以不同语法分发为各自的swf文件,用到的时候才去读取。

当然,所有的语法文件都是面向接口编程的(实现IParser接口即可,这个理念继承自jssc5),这也使得按需加载成为可能。废话不说,来看几张预览图。

开始的选择画面:

jase1

第一个被我“强奸”的是js(最熟么),其它的会陆续添上。我默认放了一段Mootools的代码:

jase2

拉一拉滚动条,性能还不错,就是有不少bug还没修正:

jase3

至于语法编辑器用到的破损、修复、高亮模型,我非常感谢http://www.cppblog.com/megax/archive/2008/07/09/55753.html这篇文章给予的提示,同时也感谢其作者和我互通邮件的帮助。不过Megax所采用的依然是分区正则法,并非DFA状态图分析。而C++的性能远非as3所能匹敌,所以JAse目前仅能做到千行级代码,上万行后就会感觉到卡。

as3的性能瓶颈其实并不是主因,主因是textfield的性能太弱。实际测试中只是在第一次装载大量文本(万行)会卡,在拖动分析的过程中却非常流畅。今天我装了CS4(以前一直用CS3),启用了GPU硬件加速来提高渲染textformat的速度,所以如果不计textfield的拖后腿的话,预计是能达到十万行的量的。如果分析状态的数据结构由数组换成Vector(类似Java的泛型ArrayList,基于性能考虑我决定JAse将基于Flash Player 10),那么百万行级也不是不可能。

所以在JAse基本完成后,如果自定义优化textfield的性能,则是重点。目前思路有点苗头,是否能实现就难说了。另外Text Layout Framework中并未包含什么高效的input组件,本来还想瞅瞅,结果失望而归。

十一月 25th, 2009

为TextField添加上tab缩进功能

3 Comments, JAse, as、flex, by army8735.

今天尝试为JAse的代码输入框添加tab缩进功能,华丽地失败了。仔细查阅下手册:

指定此对象是否遵循 Tab 键顺序。 如果该对象遵循 Tab 键顺序,值为 true;否则值为 false。 默认情况下,值为 false,但以下情况除外:

  • 对于 SimpleButton 对象,值为 true。
  • 对于具有 type = “input” 的 TextField 对象,值为 true。
  • 对于具有 buttonMode = true 的 Sprite 对象或 MovieClip 对象,值为 true。

原来如此,侦听TextField的按键事件,根本就判断不到是否是tab键,因为默认系统就屏蔽了。这样就无法改写默认响应方法,tab键变成了在按钮之间切换选择状态。

得儿,得罪不起你,去请你的上司吧。直接侦听stage的按键事件,改写其默认行为搞定。唯一有点不友好的地方是聚焦会先出现在按钮上,然后由改写的行为迅速回到输入框上并进行缩进。没办法,也只好这样了。

//全局侦听tag键,改变默认行为
addEventListener(Event.ADDED_TO_STAGE, function() {
	stage.addEventListener(KeyboardEvent.KEY_DOWN, function(event:KeyboardEvent):void {
		if (stage.focus == tf && event.keyCode == Keyboard.TAB) {
			saveInput();
			getSelection();
			//如果鼠标为选择区域,则先保存删除命令链
			if (left != right) {
				saveDelete();
			}
			//增加2个全角空格,增加输入命令链
			commandList.addCommand(new InputCommand(tf, tf.caretIndex, "\u3000\u3000"));
			tf.replaceSelectedText("\u3000\u3000");
			setIndex();
			focus();
		}
	});
	stage.addEventListener(KeyboardEvent.KEY_UP, function(event:KeyboardEvent):void {
		if (event.keyCode == Keyboard.TAB) {
			focus();
		}
	});
});