Flex常见问题及解决办法

Flex常见问题及解决办法

杨永耀,陈兵

北京北科博研科技有限公司

摘要：本文主要对Flex运用过程中几个常见问题的现象和解决办法进行说明，常见问题包括

1: Flex与ExtJs交互，切换tabpanel时导致事件和方法丢失

2: Flex嵌入切换到HTML中焦点不能输入中文

3: Flex数据异步加载和FLEX本身加载顺序控制

4: Flex嵌入到HTML中遮盖DIV的问题

关键词：Flex,ExtJs,事件丢失,中文输入,遮盖,异步加载

1.Flex与ExtJs交互，切换tabpanel时事件和方法丢失

我的flex封装文件是嵌入在extjs的tabpanel的一个tab中，当第一次打开该页面的时候，可以调用到ExternalInterface注册的方法，如果我切换到其他的tab然后再回到该页面，那么注册的方法就为null了。

也就是说操作完flex的东西，再切换tab后，flex中注册过的方法和监听事件都丢失了。

另外如果在多个页签中有多个tabpanel时，各个页签中的FLEX对象会出现互相卡死现象。

解决方法1：

重新注册flex中的方法和监听事件

解决方法2：

如果你点击flex里的内容怎么切换都没问题，只要操作过flex中的内容，在做tab切换，就会发现注册过的方法和监听事件都丢失了。

在切换tab前，可以把焦点从flex中移走，比如

contentTabPanel.on("beforetabchange",function(tabPanel,tab){

document.body.focus();

})

2.Flex嵌入切换到HTML中焦点不能输入中文

当焦点置于Flash后再切换到HTML元素中如HTML的INPUT输入框中，不管怎么切换我们的输入法，中文就是出不来。其实这算是Flash的一个BUG。

通过翻阅了FlexAPI相关函数时，发现flash.system.Capabilities参数组。

flash.system.Capabilities中有个是查看系统的输入法Capabilities.hasIME：[只读] 指定系统是否安装了输入法编辑器(IME)，如果是，则为true，否则为false。服务器字符串为IME。

当我们焦点进入到Flash时我们的IME.enabled属性直接被Flash禁用,IME.enabled值变为false 这也就是当我们为什么焦点放在HTML的元素中,无论如何切换输入法就是不管用的原因。

首先对Flash主程序进行事件监听用到这个事件MouseEvent.ROLL_OUT：

用户将指针设备从InteractiveObject实例上移开时分派。事件目标是指先前在指针设备下的对象或该对象的父级。relatedObject是将指针设备向其移动的对象。在该对象的父级链以上连续分派rollOut事件，以该对象为开头，并以除relatedObject的根或始祖之外的最高级别的父级结束。

rollOut事件的目的是简化带有子级的显示对象容器的移开行为的编码。当鼠标离开显示对象区域或任何其子级区域并转到除其子级以外的对象时，显示对象分派rollOut事件。这是与mouseOut事件行为不同的行为，因为该事件是在每次鼠标离开显示对象容器的任何子对象区域时才会被分派，即使鼠标仍保留在显示对象容器的另一个子对象上也是如此。

当光标离开Flash时手动设置输入法开启代码如下

appGroup.addEventListener(MouseEvent.ROLL_OUT, setSRF);

/**

* 当光标离开Flash时开启设置系统的输入法

* */

private function setSRF(event:MouseEvent):void{

if(Capabilities.hasIME){ //安装了输入法编辑器

try{

if(!IME.enabled){

IME.enabled=true;

}

IME.conversionMode="CHINESE";

}catch(error:Error){

}

}

}

3.Flex数据异步加载和FLEX本身加载顺序控制

当Flex比较大，本身加载比较慢，而同时数据采用通过JS进行异步加载和交互时，就会出现Flex还没有加载完成，就出现数据装载而找不到Flex对象。当然采用同步加载的方式也可以解决问题，但不利就是用户感受不是很好。

解决办法就是在Flex加载完成之后处罚相关JS标准事件，这样就能解决相关问题。

如下JS代码

functionChildrenRefresh(baseparams,initparams){

swfobject.embedSWF(REQUEST_CONTEXTPATH

+ '/rfs/flex/WaterLineKGraph.swf', 'caliChartFlashDiv',

'100%', '100%', '9.0.0', false, flashvars, params, attributes);

bp = baseparams;

if (baseparams.viewCode) showGraph();

}

watfChart.id = 'chartId';

var flashvars= {

'loading' : '【水位流量关系曲线图】',

'wmode' : 'transparent',

'menu' : false,

'getData': 'showGraph'

};

如FLEX中发现有'getData' : 'showGraph'时，在装载完成之后触发该函数，并提示数据开始装载，这样用户感受和效果会比较好。

functionshowGraph() {

if (!bp.viewCode) r eturn;

Watf.maskTopMsg('正在查询' , 'green');

Ext.Ajax.request({

method : 'POST',

url : REQUEST_CONTEXTPATH + '/watf/waterRegimeg.do?',

params :Ext.urlEncode({

viewCode :bp.viewCode,

note :bp.note,

name : ,

thmcd :bp.thmcd,

fthmcd :bp.fthmcd