十个Flex/Air疑难杂症及解决方案简略

简介:

十个Flex/Air疑难杂症及解决方案简略
转自http://blog.sban.us/40.html

最近去一家台企,对方给我出了十道“难道”:在TileList中如果選擇檔過多,會出現捲軸,當拖動捲軸時,渲染的進度條會出現花屏現象;
简体:在TileList中如果选择档过多,会出现卷轴,当拖动卷轴时,渲染的进度条会出现花屏现象;電子白板中,控制權轉移;
简体:电子白板中,控制权转移;電子白板中,畫面同步;
简体:电子白板中,画面同步;電子白板中,錄影;
简体:电子白板中,录影;FLASH置頂問題;
简体:FLASH的置顶问题;聊天表情無法复制粘贴,由于聊天表情是动态文本,所以添加到textflow中的是一个sprite对象;
简体:聊天表情無法复制粘贴,由于聊天表情是动态文本,所以添加到textflow中的是一个sprite对象;老板模式,当系统焦点离开air程序后,无法检测到系统的key_down事件;
简体:老板模式,当系统焦点离开air程序后,无法检测到系统的key_down事件;Air注册表操作(登陆启动look程序);
简体:Air注册表操作(登陆启动look程序);在1.5的air运行时环境下,中文不能输入问题,因为客户端可能已经安装1.5的运行时,在网页安装中只能检测客户端是否安装了运行时,却无法检测到版本信息或者更新运行时;
简体:在1.5的air运行时环境下,中文不能输入问题,因为客户端可能已经安装1.5的运行时,在网页安装中只能检测客户端是否安装了运行时,却无法检测到版本信息或者更新运行时隐藏window边框后,鼠标在拖动窗口边界改变窗口大小时,不能设置系统光标样式。
简体:隐藏window边框后,鼠标在拖动窗口边界改变窗口大小时,不能设置系统光标样式
PS:一种语言在发音上有几十种不同的方言风格,在书写上竟然也有两种截然不同的风格,不止何时可以统一。
杂症病因及解决方案简略:
1, ITEMRENDERER的花屏问题
并非TileList有这个问题,在Flex3内,DataGrid,List,Tree等控件如果使用不当,均存在这个问题;在先前的fl组件包内的TileList组件也有类似阴影。根本原因在于,使用ItemRenderer的大数据控件,其在渲染时,并不会一次创建所有数据列/行的显示对象(ItemRenderer),它仅会创建在屏幕上可见的数据列/行,并且重复利用这些显示对象,以提交运行时效率。
可以做这样一种代码实验,以帮助人们理解这种机制:在一个TileList控件内,它本身有滚动条,它的ItemRenderer也使其有滚动条,在多屏数据的情况下,任意滚动一个ItemRenderer的滚动条,然后滚动TileList的滚动条到另一屏,你会发现,虽然数据已经变了,你从未滚动过这个数据,但它与你先前滚动过的那个数据具有相同的滚动位置。
从严格意义上讲,这并不能算是Adobe的bug,因为如果你严格按照Adobe的官方说明使用,多数情况下,是不会出现的,因此这个bug的复现也颇具难度。从Flex SDk 3.5开始,Adobe Flex团队,对所有基于ItemRenderer实现的数据控件针对开发者遇到的问题进行了改良,优化了SDK内部控件实现方法,并且添加了一个offscreenExtraRowsOrColumns属性,该属性意为非显示区域的行或列数,用于帮助开发者在特定情况下遇到的花屏问题。
如果遇到这个问题,如果解决(方案按优先级自上向下排列):
1) 修改策划
显示大数据时,传统滚动条是一个糟糕的设计,因为人的眼晴对于大量的,重复结构的数据,很难定位上次查看的位置,多数人都是边察看边用指在屏幕上做标记。此种情况下,
a)要么不使用滚动条,使用翻页,用户每次翻页后,重新取数据、向数据控件赋值,在这种情况下,DataGrid,TileList等均不会出现花屏问题,因为压根儿就不会有滚动,但在此时,使用Repeater效率更高。
b)要么设计一种粗粒度滚动条,如下图示意:

