Posts Tagged flex

HTML5的当下与未来?

HTML5技术而今已不再陌生,不管是趋之若鹜,热情拥抱,还是远远张望,保持距离,HTML5都是技术论坛热门的话题,给人的感觉就是酷、新、看上去很美

任何技术都有他的适用范围,HTML5技术是一种被夸大了的万金油,在目前浏览器支持不一,开发工具,第三方类库缺乏的情况下,HTML5无法解决一切问题,但如果限定它的使用范围,HTML5确实可以优雅的解决很多问题

HTML5是什么?

侠义的HTML5

侠义的HTML5指HTML下一个主要的修订版本,是W3C制定的标准,目前还在发展中,在HTML 4.01和XHTML1.0标准基础上,HTML5标准增加和修改了一些标签元素,其中多媒体相关的有<video>, <audio>, <canvas>,同时集成了SVG内容,数据内容的元素有<section>, <article>, <header>, <nav>, <menu>等,还提供了新的API,如2D绘图(Canvas),离线存储(Local Storage),加强版的cookie(WebStorage),拖拽,通讯(WebSockets),浏览历史管理,文件API(上传下载本地存储),位置API(Geolocation)等。

HTML5

更多HTML5的介绍,可参阅:

http://en.wikipedia.org/wiki/HTML5

http://www.html5rocks.com

http://dev.w3.org/html5/spec

广义的HTML5

广义的HTML5包括HTML, CSS和JavaScript在内的一套技术组合,其目标是减少浏览器对于插件的依赖,提供丰富的RIA(富客户端)应用。所以CSS3, SVG, WebGL, Touch事件,动画支持等都属于HTML5技术范围

广义HTML5

相关技术

Web相关组织

W3C – 万维网联盟 - http://www.w3.org/

WHATWG – 网页超文本技术工作小组 - http://www.whatwg.org/

为什么选择HTML5技术?

互联网趋势

随着网络架构的完善,宽带提升,网速满足实时交互需求时,计算机结构也将发生变化,光驱消失,硬盘消失,内存增大,GPU愈加重要,现在B/S结构的应用越来越多,而HTML5旨在富互联网应用,能够改善B/S结构应用的用户体验,是互联网应用的趋势之一

HTML5 Vs Flash

以前富客户端应用主要通过插件技术实现,比如Adobe Flash, Microsoft Silverlight, Java Applet,存在一些问题:需要安装插件,不支持移动设备,私有技术,没有国际标准等等,当然插件技术也有优势的地方,有特定的用途,下面就Flash技术和HTML5进行比较

HTML5_Vs_Flash

HTML5的缺点

HTML5目前最大的问题有三个:功能简单且分散、浏览器支持不一

功能简单且分散

HTML5是一种技术集合,包括各种标签及其相关API,HTML,CSS,SVG,JavaScript等,没有统一的开发工具,一个完整的HTML5应用涉及到多种技术,导致开发难度大,对于企业应用,HTML5的功能有限,需要借助第三方类库

浏览器支持不一

一直以来HTML5都以跨平台著称,但实际上要实现这一目标工作量巨大,HTML5绝少一个浏览器的标杆(Webkit有希望成为),尤其目前在IE6/7/8占有率居高不下的情况下,希望用HTML5跨全平台基本是不可能的

导致的结果是用户体验不佳,那么什么时候可以选择HTML5呢?

HTML5适用范围

酷的应用

曾经有人这样形容HTML5,doing anything cool (on the web),HTML5可以做很酷的应用,无需安装插件,就可以在网页中全屏观看高清视频,玩儿轻巧的在线游戏,体验流畅的动画效果,浏览精美的网络图,收听网络电台的音乐……一些小而美的应用非常适合HTML5,企业应用中的某些模块也可以选择HTML5

非得跨平台吗?

每种编程语言和技术都有特定的适用范围,如果你的目标客户是iPhone,你只需要考虑Safari for Mobile就可以了,如果还要考虑Android平台,选择支持Webkit内核,如果目标人群是高端用户,用些新技术也是可行的,如果非得所有平台都支持,在基本功能之外,使用HTML5技术增加一些亮点,也会很有吸引力

总结

目前HTML5已经可以解决很多问题,多少可以用到一部分,而面向未来互联网,基于“云+终端”的构架,终端的HTML5的兼容解决方案必然会出现,那时候你就可以全面拥抱HTML5了。

Flex组件生命周期

flex组件从创建到销毁经历7个状态,这些阶段又可以分成四个阶段(出生、发育、成熟、死亡)

出生

构造(Constructio):

初始化flex组件对象,例如下面的代码,其所做的动作包括分配内存空间等等,构造会很快的完成,不需要对组件布局,没有风格设置,没有孩子被添加,不会参与到display list。

var button:Button = new Button();

添加(Addition):

parent.addChild(button);

组件创建出来,被添加父容器,程序将依次调用addingChild(), $addChild(), childAdded()。

addingChild: 这一步的执行也不是很重,所做的工作包括设置孩子的parent引用以及设置document引用,定义布局管理对象,设置字体,开始样式准备和样式管理

$addChild: 是flashPlayer的低级别的函数,所做的工作是将该组件添加到flash player 的display list

childAdded: 完成添加工作,派发child添加完成的事件,如果此时还没有完成对组件的初始化,则程序进入“初始化阶段”,也就是调用initialize()方法

初始化(Initialization):

程序以此调用:createChildren()/childrenCreated()/initializeAccessibility()/initializationComplete(),比如创建一个按钮,其自身包括一个文本框组件,这个文本框就是在createChildren()中被添加。

发育和成熟:

发育

无效和生效周期提供了一个分离的过程,使属性的设置和属性变化后的处理过程相分离,这种分离的设计可以保证重的处理被推迟执行,避免不必要的运算。

无效(Invalidation):

无效组件包括三种,无效属性,无效大小,无效显示列表(invalidateProperties/size/displayList),三个函数分别在组件属性变化,大小变化,绘制变化时调用。调用无效后,组件并不会立即重新绘制,而是三种没有先后关系,可以单独调用,也可以一起调用,比如按钮设置button.enabled = false,就会调用invalidateProperties();和invalidateDisplayList();,但不需要调用invalidateSize()因为这个属性变化不会影响按钮的大小。

生效(Validation):

组件无效后并不会立即生效,而是在RENDER 事件时才会生效,与无效的三个方法(invalidateProperties/size/displayList)对应的是commit property, measure, update display list,外加layout chrome方法
生效的调用是按顺序的,这样可以保证数据的正确性。

成熟

更新(Update):

组件从无效的生效的转还过程就是更新的阶段,这也是flex组件生命周期最主要的阶段。

死亡

移除(Removal):

移除通常就是从父节点上删除或者是这个组件的父容器的父容器被删除,以此类推。通常是在parent.removeChild(button)之后。

参阅:

http://flexcomps.wordpress.com/2008/05/09/flex-component-life-cycle/
http://www.developmentarc.com/site/sites/default/files/understanding_the_flex_3_lifecycle_v1.0.pdf