Category Archives: WebFront

Birdeye — Flex Component

最近一直在使用Flex技术展示数据关系。使用的是Flex开源组件Birdeye中的关系型图表(Ravis),制作graph visualization。\n

在使用过程中逐渐了解了Flex,这是一种使用编程的形式来制作一些动画效果的方法。比较适合我这种对flash构图能力有限,但能写写代码的用户。

因为Birdeye是开源的,可以修改源代码满足应用需求的需要。使用过程中总结出一下几点:

1. 中文支持

源代码中的例子中,默认情况下输入中文是不显示的。原因是Ravis的例子中的内嵌了字体库MyriadWebPro.ttf和 MyriadWebPro-Bold.ttf,并通过style/main.css文件将这个字体库构造字体作为工程的默认字体,但是这个库没有包含中文字体。

网上有方法描述如何使用包含中文字体的字库作为默认字体库,参考如下

http://kevincao.com/2009/06/font-converter-update/

http://kevincao.com/2009/06/flash-font-4/

内嵌中文字体的最大问题是生成swf文件非常大,内嵌入网页很不合适。

现在的解决方法是,去掉字体的设置。不清楚后面的原理,猜测是使用系统自带的字体,估计在一些非中文操作系统上是不能显示中文的,但那有怎样呢,呵呵。

Jquery Autocomplete Plugin

使用的是官方插件:http://docs.jquery.com/Plugins/Autocomplete
参数参考:http://blog.sina.com.cn/s/blog_62a8fd490100ffz0.html
主要遇到下面三个问题,记录如下:
1. Firefox下,在打开中文输入发的时候,Autocomplete功能无法触发
参考:http://hi.baidu.com/cnkarl/blog/item/bba346be2b68f90218d81f8a.html
jquery autocomplete通过响应“keydown”进行的。在参考博文中提到:“在IE6中,当输入法打开时,输入的字符是不会触发”keydown”的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的;但在 firefox3.0下,无论输入法打开否,按键都会触发”keydown”事件,所以造成中文输入完毕,自动匹配的是刚才打出的部分中文拼音字母。 ——所以只有Firefox有问题。”
firefox有一个input变化的事件就是oninput,那么我们只要在原jquery.autocomplete.js第199行,插入如下代码:
.bind(”input”, function() { // @hack:support for inputing chinese characters in firefox onChange(0, true); });
插入后,代码大概如下:

jQueryinput.unbind();
jQuery(input.form).unbind(”.autocomplete”);
}).bind(”input”, function() {
// @hack:support for inputing chinese characters in firefox
onChange(0, true);
});
另外一篇博文:http://parkeffect.com/coding/chinese-ime-input-listening-with-jquery/ 提到,可以绑定一个”text”事件,解决firefox下的监听问题。
2. 中文编码问题
在jsp/servlet等后台获取jquery autocomplete的查询参数q的时候进行编码转换:
String query = new String(request.getParameter(”q”).getBytes(”ISO8859-1″), “UTF-8″); // jsp中
3. ajax请求后返回json字符串遇到单引号和双引号的问题
参考:http://social.microsoft.com/Forums/zh-CN/295/thread/1fbd9827-6b3c-41ed-9b79-07dfb4d1cd95
在js中, escape(”‘”)=%27, escape(’“‘)=%22;

// Java style

result += "[";
for (String suggestionQuery: [...]

Event Handler In Flex 3

在Flex3中事件的产生和捕获是非常重要和频繁使用的。下面简单介绍一下这一最常用的事件捕获机制。
首先是产生事件(Event):一般情况下,事件会依附于一个控件(组件),比如某个按钮被点击、某个开关被点击、某个组件被鼠标覆盖、某个文字获得焦点等等。可以设置这些事件发生时促发某个函数被执行,并且在这个函数中创建出一个事件(Event),或者Flex框架默认产生诸如CloseEvent.CLOSE这样的系统预设的事件。
然后将这些事件发射(dispatch)出来。这是一个事件的传播过程,相对复杂和透明有待进一步了解。
最后是时间的捕获和处理。一般在控件被创建之后,会对这个控件对象设定捕获的事件(EventType or EventName)及其处理函数(eventHandler),即调用其事件侦听函数(addEventListener)。
一般的程序框架如下:
myConponent.mxml:

<mx:Script>
<[!CDATA[
private function createEvent() {
var e:Event = new myEvent("myEvent");
dispatchEvent(e);
}
]]>
</mx:Script>
<mx:Conponent>
<mx:Button id=” click=’createEvent()’ />
</mx:Conponent>

application.mxml:

<mx:Application>
<mx:Script>
<[!CDATA[
private function init() {
var conponent:myConponent = new myConponent();
conponent.addEventListener(myEvent, eventHandler);
}
private function eventHandler(evt:myEvent):void {
do something.
}
]]>
</mx:Script>
</mx:Application>

初识Flex–构建动画展示

最近使用Adobe公司的Flex3做了一个在线展示。
Flex是一种通过编程创建flash的展现层的一套应用框架,包括了标记语言MXML、脚本语言ActionScript和Flex类库三个主要部分。Flex囊括了界面编程所需的类库,包括组件(components)、控件(controls)、容器(container)。并且拥有与外部数据和后台服务器以及和各种流行的服务器编程框架(jsp,php)交互的成熟的解决方案。
1、crossdomain.xml
这个是一个配置在服务器的端的xml文件,描述了允许数据访问的域名空间。当服务器端的数据等资源可能被另外一个域名空间下的flex程序访问时,需要在本服务器端的crossdomain.xml文件中指定其域名。这个应该是一个出于安全和利益考虑的技术限定。
2、页面间传递参数的几种方法
具网友讨论,Flex3中没有页面一说。只是在内容有所更新后,我们习惯于这是一次界面更替。在这个过程中往往涉及根据不同的参数获取相应的数据用于显示。这个时候,如何传递和获取呢。
一种简单的方法是通过构造URL,如http://www.example/page_new?param1=v1&param2=v2。基于这样的URL传值方式,Flex3中需要区别对待html页面还是swf页面。
如果是html页面:http://www.example/page_new.html?param1=v1&param2=v2。需要在ActionScript中获取URL然后编程解析。

private function getParams():Object {
var params:Object = {};
var query:String = ExternalInterface.call("window.location.search.substring", 1);
if(query) {
var pairs:Array = query.split("&");
for(var i:uint=0; i < pairs.length; i++) {
var pos:int = pairs[i].indexOf("=");
[...]