在这种粗粒度滚动中,每一个点相关于翻页设计中的一页,用户拖动时还相当有手感,相对传统滚动条要好许多,这种设计在许多产品中都已经开始使用。
2)在更新DataProvider时手动刷新控件视图
每次当data有变化,均手动再次设置一次ItemRenderer,大意如下:
list.itemRenderer = new ClassFactory(YourItemRenderer);
注:在Gumbo中,如果使用Bindable绑定数据,FB在编译时已经做了代码优化。所以,多数时候,按照官方方法可以避免很多问题。
3)使用offscreenExtraRowsOrColumns属性调整
这是最BT的方案,让人感觉是Adobe自己用算法难已处理了,所以请用户告诉控件目前有多少数据列/行在显示区外。具体用法请参照livedoc说明。
2-4,电子白板问题简略
在白板开发中,控制权转移,画面同步,录影属于基本功能点。在技术技巧上,录影使用ImageSnapshot取得数据,剩下的便是系统架构师的事情。白板若要做好,方方面面必须设计好,特别是多人同时在线应用。
最基本的白板实现方案是基于ShareObject,但这种实现是demo级的,既浪费资源性能又低,比较合理的设计,作者认为应该是这样:
1)控制权转移实则是多人数据同步,数据同步不要使用SO,当控制权变化时,由Server处理并向Client广播,如果在同一时间内白板只充许有一人控制,此时仅需向二人广播,如果其它人也需要知道当前人控权者是谁,通过另外统一的状态广播实现。
2)画面同步必须设计出二种机制,一种为指令绘制型,另一种为图像同步型。对于后来进入观看白板的人用户,它第一次需要向server请求当前最新的白板画面,server选择一个最可靠的client的白板数据发给新来者,或者使用p2p技术直接由client端发送。指令绘制型用于在活动用户之间更新白板数据、动作。指令需自行设计,这种设计可以轻松实现白板重绘。
3)录影在这里有两种实现,一种为ImageSnapshot,另一种为指令重绘型。
5,FLASH的置顶问题
默认情况下,在网页中swf对象之上放置不了浮动层,解决方案是修改FlashVars属性值,把wmode修改为opaque,同时对照其它对象,排列z-index。
6,聊天表情無法复制粘贴,由于聊天表情是动态文本,所以添加到TEXTFLOW中的是一个SPRITE对象
这个问题没有一步到位的方案,属于架构师考虑的设计问题。自定义一种输入框,自定义一套emoticon标签,每一个表情用一个自定义标签标识,监听输入框的copy与paste事件,送入剪辑板的数据仅包含emoticon标签,而不是图像数据,在paste时进行解析、替换。
7,老板模式,当系统焦点离开AIR程序后,无法检测到系统的KEY_DOWN事件
系统焦点离开AIR后,即使在AIR中有KEY_DOWN事情监听也无济于事。解决方案是,rumtime升级到AIR 2.0,在AIR程序启动时,同时启动一个C++ native progress,当AIR程序最小化至系统托盘后,由C++程序负责监听系统按键,以此实现AIR程度快捷键呼出。
8,AIR注册表操作(登陆启动LOOK程序)
Air直接写不了,解决方案有两种方向:

1)与问题7同,使用nvtive progress写注册表
2)不使用AIR,使用替换解决方案Flex4U
9,在1.5的AIR运行时环境下,中文不能输入问题,因为客户端可能已经安装1.5的运行时,在网页安装中只能检测客户端是否安装了运行时,却无法检测到版本信息或者更新运行时
这里面有二个问题,第一个,对于必须要求rumtime为2.0的air程序,在编译时指定,强制用户升级。
第二个,在网页中安装air,如何知道用户的air rumtime版本?
Adobe的air网页在线安装是通过这个swf实现的:

http://airdownload.adobe.com/air/browserapi/air.swf

下载,反编译后,里面使用一个叫做ProductManager的类进行客户端环境的签别,验证。一共有两个类文件:AIR.as与AIRLCEndpoint.as。
从原理上讲,可以hack反编译之后的源码,重新编译为自已的air.swf,然后自定义bridge网页安装实现。
10,隐藏WINDOW边框后,鼠标在拖动窗口边界改变窗口大小时,不能设置系统光标样式
这个问题不复杂。如果不使用系统镶边,自定义光标显示对象,添加进显示列表,并添加事情监听实现缩放与拖动逻辑。在livedoc中官方曾见有示例,有兴趣的朋友可以查一查。

sban 2010/6 北京

本文采用署名-非商业性使用-相同方式共享协议,属于AS3-Expert的一部分,转载请注明作者及出处,非商业。
如果您是Flash/AS3技术的爱好者,请加入AS3高级技术群:44985308,70782097。如果你是Flash/AS3方面的专家,请加入AS3专家群(71057902),申请验证请附上作品链接或博客地址。

No related posts.
本文转自jiahuafu博客园博客,原文链接http://www.cnblogs.com/jiahuafu/p/3640587.html如需转载请自行联系原作者

jiahuafu

相关文章
|
19天前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
63 1
|
19天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
167 0
|
4月前
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南:Flex多行布局详解
在现代移动应用开发中,流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度,在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表,重点关注多行布局与对齐策略的应用。
126 2
|
4月前
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐:从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中,Flex容器提供了强大而灵活的对齐系统,使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术,是构建专业级用户界面的关键。
140 0
|
4月前
|
UED 容器
5.HarmonyOS Next开发宝典:掌握Flex布局的艺术
Flex布局(弹性布局)是HarmonyOS Next中最强大的布局方式之一,它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示,还是复杂的自适应界面,Flex布局都能轻松应对。
160 0
|
4月前
|
UED 容器
10.HarmonyOS Next布局进阶:嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中,Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器,我们可以创建复杂而灵活的界面结构,满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局,以及如何合理分配和控制空间。
126 0
|
7月前
|
开发者 容器
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
208 10
鸿蒙开发:弹性布局Flex
|
前端开发 容器
flex布局
【10月更文挑战第7天】
255 87
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
1212 57